/* ═══════════════════════════════════════════════════════════════════════
   MANDAT DIRECT — Design System « Clair »  v1
   Chaleur + rigueur. Grandes formes douces. Mouvement permanent, discret.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons ─────────────────────────────────────────────────────────── */
:root{
  /* Marque */
  --encre:      #0E1420;
  --marine:     #16324F;
  --marine-2:   #2E5C87;
  --azur:       #4B9BE0;
  --azur-clair: #A8D3F5;
  --or:         #EFB033;
  --or-clair:   #FFD37A;
  --or-fonce:   #C98D18;

  /* Surfaces */
  --papier:     #FBF9F5;
  --blanc:      #FFFFFF;
  --craie:      #F2EEE7;
  --craie-2:    #E9E3D9;
  --nuit:       #0F1B2A;
  --nuit-2:     #16283D;

  /* Signal */
  --vert:       #1E9E6A;
  --vert-clair: #DCF3E9;
  --brique:     #C4462C;
  --brique-clair:#FBE6E1;
  --ambre:      #B5810B;
  --ambre-clair:#FBF0D6;

  /* Texte */
  --txt:        var(--encre);
  --txt-doux:   #5A6676;
  --txt-tres-doux:#8B95A3;
  --txt-inv:    #F6F4EF;

  /* Traits */
  --trait:      rgba(22,50,79,.10);
  --trait-fort: rgba(22,50,79,.18);
  --trait-inv:  rgba(255,255,255,.14);

  /* Dégradés */
  --g-marine: linear-gradient(135deg,#1B3A5C 0%,#2E5C87 52%,#4B9BE0 100%);
  --g-or:     linear-gradient(135deg,#EFB033 0%,#FFD37A 100%);
  --g-ia:     linear-gradient(135deg,#4B9BE0 0%,#7FB8EC 45%,#EFB033 100%);
  --g-nuit:   linear-gradient(160deg,#0F1B2A 0%,#16283D 60%,#1B3A5C 100%);

  /* Typo */
  --f-titre: "Satoshi", "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-ui:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-data:  "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --fs-mega:  clamp(2.35rem, 1.5rem + 3.5vw, 3.9rem);
  --fs-h1:    clamp(1.95rem, 1.45rem + 2.1vw, 2.9rem);
  --fs-h2:    clamp(1.6rem, 1.32rem + 1.2vw, 2.15rem);
  --fs-h3:    clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem);
  --fs-h4:    clamp(1.06rem, 1.02rem + 0.2vw, 1.18rem);
  --fs-lead:  clamp(1rem, 0.96rem + 0.3vw, 1.15rem);
  --fs-body:  1rem;
  --fs-sm:    .9375rem;
  --fs-xs:    .8125rem;
  --fs-kick:  .75rem;

  --lh-serre: 1.06;
  --lh-titre: 1.15;
  --lh-txt:   1.6;

  /* Espace */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px;
  --e7:32px; --e8:40px; --e9:56px; --e10:72px; --e11:96px; --e12:128px;
  --sect: clamp(3.25rem, 2.4rem + 3.2vw, 5.5rem);
  --gouttiere: clamp(1.25rem, .75rem + 2.2vw, 2.5rem);
  --large: 1240px;
  --etroit: 760px;

  /* Formes */
  --r1:7px; --r2:10px; --r3:14px; --r4:18px; --r5:22px; --r6:28px; --rond:999px;

  /* Profondeur */
  --o1: 0 1px 2px rgba(14,20,32,.05);
  --o2: 0 1px 2px rgba(14,20,32,.05), 0 6px 16px -6px rgba(14,20,32,.1);
  --o3: 0 1px 2px rgba(14,20,32,.05), 0 12px 32px -10px rgba(14,20,32,.16);
  --o4: 0 2px 4px rgba(14,20,32,.06), 0 28px 60px -20px rgba(14,20,32,.28);
  --liseré: inset 0 1px 0 rgba(255,255,255,.85);
  --o-or: 0 6px 20px rgba(239,176,51,.28);
  --o-marine: 0 8px 28px rgba(22,50,79,.24);

  /* Mouvement */
  --ease:    cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --ressort: cubic-bezier(.34,1.4,.64,1);
  --t1: .16s; --t2: .28s; --t3: .5s; --t4: .8s;

  --entete-h: 72px;
}

/* ── 1bis. Rideau de chargement ────────────────────────────────────────────
   Le découpage des titres en mots est mesuré au pixel : si on l'exécute avec
   la police de repli, le texte se recompose quand la vraie police arrive —
   d'où le saut. On garde donc la page invisible jusqu'à ce que les polices
   soient chargées (1,2 s au maximum), puis on la révèle d'un bloc.
   Sans JavaScript, la classe n'est jamais posée : la page reste visible.     */
html.md-attente body{ visibility:hidden; }
/* visibility et non opacity : une transition d'opacité peut ne jamais se
   terminer si le rendu est bridé, et la page resterait blanche. */

/* ── 2. Remise à zéro ──────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--entete-h) + 24px);
}
html,body{ overflow-x:clip; max-width:100%; }
body{
  font-family:var(--f-ui);
  font-size:var(--fs-body);
  line-height:var(--lh-txt);
  color:var(--txt);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv05" 1,"cv11" 1,"ss01" 1;
  text-rendering:optimizeLegibility;
}
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
:focus-visible{ outline:2.5px solid var(--azur); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--or-clair); color:var(--encre); }

/* ── 3. Typographie ────────────────────────────────────────────────────── */
h1,h2,h3,h4,.titre{
  font-family:var(--f-titre);
  font-weight:700;
  line-height:var(--lh-titre);
  letter-spacing:-.03em;
  color:var(--encre);
  text-wrap:balance;
}
.t-mega{ font-family:var(--f-titre); font-weight:700; font-size:var(--fs-mega); line-height:var(--lh-serre); letter-spacing:-.034em; text-wrap:balance; }
.t-h1{ font-size:var(--fs-h1); letter-spacing:-.03em; }
.t-h2{ font-size:var(--fs-h2); letter-spacing:-.026em; }
.t-h3{ font-size:var(--fs-h3); }
.t-h4{ font-size:var(--fs-h4); }
.lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--txt-doux); text-wrap:pretty; }
.p-sm{ font-size:var(--fs-sm); }
.p-xs{ font-size:var(--fs-xs); }
.doux{ color:var(--txt-doux); }
.tres-doux{ color:var(--txt-tres-doux); }
.data{ font-family:var(--f-data); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

.kicker{
  display:inline-flex; align-items:center; gap:var(--e2);
  font-size:var(--fs-kick); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--marine-2);
}
.kicker::before{
  content:""; width:20px; height:2px; border-radius:2px;
  background:var(--g-or); flex:none;
}

/* Mot souligné — trait doré tracé sous le mot, une fois la phrase écrite.
   Surtout PAS de pseudo-élément positionné : un descendant positionné n'est
   pas peint par le dégradé clippé du titre, et le mot disparaissait. */
.souligne{
  white-space:nowrap;
  text-decoration-line:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:.24em;
  text-underline-offset:.02em;
  text-decoration-skip-ink:none;
  transition:text-decoration-color .55s var(--ease) 1.15s;
}
.vu .souligne,.souligne.vu{ text-decoration-color:var(--or-clair); }

/* Mot en dégradé */
.degrade{
  background:var(--g-marine); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.degrade-or{
  background:var(--g-or); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* ── 4. Mise en page ───────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--large); margin-inline:auto; padding-inline:var(--gouttiere); }
.wrap-etroit{ width:100%; max-width:var(--etroit); margin-inline:auto; padding-inline:var(--gouttiere); }
.sect{ padding-block:var(--sect); position:relative; }
.sect-sm{ padding-block:clamp(3rem,2rem + 3vw,4.5rem); }
/* Les modificateurs sont autonomes : .pile-6 seul suffit, pas besoin de .pile */
.pile,.pile-2,.pile-3,.pile-4,.pile-5,.pile-6,.pile-7,.pile-8,.pile-9,.pile-10{
  display:flex; flex-direction:column;
}
.pile-2{ gap:var(--e2);} .pile-3{ gap:var(--e3);} .pile-4{ gap:var(--e4);}
.pile-5{ gap:var(--e5);} .pile-6{ gap:var(--e6);} .pile-7{ gap:var(--e7);}
.pile-8{ gap:var(--e8);} .pile-9{ gap:var(--e9);} .pile-10{ gap:var(--e10);}

.rang,.rang-2,.rang-3,.rang-4,.rang-5,.rang-6,.rang-7{
  display:flex; align-items:center; flex-wrap:wrap;
}
.rang{ gap:var(--e4);} .rang-2{ gap:var(--e2);} .rang-3{ gap:var(--e3);}
.rang-4{ gap:var(--e4);} .rang-5{ gap:var(--e5);} .rang-6{ gap:var(--e6);} .rang-7{ gap:var(--e7);}
.entre{ justify-content:space-between; }
.centre{ justify-content:center; }
.txt-centre{ text-align:center; }
.grille{ display:grid; gap:var(--e6); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:960px){ .g-3,.g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px){ .g-2,.g-3,.g-4{ grid-template-columns:minmax(0,1fr); } }
.pousse{ margin-left:auto; }
.plein{ width:100%; }
[hidden]{ display:none !important; }

/* Fonds de section */
.f-blanc{ background:var(--blanc); }
.f-craie{ background:var(--craie); }
.f-nuit{ background:var(--g-nuit); color:var(--txt-inv); }
.f-nuit h1,.f-nuit h2,.f-nuit h3,.f-nuit h4,.f-nuit .titre{ color:#fff; }
.f-nuit .lead,.f-nuit .doux{ color:rgba(246,244,239,.72); }
.f-nuit .kicker{ color:var(--or-clair); }

/* ── 5. Boutons ────────────────────────────────────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:var(--e2); padding:13px 24px; border-radius:var(--rond);
  font-family:var(--f-ui); font-size:var(--fs-sm); font-weight:600; letter-spacing:-.01em;
  white-space:nowrap; cursor:pointer; isolation:isolate; overflow:hidden;
  transition:transform var(--t2) var(--ressort), box-shadow var(--t2) var(--ease),
             background-color var(--t2) var(--ease), color var(--t2) var(--ease),
             border-color var(--t2) var(--ease);
  will-change:transform;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn:active{ transform:scale(.97); }
.btn[disabled],.btn.charge{ opacity:.55; pointer-events:none; }

/* Reflet qui balaie au survol */
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 48%,transparent 66%);
  transform:translateX(-120%); transition:transform .75s var(--ease);
}
.btn:hover::after{ transform:translateX(120%); }

