/* ================================================================
   EUROFISCALIS — DESIGN SYSTEM v1.0.13
   ================================================================
   Import:   <link rel="stylesheet" href="assets/design-system.css">

   ⚠️ FONTS — NON EMBARQUÉES DANS CE CSS
   Ce fichier référence Fraunces + Lato + Caveat +
   JetBrains Mono via CSS variables, mais n'embarque PAS les
   @font-face. Le consommateur DOIT ajouter ce <link> :

   <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..900&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400;1,700&family=Caveat:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">

   Sans ce <link>, tout tombe en fallback Georgia/Times.

   Surfaces:
   - DEEP   #060D0E — hero, moments forts (mesh chaud)
   - DARK   #0B1517 — contenu dark (topo)
   - LIGHT  #F7FAF8 — lecture, article, docs (cross hatch)

   Cards   = glassmorphism (dark .gd  /  light .gl)
   Accent  = #5ECD8C (vert)
   Display = Fraunces | Body = Lato | Hand = Caveat | Mono = JetBrains Mono
   ================================================================ */

@layer tokens, base, components, utilities;

@layer tokens {
/* ----------------------------------------------------------------
   TOKENS
---------------------------------------------------------------- */
:root{
  /* — Surfaces dark */
  --deep:#060D0E;
  --dark:#0B1517;
  --dark2:#0E1C1E;
  --warm:#152524;

  /* — Surfaces light */
  --light:#F7FAF8;
  --light2:#EDF3EF;
  --light3:#E2EBE6;

  /* — Texte dark */
  --text:#C8D5CC;
  --muted:#7C9289;  /* AA 5.9:1 sur --deep (avant #5A7166 = 3.96:1, sous AA) */
  --head:#FFFFFF;

  /* — Texte light */
  --lt-text:#2A3C33;
  --lt-muted:#556F65;  /* AA 5.1:1 sur --light (avant #6B8578 = 3.7:1, sous AA) */
  --lt-head:#0F1E20;

  /* — Brand */
  --accent:#5ECD8C;
  --accent-2:#7DE5A8;
  --accent-dk:#1F6238;  /* vert foncé brand — AA compliant sur fond clair (>7:1 sur blanc).
                            Anciennement #2E8F52 (3.7:1, sous AA) — assombri pour passer WCAG normal text. */
  --teal:#2C5051;
  --teal2:#1A3233;

  /* — Neutres (gris vrais, sans teinte verte) */
  --n-50:#F4F5F6;
  --n-100:#E4E6E8;
  --n-200:#C9CCD0;
  --n-300:#9EA3A9;
  --n-400:#6F757C;
  --n-500:#4A4F55;
  --n-600:#2F3337;
  --n-700:#1C1F22;
  --n-800:#0E1013;

  /* — Semantic (success/warning/danger/info) */
  --success:#5ECD8C;    /* = accent, cohérent */
  --success-bg:rgba(94,205,140,0.12);
  --warning:#E2B862;    /* ambre chaud, s'accorde avec le teal */
  --warning-bg:rgba(226,184,98,0.14);
  --danger:#E07A6E;     /* corail désaturé, pas criard */
  --danger-bg:rgba(224,122,110,0.14);
  --danger-light:#FF9B9B; /* rouge plus clair, pour ✗ markers et texte "à éviter" sur fond sombre */
  --info:#7AB8C8;       /* bleu-teal cousin du brand */
  --info-bg:rgba(122,184,200,0.14);

  /* — Glass */
  --g-dk:rgba(14,28,30,0.5);
  --g-dk-b:rgba(94,205,140,0.07);
  --g-dk-b-h:rgba(94,205,140,0.18);
  --g-lt:rgba(255,255,255,0.62);
  --g-lt-b:rgba(44,80,81,0.08);
  --g-lt-b-h:rgba(44,80,81,0.2);

  /* — Strokes (bordures génériques — chips, tables, séparateurs) */
  --stroke:rgba(94,205,140,0.12);
  --stroke-muted:rgba(255,255,255,0.06);
  --stroke-lt:rgba(44,80,81,0.14);
  --stroke-muted-lt:rgba(44,80,81,0.08);

  /* — Focus ring (accessibilité clavier — :focus-visible) */
  --focus-ring:0 0 0 2px var(--deep),0 0 0 4px var(--accent);
  --focus-ring-lt:0 0 0 2px var(--light),0 0 0 4px var(--accent);

  /* — Effects */
  --blur:blur(20px) saturate(1.4);
  --glow:0 4px 24px rgba(94,205,140,0.1);
  --glow-h:0 8px 36px rgba(94,205,140,0.16);
  --sh-lt:0 4px 24px rgba(44,80,81,0.06);
  --sh-lt-h:0 12px 40px rgba(44,80,81,0.1);
  --grain-op:0.03;

  /* — Type (config figée v1.1) */
  --ff-display:'Fraunces',Georgia,serif;
  --ff-body:'Lato',system-ui,sans-serif;
  --ff-hand:'Caveat',cursive;
  --ff-em:Georgia,'Times New Roman',serif;
  --ff-mono:'JetBrains Mono','Fira Code',monospace;

  /* — Radii */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:20px;
  --r-xl:24px;
  --r-2xl:32px;
  --r-pill:9999px;

  /* — Spacing (rem-based — respectent la taille de police utilisateur)
     Base 16px : 0.25rem = 4px, 1rem = 16px, 6.25rem = 100px */
  --s-1:0.25rem; --s-2:0.5rem; --s-3:0.75rem; --s-4:1rem; --s-5:1.25rem;
  --s-6:1.5rem; --s-7:2rem; --s-8:2.5rem; --s-9:3rem; --s-10:4rem;
  --s-11:5rem; --s-12:6.25rem;

  /* — Transition */
  --tr:.35s cubic-bezier(.4,0,.2,1);

  /* — Density (tweakable) */
  --deco-opacity:1;

  /* — Layout : largeurs de conteneur (source de vérité unique).
     UNE seule largeur de site (1280px) : `.mx`, `.mx-lg` et `.footer-inner`
     la partagent, pour que header, contenu et footer s'alignent parfaitement
     sur TOUTES les pages, quel que soit le `containerSize`. `.mx` et `.mx-lg`
     sont donc désormais identiques (la distinction historique a été retirée).
     La gouttière latérale (clamp 20→48px) est portée par le conteneur INTERNE
     partout (`.mx`, `.nav .mx`, `.footer-inner`) ; les bandeaux nav/footer
     restent pleine largeur. Contenu, menu et footer sont ainsi alignés sur le
     même bord intérieur, jamais collés au bord de l'écran.
     `--w-container-sm` (.mx-sm) reste plus étroit pour les colonnes de lecture. */
  --w-container:1280px;
  --w-container-sm:880px;
  --w-container-lg:1280px;
}
}

@layer base {
/* ----------------------------------------------------------------
   RESET
---------------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff-body);
  background:var(--deep);
  color:var(--text);
  color-scheme:dark;
  font-size:1.0625rem;
  font-weight:450;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
p{font-size:1.125rem;font-weight:450;line-height:1.6;max-width:65ch}
.caption{font-size:0.875rem;line-height:1.55;color:var(--muted);letter-spacing:0.01em}
.eyebrow{font-family:var(--ff-body);font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text);font-style:normal;line-height:1}
.eyebrow.eyebrow-mono{font-family:'JetBrains Mono','Fira Code',monospace;font-size:0.625rem;font-weight:800;letter-spacing:0.18em;color:var(--muted)}
.eyebrow.eyebrow-accent{color:var(--accent)}
.lead{font-size:1.25rem;font-weight:450;line-height:1.5;color:var(--text);max-width:62ch}
body.is-light{background:var(--light);color:var(--lt-text);color-scheme:light}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit}
/* Curseur cohérent sur tous les éléments interactifs : pointer sur l'élément
   ET ses descendants (couvre le pattern « stretched link »). Les états
   désactivés gardent leur cursor:not-allowed défini par leurs composants. */
a[href],
a[href] *,
button:not(:disabled),
button:not(:disabled) *,
[role="button"]:not([aria-disabled="true"]),
[role="button"]:not([aria-disabled="true"]) *,
summary,
summary *,
label[for],
label[for] *{cursor:pointer}

/* ----------------------------------------------------------------
   FOCUS VISIBLE — accessibilité clavier (WCAG 2.4.7)
   Approche : on masque l'outline par défaut (souris, touch) et on
   affiche un double ring propre uniquement au focus clavier.
---------------------------------------------------------------- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.btn:focus-visible,.css-chip:focus-visible{
  outline:none;box-shadow:var(--focus-ring);
}
:where(.is-light, .f-light) .btn:focus-visible{box-shadow:var(--focus-ring-lt)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(94,205,140,0.22);
}
.chip:focus-visible,.label:focus-visible,.kbd:focus-visible{outline-offset:3px}
a:focus-visible{outline-offset:3px;border-radius:2px}
/* Skip-link — "Aller au contenu principal" pour sauter la nav au clavier.
   Usage : <a href="#main" class="skip-link">Aller au contenu</a> en TOUT PREMIER élément focusable du <body>. */
.skip-link{
  position:absolute;top:0;left:12px;z-index:10000;
  transform:translateY(-100%);
  padding:10px 18px;border-radius:0 0 10px 10px;
  background:var(--accent);color:var(--deep);
  font-family:var(--ff-body);font-weight:700;font-size:0.875rem;
  text-decoration:none;
  transition:transform .15s ease-out;
}
.skip-link:focus-visible,.skip-link:focus{
  transform:translateY(0);outline:none;
  box-shadow:0 4px 16px rgba(0,0,0,0.35);
}

/* ----------------------------------------------------------------
   LAYOUT
---------------------------------------------------------------- */
.mx{max-width:var(--w-container);margin:0 auto;padding-inline:clamp(20px,4vw,48px)}
.mx-sm{max-width:var(--w-container-sm);margin:0 auto;padding-inline:clamp(20px,4vw,48px)}
.mx-lg{max-width:var(--w-container-lg);margin:0 auto;padding-inline:clamp(20px,4vw,48px)}

.sec{position:relative;overflow:visible;padding:100px 0}
.sec>*{position:relative;z-index:2}
.sec-sm{padding:64px 0}
.sec-lg{padding:140px 0}
.sec-header{text-align:center;max-width:720px;margin:0 auto 56px}
.sec-header p{margin-top:14px;font-size:1rem;line-height:1.7}

/* ----------------------------------------------------------------
   TYPOGRAPHY
---------------------------------------------------------------- */
/* Fraunces display — weight 600 pour éviter la lourdeur */
h1,h2,h3,h4,h5,h6{font-family:var(--ff-display);letter-spacing:-0.025em;line-height:1.1;color:var(--head)}
:where(.is-light, .f-light) :is(h1,h2,h3,h4,h5,h6){color:var(--lt-head)}
/* Réinversion : quand une section `.f-deep`/`.f-dark` (ou `.hero` qui pose
   son propre fond gradient sombre) est imbriquée dans un `body.is-light`,
   les headings doivent reprendre la couleur prévue pour leur surface
   locale — pas celle héritée du body.
   Le sélecteur `.f-deep :is(...)` a spécificité (0,1,1) > `:where(.is-light)
   :is(...)` (0,0,1), donc il gagne quel que soit l'ordre dans la cascade. */
.f-deep :is(h1,h2,h3,h4,h5,h6),
.f-dark :is(h1,h2,h3,h4,h5,h6),
.hero :is(h1,h2,h3,h4,h5,h6){color:var(--head)}
h1{font-weight:600;font-size:clamp(2.25rem,5vw,4rem)}
h2{font-weight:600;font-size:clamp(2rem,4.4vw,3.375rem)}
h3{font-family:var(--ff-body);font-weight:700;font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.3;letter-spacing:-0.01em}
h4,h5,h6{font-family:var(--ff-body);font-weight:700;font-size:1.1875rem;line-height:1.4;letter-spacing:-0.01em}

h1 em,h2 em{
  font-family:var(--ff-em);
  /* Georgia (--ff-em) a des métriques verticales plus petites que Fraunces
     (--ff-display) à taille égale : on le grossit légèrement pour aligner
     optiquement les deux polices et égaliser la hauteur des rectangles
     ::selection dans les titres bi-police. */
  font-size:1.06em;
  font-style:italic;font-weight:400;
  background:linear-gradient(120deg,var(--accent),var(--accent-2),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* `background-clip:text` rogne la peinture sur la chasse des glyphes. En
     italique, le jambage penché du DERNIER caractère (ex. le « f » de
     « take care of ») déborde sa chasse et se fait couper à droite (bug
     WebKit/Blink). On élargit la boîte du clip ; la marge négative compense
     pour ne pas décaler le texte qui suit (cas des <em> en milieu de titre). */
  padding-right:0.28em;margin-right:-0.28em;
}
body.is-light h1 em,body.is-light h2 em,:where(.is-light,.f-light) h1 em,:where(.is-light,.f-light) h2 em{
  background:linear-gradient(120deg,var(--accent-dk),var(--accent),var(--accent-dk));
  -webkit-background-clip:text;background-clip:text;
}
/* Idem pour les <em> brand : gradient lumineux sur surface sombre,
   peu importe le mode du body. */
.f-deep :is(h1,h2) em,
.f-dark :is(h1,h2) em,
.hero :is(h1,h2) em{
  background:linear-gradient(120deg,var(--accent),var(--accent-2),var(--accent));
  -webkit-background-clip:text;background-clip:text;
}
/* Body text local à la surface (sinon le <body class="is-light"> impose
   lt-text aux paragraphes d'une section .f-deep/.f-dark/.hero imbriquée). */
.f-deep,.f-dark,.hero{color:var(--text)}
.accent{color:var(--accent)}
.hand{font-family:var(--ff-hand);font-weight:600;color:var(--accent)}
.sub{color:var(--text);font-size:1rem;line-height:1.6}
:where(.is-light, .f-light) .sub{color:var(--lt-muted)}
.f-deep .sub,.f-dark .sub,.hero .sub{color:var(--text)}
}

@layer components {
/* ----------------------------------------------------------------
   LABELS (eyebrows) — pill glass unifié
---------------------------------------------------------------- */
.label{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ff-body);
  font-size:10.5px;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;
  line-height:1;
  padding:8px 16px;border-radius:var(--r-pill);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  margin-bottom:14px;
  vertical-align:middle;
}
.label > *{line-height:1}
.label-dk{color:var(--accent);background:rgba(94,205,140,0.06);border:1px solid rgba(94,205,140,0.12)}
.label-lt{color:var(--teal);background:rgba(44,80,81,0.05);border:1px solid rgba(44,80,81,0.12)}
.label-solid{color:var(--deep);background:var(--accent);border:1px solid var(--accent)}
.label-outline{color:var(--accent);background:transparent;border:1.5px solid rgba(94,205,140,0.4)}
.label-bar{color:var(--accent);background:transparent;border:none;border-left:2px solid var(--accent);border-radius:0;padding-left:12px;padding-right:0;backdrop-filter:none}
.label-under{color:var(--accent);background:transparent;border:none;border-bottom:1px solid rgba(94,205,140,0.5);border-radius:0;padding:4px 0 6px;backdrop-filter:none}
.label-mono{font-family:'JetBrains Mono','Fira Code',monospace;letter-spacing:0.1em;font-weight:600}
.label-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;flex-shrink:0}
.label-dot.label-solid::before{background:var(--deep)}
.label-arrow::after{content:'→';font-weight:700;margin-left:2px}
/* Pin : label épinglé en haut-droite d'un conteneur position:relative (card, tile, media). Taille réduite. */
.label-pin{position:absolute;top:10px;right:10px;font-size:0.625rem;padding:3px 8px;margin:0;z-index:1}

