/* ══════════════════════════════════════════════════════════════════════════
   gn-design.css — CE QU'UN SYSTÈME DE DESIGN CHANGE DANS LES COMPOSANTS
   ───────────────────────────────────────────────────────────────────────────
   Chargée seulement quand l'application suit un système (gn-theme.js la pose). Chaque règle dépend d'un attribut de
   <body> : sans l'attribut, rien ne s'applique — une application qui n'a rien choisi ne change pas d'un pixel.
     data-gn-sys      l'application suit un système (raffinements communs : remplissage de marque, anneau de focus)
     data-gn-heads    les titres ont leur police / leur graisse / leur approche
     data-gn-sidebar  clair | teinte | marque | flottante
     data-gn-surface  plate | elevee | tonale
     data-gn-inputs   rempli | souligne
     data-gn-buttons  degrade | doux | contour
     data-gn-table    zebre | grille | aeree
     data-gn-bg       teinte | degrade
   Chaque sélecteur porte « :not(#gn_) » : une règle de système passe TOUJOURS devant celle d'un composant, même écrite
   avec !important et trois classes (le sombre des formulaires imposait son bleu marine à tous les systèmes).
   Les couleurs viennent des variables écrites par le moteur (gn-design-core.js), jamais d'une valeur en dur.
   Le mode sombre est la classe .dark de <body> ; la droite-à-gauche, les propriétés logiques.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Commun à tout système ───────────────────────────────────────────── */
/* le remplissage d'un bouton = la VRAIE couleur de marque, avec dessus l'encre qui tient 4,5:1 (un jaune garde un texte sombre) */
/* (deux règles : la liste des BOUTONS reste à la spécificité que les variantes de la section 6 savent dépasser) */
body:not(#gn_)[data-gn-sys] :is(.dt3-btn.primary, .dt3-cact:not(.is-off):not([disabled]), .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary) {
  background: var(--gn-primary-fill) !important; border-color: var(--gn-primary-fill) !important; color: var(--gn-on-primary) !important; }
body:not(#gn_)[data-gn-sys] :is(.dt3-pg.cur, .dt3-facetb.on, .dt3-densb.on, .dt3-modeb.on, .dt3-fcount, .gn-step.cur .gn-step-n, .gn-wf-step.cur .gn-wf-dot, .gn-pe-pill) {
  background: var(--gn-primary-fill) !important; border-color: var(--gn-primary-fill) !important; color: var(--gn-on-primary) !important; }
