.gn-block {
    cursor: alias !important;
    /*border: 1px red dotted;*/
} 


/* 
.gn-block {
    padding-right: 5px;
    padding-right: 5px;
    
    padding: 10px;
} 

.gn-block:hover {
    border-color: blue;
    box-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
}

.success .gn-block:hover {
    border-color: blue;
    box-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
    background-color: #ccc;
} */


.dropHere {
    visibility: hidden;
    display: none;
}

/*
 .dropHere {
 
    
    padding: 2px;

} 
*/
/*
 .isEditionModeEnabled .dropHere {
    visibility: visible;
    display: flex;
    background-color: azure;
    
    padding: 2px;
} 
*/

.loveMode {
    visibility: hidden;
    height: 0;
}

.isEditionModeEnabled .loveMode {
    visibility: visible;
        height: auto;

} 


 

/* Empêcher le scroll horizontal sur le body */
body.gn-block-panel-visible {
    overflow-x: hidden;
}


.gn-block-action-panel {
    /* Empêcher le panel de créer du scroll */
    max-width: calc(100vw - 20px) !important;
    
    /* Style distinct pour le mode emergency */
    z-index: 10000; /* Au-dessus de tout */
}

/* Indicateur visuel du mode emergency */
.gn-panel-emergency::after {
    content: "🛡️";
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 12px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* =====================================================================
   Sidebar admin — look par DÉFAUT GLOBAL (tous les projets).
   Markup PROPRE : MenuItem.php rend, en mode vertical (sidebar), de vrais
   en-têtes de section (.gn-nav-section) + des liens (.gn-nav-link) — plus
   de dropdown/chevron forcé. Fond sombre même en clair. Le navbar FRONT
   (horizontal) garde son markup dropdown → styles ci-dessous non appliqués.
   Détection du shell : aside:has(.gn-nav-link) (rendu serveur, sans JS).
   ===================================================================== */
:root{ --sbb-bg:#191c28; --sbb-ink:#e9ebf5; --sbb-soft:#c8ccde; --sbb-faint:#767b97;
  --sbb-line:rgba(255,255,255,.07); --sbb-hover:rgba(255,255,255,.06);
  /* Pastille de l'item actif = couleur du thème choisi (ThemeSwitcher -> --color-primary). Indigo = fallback. */
  --sbb-indigo:var(--color-primary, #6366f1); }

/* --- SHELL : l'aside contenant le menu admin (détecté par les liens gn-nav) --- */
aside:has(.gn-nav-link){ background:var(--sbb-bg) !important; border-color:var(--sbb-line) !important; color:var(--sbb-ink) !important; }
aside:has(.gn-nav-link) [class*="bg-white"], aside:has(.gn-nav-link) [class*="bg-gray-50"], aside:has(.gn-nav-link) [class*="bg-gray-100"]{ background:transparent !important; }
aside:has(.gn-nav-link) [class*="border-gray"], aside:has(.gn-nav-link) .border-t{ border-color:var(--sbb-line) !important; }
aside:has(.gn-nav-link) [class*="text-gray-9"], aside:has(.gn-nav-link) [class*="text-gray-8"], aside:has(.gn-nav-link) [class*="text-gray-7"]{ color:var(--sbb-ink) !important; }
aside:has(.gn-nav-link) [class*="text-gray-6"], aside:has(.gn-nav-link) [class*="text-gray-5"], aside:has(.gn-nav-link) [class*="text-gray-4"]{ color:var(--sbb-soft) !important; }

/* --- Liste --- */
aside:has(.gn-nav-link) ul[id^="menu-"]{ gap:1px !important; padding:4px 0 !important; }
.gn-nav-sublist{ list-style:none; margin:0; padding:0; }
.gn-nav-group{ list-style:none; border-top:1px solid var(--sbb-line); margin-top:2px; }   /* filet séparateur entre sections (comme la maquette B) */
.gn-nav-group:first-of-type{ border-top:0; margin-top:0; }

/* --- En-tête de section --- */
.gn-nav-section{ display:flex; align-items:center; gap:8px; width:100%; padding:15px 14px 6px; font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--sbb-faint); background:transparent; border:0; cursor:pointer; text-align:left; font-family:inherit; user-select:none; transition:color .12s; }
.gn-nav-section:hover{ color:var(--sbb-soft); }
.gn-nav-section .menu-label{ flex:1 1 auto; }
.gn-nav-caret{ width:12px; height:12px; flex:none; opacity:.5; transition:transform .22s ease, opacity .12s; }
.gn-nav-section:hover .gn-nav-caret{ opacity:.95; }
.gn-nav-section:focus-visible{ outline:2px solid var(--sbb-indigo); outline-offset:-2px; border-radius:6px; }
.gn-nav-group:first-child > .gn-nav-section{ padding-top:6px; }
/* Sections pliables SOTA : animation par grid-template-rows (0fr↔1fr), sans mesurer de hauteur */
.gn-nav-subwrap{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .24s ease; }
.gn-nav-subwrap > .gn-nav-sublist{ overflow:hidden; min-height:0; }
.gn-nav-group.gn-collapsed > .gn-nav-subwrap{ grid-template-rows:0fr; }
.gn-nav-group.gn-collapsed > .gn-nav-section .gn-nav-caret{ transform:rotate(-90deg); }
[dir="rtl"] .gn-nav-group.gn-collapsed > .gn-nav-section .gn-nav-caret{ transform:rotate(90deg); }
@media (prefers-reduced-motion:reduce){ .gn-nav-subwrap,.gn-nav-caret{ transition:none; } }

/* --- Item feuille --- */
.gn-nav-item{ list-style:none; margin:0 8px; }
.gn-nav-link{ display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:8px; color:var(--sbb-soft); text-decoration:none; font-size:13.5px; font-weight:500; transition:background .12s,color .12s; }
.gn-nav-link:hover{ background:var(--sbb-hover); color:var(--sbb-ink); }
.gn-nav-link .iconify, .gn-nav-link svg{ width:18px; height:18px; color:var(--sbb-faint); flex:none; }
.gn-nav-link:hover .iconify{ color:var(--sbb-soft); }
.gn-nav-label{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gn-nav-count{ margin-left:auto; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:11px; font-weight:600; color:var(--sbb-faint); background:rgba(255,255,255,.06); padding:1px 8px; border-radius:20px; min-width:20px; text-align:center; }
.gn-nav-link.gn-nav-active .gn-nav-count{ background:rgba(255,255,255,.22); color:#fff; }

/* --- Item actif → pastille indigo --- */
aside:has(.gn-nav-link) .gn-nav-link[class*="bg-brand"]:not(.gn-nav-active){ background:transparent !important; }   /* neutralise l'ancien selectedItemCssClasses SUR LES LIENS uniquement (pas le logo bg-brand-600 du thème) */
aside:has(.gn-nav-link) .gn-nav-active{ background:var(--sbb-indigo) !important; color:#fff !important; }   /* pastille pleine (comme la maquette B) */
aside:has(.gn-nav-link) .gn-nav-active .iconify, aside:has(.gn-nav-link) .gn-nav-active svg, aside:has(.gn-nav-link) .gn-nav-active span{ color:#fff !important; }

/* --- Footer sidebar (profil / thème / langue) : opaque + ancré en bas, sans chevauchement --- */
aside:has(.gn-nav-link) .sticky{ background:var(--sbb-bg) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border-color:var(--sbb-line) !important; }
aside:has(.gn-nav-link) ul[id^="menu-"]{ padding-bottom:14px !important; }               /* le dernier item ne passe plus sous le footer */
aside:has(.gn-nav-link) .sticky [class*="bg-gray"], aside:has(.gn-nav-link) .sticky [class*="bg-white"]{ background:rgba(255,255,255,.05) !important; }  /* boutons (Mode sombre…) */
/* Popovers du footer (profil, langue) : fond sombre opaque, au-dessus du menu, ombre nette */
aside:has(.gn-nav-link) .sticky [class*="absolute"]{ background:#20222f !important; border:1px solid var(--sbb-line) !important; z-index:60 !important; box-shadow:0 8px 30px rgba(0,0,0,.5) !important; }
aside:has(.gn-nav-link) .sticky [class*="absolute"] [class*="text-gray"]{ color:var(--sbb-soft) !important; }

/* Label "Menu" générique en haut du shell → masqué (redondant avec les en-têtes de section) */
aside:has(.gn-nav-link) div.tracking-wider{ display:none !important; }

/* ============================================================================
 *  RTL (arabe) — dir="rtl" posé sur <html> via {globals_defaultLanguageDir}.
 *  La mise en page flex/grid (Tailwind) bascule déjà l'essentiel ; ici quelques
 *  finitions ciblées. Tout est scopé à [dir="rtl"] → aucun impact en LTR.
 * ========================================================================== */
[dir="rtl"] aside:has(.gn-nav-link) .gn-nav-section,
[dir="rtl"] aside:has(.gn-nav-link) .gn-nav-link { text-align: right; }
[dir="rtl"] aside:has(.gn-nav-link) .menu-label { text-align: right; }
/* icônes des liens de menu : espacement logique (marge du bon côté en RTL) */
[dir="rtl"] aside:has(.gn-nav-link) .gn-nav-link svg,
[dir="rtl"] aside:has(.gn-nav-link) .gn-nav-link .iconify { margin-left: .625rem; margin-right: 0; }
/* badges compteurs : collés au bord de fin (gauche en RTL) */
[dir="rtl"] .gn-nav-count { margin-left: 0; margin-right: auto; }

/* ============================================================================
 *  DataTable3 — panneau de filtres à facettes : refonte SOTA.
 *  Fermé par défaut, ouvert via le pill "Filtres" de la barre de vues.
 *  Surcharge scopée .gn-dt3 (spécificité > style inline du composant), theme-aware
 *  via les variables --dt-* définies par le composant.
 * ========================================================================== */
.gn-dt3 .dt3-fpanel2 {
    margin: 10px 14px 0; padding: 14px 16px 16px;
    border: 1px solid var(--dt-line); border-radius: 14px; background: var(--dt-panel);
    box-shadow: 0 1px 2px rgba(16,18,40,.04), 0 10px 28px -20px rgba(16,18,40,.30);
    animation: dt3FilterIn .18s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes dt3FilterIn { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform:none; } }

/* barre d'actions (Ajouter une condition · Tout effacer) */
.gn-dt3 .dt3-fpanel2 .dt3-conds { margin-bottom: 12px; }
.gn-dt3 .dt3-fpanel2-bar { display:flex; align-items:center; gap:10px; margin: 0 0 14px; }
.gn-dt3 .dt3-fpanel2-bar .dt3-addcond { margin: 0; }

/* facettes en grille (multi-colonnes) — chaque groupe est une petite carte */
.gn-dt3 .dt3-fpanel2 .dt3-facets {
    margin: 0; border: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 12px;
}
.gn-dt3 .dt3-fpanel2 .dt3-facet {
    margin: 0; padding: 12px 13px 13px;
    border: 1px solid var(--dt-line); border-radius: 12px; background: var(--dt-panel2, var(--dt-bg));
}
.gn-dt3 .dt3-fpanel2 .dt3-flabel {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
    color: var(--dt-muted); margin: 0 0 10px;
}
.gn-dt3 .dt3-fpanel2 .dt3-facetv { display:flex; flex-wrap:wrap; gap:6px; }

/* puce de facette — SOTA */
.gn-dt3 .dt3-facetb {
    display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 11px;
    border:1px solid var(--dt-line); border-radius:999px; background: var(--dt-panel);
    color: var(--dt-ink); font-size:12.5px; font-weight:500; line-height:1; cursor:pointer;
    transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.gn-dt3 .dt3-facetb:hover { border-color: var(--dt-accent); box-shadow: 0 3px 10px -5px var(--dt-accent); transform: translateY(-1px); }
.gn-dt3 .dt3-facetb.on { background: var(--dt-accent); border-color: var(--dt-accent); color:#fff; box-shadow: 0 5px 14px -5px var(--dt-accent); }

/* compteur — badge discret */
.gn-dt3 .dt3-facetn {
    display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:16px; padding:0 5px;
    border-radius:999px; background: rgba(120,125,150,.16); color: var(--dt-muted);
    font-size:10.5px; font-weight:700; font-variant-numeric: tabular-nums; opacity:1;
}
.gn-dt3 .dt3-facetb.on .dt3-facetn { background: rgba(255,255,255,.24); color:#fff; }

/* ═══ Filtres en SIDEBAR (facet-search e-commerce) — filtersPanelPosition = left|right ═══
   Le panneau de facettes flanque les données au lieu d'être au-dessus. Facettes empilées,
   valeurs en liste pleine largeur avec compteur à droite (look boutique). Left = défaut. */
.gn-dt3 .dt3-bodyrow { display:flex; gap:18px; align-items:flex-start; }   /* flex-start → the filter aside sizes to its OWN content (not forced to the data height). Few rows + few filters → the panel fits its content (no bogus scrollbar, nothing cut). The data column scrolls independently via .dt3-scroll's own max-height. */
.gn-dt3 .dt3-bodyrow .dt3-scroll { flex:1 1 auto; min-width:0; }
/* DT3 — background refresh (stale-while-revalidate): on a facet/sort/page click the current rows stay on screen,
   lightly dimmed with a small spinner, instead of blanking to a skeleton until the XHR returns. Clears the moment
   new data lands. Only applied on a refresh that already has data (dt3-busy); the first load still shows a skeleton. */
.gn-dt3 .dt3-scroll.dt3-busy { position: relative; pointer-events: none; }
.gn-dt3 .dt3-scroll.dt3-busy > * { opacity: .5; transition: opacity .15s ease; }
.gn-dt3 .dt3-scroll.dt3-busy::after {
  content: ""; position: absolute; left: 50%; top: 26px; width: 26px; height: 26px; margin-left: -13px;
  border: 3px solid var(--dt-line, #e2e5f0); border-top-color: var(--color-primary, #5b5bf0);
  border-radius: 50%; animation: dt3-spin .6s linear infinite; z-index: 6; pointer-events: none;
}
@keyframes dt3-spin { to { transform: rotate(360deg); } }
.gn-dt3 .dt3-fside { flex:0 0 238px; width:238px; position:relative; }   /* relative → contains the absolutely-filled facet panel below */
/* SOTA facet sidebar: FLAT (no card border/shadow/radius) with a subtle right divider from the products — not a floating box.
   border-radius:0!important beats the ui-style preset's `.dt3-fpanel2{border-radius:var(--ui-radius)!important}` that was curving the divider. */
/* panel fills the aside (= data height) and scrolls INTERNALLY → never taller/shorter than the data, own scrollbar, zoom/resolution-proof (pure CSS, no measuring) */
.gn-dt3 .dt3-fside .dt3-fpanel2 { margin:0; position:sticky; top:0; align-self:flex-start; height:auto; max-height:min(62vh,560px); animation:none; border:0; border-radius:0!important; box-shadow:none; background:none; padding:2px 20px 10px 14px; border-right:1px solid var(--dt-line); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }   /* was absolute inset:0 (forced to the data height → scrollbar + clipped "2026" when data is short). Now: sizes to content, caps at the SAME max as the data (min(62vh,560px)) and scrolls INTERNALLY only if genuinely long; sticky so filters stay visible while the data scrolls. */
/* the facet panel gets its OWN scrollbar and its height is capped to the data zone by syncFacetHeight() — never a mismatched, page-stretching column */
.gn-dt3 .dt3-fside .dt3-fpanel2::-webkit-scrollbar { width:8px; }
.gn-dt3 .dt3-fside .dt3-fpanel2::-webkit-scrollbar-thumb { background:var(--dt-line2, var(--dt-line)); border-radius:4px; }
.gn-dt3 .dt3-fside .dt3-fpanel2::-webkit-scrollbar-thumb:hover { background:var(--dt-muted); }
/* line up EVERYTHING at the same left edge: headers, chips, range inputs, search AND the checkbox itself (was inset 8px → looked misaligned) */
.gn-dt3 .dt3-fside .dt3-ckrow { padding-left:0; }
.gn-dt3 .dt3-fside .dt3-facets { display:block; margin:0; }
.gn-dt3 .dt3-fside .dt3-facet { margin:0 0 12px; padding:0; border:0; background:none; }   /* tighter spacing between facet groups (was 16px) */
.gn-dt3 .dt3-fside .dt3-facet:last-child { margin-bottom:0; }
.gn-dt3 .dt3-fside .dt3-flabel { font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--dt-muted); margin:0 0 7px; padding-bottom:6px; border-bottom:1px solid var(--dt-line); }
.gn-dt3 .dt3-fside .dt3-facetv { display:flex; flex-direction:column; gap:1px; align-items:stretch; }
/* valeur de facette = ligne pleine largeur (fini les pastilles) */
.gn-dt3 .dt3-fside .dt3-facetb { width:100%; justify-content:flex-start; gap:8px; border:0; border-radius:7px; background:none; box-shadow:none; padding:5px 9px; font-weight:500; font-size:12.5px; color:var(--dt-ink); transform:none; }   /* denser rows (was 6px) */
.gn-dt3 .dt3-fside .dt3-facetb:hover { background:rgba(120,125,150,.12); border-color:transparent; box-shadow:none; transform:none; color:var(--dt-ink); }
.gn-dt3 .dt3-fside .dt3-facetb.on { background:var(--dt-accent); border-color:transparent; color:#fff; box-shadow:none; }
.gn-dt3 .dt3-fside .dt3-facetn { margin-left:auto; }
/* En-têtes de colonnes longs : tronquer le LABEL (pas la flèche de tri) + tooltip via title → n'explose plus la largeur de colonne
   (« TARIF COMPTEUR ACTIVITÉ NORMALE (MILLIMES) » ne pousse plus les colonnes hors écran). Les libellés courts ne sont pas affectés. */
.gn-dt3 thead th .dt3-thl { display:inline-block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
/* facet counts in the sidebar → plain muted numbers (no heavy grey pill) for a cleaner facet-search look */
.gn-dt3 .dt3-fside .dt3-facetn, .gn-dt3 .dt3-fside .dt3-ckrow .dt3-facetn { background:none; color:var(--dt-muted); font-weight:600; font-size:11.5px; min-width:0; height:auto; padding:0; opacity:.72; }
/* barre d'actions + scope + join du panneau, compacts dans la colonne */
.gn-dt3 .dt3-fside .dt3-fpanel2-bar { flex-wrap:wrap; }
/* responsive : la sidebar repasse au-dessus des données sur petit écran */
/* Mobile: the left/right facet sidebar becomes a slide-in DRAWER over the data (ecommerce "Filtres" sheet).
   The aside is only in the DOM when open (S.filterCollapsed=false), so open/close = the "Filters" pill toggle.
   A full-screen scrim + an in-drawer × (both data-role=filterclose) dismiss it. Desktop hides scrim + ×. */
.gn-dt3 .dt3-fscrim { display:none; }
.gn-dt3 .dt3-fdrawerx { display:none; }
@media (max-width:760px){
  .gn-dt3 .dt3-bodyrow { display:block; }
  .gn-dt3 .dt3-fside {
    position:fixed; top:0; left:0; bottom:0; width:min(88vw,340px); z-index:1001;
    overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--dt-panel);
    padding:44px 16px 28px; box-shadow:0 0 44px rgba(16,18,40,.34);
    animation:dt3DrawerL .22s cubic-bezier(.22,.61,.36,1) both;
  }
  .gn-dt3 .dt3-fside-right .dt3-fside { left:auto; right:0; animation-name:dt3DrawerR; }
  .gn-dt3 .dt3-fside .dt3-fpanel2 { position:static; margin:0; border:0; box-shadow:none; padding:0; background:none; animation:none; }
  .gn-dt3 .dt3-fside .dt3-facets { grid-template-columns:1fr; }
  .gn-dt3 .dt3-fscrim { display:block; position:fixed; inset:0; z-index:1000; background:rgba(16,18,40,.42); animation:dt3ScrimIn .22s ease both; }
  .gn-dt3 .dt3-fdrawerx {
    display:flex; align-items:center; justify-content:center; position:absolute; top:9px; right:12px;
    width:32px; height:32px; border:0; border-radius:9px; background:rgba(120,125,150,.16);
    color:var(--dt-ink); font-size:22px; line-height:1; cursor:pointer;
  }
  .gn-dt3 .dt3-fdrawerx:hover { background:rgba(120,125,150,.28); }
}
@keyframes dt3DrawerL { from { transform:translateX(-100%); } to { transform:none; } }
@keyframes dt3DrawerR { from { transform:translateX(100%); } to { transform:none; } }
@keyframes dt3ScrimIn { from { opacity:0; } to { opacity:1; } }
/* Gallery/Card COLUMN COUNT — dev default (galleryColumns / cardsPerLine) + the user's segmented control set --gcols
   on the grid. "Up to N columns, responsive": exactly N when they fit, auto-reducing on narrow screens so cards never
   shrink below a floor (no JS/resize needed — the minmax(max(floor, (100% - gaps)/N)) makes auto-fill cap at N). */
.gn-dt3 .dt3-gallery[data-gcols]{ grid-template-columns:repeat(auto-fill,minmax(max(130px, calc((100% - (var(--gcols) - 1) * 14px) / var(--gcols))), 1fr)); }
.gn-dt3 .dt3-cards[data-gcols]{ grid-template-columns:repeat(auto-fill,minmax(max(200px, calc((100% - (var(--gcols) - 1) * 12px) / var(--gcols))), 1fr)); }
/* Gallery/card cards: graceful image fallback (colored initial when no/broken image), price, status badge, product-link cards. */
.gn-dt3 .dt3-ghero{ position:relative; }
.gn-dt3 .dt3-ghero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.gn-dt3 .dt3-ghero.broken img{ display:none; }
/* colored initial shows ONLY when the image is broken/absent — NOT behind a loaded (possibly transparent) image, which would bleed a colored band through the transparent parts. The hero keeps its neutral bg for those gaps. */
.gn-dt3 .dt3-ginit{ display:none; position:absolute; inset:0; z-index:0; align-items:center; justify-content:center; font-weight:800; font-size:clamp(22px, 26%, 54px); color:#fff; background:hsl(var(--h,220), 42%, 58%); text-transform:uppercase; }
.gn-dt3 .dt3-ghero.broken .dt3-ginit{ display:flex; }
.gn-dt3 .dt3-gmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:4px; }
.gn-dt3 .dt3-gpricewrap{ display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; }
.gn-dt3 .dt3-gprice{ font-weight:800; font-size:16px; color:var(--dt-ink); letter-spacing:-.01em; white-space:nowrap; }
.gn-dt3 .dt3-gprice.sale{ color:#d14545; }
.gn-dt3 .dt3-gprice-old{ font-weight:600; font-size:12px; color:var(--dt-muted); text-decoration:line-through; white-space:nowrap; }
.gn-dt3 .dt3-gdiscount{ font-weight:800; font-size:10.5px; color:#fff; background:#d14545; border-radius:5px; padding:1px 5px; letter-spacing:.02em; }
.gn-dt3 .dt3-gcard-link{ display:block; text-decoration:none; color:inherit; cursor:pointer; transition:box-shadow .13s ease, transform .13s ease; }
.gn-dt3 .dt3-gcard-link:hover{ box-shadow:0 8px 24px -12px rgba(16,18,40,.38); transform:translateY(-2px); }
.gn-dt3 .dt3-badge{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; background:rgba(120,125,150,.16); color:var(--dt-muted); white-space:nowrap; }
.gn-dt3 .dt3-badge.ok{ background:rgba(31,157,107,.15); color:#159a67; }
.gn-dt3 .dt3-badge.off{ background:rgba(214,70,70,.14); color:#d14545; }
.gn-dt3 .dt3-badge.warn{ background:rgba(201,138,18,.16); color:#b5820f; }

/* segmented column-count control in the view bar (gallery/card modes only) */
.gn-dt3 .dt3-colsctl{ display:inline-flex; align-items:center; gap:1px; padding:2px; border:1px solid var(--dt-line); border-radius:9px; }
.gn-dt3 .dt3-colsctl > svg{ width:14px; height:14px; opacity:.55; margin:0 3px 0 4px; flex:0 0 auto; }
.gn-dt3 .dt3-colb{ min-width:24px; height:24px; padding:0 7px; border:0; border-radius:7px; background:transparent; color:var(--dt-muted); font-size:12px; font-weight:600; cursor:pointer; line-height:24px; }
.gn-dt3 .dt3-colb:hover{ background:rgba(120,125,150,.14); color:var(--dt-ink); }
.gn-dt3 .dt3-colb.on{ background:var(--dt-accent); color:#fff; }
/* Sort control (non-table modes) */
.gn-dt3 .dt3-sortctl .dt3-sortdir{ border:0; background:transparent; cursor:pointer; font-size:14px; line-height:1; padding:0 2px 0 4px; color:var(--dt-muted); }
.gn-dt3 .dt3-sortctl .dt3-sortdir:hover{ color:var(--dt-ink); }
/* the columns preset control is pointless where only 1–2 columns fit → hide on phones */
@media (max-width:760px){ .gn-dt3 .dt3-colsctl{ display:none; } }

/* a11y: visible keyboard focus for the facet controls (rows use the role=checkbox ARIA pattern → keyboard-operable) */
.gn-dt3 .dt3-ckrow:focus-visible, .gn-dt3 .dt3-fchip:focus-visible, .gn-dt3 .dt3-facetmore:focus-visible,
.gn-dt3 .dt3-fdrawerx:focus-visible, .gn-dt3 .dt3-facetsearch:focus-visible, .gn-dt3 .dt3-rangei:focus-visible {
  outline:2px solid var(--dt-accent); outline-offset:2px; border-radius:7px;
}
/* ═══ Panneau de facettes PROPRE (ecommerce) — filterFields configurés rendus en cases à cocher + plage prix ═══ */
.gn-dt3 .dt3-facethead { display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:800; font-size:15px; color:var(--dt-ink); letter-spacing:-.01em; margin:0 0 15px; }
.gn-dt3 .dt3-clearall { border:0; background:none; color:var(--dt-accent); font-size:12px; font-weight:600; cursor:pointer; padding:2px 2px; }
.gn-dt3 .dt3-clearall:hover { text-decoration:underline; }
.gn-dt3 .dt3-facethead-r { display:inline-flex; align-items:center; gap:6px; }
.gn-dt3 .dt3-fhide { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid var(--dt-border,rgba(128,128,128,.25)); border-radius:7px; background:none; color:var(--dt-muted,#6b7280); font-size:15px; line-height:1; cursor:pointer; padding:0; transition:background .12s,color .12s; }
.gn-dt3 .dt3-fhide:hover { background:var(--dt-hover,rgba(128,128,128,.12)); color:var(--dt-ink); }
.gn-dt3 .dt3-ffgroup { margin:0 0 18px; }
.gn-dt3 .dt3-ffgroup:last-child { margin-bottom:0; }
.gn-dt3 .dt3-ffhead { font-size:12.5px; font-weight:700; color:var(--dt-ink); margin:0 0 8px; }
/* ── SOTA Advanced condition builder (arbitrary field/operator/value) — tuned for the narrow facet sidebar ── */
.gn-dt3 .dt3-advfilters { margin-top:18px; padding-top:16px; border-top:1px solid var(--dt-line); }
.gn-dt3 .dt3-advhead { font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--dt-muted); margin:0 0 12px; }
/* Match all/any: label on its OWN line (no skinny wrapping column) + a full-width select.
   NB: 4-class selectors (…fpanel2 .dt3-advfilters…) to BEAT the earlier `.dt3-fpanel2 .dt3-join{display:flex}` (equal specificity would lose by source order). */
.gn-dt3 .dt3-fpanel2 .dt3-advfilters .dt3-join { display:block; margin:0 0 12px; }
.gn-dt3 .dt3-fpanel2 .dt3-advfilters .dt3-join-lbl { display:block; font-size:11px; font-weight:600; color:var(--dt-muted); margin:0 0 6px; }
.gn-dt3 .dt3-fpanel2 .dt3-advfilters .dt3-joinsel { width:100%; height:34px; padding:0 12px; border:1px solid var(--dt-line); border-radius:9px; background:var(--dt-panel); color:var(--dt-ink); font-size:13px; font-weight:600; cursor:pointer; }
/* Conditions: one compact card each — field full-width on top, operator + value below, remove × at the end */
.gn-dt3 .dt3-advfilters .dt3-conds { display:flex; flex-direction:column; gap:9px; margin:0 0 12px; }
.gn-dt3 .dt3-advfilters .dt3-cond { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:10px; border:1px solid var(--dt-line); border-radius:11px; background:rgba(120,125,150,.05); }
.gn-dt3 .dt3-advfilters .dt3-cond .dt3-fsel,
.gn-dt3 .dt3-advfilters .dt3-cond .dt3-fval { height:32px; border:1px solid var(--dt-line); border-radius:8px; background:var(--dt-panel); color:var(--dt-ink); font-size:12.5px; padding:0 9px; min-width:0; box-sizing:border-box; }
.gn-dt3 .dt3-advfilters .dt3-cond .dt3-fsel[data-role=fcfield] { flex:1 1 100%; font-weight:600; }   /* field: full width, first row */
.gn-dt3 .dt3-advfilters .dt3-cond .dt3-fsel[data-role=fcop] { flex:0 1 auto; max-width:52%; color:var(--dt-muted); }   /* operator: compact */
.gn-dt3 .dt3-advfilters .dt3-cond .dt3-fval, .gn-dt3 .dt3-advfilters .dt3-cond .dt3-fvalpick { flex:1 1 64px; min-width:0; }   /* value: fill remaining */
.gn-dt3 .dt3-advfilters .dt3-cond .dt3-fto { color:var(--dt-muted); flex:0 0 auto; }
.gn-dt3 .dt3-advfilters .dt3-cond .dt3-condn { flex:0 0 auto; }
.gn-dt3 .dt3-advfilters .dt3-cond .dt3-fx { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:0; border-radius:7px; background:none; color:var(--dt-muted); cursor:pointer; transition:background .12s, color .12s; }
.gn-dt3 .dt3-advfilters .dt3-cond .dt3-fx:hover { background:rgba(209,69,69,.12); color:#d14545; }
.gn-dt3 .dt3-advfilters .dt3-cond .dt3-fx svg { width:13px; height:13px; }
/* Add condition: full-width, clean dashed button with an accent hover */
.gn-dt3 .dt3-advfilters .dt3-addcond { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:36px; margin:0; padding:0 12px; border:1px dashed var(--dt-line); border-radius:9px; background:none; color:var(--dt-muted); cursor:pointer; font-size:12.5px; font-weight:600; transition:border-color .12s, color .12s, background .12s; }
.gn-dt3 .dt3-advfilters .dt3-addcond:hover { border-color:var(--dt-accent); color:var(--dt-accent); background:color-mix(in srgb, var(--dt-accent) 7%, transparent); }
.gn-dt3 .dt3-advfilters .dt3-addcond svg { width:14px; height:14px; }
/* liste de cases à cocher (Catégorie / enum) */
.gn-dt3 .dt3-cklist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
.gn-dt3 .dt3-ckrow { display:flex; align-items:center; gap:10px; width:100%; border:0; background:none; cursor:pointer; padding:7px 8px; border-radius:8px; color:var(--dt-ink); font-size:13px; text-align:start; transition:background .12s; }
.gn-dt3 .dt3-ckrow:hover { background:rgba(120,125,150,.1); }
.gn-dt3 .dt3-ckbox { flex:0 0 auto; width:17px; height:17px; border:1.5px solid var(--dt-line2, var(--dt-muted)); border-radius:5px; background:var(--dt-panel); position:relative; transition:background .12s, border-color .12s; }
.gn-dt3 .dt3-ckrow.on .dt3-ckbox { background:var(--dt-accent); border-color:var(--dt-accent); }
.gn-dt3 .dt3-ckrow.on .dt3-ckbox::after { content:''; position:absolute; left:5px; top:1.5px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.gn-dt3 .dt3-cklab { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gn-dt3 .dt3-ckrow .dt3-facetn { margin-left:auto; flex:0 0 auto; }
/* Prix — plage min / max */
/* Histogram range slider (RangeSlider facet): price-distribution bars + a dual-handle slider above the Min/Max inputs. */
.gn-dt3 .dt3-histoslider { margin:2px 0 12px; padding:0 9px; }
.gn-dt3 .dt3-histobars { display:flex; align-items:flex-end; gap:2px; height:46px; margin-bottom:6px; }
.gn-dt3 .dt3-histobar { flex:1 1 0; min-width:0; border-radius:3px 3px 0 0; background:var(--dt-line2, var(--dt-line)); transition:background .12s ease, opacity .12s ease; }
.gn-dt3 .dt3-histobar.in { background:var(--dt-accent); }
.gn-dt3 .dt3-histobar.out { opacity:.6; }
.gn-dt3 .dt3-sldtrack { position:relative; height:4px; border-radius:3px; background:var(--dt-line2, var(--dt-line)); margin-top:9px; cursor:pointer; touch-action:none; }
.gn-dt3 .dt3-sldfill { position:absolute; top:0; bottom:0; background:var(--dt-accent); border-radius:3px; }
.gn-dt3 .dt3-sldthumb { position:absolute; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; padding:0; border:0; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28), 0 0 0 1.5px var(--dt-accent); cursor:grab; touch-action:none; z-index:2; }
.gn-dt3 .dt3-sldthumb:active { cursor:grabbing; }
.gn-dt3 .dt3-sldthumb:focus-visible { outline:2px solid var(--dt-accent); outline-offset:3px; }
.gn-dt3 .dt3-sldval { margin-top:9px; font-size:12.5px; font-weight:600; color:var(--dt-ink); text-align:center; font-variant-numeric:tabular-nums; }
.gn-dt3 .dt3-rangerow { display:flex; align-items:center; gap:8px; }
.gn-dt3 .dt3-rangei { flex:1 1 0; min-width:0; height:36px; box-sizing:border-box; border:1px solid var(--dt-line2, var(--dt-line)); border-radius:8px; background:var(--dt-panel); color:var(--dt-ink); padding:0 10px; font-size:13px; }
.gn-dt3 .dt3-rangei:focus { outline:none; border-color:var(--dt-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--dt-accent) 16%, transparent); }
.gn-dt3 .dt3-rangesep { color:var(--dt-muted); flex:0 0 auto; }
/* hide the native number-input spinner arrows on range facets → clean, SOTA */
.gn-dt3 .dt3-rangei[type=number] { -moz-appearance:textfield; appearance:textfield; }
.gn-dt3 .dt3-rangei::-webkit-outer-spin-button, .gn-dt3 .dt3-rangei::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
/* recherche dans une facette + voir plus */
.gn-dt3 .dt3-facetsearch { width:100%; box-sizing:border-box; height:30px; margin:0 0 7px; border:1px solid var(--dt-line2, var(--dt-line)); border-radius:7px; background:var(--dt-panel); color:var(--dt-ink); padding:0 9px; font-size:12.5px; }
.gn-dt3 .dt3-facetsearch:focus { outline:none; border-color:var(--dt-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--dt-accent) 16%, transparent); }
.gn-dt3 .dt3-facetmore { margin-top:4px; border:0; background:none; color:var(--dt-accent); font-size:12px; font-weight:600; cursor:pointer; padding:3px 2px; }
.gn-dt3 .dt3-facetmore:hover { text-decoration:underline; }
/* chips de filtres actifs (supprimables) */
.gn-dt3 .dt3-fchips { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
/* active-filter chips: subtle accent-tinted pill (not a heavy solid block) — cleaner/SOTA */
.gn-dt3 .dt3-fchip { display:inline-flex; align-items:center; gap:5px; border:0; background:color-mix(in srgb, var(--dt-accent) 13%, transparent); color:var(--dt-accent); border-radius:999px; padding:4px 7px 4px 11px; font-size:12px; font-weight:600; cursor:pointer; }
.gn-dt3 .dt3-fchip:hover { background:color-mix(in srgb, var(--dt-accent) 20%, transparent); }
.gn-dt3 .dt3-fchipx { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:color-mix(in srgb, var(--dt-accent) 22%, transparent); color:var(--dt-accent); font-size:11px; line-height:1; }
/* compteur de résultats */
.gn-dt3 .dt3-facetcount { margin-top:16px; padding-top:12px; border-top:1px solid var(--dt-line); color:var(--dt-muted); font-size:12px; font-weight:600; }

/* DataTable3 — ligne "Périmètre" : attributs constants (mono-valeur/forced), lecture seule */
.gn-dt3 .dt3-fpanel2 .dt3-scope {
    display:flex; align-items:center; flex-wrap:wrap; gap:8px;
    margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px dashed var(--dt-line);
}
.gn-dt3 .dt3-scope-lbl {
    font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:800;
    color: var(--dt-faint); margin-right:2px;
}
.gn-dt3 .dt3-scopechip {
    display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px;
    border-radius:999px; background: rgba(120,125,150,.10); color: var(--dt-ink);
    font-size:12.5px; font-weight:500; cursor:default; max-width: 340px;
}
.gn-dt3 .dt3-scopev { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gn-dt3 .dt3-scopek {
    flex:0 0 auto; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color: var(--dt-faint);
}
[dir="rtl"] .gn-dt3 .dt3-scope-lbl { margin-right:0; margin-left:2px; }

/* DataTable3 — builder de conditions : pickers de valeur */
.gn-dt3 .dt3-cond .dt3-fvalmulti { padding:4px; border-radius:8px; line-height:1.5; }
.gn-dt3 .dt3-cond .dt3-fvalmulti option { padding:4px 8px; border-radius:6px; }
.gn-dt3 .dt3-cond .dt3-fvalmulti option:checked { background: var(--dt-accent) linear-gradient(0deg,var(--dt-accent),var(--dt-accent)); color:#fff; }
.gn-dt3 .dt3-cond .dt3-fvalpick { min-width: 180px; }

/* ============================================================================
 *  DataTable3 — builder de conditions avancé (bascule ET/OU, compteurs,
 *  états, menu d'en-tête, combobox à recherche). Scopé .gn-dt3, theme-aware.
 * ========================================================================== */
/* #5 bascule ET/OU */
.gn-dt3 .dt3-fpanel2 .dt3-join { display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:13px; color:var(--dt-muted); }
.gn-dt3 .dt3-join-lbl { font-weight:600; }
.gn-dt3 .dt3-joinsel { height:30px; border:1px solid var(--dt-line); border-radius:8px; background:var(--dt-panel); color:var(--dt-ink); padding:0 8px; font-weight:600; cursor:pointer; }
/* #4 compteur par condition */
.gn-dt3 .dt3-cond .dt3-condn { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; padding:0 7px; border-radius:999px; background:rgba(120,125,150,.14); color:var(--dt-muted); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
/* #7 condition incomplète */
.gn-dt3 .dt3-cond.incomplete { opacity:.6; }
.gn-dt3 .dt3-cond.incomplete .dt3-fval, .gn-dt3 .dt3-cond.incomplete .dt3-cbtrigger { border-style:dashed; }
/* #6 menu d'en-tête de colonne */
.gn-dt3 th.sortable { position:relative; }
.gn-dt3 .dt3-hmenu { opacity:0; margin-inline-start:4px; width:18px; height:18px; padding:0; border:0; background:transparent; color:var(--dt-muted); cursor:pointer; vertical-align:middle; border-radius:4px; transition:opacity .12s,background .12s; }
.gn-dt3 th.sortable:hover .dt3-hmenu, .gn-dt3 th.menuopen .dt3-hmenu { opacity:1; }
.gn-dt3 .dt3-hmenu:hover { background:rgba(120,125,150,.18); color:var(--dt-ink); }
.gn-dt3 .dt3-hmenu svg { width:12px; height:12px; }
.gn-dt3 .dt3-hpop { position:absolute; top:100%; inset-inline-start:0; margin-top:4px; z-index:70; min-width:196px; background:var(--dt-elev); border:1px solid var(--dt-line); border-radius:10px; box-shadow:0 16px 40px -14px rgba(0,0,0,.4); padding:5px; text-align:start; }
.gn-dt3 .dt3-hpop .dt3-mi { display:flex; align-items:center; gap:9px; width:100%; padding:7px 9px; border:0; background:transparent; color:var(--dt-ink); font-size:13px; font-weight:500; text-transform:none; letter-spacing:0; cursor:pointer; border-radius:7px; text-align:start; }
.gn-dt3 .dt3-hpop .dt3-mi:hover { background:rgba(120,125,150,.12); }
.gn-dt3 .dt3-hpop .dt3-mi svg { width:15px; height:15px; opacity:.7; }
.gn-dt3 .dt3-hpop .dt3-msep { height:1px; background:var(--dt-line); margin:5px 2px; }
/* Menu "…" : l'en-tête "Density" et la rangée de boutons n'avaient aucun padding (collés aux bords) */
.gn-dt3 .dt3-mih { padding:9px 12px 5px!important; margin:0!important; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--dt-muted); }
.gn-dt3 .dt3-densmenu { padding:2px 10px 10px!important; gap:6px; }
/* Contrôle de densité (Compact/Cozy/Comfortable) — segmented SOTA (padding + accent du thème) */
.gn-dt3 .dt3-vpop h5 { margin:14px 0 8px!important; font-size:10.5px!important; font-weight:700!important; letter-spacing:.06em; text-transform:uppercase; color:var(--dt-muted)!important; }
.gn-dt3 .dt3-vpop h5:first-child { margin-top:0!important; }
.gn-dt3 .dt3-densrow { display:flex!important; gap:6px!important; flex-wrap:wrap; }
.gn-dt3 .dt3-densb { padding:7px 14px!important; border:1px solid var(--dt-line)!important; background:var(--dt-panel)!important; color:var(--dt-muted)!important; font-size:12.5px; font-weight:600; line-height:1; cursor:pointer; transition:border-color .14s ease, color .14s ease, background .14s ease; }
.gn-dt3 .dt3-densb:hover { border-color:var(--dt-accent)!important; color:var(--dt-accent)!important; }
.gn-dt3 .dt3-densb.on { background:var(--dt-accent)!important; border-color:var(--dt-accent)!important; color:#fff!important; }

/* DT3 suit aussi le STYLE choisi (Notion/Linear/Retool). Ses rayons sont codés en dur dans ce
   même fichier (règles plus haut) → !important pour que les tokens --ui-* gagnent partout.
   Les pastilles rondes (compteurs, chips 999px) restent volontairement rondes. */
.gn-dt3 .dt3-card { box-shadow:var(--ui-card-shadow)!important; }
body.ui-linear .gn-dt3 .dt3-card, body.ui-linear .gn-dt3 .dt3-fpanel2 { box-shadow:none!important; }
/* Panneaux / cartes / tiroir / popovers → --ui-radius */
.gn-dt3 .dt3-card, .gn-dt3 .dt3-fpanel2, .gn-dt3 .dt3-facet, .gn-dt3 .dt3-hpop,
.gn-dt3 .dt3-cbpop, .gn-dt3 .dt3-pop, .gn-dt3 .dt3-drawer { border-radius:var(--ui-radius)!important; }
/* Contrôles (boutons, recherche, toggles, actions de ligne, pager, options…) → --ui-radius-sm */
.gn-dt3 .dt3-btn, .gn-dt3 .dt3-search, .gn-dt3 .dt3-search input, .gn-dt3 .dt3-cbsearch,
.gn-dt3 .dt3-clink, .gn-dt3 .dt3-joinsel, .gn-dt3 .dt3-vpill, .gn-dt3 .dt3-ia,
.gn-dt3 .dt3-pager button, .gn-dt3 .dt3-pager a, .gn-dt3 .dt3-mi, .gn-dt3 .dt3-densb,
.gn-dt3 .dt3-combopt, .gn-dt3 .dt3-cbck, .gn-dt3 .dt3-cardb, .gn-dt3 .dt3-drow { border-radius:var(--ui-radius-sm)!important; }
/* Caractère du TABLEAU selon le style (le rayon ne se voit pas sur un tableau → on change la trame).
   N'affecte PAS la densité (contrôle DT3 séparé, via data-density). */
/* Retool = grille type tableur (bordures de cellules sur tous les côtés) */
body.ui-retool .gn-dt3 table td, body.ui-retool .gn-dt3 table th { border:1px solid var(--dt-line)!important; }
/* Linear = filets horizontaux nets, plat, coins carrés */
body.ui-linear .gn-dt3 table td, body.ui-linear .gn-dt3 table th { border-bottom:1px solid var(--dt-line2)!important; }
body.ui-linear .gn-dt3 .dt3-facetb, body.ui-linear .gn-dt3 .dt3-cbchip { border-radius:var(--ui-radius-sm)!important; }   /* pastilles → étiquettes carrées en Linear */
/* Notion = aéré : séparateurs de lignes doux uniquement */
body.ui-notion .gn-dt3 table td { border-bottom:1px solid var(--dt-line)!important; }
/* #1 combobox à recherche */
.gn-dt3 .dt3-combo { position:relative; display:inline-block; min-width:210px; }
.gn-dt3 .dt3-cbtrigger { display:flex; align-items:center; gap:6px; width:100%; min-height:34px; padding:3px 8px; text-align:start; cursor:pointer; }
.gn-dt3 .dt3-cbchips { display:flex; flex-wrap:wrap; gap:4px; flex:1; min-width:0; align-items:center; }
.gn-dt3 .dt3-cbchip { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; background:var(--dt-accent); color:#fff; font-size:11.5px; font-weight:600; }
.gn-dt3 .dt3-cbmore { color:var(--dt-muted); font-size:11.5px; font-weight:700; }
.gn-dt3 .dt3-cbph { color:var(--dt-muted); }
.gn-dt3 .dt3-cbtrigger .dt3-cav { width:14px; height:14px; opacity:.6; flex:none; }
.gn-dt3 .dt3-cbpop { position:absolute; top:calc(100% + 5px); inset-inline-start:0; z-index:75; width:264px; max-width:82vw; background:var(--dt-elev); border:1px solid var(--dt-line); border-radius:11px; box-shadow:0 18px 44px -14px rgba(0,0,0,.42); padding:8px; }
.gn-dt3 .dt3-cbsearch { width:100%; height:32px; border:1px solid var(--dt-line); border-radius:8px; background:var(--dt-panel); color:var(--dt-ink); padding:0 10px; font-size:13px; margin-bottom:6px; outline:none; }
.gn-dt3 .dt3-cbsearch:focus { border-color:var(--dt-accent); }
.gn-dt3 .dt3-cblist { max-height:232px; overflow:auto; display:flex; flex-direction:column; gap:1px; }
.gn-dt3 .dt3-combopt { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--dt-ink); }
.gn-dt3 .dt3-combopt:hover { background:rgba(120,125,150,.10); }
.gn-dt3 .dt3-combopt .dt3-cbck { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border:1.5px solid var(--dt-line); border-radius:5px; flex:none; color:transparent; }
.gn-dt3 .dt3-combopt.on .dt3-cbck { background:var(--dt-accent); border-color:var(--dt-accent); color:#fff; }
.gn-dt3 .dt3-combopt .dt3-cbck svg { width:12px; height:12px; }
.gn-dt3 .dt3-combopt .dt3-cbl { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gn-dt3 .dt3-combopt .dt3-facetn { margin-inline-start:auto; }

/* DataTable3 — panneau Colonnes (recherche, Tout cocher, Colonnes clés) */
.gn-dt3 .dt3-colspop2 { min-width:300px; padding:8px; }
.gn-dt3 .dt3-colshead { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:6px; padding:2px 4px 8px; }
.gn-dt3 .dt3-colshead h5 { margin:0; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--dt-muted); font-weight:700; display:flex; align-items:center; gap:6px; }
.gn-dt3 .dt3-colsn { font-weight:600; color:var(--dt-faint); letter-spacing:0; }
.gn-dt3 .dt3-colsact { display:flex; align-items:center; gap:6px; flex:none; }
.gn-dt3 .dt3-clink { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px; border:1px solid var(--dt-line); border-radius:7px; background:var(--dt-panel); color:var(--dt-ink); font-size:11.5px; font-weight:600; line-height:1; white-space:nowrap; flex:0 0 auto; cursor:pointer; transition:background .12s,border-color .12s,color .12s; }
.gn-dt3 .dt3-clink svg { flex:none; }
.gn-dt3 .dt3-clink:hover { border-color:var(--dt-accent); color:var(--dt-accent); }
.gn-dt3 .dt3-clink[data-role=colsmart] { color:var(--dt-accent); border-color:var(--dt-accent); }
.gn-dt3 .dt3-clink[data-role=colsmart]:hover { background:var(--dt-accent); color:#fff; border-color:var(--dt-accent); }
.gn-dt3 .dt3-colsq { margin:0 0 6px; }
.gn-dt3 .dt3-colslist { max-height:300px; overflow:auto; }
/* bouton data-bar : icône claire, révélée au survol de la ligne */
.gn-dt3 .dt3-colrow { display:flex; align-items:center; }
.gn-dt3 .dt3-colrow label { flex:1; min-width:0; }
.gn-dt3 .dt3-dbarbtn { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; color:var(--dt-faint); cursor:pointer; opacity:0; transition:opacity .12s,background .12s,color .12s; flex:none; }
.gn-dt3 .dt3-colrow:hover .dt3-dbarbtn, .gn-dt3 .dt3-dbarbtn.on { opacity:1; }
.gn-dt3 .dt3-dbarbtn:hover { background:rgba(120,125,150,.14); color:var(--dt-ink); }
.gn-dt3 .dt3-dbarbtn.on { background:var(--dt-accent); color:#fff; }

.gn-dt3 .dt3-state-act { display:flex; gap:10px; margin-top:14px; justify-content:center; }

/* DataTable3 — #1 colonne d'identité figée (sticky) : le contexte reste pendant le scroll horizontal */
.gn-dt3[data-frozen="1"] table td.dt3-ckcell, .gn-dt3[data-frozen="1"] table th.dt3-ckcell { position:sticky !important; inset-inline-start:0; z-index:5; background:var(--dt-panel); }
.gn-dt3 table td.dt3-frozen, .gn-dt3 table th.dt3-frozen { position:sticky !important; inset-inline-start:0; z-index:2; background:var(--dt-panel); box-shadow:6px 0 8px -6px rgba(16,18,40,.18); }
.gn-dt3 table td.dt3-ckcell + td.dt3-frozen, .gn-dt3 table th.dt3-ckcell + th.dt3-frozen { inset-inline-start:42px; }
.gn-dt3 table th.dt3-frozen { z-index:5; }
.gn-dt3 table tr:hover td.dt3-frozen, .gn-dt3 table tr:hover td.dt3-ckcell { background:var(--dt-panel2, var(--dt-panel)); }
[dir="rtl"] .gn-dt3 table td.dt3-frozen, [dir="rtl"] .gn-dt3 table th.dt3-frozen { box-shadow:-6px 0 8px -6px rgba(16,18,40,.18); }

/* DataTable3 — #2 panneau de détail (drawer) : toutes les colonnes d'une fiche, sans scroll horizontal */
.gn-dt3 .dt3-drawerbg { position:fixed; inset:0; background:rgba(16,18,40,.35); z-index:90; animation:dt3FadeIn .15s ease both; }
.gn-dt3 .dt3-drawer { position:fixed; top:0; inset-inline-end:0; height:100vh; width:430px; max-width:92vw; background:var(--dt-panel); border-inline-start:1px solid var(--dt-line); box-shadow:-24px 0 60px -30px rgba(0,0,0,.5); z-index:91; display:flex; flex-direction:column; animation:dt3SlideIn .22s cubic-bezier(.22,.61,.36,1) both; }
@keyframes dt3FadeIn { from{opacity:0} to{opacity:1} }
@keyframes dt3SlideIn { from{ transform:translateX(26px); opacity:.4 } to{ transform:none; opacity:1 } }
[dir="rtl"] .gn-dt3 .dt3-drawer { animation-name:dt3SlideInR; }
@keyframes dt3SlideInR { from{ transform:translateX(-26px); opacity:.4 } to{ transform:none; opacity:1 } }
.gn-dt3 .dt3-drawerh { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--dt-line); }
.gn-dt3 .dt3-drawert { font-size:16px; font-weight:700; color:var(--dt-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gn-dt3 .dt3-drawerx { flex:none; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--dt-muted); border-radius:8px; cursor:pointer; }
.gn-dt3 .dt3-drawerx:hover { background:rgba(120,125,150,.14); color:var(--dt-ink); }
.gn-dt3 .dt3-drawerx svg { width:18px; height:18px; }
.gn-dt3 .dt3-drawerb { flex:1; overflow:auto; padding:8px 6px; }
.gn-dt3 .dt3-drow { display:grid; grid-template-columns:148px 1fr; gap:12px; padding:10px 12px; border-radius:8px; }
.gn-dt3 .dt3-drow:hover { background:rgba(120,125,150,.06); }
.gn-dt3 .dt3-dk { font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--dt-muted); padding-top:2px; }
.gn-dt3 .dt3-dv { font-size:13.5px; color:var(--dt-ink); min-width:0; overflow-wrap:anywhere; }
.gn-dt3 .dt3-drawerf { padding:12px 18px; border-top:1px solid var(--dt-line); display:flex; gap:8px; }
.gn-dt3 .dt3-drawerf .dt3-ia { width:34px; height:34px; }

/* DataTable3 — bouton "voir tous les champs" dans la cellule d'identité (ouvre le drawer, au survol) */
.gn-dt3 .dt3-rowexp { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; margin-inline-start:6px; border-radius:5px; color:var(--dt-muted); cursor:pointer; opacity:0; vertical-align:middle; transition:opacity .12s,background .12s,color .12s; }
.gn-dt3 table tr:hover .dt3-rowexp { opacity:.7; }
.gn-dt3 .dt3-rowexp:hover { opacity:1; background:var(--dt-accent); color:#fff; }
.gn-dt3 .dt3-rowexp svg { width:13px; height:13px; }

/* DataTable3 — #3 responsive : masquer les colonnes système (created/updated/deleted…) quand la table est étroite.
   Container-query sur le conteneur de défilement → n'affecte PAS les choix de visibilité du user (transitoire). */
.gn-dt3[data-narrow="1"] .dt3-syscol { display: none; }

/* DataTable3 — laisser les popovers (Colonnes, menu d'en-tête…) SORTIR du shell.
   Le composant met .dt3-shell{overflow:hidden} (pour l'arrondi) → ça clippe les popups quand le corps est court.
   On repasse en visible ; le défilement interne (.dt3-scroll) garde son propre clip. Coins arrondis conservés via les enfants. */
.gn-dt3 .dt3-shell { overflow: visible !important; }
.gn-dt3 .dt3-clink svg { flex:none; display:block; }
/* États vides/erreur (.dt3-state) : Tailwind Preflight force svg{display:block} → l'icône se colle à
   gauche alors que le texte est centré (text-align n'agit pas sur un bloc). On centre en colonne flex. */
.gn-dt3 .dt3-state { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }

/* =====================================================================
   Sidebar admin — RAIL REPLIÉ À LA DEMANDE (bouton « pin », pas de hover).
   État piloté par Alpine `sidebarCollapsed` ($persist) → classe .sb-collapsed
   sur l'<aside>. Tout est scopé au breakpoint desktop (md ≥768px) : sur mobile
   la sidebar reste un drawer plein largeur (le repli est un concept desktop).
   ===================================================================== */
@media (min-width:768px){
  aside.sb-collapsed{ width:4.75rem !important; }
  /* Logo : on masque la marque, on centre le bouton de repli (seul moyen de déplier) */
  aside.sb-collapsed .gn-sb-logo{ justify-content:center; padding-left:0; padding-right:0; }
  aside.sb-collapsed .gn-sb-brand{ display:none; }
  /* En-tête générique « Menu » + en-têtes de section : masqués en replié */
  aside.sb-collapsed .gn-sb-navhdr{ display:none; }
  aside.sb-collapsed .gn-nav-section{ display:none; }
  aside.sb-collapsed .gn-nav-subwrap{ grid-template-rows:1fr; }   /* rail : la section est masquée → on ne plie pas (les icônes restent visibles) */
  /* Liens de menu : icône seule, centrée */
  aside.sb-collapsed .gn-nav-link{ justify-content:center; gap:0; padding-left:0; padding-right:0; }
  aside.sb-collapsed .gn-nav-label,
  aside.sb-collapsed .gn-nav-count{ display:none; }
  aside.sb-collapsed .gn-nav-link .iconify,
  aside.sb-collapsed .gn-nav-link svg{ margin:0; }
  /* Footer : on réduit à l'avatar (menu profil/déconnexion) + bascule mode sombre (icône) */
  aside.sb-collapsed .sticky{ padding-left:8px; padding-right:8px; }
  aside.sb-collapsed .sticky p{ display:none; }
  aside.sb-collapsed .sticky .justify-between{ justify-content:center; }
  aside.sb-collapsed .sticky .space-x-1{ display:none; }            /* LanguageSwitcher */
  aside.sb-collapsed .sticky .space-y-2 > :first-child{ display:none; } /* ThemeSwitcher (swatches trop larges en replié) */
  aside.sb-collapsed .sticky button span{ display:none; }           /* label « Mode sombre » */
  aside.sb-collapsed .sticky .relative.w-8.h-4{ display:none; }      /* interrupteur du toggle (on garde l'icône lune/soleil) */
  aside.sb-collapsed .sticky .mr-3{ margin-right:0; }
}

/* Utilitaires responsive display MANQUANTS dans tw-precompiled.css (le JIT capturé ne les
   avait pas émis). Nécessaires au comportement desktop/mobile de la sidebar :
   bouton pin (hidden md:flex), bouton fermeture mobile + burger (md:hidden). Authoré ici
   (chargé après le précompilé) → robuste, pas de régénération. */
@media (min-width:768px){
  .md\:hidden{ display:none !important; }
  .md\:flex{ display:flex !important; }
}

/* =====================================================================
   DataTable3 — MODE SOMBRE piloté par la CLASSE .dark (app), pas par l'OS.
   Le composant ne définit sa palette sombre que sous @media(prefers-color-scheme:dark)
   → en dark applicatif (classe .dark sur <body>, via Alpine) avec un OS clair, la table
   restait BLANCHE. On mappe explicitement la palette --dt-* sur .dark / :not(.dark) pour
   que la table suive le thème de l'APP dans les deux sens (spécificité 0,2,1 > les blocs
   .gn-dt3 du composant). --dt-radius/color/font héritent du bloc de base. */
body.dark .gn-dt3{
  --dt-bg:#0d0e15; --dt-panel:#14151e; --dt-panel2:#181a24; --dt-elev:#1d1f2b;
  --dt-line:#262838; --dt-line2:#323550;
  --dt-ink:#e8e9f2; --dt-ink-soft:#b7bacb; --dt-muted:#878aa0; --dt-faint:#5c6076;
  --dt-accent:var(--color-primary,#7c7cff);
  --dt-accent-soft:color-mix(in srgb, var(--color-primary,#7c7cff) 26%, #14151e);
  --dt-accent-line:color-mix(in srgb, var(--color-primary,#7c7cff) 44%, #14151e);
  --dt-ok:#43c59e; --dt-ok-soft:#123027; --dt-danger:#f2708b;
  color:var(--dt-ink);
}
body:not(.dark) .gn-dt3{
  --dt-bg:#f4f5fa; --dt-panel:#fff; --dt-panel2:#f8f9fd; --dt-elev:#fff;
  --dt-line:#e2e5f0; --dt-line2:#d3d7e6;
  --dt-ink:#191b26; --dt-ink-soft:#4c5064; --dt-muted:#7a7f95; --dt-faint:#a7abbe;
  --dt-accent:var(--color-primary,#5b5bf0);
  --dt-accent-soft:color-mix(in srgb, var(--color-primary,#5b5bf0) 12%, #fff);
  --dt-accent-line:color-mix(in srgb, var(--color-primary,#5b5bf0) 30%, #fff);
  --dt-ok:#1f9d6b; --dt-ok-soft:#e4f6ee; --dt-danger:#d6435f;
  color:var(--dt-ink);
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   DataForm + Breadcrumb — refonte SOTA alignée DataTable3 (mêmes tokens/rayons/accent),
   light/dark via body.dark (bascule Alpine app_dark_mode). Namespace --df-* (aucune collision
   avec les --dt-* de DT3). Ajouté 2026-07-29.
   ════════════════════════════════════════════════════════════════════════════════════════ */
.gn-df, .gn-crumb, .gn-df-input, .gn-df-tabs, .ts-wrapper, .ts-dropdown, .gn-view {
  --df-bg:#f4f5fa; --df-panel:#fff; --df-panel2:#f6f7fb; --df-input-bg:#fff;
  --df-line:#e7e9f1; --df-line2:#dadde8;
  /* alias pour que TOUT le DataForm (stepper, date-picker, revue…) partage la même palette (fini les gris divergents) */
  --df-border:#e7e9f1; --df-text:#191b26; --df-fill:#f6f7fb; --df-fill-bd:#dadde8; --df-readonly-bg:#f4f5f9;
  --df-ink:#191b26; --df-ink-soft:#4c5064; --df-muted:#7a7f95; --df-faint:#a7abbe;
  /* Accent = palette choisie par l'utilisateur (ThemeSwitcher -> --color-primary sur :root). Indigo = fallback. */
  --df-accent:var(--color-primary, #5b5bf0);
  --df-accent-soft:color-mix(in srgb, var(--color-primary, #5b5bf0) 12%, #fff);
  --df-accent-line:color-mix(in srgb, var(--color-primary, #5b5bf0) 30%, #fff);
  --df-accent-ring:color-mix(in srgb, var(--color-primary, #5b5bf0) 16%, transparent);
  --df-ok:#1f9d6b; --df-danger:#d6435f; --df-radius:14px;
}
body.dark .gn-df, body.dark .gn-crumb, body.dark .gn-df-input, body.dark .gn-df-tabs,
body.dark .ts-wrapper, body.dark .ts-dropdown, body.dark .gn-view {
  --df-bg:#0d0e15; --df-panel:#15161e; --df-panel2:#1a1c26; --df-input-bg:#1a1c26;
  --df-line:#262a37; --df-line2:#333849;
  --df-border:#262a37; --df-text:#e8e9f2; --df-fill:#1a1c26; --df-fill-bd:#333849; --df-readonly-bg:#0f1218;
  --df-ink:#e8e9f2; --df-ink-soft:#b7bacb; --df-muted:#878aa0; --df-faint:#5c6076;
  --df-accent:var(--color-primary, #7c7cff);
  --df-accent-soft:color-mix(in srgb, var(--color-primary, #7c7cff) 26%, #15161e);
  --df-accent-line:color-mix(in srgb, var(--color-primary, #7c7cff) 44%, #15161e);
  --df-accent-ring:color-mix(in srgb, var(--color-primary, #7c7cff) 24%, transparent);
  --df-ok:#43c59e; --df-danger:#f2708b;
}

/* ----- Shell + header collant ----- */
.gn-df { color:var(--df-ink); font:14px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; }
/* NB: le conteneur est `sticky top-0 bg-white dark:bg-gray-900` — NE PAS rendre transparent
   (sinon le contenu défilé transparaît à travers l'en-tête collant). On garde le fond opaque
   de Tailwind (= identique au <main>, donc aucun "bandeau"), on ajoute juste un filet en bas. */
.gn-df .form-title { border:none!important; border-bottom:1px solid var(--df-line)!important; padding:6px 0 14px!important; margin-bottom:18px!important; }
.gn-df .form-title h2 { color:var(--df-ink)!important; font-weight:800!important; font-size:22px!important; letter-spacing:-.02em; align-items:center; margin-right:16px!important; }
/* Icône du titre -> chip d'accent net (fini le ≡ perdu) */
.gn-df .form-title h2 .iconify:first-child, .gn-df .form-title h2 > svg:first-of-type {
  color:var(--df-accent)!important; width:36px!important; height:36px!important; padding:7px!important;
  background:var(--df-accent-soft)!important; border-radius:11px!important; box-sizing:border-box!important; flex:0 0 auto; }
.gn-df .form-title h2 span.mx-4 { margin-left:13px!important; margin-right:12px!important; color:var(--df-ink)!important; }
/* Badge type de ressource -> NEUTRE (surface), pour que seul le bouton Save porte l'accent */
.gn-df .form-title span[class*="bg-sky"] { background:var(--df-panel2)!important; color:var(--df-ink-soft)!important; border-color:var(--df-line)!important; font-weight:600!important; }
/* Barre de progression : track fin arrondi + remplissage accent (fine, pas criarde) */
.gn-df [id$="-progress-bar"] { background:var(--df-accent)!important; border-radius:999px; }
.gn-df .form-title [class*="bg-gray-200"], .gn-df .form-title [class*="bg-gray-700"] { background:var(--df-line)!important; height:5px!important; border-radius:999px!important; }
.gn-df [id$="-progress-text"] { color:var(--df-muted)!important; font-weight:600; }

/* ----- Sections en cartes ----- */
.gn-df .gn-df-section { background:var(--df-panel); border:1px solid var(--df-line); border-radius:var(--df-radius); box-shadow:0 1px 2px rgba(16,18,40,.05); overflow:hidden; }
body.dark .gn-df .gn-df-section { box-shadow:0 1px 2px rgba(0,0,0,.35); }
.gn-df .gn-df-sechead { background:var(--df-panel2); border-bottom:1px solid var(--df-line); padding:11px 18px!important; }
.gn-df .gn-df-sechead h3 { color:var(--df-muted)!important; font:700 11px/1 system-ui!important; letter-spacing:.08em; text-transform:uppercase; }
.gn-df .gn-df-section .grid { row-gap:14px; }

/* ----- Labels + tooltip ----- */
.gn-df label { color:var(--df-ink-soft)!important; font-weight:600!important; font-size:13px!important; margin-bottom:6px!important; }
.gn-df label .iconify { color:var(--df-faint); }
.gn-df label:hover .iconify { color:var(--df-accent); }

/* ----- Inputs (classe unique BaseInput = input/select/textarea) ----- */
.gn-df-input { width:100%; box-sizing:border-box; padding:9px 12px; font-size:13.5px; line-height:1.4; color:var(--df-ink); background:var(--df-panel); border:1px solid var(--df-line2); border-radius:9px; transition:border-color .15s ease, box-shadow .15s ease; -webkit-appearance:none; appearance:none; }
.gn-df-input::placeholder { color:var(--df-faint); }
.gn-df-input:hover { border-color:var(--df-faint); }
.gn-df-input:focus, .gn-df-input:focus-visible { outline:none; border-color:var(--df-accent); box-shadow:0 0 0 3px var(--df-accent-soft); }
.gn-df-input:disabled { opacity:.55; cursor:not-allowed; }
textarea.gn-df-input { min-height:84px; resize:vertical; }
select.gn-df-input { padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237a7f95' stroke-width='1.6'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:16px; }
body.dark select.gn-df-input { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23878aa0' stroke-width='1.6'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); }
.gn-df input[type=checkbox], .gn-df input[type=radio] { accent-color:var(--df-accent); width:16px; height:16px; }

/* ----- Help text ----- */
.gn-df [id^="help_"] { color:var(--df-muted)!important; font-size:12px!important; }
.gn-df [id^="help_"] button { color:var(--df-accent)!important; }

/* ----- Onglets entités liées (pills) ----- */
.gn-df-tabs { justify-content:flex-start; gap:8px; margin-bottom:6px; }
.gn-df-tabs a { background:var(--df-panel)!important; border:1px solid var(--df-line)!important; color:var(--df-ink-soft)!important; border-radius:9px!important; padding:7px 13px!important; font-weight:600; font-size:12.5px; box-shadow:none!important; transition:all .15s ease; }
.gn-df-tabs a:hover { background:var(--df-accent-soft)!important; border-color:var(--df-accent-line)!important; color:var(--df-accent)!important; }

/* ----- Bouton Save ----- */
.gn-df .theme-button-primary, .gn-df button[type=submit] { background:var(--df-accent)!important; border:1px solid var(--df-accent)!important; color:#fff!important; border-radius:9px!important; padding:9px 18px!important; font-weight:600; box-shadow:0 1px 2px color-mix(in srgb, var(--df-accent) 35%, transparent)!important; transition:filter .15s ease, transform .05s ease; }
.gn-df .theme-button-primary:hover, .gn-df button[type=submit]:hover { filter:brightness(1.06); }
.gn-df .theme-button-primary:active, .gn-df button[type=submit]:active { transform:translateY(1px); }

/* ----- Breadcrumb ----- */
.gn-crumb ol { gap:2px; }
.gn-crumb a { color:var(--df-muted)!important; font-weight:500; transition:color .12s ease; }
.gn-crumb a:hover { color:var(--df-accent)!important; }
/* lien + page courante : taille responsive, troncature « … » sur les libellés longs (fini le wrap sur 3 lignes) */
.gn-crumb-lnk, .gn-crumb-cur { display:inline-block; vertical-align:middle; max-width:min(26ch,42vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.8125rem; }
@media (min-width:640px){ .gn-crumb-lnk, .gn-crumb-cur { font-size:.875rem; max-width:min(34ch,32vw); } }
.gn-crumb-lnk { padding:2px 0; }
.gn-crumb-lnk:hover > span { text-decoration:underline; text-underline-offset:2px; }
/* page courante = <span aria-current> (pas un lien) : en gras, couleur d'encre */
.gn-crumb-cur { color:var(--df-ink)!important; font-weight:700; }
.gn-crumb .iconify { color:var(--df-faint)!important; }
.gn-crumb li:first-child .iconify { color:var(--df-accent)!important; }
/* icône d'accueil + séparateurs (tailles ; couleur héritée des règles .iconify ci-dessus) */
.gn-crumb-sep { width:.75rem; height:.75rem; margin-inline:.25rem; flex:0 0 auto; }
.gn-crumb-ico { width:1rem; height:1rem; margin-inline-end:.375rem; flex:0 0 auto; }
/* le chevron pointe vers la GAUCHE en écriture droite-à-gauche (arabe) */
[dir="rtl"] .gn-crumb-sep { transform:scaleX(-1); }

/* ----- TomSelect (listbox FK / autocomplete) — aligné DT3, dark-aware ----- */
.ts-wrapper .ts-control { background:var(--df-panel)!important; border:1px solid var(--df-line2)!important; border-radius:9px!important; color:var(--df-ink)!important; min-height:38px; box-shadow:none!important; transition:border-color .15s, box-shadow .15s; }
.ts-wrapper.focus .ts-control, .ts-wrapper .ts-control.focus { border-color:var(--df-accent)!important; box-shadow:0 0 0 3px var(--df-accent-soft)!important; }
.ts-wrapper .ts-control > input { color:var(--df-ink)!important; }
.ts-wrapper .ts-control > input::placeholder { color:var(--df-faint)!important; }
.ts-wrapper.single .ts-control, .ts-wrapper .ts-control > .item { color:var(--df-ink)!important; }
.ts-wrapper.multi .ts-control > .item { background:var(--df-accent-soft)!important; color:var(--df-accent)!important; border:1px solid var(--df-accent-line)!important; border-radius:7px!important; }
.ts-wrapper.disabled .ts-control { opacity:.55; }
.ts-wrapper .ts-control:after { border-color:var(--df-muted) transparent transparent!important; }
/* dropdown (parfois appended au <body> → règles globales, tokens définis sur .ts-dropdown) */
.ts-dropdown { background:var(--df-panel,#fff)!important; border:1px solid var(--df-line2,#d3d7e6)!important; border-radius:10px!important; box-shadow:0 12px 34px rgba(2,6,23,.22)!important; color:var(--df-ink,#191b26)!important; margin-top:5px!important; padding:5px!important; overflow:hidden; }
.ts-dropdown .ts-dropdown-content { padding:0!important; }
.ts-dropdown .option, .ts-dropdown [data-selectable] { border-radius:7px!important; color:var(--df-ink,#191b26)!important; background:transparent!important; }
.ts-dropdown .option > div { background:transparent!important; color:inherit!important; padding:8px 11px!important; }
.ts-dropdown .option.active, .ts-dropdown .active[data-selectable], .ts-dropdown .option:hover { background:var(--df-accent-soft,#ecebff)!important; color:var(--df-accent,#5b5bf0)!important; }
.ts-dropdown .option.active *, .ts-dropdown .option:hover * { color:var(--df-accent,#5b5bf0)!important; }
.ts-dropdown .no-results, .ts-dropdown .optgroup-header, .ts-dropdown .create { color:var(--df-muted,#7a7f95)!important; padding:8px 11px!important; }

/* ----- Layout page edit : contenu centré, respirant ----- */
.gn-df { max-width:1240px; margin-left:0; margin-right:auto; }
.gn-df > form { padding-bottom:36px; }

/* ----- Page VIEW (ViewRecord) — aligné DT3, light/dark ----- */
.gn-view { max-width:1160px; margin-left:auto; margin-right:auto; color:var(--df-ink); font:14px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; }
.gn-view .form-title { border:none!important; border-bottom:1px solid var(--df-line)!important; padding:6px 0 14px!important; margin-bottom:18px!important; }
.gn-view .form-title h2 { color:var(--df-ink)!important; font-weight:800!important; font-size:22px!important; letter-spacing:-.02em; align-items:center; margin-right:16px!important; }
.gn-view .form-title h2 .iconify:first-child, .gn-view .form-title h2 > svg:first-of-type {
  color:var(--df-accent)!important; width:36px!important; height:36px!important; padding:7px!important;
  background:var(--df-accent-soft)!important; border-radius:11px!important; box-sizing:border-box!important; flex:0 0 auto; }
.gn-view .form-title h2 span.mx-4 { margin-left:13px!important; margin-right:12px!important; color:var(--df-ink)!important; }
.gn-view .form-title p, .gn-view .form-title [class*="text-gray-5"] { color:var(--df-muted)!important; }
.gn-view .form-title span[class*="bg-sky"] { background:var(--df-accent-soft)!important; color:var(--df-accent)!important; border-color:var(--df-accent-line)!important; }
.gn-view .gn-df-section { background:var(--df-panel); border:1px solid var(--df-line); border-radius:var(--df-radius); box-shadow:0 1px 2px rgba(16,18,40,.05); overflow:hidden; }
body.dark .gn-view .gn-df-section { box-shadow:0 1px 2px rgba(0,0,0,.35); }
/* En-tête de section = MÊME esprit que le formulaire (titre ACCENT léger + filet), pas un bandeau gris : la fiche
   s'harmonise avec create/update. Icône (gn-sec-ic, currentColor) hérite alors l'accent. */
.gn-view .gn-df-sechead { background:transparent; border-bottom:1px solid var(--df-line); padding:14px 18px 10px!important; color:var(--df-accent); }
.gn-view .gn-df-sechead h3 { color:var(--df-accent)!important; font:700 11px/1 system-ui!important; letter-spacing:.06em; text-transform:uppercase; }
.gn-view .gn-df-sechead .gn-sec-ic { opacity:.9!important; }
.gn-view .gn-df-section .grid { row-gap:13px; }
.gn-view label { color:var(--df-muted)!important; font-weight:600!important; font-size:12px!important; margin-bottom:3px!important; }
.gn-view label .iconify { color:var(--df-faint); }
.gn-view .gn-df-section .grid > div > span { color:var(--df-ink)!important; font-size:14px; }
.gn-view .gn-df-section .grid > div a { color:var(--df-accent)!important; }
/* Interrupteur (Toggle.php) : l'état COCHÉ était invisible — `peer-checked:bg-primary` (Tailwind) n'est PAS dans le
   CSS admin précompilé → piste grise même cochée (seul le bouton glissait, ambigu). Couleur explicite OFF gris → ON
   accent, + variantes body.dark. Défini ici (feuille globale) car un <style> émis depuis le rendu du composant est
   avalé par son pipeline (Masterminds/wrapInDiv) et fuit en TEXTE. */
.gn-tgl-track { background:#cbd0da !important; transition:background-color .15s; }
.peer:checked + .gn-tgl-track { background:var(--color-primary,#4f46e5) !important; }
body.dark .gn-tgl-track { background:#3a3f4e !important; }
body.dark .peer:checked + .gn-tgl-track { background:var(--color-primary,#6366f1) !important; }
.gn-view table { border-color:var(--df-line)!important; border-radius:9px; overflow:hidden; }
.gn-view table td, .gn-view table th { border-color:var(--df-line)!important; color:var(--df-ink)!important; }
.gn-view table th { background:var(--df-panel2)!important; }

/* ════════════════════════════════════════════════════════════════════════════════════════
   SYSTÈME DE STYLE (apparence choisie par l'utilisateur) — 3 presets SOTA.
   Dimension orthogonale à la couleur (palette --color-*) et au mode (body.dark).
   Classe posée sur <body> par Alpine (uiStyle). Tokens --ui-* consommés par form/vue/DT.
   Ajouté 2026-07-29.
   ════════════════════════════════════════════════════════════════════════════════════════ */
body { /* défauts = Notion */
  --ui-radius:13px; --ui-radius-sm:9px;
  --ui-card-shadow:0 1px 3px rgba(20,22,40,.06), 0 10px 26px -14px rgba(20,22,40,.14);
  --ui-pad-y:11px; --ui-head-tracking:-.01em;
  --ui-font:system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* Notion — aéré, arrondi, ombres douces (défaut) */
body.ui-notion { --ui-radius:13px; --ui-radius-sm:9px; --ui-pad-y:11px; --ui-head-tracking:-.01em;
                 --ui-card-shadow:0 1px 3px rgba(20,22,40,.06), 0 10px 26px -14px rgba(20,22,40,.14); }
/* Linear — minimal, plat, bordures fines nettes, dense */
body.ui-linear { --ui-radius:8px;  --ui-radius-sm:6px;  --ui-pad-y:8px;  --ui-head-tracking:-.02em;
                 --ui-card-shadow:none; }
/* Retool — pro/dense, sections marquées, coins nets, compact */
body.ui-retool { --ui-radius:6px;  --ui-radius-sm:5px;  --ui-pad-y:7px;  --ui-head-tracking:-.01em;
                 --ui-card-shadow:0 1px 2px rgba(16,18,40,.06); }
/* Ombres adaptées au mode sombre */
body.dark.ui-notion { --ui-card-shadow:0 1px 3px rgba(0,0,0,.4); }
body.dark.ui-linear { --ui-card-shadow:none; }
body.dark.ui-retool { --ui-card-shadow:0 1px 2px rgba(0,0,0,.45); }

/* — Câblage : les composants lisent radius/ombre/densité/police du preset — */
.gn-df { font-family:var(--ui-font); }
.gn-df .gn-df-section, .gn-view .gn-df-section { border-radius:var(--ui-radius); box-shadow:var(--ui-card-shadow); }
body.dark .gn-df .gn-df-section, body.dark .gn-view .gn-df-section { box-shadow:var(--ui-card-shadow); }
/* Linear = plat, bordures nettes plus marquées */
body.ui-linear .gn-df .gn-df-section, body.ui-linear .gn-view .gn-df-section { border-color:var(--df-line2); }
/* Retool = look "outil pro" : bordures nettes + en-têtes de section plus affirmés + grilles compactes */
body.ui-retool .gn-df .gn-df-section, body.ui-retool .gn-view .gn-df-section { border-color:var(--df-line2); }
body.ui-retool .gn-df-sechead { background:var(--df-panel2); border-bottom-color:var(--df-line2)!important; padding-top:9px!important; padding-bottom:9px!important; }
body.ui-retool .gn-df .gn-df-section .grid { row-gap:10px; }
.gn-df-input { border-radius:var(--ui-radius-sm); padding-top:var(--ui-pad-y); padding-bottom:var(--ui-pad-y); }
select.gn-df-input { border-radius:var(--ui-radius-sm); }
.gn-df-tabs a { border-radius:var(--ui-radius-sm)!important; }
.gn-df .theme-button-primary, .gn-df button[type=submit] { border-radius:var(--ui-radius-sm)!important; }
.gn-df .form-title h2, .gn-view .form-title h2 { letter-spacing:var(--ui-head-tracking); }

/* ════════════════════════════════════════════════════════════════════════════════════════
   SWITCHER D'APPARENCE — bouton dans le footer de la sidebar (rendu par ThemeSwitcher.php),
   popover ancré au-dessus. Choix : Mode (clair/sombre) · Couleur (8 palettes) · Style (3 presets).
   ════════════════════════════════════════════════════════════════════════════════════════ */
[x-cloak] { display:none !important; }
.gn-ap { position:relative; display:block; font:13px/1.4 var(--ui-font, system-ui,-apple-system,"Segoe UI",sans-serif); }
.gn-ap-swatch { width:18px; height:18px; border-radius:6px; background:var(--color-primary,#5b5bf0); flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
/* Popover ancré au-dessus du rail (fixed => jamais rogné par un overflow de la sidebar).
   Conforme à la maquette Direction A : compact, sombre, épuré (Couleur + Style). Sombre en permanence
   pour s'accorder à la sidebar (toujours sombre, skin Style B), quel que soit le mode clair/sombre de l'app. */
.gn-ap-panel { position:fixed; left:16px; bottom:64px; width:224px; padding:14px; box-sizing:border-box; z-index:2147483000;
  background:#20232f; color:#eef0f6; border:1px solid rgba(255,255,255,.09); border-radius:14px;
  box-shadow:0 22px 55px -14px rgba(0,0,0,.62), 0 6px 16px rgba(0,0,0,.42); }
.gn-ap-label { font-weight:600; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.42); margin:13px 2px 9px; }
.gn-ap-label:first-of-type { margin-top:0; }
/* Pastilles de couleur */
.gn-ap-dots { display:grid; grid-template-columns:repeat(8,1fr); gap:7px; }
.gn-ap-dot { width:100%; aspect-ratio:1; border-radius:50%; border:0; cursor:pointer; padding:0;
  box-shadow:0 1px 2px rgba(0,0,0,.35); transition:transform .12s ease; outline-offset:2px; }
.gn-ap-dot:hover { transform:scale(1.15); }
.gn-ap-dot.is-on { transform:scale(1.06); box-shadow:0 0 0 2px #20232f, 0 0 0 4px var(--color-primary,#5b5bf0); }
/* Puces de style (texte, pas de carte) */
.gn-ap-styles { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.gn-ap-style { display:flex; align-items:center; justify-content:center; cursor:pointer; padding:8px 4px;
  background:rgba(255,255,255,.05); border:0; border-radius:9px; color:rgba(255,255,255,.6);
  font-weight:500; font-size:11px; transition:background .14s ease, color .14s ease; }
.gn-ap-style:hover { background:rgba(255,255,255,.09); color:rgba(255,255,255,.92); }
.gn-ap-style.is-on { color:#fff; background:color-mix(in srgb, var(--color-primary,#5b5bf0) 26%, transparent); }
@media (max-width:640px){ .gn-ap-panel { width:min(224px, calc(100vw - 24px)); } }

/* Apparence — variante « rail d'actions » : icônes-fantômes zéro-boîte pour le pied de sidebar (Direction A).
   Le déclencheur devient une pastille de couleur discrète + une bascule soleil/lune ; le panneau reste identique. */
.gn-ap--rail { display:flex; flex-wrap:wrap; align-items:center; gap:2px; row-gap:6px; max-width:100%; }
.gn-ap-ico { width:32px; height:32px; display:grid; place-items:center; border:0; background:transparent; border-radius:9px; cursor:pointer; color:rgba(255,255,255,.55); padding:0; transition:background .15s, color .15s; }
.gn-ap-ico:hover { background:rgba(255,255,255,.09); color:rgba(255,255,255,.92); }
.gn-ap-ico svg { width:16px; height:16px; }
.gn-ap--rail .gn-ap-swatch { width:13px; height:13px; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.18); }
.gn-ap--rail .gn-ap-panel { bottom:64px; }
/* Déclencheur ÉTIQUETÉ : pastille de couleur + « Apparence » → repérable (le point nu était introuvable). */
.gn-ap-btn { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 11px 0 9px; border:0; border-radius:9px; cursor:pointer; background:rgba(255,255,255,.06); color:rgba(255,255,255,.72); font:600 12.5px/1 var(--ui-font, system-ui,-apple-system,"Segoe UI",sans-serif); transition:background .15s, color .15s; }
.gn-ap-btn:hover { background:rgba(255,255,255,.13); color:#fff; }
.gn-ap-btn .gn-ap-swatch { width:13px; height:13px; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.22); flex:0 0 auto; }
.gn-ap-btn .gn-ap-txt { white-space:nowrap; }
/* Sélecteur de LANGUE — rail du pied de sidebar, à côté de « Apparence ». Menu déroulant natif <details> (sans JS). */
.gn-lang { position:relative; display:inline-block; }
.gn-lang-sum { display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 8px; border-radius:9px; cursor:pointer; list-style:none; user-select:none; background:rgba(255,255,255,.06); color:rgba(255,255,255,.72); font:700 12px/1 var(--ui-font, system-ui,-apple-system,"Segoe UI",sans-serif); transition:background .15s, color .15s; }
.gn-lang-sum::-webkit-details-marker { display:none; }
.gn-lang-sum::marker { content:""; }
.gn-lang-sum:hover { background:rgba(255,255,255,.13); color:#fff; }
.gn-lang-i { width:15px; height:15px; flex:0 0 auto; opacity:.8; }
.gn-lang-cav { width:12px; height:12px; opacity:.6; transition:transform .2s ease; }
.gn-lang[open] .gn-lang-cav { transform:rotate(180deg); }
/* right-aligné → s'ouvre vers la GAUCHE (reste dans la sidebar sombre, ne déborde pas sur <main>) ; z-index haut pour passer au-dessus */
.gn-lang-pop { position:absolute; bottom:calc(100% + 8px); right:0; left:auto; min-width:184px; background:#171826; border:1px solid rgba(255,255,255,.10); border-radius:12px; box-shadow:0 22px 48px -14px rgba(0,0,0,.65); padding:5px; z-index:2147483000; }
.gn-lang-opt { display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:8px; text-decoration:none; white-space:nowrap; color:rgba(255,255,255,.78); font:500 13px/1 var(--ui-font, system-ui,-apple-system,"Segoe UI",sans-serif); }
.gn-lang-opt:hover { background:rgba(255,255,255,.07); color:#fff; }
.gn-lang-chip { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:20px; padding:0 5px; border-radius:6px; background:rgba(255,255,255,.09); color:#e2e8f0; font:800 10px/1 var(--ui-font, system-ui,-apple-system,"Segoe UI",sans-serif); letter-spacing:.03em; flex:0 0 auto; }
.gn-lang-opt.is-on { color:#fff; }
.gn-lang-opt.is-on .gn-lang-chip { background:var(--color-primary,#5b5bf0); color:#fff; }
[dir="rtl"] .gn-lang-pop { right:auto; left:0; }

/* ============================================================================
   DataTable3 — FK "open record" ↗ affordance (hover, the SOLE navigation trigger) + peek drawer
   ========================================================================== */
.gn-dt3 .dt3-fkcell { display:inline-flex; align-items:center; gap:5px; max-width:100%; vertical-align:bottom; }
.gn-dt3 .dt3-fkcell .dt3-fk { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gn-dt3 .dt3-fkrel { text-decoration:none; }
.gn-dt3 .dt3-fkrel:hover { text-decoration:underline; text-underline-offset:2px; }
.gn-dt3 .dt3-fkopen { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:5px;
  color:var(--dt-muted,#8a8f98); opacity:0; transition:opacity .12s ease, background .12s ease, color .12s ease; cursor:pointer; text-decoration:none; }
.gn-dt3 .dt3-fkopen svg { width:14px; height:14px; }
.gn-dt3 td:hover .dt3-fkopen, .gn-dt3 .dt3-fkopen:focus-visible { opacity:1; }   /* reveal on cell hover / keyboard focus */
.gn-dt3 .dt3-fkopen:hover { background:var(--dt-accent-line,rgba(99,102,241,.16)); color:var(--dt-accent,#5b5bf0); }

/* peek drawer (appended to <body>, carries .gn-dt3 so the --dt-* tokens resolve) */
.dt3-fkpeek { position:fixed; inset:0; z-index:2147483000; }
.dt3-fkpeek-scrim { position:absolute; inset:0; background:rgba(20,22,40,.42); opacity:0; transition:opacity .2s ease; }
.dt3-fkpeek.open .dt3-fkpeek-scrim { opacity:1; }
.dt3-fkpeek-panel { position:absolute; top:0; right:0; height:100%; width:min(760px, 92vw); display:flex; flex-direction:column;
  background:var(--dt-panel,#fff); box-shadow:-12px 0 40px rgba(20,22,40,.28); transform:translateX(100%); transition:transform .24s cubic-bezier(.4,0,.2,1); }
.dt3-fkpeek.open .dt3-fkpeek-panel { transform:translateX(0); }
.dt3-fkpeek-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--dt-line,#e5e7eb); flex:0 0 auto; }
.dt3-fkpeek-title { font-weight:650; font-size:14px; color:var(--dt-ink,#1c1e2b); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dt3-fkpeek-full { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:8px; font-size:12.5px; font-weight:600; text-decoration:none; color:#fff; background:var(--dt-accent,#5b5bf0); flex:0 0 auto; }
.dt3-fkpeek-full svg { width:14px; height:14px; }
.dt3-fkpeek-x { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; border:none; background:transparent; color:var(--dt-muted,#8a8f98); cursor:pointer; flex:0 0 auto; }
.dt3-fkpeek-x:hover { background:var(--dt-accent-line,rgba(99,102,241,.14)); color:var(--dt-ink,#1c1e2b); }
.dt3-fkpeek-x svg { width:18px; height:18px; }
.dt3-fkpeek-body { position:relative; flex:1 1 auto; min-height:0; }
.dt3-fkpeek-frame { width:100%; height:100%; border:0; display:block; background:var(--dt-bg,#f4f5fa); }
.dt3-fkpeek-load { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--dt-muted,#8a8f98); font-size:13px; }
body.dark .dt3-fkpeek-panel { background:#14151e; box-shadow:-12px 0 40px rgba(0,0,0,.5); }
body.dark .dt3-fkpeek-head { border-color:#262838; }
body.dark .dt3-fkpeek-title { color:#e8e9f2; }
body.dark .dt3-fkpeek-frame { background:#0d0e15; }
@media (max-width:640px){ .dt3-fkpeek-panel { width:100vw; } .dt3-fkpeek-full span { display:none; } }

/* ==========================================================================
   ViewRecord · Split (openMode:"split") — master-detail « inbox » : liste à
   gauche, fiche du record sélectionné dans un volet persistant à droite.
   ========================================================================== */
.dt3-split { display:grid; grid-template-columns:minmax(320px, 42%) 1fr; gap:16px; align-items:start; }
.dt3-split.dt3-split-off { grid-template-columns:1fr; }            /* modes sans lignes (gantt/carte/…) → liste plein largeur */
.dt3-split.dt3-split-off .dt3-split-detail { display:none; }      /* …et volet détail masqué (fini l'espace blanc à droite) */
.dt3-split-list { min-width:0; }                         /* laisse la table rétrécir sans déborder */
.dt3-split-detail { position:sticky; top:12px; align-self:start; height:calc(100vh - 96px); min-width:0;
  display:flex; flex-direction:column; border:1px solid var(--dt-line,#e5e7eb); border-radius:14px; overflow:hidden;
  background:var(--dt-panel,#fff); box-shadow:0 1px 3px rgba(20,22,40,.06); }
.dt3-split-empty { flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:24px;
  color:var(--dt-muted,#8a8f98); font-size:13.5px; text-align:center; }
.dt3-split-head { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--dt-line,#e5e7eb); flex:0 0 auto; }
.dt3-split-title { font-weight:650; font-size:14px; color:var(--dt-ink,#1c1e2b); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dt3-split-full { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; color:var(--dt-muted,#8a8f98); text-decoration:none; flex:0 0 auto; }
.dt3-split-full:hover { background:var(--dt-accent-line,rgba(99,102,241,.14)); color:var(--dt-accent,#5b5bf0); }
.dt3-split-full svg { width:15px; height:15px; }
.dt3-split-body { position:relative; flex:1 1 auto; min-height:0; }
.dt3-split-frame { width:100%; height:100%; border:0; display:block; background:var(--dt-bg,#f4f5fa); }
.dt3-split-load { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--dt-muted,#8a8f98); font-size:13px; }
/* la ligne sélectionnée : liseré d'accent + fond léger, quel que soit le mode d'affichage */
.dt3-split .dt3-row-sel { background:var(--dt-accent-line,rgba(99,102,241,.10)) !important; }
.dt3-split tr.dt3-row-sel > td:first-child { box-shadow:inset 3px 0 0 var(--dt-accent,#5b5bf0); }
.dt3-split .dt3-card.dt3-row-sel, .dt3-split .dt3-gcard.dt3-row-sel, .dt3-split .dt3-lrow.dt3-row-sel,
.dt3-split .dt3-kcard.dt3-row-sel, .dt3-split .dt3-tlitem.dt3-row-sel { outline:2px solid var(--dt-accent,#5b5bf0); outline-offset:-2px; border-radius:10px; }
/* toute la ligne est cliquable en mode split */
.dt3-split .dt3-split-list tbody tr, .dt3-split .dt3-card, .dt3-split .dt3-gcard,
.dt3-split .dt3-lrow, .dt3-split .dt3-kcard, .dt3-split .dt3-tlitem { cursor:pointer; }
body.dark .dt3-split-detail { background:#14151e; border-color:#262838; box-shadow:0 1px 3px rgba(0,0,0,.4); }
body.dark .dt3-split-head { border-color:#262838; }
body.dark .dt3-split-title { color:#e8e9f2; }
body.dark .dt3-split-frame { background:#0d0e15; }
/* écran étroit : la fiche passe SOUS la liste (plus de sticky plein écran) */
@media (max-width:900px){
  .dt3-split { grid-template-columns:1fr; }
  .dt3-split-detail { position:static; height:auto; min-height:60vh; }
}

/* ==========================================================================
   ViewRecord · Summary (viewMode:"summary") — carte compacte « en un coup d'œil » :
   hero (identité + KPI) + champs à plat, resserrés, en colonne étroite ; ni onglets,
   ni tables liées, ni workflow/timeline (retirés côté PHP). Se lit d'un regard.
   ========================================================================== */
.gn-view.gn-view-summary { max-width:780px; }
.gn-view-summary .form-title { padding-bottom:10px!important; margin-bottom:12px!important; }
.gn-view-summary .gn-hero { padding:14px 16px; margin-bottom:14px; gap:11px; box-shadow:0 1px 2px rgba(20,24,40,.05); }
.gn-view-summary .gn-hero-av { width:46px; height:46px; font-size:16px; }
.gn-view-summary .gn-hero-title { font-size:18px; }
.gn-view-summary .gn-hero-kpis { padding-top:11px; gap:8px; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); }
.gn-view-summary .gn-kpi { padding:7px 10px; }
.gn-view-summary .gn-kpi-v { font-size:15px; }
/* sections plus plates et denses (carte compacte, pas un workspace) */
.gn-view-summary .gn-df-section { box-shadow:none; }
.gn-view-summary .gn-df-sechead { padding:8px 16px!important; }
.gn-view-summary .gn-df-section .grid { row-gap:9px; }
.gn-view-summary label { font-size:11px!important; margin-bottom:1px!important; }
.gn-view-summary .gn-df-section .grid > div > span { font-size:13.5px; }
body.dark .gn-view-summary .gn-hero { box-shadow:0 1px 2px rgba(0,0,0,.4); }

/* ==========================================================================
   ViewRecord · Reader (viewMode:"reader") — lecture sans distraction : colonne
   étroite CENTRÉE, grande typographie confortable, un champ par ligne comme un
   document. Pas de KPI, pas d'onglets, pas de tables liées, pas de chrome de carte.
   ========================================================================== */
.gn-view.gn-view-reader { max-width:720px; margin-left:auto; margin-right:auto; font-size:15px; }
.gn-view-reader .form-title { border:none!important; padding:0!important; margin:0 0 6px!important; }
/* en-tête = titre du document (pas une carte) ; on masque la bande KPI (métrique = chrome de dashboard, hors lecture) */
.gn-view-reader .gn-hero { border:none; box-shadow:none; background:transparent; border-radius:0; padding:6px 0 20px; margin:0 0 22px; border-bottom:1px solid var(--df-line); gap:10px; }
.gn-view-reader .gn-hero-kpis { display:none; }
.gn-view-reader .gn-hero-title { font-size:27px; line-height:1.25; letter-spacing:-.015em; }
.gn-view-reader .gn-hero-av { width:44px; height:44px; font-size:15px; }
/* les champs coulent en UN document : une seule colonne, sections à plat, généreux interligne */
.gn-view-reader .gn-df-section { border:none!important; box-shadow:none!important; background:transparent!important; }
.gn-view-reader .gn-df-sechead { background:transparent!important; border:none!important; border-bottom:1px solid var(--df-line)!important; padding:22px 0 7px!important; }
.gn-view-reader .gn-df-section .grid { grid-template-columns:1fr!important; row-gap:20px!important; column-gap:0!important; padding:16px 0!important; }
.gn-view-reader label { font-size:12px!important; letter-spacing:.03em; text-transform:uppercase; color:var(--df-faint)!important; margin-bottom:4px!important; }
.gn-view-reader .gn-df-section .grid > div > span,
.gn-view-reader .gn-df-section .grid > div a { font-size:16.5px!important; line-height:1.7; color:var(--df-ink)!important; }
/* la fiche s'aère un peu plus verticalement en lecture */
.gn-view-reader .gn-hero-btn { font-size:13px; }

/* ==========================================================================
   ViewRecord · Édition sur place (enableInlineEdit) — chaque champ scalaire
   devient éditable au clic (crayon au survol → éditeur → doUpdate). Off = neutre.
   ========================================================================== */
.gn-view-inline .gn-vr-editable { position:relative; border-radius:8px; transition:background .12s ease; }
.gn-view-inline .gn-vr-editable:hover { background:var(--df-accent-soft, rgba(99,102,241,.06)); }
.gn-view-inline .gn-vr-val { cursor:text; }
.gn-view-inline .gn-vr-editable:hover .gn-vr-val { text-decoration:underline dotted var(--df-line,#d3d7e6); text-underline-offset:3px; }
.gn-vr-pen { position:absolute; top:2px; right:2px; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:6px; background:transparent; color:var(--df-muted,#7a7f95); font-size:12px; cursor:pointer; opacity:0; transition:opacity .12s ease, background .12s ease; }
.gn-view-inline .gn-vr-editable:hover .gn-vr-pen { opacity:1; }
.gn-vr-pen:hover { background:var(--df-accent-line, rgba(99,102,241,.16)); color:var(--df-accent,#5b5bf0); }
.gn-vr-editing .gn-vr-pen { display:none; }
.gn-vr-editbox { display:flex; align-items:center; gap:6px; margin-top:2px; }
.gn-vr-input { flex:1 1 auto; min-width:0; font:inherit; font-size:14px; color:var(--df-ink,#191b26); background:var(--df-panel,#fff);
  border:1px solid var(--df-accent,#5b5bf0); border-radius:8px; padding:6px 9px; outline:none; box-shadow:0 0 0 3px var(--df-accent-soft, rgba(99,102,241,.12)); }
.gn-vr-ta { resize:vertical; line-height:1.5; }
.gn-vr-toggle { width:18px; height:18px; accent-color:var(--df-accent,#5b5bf0); cursor:pointer; }
.gn-vr-save, .gn-vr-cancel { flex:0 0 auto; width:30px; height:30px; border:1px solid var(--df-line,#d3d7e6); border-radius:8px; background:var(--df-panel,#fff);
  cursor:pointer; font-size:13px; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:background .12s, border-color .12s; }
.gn-vr-save { color:#fff; background:var(--df-accent,#5b5bf0); border-color:var(--df-accent,#5b5bf0); }
.gn-vr-save:hover { filter:brightness(1.06); }
.gn-vr-cancel { color:var(--df-muted,#7a7f95); }
.gn-vr-cancel:hover { border-color:var(--df-line2,#b9bed0); color:var(--df-ink,#191b26); }
.gn-vr-editbox.gn-vr-err .gn-vr-input { border-color:#d6435f; box-shadow:0 0 0 3px rgba(214,67,95,.14); }
.gn-vr-editbox.gn-vr-saving { opacity:.6; pointer-events:none; }
.gn-vr-msg { flex-basis:100%; color:#d6435f; font-size:12px; margin-top:3px; }
.gn-vr-editable.gn-vr-ok { background:rgba(31,157,107,.14)!important; }
.gn-vr-editable.gn-vr-ko { background:rgba(214,67,95,.14)!important; }
body.dark .gn-view-inline .gn-vr-editable:hover { background:rgba(124,124,255,.10); }
body.dark .gn-vr-input { color:#e8e9f2; background:#181a24; }
body.dark .gn-vr-save, body.dark .gn-vr-cancel { background:#181a24; border-color:#2c3140; }
body.dark .gn-vr-save { background:var(--df-accent,#7c7cff); border-color:var(--df-accent,#7c7cff); color:#0d0e15; }

/* ==========================================================================
   DataTable3 · Grille dense « saisie en masse » (enableBulkGrid) — barre d'action
   + lignes vierges éditables (teintées) pour créer plusieurs enregistrements vite.
   ========================================================================== */
.gn-dt3 .dt3-bulkentry { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 10px; margin:0 0 4px;
  border:1px solid var(--dt-accent-line,rgba(99,102,241,.3)); border-radius:10px; background:var(--dt-accent-soft,rgba(99,102,241,.06)); }
.gn-dt3 .dt3-be-title { display:inline-flex; align-items:center; gap:5px; font-weight:650; font-size:12.5px; color:var(--dt-accent,#5b5bf0); }
.gn-dt3 .dt3-be-title svg { width:14px; height:14px; }
.gn-dt3 .dt3-be-hint { margin-left:auto; font-size:11.5px; color:var(--dt-muted,#7a7f95); }
.gn-dt3 .dt3-bulkentry[data-saving="1"] { opacity:.6; pointer-events:none; }
.gn-dt3 tr.dt3-bdraft > td { background:var(--dt-accent-soft,rgba(99,102,241,.05)); }
.gn-dt3 tr.dt3-bdraft .dt3-bdnum { font-size:11px; color:var(--dt-muted,#7a7f95); font-variant-numeric:tabular-nums; }
.gn-dt3 .dt3-bded { width:100%; box-sizing:border-box; }
body.dark .gn-dt3 .dt3-bulkentry { border-color:#2c3140; background:rgba(124,124,255,.08); }
body.dark .gn-dt3 tr.dt3-bdraft > td { background:rgba(124,124,255,.06); }

/* ==========================================================================
   SOTA confirm dialog (replaces native window.confirm) + colored toasts
   Reuses .dt3-modal / .dt3-modalbox / .dt3-modalf from schema.json.
   ========================================================================== */
.dt3-cfm-portal { display:contents; }   /* no box of its own; still cascades the .gn-dt3 --dt-* tokens to the dialog */
.dt3-cfm-ov { opacity:0; transition:opacity .13s ease; }
.dt3-cfm-ov.in { opacity:1; }
.dt3-cfm-ov.leaving { opacity:0; }
.dt3-cfmbox { width:min(430px,94vw) !important; padding:20px 22px 18px !important; transform:translateY(10px) scale(.97); opacity:.4; transition:transform .16s cubic-bezier(.2,.9,.3,1.05), opacity .16s ease; }
.dt3-cfm-ov.in .dt3-cfmbox { transform:none; opacity:1; }
.dt3-cfm-row { display:flex; gap:14px; align-items:flex-start; }
.dt3-cfm-ic { flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--dt-accent,#5b5bf0) 15%, transparent); color:var(--dt-accent,#5b5bf0); }
.dt3-cfm-ic svg { width:20px; height:20px; }
.dt3-cfm-ic.danger { background:var(--dt-danger-soft, color-mix(in srgb, var(--dt-danger,#d6435f) 15%, transparent)); color:var(--dt-danger,#d6435f); }
.dt3-cfm-txt { min-width:0; padding-top:2px; }
.dt3-cfm-ttl { font-weight:650; font-size:15px; color:var(--dt-ink,#1c1e26); line-height:1.3; }
.dt3-cfm-msg { margin-top:6px; font-size:13px; color:var(--dt-muted,#8a8f98); line-height:1.45; word-break:break-word; }
.dt3-cfmbox .dt3-modalf { margin-top:20px; }
/* the danger button background/hover already ship in the DT3 theme (schema.json .dt3-btn.danger → var(--dt-danger)); only add a focus ring */
.gn-dt3 .dt3-btn.danger:focus-visible { outline:2px solid color-mix(in srgb, var(--dt-danger,#d6435f) 55%, transparent); outline-offset:2px; }
/* colored toasts — beat `.gn-dt3 .dt3-flash`, reuse theme tokens */
.gn-dt3 .dt3-flash.dt3-flash-err { background:var(--dt-danger,#d6435f); color:#fff; border-color:var(--dt-danger,#d6435f); }
.gn-dt3 .dt3-flash.dt3-flash-ok  { background:var(--dt-ok,#1f9d6b); color:#fff; border-color:var(--dt-ok,#1f9d6b); }
@media (prefers-reduced-motion: reduce){ .dt3-cfm-ov, .dt3-cfmbox { transition:none; } }

/* ============================================================================
   CANVAS BACK-OFFICE — cohérence esthétique (maquette 2026). La zone de contenu
   (<main>, enfant direct du <body class="bg-body ... flex h-screen">) devient un
   GRIS DOUX UNIFORME sur TOUTES les pages du back-office (listes, formulaires,
   fiches, dashboards) → les cartes/tableaux/formulaires flottent dessus. Le shell
   front (body SANS flex/h-screen) n'est PAS touché. Clair + sombre.
   ========================================================================== */
body.bg-body.flex.h-screen > main{ background:#eef0f5 !important; }
body.bg-body.flex.h-screen.dark > main{ background:#0d0e15 !important; }