/* Light variants — utilisent les tokens foncés (--accent-dk, --teal) pour rester lisibles sur fond clair */
:where(.is-light, .f-light) .label-outline{color:var(--accent-dk);border-color:rgba(46,143,82,0.35)}
:where(.is-light, .f-light) .label-mono{color:var(--teal)}
:where(.is-light, .f-light) .label-bar{color:var(--accent-dk);border-left-color:var(--accent-dk)}
:where(.is-light, .f-light) .label-under{color:var(--accent-dk);border-bottom-color:var(--accent-dk)}

/* ----------------------------------------------------------------
   BUTTONS
---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ff-body);font-weight:700;font-size:0.9375rem;
  border-radius:15px;padding:16px 32px;
  border:none;cursor:pointer;transition:all var(--tr);
  position:relative;
  text-decoration:none;line-height:1;
}

/* Primary (accent solid + shine) — overflow:hidden pour contenir le shine sweep */
.btn-primary{background:var(--accent);color:var(--deep);overflow:hidden}
:where(.is-light, .f-light) .btn-primary{color:var(--teal2)}
.btn-primary::before{
  content:'';position:absolute;top:-50%;left:-75%;
  width:50%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transform:skewX(-20deg);transition:left .7s;
  pointer-events:none;
}
.btn-primary:hover::before{left:130%}
.btn-primary:hover{box-shadow:var(--glow-h);transform:translateY(-2px)}

/* Ghost (outline — dark + light) */
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.12);color:var(--head)}
.btn-ghost:hover{border-color:rgba(94,205,140,0.6);color:var(--accent)}
.btn-ghost-lt{background:transparent;border:1px solid rgba(44,80,81,0.28);color:var(--teal)}
.btn-ghost-lt:hover{border-color:rgba(94,205,140,0.6);color:var(--accent)}

/* Dark solid (inverse) */
.btn-dark{background:var(--deep);color:var(--head);border:1px solid rgba(94,205,140,0.12)}
.btn-dark:hover{background:var(--warm);border-color:rgba(94,205,140,0.6);color:var(--accent)}

/* Glass (glassmorphism) */
.btn-glass{
  background:rgba(94,205,140,0.08);color:var(--accent);
  border:1px solid rgba(94,205,140,0.22);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.btn-glass:hover{background:rgba(94,205,140,0.14);border-color:rgba(94,205,140,0.4);transform:translateY(-2px)}
:where(.is-light, .f-light) .btn-glass{color:var(--teal);border-color:rgba(44,80,81,0.28)}
:where(.is-light, .f-light) .btn-glass:hover{border-color:rgba(44,80,81,0.45)}

/* Gradient (chiaroscuro accentué — relief sculpté, plus de contraste que primary) */
.btn-gradient{
  background:linear-gradient(135deg,#B7F1D1 0%,var(--accent-2) 22%,var(--accent) 55%,var(--accent-dk) 85%,#1F6037 100%);
  color:var(--deep);
}
.btn-gradient:hover{transform:translateY(-2px);filter:brightness(1.06)}
:where(.is-light, .f-light) .btn-gradient{color:var(--teal2)}

/* Holographic (dégradé aurore — palette brand : vert → teal-bleu → warm teal → vert clair) */
.btn-holographic{
  background:linear-gradient(115deg,var(--accent) 0%,var(--info) 28%,#4FA89B 50%,var(--accent-2) 72%,var(--accent) 100%);
  background-size:300% 100%;color:var(--deep);
  box-shadow:0 6px 22px rgba(79,168,155,0.28);
  animation:btn-holo 6s linear infinite;
}
@keyframes btn-holo{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.btn-holographic:hover{animation-duration:1.5s;transform:translateY(-2px);box-shadow:0 10px 32px rgba(94,205,140,0.4)}

/* Semantic (success / warning / danger / info — plein + soft) */
.btn-success{background:var(--success);color:var(--deep)}
.btn-success:hover{box-shadow:0 8px 22px rgba(94,205,140,0.35);transform:translateY(-2px)}
.btn-success-soft{background:var(--success-bg);color:var(--success);border:1px solid rgba(94,205,140,0.25)}
.btn-success-soft:hover{background:rgba(94,205,140,0.22)}

.btn-warning{background:var(--warning);color:#2b2010}
.btn-warning:hover{box-shadow:0 8px 22px rgba(226,184,98,0.35);transform:translateY(-2px)}
.btn-warning-soft{background:var(--warning-bg);color:var(--warning);border:1px solid rgba(226,184,98,0.25)}
.btn-warning-soft:hover{background:rgba(226,184,98,0.22)}

.btn-danger{background:var(--danger);color:#2a0f0c}
.btn-danger:hover{box-shadow:0 8px 22px rgba(224,122,110,0.35);transform:translateY(-2px)}
.btn-danger-soft{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(224,122,110,0.25)}
.btn-danger-soft:hover{background:rgba(224,122,110,0.22)}

.btn-info{background:var(--info);color:var(--deep)}
.btn-info:hover{box-shadow:0 8px 22px rgba(122,184,200,0.35);transform:translateY(-2px)}
.btn-info-soft{background:var(--info-bg);color:var(--info);border:1px solid rgba(122,184,200,0.25)}
.btn-info-soft:hover{background:rgba(122,184,200,0.22)}

/* Loading (spinner intégré, pointer-events désactivés) */
.btn-loading{background:var(--accent);color:var(--deep);pointer-events:none;opacity:.85}
.btn-loading::before{
  content:'';width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(6,13,14,0.3);border-top-color:var(--deep);
  animation:btn-spin .7s linear infinite;margin-right:4px;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* Success-anim (checkmark qui se dessine — état post-action) */
.btn-success-anim{background:var(--success);color:var(--deep)}
.btn-success-anim svg{width:16px;height:16px}
.btn-success-anim svg path{stroke-dasharray:22;stroke-dashoffset:22;animation:btn-draw 1s .2s forwards ease-out}
@keyframes btn-draw{to{stroke-dashoffset:0}}

/* Icon-only (carré 44x44 pour barres d'outils — taille mini WCAG) */
.btn-icon-only{width:44px;height:44px;padding:0;background:var(--g-dk);color:var(--head);border:1px solid var(--stroke)}
.btn-icon-only:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
:where(.is-light, .f-light) .btn-icon-only{background:var(--g-lt);color:var(--lt-head);border-color:var(--stroke-lt)}

/* Button group (boutons collés — seuls les coins extérieurs arrondis) */
.btn-group{display:inline-flex;align-items:stretch}
.btn-group > .btn{border-radius:0}
.btn-group > .btn:first-child{border-top-left-radius:15px;border-bottom-left-radius:15px}
.btn-group > .btn:last-child{border-top-right-radius:15px;border-bottom-right-radius:15px}
.btn-group > .btn:only-child{border-radius:15px}
/* Chevauchement propre pour les variantes outline (collapse des bordures) */
.btn-group > .btn-ghost + .btn-ghost,
.btn-group > .btn-ghost-lt + .btn-ghost-lt{margin-left:-1px}
/* Séparateur subtil entre boutons solides adjacents */
.btn-group > .btn + .btn:not(.btn-ghost):not(.btn-ghost-lt):not(.btn-link){
  box-shadow:inset 1px 0 0 rgba(6,13,14,0.18);
}
/* Modificateur square — coins extérieurs à 7px */
.btn-group.btn-group-square > .btn:first-child{border-top-left-radius:7px;border-bottom-left-radius:7px}
.btn-group.btn-group-square > .btn:last-child{border-top-right-radius:7px;border-bottom-right-radius:7px}
.btn-group.btn-group-square > .btn:only-child{border-radius:7px}
/* Tailles — sm / xs (applique padding + font + radius proportionnel aux enfants) */
.btn-group-sm > .btn{padding:11px 22px;font-size:0.8125rem}
.btn-group-sm > .btn:first-child{border-top-left-radius:11px;border-bottom-left-radius:11px}
.btn-group-sm > .btn:last-child{border-top-right-radius:11px;border-bottom-right-radius:11px}
.btn-group-sm > .btn:only-child{border-radius:11px}
.btn-group-sm.btn-group-square > .btn:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}
.btn-group-sm.btn-group-square > .btn:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}
.btn-group-sm.btn-group-square > .btn:only-child{border-radius:5px}
.btn-group-xs > .btn{padding:8px 16px;font-size:0.75rem}
.btn-group-xs > .btn:first-child{border-top-left-radius:9px;border-bottom-left-radius:9px}
.btn-group-xs > .btn:last-child{border-top-right-radius:9px;border-bottom-right-radius:9px}
.btn-group-xs > .btn:only-child{border-radius:9px}
.btn-group-xs.btn-group-square > .btn:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}
.btn-group-xs.btn-group-square > .btn:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}
.btn-group-xs.btn-group-square > .btn:only-child{border-radius:4px}
@media (pointer:coarse){
  .btn-group-sm > .btn,.btn-group-xs > .btn{min-height:44px}
}

/* Segmented group (toggle on/off — container 15px + inner 11px, cohérent avec la famille .btn) */
.btn-group-seg{display:inline-flex;background:var(--g-dk);border:1px solid var(--stroke);border-radius:15px;padding:4px;gap:2px}
.btn-group-seg button{
  background:transparent;color:var(--muted);border:none;
  padding:8px 18px;border-radius:11px;
  font-family:var(--ff-body);font-weight:600;font-size:0.8125rem;cursor:pointer;
  transition:all .25s;line-height:1;
}
.btn-group-seg button.is-on{background:var(--accent);color:var(--deep)}
.btn-group-seg button:hover:not(.is-on){color:var(--head)}
:where(.is-light, .f-light) .btn-group-seg{background:var(--g-lt);border-color:var(--stroke-lt)}
:where(.is-light, .f-light) .btn-group-seg button{color:var(--lt-muted)}
:where(.is-light, .f-light) .btn-group-seg button:hover:not(.is-on){color:var(--lt-head)}
:where(.is-light, .f-light) .btn-group-seg button.is-on{color:var(--teal2)}

/* Underline minimal (link style) */
.btn-link{
  background:transparent;color:var(--accent);padding:6px 0;border-radius:0;
  border-bottom:1.5px solid rgba(94,205,140,0.3);
  font-weight:600;
}
.btn-link:hover{border-bottom-color:var(--accent);transform:translateX(2px)}

/* Soft (tinted fill) */
.btn-soft{background:rgba(94,205,140,0.14);color:var(--accent);border:1px solid transparent}
.btn-soft:hover{background:rgba(94,205,140,0.22);border-color:rgba(94,205,140,0.25)}

/* Square (geometric, low radius) */
.btn-square{border-radius:7px}

/* Icon-trailing ("→" that shifts on hover) */
.btn-ico::after{content:'→';transition:transform .3s;display:inline-block;line-height:1}
.btn-ico:hover::after{transform:translateX(4px)}

/* Sizes */
.btn-xs{padding:8px 16px;font-size:0.75rem}
.btn-sm{padding:11px 22px;font-size:0.8125rem}
.btn-lg{padding:20px 44px;font-size:1.0625rem}
.btn-xl{padding:24px 52px;font-size:1.125rem}

/* Tap targets — WCAG 2.5.5 (AAA) / bonne pratique mobile : les cibles tactiles font ≥44x44px.
   Sur desktop pointer:fine on garde la compacité, sur mobile pointer:coarse on agrandit. */
@media (pointer:coarse){
  .btn-xs,.btn-sm{min-height:44px}
}

/* ----------------------------------------------------------------
   NAV — composant "topbar" encore utilisé dans les exemples/previews
   (la navigation principale du design system est désormais un sidebar,
    voir plus bas .ds-sidebar)
---------------------------------------------------------------- */
.nav{
  position:relative;z-index:100;
  /* Le BANDEAU reste pleine largeur (fond flouté edge-to-edge) ; la gouttière
     latérale est portée par le conteneur interne `.mx`, comme pour le contenu
     des pages. Le contenu du menu s'aligne ainsi exactement sur celui des
     sections ET du footer (tous rentrés du même padding de .mx). */
  padding:10px 0;
  background:rgba(6,13,14,0.65);
  backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);
  border-bottom:1px solid rgba(94,205,140,0.05);
}
body.is-light .nav{
  background:rgba(247,250,248,0.78);
  border-bottom:1px solid rgba(44,80,81,0.08);
}
/* Le conteneur interne du menu garde la gouttière standard de `.mx` : son
   contenu s'aligne sur l'inset des sections et du footer. */
.nav .mx{display:flex;align-items:center;justify-content:space-between}
.nav-logo{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-display);font-weight:900;font-size:1.1875rem;
  color:var(--head);letter-spacing:-0.02em;
}
body.is-light .nav-logo{color:var(--lt-head)}
.nav-logo img{height:22px;width:auto;display:block}
.nav-logo span{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none}
.nav-links a{font-size:0.8125rem;font-weight:500;color:var(--muted);transition:color .2s}
body.is-light .nav-links a{color:var(--lt-muted)}
.nav-links a:hover,.nav-links a.is-active{color:var(--accent)}
.nav-burger{display:none;background:none;border:none;cursor:pointer}
.nav-burger svg{width:24px;height:24px;color:var(--head)}
body.is-light .nav-burger svg{color:var(--lt-head)}

@media(max-width:880px){
  .nav-links{display:none}
  .nav-burger{display:block}
}

/* ----------------------------------------------------------------
   SIDEBAR — navigation principale du design system (menu latéral)
---------------------------------------------------------------- */
:root{--ds-sidebar-w:260px}

.ds-sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--ds-sidebar-w);z-index:100;
  display:flex;flex-direction:column;gap:22px;
  padding:24px 20px 28px;
  background:rgba(6,13,14,0.78);
  backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);
  border-right:1px solid rgba(94,205,140,0.08);
  overflow-y:auto;overscroll-behavior:contain;
}
body.is-light .ds-sidebar{
  background:rgba(247,250,248,0.92);
  border-right:1px solid rgba(44,80,81,0.08);
}
.ds-sidebar .nav-logo{padding:8px 8px 16px;font-size:1.375rem;flex-direction:column;align-items:center;text-align:center;gap:10px;line-height:1.15;align-self:stretch;border-bottom:1px solid rgba(94,205,140,0.12)}
.ds-sidebar .nav-logo img{height:18px}
.ds-sidebar .nav-logo span{color:var(--head)}
body.is-light .ds-sidebar .nav-logo{border-bottom-color:rgba(44,80,81,0.12)}
body.is-light .ds-sidebar .nav-logo span{color:var(--lt-head)}

