/* ===================================================================== SynApp — Mode « New » (refonte OUTIL MÉTIER, palette CLAIRE) --------------------------------------------------------------------- Tout est scopé sous html.synapp-new : le mode « Old » reste strictement identique. Le gabarit HTML et le JS fonctionnel ne sont pas réécrits — la STRUCTURE de l'espace de travail est refaite en CSS (flux, hauteurs, zones de défilement, ancrages). Seul new-mode-ux.js, inerte en Old, ajoute les affordances qui ne peuvent pas être faites en CSS. Cible : le chrome global (bannière, menus) + l'outil neuropsychologue complet (#programme-section) et ses 6 onglets. Grammaire visuelle — logiciel de travail, pas page vitrine : — canevas gris perle, panneaux BLANCS, filets 1px rgba(encre, .11) ; — profondeur SOBRE : l'ombre est réservée à ce qui flotte réellement (menus, barres collantes) ; les panneaux posés se lisent au filet ; — rayons courts (12 / 10 / 8 / 6px) : un outil se tient droit ; — densité : plus d'information par écran, moins de blanc perdu ; — micro-typographie capitale espacée pour labels/en-têtes/badges ; — onglets = classeur ANCRÉ sur le panneau de travail (une fenêtre continue, pas deux objets qui flottent l'un au-dessus de l'autre) ; — l'accent #3b59df réservé aux actions primaires et à l'état actif, tout le reste en « ghost ». STRUCTURE (section 15, ≥ 992px) : la page ne défile plus. La hauteur de la fenêtre est partagée entre le rail « Dossiers » à gauche et le plan de travail à droite, chacun avec son propre défilement. Les repères — barre d'onglets, bandeau patient, en-tête du rail, jauge de stockage — restent à l'écran pendant qu'on travaille dans le contenu. Note sur les noms de variables : ils sont hérités de la version sombre et conservés pour ne pas casser les repères (le menu Paramètres → Thème les pilote à chaud : --nm-bg…--nm-card, --nm-accent*, --nm-ink/muted, --nm-blocktitle-*, --nm-tab-*). Leur RÔLE est stable, leur valeur a été inversée. Seule exception à garder en tête : --nm-accent-hi était l'accent ÉCLAIRCI (lisible sur marine) ; c'est désormais l'accent RENFORCÉ (lisible sur blanc). ===================================================================== */ html.synapp-new { /* --- Palette de REPOS ------------------------------------------------ Le plan de travail occupe tout l'écran : du blanc sur ce format-là éblouit au bout de quelques minutes. Deux retouches successives par petites touches (blanc pur → blanc cassé) n'ont pas suffi — on prend donc franchement le parti des logiciels de production : un GRIS de plan de travail, pas un blanc légèrement sali. Hiérarchie de clarté, du plus sombre au plus clair (luminance relative mesurée entre parenthèses — le blanc vaut 1,00) : gouttière #d6dce8 (0,71) < canevas #dfe4ed (0,77) < en-têtes #e2e7f1 (0,80) < panneaux/cartes #ebeff6 (0,86) < champs de saisie (0,92) Le blanc PUR n'est plus employé que pour une seule chose : la page du rapport, qui représente une feuille destinée à l'impression. Il redevient ainsi porteur de sens au lieu d'être le fond par défaut. L'encre est adoucie (≈13:1 au lieu de 15:1 — bien au-dessus du seuil AA de 4,5:1) et l'accent désaturé : le bleu électrique d'origine « vibrait » sur les grandes plages claires. Ces sept variables sont dérivées à chaud par Paramètres → Thème : si ce gris ne convient pas, la teinte ET sa clarté restent réglables sans toucher au code. */ --nm-bg: #dfe4ed; --nm-bg-soft: #d6dce8; --nm-bg-raise: #ebeff6; --nm-panel: #ebeff6; --nm-panel-header: #e2e7f1; --nm-card: #ebeff6; --nm-card-hover: #e5eaf3; /* Les champs / zones de texte sont la surface la plus claire du plan de travail : c'est ce qui signale « ici, on lit ou on écrit ». Dérivée du panneau plutôt que fixée, pour que le rapport de clarté survive à Paramètres → Thème. */ --nm-field: #fcfdff; --nm-field: color-mix(in srgb, var(--nm-panel) 28%, #ffffff); --nm-ink: #232a3b; --nm-ink-rgb: 35, 42, 59; --nm-muted: rgba(35, 42, 59, 0.64); --nm-faint: rgba(35, 42, 59, 0.42); --nm-line: rgba(35, 42, 59, 0.13); --nm-line-soft: rgba(35, 42, 59, 0.07); --nm-surface: rgba(35, 42, 59, 0.03); --nm-surface-2: rgba(35, 42, 59, 0.06); --nm-surface-hover: rgba(35, 42, 59, 0.09); /* LA bande. Source unique pour tous les bandeaux colorés : barre d'onglets, bannière principale, en-tête « Dossiers » et en-têtes de blocs (Cotations, Tableaux de normes, Données patient…). Dérivée de l'accent, donc pilotée par Paramètres → Thème → Couleur d'accent. --nm-on-band est l'encre à poser dessus : elle ne suit PAS le réglage « Base » (qui teinte les textes secondaires sur fond clair), sinon un choix de gris rendrait les titres illisibles sur l'aplat. */ /* Hauteur du bandeau « dossier patient ». Comme --nm-footer-h : valeur IMPOSÉE, posée sur le bandeau ET réservée en haut du panneau qui défile dessous. Une seule source de vérité, donc jamais de contenu masqué ni de bande vide. */ --nm-ctxbar-h: 34px; --nm-band: linear-gradient(180deg, var(--nm-accent) 0%, var(--nm-accent-2) 100%); --nm-band-line: var(--nm-accent-2); --nm-on-band: #ffffff; --nm-on-band-soft: rgba(255, 255, 255, 0.88); --nm-on-band-faint: rgba(255, 255, 255, 0.7); --nm-on-band-veil: rgba(255, 255, 255, 0.16); --nm-on-band-line: rgba(255, 255, 255, 0.35); /* Indigo posé plutôt que bleu électrique. */ --nm-accent: #4059b3; --nm-accent-2: #33488f; /* Accent RENFORCÉ : sert partout où l'accent doit rester lisible en texte sur fond clair (liens, icônes actives, badges). */ --nm-accent-hi: #33488f; --nm-accent-soft: rgba(64, 89, 179, 0.10); --nm-accent-med: rgba(64, 89, 179, 0.17); --nm-accent-dim: rgba(64, 89, 179, 0.34); --nm-grad: linear-gradient(135deg, #5570c4 0%, #4059b3 100%); --nm-grad-hover: linear-gradient(135deg, #4a64bb 0%, #354b96 100%); /* Élévations : neutres, basse opacité. En mode outil elles servent UNIQUEMENT à ce qui flotte vraiment (menus, barres collantes, tiroirs) — les panneaux posés se lisent au filet. */ --nm-shadow-xs: 0 1px 1px rgba(35, 42, 59, 0.035); --nm-shadow-sm: 0 1px 2px rgba(35, 42, 59, 0.05), 0 3px 8px -5px rgba(35, 42, 59, 0.12); --nm-shadow-md: 0 1px 2px rgba(35, 42, 59, 0.05), 0 10px 26px -14px rgba(35, 42, 59, 0.26); --nm-shadow-lg: 0 2px 4px rgba(35, 42, 59, 0.05), 0 22px 48px -22px rgba(35, 42, 59, 0.32); /* Rayons courts : l'outil se tient droit. */ --nm-radius-lg: 12px; /* panneau de travail, rail */ --nm-radius: 10px; /* cartes, blocs */ --nm-radius-sm: 8px; /* champs, listes */ --nm-radius-xs: 6px; /* boutons, pastilles */ /* Gabarit de la coquille (section 15). */ --nm-rail-w: 292px; --nm-gap: 12px; --nm-shell-pad: 14px; /* Hauteur de l'ourlet légal. C'est une valeur IMPOSÉE, pas mesurée : elle est à la fois posée sur le pied de page (`height`) et retirée de la coquille. Une seule source de vérité, donc ni vide résiduel ni débordement possibles — quoi qu'il arrive au contenu du pied. 22px à TOUTES les largeurs : un ourlet légal n'a pas de cible tactile, et une fenêtre étroite (ou un zoom Windows à 150 % qui ramène un écran 1366 à ~910px CSS) ne doit pas le faire réapparaître en grand. */ --nm-footer-h: 22px; --nm-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Titre de bloc — LA source unique de vérité pour TOUS les en-têtes de sous-blocs (card-header, .fiche-section-header, .qn-section-header). Référence : « Génération du formulaire » dans Informations patient. Modifier ces valeurs suffit à retoucher tous les blocs. */ --nm-blocktitle-family: inherit; --nm-blocktitle-size: 0.72rem; --nm-blocktitle-weight: 700; --nm-blocktitle-tracking: 0.02em; --nm-blocktitle-style: normal; --nm-blocktitle-transform: none; --nm-blocktitle-color: var(--nm-muted); --nm-blocktitle-icon: var(--nm-accent); /* Typo des onglets / sous-onglets (pilotée par Paramètres → Thème). */ --nm-tab-family: inherit; --nm-tab-size: 0.86rem; --nm-tab-size-inner: 0.76rem; --nm-tab-weight: 600; --nm-tab-style: normal; --nm-tab-tracking: 0.02em; --nm-tab-transform: none; color-scheme: light; } /* ===================================================================== 0. Chrome global — canevas clair + bannière claire (s'applique dès que le mode New est actif, toutes sections) ===================================================================== */ /* Le fond bleu dégradé du jurerait sous une bannière claire : on pose le canevas perle du thème. */ html.synapp-new body { background: var(--nm-bg); } /* ---- Bannière principale : bande d'accent, comme en mode Old ---------- Le gabarit porte déjà `navbar-dark` : Bootstrap suppose donc une encre claire, ce qui joue en notre faveur. Les surcharges ci-dessous ne concernent QUE le chrome de la barre — les menus déroulants qui en descendent restent des popovers clairs (voir plus bas), sinon on aurait du blanc sur blanc dans le menu Paramètres. */ /* La bannière DÉFILE avec la page (index-page.css la fige en `sticky`). Sur un outil plein cadre, la garder collée coûtait ~93px de hauteur utile en permanence ; on préfère la laisser remonter et libérer l'écran. ⚠️ Conséquence : plus rien ne doit s'ancrer sur --app-navbar-height pour se positionner par rapport au HAUT DE LA FENÊTRE — une fois la bannière remontée, cette réserve devient un trou. Les trois consommateurs (rail collant, message « sélectionnez un dossier », menu Profil) sont recalés plus bas. La variable reste juste pour ce qui doit vraiment mesurer la bannière. */ html.synapp-new #app-main-navbar.navbar { position: static; background: var(--nm-band); border-bottom: 1px solid var(--nm-band-line); box-shadow: var(--nm-shadow-xs); } /* Le menu Profil et son voile sont `fixed` sous la bannière : sans la bannière collante, ils laisseraient une bande vide en haut dès qu'on a défilé. Ils partent du haut de la fenêtre. */ html.synapp-new .profile-sidebar, html.synapp-new .profile-overlay { top: 0; } html.synapp-new #app-main-navbar .navbar-brand { color: var(--nm-on-band); letter-spacing: -0.01em; } html.synapp-new #app-main-navbar .navbar-brand i { color: var(--nm-on-band); } /* Entrées de navigation : pastilles calmes. On neutralise le « saut » (translateY + ombre portée) de la version Old — un voile suffit et le mouvement paraît plus net. */ html.synapp-new #app-main-navbar .navbar-nav > .nav-link:not(.dropdown-menu *), html.synapp-new #app-main-navbar .navbar-nav .nav-item > .nav-link:not(.dropdown-menu *) { color: var(--nm-on-band-soft) !important; font-weight: 600; font-size: 0.93rem; border-radius: var(--nm-radius-xs); transform: none !important; box-shadow: none !important; transition: color 0.25s var(--nm-ease), background-color 0.25s var(--nm-ease); } html.synapp-new #app-main-navbar .navbar-nav > .nav-link:not(.dropdown-menu *):hover, html.synapp-new #app-main-navbar .navbar-nav .nav-item > .nav-link:not(.dropdown-menu *):hover { color: var(--nm-on-band) !important; background-color: var(--nm-on-band-veil) !important; } html.synapp-new #app-main-navbar .navbar-nav > .nav-link.active:not(.dropdown-menu *), html.synapp-new #app-main-navbar .navbar-nav .nav-item > .nav-link.active:not(.dropdown-menu *) { color: var(--nm-on-band) !important; background-color: rgba(255, 255, 255, 0.22) !important; } html.synapp-new #app-main-navbar .navbar-nav .nav-link:not(.dropdown-menu *) i { color: inherit; } /* ⚠️ Le `:not(.dropdown-menu *)` ci-dessus n'est pas cosmétique : la barre d'onglets du menu Paramètres est un `.nav-tabs` imbriqué DANS `.navbar-nav` (le menu descend d'un bouton de la bannière). Sans cette exclusion, ses onglets héritaient de l'encre claire de la bande et devenaient blancs sur le popover blanc. */ /* Le garde-fou du boot (encre claire forcée sur l'onglet actif) redevient JUSTE maintenant que la bannière est colorée : on ne le contre plus. */ /* Boutons de la bannière (Profil, Connexion, Déconnexion, cloche, roue) : `btn-outline-light` retrouve son sens sur fond coloré. On garde juste le rayon court du thème. `:not(.dropdown-menu *)` protège les boutons qui vivent DANS un menu déroulant clair. */ html.synapp-new #app-main-navbar .btn-outline-light, html.synapp-new #app-main-navbar .group-bell-btn { color: var(--nm-on-band) !important; border: 1px solid var(--nm-on-band-line); background: transparent; border-radius: var(--nm-radius-xs); } html.synapp-new #app-main-navbar .btn-outline-light:hover, html.synapp-new #app-main-navbar .group-bell-btn:hover { color: var(--nm-on-band) !important; background: var(--nm-on-band-veil); border: 1px solid var(--nm-on-band-line); } /* Les menus déroulants de la bannière sont des popovers CLAIRS : tout ce qu'ils contiennent doit retrouver l'encre sombre, sinon les règles ci-dessus (portée #app-main-navbar) y laisseraient du blanc sur blanc. */ html.synapp-new #app-main-navbar .dropdown-menu .btn-outline-light, html.synapp-new #app-main-navbar .dropdown-menu .btn-outline-secondary, html.synapp-new #app-main-navbar .dropdown-menu .btn { color: var(--nm-ink) !important; border-color: var(--nm-line); } html.synapp-new #app-main-navbar .dropdown-menu .nav-link { color: var(--nm-muted) !important; } html.synapp-new #app-main-navbar .dropdown-menu .nav-link.active { color: var(--nm-accent-hi) !important; background-color: transparent !important; } /* Switch Old / New : segmented control posé SUR la bande. */ html.synapp-new .site-mode-switch { background: rgba(255, 255, 255, 0.14); border: 1px solid var(--nm-on-band-line); } html.synapp-new .site-mode-btn { color: var(--nm-on-band-soft) !important; } html.synapp-new .site-mode-btn:hover { color: var(--nm-on-band) !important; } html.synapp-new .site-mode-btn.active { background: var(--nm-panel); color: var(--nm-accent-hi) !important; box-shadow: var(--nm-shadow-sm); } /* Menu déroulant « Programme » de la bannière : il FLOTTE — il a droit à l'ombre. */ html.synapp-new .programme-dropdown-menu { background: var(--nm-bg-raise); border: 1px solid var(--nm-line); border-radius: var(--nm-radius); box-shadow: var(--nm-shadow-md); } html.synapp-new .programme-dropdown-menu .dropdown-item { color: var(--nm-muted); border-radius: var(--nm-radius-xs); } html.synapp-new .programme-dropdown-menu .dropdown-item:hover, html.synapp-new .programme-dropdown-menu .dropdown-item:focus { background: var(--nm-accent-soft); color: var(--nm-accent-hi); transform: none; } html.synapp-new .programme-dropdown-menu .dropdown-item.active { background: var(--nm-accent-soft); color: var(--nm-accent-hi); box-shadow: none; } html.synapp-new .programme-dropdown-menu .dropdown-item.active i { color: var(--nm-accent-hi); } /* --------------------------------------------------------------------- Pied de page légal : un ourlet, pas un bloc --------------------------------------------------------------------- Il doit rester accessible depuis toute page (art. 3 al. 1 let. s LCD, art. 13 RGPD) — on ne le masque donc pas. Mais il prenait ~81px (marge haute de 2rem comprise), autant de hauteur volée à un plan de travail calibré sur la fenêtre — et, la place manquant, les liens repassaient à la ligne, ce qui DOUBLAIT sa hauteur. Deux corrections : une seule ligne, jamais de retour (défilement horizontal en dernier recours), et une échelle typographique d'ourlet. La coquille s'y adapte seule (--nm-footer-h, même variable). --------------------------------------------------------------------- */ html.synapp-new .app-legal-footer { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 1030; height: var(--nm-footer-h) !important; min-height: 0 !important; max-height: var(--nm-footer-h) !important; box-sizing: border-box; display: flex !important; align-items: center; overflow: hidden; margin: 0 !important; padding: 0 12px !important; border-top: 1px solid var(--nm-line); background: var(--nm-bg); color: var(--nm-muted); font-size: 0.62rem; line-height: 1.2; } /* L'ourlet est en fixed : pas de padding-bottom sur body (sinon trou sous la coquille). La section Programme se cale via top/bottom. */ /* display:flex EST obligatoire : sans lui (les styles Old sont scopés hors .synapp-new), marque + nav s'empilent en bloc ≈ plusieurs cm. */ html.synapp-new .app-legal-footer-inner { display: flex !important; width: 100%; max-width: none; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 0 0.7rem; overflow: hidden; } html.synapp-new .app-legal-footer-links { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0 0.7rem; min-width: 0; overflow-x: auto; scrollbar-width: none; } html.synapp-new .app-legal-footer-links::-webkit-scrollbar { height: 0; display: none; } /* Encre à 0,72 plutôt que l'opacité 0.65/0.7 d'origine : à cette taille, le texte cumulé tombait sous 3:1 — pas acceptable sur une mention légale. Ici on est à ~5:1. */ html.synapp-new .app-legal-footer-brand, html.synapp-new .app-legal-footer-links a { color: rgba(var(--nm-ink-rgb), 0.72); opacity: 1; white-space: nowrap; } html.synapp-new .app-legal-footer-links a:hover { color: var(--nm-accent-hi); } /* Sous 992px : coquille outil (onglet actif jusqu'au pied). Le rail reste le tiroir de mobile.css ; seule la colonne de travail est calée sur 100vh − bannière − ourlet. */ /* ===================================================================== 1. La coquille — canevas clair plein cadre (la mise en page plein écran elle-même est en section 15) ===================================================================== */ html.synapp-new #programme-section.content-section { background: var(--nm-bg); color: var(--nm-ink); } html.synapp-new #programme-section ::selection { background: rgba(64, 89, 179, 0.18); color: var(--nm-ink); } /* Encre par défaut */ html.synapp-new #programme-section, html.synapp-new #programme-section p, html.synapp-new #programme-section span, html.synapp-new #programme-section li, html.synapp-new #programme-section label, html.synapp-new #programme-section div { color: var(--nm-ink); } html.synapp-new #programme-section .text-muted, html.synapp-new #programme-section .text-secondary { color: var(--nm-muted) !important; } html.synapp-new #programme-section .text-primary { color: var(--nm-accent-hi) !important; } html.synapp-new #programme-section .text-danger { color: #c02c3c !important; } html.synapp-new #programme-section a:not(.btn):not(.nav-link) { color: var(--nm-accent-hi); text-decoration: none; transition: color 0.3s var(--nm-ease); } html.synapp-new #programme-section a:not(.btn):not(.nav-link):hover { color: var(--nm-accent-2); text-decoration: underline; text-underline-offset: 3px; } /* ===================================================================== 1b. La fenêtre de travail — panneau BLANC ancré sous la barre d'onglets (Informations patient, Questionnaires, Analyse…) ===================================================================== */ html.synapp-new #programme-section .programme-tab-content-wrapper>.tab-content { background: var(--nm-panel); border: 1px solid var(--nm-line); /* Coins hauts carrés : le classeur d'onglets se pose dessus. */ border-top: 0; border-radius: 0 0 var(--nm-radius-lg) var(--nm-radius-lg); box-shadow: var(--nm-shadow-xs); margin-top: 0; /* Pas d'overflow:hidden ici : le contenu doit pouvoir défiler (section 15) et les menus déroulants s'échapper vers le bas. */ } /* Réserve d'espace pour le bandeau « dossier patient », qui est épinglé en haut du panneau (section 11) et donc HORS du flux : sans elle, les premières lignes de l'onglet passeraient dessous. Même variable que la hauteur du bandeau — les deux ne peuvent pas diverger. La réserve n'est posée que si un dossier est sélectionné (`:not(.d-none)`). */ html.synapp-new #programme-section .programme-content:has(#patient-folder-banner:not(.d-none)) .programme-tab-content-wrapper>.tab-content { padding-top: var(--nm-ctxbar-h); } /* Onglets internes (Transcription/Résumé, styles de rapport…) : PAS de panneau imbriqué — ils sont transparents dans la fenêtre. */ html.synapp-new #programme-section .tab-pane .tab-content { background: transparent; border: 0; border-radius: 0; box-shadow: none; margin-top: 0; } /* ===================================================================== 2. Typographie — sans-serif partout dans l'outil Le Playfair de la landing reste à la landing : dans un outil de travail consulté des heures, l'empattement fatigue et brouille la hiérarchie. ===================================================================== */ html.synapp-new #programme-section h1, html.synapp-new #programme-section h2, html.synapp-new #programme-section h3, html.synapp-new #programme-section h4, html.synapp-new #programme-section h5 { font-family: inherit; font-weight: 600; letter-spacing: -0.005em; color: var(--nm-ink); } html.synapp-new #programme-section h5 { font-size: 1rem; } html.synapp-new #programme-section h6 { color: var(--nm-ink); } /* ===================================================================== 3. Onglets principaux — classeur ancré, sur BANDEAU D'ACCENT --------------------------------------------------------------------- Ce n'était qu'une barre de pastilles flottant au-dessus d'un panneau séparé : deux objets, deux ombres, un interstice. Ici la barre et le panneau ne font qu'un — l'onglet actif est physiquement la même surface que le contenu (le filet du bas est effacé sous lui). La gouttière était une nuance de gris de plus, à peine détachée du canevas : dans une pile de cinq gris, elle disparaissait. Elle reprend donc la couleur, comme en mode Old — mais l'aplat est ici au service de la structure et non de la décoration : la bande colorée sert de fond, et l'onglet actif est DÉCOUPÉ dedans en couleur de panneau. La lecture devient immédiate (clair = ici, coloré = ailleurs), sans avoir à comparer deux gris voisins. La bande suit --nm-accent / --nm-accent-2, donc le réglage Paramètres → Thème → Couleur d'accent la pilote aussi. ===================================================================== */ html.synapp-new #programme-section #programme-main-tablist-wrap, html.synapp-new #programme-section #neurologue-content-wrap, html.synapp-new #programme-section #psychotherapeute-content-wrap { margin-bottom: 0; flex: 0 0 auto; } /* Sous 992px la barre est collante (mobile.css) et son enveloppe porte un fond opaque pour masquer le contenu qui défile dessous : on l'accorde au canevas, sinon un liseré clair encadre la bande colorée. */ html.synapp-new #programme-section #programme-main-tablist-wrap { background: var(--nm-bg); } html.synapp-new #programme-section .nav-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px; padding: 5px 6px 0; margin: 0; background: var(--nm-band); border: 1px solid var(--nm-band-line); border-radius: var(--nm-radius-lg) var(--nm-radius-lg) 0 0; } html.synapp-new #programme-section .nav-tabs .nav-item { margin-bottom: -1px; } /* Inactif : encre claire SUR la bande. Blanc à 88 % — assez pour rester au-dessus de 5:1 sur les deux extrémités du dégradé, assez en retrait pour que l'onglet actif reste le point de fixation. */ html.synapp-new #programme-section .nav-tabs .nav-link { color: rgba(255, 255, 255, 0.88) !important; background: transparent; border: 1px solid transparent; border-bottom-color: transparent; border-radius: var(--nm-radius-sm) var(--nm-radius-sm) 0 0; margin: 0; padding: 0.5rem 0.95rem; line-height: 1.25; font-family: var(--nm-tab-family); font-size: var(--nm-tab-size); font-weight: var(--nm-tab-weight); font-style: var(--nm-tab-style); letter-spacing: var(--nm-tab-tracking); text-transform: var(--nm-tab-transform); transition: color 0.2s var(--nm-ease), background 0.2s var(--nm-ease); } html.synapp-new #programme-section .nav-tabs .nav-link:hover { color: #fff !important; background: rgba(255, 255, 255, 0.16); border-color: transparent; } /* Actif : l'onglet DEVIENT le panneau — découpé dans la bande, filet inférieur en couleur de panneau pour souder les deux surfaces. Plus besoin de filets latéraux : le contraste avec la bande suffit. */ html.synapp-new #programme-section .nav-tabs .nav-link.active { color: var(--nm-accent-hi) !important; background: var(--nm-panel); border-color: transparent; border-bottom-color: var(--nm-panel); box-shadow: none; padding-top: 0.5rem; } html.synapp-new #programme-section .nav-tabs .nav-link i { color: rgba(255, 255, 255, 0.7); font-size: 0.85em; margin-right: 0.4rem !important; transition: color 0.2s var(--nm-ease); } html.synapp-new #programme-section .nav-tabs .nav-link:hover i { color: #fff; } html.synapp-new #programme-section .nav-tabs .nav-link.active i { color: var(--nm-accent); } /* Onglets INTERNES (Résultats, styles de rapport, séances…) : pas un classeur — une barre de sous-navigation soulignée, plus légère, qui ne rivalise pas avec le classeur principal. */ html.synapp-new #programme-section .tab-pane .nav-tabs { background: transparent; border: 0; border-bottom: 1px solid var(--nm-line); border-radius: 0; padding: 0; gap: 0.35rem; align-items: stretch; } html.synapp-new #programme-section .tab-pane .nav-tabs .nav-item { margin-bottom: -1px; } /* ⚠️ L'encre CLAIRE des onglets principaux (posée pour la bande colorée) descendrait jusqu'ici par la cascade : les sous-onglets sont sur fond clair, du blanc les rendrait invisibles. On rétablit l'encre — libellé ET icône, le sélecteur d'icône du bloc principal les atteint aussi. */ html.synapp-new #programme-section .tab-pane .nav-tabs .nav-link { color: var(--nm-muted) !important; font-size: var(--nm-tab-size-inner); letter-spacing: var(--nm-tab-tracking); padding: 0.4rem 0.7rem; border-radius: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; } html.synapp-new #programme-section .tab-pane .nav-tabs .nav-link i { color: var(--nm-faint); } html.synapp-new #programme-section .tab-pane .nav-tabs .nav-link:hover { color: var(--nm-ink) !important; background: transparent; border-bottom-color: var(--nm-line); } html.synapp-new #programme-section .tab-pane .nav-tabs .nav-link:hover i { color: var(--nm-muted); } html.synapp-new #programme-section .tab-pane .nav-tabs .nav-link.active { color: var(--nm-accent-hi) !important; background: transparent; border: 0; border-bottom: 2px solid var(--nm-accent); box-shadow: none; padding-top: 0.4rem; } html.synapp-new #programme-section .tab-pane .nav-tabs .nav-link.active i { color: var(--nm-accent); } /* ===================================================================== 4. Cartes — blanc sur perle, en-têtes unifiés au filet (fini les aplats bleu/vert/info/dark) ===================================================================== */ html.synapp-new #programme-section .card { background: var(--nm-card); border: 1px solid var(--nm-line); border-radius: var(--nm-radius); color: var(--nm-ink); box-shadow: none; overflow: hidden; margin-bottom: var(--nm-gap); transition: border-color 0.2s var(--nm-ease), box-shadow 0.2s var(--nm-ease); } /* Une carte posée ne « décolle » pas et ne s'ombre pas au survol : dans un outil, le mouvement au passage de la souris est du bruit. Le filet se renforce, c'est tout. */ html.synapp-new #programme-section .card:hover { transform: none; box-shadow: none; border-color: rgba(35, 42, 59, 0.18); } /* Exception héritée : la carte « Cotations » doit laisser son menu déroulant Batterie déborder (index-page.css la passe en overflow visible ; notre règle .card ci-dessus la recouvrait). */ html.synapp-new #programme-section .card.battery-selection-card { overflow: visible; } html.synapp-new #programme-section .card-header, html.synapp-new #programme-section .card-header.bg-primary, html.synapp-new #programme-section .card-header.bg-success, html.synapp-new #programme-section .card-header.bg-info, html.synapp-new #programme-section .card-header.bg-dark, html.synapp-new #programme-section .card-header.bg-warning, html.synapp-new #programme-section .card-header.bg-secondary, html.synapp-new #programme-section #conversation-pane .card-header, html.synapp-new #programme-section #norms-pane .card-header, html.synapp-new #programme-section .programme-content .tab-pane .card-header { background: var(--nm-band) !important; color: var(--nm-on-band) !important; border-bottom: 1px solid var(--nm-band-line) !important; border-radius: 0 !important; letter-spacing: 0.01em; min-height: 30px; padding: 5px 12px !important; display: flex; align-items: center; gap: 0.4rem; } html.synapp-new #programme-section .card-header .text-white, html.synapp-new #programme-section .card-header.text-white, html.synapp-new #programme-section .card-header .text-muted, html.synapp-new #programme-section .card-header .text-secondary, html.synapp-new #programme-section .programme-content .tab-pane .card-header, html.synapp-new #programme-section .programme-content .tab-pane .card-header .text-white { color: var(--nm-on-band) !important; } html.synapp-new #programme-section .programme-content .tab-pane .card-header i, html.synapp-new #programme-section .programme-content .tab-pane .card-header i.text-white { color: var(--nm-on-band) !important; } /* --------------------------------------------------------------------- 4a. TITRE DE BLOC — un seul traitement pour tous les sous-blocs --------------------------------------------------------------------- Le modèle est « Génération du formulaire » (Informations patient) : micro-capitales espacées, sans-serif, encre discrète, icône en accent. Les trois familles de conteneurs (card-header, en-tête de .fiche-section-box, en-tête de .qn-section-box) convergent ici. Toutes les valeurs viennent des variables --nm-blocktitle-* (pilotées par Paramètres → Thème) : ne les redéfinir qu'à un seul endroit. --------------------------------------------------------------------- */ html.synapp-new #programme-section .card-header h4, html.synapp-new #programme-section .card-header h5, html.synapp-new #programme-section .card-header h6, html.synapp-new #programme-section #conversation-pane .card-header h5, html.synapp-new #programme-section #conversation-pane .card-header h6, html.synapp-new #programme-section #norms-pane .card-header h5, html.synapp-new #programme-section #norms-pane .card-header h6, html.synapp-new #programme-section .compact-card .card-header h6, html.synapp-new #programme-section .programme-content .tab-pane .card-header h4, html.synapp-new #programme-section .programme-content .tab-pane .card-header h5, html.synapp-new #programme-section .programme-content .tab-pane .card-header h6, html.synapp-new #programme-section .fiche-section-header, html.synapp-new #programme-section .fiche-section-header h6, html.synapp-new #programme-section .qn-section-header h6 { font-family: var(--nm-blocktitle-family); font-size: var(--nm-blocktitle-size) !important; font-weight: var(--nm-blocktitle-weight) !important; letter-spacing: var(--nm-blocktitle-tracking); text-transform: var(--nm-blocktitle-transform); line-height: 1.35; /* Encre de bande, PAS --nm-blocktitle-color : ce dernier suit le réglage « Base » de Paramètres → Thème, prévu pour du texte secondaire sur fond clair. Un choix de gris y rendrait tous les titres de bloc illisibles maintenant que les bandeaux sont colorés. La famille, la taille, la graisse et les capitales, elles, restent réglables. */ color: var(--nm-on-band) !important; font-style: var(--nm-blocktitle-style); margin-bottom: 0; } /* Icônes de titre : même teinte, même taille, même gouttière quel que soit le `me-1` / `me-2` posé dans le gabarit. */ html.synapp-new #programme-section .card-header h4>i, html.synapp-new #programme-section .card-header h5>i, html.synapp-new #programme-section .card-header h6>i, html.synapp-new #programme-section .card-header>i, html.synapp-new #programme-section .fiche-section-header>i, html.synapp-new #programme-section .fiche-section-header h6>i, html.synapp-new #programme-section .qn-section-header h6>i, html.synapp-new #programme-section .qn-section-header>i { color: var(--nm-on-band) !important; font-size: 0.95em; margin-right: 0.45rem !important; opacity: 1; vertical-align: baseline; } /* `.text-white` posé en dur sur l'icône (onglet Analyse) compte une classe de plus que le sélecteur ci-dessus : on le reprend explicitement, sinon l'icône retombe en encre au lieu de l'accent. */ html.synapp-new #programme-section .card-header h4>i.text-white, html.synapp-new #programme-section .card-header h5>i.text-white, html.synapp-new #programme-section .card-header h6>i.text-white { color: var(--nm-on-band) !important; } html.synapp-new #programme-section .card-header i { color: var(--nm-on-band); } html.synapp-new #programme-section .card-body { background: transparent; color: var(--nm-ink); } /* Boîtes de la fiche patient : même carte que les autres. */ html.synapp-new #programme-section .fiche-section-box { background: var(--nm-card); border: 1px solid var(--nm-line); border-radius: var(--nm-radius); box-shadow: none; overflow: hidden; } /* Aplats utilitaires : le « blanc » Bootstrap = zone de texte claire */ html.synapp-new #programme-section .bg-white, html.synapp-new #programme-section .bg-body { background: var(--nm-field) !important; color: var(--nm-ink) !important; } html.synapp-new #programme-section .bg-light, html.synapp-new #programme-section .bg-body-tertiary { background: var(--nm-field) !important; color: var(--nm-ink) !important; } html.synapp-new #programme-section .border, html.synapp-new #programme-section .border-top, html.synapp-new #programme-section .border-bottom, html.synapp-new #programme-section .border-start, html.synapp-new #programme-section .border-end { border-color: var(--nm-line) !important; } html.synapp-new #programme-section hr { border-color: var(--nm-line); opacity: 1; } /* ===================================================================== 4b. En-têtes de section « fenêtre » (fiche patient + questionnaires) Ces barres portaient un dégradé d'accent PLEIN : on les fond dans le thème, exactement comme les .card-header. ===================================================================== */ html.synapp-new #programme-section .qn-section-box { background: var(--nm-card); border: 1px solid var(--nm-line); border-radius: var(--nm-radius); box-shadow: none; overflow: hidden; } html.synapp-new #programme-section .fiche-section-header, html.synapp-new #programme-section .qn-section-header { background: var(--nm-band) !important; border-bottom: 1px solid var(--nm-band-line) !important; min-height: 30px; padding: 5px 12px !important; display: flex; align-items: center; } /* Le titre lui-même et son icône sont pris en charge par le bloc 4a. */ /* --------------------------------------------------------------------- 4c. CE QUI VIT DANS UNE BANDE COLORÉE --------------------------------------------------------------------- Boutons (Actualiser les résultats, Copier tout le bloc, repli du rail…), badges et petits textes logés dans un en-tête. Le traitement « ghost » du thème leur donne un fond de panneau clair et une encre sombre : sur l'aplat, ils deviennent des pavés blancs. On les repasse en ghost CLAIR. Ces sélecteurs comptent une classe de plus que les règles génériques de boutons (section 6), ils gagnent donc quel que soit l'ordre — le !important est là pour battre les `background` déjà en !important. --------------------------------------------------------------------- */ html.synapp-new #programme-section .card-header .btn, html.synapp-new #programme-section .fiche-section-header .btn, html.synapp-new #programme-section .qn-section-header .btn { background: transparent !important; border: 1px solid var(--nm-on-band-line) !important; color: var(--nm-on-band) !important; box-shadow: none !important; } html.synapp-new #programme-section .card-header .btn:hover, html.synapp-new #programme-section .fiche-section-header .btn:hover, html.synapp-new #programme-section .qn-section-header .btn:hover { background: var(--nm-on-band-veil) !important; border-color: var(--nm-on-band) !important; color: var(--nm-on-band) !important; } html.synapp-new #programme-section .card-header .btn i, html.synapp-new #programme-section .fiche-section-header .btn i, html.synapp-new #programme-section .qn-section-header .btn i { color: inherit !important; } /* Un bouton désactivé dans une bande : la règle générique lui posait une surface claire opaque. Ici, un simple retrait suffit. */ html.synapp-new #programme-section .card-header .btn:disabled, html.synapp-new #programme-section .fiche-section-header .btn:disabled, html.synapp-new #programme-section .qn-section-header .btn:disabled { background: transparent !important; border-color: rgba(255, 255, 255, 0.22) !important; color: rgba(255, 255, 255, 0.55) !important; } /* Badges posés dans un en-tête (compteur de séances…) */ html.synapp-new #programme-section .card-header .badge, html.synapp-new #programme-section .card-header .badge.bg-light, html.synapp-new #programme-section .card-header .badge.bg-secondary, html.synapp-new #programme-section .card-header .badge.bg-primary, html.synapp-new #programme-section .card-header .badge.bg-info { background: rgba(255, 255, 255, 0.2) !important; border: 1px solid var(--nm-on-band-line); color: var(--nm-on-band) !important; } /* Le repli du rail « Dossiers » vit dans l'en-tête « Dossiers ». */ html.synapp-new #programme-section .sidebar-toggle-btn { background: transparent !important; border: 1px solid var(--nm-on-band-line) !important; color: var(--nm-on-band) !important; border-radius: var(--nm-radius-xs); } html.synapp-new #programme-section .sidebar-toggle-btn:hover { background: var(--nm-on-band-veil) !important; color: var(--nm-on-band) !important; transform: none; } /* Bloc « Liste des liens » (monospace) : surface de lecture claire. */ html.synapp-new #programme-section #questionnaire-links-copy-container { background: var(--nm-field) !important; border: 1px solid var(--nm-line) !important; color: var(--nm-ink) !important; } /* ===================================================================== 5. Formulaires — champs plus CLAIRS que leur panneau (c'est ce qui signale une zone de saisie), focus accent, labels discrets ===================================================================== */ html.synapp-new #programme-section .form-control, html.synapp-new #programme-section .form-select, html.synapp-new #programme-section textarea.form-control { background: var(--nm-field) !important; border: 1px solid var(--nm-line); border-radius: var(--nm-radius-xs); color: var(--nm-ink) !important; box-shadow: none; transition: border-color 0.2s var(--nm-ease), box-shadow 0.2s var(--nm-ease); } html.synapp-new #programme-section .form-control:hover:not(:focus):not(:disabled), html.synapp-new #programme-section .form-select:hover:not(:focus):not(:disabled) { border-color: rgba(35, 42, 59, 0.24); } html.synapp-new #programme-section .form-control::placeholder, html.synapp-new #programme-section textarea.form-control::placeholder { color: var(--nm-faint); } html.synapp-new #programme-section .form-control:focus, html.synapp-new #programme-section .form-select:focus { background: var(--nm-field) !important; border-color: var(--nm-accent); box-shadow: 0 0 0 3px var(--nm-accent-soft); } html.synapp-new #programme-section .form-control:disabled, html.synapp-new #programme-section .form-select:disabled { background: var(--nm-bg-soft) !important; color: var(--nm-faint) !important; box-shadow: none; } html.synapp-new #programme-section .form-select option { background: var(--nm-field); color: var(--nm-ink); } /* Labels : petites capitales discrètes — on lit la valeur, pas l'étiquette. */ html.synapp-new #programme-section .form-label, html.synapp-new #programme-section .col-form-label { color: var(--nm-muted); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 0.2rem; } html.synapp-new #programme-section .form-check-label { color: var(--nm-muted); } html.synapp-new #programme-section .form-check-input { background-color: var(--nm-field); border-color: rgba(35, 42, 59, 0.22); } html.synapp-new #programme-section .form-check-input:checked { background-color: var(--nm-accent); border-color: var(--nm-accent); } html.synapp-new #programme-section .form-check-input:focus { box-shadow: 0 0 0 3px var(--nm-accent-soft); border-color: var(--nm-accent); } html.synapp-new #programme-section .input-group-text { background: var(--nm-bg-soft); border: 1px solid var(--nm-line); color: var(--nm-muted); } /* Curseurs audio, progress et cases : couleur d'accent native */ html.synapp-new #programme-section input[type="range"], html.synapp-new #programme-section progress { accent-color: var(--nm-accent); } /* ===================================================================== 6. Boutons — rectangles à coins courts (pas des pilules marketing) : primaire plein, le reste en ghost ===================================================================== */ html.synapp-new #programme-section .btn { border-radius: var(--nm-radius-xs); font-weight: 600; letter-spacing: 0.005em; transition: color 0.2s var(--nm-ease), background 0.2s var(--nm-ease), border-color 0.2s var(--nm-ease), box-shadow 0.2s var(--nm-ease); } html.synapp-new #programme-section .btn-primary, html.synapp-new #programme-section .btn-success { background: var(--nm-accent); border: 1px solid var(--nm-accent); color: #fff; box-shadow: none; } html.synapp-new #programme-section .btn-primary:hover, html.synapp-new #programme-section .btn-success:hover { background: var(--nm-accent-2); border-color: var(--nm-accent-2); transform: none; box-shadow: none; } /* Désactivé : un état, pas un texte effacé. Bootstrap pose `opacity: .65` sur `.btn:disabled` ; cumulée à une encre déjà estompée, l'étiquette tombait sous 2,5:1 — illisible alors que ces boutons portent l'information « ce qu'il reste à faire » (Lancer la transcription, Générer le lien…). On reprend la main : surface inerte franche, filet, encre à ~3,5:1, et le curseur dit le reste. */ html.synapp-new #programme-section .btn:disabled, html.synapp-new #programme-section .btn.disabled, html.synapp-new #programme-section .btn:disabled:hover { background: var(--nm-bg-soft) !important; border: 1px solid var(--nm-line) !important; color: rgba(var(--nm-ink-rgb), 0.55) !important; opacity: 1; box-shadow: none !important; cursor: not-allowed; transform: none; } html.synapp-new #programme-section .btn:disabled i, html.synapp-new #programme-section .btn.disabled i { color: rgba(var(--nm-ink-rgb), 0.45) !important; } /* Ghost : tout ce qui n'est pas l'action primaire */ html.synapp-new #programme-section .btn-outline-primary, html.synapp-new #programme-section .btn-outline-secondary, html.synapp-new #programme-section .btn-outline-info, html.synapp-new #programme-section .btn-outline-success, html.synapp-new #programme-section .btn-outline-dark, html.synapp-new #programme-section .btn-outline-light, html.synapp-new #programme-section .btn-secondary, html.synapp-new #programme-section .btn-light, html.synapp-new #programme-section .btn-info, html.synapp-new #programme-section .btn-dark { background: var(--nm-panel); border: 1px solid var(--nm-line); color: var(--nm-muted); box-shadow: none; } html.synapp-new #programme-section .btn-outline-primary:hover, html.synapp-new #programme-section .btn-outline-secondary:hover, html.synapp-new #programme-section .btn-outline-info:hover, html.synapp-new #programme-section .btn-outline-success:hover, html.synapp-new #programme-section .btn-outline-dark:hover, html.synapp-new #programme-section .btn-outline-light:hover, html.synapp-new #programme-section .btn-secondary:hover, html.synapp-new #programme-section .btn-light:hover, html.synapp-new #programme-section .btn-info:hover, html.synapp-new #programme-section .btn-dark:hover { background: var(--nm-accent-soft); border-color: var(--nm-accent-dim); color: var(--nm-accent-hi); } /* (l'état désactivé est traité une seule fois, plus haut) */ /* Danger : garder la sémantique, adopter le langage */ html.synapp-new #programme-section .btn-danger { background: #c8303f; border: 1px solid #c8303f; color: #fff; box-shadow: none; } html.synapp-new #programme-section .btn-danger:hover { background: #ac2534; border-color: #ac2534; } html.synapp-new #programme-section .btn-outline-danger { background: var(--nm-panel); border: 1px solid rgba(192, 44, 60, 0.35); color: #c02c3c; box-shadow: none; } html.synapp-new #programme-section .btn-outline-danger:hover { background: rgba(192, 44, 60, 0.08); border-color: #c02c3c; color: #a3202f; } html.synapp-new #programme-section .btn-warning, html.synapp-new #programme-section .btn-outline-warning { background: var(--nm-panel); border: 1px solid rgba(180, 118, 12, 0.35); color: #a06a08; box-shadow: none; } html.synapp-new #programme-section .btn-warning:hover, html.synapp-new #programme-section .btn-outline-warning:hover { background: rgba(180, 118, 12, 0.09); border-color: #b4760c; color: #8a5b06; } /* Le toggle du rail est traité en 4c, avec le reste de ce qui vit dans une bande colorée — surtout pas ici : cette section vient PLUS BAS dans le fichier et l'emporterait à spécificité égale, rendant le bouton clair sur clair. */ /* Poignée de réouverture du rail : une languette sobre collée au bord, plus le gros onglet dégradé de la version Old. */ html.synapp-new .sidebar-reopen-btn { background: var(--nm-panel); color: var(--nm-muted); border: 1px solid var(--nm-line); border-left: 0; border-radius: 0 var(--nm-radius-xs) var(--nm-radius-xs) 0; padding: 18px 6px; font-size: 0.85rem; box-shadow: var(--nm-shadow-sm); } html.synapp-new .sidebar-reopen-btn:hover { background: var(--nm-accent-soft); color: var(--nm-accent-hi); padding-right: 8px; box-shadow: var(--nm-shadow-md); } /* ===================================================================== 7. Rail « Dossiers » + arborescence Cloud (sa mise en hauteur pleine est en section 15) ===================================================================== */ html.synapp-new #programme-section .programme-sidebar .card { background: var(--nm-panel); border: 1px solid var(--nm-line); border-radius: var(--nm-radius-lg); box-shadow: var(--nm-shadow-xs); } html.synapp-new #programme-section .programme-sidebar .card-header { background: var(--nm-band) !important; border-bottom: 1px solid var(--nm-band-line); color: var(--nm-on-band) !important; } /* Titre « Dossiers » : même police que les sous-onglets Programme. */ html.synapp-new #programme-section .programme-sidebar .card-header h5, html.synapp-new #programme-section .programme-sidebar .card-header .mb-0 { font-family: var(--nm-tab-family) !important; font-size: var(--nm-tab-size) !important; font-weight: var(--nm-tab-weight) !important; font-style: var(--nm-tab-style); letter-spacing: var(--nm-tab-tracking); text-transform: var(--nm-tab-transform); color: var(--nm-on-band) !important; } /* Le titre « Dossiers » suit le même traitement que les autres en-têtes (bloc 4a) : c'est structurellement un .card-header. */ html.synapp-new #programme-section .programme-sidebar .card-header i { color: var(--nm-on-band); } html.synapp-new #programme-section .programme-sidebar .card-body { background: transparent; } html.synapp-new #programme-section .programme-sidebar-nav { background: transparent; border-bottom: 1px solid var(--nm-line); } html.synapp-new #programme-section .programme-sidebar-nav .nav-link { background: transparent; border: 1px solid transparent; border-radius: var(--nm-radius-xs); color: var(--nm-muted); } html.synapp-new #programme-section .programme-sidebar-nav .nav-link:hover { background: var(--nm-surface-2); color: var(--nm-ink); } html.synapp-new #programme-section .programme-sidebar-nav .nav-link.active { background: var(--nm-accent-soft); border-color: var(--nm-accent-dim); color: var(--nm-accent-hi); } html.synapp-new #programme-section #cloud-tree, html.synapp-new #programme-section #cloud-tree * { color: var(--nm-ink); } html.synapp-new #programme-section #cloud-tree .tree-item:hover, html.synapp-new #programme-section #cloud-tree .folder-item:hover, html.synapp-new #programme-section #cloud-tree li:hover { background: var(--nm-surface-2); border-radius: var(--nm-radius-xs); } /* Dossier patient SÉLECTIONNÉ : couleur d'accent (Paramètres → Thème). */ html.synapp-new #programme-section #cloud-tree .tree-selected, html.synapp-new #programme-section .tree-selected { background-color: var(--nm-accent-soft) !important; box-shadow: inset 2px 0 0 var(--nm-accent); border-radius: var(--nm-radius-xs); } html.synapp-new #programme-section .tree-selected, html.synapp-new #programme-section .tree-selected * { color: var(--nm-accent-hi) !important; } html.synapp-new #programme-section .tree-selected .tree-folder-name { font-weight: 600; } html.synapp-new #programme-section .tree-selected .tree-folder-readonly-icon, html.synapp-new #programme-section .tree-selected .tree-folder-readonly-icon * { color: #92400e !important; } /* Jauge de stockage : pied de rail, discret mais toujours là. */ html.synapp-new #programme-section #storage-info, html.synapp-new #programme-section .alert-secondary { background-color: var(--nm-bg-soft) !important; border: 1px solid var(--nm-line) !important; border-radius: var(--nm-radius-xs) !important; color: var(--nm-muted) !important; } html.synapp-new #programme-section #storage-info strong, html.synapp-new #programme-section #storage-info span { color: var(--nm-muted); } /* ===================================================================== 8. Tableaux — filets horizontaux fins, en-têtes micro-capitales ===================================================================== */ html.synapp-new #programme-section .table { color: var(--nm-ink); border-color: var(--nm-line); --bs-table-bg: transparent; --bs-table-color: var(--nm-ink); } html.synapp-new #programme-section .table> :not(caption)>*>* { background: transparent; color: var(--nm-ink); border-bottom-color: var(--nm-line-soft); box-shadow: none; } html.synapp-new #programme-section .table thead th, html.synapp-new #programme-section .table th { color: var(--nm-muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid var(--nm-line); background: var(--nm-bg-soft); } html.synapp-new #programme-section .table-hover>tbody>tr:hover>*, html.synapp-new #programme-section .table tbody tr:hover { background-color: var(--nm-surface); color: var(--nm-ink); } html.synapp-new #programme-section .table-striped>tbody>tr:nth-of-type(odd)>* { background: rgba(35, 42, 59, 0.022); color: var(--nm-ink); } /* Tableau des batteries (Excel) : cellules cliquables lisibles */ html.synapp-new #programme-section #excel-table-container table, html.synapp-new #programme-section #excel-table-container td, html.synapp-new #programme-section #excel-table-container th { background: transparent; color: var(--nm-ink); border-color: var(--nm-line-soft); } /* Surlignage des tableaux de normes : le défaut est un dégradé d'accent PLEIN `!important`. On le rabat sur un voile discret, en gardant la hiérarchie en-tête > lignes/colonnes. */ html.synapp-new #programme-section .table-highlight-first-row, html.synapp-new #programme-section .table-highlight-first-col, html.synapp-new #programme-section .table-highlight-second-col, html.synapp-new #programme-section .table-highlight-third-col { background: var(--nm-accent-soft) !important; color: var(--nm-ink) !important; } /* Placée APRÈS les colonnes/lignes : à spécificité égale, une cellule d'en-tête qui est aussi première colonne garde bien le voile d'en-tête (plus marqué). */ html.synapp-new #programme-section .table-highlight-header { background: var(--nm-accent-med) !important; color: var(--nm-accent-hi) !important; } /* Données du Patient (Analyse) : police plus petite pour voir le tableau. */ html.synapp-new #programme-section #patient-data-container .table { font-size: 0.62rem; } html.synapp-new #programme-section #patient-data-container .table th { font-size: 0.58rem; letter-spacing: 0.04em; padding: 4px 5px; } html.synapp-new #programme-section #patient-data-container .table td { font-size: 0.62rem; padding: 3px 5px; } html.synapp-new #programme-section #patient-data-container .table td, html.synapp-new #programme-section #patient-data-container .table th, html.synapp-new #programme-section #patient-data-container .norm-cell { white-space: nowrap; } /* ===================================================================== 9. Chatbots — bulle utilisateur en accent, bulle assistante en surface (classes générées par addChatMessage : .bg-primary / .bg-light) ===================================================================== */ html.synapp-new #programme-section [id$="chatbot-messages"] { background: var(--nm-field) !important; border: 1px solid var(--nm-line); border-radius: var(--nm-radius); } html.synapp-new #programme-section [id$="chatbot-messages"] .bg-primary { background: var(--nm-accent) !important; color: #fff !important; border-radius: 12px 12px 3px 12px; } html.synapp-new #programme-section [id$="chatbot-messages"] .bg-light { background: var(--nm-field) !important; color: var(--nm-ink) !important; border: 1px solid var(--nm-line); border-radius: 12px 12px 12px 3px; box-shadow: none; } html.synapp-new #programme-section [id$="chatbot-container"] { background: transparent !important; } html.synapp-new #programme-section .chat-prompt-history-menu { background: var(--nm-panel); border: 1px solid var(--nm-line); box-shadow: var(--nm-shadow-md); } html.synapp-new #programme-section .chat-prompt-history-item { color: var(--nm-ink); } html.synapp-new #programme-section .chat-prompt-history-item:hover, html.synapp-new #programme-section .chat-prompt-history-row:hover { background: var(--nm-surface-2); } html.synapp-new #programme-section .chat-prompt-history-remove { color: var(--nm-muted); } html.synapp-new #programme-section .chat-prompt-history-remove:hover { color: #b42318; } html.synapp-new #programme-section .chat-prompt-history-clear { color: #b42318; } /* ===================================================================== 10. Zones à styles inline (battues par ID) : contenus générés, transcriptions, résumés, rapports, logs ===================================================================== */ /* Zones de texte long (lecture / rédaction) : fond clair, pas le gris soft. */ html.synapp-new #programme-section #questionnaire-analysis-report-container, html.synapp-new #programme-section #summary-content, html.synapp-new #programme-section #report-container, html.synapp-new #programme-section #transcription-content, html.synapp-new #programme-section #diarization-content, html.synapp-new #programme-section #summary-style-reference-text, html.synapp-new #programme-section #psy-session-notes-text, html.synapp-new #programme-section #psy-session-transcription-text, html.synapp-new #programme-section #psy-session-resume-text { background: var(--nm-field) !important; border: 1px solid var(--nm-line) !important; border-radius: var(--nm-radius-sm); color: var(--nm-ink) !important; } /* Console de traitement : héritage terminal assumé. Sur fond clair, le bloc sombre devient un accent volontaire — on le garde. */ html.synapp-new #programme-section #logs-container { background: #10162b !important; border: 1px solid rgba(35, 42, 59, 0.18); border-radius: var(--nm-radius-sm); color: #9fb3ff; } html.synapp-new #programme-section #logs-container div { color: #9fb3ff; } html.synapp-new #programme-section #logs-container .text-muted { color: rgba(159, 179, 255, 0.55) !important; } /* Bulle d'infos patient (Recherche de normes) */ html.synapp-new #programme-section #norms-patient-info-bubble { background-color: var(--nm-bg-soft) !important; border: 1px solid var(--nm-line) !important; border-radius: var(--nm-radius-xs) !important; color: var(--nm-ink) !important; } /* ===================================================================== 11. Bandeau de contexte patient + overlay « sélectionnez un dossier » --------------------------------------------------------------------- Position du mode Old, rétablie sur demande : le bandeau reste dans #programme-tab-content-wrapper (qui est `position: relative`) et s'épingle en haut du panneau, SOUS la barre d'onglets. Comme il est hors du flux, il ne bouge pas quand le contenu défile dessous — d'où le fond opaque et la réserve d'espace équivalente sur .tab-content. Deux écarts assumés avec le mode Old : il occupe toute la largeur (et non le premier tiers), parce qu'il porte aussi les repères de cotation à droite ; et il est opaque plutôt qu'en dégradé vers le transparent, sinon le contenu défilant se lirait au travers. ===================================================================== */ html.synapp-new #programme-section .patient-folder-banner { position: absolute; top: 1px; left: 1px; right: 1px; /* inset de 1px : le filet du panneau reste visible autour */ width: auto; max-width: none; height: var(--nm-ctxbar-h); min-height: 0; margin: 0; padding: 0 12px; z-index: 5; display: flex; align-items: center; gap: 0.6rem; flex-wrap: nowrap; overflow: hidden; background: var(--nm-panel-header); border: 0; border-bottom: 1px solid var(--nm-line); border-radius: 0; box-shadow: none; color: var(--nm-ink); font-weight: 600; font-size: 0.9rem; line-height: 1.3; } html.synapp-new #programme-section .patient-folder-banner.d-none { display: none !important; } /* Le nom cède la place en premier : c'est lui qui peut être long, alors que les repères de cotation ont une largeur bornée. */ html.synapp-new #programme-section #patient-folder-banner-name { color: var(--nm-ink); font-weight: 650; font-style: normal; font-family: inherit; letter-spacing: -0.005em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Repères de cotation injectés par new-mode-ux.js : jetons filaires, discrets tant qu'ils sont renseignés, ambrés quand une valeur manque (âge / sexe / années d'études conditionnent les normes). */ html.synapp-new #programme-section .nm-context-chips { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; flex-wrap: nowrap; } html.synapp-new #programme-section .nm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px solid var(--nm-line); border-radius: var(--nm-radius-xs); background: var(--nm-bg-soft); color: var(--nm-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } html.synapp-new #programme-section .nm-chip b { color: var(--nm-ink); font-weight: 700; } /* Encre à 0,70 et non --nm-faint (0,42) : à 0,6rem en capitales, sur le fond du jeton, ce dernier tombait à 2,3:1. Ici on est à 4,6:1 — l'étiquette reste en retrait de la valeur (700, encre pleine) sans devenir illisible. */ html.synapp-new #programme-section .nm-chip-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--nm-ink-rgb), 0.7); } html.synapp-new #programme-section .nm-chip.nm-chip-missing { background: rgba(180, 118, 12, 0.08); border-color: rgba(180, 118, 12, 0.32); color: #8a5b06; } html.synapp-new #programme-section .nm-chip.nm-chip-missing b, html.synapp-new #programme-section .nm-chip.nm-chip-missing .nm-chip-label { color: #8a5b06; } /* Le badge « Lecture seule » garde son ambre : c'est une sémantique d'alerte. Sa couleur de texte doit être restaurée explicitement, sinon la règle d'encre par défaut (`#programme-section span`) la remplace. */ html.synapp-new #programme-section .patient-folder-readonly-badge, html.synapp-new #programme-section .patient-folder-readonly-badge i { color: #92400e; } html.synapp-new #programme-section .programme-no-patient-overlay { top: 0; background: rgba(236, 240, 246, 0.88); backdrop-filter: blur(4px); border-radius: 0 0 var(--nm-radius-lg) var(--nm-radius-lg); /* Pas de centrage vertical : sur un onglet long le message partait au milieu de la page. On le pose juste sous la barre d'onglets. */ align-items: flex-start; justify-content: center; padding-top: 4cm; } html.synapp-new #programme-section .programme-no-patient-overlay p { font-size: 1.05rem !important; font-weight: 500; color: var(--nm-muted); padding: 0 20px; /* Reste visible près du haut si l'utilisateur a déjà scrollé. Ancré sur la fenêtre et non sous la bannière, qui défile désormais. */ position: sticky; top: 2cm; } html.synapp-new #programme-section .tool-wip-message p { font-family: inherit; font-style: normal; font-size: 1.05rem !important; color: var(--nm-muted); } /* ===================================================================== 12. Rédaction du rapport — chrome clair, page « papier » détachée ===================================================================== */ html.synapp-new #programme-section #report-editor-container .ql-toolbar { background: var(--nm-bg-soft); border: 1px solid var(--nm-line); border-radius: var(--nm-radius-sm) var(--nm-radius-sm) 0 0; } html.synapp-new #programme-section #report-editor-container .ql-toolbar .ql-stroke { stroke: var(--nm-muted); } html.synapp-new #programme-section #report-editor-container .ql-toolbar .ql-fill { fill: var(--nm-muted); } html.synapp-new #programme-section #report-editor-container .ql-toolbar .ql-picker-label { color: var(--nm-muted); } html.synapp-new #programme-section #report-editor-container .ql-toolbar button:hover .ql-stroke, html.synapp-new #programme-section #report-editor-container .ql-toolbar button.ql-active .ql-stroke { stroke: var(--nm-accent-hi); } html.synapp-new #programme-section #report-editor-container .ql-toolbar button:hover .ql-fill, html.synapp-new #programme-section #report-editor-container .ql-toolbar button.ql-active .ql-fill { fill: var(--nm-accent-hi); } html.synapp-new #programme-section #report-editor-container .ql-container { border: 1px solid var(--nm-line); border-top: none; border-radius: 0 0 var(--nm-radius-sm) var(--nm-radius-sm); } /* La page du rapport : elle reste du papier blanc pensé pour l'export. Sur un thème clair, un filet suffit à la détacher. */ html.synapp-new #programme-section #report-editor, html.synapp-new #programme-section #report-editor * { color: initial; } html.synapp-new #programme-section #report-editor { background: #ffffff; box-shadow: inset 0 0 0 1px var(--nm-line-soft); } /* ===================================================================== 13. Alertes, badges, listes, progress, spinners ===================================================================== */ html.synapp-new #programme-section .alert { border-radius: var(--nm-radius-sm); } html.synapp-new #programme-section .alert-info, html.synapp-new #programme-section .alert-primary { background: var(--nm-accent-soft); border: 1px solid var(--nm-accent-dim); color: var(--nm-accent-hi); } html.synapp-new #programme-section .alert-warning { background: rgba(180, 118, 12, 0.09); border: 1px solid rgba(180, 118, 12, 0.3); color: #8a5b06; } html.synapp-new #programme-section .alert-danger { background: rgba(192, 44, 60, 0.08); border: 1px solid rgba(192, 44, 60, 0.28); color: #a3202f; } html.synapp-new #programme-section .alert-success { background: rgba(21, 128, 86, 0.09); border: 1px solid rgba(21, 128, 86, 0.28); color: #106342; } /* Badges : jetons filaires en micro-capitales */ html.synapp-new #programme-section .badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; border-radius: var(--nm-radius-xs); padding: 3px 8px; } html.synapp-new #programme-section .badge.bg-secondary, html.synapp-new #programme-section .badge.bg-light, html.synapp-new #programme-section .badge.bg-dark { background: var(--nm-surface-2) !important; border: 1px solid var(--nm-line); color: var(--nm-muted) !important; } html.synapp-new #programme-section .badge.bg-primary, html.synapp-new #programme-section .badge.bg-info { background: var(--nm-accent-soft) !important; border: 1px solid var(--nm-accent-dim); color: var(--nm-accent-hi) !important; } html.synapp-new #programme-section .list-group-item { background: var(--nm-panel); border-color: var(--nm-line-soft); color: var(--nm-ink); } html.synapp-new #programme-section .list-group-item:hover { background: var(--nm-surface); } html.synapp-new #programme-section .list-group-item.active { background: var(--nm-accent-soft); border-color: var(--nm-accent-dim); color: var(--nm-accent-hi); } html.synapp-new #programme-section .progress { background: var(--nm-surface-2); border-radius: 999px; } html.synapp-new #programme-section .progress-bar { background: var(--nm-accent); } /* Le pourcentage est écrit DANS la barre : la règle d'encre par défaut (`#programme-section span`) le rendait sombre sur l'indigo. */ html.synapp-new #programme-section .progress-bar, html.synapp-new #programme-section .progress-bar *, html.synapp-new #programme-section #upload-progress-text { color: #fff; } html.synapp-new #programme-section .spinner-border, html.synapp-new #programme-section .fa-spinner { color: var(--nm-accent); } /* Menus déroulants : ils flottent, ils ont droit à l'ombre. */ html.synapp-new #programme-section .dropdown-menu { background: var(--nm-bg-raise); border: 1px solid var(--nm-line); border-radius: var(--nm-radius); box-shadow: var(--nm-shadow-md); } html.synapp-new #programme-section .dropdown-item { color: var(--nm-ink); border-radius: var(--nm-radius-xs); } html.synapp-new #programme-section .dropdown-item:hover, html.synapp-new #programme-section .dropdown-item:focus { background: var(--nm-accent-soft); color: var(--nm-accent-hi); } html.synapp-new #programme-section .dropdown-divider { border-color: var(--nm-line); } /* ===================================================================== 14. Finitions — scrollbars fines, focus visibles, mouvement sobre ===================================================================== */ html.synapp-new #programme-section ::-webkit-scrollbar { width: 10px; height: 10px; } html.synapp-new #programme-section ::-webkit-scrollbar-thumb { background: rgba(35, 42, 59, 0.16); border: 2px solid transparent; background-clip: content-box; border-radius: 999px; } html.synapp-new #programme-section ::-webkit-scrollbar-thumb:hover { background: rgba(35, 42, 59, 0.3); background-clip: content-box; } html.synapp-new #programme-section ::-webkit-scrollbar-track { background: transparent; } html.synapp-new :focus-visible { outline: 2px solid var(--nm-accent); outline-offset: 2px; } /* ===================================================================== 15. STRUCTURE — coquille plein écran (bureau uniquement, ≥ 992px) --------------------------------------------------------------------- En dessous de 992px, mobile.css convertit déjà le rail en tiroir et la page en flux vertical : on n'y touche pas. Au-dessus, l'outil prend la forme d'un logiciel de bureau. Ce qui change concrètement par rapport au flux d'origine : 1. la PAGE ne défile plus — le contenu défile DANS son panneau, si bien que la barre d'onglets, le bandeau patient et le rail « Dossiers » ne quittent jamais l'écran ; 2. l'arborescence Cloud occupe toute la hauteur du rail (elle était bloquée à 500px par un style inline) et la jauge de stockage est poussée en pied de rail ; 3. le rail est REDIMENSIONNABLE (poignée posée par new-mode-ux.js, largeur mémorisée dans --nm-rail-w) ; 4. rail masqué = le plan de travail prend TOUTE la largeur, au lieu d'être ramené à 75 % centrés (on masque le rail justement pour gagner de la place). ===================================================================== */ /* Coquille en flux document : la PAGE défile (pas un sous-onglet interne). Bannière sticky + ourlet fixed restent visibles ; le contenu Programme s'étend naturellement sous la bannière. */ html.synapp-new #programme-section.content-section { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 0 var(--nm-footer-h, 22px) !important; overflow: visible !important; box-sizing: border-box !important; z-index: auto; } html.synapp-new body { padding-bottom: 0 !important; overflow-x: clip; overflow-y: auto !important; height: auto !important; } html.synapp-new { overflow-x: clip; overflow-y: auto !important; height: auto !important; } html.synapp-new #programme-section .programme-layout { height: auto !important; min-height: 0 !important; margin: 0 !important; display: flex !important; align-items: flex-start !important; box-sizing: border-box !important; } html.synapp-new #programme-section .programme-content, html.synapp-new #programme-section .programme-layout.sidebar-hidden .programme-content { flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; height: auto !important; margin: 0 !important; display: block !important; } html.synapp-new #programme-section #programme-tab-content-wrapper, html.synapp-new #programme-section .programme-tab-content-wrapper { display: block !important; height: auto !important; min-height: 0 !important; flex: none !important; } html.synapp-new #programme-section .programme-tab-content-wrapper>.tab-content { display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important; flex: none !important; } html.synapp-new #programme-section .programme-tab-content-wrapper>.tab-content>.tab-pane.active { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; flex: none !important; } /* Arbre Cloud : hauteur = contenu (pas d'étirement), scroll seulement si trop long. */ html.synapp-new #programme-section #cloud-tree { flex: 0 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; margin-bottom: 0 !important; } html.synapp-new #programme-section #storage-info { flex: 0 0 auto !important; margin-top: 8px !important; margin-bottom: 0 !important; } @media (min-width: 992px) { /* --- 15.1 Padding interne de la coquille bureau ------------------- */ html.synapp-new #programme-section .programme-layout { padding: var(--nm-shell-pad) !important; gap: var(--nm-gap); flex-direction: row !important; } /* --- 15.2 Rail « Dossiers » : hauteur = contenu, sticky au scroll page --- */ html.synapp-new #programme-section .programme-sidebar { width: var(--nm-rail-w); min-width: 0; margin: 0; height: auto !important; max-height: calc(100dvh - var(--nm-footer-h, 22px) - 2 * var(--nm-shell-pad, 14px)) !important; align-self: flex-start; display: flex; flex-direction: column; min-height: 0; overflow: hidden; /* S'accroche au HAUT DE LA FENÊTRE, plus sous la bannière : celle-ci défile maintenant. Tant qu'on n'a pas défilé, le rail est de toute façon posé sous elle et le collage ne s'engage pas. */ position: sticky; top: var(--nm-shell-pad, 14px); z-index: 2; } html.synapp-new #programme-section .programme-sidebar.hidden { width: 0; min-width: 0; } html.synapp-new #programme-section .programme-sidebar>.card { flex: 0 1 auto; min-height: 0; min-width: 0; max-height: 100%; display: flex; flex-direction: column; margin: 0; height: auto !important; overflow: hidden; } html.synapp-new #programme-section .programme-sidebar .card-body { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 10px 10px 9px; } html.synapp-new #programme-section .documents-sidebar-content { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } html.synapp-new #programme-section #cloud-tree { padding-right: 2px; } /* La liste de fichiers du dossier ouvert ne doit pas chasser l'arbre. */ html.synapp-new #programme-section #current-folder-files { flex: 0 1 auto; min-height: 0; overflow: auto; margin-bottom: 8px !important; } /* Stockage collé sous le dernier dossier (plus de margin-top: auto). */ html.synapp-new #programme-section #storage-info { flex: 0 0 auto; margin-top: 8px !important; margin-bottom: 0 !important; } /* --- 15.3 Colonne de travail ------------------------------------- */ /* (Le bandeau patient n'est plus un enfant de la colonne : il est épinglé dans le panneau, cf. section 11.) */ /* --- 15.4 Densité du plan de travail ----------------------------- */ html.synapp-new #programme-section .tab-pane { padding: 14px 16px 18px; } html.synapp-new #programme-section .card:last-child, html.synapp-new #programme-section .card.mb-0 { margin-bottom: 0; } /* `.card h-100` (colonnes jumelles séances / éditeur) doit vraiment tenir la hauteur de sa rangée, pas celle de son contenu. */ html.synapp-new #programme-section .card.h-100 { margin-bottom: 0; } html.synapp-new #programme-section .card-body { padding: 12px; } html.synapp-new #programme-section .compact-card .card-body { padding: 10px; } } /* En dessous de 992px : raffinements (la coquille fixed est globale ci-dessus ; le renforcement final est en fin de mobile.css §12). */ @media (max-width: 991.98px) { html.synapp-new #programme-section .programme-layout { flex-direction: column !important; padding: 8px 10px !important; gap: 8px; } html.synapp-new #programme-section #programme-main-tablist-wrap, html.synapp-new #programme-section #neurologue-content-wrap, html.synapp-new #programme-section #psychotherapeute-content-wrap { position: relative !important; top: auto !important; flex: 0 0 auto !important; } /* Écran étroit : le nom peut manger toute la largeur, les jetons défilent horizontalement plutôt que de faire grandir le bandeau (dont la hauteur est imposée). */ html.synapp-new #programme-section .patient-folder-banner { font-size: 0.85rem; } html.synapp-new #programme-section .nm-context-chips { overflow-x: auto; scrollbar-width: none; } html.synapp-new #programme-section .tab-pane { padding: 12px 12px 14px; } } /* ===================================================================== 16. Affordances posées par new-mode-ux.js ===================================================================== */ /* Poignée de redimensionnement du rail : invisible au repos, elle ne se révèle qu'au survol — un outil ne montre pas ses vis. */ html.synapp-new .nm-rail-grip { position: absolute; top: 0; right: -6px; width: 10px; height: 100%; z-index: 4; cursor: col-resize; background: transparent; border: 0; padding: 0; } html.synapp-new .nm-rail-grip::after { content: ''; position: absolute; top: 10px; bottom: 10px; left: 4px; width: 2px; border-radius: 2px; background: transparent; transition: background 0.15s var(--nm-ease); } html.synapp-new .nm-rail-grip:hover::after, html.synapp-new .nm-rail-grip:focus-visible::after, html.synapp-new .nm-rail-grip.nm-rail-grip-active::after { background: var(--nm-accent-dim); } html.synapp-new .programme-sidebar.hidden .nm-rail-grip { display: none; } /* Pendant le glissé : pas de sélection de texte parasite. */ html.synapp-new.nm-rail-resizing { cursor: col-resize; user-select: none; } /* Rappel des raccourcis, en infobulle native sur les onglets — rien à afficher en plus, l'attribut title est posé par le script. */ /* ===================================================================== 17. Mouvement réduit ===================================================================== */ @media (prefers-reduced-motion: reduce) { html.synapp-new #programme-section .btn, html.synapp-new #programme-section .card, html.synapp-new #programme-section .nav-link, html.synapp-new #app-main-navbar .nav-link { transition: none; } html.synapp-new #programme-section .btn:hover { transform: none; } }