body:not(#gn_)[data-gn-sys] :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary) :is(svg, span, i) { color: var(--gn-on-primary) !important; }
body:not(#gn_)[data-gn-sys] .dt3-ck.ck { background: var(--gn-primary-fill) !important; border-color: var(--gn-primary-fill) !important; color: var(--gn-on-primary) !important; }
body:not(#gn_)[data-gn-sys] main :is(.bg-blue-600, .bg-blue-500, .bg-brand-600, .bg-brand-500, .bg-indigo-600) { background: var(--gn-primary-fill) !important; border-color: var(--gn-primary-fill) !important; }
/* un anneau de focus qu'on voit, partout, au clavier seulement */
body:not(#gn_)[data-gn-sys] :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
body:not(#gn_)[data-gn-sys] :is(.gn-df-input, .ts-control, .dt3-search):focus-within { box-shadow: var(--gn-focus) !important; border-color: var(--color-primary) !important; outline: 0; }
/* la marque dans la barre latérale : la tuile prend le remplissage de marque */
body:not(#gn_)[data-gn-sys] .gn-sb-brand > div:first-child { background: var(--gn-primary-fill) !important; color: var(--gn-on-primary) !important; box-shadow: none !important; border-radius: var(--ui-radius-sm, 8px) !important; }
body:not(#gn_)[data-gn-sys] .gn-sb-brand > div:first-child svg { color: var(--gn-on-primary) !important; }
/* l'élément actif du menu, quand la barre garde sa peau d'origine : remplissage de marque, encre lisible */
body:not(#gn_)[data-gn-sys]:not([data-gn-sidebar]) aside:has(.gn-nav-link) .gn-nav-active { background: var(--gn-primary-fill) !important; color: var(--gn-on-primary) !important; }
body:not(#gn_)[data-gn-sys]:not([data-gn-sidebar]) aside:has(.gn-nav-link) .gn-nav-active :is(.iconify, svg, span) { color: var(--gn-on-primary) !important; }
body:not(#gn_)[data-gn-sys] .gn-nav-link, body:not(#gn_)[data-gn-sys] .gn-nav-fold > .gn-nav-section { border-radius: var(--ui-radius-sm, 8px); }
/* la police du texte gagne aussi les composants qui fixaient la leur */
body:not(#gn_)[data-gn-font] :is(.gn-dt3, .gn-dt3 thead th, .gn-df, .gn-view, .gn-df-input, .ts-control, .ts-dropdown, button, input, select, textarea, .gn-nav-link, .gn-nav-section) { font-family: var(--ui-font) !important; }
body:not(#gn_)[data-gn-font] :is(code, kbd, pre, .gn-nav-count) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }
/* le fond de la page de contenu */
body:not(#gn_)[data-gn-sys] > main, body:not(#gn_)[data-gn-sys].bg-body.flex.h-screen > main { background: var(--gn-wash, var(--gn-bg)) !important; }

/* ── 2. Titres ──────────────────────────────────────────────────────────── */
body:not(#gn_)[data-gn-heads] :is(h1, h2, h3, h4, .gn-df-title, .gn-df-htext, .form-title h2, .gn-hero-title, .gn-hero h1, .gn-sec-title, .gn-rtc-tab, .dt3-title, .gn-sb-brandtext, .gn-kpi-v, .gn-lh-title, .gn-th-hd h2) {
  font-family: var(--ui-font-head) !important; font-weight: var(--ui-head-weight, 600) !important; letter-spacing: var(--ui-head-track, 0) !important; }

/* ── 3. Barre latérale ──────────────────────────────────────────────────── */
/* ses couleurs arrivent par les variables --sbb-* (le moteur les écrit) ; ici, ce que la peau d'origine fixait en dur */
body:not(#gn_)[data-gn-sidebar] aside:has(.gn-nav-link) { border-inline-end: 1px solid var(--sbb-line) !important; }
body:not(#gn_)[data-gn-sidebar] aside:has(.gn-nav-link) .gn-nav-active { background: var(--gn-sb-active-bg) !important; color: var(--gn-sb-active-ink) !important; }
body:not(#gn_)[data-gn-sidebar] aside:has(.gn-nav-link) .gn-nav-active :is(.iconify, svg, span) { color: var(--gn-sb-active-ink) !important; }
body:not(#gn_)[data-gn-sidebar] .gn-nav-count { background: color-mix(in srgb, var(--sbb-ink) 9%, transparent); color: var(--sbb-soft); }
body:not(#gn_)[data-gn-sidebar] .gn-nav-link.gn-nav-active .gn-nav-count { background: color-mix(in srgb, var(--gn-sb-active-ink) 16%, transparent); color: var(--gn-sb-active-ink); }
body:not(#gn_)[data-gn-sidebar] aside:has(.gn-nav-link) .sticky :is([class*="bg-gray"], [class*="bg-white"]) { background: color-mix(in srgb, var(--sbb-ink) 6%, transparent) !important; }
body:not(#gn_)[data-gn-sidebar] aside:has(.gn-nav-link) .sticky [class*="absolute"] { background: var(--sbb-bg) !important; box-shadow: var(--gn-elev-3) !important; }
body:not(#gn_)[data-gn-sidebar] aside:has(.gn-nav-link) :is(.gn-sf, .gn-sf-card, .gn-sf-pop) { color: var(--sbb-ink); }
/* barre aux couleurs de la marque : la tuile du logo s'inverse pour rester visible */
body:not(#gn_)[data-gn-sidebar="marque"] .gn-sb-brand > div:first-child { background: color-mix(in srgb, var(--sbb-ink) 16%, transparent) !important; color: var(--sbb-ink) !important; }
body:not(#gn_)[data-gn-sidebar="marque"] .gn-sb-brand > div:first-child svg { color: var(--sbb-ink) !important; }
/* barre flottante : un panneau détaché du bord, posé sur le fond de page */
@media (min-width: 768px) {
  body:not(#gn_)[data-gn-sidebar="flottante"] > aside:has(.gn-nav-link) { margin: 12px; margin-inline-end: 0; height: calc(100vh - 24px) !important; border: 1px solid var(--sbb-line) !important; border-radius: var(--ui-radius-lg, 16px) !important; box-shadow: var(--gn-elev-2); overflow: hidden; }
  body:not(#gn_)[data-gn-sidebar="flottante"] { background: var(--gn-wash, var(--gn-bg)) !important; }
}

/* ── 4. Cartes et panneaux ──────────────────────────────────────────────── */
/* DE MÊME LE CONTENEUR DE LA FICHE (.gn-view) : dès qu'il porte un en-tête (.gn-hero, .gn-fc), ce sont ses cartes qui sont les surfaces, et
   le système le déclare à plat plus bas. Nommé sans réserve dans les listes de surfaces, il gardait un liseré collé à ses propres cartes. */
/* UNE SECTION N'EST UNE SURFACE QUE SI RIEN NE L'ENCADRE DÉJÀ. Dans la fiche, c'est le panneau (.gn-vr-body) qui est la carte — il porte
   la marge intérieure — et ses sections sont à plat ; en lecture (.gn-view-reader) tout est à plat. Les règles de surface ci-dessous
   nommaient « .gn-df-section » sans cette réserve : un style de lignes ou de surface re-posait une bordure sur une section qui n'a
   aucune marge, et le texte touchait le cadre (vu le 11 octobre 2026 sur une fiche, lignes « encre »). Elles visent donc la section
   hors de ces deux contextes, et le panneau de la fiche à sa place. La réserve est écrite en :where(…) * pour ne peser RIEN :
   la priorité de chaque règle reste celle d'avant (alourdie, elle l'emportait sur les règles qui mettent la fiche à plat). */
body:not(#gn_)[data-gn-surface="plate"] :is(.gn-dt3 .dt3-shell, .gn-df-section:not(:where(.gn-vr-body, .gn-view-reader) *), .gn-vr-body, .gn-view:not(:has(.gn-hero, > .gn-fc)), .gn-hero, .gn-kpi, .gn-sp-card, .gn-df-rc, .form-title, .gn-df-body, main .rounded-lg.shadow, main .rounded-xl.shadow, main .shadow-sm) { box-shadow: none !important; border: var(--ui-bw, 1px) solid var(--gn-line) !important; }
body:not(#gn_)[data-gn-surface="elevee"] :is(.gn-dt3 .dt3-shell, .gn-df-section:not(:where(.gn-vr-body, .gn-view-reader) *), .gn-vr-body, .gn-view:not(:has(.gn-hero, > .gn-fc)), .gn-hero, .gn-kpi, .gn-sp-card, .gn-df-rc, .form-title, .gn-df-body) { border-color: transparent !important; box-shadow: var(--gn-elev-2) !important; }
body:not(#gn_)[data-gn-surface="tonale"] :is(.gn-dt3 .dt3-shell, .gn-df-section:not(:where(.gn-vr-body, .gn-view-reader) *), .gn-vr-body, .gn-view:not(:has(.gn-hero, > .gn-fc)), .gn-hero, .gn-kpi, .gn-sp-card, .gn-df-rc, .form-title, .gn-df-body) { border-color: transparent !important; box-shadow: none !important; background: var(--gn-tonal) !important; }
body:not(#gn_)[data-gn-surface="tonale"] :is(.gn-dt3, .gn-df, .gn-view) { --dt-panel: var(--gn-tonal); --df-panel: var(--gn-tonal); --dt-panel2: color-mix(in srgb, var(--gn-tonal) 60%, var(--gn-surface-2)); }
body:not(#gn_)[data-gn-surface="tonale"] :is(.gn-df-input, .ts-control, .dt3-search) { background: var(--gn-surface) !important; }
body:not(#gn_)[data-gn-surface="tonale"][data-gn-inputs="rempli"] :is(.gn-df-input, .ts-wrapper .ts-control, .dt3-search, main select) { background: var(--gn-surface) !important; }

/* ── 5. Champs ──────────────────────────────────────────────────────────── */
body:not(#gn_)[data-gn-inputs="rempli"] :is(.gn-df-input, .ts-wrapper .ts-control, .dt3-search, main select) { background: var(--gn-surface-2) !important; border-color: transparent !important; }
body:not(#gn_)[data-gn-inputs="rempli"] :is(.gn-df-input, .ts-wrapper .ts-control, .dt3-search):hover { background: color-mix(in srgb, var(--gn-surface-2) 80%, var(--gn-line-strong)) !important; }
body:not(#gn_)[data-gn-inputs="rempli"] :is(.gn-df-input, .ts-wrapper .ts-control, .dt3-search):focus-within { background: var(--gn-surface) !important; border-color: var(--color-primary) !important; }
body:not(#gn_)[data-gn-inputs="souligne"] :is(.gn-df-input, .ts-wrapper .ts-control, main select) { background: transparent !important; border-width: 0 0 max(1px, var(--ui-bw, 1px)) 0 !important; border-color: var(--gn-line-strong) !important; border-radius: 0 !important; padding-inline: 2px !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-inputs="souligne"] :is(.gn-df-input, .ts-wrapper .ts-control):focus-within { border-color: var(--color-primary) !important; box-shadow: 0 1px 0 0 var(--color-primary) !important; }

/* ── 6. Bouton principal ────────────────────────────────────────────────── */
body:not(#gn_)[data-gn-sys][data-gn-buttons="degrade"] :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary) { background: var(--gn-primary-grad) !important; border-color: transparent !important; box-shadow: 0 6px 16px -6px var(--gn-primary-fill) !important; }
body:not(#gn_)[data-gn-sys][data-gn-buttons="doux"] :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary) { background: var(--gn-primary-soft) !important; border-color: transparent !important; color: var(--color-primary) !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-sys][data-gn-buttons="doux"] :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary) :is(svg, span, i) { color: var(--color-primary) !important; }
body:not(#gn_)[data-gn-sys][data-gn-buttons="contour"] :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary) { background: transparent !important; border: max(1px, var(--ui-bw, 1px)) solid var(--color-primary) !important; color: var(--color-primary) !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-sys][data-gn-buttons="contour"] :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary) :is(svg, span, i) { color: var(--color-primary) !important; }
body:not(#gn_)[data-gn-sys][data-gn-buttons="contour"] :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary):hover { background: var(--gn-primary-soft) !important; }

/* ── 7. Tables ──────────────────────────────────────────────────────────── */
body:not(#gn_)[data-gn-table="zebre"] .gn-dt3 tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--dt-panel2) 62%, var(--dt-panel)); }
body:not(#gn_)[data-gn-table="zebre"] .gn-dt3 tbody td { border-bottom-color: transparent !important; }
body:not(#gn_)[data-gn-table="grille"] .gn-dt3 :is(thead th, tbody td) { border: var(--ui-bw, 1px) solid var(--dt-line) !important; border-inline-start-width: 0 !important; border-top-width: 0 !important; }
body:not(#gn_)[data-gn-table="grille"] .gn-dt3 :is(thead th, tbody td):last-child { border-inline-end-width: 0 !important; }
body:not(#gn_)[data-gn-table="aeree"] .gn-dt3 thead th { background: transparent !important; border-bottom: 1px solid var(--dt-line) !important; }
body:not(#gn_)[data-gn-table="aeree"] .gn-dt3 tbody td { border-bottom-color: transparent !important; padding-block: 14px; }
body:not(#gn_)[data-gn-table="aeree"] .gn-dt3 tbody tr:hover td { background: color-mix(in srgb, var(--dt-panel2) 70%, transparent); }

/* ── 8. Mouvement ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { body:not(#gn_)[data-gn-sys] * { transition-duration: .001s !important; animation-duration: .001s !important; } }

/* ── 9. Pages d'accès (connexion, inscription, mot de passe oublié, déconnexion) ───────────────── */
/* Elles étaient bleues quoi qu'on choisisse. Leur fond, leur carte, leurs champs et leur bouton suivent le système. */
body:not(#gn_)[data-gn-sys] section.min-h-screen.bg-gradient-to-b { background: var(--gn-wash, var(--gn-bg)) !important; color: var(--gn-text); }
body:not(#gn_)[data-gn-sys] section.min-h-screen.bg-gradient-to-b > .bg-blue-100 { background: color-mix(in srgb, var(--gn-primary-fill) 24%, transparent) !important; }
body:not(#gn_)[data-gn-sys] section.min-h-screen.bg-gradient-to-b > .bg-cyan-100 { background: color-mix(in srgb, var(--color-accent) 22%, transparent) !important; }
body:not(#gn_)[data-gn-sys] section.min-h-screen .rounded-3xl.border { background: var(--gn-surface) !important; border-color: var(--gn-line) !important; border-radius: var(--ui-radius-lg, 16px) !important; box-shadow: var(--gn-elev-3) !important; }
body:not(#gn_)[data-gn-surface="plate"] section.min-h-screen .rounded-3xl.border { box-shadow: none !important; border-width: max(1px, var(--ui-bw, 1px)) !important; }
body:not(#gn_)[data-gn-sys] section.min-h-screen :is(.text-slate-900, .text-slate-800, .text-slate-700, .text-gray-900, h1, h2, h3) { color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] section.min-h-screen :is(.text-slate-600, .text-slate-500, .text-slate-400, .text-gray-500, .text-gray-600) { color: var(--gn-muted) !important; }
body:not(#gn_)[data-gn-sys] section.min-h-screen :is(.text-blue-600, .text-blue-700, .text-indigo-600) { color: var(--color-primary) !important; }
body:not(#gn_)[data-gn-sys] section.min-h-screen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { background: var(--gn-surface) !important; border-color: var(--gn-line-strong) !important; color: var(--gn-text) !important; border-radius: var(--ui-radius, 10px) !important; }
body:not(#gn_)[data-gn-sys] section.min-h-screen input::placeholder { color: var(--gn-faint) !important; opacity: 1; }
body:not(#gn_)[data-gn-sys] section.min-h-screen input:not([type="checkbox"]):not([type="radio"]):focus { border-color: var(--color-primary) !important; box-shadow: var(--gn-focus) !important; outline: 0 !important; }
body:not(#gn_)[data-gn-sys] section.min-h-screen input[type="checkbox"] { accent-color: var(--gn-primary-fill); }
body:not(#gn_)[data-gn-sys] section.min-h-screen :is(button.bg-blue-600, button[type="submit"], a.bg-blue-600) { background: var(--gn-primary-fill) !important; border-color: var(--gn-primary-fill) !important; color: var(--gn-on-primary) !important; border-radius: var(--btn-radius, 10px) !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-sys][data-gn-buttons="degrade"] section.min-h-screen :is(button.bg-blue-600, button[type="submit"]) { background: var(--gn-primary-grad) !important; box-shadow: 0 8px 20px -8px var(--gn-primary-fill) !important; }
body:not(#gn_)[data-gn-sys][data-gn-buttons="contour"] section.min-h-screen :is(button.bg-blue-600, button[type="submit"]) { background: transparent !important; border: max(1px, var(--ui-bw, 1px)) solid var(--color-primary) !important; color: var(--color-primary) !important; }
body:not(#gn_)[data-gn-sys][data-gn-buttons="doux"] section.min-h-screen :is(button.bg-blue-600, button[type="submit"]) { background: var(--gn-primary-soft) !important; color: var(--color-primary) !important; }
body:not(#gn_)[data-gn-inputs="rempli"] section.min-h-screen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { background: var(--gn-surface-2) !important; border-color: transparent !important; }
body:not(#gn_)[data-gn-inputs="souligne"] section.min-h-screen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { background: transparent !important; border-width: 0 0 max(1px, var(--ui-bw, 1px)) 0 !important; border-radius: 0 !important; padding-inline: 2px !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-heads] section.min-h-screen :is(h1, h2, h3) { font-family: var(--ui-font-head) !important; font-weight: var(--ui-head-weight, 700) !important; letter-spacing: var(--ui-head-track, -0.01em) !important; }

/* ── 10. Tableau de bord ─────────────────────────────────────────────────── */
/* Les tuiles étaient blanches à filet gris, quoi qu'on choisisse ; leurs graphiques, des boîtes dans des boîtes. */
body:not(#gn_)[data-gn-sys] .gn-dash-tile { background: var(--gn-surface) !important; border: var(--ui-bw, 1px) solid var(--gn-line) !important; border-radius: var(--ui-radius-lg, 14px) !important; box-shadow: var(--ui-card-shadow, none) !important; color: var(--gn-text); container-type: inline-size; }
body:not(#gn_)[data-gn-surface="plate"] :is(.gn-dash-tile, .gn-lh) { box-shadow: none !important; }
body:not(#gn_)[data-gn-surface="elevee"] :is(.gn-dash-tile, .gn-lh) { border-color: transparent !important; box-shadow: var(--gn-elev-2) !important; }
body:not(#gn_)[data-gn-surface="tonale"] :is(.gn-dash-tile, .gn-lh) { border-color: transparent !important; box-shadow: none !important; background: var(--gn-tonal) !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .gn-dt3 .dt3-root .dt3-shell { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile :is(.gn-dash-ticon, .gn-dash-thead > svg) { color: var(--color-primary) !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-ttitle { color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-tsub { color: var(--gn-muted) !important; }
body:not(#gn_)[data-gn-heads] .gn-dash-ttitle { font-family: var(--ui-font-head) !important; font-weight: var(--ui-head-weight, 600) !important; }
/* un graphique : le dessin sans boîte, à côté d'une légende en lignes */
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-chart { padding: 6px 2px 2px; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-chartbody { max-width: none; gap: 20px; flex-wrap: nowrap; align-items: center; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-chartbody .dt3-chartwrap { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; flex: 0 1 44%; max-width: 250px; min-width: 130px; overflow: visible; max-height: none; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-chartbody.dt3-side .dt3-clegend { flex: 1 1 0; min-width: 0; gap: 0; max-height: none; overflow: visible; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-clegi { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--gn-line) !important; border-radius: 0 !important; padding: 8px 2px !important; width: 100%; display: flex; gap: 9px; color: var(--gn-text) !important; font-size: 12.5px; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-clegi:last-child { border-bottom-color: transparent !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-clegi:hover:not(.noint) { background: color-mix(in srgb, var(--gn-surface-2) 70%, transparent) !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-cleg-sw { width: 9px; height: 9px; border-radius: 50%; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-cleg-lab { flex: 1; min-width: 0; max-width: none; text-align: start; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-cleg-val { color: var(--gn-muted) !important; }
@container (max-width: 400px) {
  body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-chartbody { flex-wrap: wrap; justify-content: center; }
  body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-chartbody .dt3-chartwrap { flex-basis: 100%; max-width: 210px; margin-inline: auto; }
  body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-chartbody.dt3-side .dt3-clegend { flex-basis: 100%; }
}
/* un chiffre clé : l'encre du texte et la police des titres (il prenait une couleur d'alerte sans raison) */
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-kpibig { color: var(--gn-text) !important; font-family: var(--ui-font-head, inherit) !important; font-weight: var(--ui-head-weight, 700) !important; letter-spacing: 0 !important; line-height: 1.15; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-kpicap { color: var(--gn-muted) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; font-size: 12px !important; }
body:not(#gn_)[data-gn-sys] .gn-lh { border-radius: var(--ui-radius-lg, 16px) !important; }
body:not(#gn_)[data-gn-sys] .gn-lh-tile { border-radius: var(--ui-radius, 12px) !important; }

/* ── 11. Formulaires ─────────────────────────────────────────────────────── */
/* la pastille d'aide vide laissait un trou entre le libellé et son astérisque */
body:not(#gn_)[data-gn-sys] .gn-ff label > span.group.relative:not(:has(svg)) { display: none !important; }
body:not(#gn_)[data-gn-sys]:not([data-gn-inputs]) :is(.gn-df-input, .ts-wrapper .ts-control) { background: var(--gn-surface) !important; color: var(--gn-text) !important; border-color: var(--gn-line-strong) !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-df-input, .ts-wrapper .ts-control) { color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-df-input, .ts-control input)::placeholder { color: var(--gn-faint) !important; opacity: 1; }
body:not(#gn_)[data-gn-sys] .gn-ff label { color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] .gn-fv-msg { color: var(--gn-muted) !important; }
/* un anneau est dessiné dans le tiers gauche d'un cadre large (la place d'une légende qu'on met ailleurs) : on ne montre
   que l'anneau, à sa vraie taille */
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-chartbody.dt3-side .dt3-chartwrap:has(.dt3-cslice) { flex: 0 0 176px; max-width: 176px; min-width: 0; overflow: hidden !important; direction: ltr; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-chartbody.dt3-side .dt3-chartwrap:has(.dt3-cslice) > svg { width: 329px !important; max-width: none !important; height: 176px !important; margin-left: -12px; display: block; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .gn-dash-ticon:not(:has(svg)):not(svg) { display: none !important; }

/* ── 12. L'assistant ─────────────────────────────────────────────────────── */
/* son bouton, son en-tête et son bouton d'envoi étaient violets quel que soit le système : ils prennent la marque */
body:not(#gn_)[data-gn-sys] :is(.gn-cop-fab, .gn-cop-hd, .gn-cop-go) { background: var(--gn-primary-grad) !important; color: var(--gn-on-primary) !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-cop-fab, .gn-cop-hd, .gn-cop-go) svg { color: var(--gn-on-primary) !important; }
body:not(#gn_)[data-gn-sys] .gn-cop-fab { box-shadow: var(--gn-elev-2) !important; width: 46px !important; height: 46px !important; background: var(--gn-primary-fill) !important; }
body:not(#gn_)[data-gn-sys][data-gn-buttons="degrade"] .gn-cop-fab { background: var(--gn-primary-grad) !important; }
body:not(#gn_)[data-gn-surface="plate"] .gn-cop-fab { box-shadow: var(--gn-elev-1) !important; }
body:not(#gn_)[data-gn-sys] .gn-cop-fab svg { width: 20px !important; height: 20px !important; }
/* le bas de page garde la place du bouton : le dernier contenu se lit en entier */
body:not(#gn_)[data-gn-sys] > main { padding-bottom: 76px !important; }

/* ══ TOUR 2 — ce que le jury a trouvé hors du système (rapports : mission_design_systems/panel/round1) ══════════════ */

/* ── 13. Tout le texte suit le système : police, chiffres, corps minimum ──── */
/* Les composants fixaient chacun leur police (« font: … system-ui ») : la table, les étiquettes, les légendes restaient
   les mêmes dans les 27 systèmes. Désormais tout hérite du corps ; les titres et le code gardent leur règle (plus précise). */
body:not(#gn_)[data-gn-font] { font-family: var(--ui-font) !important; }
body:not(#gn_)[data-gn-font] *:not(svg *) { font-family: inherit !important; }
body:not(#gn_)[data-gn-font] :is(code, kbd, pre, samp) { font-family: var(--ui-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace) !important; }
body:not(#gn_)[data-gn-font] .gn-nav-count { font-family: inherit !important; }
/* chiffres alignés et « de titrage » partout : jamais un zéro qui ressemble à un « o » dans un numéro de commande */
/* (les chiffres « tabulaires » ne valent que là où des nombres se comparent : appliqués partout, certaines polices donnaient
   aussi à l'espace et au trait d'union la largeur d'un chiffre — « AtelierNord », « E - mail ») */
body:not(#gn_)[data-gn-sys], body:not(#gn_)[data-gn-sys] * { font-variant-numeric: lining-nums !important; }
body:not(#gn_)[data-gn-sys] :is(.dt3-num, td.dt3-c-num, td.dt3-c-date, td.dt3-c-datetime, .dt3-kpibig, .gn-kpi-v, .gn-rep-calc, .gn-rep-somme, .gn-rep-bl-val, .dt3-cdonuttot, .dt3-cleg-val, .gn-nav-count, .gn-rtc-count, .dt3-pg, .dt3-kcount, .gn-rtc-tile b, .gn-lh-tile b, input[type="number"], .gn-df-input[inputmode="decimal"], .gn-df-input[inputmode="numeric"]) { font-variant-numeric: lining-nums tabular-nums !important; }
body:not(#gn_)[data-gn-sys] :is(.dt3-num, td.dt3-c-num, .dt3-kpibig, .gn-kpi-v, .gn-rep-calc, .gn-rep-somme, .gn-rep-bl-val, .dt3-cdonuttot, .dt3-cleg-val, .gn-lh-tn) :is(bdi, span, b, strong) { font-variant-numeric: lining-nums tabular-nums !important; }
/* plancher : 12 px pour tout texte, 11 px pour un libellé en capitales */
body:not(#gn_)[data-gn-sys] :is(.gn-nav-count, .gn-rtc-count, .gn-rtc-tiles-auto, .gn-fh-q, .gn-vr-fx, .dt3-pg, .dt3-kcount, .gn-fv-msg, .gn-dash-tsub, .dt3-kpicap, .dt3-lmeta, .dt3-cleg-val) { font-size: 12px !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-nav-section, .gn-nav-section span, .gn-dt3 thead th, .dt3-thl, .gn-kpi-l, .gn-wf-title, .gn-wf-actlab, .gn-df-sechead h3) { font-size: 11px !important; }
body:not(#gn_)[data-gn-sys] .dt3-chartwrap:has(.dt3-cslice) :is(.dt3-clab) { font-size: 23px !important; }
body:not(#gn_)[data-gn-sys] .dt3-chartwrap:has(.dt3-cslice) .dt3-cdonuttot { font-size: 40px; font-weight: 650; }
/* la taille des titres est un réglage */
body:not(#gn_)[data-gn-titles] :is(.gn-hero-title, .gn-df-title, .gn-lh-title, section.min-h-screen h1) { font-size: calc(1.5rem * var(--gn-title-scale, 1)) !important; line-height: 1.2 !important; }
body:not(#gn_)[data-gn-titles] :is(.dt3-title, .gn-dash-ttitle, .gn-sec-title) { font-size: calc(1rem * var(--gn-title-scale, 1)) !important; }

/* ── 14. Étiquettes d'état : un ton par sens, lisible sur son fond, à la forme du système ── */
body:not(#gn_)[data-gn-sys] :where(.gn-dt3, .gn-view, .gn-dash-tile, main) .dt3-chip:where(:not(.dt3-badge)) {
  font-size: 12px !important; font-weight: 600 !important; line-height: 1.5 !important; padding: 1px 9px !important; letter-spacing: 0 !important;
  border-radius: var(--gn-chip-radius, 999px) !important; border: 1px solid var(--gn-neutral-line) !important; background: var(--gn-neutral-soft) !important; color: var(--gn-neutral-ink) !important; }
body:not(#gn_)[data-gn-sys] .dt3-chip.dt3-tone-ok { background: var(--gn-ok-soft) !important; color: var(--gn-ok-ink) !important; border-color: var(--gn-ok-line) !important; --gn-dot: var(--gn-ok-fill); --gn-dot-on: var(--gn-on-ok); }
body:not(#gn_)[data-gn-sys] .dt3-chip.dt3-tone-warn { background: var(--gn-warn-soft) !important; color: var(--gn-warn-ink) !important; border-color: var(--gn-warn-line) !important; --gn-dot: var(--gn-warn-fill); --gn-dot-on: var(--gn-on-warn); }
body:not(#gn_)[data-gn-sys] .dt3-chip.dt3-tone-danger { background: var(--gn-danger-soft) !important; color: var(--gn-danger-ink) !important; border-color: var(--gn-danger-line) !important; --gn-dot: var(--gn-danger-fill); --gn-dot-on: var(--gn-on-danger); }
body:not(#gn_)[data-gn-sys] .dt3-chip.dt3-tone-info { background: var(--gn-info-soft) !important; color: var(--gn-info-ink) !important; border-color: var(--gn-info-line) !important; --gn-dot: var(--gn-info-fill); --gn-dot-on: var(--gn-on-info); }
body:not(#gn_)[data-gn-sys] .dt3-chip.dt3-tone-neutral { --gn-dot: var(--gn-neutral-fill); --gn-dot-on: var(--gn-on-neutral); }
body:not(#gn_)[data-gn-sys] .dt3-chip.dt3-cat-1 { background: var(--gn-cat-1-soft) !important; color: var(--gn-cat-1-ink) !important; border-color: var(--gn-cat-1-line) !important; --gn-dot: var(--gn-cat-1-ink); }
body:not(#gn_)[data-gn-sys] .dt3-chip.dt3-cat-2 { background: var(--gn-cat-2-soft) !important; color: var(--gn-cat-2-ink) !important; border-color: var(--gn-cat-2-line) !important; --gn-dot: var(--gn-cat-2-ink); }
body:not(#gn_)[data-gn-sys] .dt3-chip.dt3-cat-3 { background: var(--gn-cat-3-soft) !important; color: var(--gn-cat-3-ink) !important; border-color: var(--gn-cat-3-line) !important; --gn-dot: var(--gn-cat-3-ink); }
body:not(#gn_)[data-gn-sys] .dt3-chip.dt3-cat-4 { background: var(--gn-cat-4-soft) !important; color: var(--gn-cat-4-ink) !important; border-color: var(--gn-cat-4-line) !important; --gn-dot: var(--gn-cat-4-ink); }
body:not(#gn_)[data-gn-sys] .dt3-chip.dt3-cat-5 { background: var(--gn-cat-5-soft) !important; color: var(--gn-cat-5-ink) !important; border-color: var(--gn-cat-5-line) !important; --gn-dot: var(--gn-cat-5-ink); }
body:not(#gn_)[data-gn-sys] .dt3-chip.dt3-cat-6 { background: var(--gn-cat-6-soft) !important; color: var(--gn-cat-6-ink) !important; border-color: var(--gn-cat-6-line) !important; --gn-dot: var(--gn-cat-6-ink); }
body:not(#gn_)[data-gn-sys] .dt3-chip.dt3-cat-7 { background: var(--gn-cat-7-soft) !important; color: var(--gn-cat-7-ink) !important; border-color: var(--gn-cat-7-line) !important; --gn-dot: var(--gn-cat-7-ink); }
body:not(#gn_)[data-gn-sys] .dt3-chip.dt3-cat-8 { background: var(--gn-cat-8-soft) !important; color: var(--gn-cat-8-ink) !important; border-color: var(--gn-cat-8-line) !important; --gn-dot: var(--gn-cat-8-ink); }
/* variante « un point et le mot » : la couleur est un repère, le mot reste à l'encre du texte */
body:not(#gn_)[data-gn-badges="point"] .dt3-chip:not(.dt3-badge) { background: transparent !important; border-color: transparent !important; color: var(--gn-text) !important; padding-inline: 0 !important; font-weight: 500 !important; display: inline-flex !important; align-items: center; gap: 7px; }
body:not(#gn_)[data-gn-badges="point"] .dt3-chip:not(.dt3-badge)::before { content: ""; width: 7px; height: 7px; border-radius: 50% !important; background: var(--gn-dot, var(--gn-neutral-fill)); flex: none; }
/* variante « pleine » : un aplat, son libellé dessus */
body:not(#gn_)[data-gn-badges="plein"] .dt3-chip:not(.dt3-badge) { background: var(--gn-dot, var(--gn-neutral-fill)) !important; color: var(--gn-dot-on, var(--gn-surface)) !important; border-color: transparent !important; }
/* variante « au trait » */
body:not(#gn_)[data-gn-badges="contour"] .dt3-chip:not(.dt3-badge) { background: transparent !important; border-color: currentColor !important; }

/* ── 15. Pastilles d'initiales et vignettes : la palette du système ─────── */
body:not(#gn_)[data-gn-sys] :is(.dt3-rowav, .dt3-lavatar, .dt3-ginit) { background: var(--gn-neutral-soft) !important; color: var(--gn-neutral-ink) !important; font-weight: 600 !important; letter-spacing: 0 !important; }
body:not(#gn_)[data-gn-sys] :is(.dt3-rowav, .dt3-lavatar, .dt3-ginit).dt3-avc-1 { background: var(--gn-cat-1-soft) !important; color: var(--gn-cat-1-ink) !important; }
body:not(#gn_)[data-gn-sys] :is(.dt3-rowav, .dt3-lavatar, .dt3-ginit).dt3-avc-2 { background: var(--gn-cat-2-soft) !important; color: var(--gn-cat-2-ink) !important; }
body:not(#gn_)[data-gn-sys] :is(.dt3-rowav, .dt3-lavatar, .dt3-ginit).dt3-avc-3 { background: var(--gn-cat-3-soft) !important; color: var(--gn-cat-3-ink) !important; }
body:not(#gn_)[data-gn-sys] :is(.dt3-rowav, .dt3-lavatar, .dt3-ginit).dt3-avc-4 { background: var(--gn-cat-4-soft) !important; color: var(--gn-cat-4-ink) !important; }
body:not(#gn_)[data-gn-sys] :is(.dt3-rowav, .dt3-lavatar, .dt3-ginit).dt3-avc-5 { background: var(--gn-cat-5-soft) !important; color: var(--gn-cat-5-ink) !important; }
body:not(#gn_)[data-gn-sys] :is(.dt3-rowav, .dt3-lavatar, .dt3-ginit).dt3-avc-6 { background: var(--gn-cat-6-soft) !important; color: var(--gn-cat-6-ink) !important; }
body:not(#gn_)[data-gn-sys] :is(.dt3-rowav, .dt3-lavatar, .dt3-ginit).dt3-avc-7 { background: var(--gn-cat-7-soft) !important; color: var(--gn-cat-7-ink) !important; }
body:not(#gn_)[data-gn-sys] :is(.dt3-rowav, .dt3-lavatar, .dt3-ginit).dt3-avc-8 { background: var(--gn-cat-8-soft) !important; color: var(--gn-cat-8-ink) !important; }
body:not(#gn_)[data-gn-sys] .dt3-rowav { width: var(--gn-row-av, 28px) !important; height: var(--gn-row-av, 28px) !important; font-size: 12px !important; letter-spacing: -.02em !important; margin-inline-end: 10px !important; }
body:not(#gn_)[data-gn-sys] .dt3-lavatar { border-radius: var(--ui-radius-sm, 8px) !important; font-size: 12px !important; }
body:not(#gn_)[data-gn-avatars="carre"] :is(.dt3-rowav, .dt3-lavatar, .gn-sf-av, .gn-hero-av) { border-radius: var(--ui-radius-sm, 6px) !important; }
body:not(#gn_)[data-gn-avatars="aucun"] .dt3-rowav { display: none !important; }
/* la vignette d'une fiche, le compte en pied de barre, les marques « calculé » : la marque, pas un violet d'usine */
body:not(#gn_)[data-gn-sys] .gn-hero-av { background: var(--gn-action-soft) !important; color: var(--gn-action-ink) !important; border: 1px solid var(--gn-action-line); border-radius: var(--ui-radius, 12px) !important; font-weight: 650 !important; letter-spacing: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-sf-av--txt { background: var(--gn-primary-fill) !important; color: var(--gn-on-primary) !important; }
body:not(#gn_)[data-gn-sys] .gn-sf-av { box-shadow: none !important; }
body:not(#gn_)[data-gn-sys] .gn-vr-fx { color: var(--gn-muted) !important; background: var(--gn-surface-2) !important; border-radius: var(--ui-radius-sm, 5px) !important; font-weight: 600 !important; }

/* ── 16. La fiche : parcours, onglets, tuiles, rythme ────────────────────── */
body:not(#gn_)[data-gn-sys] .gn-wf-dot { background: var(--gn-surface-2) !important; color: var(--gn-muted) !important; border-color: var(--gn-line-strong) !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-step.done .gn-wf-dot { background: var(--gn-ok-fill) !important; border-color: var(--gn-ok-fill) !important; color: var(--gn-on-ok) !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-step.cur .gn-wf-dot { background: var(--gn-primary-fill) !important; border-color: var(--gn-primary-fill) !important; color: var(--gn-on-primary) !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-step.cur :is(.gn-wf-lab, .gn-wf-name) { font-weight: 700 !important; color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-btn { background: var(--gn-action-soft) !important; color: var(--gn-action-ink) !important; border: 1px solid var(--gn-action-line) !important; border-radius: var(--btn-radius, 8px) !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-btn.gn-wf-bad { background: transparent !important; color: var(--gn-danger-ink) !important; border-color: var(--gn-danger-line) !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-tool { background: transparent !important; color: var(--gn-muted) !important; border: 1px solid var(--gn-line-strong) !important; border-radius: var(--btn-radius, 8px) !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-tool:hover, body:not(#gn_)[data-gn-sys] .gn-wf-tool.on { background: var(--gn-action-soft) !important; color: var(--gn-action-ink) !important; border-color: var(--gn-action-line) !important; }
body:not(#gn_)[data-gn-sys] .gn-rtc-tab { color: var(--gn-muted) !important; opacity: 1 !important; font-weight: 500 !important; }
body:not(#gn_)[data-gn-sys] .gn-rtc-tab.on { color: var(--gn-text) !important; font-weight: 700 !important; border-bottom: 2px solid var(--color-primary) !important; }
body:not(#gn_)[data-gn-sys] .gn-rtc-count { background: var(--gn-neutral-soft) !important; color: var(--gn-neutral-ink) !important; border-radius: var(--gn-chip-radius, 999px) !important; opacity: 1 !important; }
body:not(#gn_)[data-gn-sys] .gn-rtc-tab.on .gn-rtc-count { background: var(--gn-action-soft) !important; color: var(--gn-action-ink) !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-rtc-tgo, .gn-rtc-tiles-auto, .gn-kpi-l) { color: var(--gn-muted) !important; }
body:not(#gn_)[data-gn-sys] .gn-rtc-tiles-card { background: var(--gn-surface) !important; border: var(--ui-bw, 1px) solid var(--gn-line) !important; border-radius: var(--ui-radius-lg, 14px) !important; box-shadow: var(--ui-card-shadow, none) !important; }
body:not(#gn_)[data-gn-sys] .gn-rtc-tiles-h { color: var(--gn-text) !important; border-bottom-color: var(--gn-line) !important; }
body:not(#gn_)[data-gn-sys] .gn-rtc-tile { background: var(--gn-surface) !important; border: 1px solid var(--gn-line) !important; border-radius: var(--ui-radius, 10px) !important; color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] .gn-rtc-tile:hover { border-color: var(--color-primary) !important; }
body:not(#gn_)[data-gn-sys] .gn-sf-todo b { color: var(--gn-warning) !important; }
body:not(#gn_)[data-gn-sys] .gn-sf-todo.ok { color: var(--gn-ok) !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-rep-add, .gn-rep-del) { opacity: 1 !important; }
body:not(#gn_)[data-gn-sys] .gn-rep-add { color: var(--color-primary) !important; }
body:not(#gn_)[data-gn-sys] .gn-rep-del { color: var(--gn-muted) !important; }
body:not(#gn_)[data-gn-sys] .gn-rep-del:hover { color: var(--gn-danger) !important; border-color: var(--gn-danger) !important; }
body:not(#gn_)[data-gn-sys] .gn-fh-q { color: var(--gn-muted) !important; border-color: var(--gn-line-strong) !important; background: transparent !important; }

/* ── 17. Champs : la date, la liste, le choix segmenté et l'encart suivent le réglage des champs ── */
body:not(#gn_)[data-gn-sys] :is(.gn-dp-display, main select, .gn-df textarea) { background: var(--gn-surface) !important; color: var(--gn-text) !important; border: max(1px, var(--ui-bw, 1px)) solid var(--gn-line-strong) !important; border-radius: var(--ui-radius, 10px) !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-sys] .ts-wrapper .ts-control :is(input, .item) { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] .ts-dropdown { background: var(--gn-surface) !important; color: var(--gn-text) !important; border: 1px solid var(--gn-line-strong) !important; border-radius: var(--ui-radius, 10px) !important; box-shadow: var(--gn-elev-3) !important; }
body:not(#gn_)[data-gn-sys] .ts-dropdown :is(.active, .option:hover) { background: var(--gn-action-soft) !important; color: var(--gn-action-ink) !important; }
body:not(#gn_)[data-gn-inputs="rempli"] :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, main select, .gn-df textarea) { background: var(--gn-surface-2) !important; border-color: transparent !important; border-bottom: max(1px, var(--ui-bw, 1px)) solid var(--gn-line-strong) !important; }
body:not(#gn_)[data-gn-surface="tonale"][data-gn-inputs="rempli"] :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, main select, .gn-df textarea) { background: var(--gn-surface) !important; border-bottom: max(1px, var(--ui-bw, 1px)) solid var(--gn-line-strong) !important; }
body:not(#gn_)[data-gn-inputs="rempli"] .dt3-search { border-bottom: max(1px, var(--ui-bw, 1px)) solid var(--gn-line-strong) !important; }
body:not(#gn_)[data-gn-inputs="souligne"] :is(.gn-dp-display, .gn-df textarea) { background-color: transparent !important; border-width: 0 0 max(1px, var(--ui-bw, 1px)) 0 !important; border-color: var(--gn-line-strong) !important; border-radius: 0 !important; padding-inline: 2px !important; }
body:not(#gn_)[data-gn-inputs="souligne"] .gn-dp-display { background-position: right 2px center !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-df-input, .gn-dp-display, .gn-df textarea, .dt3-search input, main select)::placeholder { color: var(--gn-faint) !important; opacity: 1 !important; }
body:not(#gn_)[data-gn-sys] .dt3-search { background: var(--gn-surface) !important; border: max(1px, var(--ui-bw, 1px)) solid var(--gn-line-strong) !important; color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] .dt3-search input { background: transparent !important; color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] .dt3-foot select { background: var(--gn-surface) !important; color: var(--gn-text) !important; border: 1px solid var(--gn-line-strong) !important; }
/* choix segmenté : une piste, une option choisie qui se voit sans la couleur (fond, filet, graisse) */
body:not(#gn_)[data-gn-sys] .gn-seg { background: var(--gn-surface-2) !important; border: max(1px, var(--ui-bw, 1px)) solid var(--gn-line-strong) !important; border-radius: var(--ui-radius, 10px) !important; }
body:not(#gn_)[data-gn-sys] .gn-seg-opt { color: var(--gn-muted) !important; border-radius: calc(var(--ui-radius, 10px) - 3px) !important; font-weight: 500 !important; }
body:not(#gn_)[data-gn-sys] .gn-seg-opt.on { background: var(--gn-surface) !important; color: var(--gn-text) !important; font-weight: 700 !important; box-shadow: 0 0 0 1px var(--gn-line-strong) !important; }
/* l'encart « ce qui va se passer », les aides, l'astérisque */
body:not(#gn_)[data-gn-sys] .gn-sf-conseq { background: var(--gn-surface-2) !important; color: var(--gn-text) !important; border: 1px solid var(--gn-line) !important; border-radius: var(--ui-radius, 10px) !important; }
body:not(#gn_)[data-gn-sys] .gn-sf-conseq span[aria-hidden] { color: var(--color-primary) !important; }
body:not(#gn_)[data-gn-sys] .gn-sf-conseq b { color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-fv-msg, .gn-ff-help, .gn-ff small, .gn-df-hint, .gn-ff .text-xs, .gn-ff .text-gray-500, .gn-ff .text-gray-400) { color: var(--gn-muted) !important; opacity: 1 !important; }
body:not(#gn_)[data-gn-sys] .gn-df :is(.theme-button-secondary, .gn-df-cancel, a.gn-btn-ghost, button[type="button"].theme-button-secondary) { background: var(--gn-surface) !important; color: var(--gn-text) !important; border: max(1px, var(--ui-bw, 1px)) solid var(--gn-line-strong) !important; border-radius: var(--btn-radius, 10px) !important; }

/* ── 18. Tables : densité réelle, en-têtes, filets, alignement des nombres ── */
body:not(#gn_)[data-gn-sys] .gn-dt3 tbody td { padding-block: var(--gn-cell-py, 10px) !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 thead th { padding-block: calc(var(--gn-cell-py, 10px) * .8 + 2px) !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 thead th:is(.dt3-c-number, .dt3-c-currency, .dt3-c-money, .dt3-c-price, .dt3-c-percent, .dt3-c-integer, .dt3-c-decimal, .dt3-c-float) { text-align: end !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 thead th:is(.dt3-c-number, .dt3-c-currency, .dt3-c-money, .dt3-c-price, .dt3-c-percent, .dt3-c-integer, .dt3-c-decimal, .dt3-c-float) .dt3-sort { justify-content: flex-end !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 tbody td:is(.dt3-c-number, .dt3-c-currency, .dt3-c-money, .dt3-c-price, .dt3-c-percent, .dt3-c-integer, .dt3-c-decimal, .dt3-c-float) { text-align: end !important; }

body:not(#gn_)[data-gn-sys] .gn-dt3 thead th { color: var(--gn-muted) !important; }
body:not(#gn_)[data-gn-thead="nu"] .gn-dt3 thead th { background: transparent !important; border-bottom: max(1px, var(--ui-bw, 1px)) solid var(--gn-line-strong) !important; }
body:not(#gn_)[data-gn-thead="marque"] .gn-dt3 thead th { background: var(--gn-primary-fill) !important; color: var(--gn-on-primary) !important; border-color: transparent !important; }
body:not(#gn_)[data-gn-thead="marque"] .gn-dt3 thead th :is(svg, span) { color: var(--gn-on-primary) !important; }
body:not(#gn_)[data-gn-thead="encre"] .gn-dt3 thead th { background: var(--gn-text) !important; color: var(--gn-surface) !important; border-color: transparent !important; }
body:not(#gn_)[data-gn-thead="encre"] .gn-dt3 thead th :is(svg, span) { color: var(--gn-surface) !important; }
body:not(#gn_)[data-gn-table="zebre"] .gn-dt3 tbody tr:nth-child(even) td { background: var(--dt-panel2) !important; }
/* grille : pas de case dessinée autour d'une colonne vide (sélection, actions au survol) */
body:not(#gn_)[data-gn-table="grille"] .gn-dt3 :is(th, td):is(.dt3-ckcell, .dt3-actions):empty, body:not(#gn_)[data-gn-table="grille"] .gn-dt3 :is(th, td).dt3-actions { border-inline-width: 0 !important; }
body:not(#gn_)[data-gn-table="grille"] .gn-dt3 :is(thead th, tbody td):has(+ .dt3-actions) { border-inline-end-width: 0 !important; }
/* filets à l'encre : cartes, tables, barre et champs tracés à la couleur du texte (Suisse, Gazette, Terminal, Industrie) */
body:not(#gn_)[data-gn-lines="encre"] :is(.gn-dt3 .dt3-shell, .gn-df-section:not(:where(.gn-vr-body, .gn-view-reader) *), .gn-vr-body, .gn-hero, .gn-wf, .gn-sp-card, .gn-df-rc, .form-title, .gn-df-body, .gn-dash-tile, .gn-lh, .gn-rtc-tiles-card, section.min-h-screen .rounded-3xl.border) { border: max(1px, var(--ui-bw, 1px)) solid var(--gn-text) !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-lines="encre"]:not([data-gn-thead="encre"]) .gn-dt3 thead th { border-bottom: max(2px, var(--ui-bw, 1px)) solid var(--gn-text) !important; color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-lines="encre"] aside:has(.gn-nav-link) { border-inline-end: max(1px, var(--ui-bw, 1px)) solid var(--gn-text) !important; }
body:not(#gn_)[data-gn-lines="encre"] :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, .dt3-search, .gn-seg, main select) { border-color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-lines="encre"] :is(.dt3-title, .gn-hero-title, .gn-df-title) { text-transform: var(--ui-label-caps, none); letter-spacing: var(--ui-head-tracking, 0); }
/* liste vide : une seule action, pas de pagination sur zéro ligne */
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-root:has(.dt3-state) .dt3-foot { display: none !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-state { color: var(--gn-muted) !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-state b { color: var(--gn-text) !important; font-family: var(--ui-font-head, inherit) !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-state :is(a, button):not(.dt3-btn) { background: var(--gn-primary-fill) !important; color: var(--gn-on-primary) !important; border-radius: var(--btn-radius, 10px) !important; border-color: transparent !important; }
/* pagination, cases inactives : on voit qu'elles existent (3:1) */
body:not(#gn_)[data-gn-sys] .gn-dt3 :is(.dt3-pg[disabled], .dt3-pg.dis, .dt3-pg:disabled) { color: var(--gn-off) !important; border-color: var(--gn-off) !important; opacity: 1 !important; }

/* ── 19. Barre latérale : tout ce qui s'y lit tient sur son fond ─────────── */
body:not(#gn_)[data-gn-sidebar] aside:has(.gn-nav-link) { background: var(--sbb-bg) !important; }
body:not(#gn_)[data-gn-sidebar] aside:has(.gn-nav-link) .gn-nav-section, body:not(#gn_)[data-gn-sidebar] aside:has(.gn-nav-link) .gn-nav-section span { color: var(--gn-sb-muted) !important; }
body:not(#gn_)[data-gn-sidebar] .gn-nav-count { background: color-mix(in srgb, var(--sbb-ink) 11%, transparent) !important; color: var(--sbb-ink) !important; border-radius: var(--gn-chip-radius, 999px) !important; }
body:not(#gn_)[data-gn-sidebar] .gn-nav-link.gn-nav-active .gn-nav-count { background: color-mix(in srgb, var(--gn-sb-active-ink) 16%, transparent) !important; color: var(--gn-sb-active-ink) !important; }
body:not(#gn_)[data-gn-sidebar] aside:has(.gn-nav-link) .gn-sf-acct { border-radius: var(--ui-radius, 12px) !important; }

/* ── 20. Angles vifs : rien ne s'arrondit, sauf ce qui est rond par nature ── */
body:not(#gn_)[data-gn-shape="vif"] *:not(svg *):not(:is(.dt3-rowav, .gn-sf-av, .gn-wf-dot, .dt3-cleg-sw, .dt3-tldot, input[type="radio"], .gn-cop-fab, .gn-switch, .gn-switch *, .gn-toggle, .gn-toggle *, .rounded-full, .dt3-spin, .gn-sb-mark, .gn-sb-mark *, .dt3-chip::before)) { border-radius: var(--ui-radius, 0) !important; }
body:not(#gn_)[data-gn-shape="vif"][data-gn-avatars="carre"] :is(.dt3-rowav, .dt3-lavatar, .gn-sf-av) { border-radius: var(--ui-radius, 0) !important; }
/* partout : la boîte de dialogue, ses boutons, prennent le rayon et les tons du système */
body:not(#gn_)[data-gn-sys] .dt3-modalbox { background: var(--gn-surface) !important; color: var(--gn-text) !important; border: var(--ui-bw, 1px) solid var(--gn-line) !important; border-radius: var(--ui-radius-lg, 14px) !important; box-shadow: var(--gn-elev-3) !important; }
body:not(#gn_)[data-gn-sys] .dt3-cfm-ttl { color: var(--gn-text) !important; font-family: var(--ui-font-head, inherit) !important; }
body:not(#gn_)[data-gn-sys] .dt3-cfm-msg { color: var(--gn-muted) !important; }
body:not(#gn_)[data-gn-sys] .dt3-cfm-ic.danger { background: var(--gn-danger-soft) !important; color: var(--gn-danger-ink) !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-btn.danger { background: var(--gn-danger-fill) !important; border-color: var(--gn-danger-fill) !important; color: var(--gn-on-danger) !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-btn:not(.primary):not(.danger) { background: var(--gn-surface) !important; color: var(--gn-text) !important; border: max(1px, var(--ui-bw, 1px)) solid var(--gn-line-strong) !important; border-radius: var(--btn-radius, 10px) !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-btn { border-radius: var(--btn-radius, 10px) !important; }

/* ── 21. Page d'accès : l'aperçu des rôles (développement) et les détails suivent le système ── */
body:not(#gn_)[data-gn-sys] #rolepick .rp-card, body:not(#gn_)[data-gn-sys] #dvl-panel { background: var(--gn-surface-2) !important; border: 1px solid var(--gn-line) !important; border-radius: var(--ui-radius, 12px) !important; color: var(--gn-text) !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-sys] #rolepick .rp-card:hover { border-color: var(--color-primary) !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-sys] #rolepick :is(.rp-title, .rp-name, .rp-card b), body:not(#gn_)[data-gn-sys] #dvl-panel :is(.dvl-email, b, strong) { color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] #rolepick :is(.rp-sub, .rp-dev, .rp-mail, small), body:not(#gn_)[data-gn-sys] #dvl-panel :is(.dvl-role, small, .dvl-h) { color: var(--gn-muted) !important; font-size: 12px !important; }
body:not(#gn_)[data-gn-sys] #rolepick .rp-ic { background: var(--gn-action-soft) !important; color: var(--gn-action-ink) !important; border-radius: var(--ui-radius-sm, 8px) !important; }
body:not(#gn_)[data-gn-sys] #dvl-panel .dvl-btn { font-size: 12px !important; border-radius: var(--ui-radius-sm, 6px) !important; background: var(--gn-surface) !important; color: var(--gn-text) !important; border: 1px solid var(--gn-line-strong) !important; }
body:not(#gn_)[data-gn-sys] #dvl-panel .dvl-go { background: var(--gn-primary-fill) !important; color: var(--gn-on-primary) !important; border-color: transparent !important; }
body:not(#gn_)[data-gn-sys] #dvl-panel input { background: var(--gn-surface) !important; color: var(--gn-text) !important; border: 1px solid var(--gn-line-strong) !important; }
body:not(#gn_)[data-gn-sys] section.min-h-screen :is(.text-slate-300, .text-gray-400, .text-gray-300, [class*="text-slate-4"], [class*="text-slate-5"], [class*="text-slate-6"], [class*="text-slate-7"]) { color: var(--gn-muted) !important; }
body:not(#gn_)[data-gn-sys] section.min-h-screen :is(.border-slate-200, .border-gray-200, .bg-slate-200, hr) { border-color: var(--gn-line) !important; }
body:not(#gn_)[data-gn-sys] section.min-h-screen input[type="checkbox"] { background: var(--gn-surface) !important; border: 1px solid var(--gn-line-strong) !important; }
/* les halos du fond : aux couleurs du système, et aucun dans un système à angles vifs */
body:not(#gn_)[data-gn-shape="vif"] section.min-h-screen.bg-gradient-to-b > :is(.bg-blue-100, .bg-cyan-100, [class*="blur-"]) { display: none !important; }

/* ── 22. Rythme : un seul écart entre deux sections, des rangées de tuiles de même hauteur ── */
body:not(#gn_)[data-gn-sys] .gn-view > * + *, body:not(#gn_)[data-gn-sys] .gn-vr > * + * { margin-top: var(--gn-gap, 18px) !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-grid { align-items: stretch !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-grid > .gn-dash-tile { height: 100%; }

/* ── 23. Fiche : la carte de contexte, les badges d'état, le rythme vertical ── */
body:not(#gn_)[data-gn-sys] .gn-fc { background: var(--gn-surface) !important; border: var(--ui-bw, 1px) solid var(--gn-line) !important; border-radius: var(--ui-radius-lg, 14px) !important; box-shadow: var(--ui-card-shadow, none) !important; margin-bottom: var(--gn-gap, 18px) !important; color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] .gn-fc-note { background: var(--gn-surface-2) !important; color: var(--gn-muted) !important; border: 0 !important; border-radius: var(--ui-radius, 10px) !important; }
body:not(#gn_)[data-gn-sys] .gn-fc-dup { background: var(--gn-surface) !important; color: var(--gn-text) !important; border: max(1px, var(--ui-bw, 1px)) solid var(--gn-line-strong) !important; border-radius: var(--btn-radius, 10px) !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-fc-badge, .gn-hero-badge) { font-size: 12px !important; font-weight: 600 !important; padding: 2px 10px !important; border-radius: var(--gn-chip-radius, 999px) !important; border: 1px solid var(--gn-neutral-line) !important; background: var(--gn-neutral-soft) !important; color: var(--gn-neutral-ink) !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-fc-badge, .gn-hero-badge).ok { background: var(--gn-ok-soft) !important; color: var(--gn-ok-ink) !important; border-color: var(--gn-ok-line) !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-fc-badge, .gn-hero-badge).bad { background: var(--gn-danger-soft) !important; color: var(--gn-danger-ink) !important; border-color: var(--gn-danger-line) !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-fc-badge, .gn-hero-badge).warn { background: var(--gn-warn-soft) !important; color: var(--gn-warn-ink) !important; border-color: var(--gn-warn-line) !important; }
body:not(#gn_)[data-gn-sys] .gn-fc-step { background: var(--gn-surface-2) !important; color: var(--gn-muted) !important; border-color: var(--gn-line) !important; font-size: 12px !important; }
body:not(#gn_)[data-gn-sys] .gn-fc-step.cur { color: var(--gn-action-ink) !important; border-color: var(--color-primary) !important; font-weight: 700 !important; }
body:not(#gn_)[data-gn-sys] .gn-hero-mi { color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] .gn-hero-mi:is(.danger, .bad, [data-danger]) { color: var(--gn-danger) !important; }
/* un seul écart entre deux blocs d'une fiche (la grille en mettait 24, chaque bloc en ajoutait 18) */
body:not(#gn_)[data-gn-sys] .gn-view .grid:has(> .gn-hero) { gap: var(--gn-gap, 18px) !important; }
body:not(#gn_)[data-gn-sys] .gn-view .grid > :is(.gn-hero, .gn-wf, .gn-rtc, .gn-rtc-tiles-card, .gn-df-section) { margin-bottom: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-view > .w-full { margin-top: 0 !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-wf-msg, .gn-wf-panel):empty { display: none !important; }
body:not(#gn_)[data-gn-sys] .gn-wf { background: var(--gn-surface) !important; border: var(--ui-bw, 1px) solid var(--gn-line) !important; border-radius: var(--ui-radius-lg, 14px) !important; box-shadow: var(--ui-card-shadow, none) !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-sf-sub, .gn-rtc-tl, .gn-vr-legend, .gn-lh-more, .gn-wf-lab) { font-size: 12px !important; }
body:not(#gn_)[data-gn-sys] aside .gn-sf-sub { color: var(--gn-sb-muted) !important; }
body:not(#gn_)[data-gn-sys] .gn-vr-legend, body:not(#gn_)[data-gn-sys] .gn-vr-legend b { color: var(--gn-muted) !important; }
body:not(#gn_)[data-gn-sys] .gn-lh-role { background: var(--gn-action-soft) !important; color: var(--gn-action-ink) !important; border-radius: var(--gn-chip-radius, 999px) !important; }
/* lignes d'un document : l'astérisque isolé au-dessus de chaque case n'a pas de libellé à qualifier */
body:not(#gn_)[data-gn-sys] .gn-rep-cell .gn-ff label { display: none !important; }
body:not(#gn_)[data-gn-sys] .gn-rep-th { color: var(--gn-muted) !important; font-size: 12px !important; }
body:not(#gn_)[data-gn-sys] .gn-rep-btn { color: var(--gn-muted) !important; opacity: 1 !important; }
/* grille : la case de sélection se montre (une case vide dessinée n'apprend rien) */
body:not(#gn_)[data-gn-table="grille"] .gn-dt3 .dt3-ck { opacity: 1 !important; visibility: visible !important; }
/* un champ en lecture seule garde un bord qu'on voit */
body:not(#gn_)[data-gn-sys] .gn-df-input:not(.gn-dp-display):is([readonly], [disabled]) { border-color: var(--gn-line-strong) !important; color: var(--gn-muted) !important; opacity: 1 !important; }
/* page d'accès : tout texte de l'aperçu des rôles hérite de l'encre du système */
body:not(#gn_)[data-gn-sys] :is(#rolepick, #dvl-panel) :is(span, div, a, b, strong, label) { color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] :is(#rolepick, #dvl-panel) :is(.rp-sub, .rp-dev, .rp-or, .rp-mail, .dvl-role, .dvl-title, .dvl-badge, small) { color: var(--gn-muted) !important; font-size: 12px !important; background: transparent !important; }
body:not(#gn_)[data-gn-sys] #dvl-panel .dvl-go { color: var(--gn-on-primary) !important; }
body:not(#gn_)[data-gn-sys] :is(#rolepick, #dvl-panel) input::placeholder { color: var(--gn-faint) !important; opacity: 1 !important; }
body:not(#gn_)[data-gn-inputs="rempli"] section.min-h-screen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { border-bottom: max(1px, var(--ui-bw, 1px)) solid var(--gn-line-strong) !important; }
/* ── 24. Finitions du tour 2 ─────────────────────────────────────────────── */
/* champs remplis : coins du haut arrondis, base droite soulignée (le filet du bas ne se courbe pas) */
body:not(#gn_)[data-gn-inputs="rempli"] :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, main select, .gn-df textarea, .dt3-search), body:not(#gn_)[data-gn-inputs="rempli"] section.min-h-screen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { border-radius: min(var(--ui-radius, 10px), 10px) min(var(--ui-radius, 10px), 10px) 0 0 !important; }
/* la colonne des actions au survol ne réserve pas de largeur : les colonnes de données prennent la place */

body:not(#gn_)[data-gn-sys] .gn-dt3 :is(.dt3-pg[disabled], .dt3-pg.dis, .dt3-pg:disabled) { border-color: var(--gn-line) !important; }
/* un séparateur de milliers de même largeur dans toutes les polices */
body:not(#gn_)[data-gn-sys] :is(.dt3-num, .dt3-kpibig, .gn-kpi-v, .gn-rep-calc, .gn-rep-somme, .gn-rep-bl-val, td.dt3-c-num, .dt3-cdonuttot, .dt3-cleg-val) { letter-spacing: 0 !important; }
body:not(#gn_)[data-gn-sys] #dvl-panel :is(div, li, span, label, p) { background-color: transparent !important; }
body:not(#gn_)[data-gn-sidebar] .gn-nav-link.gn-nav-active .gn-nav-count { background: transparent !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gn-sb-active-ink) 45%, transparent); }
body:not(#gn_)[data-gn-sys] .form-title svg { border-radius: var(--ui-radius-sm, 8px) !important; }
body:not(#gn_)[data-gn-sys][data-gn-inputs="rempli"] .dt3-search.dt3-search.dt3-search { border-bottom: max(1px, var(--ui-bw, 1px)) solid var(--gn-line-strong) !important; }
/* filets à l'encre : seules les cartes de premier rang ; les tuiles qu'elles contiennent gardent un filet discret */
body:not(#gn_)[data-gn-lines="encre"] :is(.gn-kpi, .gn-rtc-tile, .gn-lh-tile) { border: 1px solid var(--gn-line-strong) !important; }
body:not(#gn_)[data-gn-lines="encre"] .gn-view { border: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-rtc-nav { background: transparent !important; border-bottom: 1px solid var(--gn-line) !important; }
body:not(#gn_)[data-gn-sys] .gn-sf-av--txt { display: grid; place-items: center; font-size: 12px !important; font-weight: 650 !important; letter-spacing: 0; }
/* le total au centre d'un anneau : le nombre, puis son mot, sans se toucher */
body:not(#gn_)[data-gn-sys] .dt3-chartwrap:has(.dt3-cslice) .dt3-cdonuttot { font-size: 38px !important; transform: translateY(-9px); }
body:not(#gn_)[data-gn-sys] .dt3-chartwrap:has(.dt3-cslice) .dt3-cdonuttot + .dt3-clab { transform: translateY(12px); }
/* le titre d'une tuile passe à la ligne plutôt que d'être coupé */
body:not(#gn_)[data-gn-sys] .gn-dash-ttitle { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.25 !important; }
/* liste vide : l'action est dans le message, pas deux fois */
/* (tour 4) liste vide : UN bouton « Nouveau », celui de la barre — la phrase « Utilisez Nouveau » le désigne ; celui du corps, d'un autre dessin, se retire */
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-root:has(.dt3-bar .dt3-btn.primary[data-role="addrow"]) .dt3-empty-cta { display: none !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-state .dt3-state-ico { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--ui-radius, 10px); background: var(--gn-action-soft); color: var(--color-primary); margin-bottom: 10px; }
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-state .dt3-state-ico svg { width: 22px; height: 22px; }
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-empty-cta { background: var(--gn-primary-fill) !important; color: var(--gn-on-primary) !important; border-radius: var(--btn-radius, 10px) !important; }
body:not(#gn_)[data-gn-avatars="aucun"] .gn-dash-tile .dt3-lavatar { display: none !important; }
/* la case à cocher de la page d'accès : dessinée par le système (elle restait un carré blanc en sombre) */
body:not(#gn_)[data-gn-sys] section.min-h-screen input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: min(var(--ui-radius-sm, 4px), 4px) !important; background: var(--gn-surface) !important; border: max(1px, var(--ui-bw, 1px)) solid var(--gn-line-strong) !important; display: inline-grid; place-content: center; cursor: pointer; }
body:not(#gn_)[data-gn-sys] section.min-h-screen input[type="checkbox"]:checked { background: var(--gn-primary-fill) !important; border-color: var(--gn-primary-fill) !important; }
body:not(#gn_)[data-gn-sys] section.min-h-screen input[type="checkbox"]:checked::after { content: ""; width: 9px; height: 5px; border-inline-start: 2px solid var(--gn-on-primary); border-bottom: 2px solid var(--gn-on-primary); transform: rotate(-45deg) translate(1px, -1px); }
/* ── 25. Téléphone ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-lrow .dt3-lavatar { display: none !important; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-lrow { padding-block: 12px !important; border-bottom: 1px solid var(--gn-line) !important; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-ltitle { font-family: var(--ui-font-head, inherit) !important; font-size: 15px !important; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-bar { gap: 8px !important; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-search { flex: 1 1 100% !important; }
  body:not(#gn_)[data-gn-sys] .gn-hero-top { flex-wrap: wrap !important; row-gap: 12px !important; }
  /* le titre d'une fiche ne se coupe pas au milieu d'un mot — mais il PASSE À LA LIGNE entre les mots. « white-space: nowrap » le tranchait net
     au bord du cadre, sans points de suspension : sur un téléphone, on ne lisait pas la fin (« BARÈME DE COTISATION #90 », 11 octobre 2026).  */
  body:not(#gn_)[data-gn-sys] .gn-hero-title { font-size: 22px !important; overflow-wrap: break-word !important; word-break: keep-all !important; white-space: normal !important; }
  body:not(#gn_)[data-gn-sys] .gn-hero-kpis { grid-template-columns: 1fr 1fr !important; }
  /* l'en-tête d'un formulaire : le titre prend la ligne, les boutons passent dessous */
  body:not(#gn_)[data-gn-sys] .form-title > div > .flex { flex-wrap: wrap !important; row-gap: 14px !important; }
  body:not(#gn_)[data-gn-sys] .form-title h2 { flex: 1 1 100% !important; min-width: 0 !important; }
  body:not(#gn_)[data-gn-sys] .form-title .gn-df-actions { flex: 1 1 100% !important; justify-content: flex-start !important; }
  body:not(#gn_)[data-gn-sys] > main { padding-bottom: 150px !important; }
}
/* ── 26. Écriture arabe (droite à gauche) ─────────────────────────────────── */
/* L'arabe ne se met ni en capitales ni en lettres espacées (l'espacement casse la liaison des lettres), il lui faut un
   corps un peu plus grand et plus d'interligne que le latin, et de la place pour ses signes au-dessus de la ligne. */
body:not(#gn_)[data-gn-sys]:dir(rtl) *:not(svg *) { letter-spacing: 0 !important; text-transform: none !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl) { line-height: 1.7; }
body:not(#gn_)[data-gn-sys]:dir(rtl) :is(.gn-nav-section, .gn-nav-section span, .gn-dt3 thead th, .dt3-thl, .gn-kpi-l, .gn-wf-title, .gn-wf-actlab, .gn-df-sechead h3, .gn-rep-th) { font-size: 13px !important; font-weight: 600 !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl) :is(.gn-nav-count, .gn-rtc-count, .gn-fv-msg, .gn-dash-tsub, .dt3-kpicap, .dt3-lmeta, .gn-sf-sub, .gn-vr-legend, .gn-rtc-tiles-auto, .gn-lh-more) { font-size: 13px !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl) :where(.gn-dt3, .gn-view, .gn-dash-tile, main) .dt3-chip:where(:not(.dt3-badge)), body:not(#gn_)[data-gn-sys]:dir(rtl) :is(.gn-fc-badge, .gn-hero-badge) { font-size: 13px !important; line-height: 1.8 !important; padding-block: 1px !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl) :is(.gn-df-input, .ts-control, .gn-dp-display, .dt3-search input, label, .gn-nav-link) { line-height: 1.7 !important; }
/* les nombres, les dates chiffrées, les références restent de gauche à droite et alignés sur leur colonne */
body:not(#gn_)[data-gn-sys]:dir(rtl) :is(.dt3-num, td.dt3-c-num, .dt3-kpibig, .gn-kpi-v, .gn-rep-calc, .gn-rep-somme, .gn-rep-bl-val) { direction: ltr; unicode-bidi: isolate; }
body:not(#gn_)[data-gn-sys]:dir(rtl) .gn-dt3 :is(thead th, tbody td).dt3-c-num { text-align: left !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl) .gn-dt3 thead th.dt3-c-num .dt3-sort { justify-content: flex-end !important; }
/* une aide sous un champ : la graisse du texte courant (elle était en « 100 », un cheveu, lisible sur aucun écran) */
body:not(#gn_)[data-gn-sys] :is(.gn-ff [id^="help_"], .gn-fv-msg, .gn-df-hint) { font-weight: 400 !important; color: var(--gn-muted) !important; }
/* ── 27. États d'un champ : en erreur, validé, inactif — visibles sans la couleur seule ── */
body:not(#gn_)[data-gn-sys] .gn-fv-invalid :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, select, textarea, .gn-seg) { border-color: var(--gn-danger) !important; border-width: max(2px, var(--ui-bw, 1px)) !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-sys][data-gn-inputs="souligne"] .gn-fv-invalid :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, textarea) { border-width: 0 0 2px 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-fv-msg.err { color: var(--gn-danger) !important; font-weight: 600 !important; }
body:not(#gn_)[data-gn-sys] .gn-fv-msg.err::before { content: "! "; font-weight: 800; }
body:not(#gn_)[data-gn-sys] .gn-fv-msg.ok { display: none !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-df-input, .gn-dp-display, .gn-df textarea, main select):disabled, body:not(#gn_)[data-gn-sys] .ts-wrapper.disabled .ts-control { background: var(--gn-surface-2) !important; color: var(--gn-muted) !important; border-style: dashed !important; border-color: var(--gn-off) !important; cursor: not-allowed; opacity: 1 !important; }
body:not(#gn_)[data-gn-sys] :is(.dt3-btn, .theme-button-primary, .gn-hero-btn, button[type=submit]):disabled { background: var(--gn-surface-2) !important; color: var(--gn-muted) !important; border-color: var(--gn-off) !important; box-shadow: none !important; cursor: not-allowed; opacity: 1 !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl) :is(.gn-df-sechead h3, .gn-df-title, .gn-wf-lab, .gn-wf-btn, .gn-wf-tool, .gn-dash-ttitle, .gn-dash-tsub, .dt3-kpicap, .gn-sf-name, .gn-sf-sub, .gn-hero-title, .gn-fc-h, .gn-lh-hi) { line-height: 1.6 !important; }
body:not(#gn_)[data-gn-heads]:dir(rtl) :is(.gn-lh-hi, .gn-fc-h, .gn-crumb b) { font-family: var(--ui-font-head) !important; }
body:not(#gn_)[data-gn-heads]:dir(rtl) .gn-df-sechead h3 { font-family: var(--ui-font) !important; }
/* ── 28. Le tiroir d'aide, le pied du formulaire, le panneau de l'assistant : ils gardaient un bleu nuit d'usine ── */
body:not(#gn_)[data-gn-sys] .gn-sf-foot { background: var(--gn-surface) !important; border: var(--ui-bw, 1px) solid var(--gn-line) !important; border-radius: var(--ui-radius-lg, 14px) !important; color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] .gn-dc-panel { background: var(--gn-surface) !important; color: var(--gn-text) !important; border-color: var(--gn-line) !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-dc-chip, .gn-dc-faq, .gn-dc-flow, .gn-dc-full, .gn-dc-card) { background: var(--gn-surface-2) !important; color: var(--gn-text) !important; border-color: var(--gn-line) !important; border-radius: var(--ui-radius-sm, 8px) !important; }
body:not(#gn_)[data-gn-sys] .gn-dc-panel :is(a, summary) { color: var(--color-primary) !important; }
body:not(#gn_)[data-gn-sys] .gn-dc-panel :is(p, li, small, .gn-dc-sub) { color: var(--gn-muted) !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-cop-panel, .gn-cop-body, .gn-cop-msg, .gn-cop-in, .gn-cop-hide) { background: var(--gn-surface) !important; color: var(--gn-text) !important; border-color: var(--gn-line) !important; }
body:not(#gn_)[data-gn-sys] .gn-cop-msg.me { background: var(--gn-action-soft) !important; color: var(--gn-text) !important; }

/* ══ TOUR 3 — ce que le second jury a trouvé (rapports : mission_design_systems/panel/round2) ═══════════════════════ */

/* ── 29. Le bouton de l'assistant ne recouvre plus rien : il monte dans la bande du fil d'Ariane ── */
/* Flottant en bas à droite, il couvrait la pagination, le « + » d'une ligne de document, une action sur téléphone. */
body:not(#gn_)[data-gn-sys] .gn-cop-dock { top: 9px !important; bottom: auto !important; inset-inline-end: 16px !important; inset-inline-start: auto !important; }
body:not(#gn_)[data-gn-sys] .gn-cop-fab { width: 34px !important; height: 34px !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-sys] .gn-cop-fab svg { width: 17px !important; height: 17px !important; }
body:not(#gn_)[data-gn-sys] > main { padding-bottom: 28px !important; }
body:not(#gn_)[data-gn-sys] .gn-crumb { padding-inline-end: 56px !important; }

/* ── 30. Listes : l'en-tête d'une colonne de nombres sur le même bord que ses chiffres ; les actions ne réservent aucune largeur ── */
body:not(#gn_)[data-gn-sys] .gn-dt3 thead th.dt3-c-num { text-align: end !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 thead th.dt3-c-num .dt3-sort { flex-direction: row-reverse !important; }
/* (tour 4) la colonne des actions a sa place : les outils de ligne n'apparaissent plus par-dessus la dernière valeur (vu par quatre juges) */
body:not(#gn_)[data-gn-sys] .gn-dt3 :is(th.dt3-actions-h, td.dt3-actions) { width: 1% !important; padding-block: 0 !important; padding-inline: 4px 10px !important; white-space: nowrap !important; border-inline-width: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 td.dt3-actions .dt3-actfloat { position: static !important; transform: none !important; display: inline-flex !important; justify-content: flex-end; }
body:not(#gn_)[data-gn-sys] .gn-dt3 td.dt3-actions .dt3-actpill { background: var(--gn-surface) !important; border: 1px solid var(--gn-line-strong) !important; border-radius: var(--btn-radius, 8px) !important; box-shadow: var(--gn-elev-1) !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 tbody td:has(+ td.dt3-actions) { padding-inline-end: 12px !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-hidcols { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 8px; margin-inline-start: 8px; border: 1px dashed var(--gn-line-strong); border-radius: var(--ui-radius-sm, 8px); background: transparent; color: var(--gn-muted); font: inherit; font-size: 12px; cursor: pointer; }
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-hidcols:hover { color: var(--gn-text); border-color: var(--gn-text); }
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-hidcols svg { width: 13px; height: 13px; }
body:not(#gn_)[data-gn-thead="encre"] .gn-dt3 thead th.dt3-actions-h { background: var(--gn-text) !important; }
/* la recherche suit le traitement des champs */
body:not(#gn_)[data-gn-sys][data-gn-inputs="souligne"] .dt3-search.dt3-search { background: transparent !important; border-width: 0 0 max(1px, var(--ui-bw, 1px)) 0 !important; border-radius: 0 !important; }
/* en-tête inversé : en sombre, une bande ombrée et un filet fort (une bande blanche était l'objet le plus lumineux de l'écran) */
body:not(#gn_)[data-gn-thead="encre"].dark .gn-dt3 thead th { background: var(--gn-surface-2) !important; color: var(--gn-text) !important; border-bottom: 2px solid var(--gn-text) !important; }
body:not(#gn_)[data-gn-thead="encre"].dark .gn-dt3 thead th :is(svg, span) { color: var(--gn-text) !important; }
/* une valeur neutre (« Standard ») ne crie jamais : en variante pleine, elle reste teintée */
body:not(#gn_)[data-gn-badges="plein"] .dt3-chip.dt3-tone-neutral:not(.dt3-badge) { background: var(--gn-neutral-soft) !important; color: var(--gn-neutral-ink) !important; border-color: var(--gn-neutral-line) !important; }
/* dans un système dont la marque est rouge, un lien de table s'écrit à l'encre soulignée (le rouge reste à l'action et à l'alerte) */
body:not(#gn_)[data-gn-lines="encre"] .gn-dt3 a.dt3-fk { color: var(--gn-text) !important; }

/* ── 31. Fiche : un seul affichage de l'état en tête, des tuiles sans boîte dans la boîte ── */
body:not(#gn_)[data-gn-sys] .gn-fc .gn-fc-badge { display: none !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-fc-badge, .gn-hero-badge).info { background: var(--gn-info-soft) !important; color: var(--gn-info-ink) !important; border-color: var(--gn-info-line) !important; }
body:not(#gn_)[data-gn-badges="plein"] .gn-hero-badge.ok { background: var(--gn-ok-fill) !important; color: var(--gn-on-ok) !important; border-color: transparent !important; }
body:not(#gn_)[data-gn-badges="plein"] .gn-hero-badge.warn { background: var(--gn-warn-fill) !important; color: var(--gn-on-warn) !important; border-color: transparent !important; }
body:not(#gn_)[data-gn-badges="plein"] .gn-hero-badge.bad { background: var(--gn-danger-fill) !important; color: var(--gn-on-danger) !important; border-color: transparent !important; }
body:not(#gn_)[data-gn-badges="plein"] .gn-hero-badge.info { background: var(--gn-info-fill) !important; color: var(--gn-on-info) !important; border-color: transparent !important; }
body:not(#gn_)[data-gn-badges="contour"] .gn-hero-badge { background: transparent !important; border-color: currentColor !important; }
body:not(#gn_)[data-gn-badges="point"] .gn-hero-badge { background: transparent !important; border-color: transparent !important; color: var(--gn-text) !important; padding-inline: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-hero .gn-kpi { background: var(--gn-surface-2) !important; border: 0 !important; box-shadow: none !important; border-radius: var(--ui-radius, 10px) !important; }
body:not(#gn_)[data-gn-surface="tonale"] .gn-hero .gn-kpi { background: var(--gn-surface) !important; }
body:not(#gn_)[data-gn-sys] .gn-kpi-v { font-family: var(--ui-font) !important; font-weight: 650 !important; }
@media (max-width: 640px) { body:not(#gn_)[data-gn-sys] .gn-hero-kpis { grid-template-columns: 1fr !important; } }

/* ── 32. Formulaire : l'aide d'un champ se lit quand on y est (ou qu'il est en erreur), pas en permanence ── */
body:not(#gn_)[data-gn-sys] .gn-ff [id^="help_"] { display: none !important; }
body:not(#gn_)[data-gn-sys] .gn-ff:is(:focus-within, .gn-fv-invalid) [id^="help_"] { display: block !important; }
body:not(#gn_)[data-gn-sys] .gn-df .gn-ff { margin-bottom: 14px; }
/* le choix segmenté suit le traitement des champs ; l'option choisie se voit sans la couleur */
body:not(#gn_)[data-gn-sys][data-gn-inputs="souligne"] .gn-seg { background: transparent !important; border-width: 0 0 max(1px, var(--ui-bw, 1px)) 0 !important; border-radius: 0 !important; padding-inline: 0 !important; }
body:not(#gn_)[data-gn-sys][data-gn-inputs="souligne"] .gn-seg-opt.on { background: transparent !important; box-shadow: inset 0 -2px 0 var(--color-primary) !important; border-radius: 0 !important; }
body:not(#gn_)[data-gn-sys][data-gn-inputs="rempli"] .gn-seg { border-color: transparent !important; border-bottom: max(1px, var(--ui-bw, 1px)) solid var(--gn-line-strong) !important; }
/* une seule hauteur de champ : la date ne dépasse pas ses voisins d'un pixel */
body:not(#gn_)[data-gn-sys] :is(.gn-df-input, .gn-dp-display, .ts-wrapper .ts-control):not(textarea) { box-sizing: border-box !important; min-height: 42px !important; }
/* bouton principal « au trait » : il domine quand même (voile de marque, trait plus fort) ; l'action secondaire devient discrète */
body:not(#gn_)[data-gn-sys][data-gn-buttons="contour"] :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary), body:not(#gn_)[data-gn-sys][data-gn-buttons="contour"] section.min-h-screen :is(button.bg-blue-600, button[type="submit"]) { background: var(--gn-primary-soft) !important; border-width: max(2px, var(--ui-bw, 1px)) !important; font-weight: 700 !important; }
body:not(#gn_)[data-gn-sys][data-gn-buttons="contour"] .gn-df :is(.theme-button-secondary, .gn-df-cancel), body:not(#gn_)[data-gn-sys][data-gn-buttons="contour"] .gn-dt3 .dt3-btn:not(.primary):not(.danger) { background: transparent !important; border-color: var(--gn-line-strong) !important; font-weight: 500 !important; }
/* supprimer, dans un système dont la marque est rouge : un bouton au trait avec son icône, pas un second bouton plein rouge */
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-btn.danger { background: var(--gn-surface) !important; color: var(--gn-danger-ink) !important; border: max(2px, var(--ui-bw, 1px)) solid var(--gn-danger) !important; font-weight: 700 !important; }
/* cartes sœurs d'un écran : un seul trait (l'encart du formulaire avait le sien) */
body:not(#gn_)[data-gn-lines="encre"] :is(.gn-sf-foot, .gn-df-rc, .gn-rep-cq, .gn-rtc-tiles-card) { border: max(1px, var(--ui-bw, 1px)) solid var(--gn-text) !important; }
body:not(#gn_)[data-gn-surface="tonale"] :is(.gn-wf, .gn-sf-foot, .gn-rtc-tiles-card) { border-color: transparent !important; background: var(--gn-tonal) !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-surface="elevee"] :is(.gn-wf, .gn-sf-foot, .gn-rtc-tiles-card) { border-color: transparent !important; box-shadow: var(--gn-elev-2) !important; }
body:not(#gn_)[data-gn-surface="plate"] :is(.gn-wf, .gn-sf-foot, .gn-rtc-tiles-card) { box-shadow: none !important; }

/* ── 33. Accueil : le titre de la page est un titre ; les tuiles occupent leur rangée ── */
body:not(#gn_)[data-gn-sys] .gn-lh-hi { font-family: var(--ui-font-head, inherit) !important; font-weight: var(--ui-head-weight, 700) !important; letter-spacing: var(--ui-head-track, -0.01em) !important; font-size: calc(1.75rem * var(--gn-title-scale, 1)) !important; line-height: 1.2 !important; color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-dash-ttitle, .dt3-title) { font-size: calc(1.05rem * var(--gn-title-scale, 1)) !important; }
body:not(#gn_)[data-gn-sys] .gn-lh-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; }
body:not(#gn_)[data-gn-sys] .gn-lh-tile { background: var(--gn-surface-2) !important; border: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-lh-tn { font-family: var(--ui-font) !important; font-weight: 700 !important; font-variant-numeric: lining-nums tabular-nums !important; }
body:not(#gn_)[data-gn-sys] .gn-lh-foot .gn-lh-tourlink + .gn-lh-tourlink { margin-inline-start: 14px; }
/* un chiffre clé se lit sous son titre, pas au milieu d'un vide ; une tuile à un seul chiffre ne s'étire pas */
body:not(#gn_)[data-gn-sys] .gn-dash-tile:has(.dt3-kpibig) { align-self: start !important; height: auto !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile:has(.dt3-kpibig) .dt3-kpi, body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-kpibig { margin-top: 6px !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-kpibig { font-family: var(--ui-font) !important; font-weight: 700 !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-list { padding-inline: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-lrow { padding-inline: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-lavatar { display: none !important; }

/* ── 34. Mises en page (réglages « Menu », « Largeur des pages », « Page de connexion ») ── */
/* colonne centrée : le contenu ne s'étire pas sur un grand écran (à la manière d'un document) */
body:not(#gn_)[data-gn-page="centre"] > main > :is(.gn-crumb, .gn-lh, .gn-view, .gn-df, .gn-dt3, .gn-dash, [class*="gn-dash-grid"], .gn-block-hold, div:not(:only-child[class]:not([class*="gn-"])):has(> .gn-dt3), div:not(:only-child[class]:not([class*="gn-"])):has(> .gn-df)) { max-width: 1040px; margin-inline: auto !important; width: 100%; }
/* connexion en deux volets : un pan aux couleurs de la marque, le formulaire à côté */
@media (min-width: 900px) {
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen { justify-content: flex-end !important; padding-inline-end: clamp(24px, 9vw, 150px) !important; background: var(--gn-surface) !important; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 46%; background: var(--gn-primary-fill); background-image: radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--gn-on-primary) 16%, transparent) 0 1.5px, transparent 2px), linear-gradient(160deg, color-mix(in srgb, var(--gn-on-primary) 10%, transparent), transparent 55%); background-size: 22px 22px, 100% 100%; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .pointer-events-none { display: none !important; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen #loginCardShell { margin-inline: 0 !important; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen .rounded-3xl.border { border-color: transparent !important; box-shadow: none !important; background: transparent !important; }
}
/* connexion sans carte : le formulaire posé sur la page, sans halo */
body:not(#gn_)[data-gn-signin="nu"] section.min-h-screen > .pointer-events-none { display: none !important; }
body:not(#gn_)[data-gn-signin="nu"] section.min-h-screen .rounded-3xl.border { border-color: transparent !important; box-shadow: none !important; background: transparent !important; }
body:not(#gn_)[data-gn-signin="nu"] section.min-h-screen { background: var(--gn-surface) !important; }
/* les deux halos du fond : la marque et son accent voisin, jamais une teinte étrangère */
body:not(#gn_)[data-gn-sys] section.min-h-screen.bg-gradient-to-b > .bg-cyan-100, body:not(#gn_)[data-gn-sys] section.min-h-screen > .pointer-events-none:nth-of-type(2) { background: color-mix(in srgb, var(--gn-primary-fill) 13%, transparent) !important; }
body:not(#gn_)[data-gn-surface="plate"] section.min-h-screen > .pointer-events-none { display: none !important; }
/* le filet de part et d'autre de « ou connectez-vous… » : le filet du système, en clair comme en sombre */
body:not(#gn_)[data-gn-sys] section.min-h-screen :is(.rp-or::before, .rp-or::after, .rp-or span, .rp-or i) { background: var(--gn-line) !important; border-color: var(--gn-line) !important; }
body:not(#gn_)[data-gn-sys] section.min-h-screen .rp-or { border-color: var(--gn-line) !important; }

/* ── 35. Droite à gauche : les nombres gardent leur bord droit et leurs décimales alignées ; une valeur reste sous son libellé ── */
body:not(#gn_)[data-gn-sys]:dir(rtl) .gn-dt3 :is(thead th, tbody td).dt3-c-num { text-align: right !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl) .gn-dt3 thead th.dt3-c-num .dt3-sort { flex-direction: row !important; justify-content: flex-start !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl) :is(.gn-kpi-v, .dt3-kpibig, .gn-rep-calc, .gn-rep-somme, .gn-rep-bl-val, .gn-lh-tn, .gn-rtc-tile b) { text-align: right !important; display: block; }
body:not(#gn_)[data-gn-sys]:dir(rtl) :is(.gn-fv-msg, .gn-ff [id^="help_"], .rp-sub, .rp-or, .rp-dev, .gn-sf-sub, .gn-wf-lab, .gn-dash-tsub, .dt3-kpicap) { font-size: 13.5px !important; }
body:not(#gn_)[data-gn-heads]:dir(rtl) :is(h1, h2, h3, .gn-hero-title, .gn-df-title, .gn-lh-hi, .gn-fc-h, .dt3-title, .gn-dash-ttitle) { font-weight: 700 !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl) :is(.gn-fc-h, .gn-hero-sub) { font-size: 1.08em !important; }
/* les pictogrammes qui ont un sens de lecture se retournent (replier le menu, sortir) */
body:not(#gn_)[data-gn-sys]:dir(rtl) :is(.gn-sb-collapse svg, [aria-label*="Replier"] svg, .gn-nav-link[href*="ogout"] svg, .gn-nav-link[href*="ogout"] .iconify) { transform: scaleX(-1); }

/* ── 36. Clavier, états, cibles (rapport d'accessibilité du tour 2) ─────────── */
/* UN anneau de focus : 2 px pleins, à la couleur d'action, décollés de 2 px — sur les champs comme sur les boutons, et il
   reste visible sur un champ en erreur (l'ancien halo pâle mesurait 1,35:1). */
body:not(#gn_)[data-gn-sys] :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, .dt3-search, .gn-seg, main select, .gn-df textarea, section.min-h-screen input:not([type="checkbox"]):not([type="radio"])):is(:focus, :focus-within) { outline: 2px solid var(--color-primary) !important; outline-offset: 2px !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-sys] :is(a, button, [role="button"], [tabindex], summary, .gn-nav-link, .dt3-pg, .gn-rtc-tab, input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--color-primary) !important; outline-offset: 2px !important; }
body:not(#gn_)[data-gn-sidebar] aside :is(a, button, [tabindex]):focus-visible { outline-color: var(--sbb-ink) !important; }
/* le choix « Simple / Complet » de l'accueil : l'option choisie se voit sans la couleur (graisse, cadre) */
body:not(#gn_)[data-gn-sys] .gn-lh-seg { background: var(--gn-surface-2) !important; border: 1px solid var(--gn-line-strong) !important; border-radius: var(--ui-radius, 10px) !important; }
body:not(#gn_)[data-gn-sys] .gn-lh-seg-b { color: var(--gn-muted) !important; font-weight: 500 !important; border-radius: calc(var(--ui-radius, 10px) - 3px) !important; }
body:not(#gn_)[data-gn-sys] .gn-lh-seg-b[aria-pressed="true"] { background: var(--gn-surface) !important; color: var(--gn-text) !important; font-weight: 700 !important; box-shadow: 0 0 0 1.5px var(--gn-text) !important; }
/* des cibles d'au moins 24 px pour les outils d'une ligne et l'aide d'un champ */
body:not(#gn_)[data-gn-sys] :is(.gn-rep-btn, .gn-rep-del, .gn-rep-add, .gn-fh-q, .dt3-ia) { min-width: 24px !important; min-height: 24px !important; display: inline-grid !important; place-items: center; }
body:not(#gn_)[data-gn-sys] .gn-rep-del { min-width: 30px !important; min-height: 30px !important; }
body:not(#gn_)[data-gn-sys] .gn-fh-q { border: 1px solid var(--gn-line-strong) !important; border-radius: 50% !important; font-size: 12px !important; font-weight: 700 !important; }
/* les actions d'une ligne et sa case se montrent aussi au clavier, pas seulement au survol */
body:not(#gn_)[data-gn-sys] .gn-dt3 tbody tr:focus-within :is(.dt3-actfloat, .dt3-actpill, .dt3-ck, .dt3-rowexp) { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
/* le parcours : le trait vers les étapes à venir est un filet du système (il était d'un gris froid presque invisible) */
body:not(#gn_)[data-gn-sys] .gn-wf-step::before { background: var(--gn-line-strong) !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-step.done::before, body:not(#gn_)[data-gn-sys] .gn-wf-step.cur::before, body:not(#gn_)[data-gn-sys] .gn-wf-step.opt.avant::before { background: var(--gn-ok-fill) !important; }
/* une étape ÉVENTUELLE (que le modèle permet de sauter) : un point creux en pointillés, sans rang — elle n'est ni faite ni due */
body:not(#gn_)[data-gn-sys] .gn-wf-step.opt:not(.cur) .gn-wf-dot { background: transparent !important; border-style: dashed !important; border-color: var(--gn-muted) !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-step.opt:not(.cur) .gn-wf-lab { color: var(--gn-muted) !important; font-weight: 500 !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-optnote { color: var(--gn-muted) !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-acts { border-top-color: var(--gn-line) !important; }
/* chevrons du menu, flèche inactive de la pagination, bord d'une boîte de dialogue : visibles (3:1) */
body:not(#gn_)[data-gn-sidebar] aside:has(.gn-nav-link) .gn-nav-section :is(svg, .iconify) { color: var(--gn-sb-muted) !important; opacity: 1 !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 :is(.dt3-pg[disabled], .dt3-pg.dis, .dt3-pg:disabled) { color: var(--gn-off) !important; border-color: var(--gn-off) !important; border-style: dashed !important; }
body:not(#gn_)[data-gn-sys] .dt3-modalbox { border: 1px solid var(--gn-line-strong) !important; }
body:not(#gn_)[data-gn-sys] .dt3-cfm-ov { background: color-mix(in srgb, black 55%, transparent) !important; }
body:not(#gn_)[data-gn-sys] :is(hr, .gn-df-sechead, .gn-rep-thead, .gn-rep-row, .gn-rep-totaux) { border-color: var(--gn-line) !important; }
/* plus aucune exception de taille : 12 px pour tout, capitales comprises */
body:not(#gn_)[data-gn-sys] :is(.gn-nav-section, .gn-nav-section span, .gn-dt3 thead th, .dt3-thl, .gn-kpi-l, .gn-wf-title, .gn-wf-actlab, .gn-df-sechead h3) { font-size: 12px !important; letter-spacing: .04em; }
/* un anneau de graphique se lit sans la couleur : un écart net entre les parts, chaque part à 3:1 du fond */
body:not(#gn_)[data-gn-sys] .dt3-cslice { stroke: var(--gn-surface) !important; stroke-width: 3px !important; }

/* ── 37. L'espace entre deux mots, ramenée à un quart de cadratin quelle que soit la police (mesurée par gn-theme.js) ── */
body:not(#gn_)[data-gn-sys] { word-spacing: var(--gn-word-gap, 0); }
/* les boutons, champs et listes ne reprennent pas d'eux-mêmes l'espace du texte (la feuille du navigateur la remet à « normal ») */
body:not(#gn_)[data-gn-sys] :is(button, input, select, textarea, optgroup) { word-spacing: var(--gn-word-gap, 0); }
body:not(#gn_)[data-gn-heads] :is(h1, h2, h3, h4, .gn-df-title, .gn-hero-title, .gn-sec-title, .dt3-title, .gn-sb-brandtext, .gn-lh-hi, .gn-dash-ttitle, .dt3-state b) { word-spacing: var(--gn-word-gap-head, 0); }
body:not(#gn_)[data-gn-sys] main :is(.theme-button-secondary, button.theme-button:not(.theme-button-primary):not(.theme-button-danger)) { background: var(--gn-surface) !important; color: var(--gn-text) !important; border: max(1px, var(--ui-bw, 1px)) solid var(--gn-line-strong) !important; border-radius: var(--btn-radius, 10px) !important; }
body:not(#gn_)[data-gn-sys] main .theme-button-danger { background: var(--gn-surface) !important; color: var(--gn-danger-ink) !important; border: max(2px, var(--ui-bw, 1px)) solid var(--gn-danger) !important; border-radius: var(--btn-radius, 10px) !important; font-weight: 700 !important; }
/* ── 38. Les états que les jetons décrivent et que la feuille ne posait pas encore (survol, inactif, choisi) ── */
body:not(#gn_)[data-gn-sys] :is(.gn-dt3 .dt3-btn:not(.primary):not(.danger), main .theme-button-secondary):hover { background: var(--gn-surface-2) !important; }
body:not(#gn_)[data-gn-sys] .gn-rtc-tab:hover { color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] .gn-rtc-tab:is([disabled], .dis, [aria-disabled="true"]) { color: var(--gn-off) !important; }
body:not(#gn_)[data-gn-sys] .gn-seg-opt:hover:not(.on) { color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] .gn-seg-opt:is([disabled], [aria-disabled="true"]) { color: var(--gn-off) !important; opacity: 1 !important; }
body:not(#gn_)[data-gn-sys] .ts-dropdown .option[aria-disabled="true"] { color: var(--gn-off) !important; }
body:not(#gn_)[data-gn-sys] .ts-dropdown .option.selected { background: var(--gn-action-soft) !important; color: var(--gn-action-ink) !important; }
body:not(#gn_)[data-gn-sidebar] aside .gn-nav-link:is([aria-disabled="true"], .disabled) { color: var(--gn-sb-muted) !important; }
/* ── 39. UN état inactif pour tous les boutons, quelle que soit leur variante (plein, dégradé, doux, au trait, secondaire, icône) ── */
/* (sélecteur renforcé : les règles par variante, plus précises, gardaient leur fond — un libellé pâle sur un dégradé vif) */
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys] :is(.dt3-btn, .dt3-ic, .theme-button, .theme-button-primary, .theme-button-secondary, .gn-hero-btn, .gn-df-cancel, .gn-wf-btn, .gn-wf-tool, .gn-fc-dup, button[type="submit"], section.min-h-screen button):is(:disabled, [disabled], [aria-disabled="true"]) { background: var(--gn-surface-2) !important; background-image: none !important; color: var(--gn-muted) !important; border: 1px dashed var(--gn-off) !important; box-shadow: none !important; opacity: 1 !important; cursor: not-allowed !important; filter: none !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys] :is(.dt3-btn, .dt3-ic, .theme-button, .theme-button-primary, .gn-hero-btn, button[type="submit"]):is(:disabled, [disabled], [aria-disabled="true"]) :is(svg, span, i) { color: var(--gn-muted) !important; }
/* ── 40. Les nouveaux éléments de la fiche et de l'accueil : issues d'un parcours, offre de visite, pictogramme d'un document ── */
body:not(#gn_)[data-gn-sys] .gn-wf-exits { color: var(--gn-muted) !important; font-size: 12px !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-exits-l { color: var(--gn-muted) !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-exit { background: transparent !important; color: var(--gn-muted) !important; border: 1px dashed var(--gn-line-strong) !important; border-radius: var(--gn-chip-radius, 999px) !important; font-size: 12px !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-exit.cur.bad { background: var(--gn-danger-soft) !important; color: var(--gn-danger-ink) !important; border: 1px solid var(--gn-danger-line) !important; font-weight: 700 !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-exit.cur:not(.bad) { background: var(--gn-neutral-soft) !important; color: var(--gn-neutral-ink) !important; border-style: solid !important; font-weight: 700 !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-btn.ok { background: var(--gn-ok-soft) !important; color: var(--gn-ok-ink) !important; border-color: var(--gn-ok-line) !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-btn.gn-wf-exitbtn { background: transparent !important; color: var(--gn-danger-ink) !important; border-color: var(--gn-danger-line) !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-off { background: var(--gn-neutral-soft) !important; color: var(--gn-neutral-ink) !important; border: 1px solid var(--gn-neutral-line) !important; border-radius: var(--gn-chip-radius, 999px) !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-off.bad { background: var(--gn-danger-soft) !important; color: var(--gn-danger-ink) !important; border-color: var(--gn-danger-line) !important; }
body:not(#gn_)[data-gn-sys] .gn-wf-off.warn { background: var(--gn-warn-soft) !important; color: var(--gn-warn-ink) !important; border-color: var(--gn-warn-line) !important; }
body:not(#gn_)[data-gn-sys] .gn-hero-av-ic { background: var(--gn-surface-2) !important; color: var(--gn-muted) !important; border: 1px solid var(--gn-line) !important; border-radius: var(--ui-radius, 12px) !important; }
body:not(#gn_)[data-gn-sys] .gn-hero-av-ic svg { color: var(--gn-muted) !important; }
body:not(#gn_)[data-gn-sys] .gn-vr-calc { color: var(--gn-muted) !important; }
body:not(#gn_)[data-gn-sys] .gn-lh-touroffer { background: var(--gn-surface-2) !important; color: var(--gn-text) !important; border: 1px solid var(--gn-line) !important; border-radius: var(--ui-radius, 12px) !important; }
body:not(#gn_)[data-gn-sys] .gn-lh-touroffer-go { background: var(--gn-primary-fill) !important; color: var(--gn-on-primary) !important; border-radius: var(--btn-radius, 10px) !important; border: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-lh-touroffer-no { background: transparent !important; color: var(--gn-muted) !important; }
body:not(#gn_)[data-gn-sys] .dt3-state-hint { color: var(--gn-muted) !important; font-size: 13px !important; }
body:not(#gn_)[data-gn-badges="plein"] .gn-hero-badge.neu { background: var(--gn-neutral-soft) !important; color: var(--gn-neutral-ink) !important; }
/* l'aide d'un champ : un rond de 18 px à l'œil (il ne décale pas le libellé), une cible de 26 px au doigt */
body:not(#gn_)[data-gn-sys] .gn-fh-q.gn-fh-q { min-width: 18px !important; min-height: 18px !important; width: 18px !important; height: 18px !important; line-height: 1 !important; font-size: 12px !important; position: relative; vertical-align: middle; padding: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-fh-q::after { content: ""; position: absolute; inset: -4px; }
/* ── 41. Le menu en haut ────────────────────────────────────────────────────
   Troisième gabarit (après la barre large et le rail d'icônes) : la barre devient une bande horizontale, chaque groupe une
   liste déroulante (au survol ET au clavier), le compte passe à droite. Sous 1024 px rien ne change : le menu reste un volet. */
@media (min-width: 1024px) {
  body:not(#gn_)[data-gn-nav="haut"] { flex-direction: column !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside:has(.gn-nav-link) { position: sticky !important; top: 0 !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 56px !important; flex: none !important; flex-direction: row !important; align-items: center !important; overflow: visible !important; border-inline-end: 0 !important; border-bottom: 1px solid var(--sbb-line) !important; z-index: 60 !important; padding-inline: 8px 12px !important; column-gap: 8px !important; transform: none !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside .gn-sb-logo { height: 56px !important; border: 0 !important; padding-inline: 10px 14px !important; flex: none !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside .gn-sb-brand { display: flex !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside .gn-sb-actions { display: none !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside > nav { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; overflow: visible !important; padding: 0 !important; column-gap: 8px !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside > nav > * { margin-block: 0 !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside > nav > nav { flex: 1 1 auto !important; min-width: 0 !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] { flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; gap: 2px !important; padding: 0 !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li { position: relative !important; margin: 0 !important; padding: 0 !important; width: auto !important; border: 0 !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li::before, body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li::after { display: none !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li > :is(a.gn-nav-link, .gn-nav-section) { display: inline-flex !important; align-items: center !important; gap: 7px !important; height: 36px !important; min-height: 0 !important; width: auto !important; margin: 0 !important; padding: 0 11px !important; white-space: nowrap !important; border: 0 !important; border-radius: var(--ui-radius-sm, 8px) !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li > .gn-nav-section, body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li > .gn-nav-section span { text-transform: none !important; letter-spacing: 0 !important; font-size: var(--ui-fs, 14px) !important; font-weight: 500 !important; color: var(--sbb-ink) !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li > a.gn-nav-link .gn-nav-count { display: none !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li:is(:hover, :focus-within) > .gn-nav-section { background: var(--sbb-hover) !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li > .gn-nav-section > svg:last-child { transform: rotate(0deg) !important; width: 14px !important; height: 14px !important; opacity: .8 !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li:has(.gn-nav-active) > .gn-nav-section { box-shadow: inset 0 -2px 0 var(--gn-sb-active-ink, currentColor) !important; border-end-start-radius: 0 !important; border-end-end-radius: 0 !important; }
  /* la liste d'un groupe */
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li > .gn-nav-subwrap { position: absolute !important; top: calc(100% + 6px) !important; inset-inline-start: 0 !important; min-width: 236px !important; display: none !important; grid-template-rows: 1fr !important; background: var(--sbb-bg) !important; color: var(--sbb-ink) !important; border: 1px solid var(--sbb-line) !important; border-radius: var(--ui-radius, 10px) !important; box-shadow: var(--gn-elev-2, 0 12px 32px rgba(0, 0, 0, .18)) !important; padding: 6px !important; z-index: 70 !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li > .gn-nav-subwrap::before { content: ""; position: absolute; inset-inline: 0; top: -8px; height: 8px; }
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li:is(:hover, :focus-within) > .gn-nav-subwrap { display: block !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li > .gn-nav-subwrap .gn-nav-sublist { overflow: visible !important; display: flex !important; flex-direction: column !important; gap: 1px !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li > .gn-nav-subwrap .gn-nav-item { margin: 0 !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li > .gn-nav-subwrap .gn-nav-link { white-space: nowrap !important; }
  /* le compte, à droite ; son menu s'ouvre vers le bas */
  body:not(#gn_)[data-gn-nav="haut"] > aside > nav > div.sticky { position: static !important; flex: none !important; width: auto !important; margin-inline-start: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside .gn-sf { width: auto !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside .gn-sf-acct { padding: 4px 8px !important; min-height: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside .gn-sf-sub { display: none !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside .gn-sf-pop { inset-inline: auto 0 !important; bottom: auto !important; top: calc(100% + 10px) !important; width: 264px !important; }
  body:not(#gn_)[data-gn-nav="haut"] > main { min-height: 0 !important; }
  body:not(#gn_)[data-gn-nav="haut"] .gn-cop-dock { top: 65px !important; }
  /* le menu du compte s'ouvre sous la bande : le bouton de l'assistant s'efface le temps qu'il est ouvert */
  body:not(#gn_)[data-gn-nav="haut"]:has(.gn-sf-pop:not([hidden])) .gn-cop-dock { visibility: hidden !important; }
}
/* entre 1024 et 1279 px la bande se resserre (le nom du compte se lit dans son menu) avant de passer sur deux rangs */
@media (min-width: 1024px) and (max-width: 1279px) {
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li > :is(a.gn-nav-link, .gn-nav-section) { padding: 0 8px !important; gap: 5px !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside ul[id^="menu-"] > li > a.gn-nav-link > :is(svg, .iconify) { display: none !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside .gn-sf-who { display: none !important; }
  body:not(#gn_)[data-gn-nav="haut"] > aside .gn-sb-logo { padding-inline: 6px 8px !important; }
}
/* ── 42. Listes, tour 4 ─────────────────────────────────────────────────────
   Ce que le jury a vu sur les listes : un en-tête de nombre décalé de ses chiffres, des cases à cocher tantôt là tantôt non. */
/* l'en-tête d'un nombre tombe à l'aplomb de ses chiffres : le bouton d'options passe AVANT le libellé au lieu de le pousser */
body:not(#gn_)[data-gn-sys] .gn-dt3 thead th:is(.dt3-c-num, .dt3-c-currency, .dt3-c-progress, .dt3-c-duration) .dt3-hmenu { position: absolute !important; inset-inline-start: 4px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 thead th:is(.dt3-c-num, .dt3-c-currency, .dt3-c-progress, .dt3-c-duration) { position: relative; }
/* une seule règle pour la sélection : la case est là, discrète, sur chaque ligne ET dans l'en-tête, dans tous les systèmes */
body:not(#gn_)[data-gn-sys] .gn-dt3 :is(thead, tbody) .dt3-ckcell .dt3-ck { opacity: 1 !important; visibility: visible !important; border-color: var(--gn-line-strong) !important; background: transparent !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 :is(thead, tbody) .dt3-ckcell .dt3-ck.ck { background: var(--gn-primary-fill) !important; border-color: var(--gn-primary-fill) !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 :is(thead, tbody) .dt3-ckcell .dt3-ck { position: relative; }
body:not(#gn_)[data-gn-sys] .gn-dt3 :is(thead, tbody) .dt3-ckcell .dt3-ck::after { content: ""; position: absolute; inset: -5px; }
/* ── 43. Tableau de bord, tour 4 ────────────────────────────────────────────
   Une grille sans trou : les chiffres d'abord (une rangée), puis les graphiques, puis les listes ; chaque rangée d'une même
   hauteur ; un chiffre clé jamais tronqué, dans la police du TEXTE (une police de titre à forts contrastes rend « 1 » illisible). */
body:not(#gn_)[data-gn-sys] .gn-dash-grid { grid-auto-flow: row dense !important; align-items: stretch !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-grid:has(> .gn-dash-section) { grid-auto-flow: row !important; }   /* rangé en sections : aucune tuile ne remonte combler un trou au-dessus de son intitulé */
body:not(#gn_)[data-gn-sys] .gn-dash-grid > .gn-dash-tile { align-self: stretch !important; height: auto !important; display: flex !important; flex-direction: column !important; min-width: 0 !important; }
/* … sauf quand l'auteur a rangé ses tuiles sous des intitulés (tuiles « section ») : son ordre fait foi, sinon les intitulés
   tombaient tous en bas de la grille, séparés de leurs tuiles (WebRadar, 23 oct. 2026) */
body:not(#gn_)[data-gn-sys] .gn-dash-grid:not(:has(> .gn-dash-section)) > .gn-dash-kpi { order: -3; }
body:not(#gn_)[data-gn-sys] .gn-dash-grid:not(:has(> .gn-dash-section)) > .gn-dash-chart { order: -2; }
body:not(#gn_)[data-gn-sys] .gn-dash-grid > .gn-dash-tile > .gn-dash-tbody { flex: 1 1 auto !important; min-height: 0; display: flex; flex-direction: column; }
body:not(#gn_)[data-gn-sys] .gn-dash-grid > .gn-dash-kpi > .gn-dash-tbody { justify-content: flex-end; }
body:not(#gn_)[data-gn-sys] .gn-dash-grid > .gn-dash-tile > .gn-dash-tbody > .gn-dt3 { flex: 1 1 auto; min-width: 0; }
/* une tuile de chiffre : un petit libellé, le chiffre en bas — tous les chiffres d'une rangée sur la même ligne */
body:not(#gn_)[data-gn-sys] .gn-dash-grid > .gn-dash-kpi > .gn-dash-tbody > .gn-dt3 { flex: 0 0 auto; }
body:not(#gn_)[data-gn-sys] .gn-dash-grid > .gn-dash-kpi .gn-dash-ttitle { font-family: var(--ui-font, inherit) !important; font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.35 !important; color: var(--gn-muted) !important; text-transform: none !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-grid > .gn-dash-kpi .gn-dash-thead > :is(svg, .gn-dash-ticon) { display: none !important; }
/* le titre d'une tuile : l'icône sur la PREMIÈRE ligne, un titre qui passe à la ligne sans couper une parenthèse en deux */
body:not(#gn_)[data-gn-sys] .gn-dash-tile .gn-dash-thead { align-items: flex-start !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .gn-dash-thead > :is(svg, .gn-dash-ticon) { margin-block-start: 3px !important; flex: none !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .gn-dash-ttitle { text-wrap: balance; overflow-wrap: normal !important; word-break: normal !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-kpiwrap { min-width: 0; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-kpibig { font-family: var(--ui-font, inherit) !important; font-weight: 700 !important; overflow: hidden !important; text-overflow: clip !important; white-space: nowrap !important; max-width: 100% !important; }
/* les chiffres d'une fiche : même règle — la police du texte, jamais celle des titres */
body:not(#gn_)[data-gn-heads] :is(.gn-kpi-v, .gn-rtc-tile b, .dt3-cdonuttot) { font-family: var(--ui-font, inherit) !important; letter-spacing: 0 !important; }
/* ── 44. Fiche, tour 4 ──────────────────────────────────────────────────────
   L'étiquette d'état de l'en-tête suit LA recette du système (la même que dans la liste), avec ses marges dans les deux sens
   d'écriture ; l'étape finale réussie se lit comme un succès, jamais comme une alerte ; la fiche ne se répète plus. */
body:not(#gn_)[data-gn-sys] :is(.gn-hero-badge, .gn-fc-badge):is(.ok, .bad, .warn, .info, .neu, :not(.x)) { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding-block: 2px !important; padding-inline: 10px !important; white-space: nowrap !important; line-height: 1.5 !important; }
body:not(#gn_)[data-gn-badges="contour"] :is(.gn-hero-badge, .gn-fc-badge):is(.ok, .bad, .warn, .info, .neu, :not(.x)) { background: transparent !important; border-color: currentColor !important; }
body:not(#gn_)[data-gn-badges="point"] :is(.gn-hero-badge, .gn-fc-badge):is(.ok, .bad, .warn, .info, .neu, :not(.x)) { background: transparent !important; border-color: transparent !important; color: var(--gn-text) !important; padding-inline: 0 !important; font-weight: 500 !important; }
body:not(#gn_)[data-gn-badges="point"] :is(.gn-hero-badge, .gn-fc-badge):is(.ok, .bad, .warn, .info, .neu, :not(.x))::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gn-off); }
body:not(#gn_)[data-gn-badges="point"] :is(.gn-hero-badge, .gn-fc-badge).ok::before { background: var(--gn-ok); }
body:not(#gn_)[data-gn-badges="point"] :is(.gn-hero-badge, .gn-fc-badge).bad::before { background: var(--gn-danger); }
body:not(#gn_)[data-gn-badges="point"] :is(.gn-hero-badge, .gn-fc-badge).warn::before { background: var(--gn-warning); }
body:not(#gn_)[data-gn-badges="point"] :is(.gn-hero-badge, .gn-fc-badge).info::before { background: var(--color-info); }
/* l'état est dit UNE fois dans l'en-tête : celui du bandeau « où en est mon dossier » laisse la place à la phrase */
body:not(#gn_)[data-gn-sys] .gn-fc .gn-fc-badge { display: none !important; }
body:not(#gn_)[data-gn-sys] .gn-fc { padding-block: 12px !important; }
body:not(#gn_)[data-gn-sys] .gn-fc .gn-fc-top { align-items: center !important; }
body:not(#gn_)[data-gn-sys] .gn-fc .gn-fc-next { margin-top: 2px !important; }
/* le parcours : l'étape en cours est à l'ENCRE (un anneau), jamais à la couleur de marque — rouge, elle se lisait comme une erreur ;
   la dernière étape, atteinte, est un succès comme les précédentes */
body:not(#gn_)[data-gn-sys] .gn-wf .gn-wf-step.cur .gn-wf-dot { background: var(--gn-surface) !important; color: var(--gn-text) !important; border: 2px solid var(--gn-text) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gn-text) 14%, transparent) !important; }
body:not(#gn_)[data-gn-sys] .gn-wf .gn-wf-step.cur:last-child .gn-wf-dot { background: var(--gn-ok-fill, var(--gn-ok)) !important; border-color: var(--gn-ok-fill, var(--gn-ok)) !important; color: var(--gn-on-ok, #fff) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gn-ok) 22%, transparent) !important; }
/* le point de l'étape en cours est DESSINÉ (un rond de 8 px), pas un caractère « ● » de 11 px */
body:not(#gn_)[data-gn-sys] .gn-wf .gn-wf-step.cur .gn-wf-dot { font-size: 12px !important; text-indent: -999px !important; overflow: hidden !important; position: relative !important; }
body:not(#gn_)[data-gn-sys] .gn-wf .gn-wf-step.cur .gn-wf-dot::before { position: absolute; inset: 0; margin: auto; text-indent: 0; }
body:not(#gn_)[data-gn-sys] .gn-wf .gn-wf-step.cur:not(:last-child) .gn-wf-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
body:not(#gn_)[data-gn-sys] .gn-wf .gn-wf-step.cur:last-child .gn-wf-dot::before { display: grid; place-items: center; }
body:not(#gn_)[data-gn-sys] .gn-wf .gn-wf-step.cur:last-child .gn-wf-dot::before { content: "✓"; font-size: 13px; font-weight: 700; line-height: 1; }
/* un seul filet sous les onglets (la barre et son conteneur en traçaient chacun un, à 20 px d'écart) */
body:not(#gn_)[data-gn-sys] .gn-rtc-nav { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 16px !important; }
/* les onglets portent déjà les dossiers liés et leur nombre : le bloc qui les répétait juste dessous se retire */
body:not(#gn_)[data-gn-sys] :is(.gn-view, main):has(.gn-rtc-pbar .gn-rtc-tab[data-tab^="r"]) .gn-rtc-tiles-card { display: none !important; }
/* ── 45. Une seule largeur de page par gabarit ──────────────────────────────
   La liste, le tableau de bord, le formulaire et la fiche partagent les mêmes bords (la liste avait 18 px de retrait en plus,
   le formulaire et la fiche chacun son plafond) : d'un écran à l'autre, rien ne saute.
   Sauf la COLONNE DE L'AUTEUR : un élément seul dans <main>, d'une classe à lui (pas « gn-… »), est la mise en page qu'un
   site s'est dessinée (la .wrap de 1240 px du site Soul & Planet devenait 1320, plus large que son en-tête — 23 oct. 2026). */
body:not(#gn_)[data-gn-sys] .gn-dt3 > .dt3-root.dt3-standalone { padding-inline: 0 !important; }
body:not(#gn_)[data-gn-sys]:not([data-gn-page="centre"]) > main > :is(.gn-crumb, .gn-lh, .gn-view, .gn-df, .gn-dt3, .gn-dash, [class*="gn-dash-grid"], .gn-block-hold, div:not(:only-child[class]:not([class*="gn-"])):has(> .gn-dt3), div:not(:only-child[class]:not([class*="gn-"])):has(> .gn-df)) { max-width: 1320px !important; margin-inline: auto !important; width: 100%; }
body:not(#gn_)[data-gn-sys][data-gn-page="centre"] > main > :is(.gn-crumb, .gn-lh, .gn-view, .gn-df, .gn-dt3, .gn-dash, [class*="gn-dash-grid"], .gn-block-hold, div:not(:only-child[class]:not([class*="gn-"])):has(> .gn-dt3), div:not(:only-child[class]:not([class*="gn-"])):has(> .gn-df)) { max-width: 1040px !important; margin-inline: auto !important; width: 100%; }
/* ── 46. La liste au téléphone, tour 4 ─────────────────────────────────────
   Des cibles au doigt (44 px), « Supprimer » hors de portée du pouce (il reste dans le menu de la fiche), un tri en UNE commande. */
@media (max-width: 640px) {
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-lrow .dt3-cactions { gap: 0 !important; align-items: center !important; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-lrow .dt3-cactions .dt3-ia { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: var(--ui-radius-sm, 8px) !important; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-lrow .dt3-cactions .dt3-ia svg { width: 20px !important; height: 20px !important; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-lrow .dt3-cactions .dt3-ia.del { display: none !important; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-viewbar { background: transparent !important; border-inline: 0 !important; border-top: 0 !important; padding-block: 8px !important; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-viewbar .dt3-sortctl { background: var(--gn-surface) !important; border: 1px solid var(--gn-line-strong) !important; border-radius: var(--ui-radius-sm, 8px) !important; min-height: 44px !important; padding-inline: 12px 8px !important; color: var(--gn-text) !important; flex: 1 1 auto; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-viewbar .dt3-sortctl select { appearance: none !important; -webkit-appearance: none !important; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; min-height: 42px !important; flex: 1 1 auto; color: inherit !important; font: inherit !important; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-viewbar .dt3-sortdir { min-width: 44px !important; min-height: 44px !important; }
}
/* ── 47. Ce qui parle fort, ce qui parle bas ───────────────────────────────
   Dans une liste, l'ÉTAT porte l'étiquette du système ; une simple catégorie (mode de livraison, secteur) se dit en texte, avec
   un point de sa couleur — elle ne concurrence plus l'état ni le montant, et ne s'éteint plus dans un système à une teinte. */
body:not(#gn_)[data-gn-sys] .gn-dt3 :is(td, .dt3-lmeta) .dt3-chip.dt3-chip:is(.dt3-cat-1, .dt3-cat-2, .dt3-cat-3, .dt3-cat-4, .dt3-cat-5, .dt3-cat-6, .dt3-cat-7, .dt3-cat-8) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; padding-inline: 0 !important; color: var(--gn-text) !important; font-weight: 400 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; border-radius: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: inherit !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 :is(td, .dt3-lmeta) .dt3-chip.dt3-chip:is(.dt3-cat-1, .dt3-cat-2, .dt3-cat-3, .dt3-cat-4, .dt3-cat-5, .dt3-cat-6, .dt3-cat-7, .dt3-cat-8)::before { content: "" !important; display: inline-block !important; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gn-dot, var(--gn-off)) !important; border: 0 !important; position: static !important; }
/* un lien vers une autre fiche : lisible comme un lien, sans gras ni pointillé permanent */
body:not(#gn_)[data-gn-sys] .gn-dt3 td .dt3-fk.dt3-fkrel { font-weight: 500 !important; text-decoration: none !important; border-bottom: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 td .dt3-fk.dt3-fkrel:is(:hover, :focus-visible) { text-decoration: underline !important; text-underline-offset: 3px; }
/* la page précédente, quand il n'y en a pas : la même recette « désactivé » que partout (plus de cadre en pointillé autour d'un signe illisible) */
body:not(#gn_)[data-gn-sys] .gn-dt3 :is(.dt3-pg[disabled], .dt3-pg.dis, .dt3-pg:disabled) { border-style: solid !important; border-color: var(--gn-line) !important; background: var(--gn-surface-2, transparent) !important; color: var(--gn-off) !important; }
/* « Lignes par page » : une liste aux couleurs du système, avec son chevron */
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-foot select[data-role="size"] { appearance: none !important; -webkit-appearance: none !important; min-height: 30px !important; padding: 2px 26px 2px 10px !important; border: 1px solid var(--gn-line-strong) !important; border-radius: var(--ui-radius-sm, 8px) !important; background-color: var(--gn-surface) !important; color: var(--gn-text) !important; font: inherit !important; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%) !important; background-position: calc(100% - 13px) 52%, calc(100% - 8px) 52% !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl) .gn-dt3 .dt3-foot select[data-role="size"] { padding: 2px 10px 2px 26px !important; background-position: 8px 52%, 13px 52% !important; }
/* les onglets d'une fiche, dans un système « à l'encre » : leur filet est de la même encre que les cartes */
body:not(#gn_)[data-gn-lines="encre"] .gn-rtc-pbar { border-bottom-color: var(--gn-text) !important; }
/* ── 48. Marque : le volet de la connexion, le haut du rail d'icônes, un seul titre par page d'accès ──────────────
   (GnBrandPane.) Trois endroits où la marque avait la place de se montrer et où il n'y avait rien.
   a) Le VOLET coloré de la connexion « deux volets » : `.gn-signin-pane`, écrit par les trois pages d'accès. Il naît fermé
      (attribut hidden) ; il ne s'ouvre qu'ici, à partir de 900 px. Il porte le logo INVERSÉ (tuile à l'encre du volet,
      tracé à la couleur du volet — la même inversion que sur une barre latérale aux couleurs de la marque), la signature,
      une promesse, et l'image choisie par l'auteur sous un voile. L'encre est celle du système (--gn-on-primary) ; si elle
      n'y tient pas 4,5:1, le serveur puis gn-brand-pane.js posent la meilleure du blanc et d'un presque-noir.
      Une page servie par un ancien gabarit (sans `.gn-signin-pane`) garde le pan uni de la section 34.
   b) Le haut du RAIL d'icônes : le symbole reste (le nom seul s'efface), le bouton de dépliage passe dessous.
   c) Les TITRES des pages d'accès : sous un logo, le titre est un second rang (corps du texte, 18 px) ; dans « deux volets »,
      où le volet porte le logo, il redevient le seul titre de l'écran. */
/* c) un seul titre par écran */
body:not(#gn_)[data-gn-sys] section.min-h-screen .gn-signin-h { font-family: var(--ui-font, inherit) !important; font-size: 18px !important; line-height: 1.35 !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
body:not(#gn_)[data-gn-sys] section.min-h-screen .gn-signin-sub { margin-block-start: 4px !important; }
@media (min-width: 900px) {
  /* a) le volet remplace le pan uni, et le formulaire se centre dans la moitié qui lui reste (il ne mord plus sur le volet entre 900 et 1000 px) */
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen:has(> .gn-signin-pane)::before { content: none !important; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen:has(> .gn-signin-pane) { justify-content: center !important; padding-inline: calc(46% + 24px) 24px !important; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane { display: flex !important; position: absolute; inset-block: 0; inset-inline-start: 0; width: 46%; align-items: center; overflow: hidden; isolation: isolate; background: var(--gn-primary-fill); --gn-sp-c: var(--gn-sp-ink-live, var(--gn-sp-ink-l, var(--gn-on-primary))); --gn-sp-a: var(--gn-sp-a-live, var(--gn-sp-a-l, .9)); color: var(--gn-sp-c) !important; }
  body:not(#gn_)[data-gn-signin="volets"].dark section.min-h-screen > .gn-signin-pane { --gn-sp-c: var(--gn-sp-ink-live, var(--gn-sp-ink-d, var(--gn-on-primary))); --gn-sp-a: var(--gn-sp-a-live, var(--gn-sp-a-d, .9)); }
  /* la matière du volet : une trame de points en haut et en bas, jamais sous les textes ; ou l'image de l'auteur, sous un voile à la couleur du volet */
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle at center, color-mix(in srgb, var(--gn-sp-c) 24%, transparent) 0 1.2px, transparent 1.7px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(to bottom, black 0, transparent 26%, transparent 74%, black 100%); mask-image: linear-gradient(to bottom, black 0, transparent 26%, transparent 74%, black 100%); }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane.gn-sp-has-img::before { background: var(--gn-sp-img) center / cover no-repeat; -webkit-mask-image: none; mask-image: none; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane.gn-sp-has-img::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--gn-primary-fill); opacity: var(--gn-sp-a); }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane > .gn-sp-in { box-sizing: border-box; width: 100%; max-width: 36rem; margin-inline: auto; padding: 56px clamp(40px, 5.5vw, 84px); display: flex; flex-direction: column; align-items: flex-start; text-align: start; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane[data-sp-align="center"] > .gn-sp-in { align-items: center; text-align: center; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane[data-sp-align="center"] .gn-sp-logo { justify-content: center; }
  /* le logo : inversé. Les variables d'un logo « vivant » prennent ici l'encre du volet ; le tracé de sa tuile, la couleur du volet (ou la couleur propre du logo) */
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane .gn-sp-logo { display: flex; align-items: center; gap: 18px; width: 100%; min-width: 0; color: var(--gn-sp-c) !important; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane .gn-sp-logo.gn-brand-live { --gn-logo-bg: var(--gn-sp-c); --gn-logo-bg2: var(--gn-sp-c); --gn-logo-fg: var(--gnb-rev, var(--gn-primary-fill)); --gn-logo-softfg: var(--gnb-rev, var(--gn-primary-fill)); --gn-logo-soft: color-mix(in srgb, var(--gn-sp-c) 84%, var(--gn-primary-fill)); --gn-logo-ink: var(--gn-sp-c); --gn-logo-text: var(--gn-sp-c); --gn-logo-accent: var(--gn-sp-c); --gn-logo-muted: var(--gn-sp-c); --gn-logo-tone2: color-mix(in srgb, var(--gn-sp-c) 62%, var(--gn-primary-fill)); }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane .gn-sp-logo > svg.gn-sp-svg { display: block; height: auto; max-width: 100%; flex: none; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane .gn-sp-m { flex: none; width: 72px; height: 72px; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane .gn-sp-m > svg { display: block; width: 72px; height: 72px; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane .gn-sp-n { min-width: 0; font-family: var(--ui-font-head, inherit) !important; font-weight: var(--ui-head-weight, 700) !important; font-size: clamp(28px, 2.5vw, 36px) !important; line-height: 1.12 !important; letter-spacing: var(--ui-head-track, -.01em) !important; color: var(--gn-sp-c) !important; overflow-wrap: break-word; text-wrap: balance; text-align: start; }
  /* un logo DÉPOSÉ : nu s'il se lit sur le volet ; sinon sur une plaque claire AJUSTÉE à lui (même marge des quatre côtés), jamais un blanc pur */
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane .gn-sp-logo > img.gn-sp-img { display: block; width: auto; height: 64px; max-width: 100%; object-fit: contain; object-position: left center; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane:dir(rtl) .gn-sp-logo > img.gn-sp-img { object-position: right center; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane .gn-sp-logo > img.gn-sp-plate { box-sizing: content-box; height: auto; max-height: 56px; max-width: calc(100% - 36px); padding: 18px; background: var(--gn-sp-plate, var(--gn-surface)); border-radius: var(--ui-radius-sm, 8px); }
  body:not(#gn_)[data-gn-signin="volets"]:not(.dark) section.min-h-screen > .gn-signin-pane .gn-sp-logo > img.gn-sp-on-d, body:not(#gn_)[data-gn-signin="volets"].dark section.min-h-screen > .gn-signin-pane .gn-sp-logo > img.gn-sp-on-l { display: none; }
  /* la signature et la promesse : pleine encre (aucune opacité : chaque texte tient 4,5:1 sur le volet) */
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane .gn-sp-tagline { margin: 36px 0 0 !important; max-width: 20em; font-family: var(--ui-font-head, inherit) !important; font-size: 22px !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: var(--ui-head-track, -.005em) !important; color: var(--gn-sp-c) !important; opacity: 1 !important; text-wrap: balance; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane .gn-sp-promise { margin: 12px 0 0 !important; max-width: 27em; font-family: var(--ui-font, inherit) !important; font-size: 16px !important; line-height: 1.55 !important; font-weight: 400 !important; letter-spacing: 0 !important; color: var(--gn-sp-c) !important; opacity: 1 !important; text-wrap: pretty; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane .gn-sp-logo + .gn-sp-promise, body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane .gn-sp-logo + script + .gn-sp-promise, body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen > .gn-signin-pane .gn-sp-logo + link + .gn-sp-promise { margin-block-start: 32px !important; }
  /* c) le volet porte le logo : celui du dessus du formulaire se retire, et le titre du formulaire est LE titre — aligné sur le bord des champs */
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen:has(> .gn-signin-pane) .gn-login-brand { display: none !important; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen:has(> .gn-signin-pane) .gn-signin-h { font-family: var(--ui-font-head, inherit) !important; font-size: 24px !important; line-height: 1.25 !important; font-weight: var(--ui-head-weight, 700) !important; letter-spacing: var(--ui-head-track, -.01em) !important; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen:has(> .gn-signin-pane) :is(div:has(> .gn-signin-h), .gn-signin-sub) { text-align: start !important; margin-inline: 0 !important; }
  body:not(#gn_)[data-gn-signin="volets"] section.min-h-screen:has(> .gn-signin-pane) .gn-signin-sub { margin-block-start: 6px !important; }
}
/* b) le haut du rail d'icônes (barre repliée) : le symbole, puis le bouton de dépliage sur sa propre rangée */
@media (min-width: 768px) {
  body:not(#gn_)[data-gn-sys]:not([data-gn-nav="haut"]) aside.sb-collapsed .gn-sb-logo { height: auto !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; gap: 8px !important; padding-block: 16px 10px !important; }
  body:not(#gn_)[data-gn-sys]:not([data-gn-nav="haut"]) aside.sb-collapsed .gn-sb-brand { display: flex !important; flex: none !important; justify-content: center !important; gap: 0 !important; }
  body:not(#gn_)[data-gn-sys]:not([data-gn-nav="haut"]) aside.sb-collapsed .gn-sb-brand > :is(.gn-sb-brandtext, .gn-brand-name, .gn-sb-mark.gn-sb-wide) { display: none !important; }
  body:not(#gn_)[data-gn-sys]:not([data-gn-nav="haut"]) aside.sb-collapsed .gn-sb-brand > .gn-sb-rail { display: grid !important; place-items: center; width: 32px; height: 32px; }
  /* le nom n'est plus écrit, mais il reste DIT (lecteurs d'écran) */
  body:not(#gn_)[data-gn-sys]:not([data-gn-nav="haut"]) aside.sb-collapsed .gn-sb-brand > .gn-sb-railname { display: block !important; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body:not(#gn_)[data-gn-sys]:not([data-gn-nav="haut"]) aside.sb-collapsed .gn-sb-actions { flex-direction: column !important; gap: 4px !important; }
}
/* la tuile à une lettre (une image : elle ne peut pas s'inverser) sur une barre aux couleurs de la marque : un liseré à l'encre de la barre la détache */
body:not(#gn_)[data-gn-sidebar="marque"] aside .gn-sb-railmark > img { border-radius: min(16px, max(calc(var(--ui-radius, 8px) * .7), calc(var(--btn-radius, 0px) - 60px))); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sbb-ink) 62%, transparent); }
/* d) un logo composé est dessiné en coordonnées de gauche à droite (un nom arabe y est déjà posé à droite par son dessin) : dans une page arabe son texte ne doit pas repartir du bord opposé et recouvrir le symbole */
body:not(#gn_)[data-gn-sys] :is(.gn-brand-live, .gn-brand-lockup, .gn-sp-logo, .gn-sb-mark) svg { direction: ltr; }
/* ── fin de la section 48 (Marque : surfaces) ── */
/* ── 49. Écriture arabe, tour 4 ─────────────────────────────────────────── */
/* La politique des polices d'un écran arabe n'est pas ici : elle est dans les feuilles des polices (une police = une règle :
   l'espace vient de la police arabe, le naskh a sa coupe « UI » agrandie, un système à chasse fixe a sa ponctuation à chasse
   variable — tools/fetch_design_fonts.mjs) et dans la pile que le serveur écrit dès la page (GnArabicType). Ce qui suit
   règle ce qu'une police ne peut pas dire : la graisse d'un titre, le rang d'un libellé, le corps minimum. */

/* a) Un titre arabe garde la GRAISSE des titres du système : les lettres latines et les chiffres qu'il contient
      (« CMD-2026-0005 ») sont dessinés comme sur l'écran français. La section 35 forçait 700 : le numéro d'une commande y
      devenait une affiche. Le naskh n'a pas besoin de graisse en plus, sa coupe « UI » est agrandie dans sa règle @font-face. */
body:not(#gn_)[data-gn-heads]:dir(rtl) :is(h1, h2, h3, .gn-hero-title, .gn-df-title, .gn-df-htext, .form-title h2, .gn-lh-hi, .gn-fc-h, .dt3-title, .gn-dash-ttitle) { font-weight: var(--ui-head-weight, 600) !important; }
/*    L'intitulé d'une section de fiche ou de formulaire porte la police des TITRES, comme en latin (« Dates & suivi » en Playfair,
      « التواريخ والمتابعة » en naskh). La section 26 le ramenait à la police du texte, parce qu'un naskh de 13 px était trop
      petit : sa coupe « UI » le rend lisible à ce corps, et un système à titres sérif garde son caractère sur toute la page. */
body:not(#gn_)[data-gn-heads]:dir(rtl) .gn-df-sechead h3 { font-family: var(--ui-font-head) !important; }

/* b) Le rang d'un GROUPE de menu. En latin il se lit à ses petites capitales espacées ; l'arabe n'a ni capitales ni
      espacement, et le groupe se confondait avec ses entrées (même corps, presque la même graisse). Il se distingue ici par
      trois choses à la fois : plus petit que les entrées, plus gras, et dans l'encre atténuée de la barre — avec de l'air au-dessus. */
body:not(#gn_)[data-gn-sys]:dir(rtl):not([data-gn-nav="haut"]) aside:has(.gn-nav-link) .gn-nav-section,
body:not(#gn_)[data-gn-sys]:dir(rtl):not([data-gn-nav="haut"]) aside:has(.gn-nav-link) .gn-nav-section :is(span, .menu-label) { font-size: 13px !important; font-weight: 700 !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl):not([data-gn-nav="haut"]) aside:has(.gn-nav-link) .gn-nav-section { padding-block-start: 20px !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl):not([data-gn-nav="haut"]) aside:has(.gn-nav-link) .gn-nav-link :is(.menu-label, .gn-nav-label) { font-size: 14.5px !important; font-weight: 500 !important; }

/* c) Un libellé en capitales garde ses accents, dans toutes les langues : « NUMÉRO » s'écrivait « NUMERO » dans les systèmes
      dont la police pose l'accent haut (Nunito, Instrument Sans, JetBrains Mono) — l'étiquette d'une colonne a une hauteur de
      ligne égale à son corps et coupe ce qui dépasse. Même texte, même source ; seul le haut de la lettre était rogné. On
      agrandit la boîte de coupe sans changer la hauteur de l'en-tête. */
body:not(#gn_)[data-gn-sys] .gn-dt3 thead th .dt3-thl { padding-block: .36em; margin-block: -.36em; }

/* d) Rien d'arabe sous 13 px (le naskh, lui, est agrandi par sa police). Le plancher est tenu par lab/audit.mjs, langue « ar » :
      tout texte arabe mesuré sous 12,9 px y est un défaut. Ces éléments étaient à 12 – 12,5 px. */
body:not(#gn_)[data-gn-sys]:dir(rtl) :is(.gn-df-section label, .gn-vf-lab, td.dt3-c-date, td.dt3-c-datetime, .dt3-cleg-lab, .dt3-cleg-val, .gn-sf-av--txt, .gn-sf-todo, .gn-sf-todo b, .gn-sf-conseq, .gn-sf-conseq :is(span, b), .gn-sf-fknew, .gn-fh-q, .gn-lh-tourlink, .gn-lh-role, .gn-lh-h, .gn-lh-foot, .gn-lh-foot span, .gn-wf-tool, .gn-wf-exits-l, .gn-wf-exit, .dt3-foot, .dt3-foot span, .dt3-hidcols, .dt3-hidcols span, .dvl-role, .dvl-btn, .dvl-title, .rp-ic, .rp-dev, .rp-sub, .rp-or) { font-size: 13px !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl) .gn-dt3 :is(td, .dt3-lmeta, .dt3-card, .dt3-lrow) .dt3-chip.dt3-chip.dt3-chip { font-size: 13px !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl) :is(#rolepick, #dvl-panel) :is(.rp-sub, .rp-dev, .rp-or, .rp-mail, .rp-ic, .dvl-role, .dvl-title, .dvl-badge, .dvl-btn, .dvl-h, small) { font-size: 13px !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl) .gn-dt3 :is(.dt3-kpidelta, .dt3-kpidelta span) { font-size: 13px !important; }

/* f) L'espace entre deux mots (section 37) est corrigée par police : une valeur pour le texte, une pour les titres. Quelques
      éléments prenaient la correction de l'AUTRE police que celle qui les écrit (le titre d'une tuile de chiffre, écrit dans
      la police du texte, recevait celle des titres : 0,19 cadratin mesuré en Instrument Sans). Ils prennent la plus grande
      des deux : jamais des mots qui se touchent, dans aucune langue. */
body:not(#gn_)[data-gn-sys] :is(.gn-dash-grid > .gn-dash-kpi .gn-dash-ttitle, .gn-signin-h, .gn-fc-h, .gn-sp-n, .ts-dropdown-content, .ts-dropdown-content :is(div, span)) { word-spacing: max(var(--gn-word-gap, 0em), var(--gn-word-gap-head, 0em)) !important; }

/* e) Au téléphone, une carte de liste écrit UN renseignement par ligne. Les renseignements se suivaient tant qu'ils tenaient :
      une date courte (« 4 أكتوبر 2026 ») laissait monter l'état à côté d'elle sur la première carte, et pas sur les suivantes
      (« 26 سبتمبر 2026 ») — deux dessins pour la même liste (jury arabe, défaut 20). Dans toutes les langues. */
@media (max-width: 640px) {
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-lrow .dt3-lmetas { flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; }
}
/* la ligne « guide · visite » du bas de l'accueil : le point de séparation ne reste jamais seul en fin de ligne */
body:not(#gn_)[data-gn-sys] .gn-lh-foot :is(a, button) { white-space: nowrap; }
/* ── fin de la section 49 (Écriture arabe, tour 4) ── */
/* ── 60. Les jetons pilotent : états sur les pas des rampes, étage sémantique, variables de composant ── */
/* Écrite par tools/design_tokens_css_section.mjs (une règle par variable de composant publiée par le moteur) : ne pas la retoucher à la main. */
/* 60.1 — survolé, pressé : les pas 10 et 11 de la rampe (plus un filtre de luminosité) ; le mouvement à des durées dites */
body:not(#gn_)[data-gn-sys]:not(#gn_t) :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary), body:not(#gn_)[data-gn-sys]:not(#gn_t) :is(.gn-dt3 .dt3-btn:not(.primary):not(.danger), main .theme-button-secondary), body:not(#gn_)[data-gn-sys]:not(#gn_t) :is(.gn-dt3 .dt3-btn.danger, main .theme-button-danger), body:not(#gn_)[data-gn-sys]:not(#gn_t) .gn-rtc-tab, body:not(#gn_)[data-gn-sys]:not(#gn_t) .gn-seg-opt { transition: background-color var(--gn-motion-duration-hover, .12s) var(--gn-motion-easing-default, ease), border-color var(--gn-motion-duration-hover, .12s) var(--gn-motion-easing-default, ease), color var(--gn-motion-duration-hover, .12s) var(--gn-motion-easing-default, ease), box-shadow var(--gn-motion-duration-hover, .12s) var(--gn-motion-easing-default, ease); }
body:not(#gn_)[data-gn-sys]:not(#gn_t):not([data-gn-buttons]) :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary):hover:not(:disabled) { background: var(--gn-primary-hover) !important; border-color: var(--gn-primary-hover) !important; filter: none !important; }
body:not(#gn_)[data-gn-sys]:not(#gn_t):not([data-gn-buttons]) :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary):active:not(:disabled) { background: var(--gn-primary-press) !important; border-color: var(--gn-primary-press) !important; filter: none !important; }
body:not(#gn_)[data-gn-sys]:not(#gn_t)[data-gn-buttons="doux"] :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary):hover:not(:disabled) { background: var(--gn-action-soft) !important; filter: none !important; }
body:not(#gn_)[data-gn-sys]:not(#gn_t)[data-gn-buttons="doux"] :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary):active:not(:disabled) { background: var(--gn-action-soft) !important; border-color: var(--gn-action-line) !important; filter: none !important; }
body:not(#gn_)[data-gn-sys]:not(#gn_t)[data-gn-buttons="contour"] :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary):active:not(:disabled) { background: var(--gn-action-soft) !important; }
body:not(#gn_)[data-gn-sys]:not(#gn_t)[data-gn-buttons="degrade"] :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary):active:not(:disabled) { border-color: var(--gn-primary-press) !important; }
body:not(#gn_)[data-gn-sys]:not(#gn_t) :is(.gn-dt3 .dt3-btn:not(.primary):not(.danger), main .theme-button-secondary):active { background: var(--gn-field-hover) !important; }
body:not(#gn_)[data-gn-sys]:not(#gn_t) :is(.gn-dt3 .dt3-btn.danger, main .theme-button-danger):hover { background: var(--gn-danger-soft) !important; border-color: var(--gn-danger-hover) !important; filter: none !important; }
body:not(#gn_)[data-gn-sys]:not(#gn_t) :is(.gn-dt3 .dt3-btn.danger, main .theme-button-danger):active { background: var(--gn-danger-soft) !important; border-color: var(--gn-danger-press) !important; filter: none !important; }
body:not(#gn_)[data-gn-sys]:not(#gn_t)[data-gn-inputs="rempli"] :is(.gn-df-input, .ts-wrapper .ts-control, .dt3-search):hover { background: var(--gn-field-hover) !important; }
body:not(#gn_)[data-gn-sys]:not(#gn_t):not([data-gn-inputs]):not([data-gn-lines="encre"]) :is(.gn-df-input, .ts-wrapper .ts-control):hover:not(:focus-within):not(:disabled):not(.gn-fv-invalid *) { border-color: var(--gn-line-strong-hover) !important; }
body:not(#gn_)[data-gn-sys]:not(#gn_t) .gn-seg-opt:active:not(.on) { background: var(--gn-field-hover) !important; color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys]:not(#gn_t) .gn-rtc-tab:active:not(.on) { color: var(--color-primary) !important; }
body:not(#gn_)[data-gn-sidebar]:not(#gn_t) .gn-nav-link:is([aria-disabled="true"], .disabled) { color: var(--sbb-faint) !important; cursor: not-allowed; }
/* 60.2 — l'étage sémantique : un rayon par usage, et l'échelle typographique niveau par niveau (seulement ce qui est réglé) */
body:not(#gn_)[data-gn-set~="r-control"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-btn, .gn-hero-btn, .gn-df .theme-button-primary, .gn-df .theme-button-secondary, .gn-df button[type=submit], .gn-df-cancel, main .theme-button-primary, main .theme-button-secondary, main .theme-button-danger) { border-radius: var(--btn-radius) !important; }
body:not(#gn_)[data-gn-set~="r-control"][data-gn-set][data-gn-set]:not(#gn_t):not([data-gn-inputs]) :is(.gn-df-input, .ts-wrapper .ts-control, .dt3-search, main select, .gn-df textarea, .gn-dp-display, .gn-seg, section.min-h-screen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { border-radius: var(--gn-radius-control) !important; }
body:not(#gn_)[data-gn-set~="r-control"][data-gn-set][data-gn-set]:not(#gn_t)[data-gn-inputs="rempli"] :is(.gn-df-input, .ts-wrapper .ts-control, .dt3-search, main select, .gn-df textarea, .gn-dp-display, .gn-seg, section.min-h-screen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])) { border-radius: min(10px, var(--gn-radius-control)) min(10px, var(--gn-radius-control)) 0 0 !important; }
body:not(#gn_)[data-gn-set~="r-control"][data-gn-set][data-gn-set]:not(#gn_t) .gn-seg-opt { border-radius: max(0px, calc(var(--gn-radius-control) - 3px)) !important; }
body:not(#gn_)[data-gn-set~="r-container"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-dt3 .dt3-shell, .gn-df-section:not(:where(.gn-vr-body, .gn-view-reader) *), .gn-vr-body, .gn-view:not(:has(.gn-hero, > .gn-fc)), .gn-hero, .gn-kpi, .gn-sp-card, .gn-df-rc, .form-title, .gn-df-body) { border-radius: var(--gn-radius-card) !important; }
body:not(#gn_)[data-gn-set~="r-badge"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-chip:not(.dt3-badge), .gn-fc-badge, .gn-hero-badge), body:not(#gn_)[data-gn-set~="r-badge"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-rtc-count, .gn-nav-count, .gn-lh-role) { border-radius: var(--gn-radius-badge) !important; }
body:not(#gn_)[data-gn-set~="t-title-size"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-hero-title, .gn-df-title, .gn-lh-title, .gn-lh-hi, section.min-h-screen h1) { font-size: var(--gn-type-title-size) !important; }
body:not(#gn_)[data-gn-set~="t-title-lh"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-hero-title, .gn-df-title, .gn-lh-title, .gn-lh-hi, section.min-h-screen h1) { line-height: var(--gn-type-title-lh) !important; }
body:not(#gn_)[data-gn-set~="t-title-weight"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-hero-title, .gn-df-title, .gn-lh-title, .gn-lh-hi, section.min-h-screen h1) { font-weight: var(--gn-type-title-weight) !important; }
body:not(#gn_)[data-gn-set~="t-section-size"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-title, .gn-dash-ttitle, .gn-sec-title) { font-size: var(--gn-type-section-size) !important; }
body:not(#gn_)[data-gn-set~="t-section-lh"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-title, .gn-dash-ttitle, .gn-sec-title) { line-height: var(--gn-type-section-lh) !important; }
body:not(#gn_)[data-gn-set~="t-section-weight"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-title, .gn-dash-ttitle, .gn-sec-title) { font-weight: var(--gn-type-section-weight) !important; }
body:not(#gn_)[data-gn-set~="t-body-weight"][data-gn-set][data-gn-set]:not(#gn_t) :is(main, .gn-dt3 tbody td, .gn-df-input, .gn-df textarea) { font-weight: var(--gn-type-body-weight) !important; }
body:not(#gn_)[data-gn-set~="t-caption-size"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-nav-count, .gn-rtc-count, .gn-rtc-tiles-auto, .gn-vr-fx, .dt3-pg, .dt3-kcount, .gn-fv-msg, .gn-dash-tsub, .dt3-kpicap, .dt3-lmeta, .dt3-cleg-val) { font-size: var(--gn-type-caption-size) !important; }
body:not(#gn_)[data-gn-set~="t-caption-lh"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-nav-count, .gn-rtc-count, .gn-rtc-tiles-auto, .gn-vr-fx, .dt3-pg, .dt3-kcount, .gn-fv-msg, .gn-dash-tsub, .dt3-kpicap, .dt3-lmeta, .dt3-cleg-val) { line-height: var(--gn-type-caption-lh) !important; }
body:not(#gn_)[data-gn-set~="t-caption-weight"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-nav-count, .gn-rtc-count, .gn-rtc-tiles-auto, .gn-vr-fx, .dt3-pg, .dt3-kcount, .gn-fv-msg, .gn-dash-tsub, .dt3-kpicap, .dt3-lmeta, .dt3-cleg-val) { font-weight: var(--gn-type-caption-weight) !important; }
body:not(#gn_)[data-gn-set~="t-overline-size"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-nav-section, .gn-nav-section span, .gn-dt3 thead th, .dt3-thl, .gn-kpi-l, .gn-wf-title, .gn-wf-actlab, .gn-df-sechead h3) { font-size: var(--gn-type-overline-size) !important; }
body:not(#gn_)[data-gn-set~="t-overline-lh"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-nav-section, .gn-nav-section span, .gn-dt3 thead th, .dt3-thl, .gn-kpi-l, .gn-wf-title, .gn-wf-actlab, .gn-df-sechead h3) { line-height: var(--gn-type-overline-lh) !important; }
body:not(#gn_)[data-gn-set~="t-overline-weight"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-nav-section, .gn-nav-section span, .gn-dt3 thead th, .dt3-thl, .gn-kpi-l, .gn-wf-title, .gn-wf-actlab, .gn-df-sechead h3) { font-weight: var(--gn-type-overline-weight) !important; }
/* 60.3 — les variables de composant (--gn-c-…) : une règle par variable, lue seulement si le système la pose */
body:not(#gn_)[data-gn-set~="c-button-background"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary) { background: var(--gn-c-button-background) !important; }
body:not(#gn_)[data-gn-set~="c-button-background-hover"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary):hover:not(:disabled) { background: var(--gn-c-button-background-hover) !important; filter: none !important; }
body:not(#gn_)[data-gn-set~="c-button-background-active"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary):active:not(:disabled) { background: var(--gn-c-button-background-active) !important; filter: none !important; }
body:not(#gn_)[data-gn-set~="c-button-text"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary), body:not(#gn_)[data-gn-set~="c-button-text"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary) :is(svg, span, i) { color: var(--gn-c-button-text) !important; }
body:not(#gn_)[data-gn-set~="c-button-border-color"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-btn.primary, .gn-hero-btn.primary, .gn-df .theme-button-primary, .gn-df button[type=submit], main .theme-button-primary) { border-color: var(--gn-c-button-border-color) !important; }
body:not(#gn_)[data-gn-set~="c-button-radius"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-btn, .gn-hero-btn, .gn-df .theme-button-primary, .gn-df .theme-button-secondary, .gn-df button[type=submit], .gn-df-cancel, main .theme-button-primary, main .theme-button-secondary, main .theme-button-danger) { border-radius: var(--gn-c-button-radius) !important; }
body:not(#gn_)[data-gn-set~="c-button-height"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-btn, .gn-hero-btn, .gn-df .theme-button-primary, .gn-df .theme-button-secondary, .gn-df button[type=submit], .gn-df-cancel, main .theme-button-primary, main .theme-button-secondary, main .theme-button-danger) { height: var(--gn-c-button-height) !important; min-height: var(--gn-c-button-height) !important; padding-block: 0 !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
body:not(#gn_)[data-gn-set~="c-button-padding-inline"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-btn, .gn-hero-btn, .gn-df .theme-button-primary, .gn-df .theme-button-secondary, .gn-df button[type=submit], .gn-df-cancel, main .theme-button-primary, main .theme-button-secondary, main .theme-button-danger) { padding-inline: var(--gn-c-button-padding-inline) !important; }
body:not(#gn_)[data-gn-set~="c-button-gap"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-btn, .gn-hero-btn, .gn-df .theme-button-primary, .gn-df .theme-button-secondary, .gn-df button[type=submit], .gn-df-cancel, main .theme-button-primary, main .theme-button-secondary, main .theme-button-danger) { gap: var(--gn-c-button-gap) !important; }
body:not(#gn_)[data-gn-set~="c-button-font-size"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-btn, .gn-hero-btn, .gn-df .theme-button-primary, .gn-df .theme-button-secondary, .gn-df button[type=submit], .gn-df-cancel, main .theme-button-primary, main .theme-button-secondary, main .theme-button-danger) { font-size: var(--gn-c-button-font-size) !important; }
body:not(#gn_)[data-gn-set~="c-button-font-weight"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-btn, .gn-hero-btn, .gn-df .theme-button-primary, .gn-df .theme-button-secondary, .gn-df button[type=submit], .gn-df-cancel, main .theme-button-primary, main .theme-button-secondary, main .theme-button-danger) { font-weight: var(--gn-c-button-font-weight) !important; }
body:not(#gn_)[data-gn-set~="c-button-icon-size"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-btn, .gn-hero-btn, .gn-df .theme-button-primary, .gn-df .theme-button-secondary, .gn-df button[type=submit], .gn-df-cancel, main .theme-button-primary, main .theme-button-secondary, main .theme-button-danger) :is(svg, .iconify) { width: var(--gn-c-button-icon-size) !important; height: var(--gn-c-button-icon-size) !important; font-size: var(--gn-c-button-icon-size) !important; }
body:not(#gn_)[data-gn-set~="c-field-background"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-df-input, .ts-wrapper .ts-control, .dt3-search, main select, .gn-df textarea, .gn-dp-display) { background: var(--gn-c-field-background) !important; }
body:not(#gn_)[data-gn-set~="c-field-text"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-df-input, .ts-wrapper .ts-control, .dt3-search, main select, .gn-df textarea, .gn-dp-display) { color: var(--gn-c-field-text) !important; }
body:not(#gn_)[data-gn-set~="c-field-border-color"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-df-input, .ts-wrapper .ts-control, .dt3-search, main select, .gn-df textarea, .gn-dp-display) { border-color: var(--gn-c-field-border-color) !important; }
body:not(#gn_)[data-gn-set~="c-field-border-color-hover"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-df-input, .ts-wrapper .ts-control, .dt3-search, main select, .gn-df textarea, .gn-dp-display):hover:not(:focus-within):not(:disabled) { border-color: var(--gn-c-field-border-color-hover) !important; }
body:not(#gn_)[data-gn-set~="c-field-border-color-focus"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-df-input, .ts-wrapper .ts-control, .dt3-search, main select, .gn-df textarea, .gn-dp-display):focus, body:not(#gn_)[data-gn-set~="c-field-border-color-focus"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-df-input, .ts-wrapper .ts-control, .dt3-search, main select, .gn-df textarea, .gn-dp-display):focus-within { border-color: var(--gn-c-field-border-color-focus) !important; }
body:not(#gn_)[data-gn-set~="c-field-radius"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-df-input, .ts-wrapper .ts-control, .dt3-search, main select, .gn-df textarea, .gn-dp-display) { border-radius: var(--gn-c-field-radius) !important; }
body:not(#gn_)[data-gn-set~="c-field-height"][data-gn-set][data-gn-set]:not(#gn_t) :is(input.gn-df-input, .ts-wrapper .ts-control, .dt3-search, main select, .gn-dp-display) { min-height: var(--gn-c-field-height) !important; height: var(--gn-c-field-height) !important; box-sizing: border-box !important; }
body:not(#gn_)[data-gn-set~="c-field-padding-inline"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-df-input, .ts-wrapper .ts-control, .dt3-search, main select, .gn-df textarea, .gn-dp-display) { padding-inline-start: var(--gn-c-field-padding-inline) !important; }
body:not(#gn_)[data-gn-set~="c-field-font-size"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-df-input, .ts-wrapper .ts-control, .dt3-search, main select, .gn-df textarea, .gn-dp-display) { font-size: var(--gn-c-field-font-size) !important; }
body:not(#gn_)[data-gn-set~="c-badge-radius"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-chip:not(.dt3-badge), .gn-fc-badge, .gn-hero-badge), body:not(#gn_)[data-gn-set~="c-badge-radius"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-rtc-count, .gn-nav-count, .gn-lh-role) { border-radius: var(--gn-c-badge-radius) !important; }
body:not(#gn_)[data-gn-set~="c-badge-padding-inline"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-chip:not(.dt3-badge), .gn-fc-badge, .gn-hero-badge) { padding-inline: var(--gn-c-badge-padding-inline) !important; }
body:not(#gn_)[data-gn-set~="c-badge-font-size"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-chip:not(.dt3-badge), .gn-fc-badge, .gn-hero-badge) { font-size: var(--gn-c-badge-font-size) !important; }
body:not(#gn_)[data-gn-set~="c-badge-font-weight"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-chip:not(.dt3-badge), .gn-fc-badge, .gn-hero-badge) { font-weight: var(--gn-c-badge-font-weight) !important; }
body:not(#gn_)[data-gn-set~="c-table-header-background"][data-gn-set][data-gn-set]:not(#gn_t) .gn-dt3 thead th { background: var(--gn-c-table-header-background) !important; }
body:not(#gn_)[data-gn-set~="c-table-header-text"][data-gn-set][data-gn-set]:not(#gn_t) .gn-dt3 thead th, body:not(#gn_)[data-gn-set~="c-table-header-text"][data-gn-set][data-gn-set]:not(#gn_t) .gn-dt3 thead th :is(.dt3-sort, button, span) { color: var(--gn-c-table-header-text) !important; }
body:not(#gn_)[data-gn-set~="c-table-header-border-color"][data-gn-set][data-gn-set]:not(#gn_t) .gn-dt3 thead th { border-bottom-color: var(--gn-c-table-header-border-color) !important; }
body:not(#gn_)[data-gn-set~="c-table-header-padding-inline"][data-gn-set][data-gn-set]:not(#gn_t) .gn-dt3 thead th { padding-inline: var(--gn-c-table-header-padding-inline) !important; }
body:not(#gn_)[data-gn-set~="c-table-header-font-size"][data-gn-set][data-gn-set]:not(#gn_t) .gn-dt3 thead th { font-size: var(--gn-c-table-header-font-size) !important; }
body:not(#gn_)[data-gn-set~="c-table-header-font-weight"][data-gn-set][data-gn-set]:not(#gn_t) .gn-dt3 thead th { font-weight: var(--gn-c-table-header-font-weight) !important; }
body:not(#gn_)[data-gn-set~="c-table-row-background"][data-gn-set][data-gn-set]:not(#gn_t) .gn-dt3 tbody td { background: var(--gn-c-table-row-background) !important; }
body:not(#gn_)[data-gn-set~="c-table-row-background-hover"][data-gn-set][data-gn-set]:not(#gn_t) .gn-dt3 tbody tr:hover td { background: var(--gn-c-table-row-background-hover) !important; }
body:not(#gn_)[data-gn-set~="c-table-row-text"][data-gn-set][data-gn-set]:not(#gn_t) .gn-dt3 tbody td { color: var(--gn-c-table-row-text) !important; }
body:not(#gn_)[data-gn-set~="c-table-row-border-color"][data-gn-set][data-gn-set]:not(#gn_t) .gn-dt3 tbody td { border-bottom-color: var(--gn-c-table-row-border-color) !important; }
body:not(#gn_)[data-gn-set~="c-table-row-padding-block"][data-gn-set][data-gn-set]:not(#gn_t) .gn-dt3 tbody td { padding-block: var(--gn-c-table-row-padding-block) !important; }
body:not(#gn_)[data-gn-set~="c-table-row-padding-inline"][data-gn-set][data-gn-set]:not(#gn_t) .gn-dt3 tbody td { padding-inline: var(--gn-c-table-row-padding-inline) !important; }
body:not(#gn_)[data-gn-set~="c-table-row-font-size"][data-gn-set][data-gn-set]:not(#gn_t) .gn-dt3 tbody td { font-size: var(--gn-c-table-row-font-size) !important; }
body:not(#gn_)[data-gn-set~="c-card-background"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-dt3 .dt3-shell, .gn-df-section:not(:where(.gn-vr-body, .gn-view-reader) *), .gn-vr-body, .gn-view:not(:has(.gn-hero, > .gn-fc)), .gn-hero, .gn-kpi, .gn-sp-card, .gn-df-rc, .form-title, .gn-df-body) { background: var(--gn-c-card-background) !important; }
body:not(#gn_)[data-gn-set~="c-card-border-color"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-dt3 .dt3-shell, .gn-df-section:not(:where(.gn-vr-body, .gn-view-reader) *), .gn-vr-body, .gn-view:not(:has(.gn-hero, > .gn-fc)), .gn-hero, .gn-kpi, .gn-sp-card, .gn-df-rc, .form-title, .gn-df-body) { border-color: var(--gn-c-card-border-color) !important; }
body:not(#gn_)[data-gn-set~="c-card-radius"][data-gn-set][data-gn-set]:not(#gn_t) :is(.gn-dt3 .dt3-shell, .gn-df-section:not(:where(.gn-vr-body, .gn-view-reader) *), .gn-vr-body, .gn-view:not(:has(.gn-hero, > .gn-fc)), .gn-hero, .gn-kpi, .gn-sp-card, .gn-df-rc, .form-title, .gn-df-body) { border-radius: var(--gn-c-card-radius) !important; }
body:not(#gn_)[data-gn-set~="c-tab-text"][data-gn-set][data-gn-set]:not(#gn_t) .gn-rtc-tab:not(.on) { color: var(--gn-c-tab-text) !important; }
body:not(#gn_)[data-gn-set~="c-tab-text-selected"][data-gn-set][data-gn-set]:not(#gn_t) .gn-rtc-tab.on { color: var(--gn-c-tab-text-selected) !important; }
body:not(#gn_)[data-gn-set~="c-tab-indicator-color"][data-gn-set][data-gn-set]:not(#gn_t) .gn-rtc-tab.on { border-bottom-color: var(--gn-c-tab-indicator-color) !important; }
body:not(#gn_)[data-gn-set~="c-tab-padding-inline"][data-gn-set][data-gn-set]:not(#gn_t) .gn-rtc-tab { padding-inline: var(--gn-c-tab-padding-inline) !important; }
body:not(#gn_)[data-gn-set~="c-tab-padding-block"][data-gn-set][data-gn-set]:not(#gn_t) .gn-rtc-tab { padding-block: var(--gn-c-tab-padding-block) !important; }
body:not(#gn_)[data-gn-set~="c-tab-gap"][data-gn-set][data-gn-set]:not(#gn_t) .gn-rtc-tab { gap: var(--gn-c-tab-gap) !important; }
body:not(#gn_)[data-gn-set~="c-tab-font-size"][data-gn-set][data-gn-set]:not(#gn_t) .gn-rtc-tab { font-size: var(--gn-c-tab-font-size) !important; }
body:not(#gn_)[data-gn-set~="c-tab-font-weight"][data-gn-set][data-gn-set]:not(#gn_t) .gn-rtc-tab:not(.on) { font-weight: var(--gn-c-tab-font-weight) !important; }
body:not(#gn_)[data-gn-set~="c-tab-font-weight-selected"][data-gn-set][data-gn-set]:not(#gn_t) .gn-rtc-tab.on { font-weight: var(--gn-c-tab-font-weight-selected) !important; }
body:not(#gn_)[data-gn-set~="c-dialog-background"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-modalbox, .dt3-cfmbox) { background: var(--gn-c-dialog-background) !important; }
body:not(#gn_)[data-gn-set~="c-dialog-text"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-modalbox, .dt3-cfmbox) { color: var(--gn-c-dialog-text) !important; }
body:not(#gn_)[data-gn-set~="c-dialog-border-color"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-modalbox, .dt3-cfmbox) { border-color: var(--gn-c-dialog-border-color) !important; }
body:not(#gn_)[data-gn-set~="c-dialog-radius"][data-gn-set][data-gn-set]:not(#gn_t) :is(.dt3-modalbox, .dt3-cfmbox) { border-radius: var(--gn-c-dialog-radius) !important; }
/* ── 48. Un chiffre clé et son écart avec la période précédente ───────────── */
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-kpidelta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin-block: 4px 2px; font-size: 12.5px; color: var(--gn-muted); }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-kpidelta b { font-weight: 600; white-space: nowrap; }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-kpidelta.up b { color: var(--gn-ok-ink, var(--gn-ok)); }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-kpidelta.down b { color: var(--gn-danger-ink, var(--gn-danger)); }
body:not(#gn_)[data-gn-sys] .gn-dash-tile .dt3-kpidelta.flat b { color: var(--gn-text); }
/* ── 45. Formulaires et accessibilité, tour 4 ─────────────────────────────────────────────────────────────────────
   Ce que le jury du tour 3 a relevé dans les formulaires, les boîtes de dialogue et les cibles. Une règle par défaut, à sa
   racine ; les trois traitements de champ (encadré = sans attribut, « rempli », « souligne ») ont chacun leur recette. */
/* 45.1 — Les sections d'un formulaire sont des cartes sœurs sur le fond de la page : leur enveloppe ne se dessine plus
   (cadre doublé, bande grise entre deux cartes, coins droits au-dessus d'une carte arrondie). */
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys] .gn-df .gn-df-body:has(.gn-df-section) { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys] .gn-df .gn-df:has(> .gn-df-body .gn-df-section) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-sys] .gn-df .gn-df-body .gn-df-section { margin-bottom: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-df .gn-df-body :is(.gn-layout, .gn-layout-col) { row-gap: var(--gn-gap, 16px) !important; }
/* le bloc des lignes : sa marge intérieure n'est pas une seconde carte dans la carte */
body:not(#gn_)[data-gn-sys] .gn-df-section-rep > .gn-rep-cq { border: 0 !important; background: transparent !important; box-shadow: none !important; }
/* 45.2 — UN en-tête de section : celui des lignes est celui des autres sections (même composant, mêmes règles) */
body:not(#gn_)[data-gn-sys] .gn-df .gn-df-sechead { min-height: 44px; box-sizing: border-box; }
/* (celui des lignes loge un bouton de 28 px : sa marge intérieure se resserre pour garder la MÊME hauteur — mesurée sur les 27 systèmes) */
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-df .gn-rep-sechead { padding-block: 7.5px !important; }
body:not(#gn_)[data-gn-sys] .gn-df .gn-rep-sechead .gn-rep-add { margin-block: 0 !important; color: var(--color-primary) !important; border: 0 !important; background: transparent !important; border-radius: var(--btn-radius, 8px) !important; min-width: 28px !important; min-height: 28px !important; }
body:not(#gn_)[data-gn-sys] .gn-df .gn-rep-sechead .gn-rep-add:hover { background: var(--gn-action-soft) !important; }
/* 45.3 — L'en-tête du tableau de lignes suit le traitement des en-têtes de liste (data-gn-thead, data-gn-lines) */
body:not(#gn_)[data-gn-sys] .gn-rep-thead { background: var(--gn-surface-2) !important; color: var(--gn-muted) !important; padding-block: calc(var(--gn-cell-py, 10px) * .8 + 2px) !important; border-bottom: 1px solid var(--gn-line) !important; border-radius: var(--ui-radius-sm, 6px) var(--ui-radius-sm, 6px) 0 0; margin-bottom: 4px; }
body:not(#gn_)[data-gn-sys] .gn-rep-th { color: inherit !important; font-size: 12px !important; font-weight: 650 !important; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
body:not(#gn_)[data-gn-sys]:dir(rtl) .gn-rep-th { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0; text-transform: none; line-height: 1.7; }
body:not(#gn_)[data-gn-table="aeree"] .gn-rep-thead { background: transparent !important; }
body:not(#gn_)[data-gn-thead="nu"] .gn-rep-thead { background: transparent !important; border-bottom: max(1px, var(--ui-bw, 1px)) solid var(--gn-line-strong) !important; border-radius: 0; }
body:not(#gn_)[data-gn-thead="marque"] .gn-rep-thead { background: var(--gn-primary-fill) !important; color: var(--gn-on-primary) !important; border-color: transparent !important; }
body:not(#gn_)[data-gn-thead="encre"] .gn-rep-thead { background: var(--gn-text) !important; color: var(--gn-surface) !important; border-color: transparent !important; border-radius: 0; }
body:not(#gn_)[data-gn-thead="encre"].dark .gn-rep-thead { background: var(--gn-surface-2) !important; color: var(--gn-text) !important; border-bottom: 2px solid var(--gn-text) !important; }
body:not(#gn_)[data-gn-lines="encre"]:not([data-gn-thead="encre"]) .gn-rep-thead { border-bottom: max(2px, var(--ui-bw, 1px)) solid var(--gn-text) !important; color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] .gn-rep-thead .gn-rep-req { color: inherit !important; }
/* 45.4 — Une ligne : le montant et les outils sur l'axe des champs, même quand un message d'erreur allonge une cellule */
/* (une marge basse automatique, pas « align-items: start » : dans la grille elle colle la cellule en haut ; quand le tableau
   passe en fiches — une colonne — elle ne fait rien, là où « start » rétrécissait chaque champ et le faisait sortir de la carte) */
body:not(#gn_)[data-gn-sys] .gn-rep-row > :is(.gn-rep-cell, .gn-rep-actions) { margin-bottom: auto; }
/* dans une ligne, l'aide d'un champ ne s'ouvre pas au focus : elle est dans l'en-tête de colonne, et ici elle se coupait */
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-rep-cell .gn-ff [id^="help_"] { display: none !important; }
body:not(#gn_)[data-gn-sys] .gn-rep-cell .gn-ff { margin-bottom: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-rep-row > .gn-rep-actions { min-height: 42px; align-items: center !important; }
body:not(#gn_)[data-gn-sys] .gn-rep-row .gn-rep-calc { min-height: 42px; display: flex !important; align-items: center; justify-content: flex-end; padding-block: 0 !important; box-sizing: border-box; }
body:not(#gn_)[data-gn-sys] .gn-rep-row .gn-rep-calc[hidden] { display: none !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl) .gn-rep-row .gn-rep-calc { justify-content: flex-start; }
/* dans une ligne, la coche « valide » d'un champ se posait sur le nombre qu'on vient de saisir (aligné à droite, comme elle) */
body:not(#gn_)[data-gn-sys] .gn-rep-cell .gn-fx-ok { display: none !important; }
/* les outils d'une ligne : des pictogrammes tracés, une cible de 28 px (30 pour supprimer), visibles sans survol */
body:not(#gn_)[data-gn-sys] :is(.gn-rep-btn, .gn-rep-del) { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--gn-muted) !important; border-radius: var(--btn-radius, 8px) !important; opacity: 1 !important; display: inline-grid !important; place-items: center; }
body:not(#gn_)[data-gn-sys] .gn-rep-del { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; }
body:not(#gn_)[data-gn-sys] .gn-rep-btn:hover { background: var(--gn-action-soft) !important; color: var(--gn-action-ink) !important; }
body:not(#gn_)[data-gn-sys] .gn-rep-del:hover { background: var(--gn-danger-soft) !important; color: var(--gn-danger-ink) !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-rep-btn, .gn-rep-del, .gn-rep-add) .gn-rep-ic { width: 16px; height: 16px; color: inherit !important; }
body:not(#gn_)[data-gn-sys] .gn-rep { --gn-rep-btn: 28px; --gn-rep-del: 30px; --gn-rep-agap: 2px; }
/* 45.5 bis — une liste posée DANS une pastille (le tri d'une liste : « Trier : Créé le ») n'est pas un champ : la pastille
   EST son cadre. Toutes les règles « main select » ci-dessus (bord, fond, rayon, réglages r-control/c-field à deux ids)
   l'encadraient pourtant à l'intérieur de ce cadre — un double bord sur ordinateur, que seule la règle du téléphone
   effaçait (boutique et publications S&P, 23 oct. 2026). Une règle, au poids maximal du système (deux ids), le dit une fois. */
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys]:not(#gn_t) .gn-dt3 .dt3-vpill select { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; background-image: none !important; border-radius: 0 !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys]:not(#gn_t) .gn-dt3 .dt3-vpill:has(select:focus-visible) { outline: 2px solid var(--color-primary) !important; outline-offset: 2px !important; }
/* 45.5 ter — UN FORMULAIRE DE VITRINE (gn-df-vitrine, posé par DataForm sur tout formulaire d'une page « front » ou lue sans
   session, hors dépôt) n'est pas un écran d'administration : ni bandeau-titre encadré et collant (il glissait sous l'en-tête
   collant du site), ni corps encadré, ni ombre — la page lui donne déjà sa carte (Contact S&P : trois cadres emboîtés,
   23 oct. 2026). Le titre devient un titre, le bouton d'envoi suit les champs (DataForm), aligné au début de la ligne. */
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys]:not(#gn_t) .gn-df-vitrine, body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys]:not(#gn_t) .gn-df-vitrine :is(.gn-df, .gn-df-body) { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys]:not(#gn_t) .gn-df-vitrine .form-title { position: static !important; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 0 4px !important; margin: 0 0 12px !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys]:not(#gn_t) .gn-df-vitrine > form { padding-bottom: 0 !important; }
/* l'enveloppe d'un champ (« px-4 py-2 », défaut des anciens générateurs) double l'espacement que le système règle déjà (.gn-ff,   28 px qui logent le message de validation) et décale les champs du titre et du bouton : la vitrine aligne tout au même bord. */body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys]:not(#gn_t) .gn-df-vitrine .gn-ff > [fieldName] { padding: 0 !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys]:not(#gn_t) .gn-df-vitrine .gn-depot-envoi .form-actions { justify-content: flex-start !important; margin-block-start: 8px !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys]:not(#gn_t) .gn-df-vitrine .gn-depot-envoi .gn-df-primary { min-height: 48px !important; }
@media (max-width: 640px) { body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys]:not(#gn_t) .gn-df-vitrine .gn-depot-envoi :is(.form-actions, .gn-df-primary) { width: 100% !important; justify-content: center !important; } }
/* 45.5 quater — UNE FICHE DE VITRINE (gn-vr-vitrine, posé par ViewRecord sur toute fiche publique) suit la même règle : la page
   compose sa surface, le système n'ajoute pas les cadres de section d'un écran d'administration (fiche produit S&P : filets gris
   autour du titre et du prix, cadre autour de toute la fiche — 23 oct. 2026). Seul le cadre part ; les marges restent à la page. */
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys]:not(#gn_t) .gn-vr-vitrine, body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys]:not(#gn_t) .gn-vr-vitrine :is(.gn-df-section, .gn-vr-body) { border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; }


/* 45.5 — UNE couleur de bord pour un champ au repos, qu'il porte une valeur ou non, quel que soit son genre (texte, liste,
   date, zone, choix segmenté). Elle se règle une fois : à l'encre dans les systèmes tracés à l'encre, au filet fort ailleurs. */
body:not(#gn_)[data-gn-sys] { --gn-field-line: var(--gn-line-strong); }
body:not(#gn_)[data-gn-lines="encre"] { --gn-field-line: var(--gn-text); }
body:not(#gn_)[data-gn-sys][data-gn-sys]:not([data-gn-inputs]) :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, .gn-df textarea, main select:not(.gn-seg-native)) { border-color: var(--gn-field-line) !important; border-width: max(1px, var(--ui-bw, 1px)) !important; border-style: solid !important; }
body:not(#gn_)[data-gn-sys][data-gn-inputs="rempli"] :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, .gn-df textarea, main select:not(.gn-seg-native)) { border-color: transparent !important; border-bottom-color: var(--gn-field-line) !important; border-width: max(1px, var(--ui-bw, 1px)) !important; border-style: solid !important; }
body:not(#gn_)[data-gn-sys][data-gn-inputs="souligne"] :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, .gn-df textarea, main select:not(.gn-seg-native)) { border-color: var(--gn-field-line) !important; border-width: 0 0 max(1px, var(--ui-bw, 1px)) 0 !important; border-style: solid !important; }
/* … et les états repassent devant : au clavier, en erreur, inactif */
body:not(#gn_)[data-gn-sys][data-gn-sys] :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, .gn-df textarea, main select:not(.gn-seg-native)):is(:focus, :focus-within) { border-color: var(--color-primary) !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys] .gn-fv-invalid :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, select:not(.gn-seg-native), textarea) { border-color: var(--gn-danger) !important; border-width: max(2px, var(--ui-bw, 1px)) !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-inputs="souligne"] .gn-fv-invalid :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, select:not(.gn-seg-native), textarea) { border-width: 0 0 2px 0 !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys] :is(.gn-df-input, .gn-dp-display, .gn-df textarea, main select):disabled, body:not(#gn_)[data-gn-sys][data-gn-sys] .ts-wrapper.disabled .ts-control { border-color: var(--gn-off) !important; }
/* 45.6 — Le choix segmenté : une recette par traitement de champ. Partout : une piste visible, l'option choisie marquée
   par un fond, une graisse ET une coche (jamais la couleur seule), un survol, un anneau au clavier, les coins des champs. */
body:not(#gn_)[data-gn-sys] .gn-seg-wrap { display: inline-block; max-width: 100%; }
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-seg { display: inline-flex !important; flex-wrap: wrap; align-items: stretch; gap: 3px !important; padding: 3px !important; min-height: 42px; box-sizing: border-box; max-width: 100%; background: var(--gn-surface-2) !important; border: max(1px, var(--ui-bw, 1px)) solid var(--gn-field-line) !important; border-radius: var(--ui-radius, 10px) !important; box-shadow: none !important; outline: 0 !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-seg-opt { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; min-width: 72px; min-height: 32px; padding: 4px 14px !important; margin: 0 !important; border: 0 !important; background: transparent !important; color: var(--gn-muted) !important; font-weight: 500 !important; font-size: var(--ui-fs, 14px) !important; line-height: 1.2 !important; border-radius: max(0px, calc(var(--ui-radius, 10px) - 3px)) !important; box-shadow: none !important; cursor: pointer; }
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-seg-opt:hover:not(.on):not([disabled]) { background: color-mix(in srgb, var(--gn-text) 8%, transparent) !important; color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-seg-opt.on { background: var(--gn-surface) !important; color: var(--gn-text) !important; font-weight: 700 !important; box-shadow: 0 0 0 1.5px var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-seg-opt.on::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-seg-opt:is(:focus-visible, .gn-fv-focus) { outline: 2px solid var(--color-primary) !important; outline-offset: 2px !important; position: relative; z-index: 1; }
/* l'anneau du clavier est sur l'option, pas en double autour du groupe */
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys] .gn-seg.gn-seg:is(:focus, :focus-within) { outline: 0 !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-seg-opt:is([disabled], [aria-disabled="true"]) { color: var(--gn-off) !important; cursor: not-allowed; opacity: 1 !important; }
/* rempli : la piste est le fond d'un champ rempli, cernée d'un filet ENTIER (le seul filet du bas se recourbait aux coins ;
   sans filet du tout la piste ne tenait que 1,05:1 sur la carte — mesuré sur les 27 systèmes) */
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-inputs="rempli"] .gn-seg { background: var(--gn-surface-2) !important; border-color: var(--gn-field-line) !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-surface="tonale"][data-gn-inputs="rempli"] .gn-seg { background: var(--gn-surface) !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-surface="tonale"][data-gn-inputs="rempli"] .gn-seg-opt.on { background: var(--gn-surface-2) !important; }
/* souligné : des cases jointives au trait, l'option choisie inversée — plus trois mots posés sur un filet */
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-inputs="souligne"] .gn-seg { background: transparent !important; gap: 0 !important; padding: 0 !important; border-radius: var(--ui-radius-sm, 0px) !important; overflow: hidden; }
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-inputs="souligne"] .gn-seg-opt { border-radius: 0 !important; min-height: 40px; padding-inline: 16px !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-inputs="souligne"] .gn-seg-opt + .gn-seg-opt { border-inline-start: max(1px, var(--ui-bw, 1px)) solid var(--gn-field-line) !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-inputs="souligne"] .gn-seg-opt.on { background: var(--gn-text) !important; color: var(--gn-surface) !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-inputs="souligne"] .gn-seg-opt:is(:focus-visible, .gn-fv-focus) { outline-offset: -4px !important; outline-color: var(--color-primary) !important; box-shadow: inset 0 0 0 2px var(--gn-surface) !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-fv-invalid .gn-seg { border-color: var(--gn-danger) !important; border-width: max(2px, var(--ui-bw, 1px)) !important; }
/* 45.7 — Une liste montre toujours son chevron, à l'encre atténuée du système : il était d'un gris fixe (1,9:1 sur un fond
   teinté) et, dans les systèmes à champs encadrés ou remplis, peint SOUS le fond du champ — donc absent. */
body:not(#gn_)[data-gn-sys] .gn-ff .ts-wrapper::after, body:not(#gn_)[data-gn-sys] .gn-rep-cell .ts-wrapper::after { content: "" !important; display: block !important; position: absolute; inset-inline-end: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; z-index: 2; opacity: 1 !important; background: var(--gn-muted) !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
body:not(#gn_)[data-gn-sys] :is(.gn-ff, .gn-rep-cell) .ts-wrapper { position: relative; }
body:not(#gn_)[data-gn-sys] :is(.gn-ff, .gn-rep-cell) .ts-wrapper.single .ts-control { padding-inline-end: 36px !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-ff, .gn-rep-cell) .ts-wrapper.disabled::after { background: var(--gn-off) !important; }
/* 45.8 — Erreurs : un pictogramme tracé (plus un « ! » tapé), le message prend la place de l'aide, un récapitulatif en tête */
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-fv-msg.err::before { content: none !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-fv-msg.err { display: flex !important; align-items: flex-start; gap: 6px; color: var(--gn-danger-ink, var(--gn-danger)) !important; font-weight: 600 !important; font-size: 14px !important; line-height: 1.4 !important; margin-top: 6px; }
body:not(#gn_)[data-gn-sys] .gn-fv-msg .gn-fv-ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--gn-danger) !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-ff.gn-fv-invalid [id^="help_"] { display: none !important; }
body:not(#gn_)[data-gn-sys] .gn-ff [id^="help_"] { font-size: 13px !important; }
body:not(#gn_)[data-gn-sys] .gn-fv-sum { margin: 0 0 var(--gn-gap, 16px) !important; padding: 16px 20px !important; background: var(--gn-surface) !important; color: var(--gn-text) !important; border: max(2px, var(--ui-bw, 1px)) solid var(--gn-danger) !important; border-inline-start-width: 6px !important; border-radius: var(--ui-radius, 10px) !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-sys] .gn-fv-sum:focus { outline: 2px solid var(--color-primary) !important; outline-offset: 2px !important; }
body:not(#gn_)[data-gn-sys] .gn-fv-sum-t { color: var(--gn-text) !important; font-family: var(--ui-font-head, inherit) !important; font-size: 17px !important; font-weight: 700 !important; margin: 0 0 8px !important; }
body:not(#gn_)[data-gn-sys] .gn-fv-sum-t .gn-fv-ic { width: 20px; height: 20px; color: var(--gn-danger) !important; }
body:not(#gn_)[data-gn-sys] .gn-fv-sum-l a { color: var(--gn-danger-ink, var(--gn-danger)) !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: underline !important; text-underline-offset: 3px; min-height: 24px; }
body:not(#gn_)[data-gn-sys] .gn-fv-sum-l a:hover { text-decoration-thickness: 2px !important; }
body:not(#gn_)[data-gn-sys] :is(.gn-df-input, .gn-dp-display, .gn-df textarea, .ts-control input, .ts-control).gn-fv-focus { outline: 2px solid var(--color-primary) !important; outline-offset: 2px !important; }
body:not(#gn_)[data-gn-sys] select.ts-hidden-accessible:focus + .ts-wrapper .ts-control { outline: 2px solid var(--color-primary) !important; outline-offset: 2px !important; }
/* la zone de saisie d'une liste ne porte pas son propre anneau : c'est le cadre de la liste qui le montre (deux anneaux emboîtés) */
body:not(#gn_)[data-gn-sys][data-gn-sys] .ts-wrapper .ts-control input:is(:focus, :focus-visible) { outline: 0 !important; box-shadow: none !important; }
/* « Il reste à renseigner » : après un envoi refusé, la ligne dit que c'est ce qui bloque (ton d'erreur, pictogramme) */
body:not(#gn_)[data-gn-sys] form[data-gnv-tried="1"] .gn-sf-todo:not(.ok) { color: var(--gn-danger-ink, var(--gn-danger)) !important; font-weight: 600 !important; display: flex; flex-wrap: wrap; align-items: center; column-gap: 5px; }
body:not(#gn_)[data-gn-sys] form[data-gnv-tried="1"] .gn-sf-todo:not(.ok) b { color: var(--gn-danger-ink, var(--gn-danger)) !important; text-decoration: underline; text-underline-offset: 3px; }
body:not(#gn_)[data-gn-sys] form[data-gnv-tried="1"] .gn-sf-todo:not(.ok)::before { content: ""; flex: none; width: 15px; height: 15px; background: var(--gn-danger); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
/* 45.9 — Boîte de confirmation : le bouton qui a le focus à l'ouverture le montre, même ouverte à la souris */
body:not(#gn_)[data-gn-sys] .dt3-cfmbox .dt3-btn:focus { outline: 2px solid var(--color-primary) !important; outline-offset: 2px !important; }
body:not(#gn_)[data-gn-sys] .dt3-cfmbox .dt3-btn.danger:focus { outline-color: var(--gn-danger) !important; }
body:not(#gn_)[data-gn-sys] .dt3-cfmbox:focus { outline: 0 !important; }
/* 45.10 — Le bouton de l'assistant : sous le voile d'une boîte de dialogue (réglé dans AiCopilot), à la forme des boutons
   du système ; l'indicateur de chargement n'est plus un anneau bleu d'usine glissé derrière lui mais un trait du système en haut de page */
body:not(#gn_)[data-gn-sys][data-gn-sys] :is(.gn-cop-fab, .gn-cop-hide) { border-radius: var(--btn-radius, 10px) !important; }
body:not(#gn_)[data-gn-sys] #global-loader { top: 0 !important; right: 0 !important; left: 0 !important; height: 3px !important; overflow: hidden !important; background: transparent !important; }
body:not(#gn_)[data-gn-sys] #global-loader > .spinner { width: 34% !important; height: 3px !important; border: 0 !important; border-radius: 0 !important; background: var(--color-primary) !important; animation: gn-r4-load 1.1s ease-in-out infinite !important; }
@keyframes gn-r4-load { 0% { transform: translateX(-110%); } 100% { transform: translateX(400%); } }
body:not(#gn_)[data-gn-sys]:dir(rtl) #global-loader > .spinner { animation-direction: reverse !important; }
@media (prefers-reduced-motion: reduce) { body:not(#gn_)[data-gn-sys] #global-loader > .spinner { animation: none !important; width: 100% !important; opacity: .55; } }
/* 45.11 — Cibles : 24 × 24 px au moins pour tout contrôle fait d'un pictogramme, 44 × 44 px au doigt — sans changer sa taille à l'œil
   (la zone s'étend par un pseudo-élément transparent) */
body:not(#gn_)[data-gn-sys] :is(.gn-fh-q, .gn-fx-clear, .gn-sf-fknew, .gn-seg-opt, .gn-rep-btn, .gn-rep-del, .gn-rep-add, .gn-cop-hide, .ts-control .remove, .ts-control .clear-button) { position: relative; }
body:not(#gn_)[data-gn-sys] :is(.gn-fx-clear, .ts-control .clear-button)::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
body:not(#gn_)[data-gn-sys] .gn-ff .ts-wrapper.single .ts-control .item .remove::after { content: ""; position: absolute; inset: -2px; }
/* (27 et 30 px : 24 pixels d'écran au moins quand un système compact réduit la page à 86 %) */
body:not(#gn_)[data-gn-sys] .gn-sf-fknew { min-height: 28px; display: inline-flex; align-items: center; }
@media (min-width: 641px) and (pointer: fine) { body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-fh-q::after { content: ""; position: absolute; inset: -6px; } }
@media (pointer: coarse), (max-width: 640px) {
  body:not(#gn_)[data-gn-sys] :is(.gn-fh-q, .gn-fx-clear, .gn-rep-btn, .gn-rep-del, .gn-rep-add, .gn-cop-hide, .gn-sf-fknew, .ts-control .clear-button)::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); }   /* 46 : 44 px d'écran une fois l'échelle de la page appliquée */
  body:not(#gn_)[data-gn-sys] .gn-sf-fknew::after { width: 100%; min-width: 44px; }
  body:not(#gn_)[data-gn-sys] .gn-ff .gn-fh-q { margin-inline: 14px 12px !important; }
  body:not(#gn_)[data-gn-sys] .gn-ff-labrow:has(.gn-fh-q, .gn-sf-fknew) { min-height: 48px; margin-bottom: 0 !important; }
  body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-seg-opt { min-height: 44px; flex: 1 1 auto; }
  body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-seg, body:not(#gn_)[data-gn-sys] .gn-seg-wrap { display: flex !important; }
  body:not(#gn_)[data-gn-sys] .gn-rep { --gn-rep-agap: 16px; }
  body:not(#gn_)[data-gn-sys] .gn-rep-row > .gn-rep-actions { min-height: 44px; }
  body:not(#gn_)[data-gn-sys] .gn-cop-fab { min-width: 44px !important; min-height: 44px !important; }
  body:not(#gn_)[data-gn-sys] summary.gn-hero-btn { min-width: 44px !important; min-height: 44px !important; }
  body:not(#gn_)[data-gn-sys] .gn-fv-sum-l a { min-height: 44px; display: inline-flex !important; align-items: center; }
}
/* 45.13 — Menu replié en rail d'icônes : le libellé d'un lien quittait aussi l'arbre d'accessibilité (display:none) — 13 liens
   sans nom par écran. Il reste invisible à l'œil mais se lit (technique « visuellement caché »). */
body:not(#gn_)[data-gn-sys] aside.sb-collapsed .gn-nav-link .gn-nav-label { display: inline-block !important; position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
/* 45.14 — Clavier : rien d'invisible ne prend le focus, rien de focalisé ne reste invisible.
   · le tiroir d'aide, fermé, n'était que glissé hors de l'écran : ses onglets et ses liens restaient des arrêts de tabulation
     (9 arrêts invisibles par écran) ; fermé, il quitte l'ordre de tabulation et l'arbre d'accessibilité ;
   · le bouton « options de la colonne » d'une liste n'apparaissait qu'au survol : au clavier on s'y arrêtait sans le voir. */
body:not(#gn_)[data-gn-sys] .gn-dc:not(.open) .gn-dc-panel { visibility: hidden; transition: transform .24s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .24s !important; }
body:not(#gn_)[data-gn-sys] .gn-dc.open .gn-dc-panel { visibility: visible; }
body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-hmenu:is(:focus, :focus-visible) { opacity: 1 !important; }
/* · les liens d'un groupe REPLIÉ du menu restaient des arrêts de tabulation, invisibles, sous le groupe suivant (4 par écran) */
body:not(#gn_)[data-gn-sys]:not([data-gn-nav="haut"]) aside:not(.sb-collapsed) .gn-nav-group.gn-collapsed > .gn-nav-subwrap { visibility: hidden; }
/* 45.15 — Plus de saut de mise en page au focus. L'aide d'un champ (montrée au focus) et son message d'erreur (posé quand on le
   quitte) s'inséraient DANS le flux : tout ce qui suivait descendait ou remontait d'une ligne entre l'appui et le relâchement
   de la souris, et le clic tombait à côté (mesuré : appui sur « Express », relâchement sur l'enveloppe du champ — rien de
   choisi). Ils se posent désormais dans l'écart réservé sous le champ, sans rien déplacer. */
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-df .gn-ff { position: relative; margin-bottom: 28px; }
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-df .gn-ff :is([id^="help_"], .gn-fv-msg) { position: absolute; inset-inline: 0; top: 100%; margin: 4px 0 0 !important; z-index: 3; }
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-df .gn-rep-cell .gn-ff { margin-bottom: 0 !important; }
body:not(#gn_)[data-gn-sys][data-gn-sys] .gn-df .gn-rep-cell .gn-ff .gn-fv-msg { position: static; }
/* 45.12 — Couleurs forcées (contraste élevé de Windows) : l'anneau, les bords et les états tiennent sans nos couleurs */
@media (forced-colors: active) {
  body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys] :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, .gn-df textarea, .gn-seg, main select) { border: 1px solid FieldText !important; forced-color-adjust: auto; }
  body:not(#gn_)[data-gn-sys] :is(a, button, input, select, textarea, [tabindex], .ts-control, .gn-seg-opt):is(:focus-visible, .gn-fv-focus), body:not(#gn_)[data-gn-sys] :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, .gn-df textarea):is(:focus, :focus-within), body:not(#gn_)[data-gn-sys] .dt3-cfmbox .dt3-btn:focus, body:not(#gn_)[data-gn-sys] .gn-fv-sum:focus { outline: 2px solid CanvasText !important; outline-offset: 2px !important; }   /* CanvasText : le plus fort contraste de la palette de la personne (Highlight ne faisait que 2,9:1 dans celle de Firefox) */
  body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-inputs] .gn-fv-invalid :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, textarea, .gn-seg), body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys] .gn-fv-invalid :is(.gn-df-input, .ts-wrapper .ts-control, .gn-dp-display, textarea, .gn-seg) { border: 3px double FieldText !important; }
  body:not(#gn_)[data-gn-sys] .gn-seg-opt.on { outline: 2px solid ButtonText !important; outline-offset: -3px !important; forced-color-adjust: none; background: Highlight !important; color: HighlightText !important; }
  body:not(#gn_)[data-gn-sys] .gn-seg-opt.on::before, body:not(#gn_)[data-gn-sys] form[data-gnv-tried="1"] .gn-sf-todo:not(.ok)::before { forced-color-adjust: none; background: HighlightText !important; }
  body:not(#gn_)[data-gn-sys] form[data-gnv-tried="1"] .gn-sf-todo:not(.ok)::before { background: CanvasText !important; }
  body:not(#gn_)[data-gn-sys] .ts-wrapper::after { forced-color-adjust: none; background: FieldText !important; }
  body:not(#gn_)[data-gn-sys] :is(.gn-df-section:not(:where(.gn-vr-body, .gn-view-reader) *), .gn-vr-body, .form-title, .gn-sf-foot, .gn-fv-sum, .dt3-modalbox, .gn-rep-thead) { border: 1px solid CanvasText !important; }
  body:not(#gn_)[data-gn-sys] #global-loader > .spinner { forced-color-adjust: none; background: Highlight !important; }
}
/* 45.16 — L'anneau de focus fait DEUX pixels d'écran dans tous les systèmes. Un système compact réduit l'échelle de la page
   (corps de 13 px) ; le navigateur arrondit alors un contour de 2 px à UN pixel d'écran — mesuré au clavier sous Linéaire :
   1,08 px sur 99 arrêts de tabulation. 2,4 px donnent deux pixels d'écran de 86 % à 124 % d'échelle. (Dernière règle de la section.) */
/* (sélecteur renforcé : la règle de l'anneau des champs, section 36, pèse cinq classes) */
body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys] *:is(:focus, :focus-visible, :focus-within, .gn-fv-focus) { outline-width: 2.4px !important; }
/* ── fin 45 ── */
/* ── 50. Les dernières cibles sous 24 px (mesurées par l'audit du tour 4) ─────
   La zone cliquable grandit ; le dessin ne bouge pas. */
body:not(#gn_)[data-gn-sys] :is(.gn-lh-tourlink, .gn-fk-link, .gn-crumb-lnk, .dt3-hidcols, section a.text-sm.font-semibold, .gn-rep-add) { position: relative; }
body:not(#gn_)[data-gn-sys] :is(.gn-lh-tourlink, .gn-fk-link, .gn-crumb-lnk, .dt3-hidcols, section a.text-sm.font-semibold, .gn-rep-add)::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 26px; transform: translateY(-50%); }
body:not(#gn_)[data-gn-sys] .gn-dt3 :is(thead, tbody) .dt3-ckcell .dt3-ck::after { inset: -6px !important; }
body:not(#gn_)[data-gn-sys] section input[type="checkbox"].h-4.w-4 { position: relative; }
body:not(#gn_)[data-gn-sys] section label:has(> input[type="checkbox"].h-4.w-4), body:not(#gn_)[data-gn-sys] section input[type="checkbox"].h-4.w-4 + label { min-height: 26px; display: inline-flex; align-items: center; }
body:not(#gn_)[data-gn-sys] .gn-crumb-lnk { min-height: 27px; display: inline-flex; align-items: center; }
body:not(#gn_)[data-gn-sys] .gn-rep-add { min-height: 24px !important; min-width: 24px !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 :is(th, td).dt3-ckcell { overflow: visible !important; min-width: 44px; }
/* ── 51. Derniers réglages mesurés à l'intégration du tour 4 ────────────────── */
body:not(#gn_)[data-gn-sys] .gn-wf .gn-wf-tool { min-height: 26px !important; }
/* en arabe, un nom latin (marque, client) dépassait de 4 px de sa boîte et un chiffre clé de sa hauteur : la boîte s'ouvre */
body:not(#gn_)[data-gn-sys]:dir(rtl) .gn-dt3 a.dt3-fk { overflow: visible !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl) .gn-sb-brandtext { padding-inline: 0 5px !important; }
body:not(#gn_)[data-gn-sys]:dir(rtl) .gn-dash-tile .dt3-kpibig { line-height: 1.5 !important; padding-block: 2px !important; }
/* ── 52. Le squelette commun aux systèmes (ce que le dernier jury a vu partout) ──
   Quatre défauts hérités par chaque système, corrigés une fois pour tous. */

/* 1. Formulaires : la rangée du libellé a UNE hauteur, qu'elle porte ou non une aide et un « + Nouveau » — deux champs voisins
      commencent à la même ligne (ils étaient décalés de 4 à 10 px). */
body:not(#gn_)[data-gn-sys] .gn-df .gn-ff .gn-ff-labrow { display: flex !important; align-items: center !important; flex-wrap: nowrap; column-gap: 8px; min-height: 28px !important; height: 28px !important; margin: 0 0 6px !important; padding: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-df .gn-ff .gn-ff-labrow > label { margin: 0 !important; min-height: 0 !important; line-height: 1.3 !important; }
body:not(#gn_)[data-gn-sys] .gn-df .gn-ff :not(.gn-ff-labrow) > label.editable { display: flex !important; align-items: center !important; min-height: 28px !important; height: 28px !important; margin: 0 0 6px !important; line-height: 1.3 !important; }

/* 2. Tableau de bord : un chiffre clé a quatre étages fixes (titre, chiffre, écart, légende) — tous les chiffres d'une rangée
      tombent sur la même ligne ; l'écart tient sur UNE ligne, et sa place est gardée quand il n'y en a pas. */
body:not(#gn_)[data-gn-sys] .gn-dash-grid > .gn-dash-kpi .dt3-kpiwrap { display: grid !important; grid-template-rows: auto 20px 18px; row-gap: 2px; align-content: end; }
body:not(#gn_)[data-gn-sys] .gn-dash-grid > .gn-dash-kpi .dt3-kpibig { line-height: 1.15 !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-grid > .gn-dash-kpi .dt3-kpidelta { margin: 0 !important; height: 20px; flex-wrap: nowrap !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-items: center; }
body:not(#gn_)[data-gn-sys] .gn-dash-grid > .gn-dash-kpi .dt3-kpicap { height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 18px !important; }
body:not(#gn_)[data-gn-sys] .gn-dash-grid > .gn-dash-kpi .gn-dash-tsub { display: none !important; }
/* … le sous-titre n'est pas perdu : il EST la légende (DataTable3 l'y écrit). Une phrase d'auteur se lit en minuscules, sur deux
   lignes au plus ; l'étage garde alors deux lignes dans TOUTE la rangée dès qu'une tuile en a une, pour que les chiffres restent alignés. */
body:not(#gn_)[data-gn-sys] .gn-dash-grid > .gn-dash-kpi .dt3-kpicap.dt3-kpicap-dit { height: 30px; line-height: 15px !important; white-space: normal; text-transform: none; letter-spacing: 0; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
body:not(#gn_)[data-gn-sys] .gn-dash-grid:has(> .gn-dash-kpi .dt3-kpicap-dit) > .gn-dash-kpi .dt3-kpiwrap { grid-template-rows: auto 20px 30px; }
body:not(#gn_)[data-gn-sys] .gn-dash-grid:has(> .gn-dash-kpi .dt3-kpicap-dit) > .gn-dash-kpi .dt3-kpicap:not(.dt3-kpicap-dit) { height: 30px; }
body:not(#gn_)[data-gn-sys]:dir(rtl) .gn-dash-grid > .gn-dash-kpi .dt3-kpiwrap { grid-template-rows: auto 22px 20px; }
body:not(#gn_)[data-gn-sys]:dir(rtl) .gn-dash-grid > .gn-dash-kpi :is(.dt3-kpidelta, .dt3-kpicap) { height: auto; line-height: 1.5 !important; }

/* 3. Fiche : une ligne d'état, puis UN bloc d'en-tête (titre, chiffres, parcours) — les données commencent bien plus haut.
      « Dupliquer » reste dans le menu « ⋯ » de l'en-tête. */
/* (Cette phrase n'est donc PAS une surface : elle ne figure dans aucune liste de surfaces — lignes, tonale, élevée, plate. Elle y figurait,
   et un style de lignes lui rendait une bordure qu'aucune marge n'accompagne : le texte à 2 px du cadre, vu le 11 octobre 2026.) */
body:not(#gn_)[data-gn-sys] .gn-fc { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 2px !important; margin: 0 0 6px !important; display: flex !important; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; min-height: 0 !important; }
/* l'enveloppe de la fiche n'est pas une carte : ses cartes sont dedans (elle traçait un filet au-dessus de la ligne d'état) */
body:not(#gn_)[data-gn-sys] .gn-view:has(> .gn-fc, > .gn-hero, .gn-hero) { border: 0 !important; background: transparent !important; box-shadow: none !important; padding-top: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-fc .gn-fc-top { display: contents !important; }
body:not(#gn_)[data-gn-sys] .gn-fc .gn-fc-h { font-size: 14px !important; font-weight: 600 !important; line-height: 1.5 !important; margin: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-fc .gn-fc-next { margin: 0 !important; font-size: 13px !important; color: var(--gn-muted) !important; line-height: 1.5 !important; }
body:not(#gn_)[data-gn-sys] .gn-fc .gn-fc-dup { display: none !important; }
body:not(#gn_)[data-gn-sys] .gn-hero { padding-block: 14px 12px !important; }
body:not(#gn_)[data-gn-sys] .gn-hero .gn-hero-kpis { margin-top: 10px !important; }
body:not(#gn_)[data-gn-sys] .gn-hero .gn-kpi { padding-block: 8px !important; }
body:not(#gn_)[data-gn-sys] .gn-hero:has(+ .gn-wf) { border-end-start-radius: 0 !important; border-end-end-radius: 0 !important; margin-bottom: 0 !important; }
body:not(#gn_)[data-gn-sys] .gn-hero + .gn-wf { margin-top: calc(-1 * var(--ui-bw, 1px)) !important; border-start-start-radius: 0 !important; border-start-end-radius: 0 !important; padding-block: 10px 12px !important; box-shadow: none; display: grid !important; grid-template-columns: minmax(0, 1fr) fit-content(45%); column-gap: 16px; row-gap: 6px; align-items: center; }
/* le parcours tient sur une bande : les étapes à gauche, à droite ses deux outils puis les autres issues ; son intitulé reste dit aux lecteurs d'écran */
body:not(#gn_)[data-gn-sys] .gn-hero + .gn-wf .gn-wf-head { grid-column: 2; grid-row: 1; margin: 0 !important; min-height: 0 !important; justify-content: flex-end; }
body:not(#gn_)[data-gn-sys] .gn-hero + .gn-wf .gn-wf-head .gn-wf-title { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
body:not(#gn_)[data-gn-sys] .gn-hero + .gn-wf .gn-wf-head .gn-wf-sp { display: none !important; }
body:not(#gn_)[data-gn-sys] .gn-hero + .gn-wf .gn-wf-rail { grid-column: 1; grid-row: 1 / span 2; margin: 0 !important; align-self: center; }
body:not(#gn_)[data-gn-sys] .gn-hero + .gn-wf .gn-wf-exits { grid-column: 2; grid-row: 2; margin: 0 !important; align-self: center; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; }
body:not(#gn_)[data-gn-sys] .gn-hero + .gn-wf .gn-wf-panel { grid-column: 1 / -1; }
/* la colonne de droite plafonne (fit-content) : une phrase longue n'y écrase plus les étapes à zéro ; la lecture seule (une phrase, pas des boutons) prend toute la largeur sous les étapes */
body:not(#gn_)[data-gn-sys] .gn-hero + .gn-wf .gn-wf-acts.gn-wf-acts-ro { grid-column: 1 / -1; }
body:not(#gn_)[data-gn-sys] .gn-hero + .gn-wf + * { margin-top: 14px !important; }

/* 4. Listes : la colonne des actions n'est plus un vide — ses outils se voient, discrets, et s'affirment sur la ligne survolée.
      (La table rend aussi d'elle-même une colonne repliée quand il reste de la place : DataTable3, fitMeasured.) */
body:not(#gn_)[data-gn-sys] .gn-dt3 tbody tr :is(.dt3-actfloat, .dt3-actpill) { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 tbody tr td.dt3-actions .dt3-actpill.dt3-actpill { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 tbody tr .dt3-actpill .dt3-ia { color: var(--gn-faint, var(--gn-muted)) !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 tbody tr:is(:hover, :focus-within) td.dt3-actions .dt3-actpill.dt3-actpill { background: var(--gn-surface) !important; border-color: var(--gn-line-strong) !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 tbody tr:is(:hover, :focus-within) .dt3-actpill .dt3-ia { color: var(--gn-text) !important; }
body:not(#gn_)[data-gn-sys] .gn-dt3 tbody td.dt3-linkcell .dt3-rowopen, body:not(#gn_)[data-gn-sys] .gn-dt3 tbody td .dt3-peek { display: none !important; }

/* 5. Téléphone : le tri est UNE commande (la liste gardait son propre cadre à l'intérieur du premier) ; un libellé ne se coupe pas en deux. */
@media (max-width: 640px) {
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-viewbar .dt3-sortctl.dt3-sortctl select[data-role="sortsel"] { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; background-image: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; width: 100% !important; min-width: 0 !important; height: 42px !important; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-viewbar { display: flex !important; align-items: center !important; gap: 8px !important; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-viewbar .dt3-sortctl { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-viewbar .dt3-sortdir { flex: none !important; border: 1px solid var(--gn-line-strong) !important; border-radius: var(--ui-radius-sm, 8px) !important; background: var(--gn-surface) !important; color: var(--gn-text) !important; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-lmeta em { white-space: nowrap !important; }
  /* la liste de tri prend la place, la flèche de sens ferme la commande (elle flottait au milieu) */
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-viewbar .dt3-sortctl { flex: 1 1 auto !important; width: 100% !important; padding-inline: 12px 0 !important; overflow: hidden; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-viewbar .dt3-sortctl.dt3-sortctl select[data-role="sortsel"] { flex: 1 1 auto !important; width: auto !important; }
  body:not(#gn_)[data-gn-sys] .gn-dt3 .dt3-viewbar .dt3-sortctl .dt3-sortdir { margin-inline-start: auto !important; border: 0 !important; border-inline-start: 1px solid var(--gn-line-strong) !important; border-radius: 0 !important; background: transparent !important; min-height: 42px !important; }
  /* la fiche au téléphone : le parcours reprend toute la largeur, ses outils dessous (sur une bande il se tassait) */
  body:not(#gn_)[data-gn-sys] .gn-fc { flex-direction: column !important; align-items: flex-start !important; }
  body:not(#gn_)[data-gn-sys] .gn-hero + .gn-wf { grid-template-columns: minmax(0, 1fr) !important; }
  body:not(#gn_)[data-gn-sys] .gn-hero + .gn-wf :is(.gn-wf-head, .gn-wf-rail, .gn-wf-exits, .gn-wf-panel) { grid-column: 1 !important; grid-row: auto !important; justify-content: flex-start !important; }
  body:not(#gn_)[data-gn-sys] .gn-hero + .gn-wf .gn-wf-rail { order: -1; }
  body:not(#gn_)[data-gn-sys] .gn-hero + .gn-wf .gn-wf-exits { flex-wrap: wrap !important; white-space: normal !important; }
}

/* UN CHAMP VERROUILLÉ SE VOIT (17 oct. 2026) : en modification, l'activité, l'adhérent et la date de dépôt sont figés — mesuré :
   fond #f3f3f3 contre #fbfbfb pour un champ libre, même bordure pleine. L'état « désactivé » plus haut ne couvrait pas [readonly] (sauf l'affichage d'une date, toujours readonly : le calendrier saisit ; verrouillé, il est disabled)
   et cédait aux règles de champ plus spécifiques. Un seul état, au-dessus de toutes les variantes de champ (lignes, formes,
   jeux de réglages) : fond secondaire, texte atténué, bordure en pointillés, curseur interdit. Le mode contraste forcé garde la main. */
@media not (forced-colors: active) {
  body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys]:not(#gn_t) :is(.gn-df-input, .gn-df textarea, main select):not(.gn-dp-display):is(:disabled, [readonly]),
  body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys]:not(#gn_t) .gn-dp-display:disabled,
  body:not(#gn_)[data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys][data-gn-sys]:not(#gn_t) :is(.ts-wrapper.disabled, .ts-wrapper.locked, select:is(:disabled, [readonly]) + .ts-wrapper) .ts-control {
    background: var(--gn-surface-2, #f1f2f5) !important; color: var(--gn-muted, #5b6172) !important; border-style: dashed !important;
    border-color: var(--gn-off, #9aa1b0) !important; cursor: not-allowed !important; opacity: 1 !important; box-shadow: none !important;
  }
}