.ds-sidebar-nav{display:flex;flex-direction:column;gap:22px}
.ds-sidebar-section{display:flex;flex-direction:column;gap:6px}
.ds-sidebar-title{
  font-family:var(--ff-body);font-size:0.625rem;font-weight:800;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--accent);line-height:1;
  padding:0 10px;margin-bottom:4px;
}
.ds-sidebar-section ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1px}
.ds-sidebar-section a{
  display:block;padding:7px 10px 7px 22px;border-radius:8px;
  font-size:13.5px;font-weight:500;color:var(--text);
  transition:background .15s,color .15s;
}
.ds-sidebar-section a:hover,.ds-sidebar-section a:focus-visible{color:var(--accent);background:rgba(94,205,140,0.08)}
body.is-light .ds-sidebar-section a{color:var(--lt-text)}
body.is-light .ds-sidebar-section a:hover,body.is-light .ds-sidebar-section a:focus-visible{background:rgba(44,80,81,0.06);color:var(--teal)}

/* Burger (visible uniquement en mobile) */
.ds-sidebar-toggle{
  display:none;position:fixed;top:14px;left:14px;z-index:102;
  width:42px;height:42px;align-items:center;justify-content:center;
  padding:0;border-radius:10px;cursor:pointer;
  background:rgba(6,13,14,0.85);border:1px solid rgba(94,205,140,0.16);color:var(--head);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
body.is-light .ds-sidebar-toggle{background:rgba(247,250,248,0.92);border-color:rgba(44,80,81,0.14);color:var(--lt-head)}

.ds-sidebar-backdrop{
  position:fixed;inset:0;z-index:99;
  background:rgba(0,0,0,0.5);backdrop-filter:blur(2px);
}
.ds-sidebar-backdrop[hidden]{display:none}

/* Décale tout le contenu pour laisser la place au sidebar (desktop).
   Scopé à :has(.ds-sidebar) pour ne pas polluer les pages qui chargent
   le DS CSS sans avoir de sidebar (landings, protos, emails, etc.). */
body:has(.ds-sidebar){padding-left:var(--ds-sidebar-w)}

@media(max-width:960px){
  body:has(.ds-sidebar){padding-left:0}
  .ds-sidebar-toggle{display:inline-flex}
  .ds-sidebar{
    padding-top:68px;
    transform:translateX(-100%);transition:transform .24s ease;
    box-shadow:0 24px 60px rgba(0,0,0,0.5);
  }
  .ds-sidebar.is-open{transform:translateX(0)}
}


/* ----------------------------------------------------------------
   CARD VARIANTS — styles de surface
   Applique via data-card-style sur un parent pour basculer
---------------------------------------------------------------- */

/* .card = base universelle (reset du .gd) */
.card{
  position:relative;padding:28px;border-radius:16px;
  transition:all var(--tr);overflow:hidden;
}
.card h3{font-family:var(--ff-body);font-weight:700;font-size:1.1875rem;letter-spacing:-0.01em;color:var(--head);margin-bottom:10px;line-height:1.3}
.card p{font-size:0.9375rem;line-height:1.6;color:var(--text)}
:where(.is-light, .f-light) .card h3{color:var(--lt-head)}
:where(.is-light, .f-light) .card p{color:var(--lt-text)}
/* Réinversion : sous .f-deep/.f-dark/.hero les .card retrouvent les
   couleurs de leur surface locale (le sélecteur ci-dessus a spécificité
   0,1,1 — on monte à 0,2,1 ici pour le battre). */
.f-deep .card h3,.f-dark .card h3,.hero .card h3,
.f-deep .card :is(h1,h2,h4,h5,h6),
.f-dark .card :is(h1,h2,h4,h5,h6),
.hero .card :is(h1,h2,h4,h5,h6){color:var(--head)}
.f-deep .card p,.f-dark .card p,.hero .card p{color:var(--text)}

/* 1. Glass — actuel */
.card-glass{
  background:rgba(14,28,30,0.5);border:1px solid rgba(94,205,140,0.07);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
}
.card-glass:hover{border-color:rgba(94,205,140,0.18);box-shadow:0 4px 24px rgba(94,205,140,0.1);transform:translateY(-3px)}

/* 2. Outlined — bordure seule */
.card-outline{background:transparent;border:1.5px solid rgba(94,205,140,0.18)}
.card-outline:hover{border-color:var(--accent);background:rgba(94,205,140,0.03);transform:translateY(-3px)}

/* 3. Tinted — fond accent léger */
.card-tint{
  background:linear-gradient(135deg,rgba(94,205,140,0.08) 0%,rgba(44,80,81,0.15) 100%);
  border:1px solid rgba(94,205,140,0.15);
}
.card-tint:hover{background:linear-gradient(135deg,rgba(94,205,140,0.12) 0%,rgba(44,80,81,0.2) 100%);transform:translateY(-3px)}

/* 4. Duotone — dégradé subtil + vignette */
.card-duo{
  background:radial-gradient(ellipse 100% 100% at 0% 0%,rgba(94,205,140,0.1) 0%,transparent 55%),linear-gradient(180deg,#0E1C1E,#06100F);
  border:1px solid rgba(94,205,140,0.08);
}
.card-duo:hover{border-color:rgba(94,205,140,0.2);transform:translateY(-3px)}

/* 5. Dashed — bordure handwritten */
.card-dash{background:transparent;border:1.5px dashed rgba(94,205,140,0.22)}
.card-dash:hover{border-color:var(--accent);background:rgba(94,205,140,0.04)}

/* Hover variations (combinables avec --hover-) */
.card-hover-glow:hover{box-shadow:0 0 0 1px var(--accent),0 8px 32px rgba(94,205,140,0.28)}
.card-hover-scale:hover{transform:scale(1.03)}
.card-hover-shine::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(94,205,140,0.08) 50%,transparent 70%);transform:translateX(-100%);transition:transform .7s}
.card-hover-shine:hover::before{transform:translateX(100%)}

/* ----------------------------------------------------------------
   CARD LAYOUTS — dispositions internes
---------------------------------------------------------------- */

/* Icon top */
.card-icon-top .card-icon{
  width:48px;height:48px;border-radius:12px;
  background:rgba(94,205,140,0.1);border:1px solid rgba(94,205,140,0.2);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--accent);
}

/* Icon left */
.card-icon-left{display:flex;gap:18px;align-items:flex-start}
.card-icon-left .card-icon{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;
  background:rgba(94,205,140,0.1);border:1px solid rgba(94,205,140,0.2);
  display:flex;align-items:center;justify-content:center;color:var(--accent);
}
.card-icon-left .card-body{flex:1;min-width:0}

/* Photo full-bleed */
.card-photo{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card-photo .card-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;flex-shrink:0}
.card-photo .card-body{padding:6px 24px 24px;flex:1;display:flex;flex-direction:column}
.card-photo h3{margin-top:0}

/* Numbered */
.card-step{position:relative}
.card-step .card-num{
  font-family:var(--ff-display);font-weight:300;font-style:italic;
  font-size:2.75rem;color:var(--accent);line-height:1;margin-bottom:14px;opacity:0.9;
}

/* Stat card (big number) */
.card-stat .card-stat-num{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(2.375rem,4vw,3.375rem);line-height:1;color:var(--head);letter-spacing:-0.03em;margin-bottom:8px;
}
.card-stat .card-stat-unit{color:var(--accent);font-size:0.5em;font-weight:700;vertical-align:top;margin-left:2px}
.card-stat .card-stat-lbl{font-size:0.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.12em;font-weight:700;margin-bottom:6px}

/* Minimal (no chrome) */

/* CTA at bottom — le footer vert avec flèche est toujours épinglé en bas de la card */
.card-cta{display:flex;flex-direction:column;gap:14px}
.card-cta .card-footer{margin-top:auto;padding-top:22px;border-top:1px solid rgba(94,205,140,0.08);display:flex;align-items:center;gap:6px;color:var(--accent);font-size:0.8125rem;font-weight:700}
.card-cta .card-footer::after{content:'→';transition:transform .3s}
.card-cta:hover .card-footer::after{transform:translateX(4px)}

/* Cas spécial : .card-photo + .card-cta — le footer est dans .card-body (pas direct child du .card),
   donc on force le push-to-bottom via le .card-body qui est déjà flex column via .card-photo */
.card-photo.card-cta h3{margin-bottom:8px}
.card-photo.card-cta p{margin-bottom:22px}
.card-photo.card-cta .card-footer{margin-top:auto;padding-top:22px}

/* Variante compacte de .card-photo — image full-bleed, typo et paddings réduits */
.card-photo.card-compact{padding:0;gap:10px}
.card-photo.card-compact .card-img{aspect-ratio:16/9}
.card-photo.card-compact .card-body{padding:4px 14px 14px;gap:0}
.card-photo.card-compact h3{font-size:1rem;margin-bottom:6px}
.card-photo.card-compact p{font-size:13.5px;line-height:1.55}
.card-photo.card-compact.card-cta p{margin-bottom:14px}
.card-photo.card-compact.card-cta .card-footer{padding-top:14px;font-size:0.75rem}

/* Light variants override */
:where(.is-light, .f-light) .card-outline{border-color:rgba(44,80,81,0.18)}
:where(.is-light, .f-light) .card-outline:hover{border-color:var(--teal);background:rgba(44,80,81,0.03)}
:where(.is-light, .f-light) .card-tint{
  background:linear-gradient(135deg,rgba(94,205,140,0.14) 0%,rgba(44,80,81,0.06) 100%);
  border-color:rgba(44,80,81,0.12);
}
:where(.is-light, .f-light) .card-tint:hover{
  background:linear-gradient(135deg,rgba(94,205,140,0.22) 0%,rgba(44,80,81,0.1) 100%);
}
:where(.is-light, .f-light) .card-duo{background:radial-gradient(ellipse 100% 100% at 0% 0%,rgba(94,205,140,0.12) 0%,transparent 55%),linear-gradient(180deg,#fff,#F0F5F2)}
:where(.is-light, .f-light) .card-dash{border-color:rgba(44,80,81,0.22)}

/* Padding scale */
.card-compact{padding:20px}
.card-airy{padding:40px 36px}
}

@layer utilities {
/* ----------------------------------------------------------------
   BACKGROUNDS
---------------------------------------------------------------- */
.f-deep{
  position:relative;isolation:isolate;
  background:var(--deep);
  color:var(--text);
}

.f-dark{
  position:relative;isolation:isolate;
  background:var(--dark);
  color:var(--text);
}

.f-light{
  position:relative;isolation:isolate;
  background:var(--light);
  color:var(--lt-text);
}
/* Note : les overrides .is-light/.f-light pour h1-h6 et .sub sont définis
   dans @layer base (lignes ~216 et ~235). Les dupliquer ici en utilities
   les rendrait plus prioritaires que les composants (.cta-final h2 etc.)
   et les empêcherait de poser leur propre couleur — suppression volontaire. */


/* Divider — horizontal gradient line (full-bleed) */
.divider{
  height:1px;border:none;margin:0;position:relative;z-index:5;
  background:linear-gradient(90deg,transparent 15%,rgba(94,205,140,0.15) 50%,transparent 85%);
}
/* Divider dashed — séparateur léger entre items d'une liste verticale */
.divider-dashed{
  height:0;border:none;border-top:1px dashed rgba(94,205,140,0.1);margin:24px 0;
}
body.is-light .divider-dashed,:where(.is-light,.f-light) .divider-dashed{border-top-color:rgba(44,80,81,0.1)}

/* ----------------------------------------------------------------
   BACKGROUND TEXTURES (overlays — empilables sur .f-*)
   Usage: <section class="f-deep bg-stars">...</section>
---------------------------------------------------------------- */
.bg-stars::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:calc(0.06 * var(--deco-opacity));
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><g fill='%235ECD8C'><polygon points='50,40 52,48 60,48 54,53 56,61 50,56 44,61 46,53 40,48 48,48'/><polygon points='200,110 202,118 210,118 204,123 206,131 200,126 194,131 196,123 190,118 198,118'/><polygon points='340,60 342,68 350,68 344,73 346,81 340,76 334,81 336,73 330,68 338,68'/><polygon points='120,210 122,218 130,218 124,223 126,231 120,226 114,231 116,223 110,218 118,218'/><polygon points='300,260 302,268 310,268 304,273 306,281 300,276 294,281 296,273 290,268 298,268'/><polygon points='80,330 82,338 90,338 84,343 86,351 80,346 74,351 76,343 70,338 78,338'/><polygon points='250,360 252,368 260,368 254,373 256,381 250,376 244,381 246,373 240,368 248,368'/><polygon points='380,200 382,208 390,208 384,213 386,221 380,216 374,221 376,213 370,208 378,208'/></g></svg>");
  background-size:300px 300px;
}
.bg-dots::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:var(--deco-opacity);
  background-image:radial-gradient(circle,rgba(94,205,140,0.11) 1.4px,transparent 1.4px);
  background-size:24px 24px;
}
.bg-grid::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:var(--deco-opacity);
  background-image:
    linear-gradient(rgba(94,205,140,0.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(94,205,140,0.035) 1px,transparent 1px);
  background-size:56px 56px;
}
.bg-topo::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:calc(1 * var(--deco-opacity));
  background-image:var(--topo-dark);
  background-size:1200px 900px;
  background-repeat:repeat;
}
.f-light.bg-topo::after{
  opacity:calc(0.9 * var(--deco-opacity));
  background-image:var(--topo-light);
  background-size:1200px 900px;
}
.bg-noise::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:calc(1 * var(--deco-opacity));mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
}
.bg-mint-glow::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  opacity:calc(0.9 * var(--deco-opacity));
  background-image:
    radial-gradient(ellipse 90% 75% at 10% 15%,rgba(125,229,168,0.22),transparent 70%),
    radial-gradient(ellipse 95% 80% at 90% 40%,rgba(94,205,140,0.18),transparent 70%),
    radial-gradient(ellipse 100% 85% at 65% 100%,rgba(125,229,168,0.20),transparent 70%);
}
.f-light.bg-mint-glow::before{
  opacity:calc(1 * var(--deco-opacity));
  background-image:
    radial-gradient(ellipse 90% 75% at 10% 15%,rgba(125,229,168,0.45),transparent 70%),
    radial-gradient(ellipse 95% 80% at 90% 40%,rgba(94,205,140,0.32),transparent 70%),
    radial-gradient(ellipse 100% 85% at 65% 100%,rgba(125,229,168,0.40),transparent 70%);
}
/* Light variants */
.f-light.bg-dots::after,.f-light.bg-grid::after{
  background-image:radial-gradient(circle,rgba(44,80,81,0.14) 1.4px,transparent 1.4px);background-size:24px 24px;
}
.f-light.bg-grid::after{
  background-image:
    linear-gradient(rgba(44,80,81,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(44,80,81,0.05) 1px,transparent 1px);
  background-size:56px 56px;
}

/* Halo — nappes de lumière radiales diffuses, pour donner de la profondeur
   Usage: <section class="f-deep bg-halo">...</section> */
.bg-halo::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%,rgba(44,80,81,0.2),transparent 70%),
    radial-gradient(ellipse 60% 70% at 80% 60%,rgba(94,205,140,0.05),transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 20%,rgba(26,50,51,0.3),transparent 50%);
}