.btn-primaire{ background:var(--marine); color:#fff; box-shadow:var(--o-marine); }
.btn-primaire:hover{ background:#1D4166; transform:translateY(-2px); box-shadow:0 12px 34px rgba(22,50,79,.32); }

.btn-or{ background:var(--g-or); color:var(--encre); box-shadow:var(--o-or); }
.btn-or:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(239,176,51,.4); }

.btn-secondaire{ background:var(--blanc); color:var(--marine); box-shadow:var(--o1); border:1px solid var(--trait); }
.btn-secondaire:hover{ transform:translateY(-2px); box-shadow:var(--o2); border-color:var(--trait-fort); }

.btn-fantome{ background:transparent; color:var(--marine); }
.btn-fantome:hover{ background:rgba(22,50,79,.06); }

.btn-clair{ background:rgba(255,255,255,.12); color:#fff; border:1px solid var(--trait-inv); backdrop-filter:blur(8px); }
.btn-clair:hover{ background:rgba(255,255,255,.2); transform:translateY(-2px); }

.btn-danger{ background:var(--brique); color:#fff; }
.btn-danger:hover{ background:#AE3A22; transform:translateY(-2px); }

.btn-lg{ padding:16px 30px; font-size:var(--fs-body); }
.btn-sm{ padding:9px 16px; font-size:var(--fs-xs); }
.btn-icone{ padding:10px; width:40px; height:40px; }
.btn-icone.btn-sm{ width:32px; height:32px; padding:7px; }

/* Flèche qui avance */
.btn-fleche svg{ transition:transform var(--t2) var(--ease); }
.btn-fleche:hover svg{ transform:translateX(4px); }

/* Lien animé */
.lien{ position:relative; font-weight:500; color:var(--marine); display:inline-flex; align-items:center; gap:6px; }
.lien::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform var(--t2) var(--ease);
}
.lien:hover::after{ transform:scaleX(1); transform-origin:left; }
.lien svg{ width:16px; height:16px; transition:transform var(--t2) var(--ease); }
.lien:hover svg{ transform:translateX(3px); }

/* ── 6. Pastilles & badges ─────────────────────────────────────────────── */
.pastille{
  display:inline-flex; align-items:center; gap:6px; padding:6px 13px;
  border-radius:var(--rond); font-size:var(--fs-xs); font-weight:600; letter-spacing:-.005em;
  background:var(--craie); color:var(--marine); white-space:nowrap;
}
.pastille svg{ width:14px; height:14px; }
.pastille-contour{ background:transparent; border:1px solid var(--trait-fort); }
.pastille-or{ background:#FCF1DC; color:var(--or-fonce); }
.pastille-vert{ background:var(--vert-clair); color:#136B48; }
.pastille-brique{ background:var(--brique-clair); color:#9E3520; }
.pastille-ambre{ background:var(--ambre-clair); color:var(--ambre); }
.pastille-azur{ background:#E3F0FB; color:#1E5F94; }
.pastille-nuit{ background:var(--marine); color:#fff; }
.pastille-verre{ background:rgba(255,255,255,.12); color:#fff; border:1px solid var(--trait-inv); backdrop-filter:blur(8px); }

.point{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.point-vif{ position:relative; }
.point-vif::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid currentColor; opacity:.5; animation:pulse 2.2s var(--ease-io) infinite;
}
@keyframes pulse{ 0%{ transform:scale(.7); opacity:.6 } 70%,100%{ transform:scale(1.7); opacity:0 } }

/* ── 7. Cartes ─────────────────────────────────────────────────────────── */
.carte{
  background:var(--blanc); border-radius:var(--r5); padding:var(--e7);
  box-shadow:var(--o1), var(--liseré); border:1px solid var(--trait);
  transition:transform var(--t3) var(--ease), box-shadow var(--t3) var(--ease), border-color var(--t3) var(--ease);
}
.carte-flotte:hover{ transform:translateY(-6px); box-shadow:var(--o3); border-color:transparent; }
.carte-plate{ box-shadow:none; background:var(--craie); border-color:transparent; }
.carte-verre{
  background:rgba(255,255,255,.62); backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.7); box-shadow:var(--o2);
}
.carte-nuit{ background:var(--nuit-2); border-color:var(--trait-inv); color:var(--txt-inv); }
.carte-nuit h3,.carte-nuit h4{ color:#fff; }
.carte-sm{ padding:var(--e6); border-radius:var(--r4); }
.carte-xs{ padding:var(--e5); border-radius:var(--r3); }

/* Carte avec halo au survol qui suit la souris */
.carte-halo{ position:relative; overflow:hidden; }
.carte-halo::before{
  content:""; position:absolute; width:340px; height:340px; border-radius:50%;
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(75,155,224,.16),transparent 68%);
  opacity:0; transition:opacity var(--t3) var(--ease); pointer-events:none;
}
.carte-halo:hover::before{ opacity:1; }

/* Vignette d'icône */
.vignette{
  width:48px; height:48px; border-radius:var(--r3); flex:none;
  display:grid; place-items:center; background:var(--craie); color:var(--marine);
  transition:transform var(--t3) var(--ressort), background-color var(--t3) var(--ease);
}
.vignette svg{ width:22px; height:22px; }
.vignette-or{ background:#FCF1DC; color:var(--or-fonce); }
.vignette-azur{ background:#E3F0FB; color:#1E5F94; }
.vignette-vert{ background:var(--vert-clair); color:#136B48; }
.vignette-marine{ background:var(--g-marine); color:#fff; }
.vignette-lg{ width:60px; height:60px; border-radius:var(--r4); }
.vignette-lg svg{ width:28px; height:28px; }
.carte-flotte:hover .vignette{ transform:scale(1.08) rotate(-4deg); }

/* ── 8. Formulaires ────────────────────────────────────────────────────── */
.champ{ display:flex; flex-direction:column; gap:7px; }
.champ label,.etiquette{
  font-size:var(--fs-xs); font-weight:600; color:var(--marine); letter-spacing:-.005em;
}
.saisie{
  width:100%; padding:13px 16px; border-radius:var(--r2);
  background:var(--blanc); border:1.5px solid var(--trait-fort);
  font-size:var(--fs-sm); color:var(--txt);
  transition:border-color var(--t1) var(--ease), box-shadow var(--t1) var(--ease), background-color var(--t1) var(--ease);
}
.saisie::placeholder{ color:var(--txt-tres-doux); }
.saisie:hover{ border-color:rgba(22,50,79,.3); }
.saisie:focus{ outline:none; border-color:var(--azur); box-shadow:0 0 0 4px rgba(75,155,224,.16); }
.saisie[aria-invalid="true"]{ border-color:var(--brique); box-shadow:0 0 0 4px rgba(196,70,44,.12); }
textarea.saisie{ min-height:110px; resize:vertical; line-height:1.55; }
.aide{ font-size:var(--fs-xs); color:var(--txt-tres-doux); }
.erreur{ font-size:var(--fs-xs); color:var(--brique); font-weight:500; }

/* Champ avec icône */
.champ-icone{ position:relative; }
.champ-icone .saisie{ padding-left:44px; }
.champ-icone > svg{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--txt-tres-doux); pointer-events:none;
}

/* Sélecteur maison */
.sel{ position:relative; }
.sel-btn{
  width:100%; padding:13px 42px 13px 16px; border-radius:var(--r2);
  background:var(--blanc); border:1.5px solid var(--trait-fort);
  font-size:var(--fs-sm); text-align:left; color:var(--txt);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  transition:border-color var(--t1) var(--ease), box-shadow var(--t1) var(--ease);
}
.sel-btn:hover{ border-color:rgba(22,50,79,.3); }
.sel-btn[aria-expanded="true"]{ border-color:var(--azur); box-shadow:0 0 0 4px rgba(75,155,224,.16); }
.sel-btn svg{ width:16px; height:16px; color:var(--txt-doux); transition:transform var(--t2) var(--ease); flex:none; }
.sel-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.sel-menu{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:60;
  background:var(--blanc); border-radius:var(--r3); border:1px solid var(--trait);
  box-shadow:var(--o3); padding:6px; max-height:280px; overflow:auto;
  opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none;
  transition:opacity var(--t2) var(--ease), transform var(--t2) var(--ease);
}
.sel-menu.ouvert{ opacity:1; transform:none; pointer-events:auto; }
.sel-opt{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; padding:10px 12px; border-radius:var(--r1);
  font-size:var(--fs-sm); text-align:left; color:var(--txt);
  transition:background-color var(--t1) var(--ease);
}
.sel-opt:hover,.sel-opt.actif{ background:var(--craie); }
.sel-opt.actif{ font-weight:600; color:var(--marine); }
.sel-opt svg{ width:15px; height:15px; color:var(--vert); }

/* Interrupteur */
.bascule{ display:inline-flex; align-items:center; gap:11px; cursor:pointer; user-select:none; }
.bascule input{ position:absolute; opacity:0; width:0; height:0; }
.bascule-piste{
  width:44px; height:26px; border-radius:var(--rond); background:var(--craie-2);
  position:relative; flex:none; transition:background-color var(--t2) var(--ease);
}
.bascule-piste::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background:var(--blanc); box-shadow:var(--o1);
  transition:transform var(--t2) var(--ressort);
}
.bascule input:checked + .bascule-piste{ background:var(--marine); }
.bascule input:checked + .bascule-piste::after{ transform:translateX(18px); }
.bascule input:focus-visible + .bascule-piste{ outline:2.5px solid var(--azur); outline-offset:3px; }

/* Case et radio */
.coche{ display:inline-flex; align-items:flex-start; gap:11px; cursor:pointer; font-size:var(--fs-sm); line-height:1.5; }
.coche input{ position:absolute; opacity:0; width:0; height:0; }
.coche-boite{
  width:20px; height:20px; border-radius:6px; flex:none; margin-top:1px;
  border:1.5px solid var(--trait-fort); background:var(--blanc);
  display:grid; place-items:center;
  transition:background-color var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.coche-boite svg{ width:12px; height:12px; color:#fff; opacity:0; transform:scale(.5); transition:opacity var(--t1) var(--ease), transform var(--t1) var(--ressort); }
.coche input:checked + .coche-boite{ background:var(--marine); border-color:var(--marine); }
.coche input:checked + .coche-boite svg{ opacity:1; transform:none; }
.coche input:focus-visible + .coche-boite{ outline:2.5px solid var(--azur); outline-offset:3px; }

/* Segments */
.segments{ display:inline-flex; padding:4px; background:var(--craie); border-radius:var(--rond); gap:2px; position:relative; }
.segments button{
  position:relative; z-index:2; padding:9px 18px; border-radius:var(--rond);
  font-size:var(--fs-xs); font-weight:600; color:var(--txt-doux);
  transition:color var(--t2) var(--ease);
}
.segments button.actif{ color:var(--marine); }
.segments-curseur{
  position:absolute; z-index:1; top:4px; bottom:4px; border-radius:var(--rond);
  background:var(--blanc); box-shadow:var(--o1);
  transition:transform var(--t3) var(--ressort), width var(--t3) var(--ressort);
}

/* ── 9. Mouvement ──────────────────────────────────────────────────────── */
[data-anim]{ opacity:0; will-change:transform,opacity; }
[data-anim="monte"]{ transform:translateY(28px); }
[data-anim="descend"]{ transform:translateY(-22px); }
[data-anim="gauche"]{ transform:translateX(-32px); }
[data-anim="droite"]{ transform:translateX(32px); }
[data-anim="zoom"]{ transform:scale(.93); }
[data-anim="flou"]{ filter:blur(10px); transform:translateY(14px); }
[data-anim].vu{
  opacity:1; transform:none; filter:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
  transition-delay:var(--retard,0ms);
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  [data-anim]{ opacity:1 !important; transform:none !important; filter:none !important; }
}

/* Révélation de titre mot par mot */
/* .mots ne force aucun display : il peut être un h1 (block) ou un span (inline) */
/* ── Titres qui s'écrivent ────────────────────────────────────────────────
   Le texte reste STRICTEMENT intact : aucun élément inséré, aucune propriété
   de mise en page modifiée. On peint simplement un dégradé par-dessus les
   lettres (background-clip:text) et on le fait glisser : les mots apparaissent
   dans l'ordre de lecture, comme si la phrase s'écrivait.
   La coupe des lignes ne peut pas changer — c'est un effet de peinture.
   Sans le support de background-clip, le titre s'affiche normalement.        */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ecrit{
    background-image:linear-gradient(100deg,
      currentColor 0%, currentColor 48%,
      transparent 54%, transparent 100%);
    background-size:300% 100%;
    background-repeat:no-repeat;
    background-position:100% 0;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    transition:background-position 1.45s cubic-bezier(.22,1,.36,1);
  }
  .ecrit.vu{ background-position:0 0; }
}
@media(prefers-reduced-motion:reduce){
  .ecrit{ background-image:none !important; -webkit-text-fill-color:currentColor !important; }
}

/* Titres : animation AU NIVEAU DU BLOC, jamais au niveau des mots.
   Découper un titre en mots suppose de créer des éléments dans le flux du texte —
   inline-block change la coupe des lignes, et un `filter` sur de l'inline est promu
   en couche par WebKit, ce qui revient au même. Deux moteurs, deux résultats.
   On garde donc le texte intact : c'est le titre entier qui monte et apparaît,
   exactement comme le reste de la page. Aucun risque, aucun recalcul. */
.mots{ text-wrap:normal; }

/* Compteur */
.compteur{ font-variant-numeric:tabular-nums; }

/* Fond maillé animé */
.maille{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.maille span{
  position:absolute; border-radius:50%; filter:blur(64px); opacity:.5;
  animation:derive 22s var(--ease-io) infinite alternate;
}
.maille span:nth-child(1){ width:52vw; height:52vw; left:-14vw; top:-22vw; background:rgba(75,155,224,.34); }
.maille span:nth-child(2){ width:40vw; height:40vw; right:-10vw; top:-8vw; background:rgba(239,176,51,.3); animation-delay:-7s; }
.maille span:nth-child(3){ width:44vw; height:44vw; left:32vw; bottom:-26vw; background:rgba(168,211,245,.42); animation-delay:-13s; }
@keyframes derive{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(3vw,-2vw,0) scale(1.1); }
  100%{ transform:translate3d(-2vw,3vw,0) scale(.95); }
}

/* Grille de fond fine */
.trame{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--trait) 1px,transparent 1px),
                   linear-gradient(90deg,var(--trait) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%);
}

/* Flottement doux */
.flotte{ animation:flotte 7s var(--ease-io) infinite alternate; }
@keyframes flotte{ from{ transform:translateY(0) } to{ transform:translateY(-14px) } }
.flotte-2{ animation:flotte 9s var(--ease-io) -3s infinite alternate; }
.flotte-3{ animation:flotte 8s var(--ease-io) -5s infinite alternate; }

/* Barre de progression de lecture */
.progression{
  position:fixed; top:0; left:0; height:3px; z-index:200;
  background:var(--g-or); width:0; border-radius:0 3px 3px 0;
  transition:width .1s linear;
}

/* Chargement */
.squelette{
  background:linear-gradient(100deg,var(--craie) 30%,var(--craie-2) 50%,var(--craie) 70%);
  background-size:220% 100%; animation:brille 1.4s linear infinite; border-radius:var(--r2);
}
@keyframes brille{ from{ background-position:180% 0 } to{ background-position:-80% 0 } }
.tourne{ animation:tourne .8s linear infinite; }
@keyframes tourne{ to{ transform:rotate(360deg) } }

/* ── 10. Entête public ─────────────────────────────────────────────────── */
.entete{
  position:fixed; top:0; left:0; right:0; z-index:120; height:var(--entete-h);
  display:flex; align-items:center;
  transition:background-color var(--t3) var(--ease), box-shadow var(--t3) var(--ease),
             backdrop-filter var(--t3) var(--ease), transform var(--t3) var(--ease);
}
.entete.colle{
  background:rgba(251,249,245,.82); backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 1px 0 var(--trait), 0 6px 24px rgba(14,20,32,.05);
}
.entete.cache{ transform:translateY(-100%); }
.entete-in{ display:flex; align-items:center; gap:var(--e7); width:100%; }
.marque{ display:flex; align-items:center; gap:10px; flex:none; }
.marque svg{ width:30px; height:30px; }
.marque b{ font-family:var(--f-titre); font-size:1.09rem; font-weight:700; letter-spacing:-.03em; color:var(--encre); }
.nav{ display:flex; align-items:center; gap:var(--e6); flex:none; }
.nav a{ font-size:var(--fs-sm); font-weight:500; color:var(--txt-doux); white-space:nowrap;
        transition:color var(--t1) var(--ease); position:relative; }
.nav a:hover{ color:var(--marine); }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px;
  background:var(--or); transform:scaleX(0); transform-origin:right; transition:transform var(--t2) var(--ease);
}
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.burger{ display:none; width:42px; height:42px; border-radius:var(--r2); place-items:center; }
.burger span{ display:block; width:19px; height:2px; border-radius:2px; background:var(--encre); transition:transform var(--t2) var(--ease), opacity var(--t1) var(--ease); }
.burger span + span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media(max-width:1020px){
  .nav,.entete .btn-nav{ display:none; }
  .burger{ display:grid; }
}
.menu-mobile{
  position:fixed; inset:var(--entete-h) 0 0; z-index:110;
  background:var(--papier); padding:var(--e7) var(--gouttiere);
  display:flex; flex-direction:column; gap:var(--e5);
  opacity:0; transform:translateY(-12px); pointer-events:none;
  transition:opacity var(--t2) var(--ease), transform var(--t2) var(--ease);
  overflow-y:auto;
}
.menu-mobile.ouvert{ opacity:1; transform:none; pointer-events:auto; }
.menu-mobile a{ font-family:var(--f-titre); font-size:1.6rem; font-weight:700; letter-spacing:-.03em; }

/* ── 11. Superpositions ────────────────────────────────────────────────── */
.voile{
  position:fixed; inset:0; z-index:190; background:rgba(14,20,32,.44);
  backdrop-filter:blur(4px); opacity:0; pointer-events:none;
  transition:opacity var(--t2) var(--ease);
}
.voile.ouvert{ opacity:1; pointer-events:auto; }
.modale{
  position:fixed; z-index:200; left:50%; top:50%; width:min(560px,calc(100vw - 32px));
  max-height:calc(100vh - 64px); overflow:auto;
  background:var(--blanc); border-radius:var(--r5); box-shadow:var(--o4);
  padding:var(--e8); transform:translate(-50%,-46%) scale(.96); opacity:0; pointer-events:none;
  transition:opacity var(--t2) var(--ease), transform var(--t3) var(--ressort);
}
.modale.ouvert{ opacity:1; transform:translate(-50%,-50%); pointer-events:auto; }
.tiroir{
  position:fixed; z-index:200; top:0; right:0; bottom:0; width:min(520px,100vw);
  background:var(--blanc); box-shadow:var(--o4); overflow-y:auto;
  transform:translateX(100%); transition:transform var(--t3) var(--ease);
}
.tiroir.ouvert{ transform:none; }

.toasts{ position:fixed; z-index:220; right:20px; bottom:20px; display:flex; flex-direction:column; gap:10px; }
.toast{
  display:flex; align-items:center; gap:11px; padding:14px 18px;
  background:var(--nuit); color:#fff; border-radius:var(--r3); box-shadow:var(--o4);
  font-size:var(--fs-sm); font-weight:500; max-width:380px;
  animation:toast-in .45s var(--ressort);
}
.toast svg{ width:18px; height:18px; flex:none; }
.toast-ok svg{ color:#54D6A0; }
.toast-ko svg{ color:#FF8B72; }
.toast.sort{ animation:toast-out .3s var(--ease-io) forwards; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(16px) scale(.94) } to{ opacity:1; transform:none } }
@keyframes toast-out{ to{ opacity:0; transform:translateX(24px) scale(.96) } }

.info{ position:relative; display:inline-flex; }
.info::after{
  content:attr(data-info); position:absolute; bottom:calc(100% + 9px); left:50%;
  transform:translateX(-50%) translateY(4px); white-space:nowrap;
  background:var(--nuit); color:#fff; font-size:var(--fs-xs); font-weight:500;
  padding:7px 11px; border-radius:8px; opacity:0; pointer-events:none; z-index:80;
  transition:opacity var(--t1) var(--ease), transform var(--t1) var(--ease);
}
.info:hover::after{ opacity:1; transform:translateX(-50%); }

/* ── 12. Tableau ───────────────────────────────────────────────────────── */
.tableau-boite{ overflow-x:auto; border-radius:var(--r4); border:1px solid var(--trait); background:var(--blanc); }
table.tab{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
table.tab th{
  text-align:left; font-size:var(--fs-xs); font-weight:600; color:var(--txt-doux);
  padding:13px 18px; border-bottom:1px solid var(--trait); white-space:nowrap;
  background:var(--craie); position:sticky; top:0; z-index:2;
}
table.tab td{ padding:15px 18px; border-bottom:1px solid var(--trait); vertical-align:middle; }
table.tab tbody tr{ transition:background-color var(--t1) var(--ease); }
table.tab tbody tr:hover{ background:rgba(242,238,231,.6); }
table.tab tbody tr:last-child td{ border-bottom:0; }

/* ── 13. Divers ────────────────────────────────────────────────────────── */
.filet{ height:1px; background:var(--trait); border:0; }
.filet-or{ height:3px; width:56px; border-radius:3px; background:var(--g-or); border:0; }
.pied{ background:var(--g-nuit); color:rgba(246,244,239,.72); padding-block:var(--e11) var(--e7); }
.pied h4{ color:#fff; font-family:var(--f-ui); font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--e4); }
.pied a{ font-size:var(--fs-sm); color:rgba(246,244,239,.72); transition:color var(--t1) var(--ease); }
.pied a:hover{ color:#fff; }
.pied li + li{ margin-top:11px; }
.pied-bas{ margin-top:var(--e9); padding-top:var(--e6); border-top:1px solid var(--trait-inv); display:flex; justify-content:space-between; gap:var(--e4); flex-wrap:wrap; font-size:var(--fs-xs); }

.eviter{ position:absolute; left:-9999px; top:0; padding:12px 18px; background:var(--marine); color:#fff; border-radius:0 0 var(--r2) 0; z-index:300; }
.eviter:focus{ left:0; }

/* Sur petit écran, une pastille longue doit pouvoir se replier */
@media(max-width:560px){
  .pastille{ white-space:normal; text-align:center; line-height:1.35; }
}

/* Dans une pile verticale, une pastille garde sa largeur naturelle.
   Quand elle doit être centrée, on l'enveloppe dans .rang.centre. */
.pile > .pastille, .pile-2 > .pastille, .pile-3 > .pastille, .pile-4 > .pastille,
.pile-5 > .pastille, .pile-6 > .pastille, .pile-7 > .pastille, .pile-8 > .pastille{
  align-self:flex-start;
}

/* ── 14. Grain ─────────────────────────────────────────────────────────────
   Un bruit très faible sur toute la page : casse le côté « aplat numérique »
   des grandes surfaces crème et donne de la matière aux fonds sombres.      */
body::after{
  content:""; position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.032; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
@media(prefers-reduced-motion:reduce){ body::after{ display:none; } }