/* Fade gradients — dégradé directionnel vers une surface cible
   Usage: <section class="f-deep bg-fade-dark">...</section> */
.bg-fade-dark::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,transparent 8%,var(--dark) 92%);
}
.bg-fade-deep::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,transparent 8%,var(--deep) 92%);
}
.bg-fade-light::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,transparent 8%,var(--light) 92%);
}

/* EU stars framing (cerceau visible) */
.eu-stars-bg{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:calc(0.05 * var(--deco-opacity));
  display:flex;align-items:center;justify-content:center;
}
.eu-stars-bg svg{width:min(820px,90%);height:auto}
}

@layer components {
/* ----------------------------------------------------------------
   READING / LONGFORM — tailles body optimisées recherche UX
   Basé sur: USWDS (≥16px), Baymard (≤80 CPL), Smashing (1.5 line-height)
---------------------------------------------------------------- */
.read-lg{font-size:1.25rem;line-height:1.7;max-width:62ch;color:var(--text)}
.read-md{font-size:1.125rem;line-height:1.7;max-width:65ch;color:var(--text)}
.read-sm{font-size:1rem;line-height:1.65;max-width:68ch;color:var(--text)}
.read-xs{font-size:0.875rem;line-height:1.55;max-width:72ch;color:var(--text);letter-spacing:0.005em}
.read-full{max-width:none}
:where(.is-light, .f-light) .read-lg,:where(.is-light, .f-light) .read-md,:where(.is-light, .f-light) .read-sm{color:var(--lt-text)}
:where(.is-light, .f-light) .read-xs{color:var(--lt-muted)}

.meta{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.14em;line-height:1.4}
:where(.is-light, .f-light) .meta{color:var(--lt-muted)}

.kbd{
  font-family:'JetBrains Mono','Fira Code',monospace;font-size:0.75rem;
  padding:2px 7px;border-radius:6px;
  background:rgba(94,205,140,0.08);border:1px solid rgba(94,205,140,0.18);
  color:var(--accent);
}

/* ----------------------------------------------------------------
   HERO (modulaire)
---------------------------------------------------------------- */
.hero{
  padding:140px 0 80px;position:relative;overflow:visible;
  background:
    radial-gradient(ellipse 90% 60% at 50% 35%,rgba(94,205,140,0.06),transparent 65%),   /* accent halo */
    radial-gradient(ellipse 70% 50% at 25% 55%,rgba(44,80,81,0.25),transparent 65%),     /* teal */
    radial-gradient(ellipse 60% 60% at 80% 40%,rgba(26,50,51,0.2),transparent 60%),      /* teal2 */
    linear-gradient(165deg,var(--deep) 0%,var(--dark) 25%,var(--teal2) 55%,var(--teal) 75%,var(--teal2) 100%);
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;padding:9px 22px;border-radius:var(--r-pill);
  font-size:0.6875rem;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--text);margin-bottom:32px;
  background:rgba(14,28,30,0.4);border:1px solid rgba(94,205,140,0.08);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.badge-dot{width:8px;height:8px;background:var(--accent);border-radius:50%;animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.hero-eyebrow{font-size:0.8125rem;font-weight:600;color:var(--accent);letter-spacing:0.02em;margin-bottom:8px}
.hero-sub{color:rgba(200,213,204,0.7);font-size:0.9375rem;max-width:500px;margin:0 0 24px;line-height:1.6}
.hero-sub strong{color:var(--text)}

/* ----------------------------------------------------------------
   STAT BAR (composant unifié — remplace .cf-stats)
---------------------------------------------------------------- */
.stat-bar{
  display:flex;align-items:stretch;justify-content:space-between;gap:0;
  padding:32px 28px;
  background:linear-gradient(135deg,rgba(44,80,81,0.28) 0%,rgba(14,28,30,0.55) 100%);
  border:1px solid rgba(94,205,140,0.14);border-radius:var(--r-xl);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 12px 40px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.04);
  position:relative;overflow:hidden;
}
.stat-bar::before{
  content:'';position:absolute;top:-1px;left:25%;right:25%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.stat{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 14px;position:relative;z-index:1}
.stat-num{
  font-family:var(--ff-display);font-weight:900;
  font-size:clamp(1.75rem,3.2vw,2.625rem);color:var(--head);line-height:1;letter-spacing:-0.03em;
  display:inline-flex;align-items:baseline;gap:4px;
}
.stat-plus,.stat-unit{font-size:0.55em;color:var(--accent);font-weight:800}
.stat-lbl{font-size:0.6875rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.12em;margin-top:12px;line-height:1.5}
.stat-sep{width:1px;background:linear-gradient(180deg,transparent,rgba(94,205,140,0.22),transparent);align-self:stretch;flex-shrink:0}

@media(max-width:880px){
  .stat-bar{flex-direction:column;gap:22px;padding:26px 22px}
  .stat-sep{width:60%;height:1px;align-self:center;background:linear-gradient(90deg,transparent,rgba(94,205,140,0.22),transparent)}
}

/* ----------------------------------------------------------------
   LOGO WALL (container unifié)
---------------------------------------------------------------- */
.logos-box{
  position:relative;max-width:1000px;margin:0 auto;padding:36px 40px;border-radius:var(--r-2xl);
  background:linear-gradient(180deg,rgba(20,40,42,0.5) 0%,rgba(15,30,32,0.7) 50%,rgba(30,60,55,0.45) 100%);
  border:1px solid rgba(94,205,140,0.1);
  backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);
  box-shadow:0 32px 80px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.04);
}
.logos-box::before{
  content:'';position:absolute;bottom:-1px;left:15%;right:15%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(94,205,140,0.4),transparent);
}
.logos-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:22px 10px}
.logo-cell{display:flex;align-items:center;justify-content:center;min-height:42px;position:relative;padding:0 6px}
.logo-cell img{
  max-height:32px;max-width:100%;width:auto;object-fit:contain;
  filter:grayscale(1) brightness(0) invert(1) opacity(0.82);
  transition:filter .3s,opacity .3s;
}
.logo-cell:hover img{filter:grayscale(0) opacity(1)}
.logo-cell:not(:nth-child(7n))::after{
  content:'';position:absolute;right:-6px;top:50%;width:3px;height:3px;border-radius:50%;
  background:rgba(94,205,140,0.3);transform:translateY(-50%);
}
@media(max-width:1024px){.logos-grid{grid-template-columns:repeat(4,1fr)}.logo-cell:not(:nth-child(7n))::after{display:none}.logo-cell:not(:nth-child(4n))::after{content:'';position:absolute;right:-6px;top:50%;width:3px;height:3px;border-radius:50%;background:rgba(94,205,140,0.3);transform:translateY(-50%)}.logos-box{padding:30px 24px}}
@media(max-width:640px){.logos-grid{grid-template-columns:repeat(3,1fr);gap:20px 10px}.logo-cell:not(:nth-child(4n))::after{display:none}.logo-cell:not(:nth-child(3n))::after{content:'';position:absolute;right:-6px;top:50%;width:3px;height:3px;border-radius:50%;background:rgba(94,205,140,0.3);transform:translateY(-50%)}}

/* ----------------------------------------------------------------
   TEAM CARD
---------------------------------------------------------------- */
.team-card{
  position:relative;text-align:left;padding:20px;border-radius:var(--r-lg);
  background:var(--g-dk);border:1px solid var(--g-dk-b);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  transition:all var(--tr);
}
.team-card:hover{border-color:var(--g-dk-b-h);transform:translateY(-4px)}
.team-photo{width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;margin-bottom:16px;position:relative}
.team-photo img{width:100%;height:100%;object-fit:cover}
.team-name{font-family:var(--ff-display);font-weight:800;font-size:1.1875rem;color:var(--head);margin-bottom:2px;letter-spacing:-0.02em}
.team-role{font-size:0.8125rem;color:var(--accent);font-weight:600;letter-spacing:0.02em}

/* ----------------------------------------------------------------
   CTA FINAL (bloc unifié fin de page)
---------------------------------------------------------------- */
.cta-final{
  position:relative;padding:72px 56px;border-radius:var(--r-2xl);overflow:hidden;
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%,rgba(94,205,140,0.15),transparent 65%),
    radial-gradient(ellipse 50% 80% at 80% 50%,rgba(44,80,81,0.35),transparent 60%),
    linear-gradient(135deg,#0D1F21,#15332F);
  border:1px solid rgba(94,205,140,0.14);
  box-shadow:0 24px 64px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.04);
  text-align:center;
}
.cta-final h2{max-width:740px;margin:0 auto 16px;color:var(--head)}
.cta-final p{color:var(--text);max-width:600px;margin:0 auto 32px;font-size:1rem;line-height:1.6}
.cta-final-btns{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center}
@media(max-width:640px){.cta-final{padding:48px 28px}}

/* ----------------------------------------------------------------
   HANDTAG (étiquettes handwritten — à utiliser avec parcimonie)
---------------------------------------------------------------- */
.handtag{position:absolute;z-index:7;pointer-events:none;white-space:nowrap;opacity:var(--deco-opacity)}
.handtag-text{font-family:var(--ff-hand);font-weight:600;font-size:1.125rem;color:var(--accent);line-height:1.2}
.handtag-text span{display:block;font-size:0.875rem;color:rgba(94,205,140,0.6)}
.handtag svg{display:block;color:var(--accent);opacity:0.7}

/* ----------------------------------------------------------------
   EU STARS + BACKGROUND ELEMENTS
---------------------------------------------------------------- */
.eu-stars{position:absolute;z-index:0;pointer-events:none;opacity:calc(0.022 * var(--deco-opacity))}
.eu-stars svg{width:100%;height:100%}

/* ----------------------------------------------------------------
   ARTICLE (light) — typo lecture
---------------------------------------------------------------- */
.prose{max-width:720px;margin:0 auto;color:var(--lt-text)}
.prose p{font-size:1.125rem;line-height:1.7;margin-bottom:22px}
.prose h2{font-size:clamp(1.875rem,3vw,2.5rem);margin:48px 0 20px;color:var(--lt-head)}
.prose h3{font-family:var(--ff-body);font-weight:700;font-size:1.75rem;letter-spacing:-0.01em;margin:36px 0 14px;color:var(--lt-head)}
.prose a{color:var(--teal);border-bottom:1px solid rgba(44,80,81,0.25);transition:all .2s}
.prose a:hover{color:var(--accent);border-color:var(--accent)}
.prose ul,.prose ol{margin:0 0 22px 22px}
.prose li{margin-bottom:8px;font-size:1.125rem;line-height:1.65}
.prose strong{color:var(--lt-head);font-weight:700}
.prose blockquote{
  margin:30px 0;padding:22px 28px;border-left:3px solid var(--accent);
  background:rgba(94,205,140,0.05);border-radius:0 14px 14px 0;
  font-size:1.125rem;font-style:italic;color:var(--lt-text);
}

/* Blocs "insertions" dans un article — encarts visuels qui interrompent le
   flow textuel. Plus d'air qu'un paragraphe (22px) pour marquer la rupture. */
.prose > .table-wrap,
.prose > figure{margin:30px 0}

/* ─── Callouts d'expertise dans .prose ──────────────────────────────────
   Variante éditoriale du composant .alert quand il vit à l'intérieur d'un
   contexte rédactionnel (.prose) : layout grid icône+contenu, fond teinté
   doux, sans bordure ni ombre. Les couleurs `--alert-c` / `--alert-c-soft`
   sont AA-compliant (≥6:1) sur leur fond teinté à 10%.
   Convention éditoriale : default = success (vert), warn = ambre,
   danger = rouge, info = bleu. */
.prose .alert{
  --alert-c:#1f6238;
  --alert-c-soft:rgba(46,143,82,0.10);
}
.prose .alert.alert-warn{
  --alert-c:#8a5202;
  --alert-c-soft:rgba(217,119,6,0.10);
}
.prose .alert.alert-danger{
  --alert-c:#8a1414;
  --alert-c-soft:rgba(220,38,38,0.10);
}
.prose .alert.alert-info{
  --alert-c:#1e3a8a;
  --alert-c-soft:rgba(37,99,235,0.10);
}
.prose aside.alert{
  display:grid;
  grid-template-columns:24px 1fr;
  gap:14px;
  padding:22px 26px;
  margin:24px 0;
  background:var(--alert-c-soft);
  border:0;
  border-radius:14px;
  box-shadow:none;
}
.prose aside.alert .alert-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  background:transparent;
  color:var(--alert-c);
}
.prose aside.alert .alert-icon svg{
  width:22px;
  height:22px;
}
.prose aside.alert .alert-title{
  display:block;
  font-size:1rem;
  font-weight:700;
  line-height:24px;
  color:var(--alert-c);
  margin:0 0 8px;
}
.prose aside.alert .alert-body{
  font-size:0.97rem;
  line-height:1.6;
  color:#1f2937;
}
/* Sans cet override, .prose p { margin-bottom: 22px } fait sauter l'aération
   interne du callout. On rétablit un espace propre uniquement entre <p>
   consécutifs dans le corps de l'alerte. */
.prose .alert-body p{margin:0}
.prose .alert-body p + p{margin-top:10px}

/* Blockquote variants — à combiner : <blockquote class="q-lit|q-card"> dans .prose */

/* 1. Éditorial — guillemet décoratif, sans fond */
.prose blockquote.q-lit{
  background:transparent;border:none;border-radius:0;
  padding:8px 0 8px 48px;margin:32px 0;
  font-family:var(--ff-em);font-style:italic;font-size:1.25rem;line-height:1.6;
  color:var(--lt-text);position:relative;
}
.prose blockquote.q-lit::before{
  content:'\201C';position:absolute;top:-6px;left:0;
  font-family:var(--ff-display);font-weight:400;font-style:normal;
  font-size:4rem;line-height:1;color:var(--accent);opacity:0.5;
}

/* 2. Card — pour témoignages avec attribution (<footer>) */
.prose blockquote.q-card{
  background:rgba(44,80,81,0.04);border:1px solid rgba(44,80,81,0.1);
  border-left:1px solid rgba(44,80,81,0.1);border-radius:16px;
  padding:24px 28px 24px 62px;margin:30px 0;
  font-style:normal;color:var(--lt-text);position:relative;
}
.prose blockquote.q-card::before{
  content:'\201C';position:absolute;top:16px;left:22px;
  font-family:var(--ff-display);font-weight:400;
  font-size:2.375rem;line-height:1;color:var(--accent);opacity:0.7;
}
.prose blockquote.q-card footer{
  font-size:0.875rem;color:var(--lt-muted);margin-top:12px;font-style:normal;
}
.prose blockquote.q-card footer::before{content:'— '}

/* Variantes dark (combiner avec .prose-dark) */
.prose-dark blockquote.q-lit{color:var(--text);background:transparent}
.prose-dark blockquote.q-card{
  background:rgba(94,205,140,0.06);border-color:rgba(94,205,140,0.15);color:var(--text);
}
.prose-dark blockquote.q-card footer{color:var(--muted)}

/* .prose-dark — variant pour fond sombre (CTA éditoriale, doc dark) */
.prose-dark{color:var(--text)}
.prose-dark h2,
.prose-dark h3{color:var(--head)}
.prose-dark strong{color:var(--head)}
.prose-dark a{color:var(--accent);border-bottom-color:rgba(94,205,140,0.3)}
.prose-dark a:hover{color:var(--accent);border-color:var(--accent)}
.prose-dark blockquote{
  background:rgba(94,205,140,0.08);color:var(--text);
}

/* ----------------------------------------------------------------
   FORM (contact)
---------------------------------------------------------------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:0.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;
  background:rgba(14,28,30,0.5);
  border:1px solid rgba(94,205,140,0.1);
  border-radius:12px;color:var(--head);
  font-family:var(--ff-body);font-size:14.5px;
  transition:border-color .2s,background .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(94,205,140,0.22);
}
.field textarea{min-height:120px;resize:vertical}
:where(.is-light, .f-light) .field input,:where(.is-light, .f-light) .field textarea,:where(.is-light, .f-light) .field select{
  background:#fff;border:1px solid rgba(44,80,81,0.14);color:var(--lt-head);
}

/* ----------------------------------------------------------------
   ANIMATIONS
---------------------------------------------------------------- */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(15px,-15px) scale(1.04)}}
.aurora{position:absolute;border-radius:50%;pointer-events:none;filter:blur(90px);animation:float 10s ease-in-out infinite;z-index:0;opacity:var(--deco-opacity)}
}

@layer utilities {
/* ----------------------------------------------------------------
   UTILITIES
---------------------------------------------------------------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.flex{display:flex}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}
.text-center{text-align:center}
.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}

/* ============================================
   INLINE CODE — .icode (pour prose et doc inline)
   ============================================ */
.icode{
  font-family:var(--ff-mono);font-size:0.8125rem;
  color:var(--accent);background:rgba(94,205,140,0.06);
  padding:2px 6px;border-radius:4px;letter-spacing:-0.01em;
}
.icode-sm{font-size:0.6875rem;padding:1px 5px}
/* .icode-lt-* — variantes pour fond light (4 styles selon l'intention) */
.icode-lt{color:var(--teal);background:rgba(94,205,140,0.14);border:none}
.icode-lt-solid{color:#E8F3EC;background:var(--teal);border:1px solid var(--teal);padding:2px 7px}
.icode-lt-neutral,.font-table code.icode-lt-neutral{color:#2F3337;background:#E4E6E8;border:none;font-family:var(--ff-mono)}
.icode-muted{color:var(--muted);background:transparent;padding:0}

/* Bloc de code — style terminal */
.code{display:block;position:relative;padding:34px 20px 18px;background:#0E1013;border:1px solid rgba(201,204,208,0.08);border-radius:8px;font-family:var(--ff-mono);font-size:0.6875rem;color:#9EA3A9;line-height:1.7;overflow-x:auto;letter-spacing:-0.01em;white-space:pre;margin:6px 0}
.code::before{content:"";position:absolute;top:10px;left:14px;width:10px;height:10px;border-radius:50%;background:#E07A6E;box-shadow:16px 0 0 #E2B862,32px 0 0 #5ECD8C}
.code::after{content:"";position:absolute;top:26px;left:0;right:0;height:1px;background:rgba(201,204,208,0.08)}
/* Barre de fenêtre figée pendant le scroll horizontal. .code porte à la fois le
   scroll (overflow-x:auto ci-dessus) ET les décorations en position:absolute
   (::before/::after) → quand le code déborde, la barre défile avec lui. Fix en
   deux couches : si le contenu est enveloppé dans .code-body, .code cesse de
   scroller (barre figée) et le scroll passe à la couche interne. Le :has() garde
   le markup historique (contenu direct dans .code) scrollable tel quel. */
.code:has(>.code-body){overflow:hidden}
.code>.code-body{display:block;overflow-x:auto;white-space:pre}

/* .font-table — utilitaire doc uniquement, défini dans design-system-doc.css */

/* ============================================
   CHIP — étiquette compacte pour meta/tags inline
   (plus discret qu'un .label, pour listes et tables)
   ============================================ */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--r-pill);
  background:rgba(94,205,140,0.08);color:var(--accent);
  font-size:0.6875rem;font-weight:600;letter-spacing:0.04em;
  border:1px solid rgba(94,205,140,0.18);
  line-height:1;height:22px;
  white-space:nowrap;
}
/* Variantes sémantiques (.chip = success par défaut) */
.chip-success{background:var(--success-bg);color:var(--success);border-color:rgba(94,205,140,0.3)}
.chip-info{background:var(--info-bg);color:var(--info);border-color:rgba(122,184,200,0.3)}
.chip-warn{background:var(--warning-bg);color:var(--warning);border-color:rgba(226,184,98,0.3)}
.chip-danger{background:var(--danger-bg);color:var(--danger);border-color:rgba(224,122,110,0.3)}
.chip-neutral{background:rgba(255,255,255,0.04);color:var(--text);border-color:var(--stroke)}
.chip-muted{background:transparent;color:var(--muted);border-color:var(--stroke)}

/* Modifier .chip-dot — pastille pleine au début (couleur = couleur du chip) */
.chip-dot::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:currentColor;flex-shrink:0;
}

/* Modifier .chip-solid — fond plein + texte foncé */
.chip-solid{color:var(--deep);border:transparent}
.chip-solid:not([class*="chip-info"]):not([class*="chip-warn"]):not([class*="chip-danger"]):not([class*="chip-neutral"]):not([class*="chip-muted"]){background:var(--accent)}
.chip-solid.chip-info{background:var(--info);color:var(--deep)}
.chip-solid.chip-warn{background:var(--warning);color:var(--deep)}
.chip-solid.chip-danger{background:var(--danger);color:var(--head)}
.chip-solid.chip-neutral{background:var(--n-300);color:var(--n-800)}
.chip-solid.chip-muted{background:var(--n-500);color:var(--head)}

/* Tailles */
.chip-xs{padding:3px 8px;font-size:0.625rem;height:18px;gap:4px;letter-spacing:0.03em}
.chip-xs.chip-dot::before{width:5px;height:5px}

/* Chips fond light — adaptations */
.chip-lt{background:rgba(94,205,140,0.12);color:var(--accent-dk);border-color:rgba(46,143,82,0.3)}
.chip-neutral-lt{background:rgba(15,30,32,0.04);color:var(--lt-text);border-color:rgba(44,80,81,0.15)}
.chip-muted-lt{background:transparent;color:var(--lt-muted);border-color:rgba(44,80,81,0.15)}

@media(max-width:880px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .sec{padding:72px 0}
  .hero{padding:110px 0 60px}
}

/* ----------------------------------------------------------------
   REDUCED MOTION — respect de prefers-reduced-motion (WCAG 2.3.3)
   Coupe les animations infinies et les transitions longues pour
   les utilisateurs sensibles (vestibular disorders, troubles focus).
---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .aurora,.badge-dot{animation:none !important}
  .btn-primary::before,.card-hover-shine::before{display:none}
  /* On conserve le hover :translateY des boutons/cards (utilité feedback)
     mais on réduit la durée via la règle globale ci-dessus. */
}
}

@layer components {
/* ----------------------------------------------------------------
   FOOTER — 2 patterns (.footer = A, standard 4 cols / .footer-mega = C, 6 cols + mini-CTA)
---------------------------------------------------------------- */
.footer,.footer-mega{
  position:relative;background:var(--deep);color:var(--muted);
  border-top:1px solid rgba(94,205,140,0.08);
  padding-block:var(--s-11) var(--s-6);
}
/* Bandeau pleine largeur ; la gouttière est portée par le conteneur interne
   (comme `.mx` et `.nav .mx`) → le contenu du footer s'aligne sur l'inset des
   sections et du menu. */
.footer-inner{max-width:var(--w-container);margin:0 auto;padding-inline:clamp(20px,4vw,48px)}

/* Grilles de colonnes */
.footer-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:32px;margin-bottom:var(--s-9)}
.footer-grid-lg{display:grid;grid-template-columns:repeat(6,1fr);gap:28px;margin-bottom:var(--s-9)}
.footer-brand-col{padding-right:16px}
.footer-logo{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px}
.footer-logo img{height:24px;width:auto;display:block}
.footer-logo span{color:var(--accent);font-family:var(--ff-display);font-weight:900;font-size:1.125rem;letter-spacing:-0.02em}
.footer-baseline{color:var(--muted);font-size:0.8125rem;line-height:1.55;max-width:280px;font-style:italic}

/* Colonnes */
.footer-col-title{
  font-family:var(--ff-body);font-size:10.5px;font-weight:800;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;line-height:1;
}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:13.5px;color:var(--muted);transition:color .15s;line-height:1.4;display:inline-block}
.footer-col a:hover{color:var(--accent)}

/* Mini-CTA du footer-mega (discret — une barre en haut du footer) */
.footer-mini-cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:18px 24px;margin-bottom:var(--s-9);
  background:rgba(94,205,140,0.04);
  border:1px solid rgba(94,205,140,0.12);
  border-radius:var(--r-lg);
}
.footer-mini-cta-text{color:var(--text);font-size:14.5px;font-weight:500}
.footer-mini-cta-text strong{color:var(--head);font-weight:700}

/* Bottom bar */
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:20px 24px;align-items:center;justify-content:space-between;
  padding-top:var(--s-6);
  border-top:1px solid rgba(94,205,140,0.08);
}
.footer-bottom-left,.footer-bottom-right{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.footer-copy{font-size:0.75rem;color:var(--muted)}
.footer-phone{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.footer-phone:hover{color:var(--accent)}
.footer-phone::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:0.6}

/* Certif badges */
.footer-certifs{display:flex;flex-wrap:wrap;gap:8px}
.footer-certif{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:var(--r-pill);
  background:rgba(94,205,140,0.05);border:1px solid rgba(94,205,140,0.12);
  font-size:0.6875rem;font-weight:600;color:var(--muted);letter-spacing:0.02em;
}
.footer-certif::before{content:'✓';color:var(--accent);font-weight:800;font-size:0.625rem}

/* Sélecteur de langue */
.footer-lang{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(94,205,140,0.04);border:1px solid rgba(94,205,140,0.1);
  font-size:0.75rem;color:var(--muted);cursor:pointer;
  transition:all .15s;font-family:var(--ff-body);font-weight:600;letter-spacing:0.04em;
}
.footer-lang:hover{color:var(--accent);border-color:rgba(94,205,140,0.24)}
.footer-lang svg{transition:transform .2s}

/* Social icons */
.footer-social{display:flex;gap:8px}
.footer-social a{
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(94,205,140,0.04);border:1px solid rgba(94,205,140,0.1);
  color:var(--muted);transition:all .2s;
}
.footer-social a:hover{color:var(--accent);border-color:rgba(94,205,140,0.28);background:rgba(94,205,140,0.08);transform:translateY(-2px)}
.footer-social svg{width:15px;height:15px}

/* Responsive */
@media(max-width:1024px){
  .footer-grid-lg{grid-template-columns:repeat(4,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand-col{grid-column:1/-1;padding-right:0;margin-bottom:8px}
}
@media(max-width:640px){
  .footer-grid,.footer-grid-lg{grid-template-columns:repeat(2,1fr);gap:24px 16px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}
@media(max-width:400px){
  .footer-grid,.footer-grid-lg{grid-template-columns:1fr}
}

/* ----------------------------------------------------------------
   ALERT — bannière / callout sémantique
   Structure : .alert > .alert-icon + .alert-body (+.alert-title, .alert-actions) + .alert-close
   Variantes sémantiques : .alert-success (défaut) · .alert-info · .alert-warn · .alert-danger
   Modifiers : .alert-compact (1 ligne) · .alert-rich (titre + actions)
---------------------------------------------------------------- */
.alert{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border-radius:var(--r-md);
  background:var(--success-bg);
  border:1px solid rgba(94,205,140,0.2);border-left:3px solid var(--success);
  color:var(--text);font-size:0.875rem;line-height:1.55;
}
.alert-icon{flex-shrink:0;width:20px;height:20px;color:var(--success);margin-top:1px}
.alert-icon svg{width:100%;height:100%;display:block}
.alert-body{flex:1;min-width:0}
.alert-title{display:block;font-weight:700;color:var(--head);margin-bottom:3px;font-size:0.875rem;letter-spacing:-0.01em}
.alert-actions{display:inline-flex;flex-wrap:wrap;gap:16px;margin-top:10px;align-items:center}
.alert-actions a,.alert-actions button{
  color:var(--success);font-weight:600;font-size:0.8125rem;cursor:pointer;
  background:none;border:none;padding:0;transition:color .15s;font-family:inherit;
}
.alert-actions a:hover,.alert-actions button:hover{text-decoration:underline}
.alert-close{
  margin-left:8px;background:none;border:none;color:currentColor;opacity:0.5;
  cursor:pointer;padding:2px 6px;line-height:1;font-size:1.125rem;
  transition:opacity .15s;flex-shrink:0;font-family:inherit;
}
.alert-close:hover{opacity:1}
.alert[hidden]{display:none}

/* Variantes sémantiques */
.alert-info{background:var(--info-bg);border-color:rgba(122,184,200,0.22);border-left-color:var(--info)}
.alert-info .alert-icon,.alert-info .alert-actions a,.alert-info .alert-actions button{color:var(--info)}
.alert-warn{background:var(--warning-bg);border-color:rgba(226,184,98,0.24);border-left-color:var(--warning)}
.alert-warn .alert-icon,.alert-warn .alert-actions a,.alert-warn .alert-actions button{color:var(--warning)}
.alert-danger{background:var(--danger-bg);border-color:rgba(224,122,110,0.24);border-left-color:var(--danger)}
.alert-danger .alert-icon,.alert-danger .alert-actions a,.alert-danger .alert-actions button{color:var(--danger)}

/* Modifiers tailles */
.alert-compact{padding:10px 14px;font-size:0.8125rem;align-items:center}
.alert-compact .alert-body{margin:0}
.alert-rich{padding:18px 20px;gap:14px}
.alert-rich .alert-icon{width:22px;height:22px}
.alert-rich .alert-title{font-size:0.9375rem;margin-bottom:4px}

/* Fond light — ajustement couleurs texte */
:where(.is-light, .f-light) .alert{color:var(--lt-text)}
:where(.is-light, .f-light) .alert-title{color:var(--lt-head)}

/* ----------------------------------------------------------------
   AVATAR — photo, initiales, status dot, stack
   Tailles : .avatar-xs (20) · -sm (28) · -md (40, défaut) · -lg (56) · -xl (80)
   Fallback : initiales avec couleur algorithmique (.avatar-c1..c6)
   Status : .avatar-status + .avatar-status-[online|busy|offline]
---------------------------------------------------------------- */
.avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  border-radius:50%;
  background:#3A4247;color:#fff;
  font-family:var(--ff-body);font-weight:700;font-size:0.875rem;
  overflow:hidden;position:relative;flex-shrink:0;user-select:none;
  letter-spacing:-0.02em;text-transform:uppercase;line-height:1;
  /* Glass border — lit bien sur photo comme sur initiales */
  border:1px solid rgba(94,205,140,0.2);
  box-sizing:border-box;
}
:where(.is-light, .f-light) .avatar{border-color:rgba(44,80,81,0.16)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* Tailles */
.avatar-xs{width:20px;height:20px;font-size:0.5625rem}
.avatar-sm{width:28px;height:28px;font-size:0.6875rem}
.avatar-md{width:40px;height:40px;font-size:0.875rem}
.avatar-lg{width:56px;height:56px;font-size:1.25rem}
.avatar-xl{width:80px;height:80px;font-size:1.75rem}

/* Palette algo — 6 tons opaques dérivés de la palette, texte blanc (lisible fond dark comme light) */
.avatar-c1{background:#3E8F5F;color:#fff}   /* accent vert mid-tone */
.avatar-c2{background:#5A8A99;color:#fff}   /* info bleu-teal */
.avatar-c3{background:#A37F3E;color:#fff}   /* warn ambre */
.avatar-c4{background:#3A5E5E;color:#fff}   /* teal brand plus clair */
.avatar-c5{background:#565B62;color:#fff}   /* neutre */
.avatar-c6{background:#2F7344;color:#fff}   /* accent-dk */

/* Status dot (overlay bottom-right) — bordure matche la surface ambiante */
.avatar-status::after{
  content:'';position:absolute;bottom:0;right:0;
  width:30%;height:30%;min-width:8px;min-height:8px;border-radius:50%;
  border:2px solid var(--deep);
  background:var(--n-400);
}
.avatar-status-online::after{background:var(--success)}
.avatar-status-busy::after{background:var(--warning)}
.avatar-status-offline::after{background:var(--n-400)}
:where(.is-light, .f-light) .avatar-status::after{border-color:var(--light)}

/* Stack (avatars empilés — overlap serré, bordure transparente = réserve l'espace sans anneau visible) */
.avatar-stack{display:inline-flex;align-items:center}
.avatar-stack .avatar{border:2px solid transparent;margin-left:-16px}
.avatar-stack .avatar:first-child{margin-left:0}
.avatar-stack .avatar-xs{margin-left:-8px;border-width:1.5px}
.avatar-stack .avatar-sm{margin-left:-12px}
.avatar-stack .avatar-lg{margin-left:-22px}
.avatar-stack .avatar-xl{margin-left:-30px}

/* +N more (fin de stack — opaque, neutre) */
.avatar-more{
  background:#2A2E33;color:var(--text);
  font-weight:600;letter-spacing:0;text-transform:none;
  font-size:0.75rem;
}
:where(.is-light, .f-light) .avatar-more{background:#E4E6E8;color:#2F3337}

/* ----------------------------------------------------------------
   FORM CONTROLS — toggle (switch) · checkbox · radio
   Pattern : <label> enveloppe un <input class="sr-only"> + un visuel custom + le texte du label.
   L'input garde toute l'accessibilité native (focus clavier, form submission, ARIA).
---------------------------------------------------------------- */

/* Utility : input natif masqué mais accessible au clavier / screen reader */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Wrapper commun aux 3 contrôles */
.switch, .checkbox, .radio{
  display:inline-flex;align-items:center;gap:10px;
  cursor:pointer;user-select:none;font-size:0.875rem;color:var(--text);
  line-height:1.4;
}
.switch-label, .checkbox-label, .radio-label{line-height:1.4;display:inline-block}
.switch:has(input:disabled), .checkbox:has(input:disabled), .radio:has(input:disabled){
  cursor:not-allowed;opacity:0.5;
}
:where(.is-light, .f-light) .switch, :where(.is-light, .f-light) .checkbox, :where(.is-light, .f-light) .radio,

:where(.is-light, .f-light) .switch, :where(.is-light, .f-light) .checkbox, :where(.is-light, .f-light) .radio{color:var(--lt-text)}

/* ========== TOGGLE / SWITCH (iOS-style) ========== */
.switch-track{
  position:relative;display:inline-block;flex-shrink:0;
  width:42px;height:24px;border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(94,205,140,0.15);
  transition:background .2s,border-color .2s,box-shadow .2s;
  box-sizing:border-box;
}
.switch-thumb{
  position:absolute;top:2px;left:2px;
  width:18px;height:18px;border-radius:50%;
  background:#fff;
  transition:transform .2s,background .2s;
  box-shadow:0 1px 3px rgba(0,0,0,0.35);
}
.switch input:checked ~ .switch-track{background:var(--accent);border-color:var(--accent)}
.switch input:checked ~ .switch-track .switch-thumb{transform:translateX(18px)}
.switch input:focus-visible ~ .switch-track{box-shadow:0 0 0 3px rgba(94,205,140,0.3)}
.switch:hover input:not(:disabled) ~ .switch-track{border-color:rgba(94,205,140,0.4)}
:where(.is-light, .f-light) .switch-track{background:rgba(44,80,81,0.1);border-color:rgba(44,80,81,0.18)}

/* ========== CHECKBOX ========== */
.checkbox-box{
  width:18px;height:18px;flex-shrink:0;border-radius:4px;
  background:rgba(255,255,255,0.04);
  border:1.5px solid rgba(94,205,140,0.3);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,box-shadow .15s;
  position:relative;box-sizing:border-box;
}
.checkbox input:checked ~ .checkbox-box{background:var(--accent);border-color:var(--accent)}
.checkbox input:checked ~ .checkbox-box::after{
  content:'';width:10px;height:6px;
  border-left:2px solid var(--deep);border-bottom:2px solid var(--deep);
  transform:rotate(-45deg) translate(1px,-1px);
}
.checkbox input:indeterminate ~ .checkbox-box{background:var(--accent);border-color:var(--accent)}
.checkbox input:indeterminate ~ .checkbox-box::after{content:'';width:10px;height:2px;background:var(--deep)}
.checkbox input:focus-visible ~ .checkbox-box{box-shadow:0 0 0 3px rgba(94,205,140,0.3)}
.checkbox:hover input:not(:disabled) ~ .checkbox-box{border-color:rgba(94,205,140,0.5)}
:where(.is-light, .f-light) .checkbox-box{background:#fff;border-color:rgba(44,80,81,0.28)}

/* ========== RADIO ========== */
.radio-dot{
  width:18px;height:18px;flex-shrink:0;border-radius:50%;
  background:rgba(255,255,255,0.04);
  border:1.5px solid rgba(94,205,140,0.3);
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s,box-shadow .15s;
  position:relative;box-sizing:border-box;
}
.radio input:checked ~ .radio-dot{border-color:var(--accent)}
.radio input:checked ~ .radio-dot::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent)}
.radio input:focus-visible ~ .radio-dot{box-shadow:0 0 0 3px rgba(94,205,140,0.3)}
.radio:hover input:not(:disabled) ~ .radio-dot{border-color:rgba(94,205,140,0.5)}
:where(.is-light, .f-light) .radio-dot{background:#fff;border-color:rgba(44,80,81,0.28)}

/* ----------------------------------------------------------------
   TABS — 4 patterns (underline · pill · segmented · card)
   Structure : .tabs.tabs-[style] > .tab-list + .tab-panels
   Features  : .tab-badge compteur · scroll horizontal + fades latéraux
---------------------------------------------------------------- */
.tabs{display:flex;flex-direction:column;gap:20px}
.tab-list{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;position:relative;
}
.tab-list::-webkit-scrollbar{display:none}
/* Fades latéraux — appliqués seulement quand il y a réellement du scroll disponible
   (JS ajoute/retire data-scroll-left / data-scroll-right sur la base de scrollLeft + scrollWidth) */
.tab-list[data-scroll-left][data-scroll-right]{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
}
.tab-list[data-scroll-left]:not([data-scroll-right]){
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 100%);
}
.tab-list:not([data-scroll-left])[data-scroll-right]{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%);
}
.tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border:none;background:transparent;
  font-family:var(--ff-body);font-weight:600;font-size:0.875rem;
  color:var(--muted);cursor:pointer;transition:all .15s;
  white-space:nowrap;flex-shrink:0;
}
.tab:hover{color:var(--text)}
.tab.is-active{color:var(--accent)}
.tab-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:rgba(94,205,140,0.12);color:var(--accent);
  font-size:10.5px;font-weight:700;letter-spacing:0;text-transform:none;
}
.tab.is-active .tab-badge{background:var(--accent);color:var(--deep)}
.tab-panel{display:none}
.tab-panel.is-active{display:block;animation:tabPanelIn .18s ease-out}
@keyframes tabPanelIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}

/* Underline — ligne sous l'onglet actif */
.tabs-underline .tab-list{border-bottom:1px solid rgba(94,205,140,0.12)}
.tabs-underline .tab{padding:12px 16px;margin-bottom:-1px;border-bottom:2px solid transparent}
.tabs-underline .tab:hover{border-bottom-color:rgba(94,205,140,0.3)}
.tabs-underline .tab.is-active{border-bottom-color:var(--accent)}

/* Card headers — pattern "dossier à onglets"
   La card (.tab-panels) a son propre border complet respectant son radius ;
   les onglets flottent au-dessus et chevauchent 1px du border-top de la card.
   L'onglet actif partage le fond de la card + couvre la portion de border-top sous lui. */
.tabs-card{gap:0}
.tabs-card .tab-list{
  gap:4px;padding-inline:0;
  overflow:visible;  /* indispensable pour que le ::after de l'onglet actif ne soit pas clippé */
  margin-bottom:-1px;  /* les onglets chevauchent 1px sur le border-top de la card */
  position:relative;
  z-index:1;
}
.tabs-card .tab{
  padding:12px 18px;border-radius:10px 10px 0 0;
  border:1px solid transparent;border-bottom:none;
  background:transparent;
  position:relative;
}
.tabs-card .tab:hover{background:rgba(94,205,140,0.04)}
.tabs-card .tab.is-active{
  background:var(--dark2);
  border-color:rgba(94,205,140,0.14);
  color:var(--accent);
  z-index:2;
}
.tabs-card .tab.is-active::after{
  content:'';position:absolute;
  left:0;right:0;bottom:-1px;height:2px;
  background:var(--dark2);
  z-index:1;
}
.tabs-card .tab-panels{
  background:var(--dark2);
  border:1px solid rgba(94,205,140,0.14);
  border-radius:0 0 12px 12px;  /* coins bas arrondis, top laissé droit pour aligner avec les tabs */
  padding:22px 24px;
  position:relative;
}

/* Light adaptations */
:where(.is-light, .f-light) .tabs-underline .tab-list{border-bottom-color:rgba(44,80,81,0.14)}
:where(.is-light, .f-light) .tabs-card .tab-list{border-bottom-color:rgba(44,80,81,0.14)}
:where(.is-light, .f-light) .tabs-card .tab.is-active{background:#fff;border-color:rgba(44,80,81,0.14)}
:where(.is-light, .f-light) .tabs-card .tab.is-active::after{background:#fff}
:where(.is-light, .f-light) .tabs-card .tab-panels{background:#fff;border-color:rgba(44,80,81,0.14)}
:where(.is-light, .f-light) .tab:not(.is-active){color:var(--lt-muted)}
:where(.is-light, .f-light) .tab:hover:not(.is-active){color:var(--lt-text)}

/* ----------------------------------------------------------------
   ACCORDION — basé sur <details>/<summary> natif
   Zéro JS : le pliage/dépliage, ARIA, et le focus clavier sont gérés par le navigateur.
   2 containers : .accordion (liste compacte) · .accordion-cards (chaque item = card glass).
   Mode exclusif : ajouter l'attribut name="xxx" commun aux <details> (standard HTML depuis 2024).
---------------------------------------------------------------- */
.accordion{display:flex;flex-direction:column}
.accordion-item{border-bottom:1px solid rgba(94,205,140,0.12)}
.accordion-item:last-child{border-bottom:none}
.accordion-trigger{
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;cursor:pointer;user-select:none;
  color:var(--head);font-family:var(--ff-body);font-weight:600;font-size:1rem;
  transition:color .15s;
}
.accordion-trigger::-webkit-details-marker{display:none}
.accordion-trigger::marker{content:''}
.accordion-trigger:hover{color:var(--accent)}
.accordion-title{flex:1;min-width:0;line-height:1.4}
.accordion-chevron{
  flex-shrink:0;width:14px;height:14px;color:var(--muted);
  transition:transform .2s,color .2s;
}
.accordion-item[open] > .accordion-trigger .accordion-chevron{transform:rotate(180deg);color:var(--accent)}
.accordion-trigger:hover .accordion-chevron{color:var(--accent)}
.accordion-body{
  padding:0 0 18px;color:var(--text);
  font-size:14.5px;line-height:1.65;
}
.accordion-body p{font-size:14.5px;line-height:1.65;max-width:none}
.accordion-body p+p,.accordion-body ul,.accordion-body ol{margin-top:10px}
.accordion-body ul,.accordion-body ol{margin-left:20px}
.accordion-body li{margin-bottom:4px}

/* .accordion-cards — chaque item devient une card glass indépendante */
.accordion-cards{gap:10px}
.accordion-cards .accordion-item{
  border:1px solid rgba(94,205,140,0.1);
  border-radius:var(--r-md);
  background:rgba(14,28,30,0.5);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  padding:0 20px;
  transition:border-color .2s;
}
.accordion-cards .accordion-item[open]{border-color:rgba(94,205,140,0.24)}
.accordion-cards .accordion-trigger{padding:16px 0}
.accordion-cards .accordion-body{padding:0 0 18px}

/* Light */
:where(.is-light, .f-light) .accordion-item{border-bottom-color:rgba(44,80,81,0.12)}
:where(.is-light, .f-light) .accordion-trigger{color:var(--lt-head)}
:where(.is-light, .f-light) .accordion-body{color:var(--lt-text)}
:where(.is-light, .f-light) .accordion-cards .accordion-item{
  background:#fff;border-color:rgba(44,80,81,0.12);
}
:where(.is-light, .f-light) .accordion-cards .accordion-item[open]{border-color:rgba(44,80,81,0.24)}

/* ----------------------------------------------------------------
   TOOLTIP — CSS-only (aucun JS)
   Pattern : <element class="tooltip" data-tooltip="texte court">trigger</element>
   L'élément doit être focusable (bouton, lien, ou tabindex="0" sinon).
   Par défaut : top. Modifiers .tooltip-right · .tooltip-bottom · .tooltip-left.
---------------------------------------------------------------- */
.tooltip{position:relative;display:inline-block}

/* Bubble — fond totalement opaque, z-index au-dessus de tout (même au-dessus du grain overlay à z:9998) */
.tooltip::before{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  padding:7px 11px;border-radius:6px;border:0;
  background:#0B0D10;color:#fff;
  font-family:var(--ff-body);font-weight:500;font-size:12.5px;
  line-height:1.4;letter-spacing:0;text-transform:none;
  white-space:normal;max-width:240px;width:max-content;height:auto;
  box-shadow:0 6px 18px rgba(0,0,0,0.55);
  opacity:0;pointer-events:none;z-index:9999;
  transition:opacity .18s,transform .18s;
  transition-delay:0s;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  flex:initial;
}

/* Arrow — même fond opaque + même z-index que la bubble */
.tooltip::after{
  content:'';position:absolute;
  bottom:calc(100% + 3px);left:50%;transform:translateX(-50%) translateY(4px);
  width:8px;height:5px;background:#0B0D10;border:0;border-radius:0;padding:0;
  clip-path:polygon(50% 100%,0 0,100% 0);
  opacity:0;pointer-events:none;z-index:9999;
  transition:opacity .18s,transform .18s;
  transition-delay:0s;
  flex:initial;
}

/* Show on hover + focus + focus-visible (a11y clavier) — delay 400ms à l'apparition, instantané au retrait */
.tooltip:hover::before,.tooltip:hover::after,
.tooltip:focus::before,.tooltip:focus::after,
.tooltip:focus-visible::before,.tooltip:focus-visible::after,
.tooltip:focus-within::before,.tooltip:focus-within::after{
  opacity:1;transform:translateX(-50%) translateY(0);
  transition-delay:.4s;
}

/* .tooltip-right */
.tooltip-right::before{
  bottom:auto;top:50%;left:calc(100% + 8px);
  transform:translateY(-50%) translateX(-4px);
}
.tooltip-right::after{
  bottom:auto;top:50%;left:calc(100% + 3px);
  width:5px;height:8px;
  transform:translateY(-50%) translateX(-4px);
  clip-path:polygon(0 50%,100% 0,100% 100%);
}
.tooltip-right:hover::before,.tooltip-right:focus-visible::before,.tooltip-right:focus-within::before,
.tooltip-right:hover::after,.tooltip-right:focus-visible::after,.tooltip-right:focus-within::after{
  transform:translateY(-50%) translateX(0);
}

/* .tooltip-bottom */
.tooltip-bottom::before{
  bottom:auto;top:calc(100% + 8px);
  transform:translateX(-50%) translateY(-4px);
}
.tooltip-bottom::after{
  bottom:auto;top:calc(100% + 3px);
  transform:translateX(-50%) translateY(-4px);
  clip-path:polygon(50% 0,0 100%,100% 100%);
}
.tooltip-bottom:hover::before,.tooltip-bottom:focus-visible::before,.tooltip-bottom:focus-within::before,
.tooltip-bottom:hover::after,.tooltip-bottom:focus-visible::after,.tooltip-bottom:focus-within::after{
  transform:translateX(-50%) translateY(0);
}

/* .tooltip-left */
.tooltip-left::before{
  bottom:auto;top:50%;left:auto;right:calc(100% + 8px);
  transform:translateY(-50%) translateX(4px);
}
.tooltip-left::after{
  bottom:auto;top:50%;left:auto;right:calc(100% + 3px);
  width:5px;height:8px;
  transform:translateY(-50%) translateX(4px);
  clip-path:polygon(100% 50%,0 0,0 100%);
}
.tooltip-left:hover::before,.tooltip-left:focus-visible::before,.tooltip-left:focus-within::before,
.tooltip-left:hover::after,.tooltip-left:focus-visible::after,.tooltip-left:focus-within::after{
  transform:translateY(-50%) translateX(0);
}

/* ----------------------------------------------------------------
   TABLE
   - .table             → style editorial par défaut (propre, lisible, pour
                          comparaisons / matrices / doc — le cas le plus courant)
   - .table-data        → modifier pour version interactive (thead muted sombre,
                          wrapper .table-wrap avec border)
   Modifiers combinables indépendamment (fonctionnent sur les deux styles) :
   .table-dense · .table-zebra · .table-hover · .table-sticky
   Features : data-sort · .table-select (checkbox col) · .table-actions (lien droite)
---------------------------------------------------------------- */

/* Base editorial — th accent, fond très léger, pas de wrapper */
.table{
  width:100%;border-collapse:collapse;
  font-family:var(--ff-body);font-size:0.875rem;color:var(--text);
}
.table th,.table td{
  padding:14px 18px;text-align:left;
  border-bottom:1px solid rgba(94,205,140,0.06);
}
.table th{
  font-family:var(--ff-body);font-size:0.6875rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--accent);
  background:rgba(94,205,140,0.02);
}
.table td{color:var(--text);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table code{color:var(--accent);font-family:var(--ff-mono);font-size:0.75rem}

/* Light — editorial par défaut */
:where(.is-light, .f-light) .table{color:var(--lt-text)}
:where(.is-light, .f-light) .table th{
  color:var(--accent-dk);background:rgba(94,205,140,0.06);
}
:where(.is-light, .f-light) .table td{
  border-bottom-color:rgba(44,80,81,0.08);color:var(--lt-text);
}

/* ========== .table-data — version riche (dashboards, listes interactives) ========== */
/* Wrapper scroll + border */
.table-wrap{
  overflow-x:auto;scrollbar-width:thin;
  border:1px solid var(--stroke);border-radius:var(--r-md);
  background:rgba(14,28,30,0.2);
}
:where(.is-light, .f-light) .table-wrap{
  background:#fff;border-color:var(--stroke-lt);
}
/* Override thead pour la version data : fond sombre, texte muted, pas d'accent */
.table-data th{
  padding:14px 16px;
  color:var(--muted);background:rgba(14,28,30,0.45);
  border-bottom:1px solid var(--stroke);
  white-space:nowrap;
}
.table-data td{padding:14px 16px}
:where(.is-light, .f-light) .table-data th{
  color:var(--lt-muted);background:var(--n-50);
  border-bottom-color:var(--stroke-lt);
}

/* ========== Modifiers combinables (indépendants de editorial/data) ========== */
/* Dense — padding réduit + font plus petit */
.table-dense th,.table-dense td{padding:10px 14px;font-size:0.8125rem}
.table-dense th{font-size:10.5px}

/* Zebra — rangs pairs légèrement teintés */
.table-zebra tbody tr:nth-child(even) td{background:rgba(255,255,255,0.015)}
:where(.is-light, .f-light) .table-zebra tbody tr:nth-child(even) td{
  background:rgba(44,80,81,0.025);
}

/* Hover row */
.table-hover tbody tr{transition:background .15s}
.table-hover tbody tr:hover td{background:rgba(94,205,140,0.04)}
:where(.is-light, .f-light) .table-hover tbody tr:hover td{
  background:rgba(44,80,81,0.04);
}

/* Sticky header — nécessite un parent à hauteur limitée */
.table-sticky thead th{position:sticky;top:0;z-index:2;background:var(--dark2)}
:where(.is-light, .f-light) .table-sticky thead th{
  background:#fff;
}

/* Sort indicators — visuels seulement (tri réel en backend). data-sort="asc|desc|''" */
.table th[data-sort]{cursor:pointer;user-select:none;transition:color .15s}
.table th[data-sort]:hover{color:var(--text)}
.table th[data-sort]::after{
  content:'↕';margin-left:6px;display:inline-block;
  opacity:0.35;font-size:0.625rem;transition:opacity .15s,color .15s;
}
.table th[data-sort]:hover::after{opacity:0.65}
.table th[data-sort="asc"],.table th[data-sort="desc"]{color:var(--accent)}
.table th[data-sort="asc"]::after{content:'↑';opacity:1;color:var(--accent)}
.table th[data-sort="desc"]::after{content:'↓';opacity:1;color:var(--accent)}

/* Column : selection checkbox */
.table-select{width:44px;padding-right:8px !important}
.table-select .checkbox{display:inline-block;margin:0}

/* Column : actions à droite (lien simple "Voir →") */
th.table-actions,td.table-actions,.table-actions{text-align:right;white-space:nowrap}
.table-actions a{
  color:var(--accent);font-weight:600;font-size:0.8125rem;
  transition:color .15s;display:inline-flex;align-items:center;gap:4px;
}
.table-actions a:hover{color:var(--accent-2)}
.table-actions a::after{content:'→';transition:transform .15s}
.table-actions a:hover::after{transform:translateX(2px)}

/* Mono pour codes dans les cellules (N° TVA, références) */
.table .mono{font-family:var(--ff-mono);font-size:12.5px;color:var(--text)}


/* ----------------------------------------------------------------
   PAGINATION — 2 patterns
   .pagination          → numérotée (1 2 3 ... 12) avec ellipsis
   .pagination-simple   → prev/next seulement ("Précédent | Page X sur Y | Suivant")
   Info optionnelle : <span class="pagination-info">...</span>
---------------------------------------------------------------- */
.pagination{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;
}
.pagination-info{font-size:0.8125rem;color:var(--muted)}
.pagination-list{
  display:inline-flex;align-items:center;gap:2px;
  list-style:none;padding:0;margin:0;
}
.pagination-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;border-radius:8px;
  background:transparent;border:1px solid transparent;
  color:var(--muted);font-family:var(--ff-body);font-weight:600;font-size:0.875rem;
  cursor:pointer;transition:all .15s;text-decoration:none;user-select:none;
}
.pagination-btn:hover{background:rgba(94,205,140,0.06);color:var(--text)}
.pagination-btn.is-active,
.pagination-btn[aria-current="page"]{
  background:var(--accent);color:var(--deep);border-color:var(--accent);
}
.pagination-btn.is-active:hover,
.pagination-btn[aria-current="page"]:hover{background:var(--accent-2);color:var(--deep)}
.pagination-btn[aria-disabled="true"],.pagination-btn.is-disabled{
  opacity:0.35;cursor:not-allowed;pointer-events:none;
}
.pagination-ellipsis{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;
  color:var(--muted);font-size:0.875rem;user-select:none;
}

/* Simple — prev/next only, info au centre */
.pagination-simple .pagination-btn{min-width:auto;padding:8px 14px;gap:6px}

/* Light */
:where(.is-light, .f-light) .pagination-btn{color:var(--lt-muted)}
:where(.is-light, .f-light) .pagination-btn:hover{
  background:rgba(44,80,81,0.05);color:var(--lt-text);
}
:where(.is-light, .f-light) .pagination-info{color:var(--lt-muted)}
:where(.is-light, .f-light) .pagination-ellipsis{color:var(--lt-muted)}

/* ----------------------------------------------------------------
   BREADCRUMB — fil d'Ariane
   Structure : <nav aria-label="..."> <ol class="breadcrumb">...<li aria-current="page">...
   Séparateur : chevron › injecté via ::before entre items.
---------------------------------------------------------------- */
.breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;
  list-style:none;padding:0;margin:0;gap:6px;
  font-size:0.8125rem;color:var(--muted);line-height:1.4;
}
.breadcrumb li{display:inline-flex;align-items:center;gap:6px}
.breadcrumb li+li::before{
  content:'›';color:var(--muted);opacity:0.5;
  font-size:0.875rem;line-height:1;
}
.breadcrumb a{color:var(--muted);transition:color .15s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb [aria-current="page"]{color:var(--text);font-weight:600}

/* Light */
:where(.is-light, .f-light) .breadcrumb{color:var(--lt-muted)}
:where(.is-light, .f-light) .breadcrumb a{color:var(--lt-muted)}
:where(.is-light, .f-light) .breadcrumb a:hover{color:var(--accent-dk)}
:where(.is-light, .f-light) .breadcrumb [aria-current="page"]{color:var(--lt-text)}
:where(.is-light, .f-light) .breadcrumb li+li::before{color:var(--lt-muted)}

/* ----------------------------------------------------------------
   MODAL / DIALOG — 4 styles à évaluer, on en gardera 1 ou 2
   Structure : <dialog class="modal modal-[style]"> .modal-header + .modal-body + .modal-footer
   Tailles   : .modal-sm / .modal-md (défaut) / .modal-lg / .modal-xl
---------------------------------------------------------------- */

/* Base commune (cadre + layout) */
.modal{
  position:fixed;inset:0;margin:auto;
  width:calc(100% - 40px);max-width:560px;max-height:calc(100% - 80px);
  padding:0;border:none;
  color:var(--text);font-family:var(--ff-body);
}
/* display scoped à [open] — évite que le <dialog> apparaisse au chargement */
.modal[open]{display:flex;flex-direction:column}
.modal-sm{max-width:400px}
.modal-md{max-width:560px}
.modal-lg{max-width:720px}
.modal-xl{max-width:960px}

/* Backdrop (pour <dialog> natif) */
.modal::backdrop{
  background:rgba(6,13,14,0.65);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

.modal-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;
  border-bottom:1px solid rgba(94,205,140,0.1);
}
.modal-title{
  font-family:var(--ff-display);font-weight:600;font-size:1.1875rem;
  color:var(--head);letter-spacing:-0.01em;margin:0;
  line-height:1.3;flex:1;min-width:0;
}
.modal-close{
  flex-shrink:0;width:32px;height:32px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:none;cursor:pointer;
  color:var(--muted);font-size:1.375rem;line-height:1;padding:0;
  transition:background .15s,color .15s;
}
.modal-close:hover{background:rgba(94,205,140,0.08);color:var(--text)}
.modal-body{
  padding:20px 24px;
  color:var(--text);font-size:14.5px;line-height:1.6;
  overflow-y:auto;
}
.modal-body p{font-size:14.5px;line-height:1.6;max-width:none}
.modal-body p+p{margin-top:10px}
.modal-footer{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  padding:16px 24px;
  border-top:1px solid rgba(94,205,140,0.1);
}

/* ========== GLASS DARK — classique DS (blur + accent subtil) ========== */
.modal-glass{
  background:rgba(14,28,30,0.85);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(94,205,140,0.14);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
}

/* ========== LIGHT PANEL — rupture visuelle, "ouvrir un document" ========== */
.modal-light{
  background:#fff;color:var(--lt-text);
  border:1px solid rgba(44,80,81,0.1);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,0.55);
}
.modal-light .modal-header{border-bottom-color:rgba(44,80,81,0.08)}
.modal-light .modal-title{color:var(--lt-head)}
.modal-light .modal-close{color:var(--lt-muted)}
.modal-light .modal-close:hover{background:rgba(44,80,81,0.06);color:var(--lt-text)}
.modal-light .modal-body{color:var(--lt-text)}
.modal-light .modal-footer{border-top-color:rgba(44,80,81,0.08)}



/* ----------------------------------------------------------------
   LOADERS — Progress bar · Skeleton · Spinner
   3 indicateurs de chargement. Le spinner et le skeleton respectent
   prefers-reduced-motion (règle globale plus bas).
---------------------------------------------------------------- */

/* ========== PROGRESS BAR ========== */
/* Couleur customisable via la CSS var --progress-color (par défaut : accent vert).
   Usage : <div class="progress" style="--progress-color:#5B9FEE">...</div> */
.progress{
  --progress-color:var(--accent);
  height:6px;width:100%;
  background:rgba(94,205,140,0.08);
  border-radius:999px;overflow:hidden;position:relative;
}
.progress-bar{
  height:100%;width:0;
  background:var(--progress-color);
  border-radius:999px;
  transition:width .4s ease;
}
/* Tailles */
.progress-xs{height:3px}
.progress-sm{height:4px}
.progress-lg{height:10px}
/* Indeterminate (animation d'un bout qui traverse) */
.progress-indeterminate .progress-bar{
  width:40%;
  animation:progressIndet 1.5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes progressIndet{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(270%)}
}
/* Light */
:where(.is-light, .f-light) .progress{
  background:rgba(44,80,81,0.08);
}

/* ========== SKELETON ========== */
.skeleton{
  display:block;
  background:linear-gradient(90deg,
    rgba(94,205,140,0.04) 0%,
    rgba(94,205,140,0.12) 50%,
    rgba(94,205,140,0.04) 100%);
  background-size:200% 100%;
  animation:skelShimmer 1.4s ease-in-out infinite;
  border-radius:6px;
}
@keyframes skelShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
/* Formes pré-configurées */
.skeleton-line{height:12px}
.skeleton-line-lg{height:18px}
.skeleton-line-sm{height:10px}
.skeleton-circle{border-radius:50%;aspect-ratio:1;width:40px}
.skeleton-rect{width:100%;height:120px;border-radius:10px}
/* Largeurs utilitaires */
.skeleton-w-25{width:25%}
.skeleton-w-50{width:50%}
.skeleton-w-60{width:60%}
.skeleton-w-75{width:75%}
.skeleton-w-90{width:90%}
.skeleton-w-100{width:100%}
/* Light */
:where(.is-light, .f-light) .skeleton{
  background:linear-gradient(90deg,
    rgba(44,80,81,0.06) 0%,
    rgba(44,80,81,0.14) 50%,
    rgba(44,80,81,0.06) 100%);
  background-size:200% 100%;
}

/* ========== SPINNER ========== */
.spinner{
  display:inline-block;
  width:20px;height:20px;
  border:2px solid rgba(94,205,140,0.2);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite;
  flex-shrink:0;
}
/* Tailles */
.spinner-xs{width:14px;height:14px;border-width:1.5px}
.spinner-sm{width:18px;height:18px;border-width:2px}
.spinner-lg{width:32px;height:32px;border-width:3px}
.spinner-xl{width:48px;height:48px;border-width:4px}
/* Variantes de couleur */
.spinner-muted{border-color:rgba(255,255,255,0.08);border-top-color:var(--muted)}
.spinner-white{border-color:rgba(255,255,255,0.2);border-top-color:#fff}
/* Light */
:where(.is-light, .f-light) .spinner{
  border-color:rgba(44,80,81,0.12);border-top-color:var(--accent);
}

/* ----------------------------------------------------------------
   DROPDOWN — menu d'actions contextuelles (Popover API natif)
   Structure : <button popovertarget="id"> + <div class="dropdown-menu" id="id" popover>
   Behavior gratuit : ESC pour fermer, click-outside (light-dismiss), focus
   Positionnement : JS sur l'évènement toggle (auto-flip si pas assez de place en bas)
---------------------------------------------------------------- */
.dropdown-menu{
  position:fixed;margin:0;padding:4px;
  min-width:200px;max-width:320px;
  border:1px solid rgba(94,205,140,0.14);
  border-radius:10px;
  background:rgba(6,13,14,0.95);
  backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:0 16px 40px rgba(0,0,0,0.5);
  color:var(--text);font-family:var(--ff-body);
  animation:ddIn .14s ease-out;
}
.dropdown-menu[popover]{inset:unset}  /* reset du default top:0;left:0 des popovers */
.dropdown-menu:not([popover]):not(.is-open){display:none}  /* fallback si pas de popover support */
@keyframes ddIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.dropdown-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border:none;background:transparent;
  color:var(--text);font-family:inherit;font-size:0.875rem;line-height:1.3;
  text-align:left;cursor:pointer;border-radius:6px;
  text-decoration:none;width:100%;
  transition:background .12s,color .12s;
}
.dropdown-item:hover,.dropdown-item:focus-visible{
  background:rgba(94,205,140,0.08);color:var(--accent);outline:none;
}
.dropdown-item svg{flex-shrink:0;width:14px;height:14px;opacity:0.7}
.dropdown-item:hover svg,.dropdown-item:focus-visible svg{opacity:1}

.dropdown-item-danger{color:var(--danger)}
.dropdown-item-danger:hover,.dropdown-item-danger:focus-visible{background:var(--danger-bg);color:var(--danger)}

.dropdown-item-kbd{
  margin-left:auto;font-family:var(--ff-mono);font-size:0.6875rem;color:var(--muted);
  letter-spacing:0;
}
.dropdown-sep{height:1px;background:rgba(94,205,140,0.08);margin:4px -4px;border:none}
.dropdown-label{
  padding:8px 12px 4px;font-size:0.625rem;font-weight:800;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted);line-height:1;
}



/* Chevron SVG pour les triggers de dropdown — inherits currentColor, rotate si popover ouvert */
.dd-chevron{width:12px;height:12px;transition:transform .2s;flex-shrink:0}
[popovertarget]:has(+ .dropdown-menu:popover-open) .dd-chevron,
.dd-open .dd-chevron{transform:rotate(180deg)}

/* ----------------------------------------------------------------
   SELECT — <select> natif re-stylé (appearance:none + chevron custom)
   Pour les selects riches (options avec icônes, groupes, recherche),
   utiliser le .dropdown-menu en pattern de composition.
---------------------------------------------------------------- */
.select-wrap{position:relative;display:inline-block;width:100%}
.select{
  appearance:none;-webkit-appearance:none;
  width:100%;
  padding:14px 40px 14px 16px;
  background:rgba(14,28,30,0.5);
  border:1px solid rgba(94,205,140,0.1);
  border-radius:12px;
  color:var(--head);font-family:var(--ff-body);font-size:14.5px;
  cursor:pointer;line-height:1.4;
  transition:border-color .2s,background .2s;
}
.select:focus,.select:focus-visible{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(94,205,140,0.22);
}
.select:disabled{opacity:0.5;cursor:not-allowed}
.select-wrap::after{
  content:'';position:absolute;right:16px;top:50%;
  width:9px;height:9px;
  transform:translateY(-70%) rotate(45deg);
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  pointer-events:none;transition:border-color .2s;
}
.select-wrap:focus-within::after{border-color:var(--accent)}
.select option{background:var(--dark2);color:var(--head)}  /* natif sur dark */
.select option:checked,.select option:hover{background:linear-gradient(rgba(94,205,140,0.22),rgba(94,205,140,0.22)),var(--dark2);color:var(--head)}

/* Light */
:where(.is-light, .f-light) .select{
  background:#fff;border-color:rgba(44,80,81,0.14);color:var(--lt-head);
}
:where(.is-light, .f-light) .select option{background:#fff;color:var(--lt-head)}
:where(.is-light, .f-light) .select option:checked,:where(.is-light, .f-light) .select option:hover,

:where(.is-light, .f-light) .select option:checked,:where(.is-light, .f-light) .select option:hover{background:linear-gradient(rgba(94,205,140,0.2),rgba(94,205,140,0.2)),#fff;color:var(--lt-head)}
:where(.is-light, .f-light) .select-wrap::after{
  border-color:var(--lt-muted);
}
:where(.is-light, .f-light) .dropdown-menu{
  background:rgba(255,255,255,0.95);
  border-color:rgba(44,80,81,0.14);
  box-shadow:0 16px 40px rgba(44,80,81,0.2);
  color:var(--lt-text);
}
:where(.is-light, .f-light) .dropdown-item{color:var(--lt-text)}
:where(.is-light, .f-light) .dropdown-sep{background:rgba(44,80,81,0.1)}
}