/* ═══════════════════════════════════════════════════════════════
   STRATEG-IA — SYSTÈME DE DESIGN
   Source unique de vérité. Aucune couleur, taille ou valeur de
   rythme ne doit être écrite ailleurs que dans ce fichier.
   Socle : charte Strateg-IA. Les 4 valeurs de charte sont marquées ◆
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── ÉCHELLE ENCRE ─────────────────────────────────────────── */
  --ink-900:#070D18;   /* sol le plus profond             */
  --ink-850:#0A1120;   /* sol de page, registre nuit      */
  --ink-800:#0E1930;   /* variation de section            */
  --ink-700:#16233A;   /* ◆ CHARTE — surfaces, cartes     */
  --ink-600:#1E2E4A;   /* bordures sur nuit               */
  --ink-500:#2B3B5C;   /* séparateurs sur nuit            */
  --ink-400:#3B4762;   /* ◆ CHARTE — texte secondaire     */
  --ink-300:#5A6885;   /* texte atténué sur jour          */

  /* ── ÉCHELLE CYAN ──────────────────────────────────────────── */
  --cy-100:#E4F6FC;    /* voile clair                     */
  --cy-200:#B8E8F7;    /* texte sur nuit — 12:1           */
  --cy-300:#5FCFF0;    /* accent texte sur nuit — 8:1     */
  --cy-400:#01A9D6;    /* ◆ CHARTE — APLATS SEULEMENT     */
  --cy-500:#0891B8;    /* palier de dégradé               */
  --cy-600:#0B6E8F;    /* ◆ CHARTE — texte sur jour 5,8:1 */
  --cy-700:#08556F;    /* bordures, fin de dégradé        */
  --cy-800:#063D50;    /* base des halos                  */

  /* ── REGISTRE JOUR ─────────────────────────────────────────── */
  --day:#F5F8FA;       /* ◆ CHARTE — fond clair           */
  --day-alt:#EDF3F7;
  --rule:#D8DEE8;      /* ◆ CHARTE — filets               */
  --white:#FFFFFF;

  /* ── TEXTE SUR NUIT ────────────────────────────────────────── */
  --on:#EAF1F7;
  --on-2:#A8B8CE;
  --on-3:#7C8CA6;

  /* ── DÉGRADÉS (dérogation accordée par Nabil) ──────────────── */
  --grad-signal:linear-gradient(135deg,var(--cy-400),var(--cy-600));
  --grad-deep:linear-gradient(160deg,var(--cy-600),var(--ink-700));
  --halo:radial-gradient(circle,rgba(1,169,214,.32),transparent 68%);

  /* ── TYPOGRAPHIE ───────────────────────────────────────────── */
  --display:"Montserrat","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,sans-serif;
  --fs-display:clamp(2.1rem,6.4vw,5.4rem);
  --fs-open:clamp(1.75rem,4.2vw,3.4rem);
  --fs-h2:clamp(1.35rem,2.4vw,2rem);
  --fs-h3:1.12rem;
  --fs-lead:clamp(1.02rem,1.5vw,1.3rem);
  --fs-body:1rem;                            /* 16 px minimum   */
  --fs-small:.875rem;
  --fs-label:.72rem;

  /* ── RYTHME ────────────────────────────────────────────────── */
  --wrap:1180px;
  --gut:clamp(20px,5vw,48px);
  --sec:clamp(64px,9vw,132px);
  --s1:8px; --s2:14px; --s3:22px; --s4:34px; --s5:52px; --s6:80px;

  /* ── MOUVEMENT ─────────────────────────────────────────────── */
  --ease:cubic-bezier(.16,1,.3,1);
  --fast:.22s; --mid:.34s; --slow:.6s;

  --r:3px; --r-lg:5px;
  color-scheme:dark;
}

/* ═══════════════ BASE ═══════════════ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink-850); color:var(--on);
  font-family:var(--body); font-size:var(--fs-body); line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,canvas{max-width:100%; display:block}
img{height:auto}
a{color:var(--cy-300); text-decoration-thickness:1px; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--cy-300); outline-offset:3px; border-radius:2px}
::selection{background:var(--cy-600); color:var(--white)}

/* ═══════════════ TEXTURE ═══════════════ */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:99; opacity:.42; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.halo{position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; background:var(--halo)}

/* ═══════════════ LES DEUX REGISTRES ═══════════════
   Nuit = on montre ce qu'on sait faire.
   Jour = on dit ce qu'on ne fera pas.                      */
.reg{position:relative; padding:var(--sec) var(--gut); overflow:hidden}
/* Deux sections consecutives cumulaient leur marge verticale : jusqu a
   264 px de vide, qui se lit comme un element manquant plutot que comme
   une respiration. Le changement de fond suffit a marquer la rupture,
   la seconde section reduit donc sa marge haute. */
.reg + .reg{padding-top:calc(var(--sec) * .6)}
.reg-night{background:var(--ink-850); color:var(--on)}
.reg-deep{background:var(--ink-900); color:var(--on)}
.reg-day{background:var(--day); color:var(--ink-700)}
.reg-day-alt{background:var(--day-alt); color:var(--ink-700)}
.wrap{max-width:var(--wrap); margin-inline:auto; position:relative; z-index:2}
.wrap-narrow{max-width:760px}

/* ═══════════════ TYPOGRAPHIE ═══════════════ */
h1,h2,h3,h4{font-family:var(--display); font-weight:700; margin:0; text-wrap:balance}
/* Les titres n'ont aucune marge basse : c'est au texte qui suit de
   prendre ses distances. Sans cette regle le chapo se colle au titre
   partout ou une marge n'a pas ete posee a la main. */
h1 + p, h2 + p, h1 + ul, h2 + ul{margin-top:var(--s3)}
.card h1 + p, .card h2 + p{margin-top:0}
.t-display{font-size:var(--fs-display); line-height:.96; letter-spacing:-.035em}
.t-open{font-size:var(--fs-open); line-height:1.02; letter-spacing:-.028em}
h2{font-size:var(--fs-open); line-height:1.03; letter-spacing:-.026em}
h3{font-size:var(--fs-h3); line-height:1.3; letter-spacing:-.01em}
p{margin:0 0 var(--s3); max-width:65ch}
.lead{font-size:var(--fs-lead); line-height:1.6; max-width:58ch}
.tiny{font-size:.82rem; line-height:1.6}
.num{font-variant-numeric:tabular-nums; font-weight:600}

.reg-night .lead,.reg-deep .lead{color:var(--on-2)}
.reg-night .tiny,.reg-deep .tiny{color:var(--on-3)}
.reg-day .lead,.reg-day-alt .lead{color:var(--ink-400)}
.reg-day p,.reg-day-alt p{color:var(--ink-400)}
.reg-day .tiny,.reg-day-alt .tiny{color:var(--ink-300)}
.reg-day h1,.reg-day h2,.reg-day h3,
.reg-day-alt h1,.reg-day-alt h2,.reg-day-alt h3{color:var(--ink-700)}
.reg-night strong,.reg-deep strong{font-weight:600; color:var(--on)}
.reg-day strong,.reg-day-alt strong{font-weight:600; color:var(--ink-700)}

/* étiquette de section */
.eyebrow{
  font-family:var(--display); font-weight:500; font-size:var(--fs-label);
  letter-spacing:.2em; text-transform:uppercase; margin:0 0 var(--s3);
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:26px; height:2px; flex:none}
.reg-night .eyebrow,.reg-deep .eyebrow{color:var(--cy-300)}
.reg-night .eyebrow::before,.reg-deep .eyebrow::before{background:var(--cy-400)}
.reg-day .eyebrow,.reg-day-alt .eyebrow{color:var(--cy-600)}
.reg-day .eyebrow::before,.reg-day-alt .eyebrow::before{background:var(--cy-600)}

/* logo — typographique, jamais déformé, jamais de pictogramme */
.logo{font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.1; color:var(--white)}
.logo em{font-style:normal; color:var(--cy-400)}
.logo small{display:block; font-weight:500; font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--on-2); margin-top:3px; line-height:1.2}
.reg-day .logo,.reg-day-alt .logo{color:var(--ink-700)}
.reg-day .logo small,.reg-day-alt .logo small{color:var(--ink-300)}

/* accent dégradé sur titre — registre nuit uniquement */
.grad-txt{background:linear-gradient(100deg,var(--cy-300),var(--cy-400) 60%,var(--cy-600));
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* ═══════════════ BOUTONS ═══════════════ */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:0;
  font-family:var(--display); font-weight:500; font-size:.78rem; letter-spacing:.11em;
  text-transform:uppercase; padding:15px 26px; border-radius:var(--r); text-decoration:none;
  transition:transform var(--mid) var(--ease), box-shadow var(--mid), background var(--mid), border-color var(--mid);
}
.btn-primary{background:var(--grad-signal); color:var(--white)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(1,169,214,.7)}
.btn-ghost{background:transparent; color:var(--on); border:1px solid var(--ink-600)}
.btn-ghost:hover{border-color:var(--cy-500); background:rgba(1,169,214,.08); transform:translateY(-2px)}
.reg-day .btn-ghost,.reg-day-alt .btn-ghost{color:var(--ink-700); border-color:var(--rule)}
.reg-day .btn-ghost:hover,.reg-day-alt .btn-ghost:hover{border-color:var(--cy-600); background:var(--cy-100)}

/* ═══════════════ MARQUEUR DE DÉPENDANCE TECHNIQUE ═══════════════
   Le dispositif « selon votre logiciel ». Il porte AUSSI les trois
   paliers produit : un seul système, pas deux.
   ● autonome  ◐ vos réponses validées  ○ selon votre logiciel      */
.dep{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--display);
  font-weight:500; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  padding:7px 13px 7px 10px; border-radius:var(--r); white-space:nowrap;
}
.dep i{width:11px; height:11px; border-radius:50%; flex:none; font-style:normal}
.dep-1 i{background:var(--cy-400)}
.dep-2 i{background:linear-gradient(90deg,var(--cy-400) 50%,transparent 50%); border:1.5px solid var(--cy-500)}
.dep-3 i{background:transparent; border:1.5px solid var(--cy-500)}
.reg-day .dep-1,.reg-day-alt .dep-1{background:var(--cy-100); color:var(--cy-700); border:1px solid #C3E7F3}
.reg-day .dep-2,.reg-day-alt .dep-2{background:#EAF0F5; color:var(--ink-400); border:1px solid var(--rule)}
.reg-day .dep-3,.reg-day-alt .dep-3{background:transparent; color:var(--ink-400); border:1px dashed var(--cy-500)}
.reg-night .dep-1,.reg-deep .dep-1{background:rgba(1,169,214,.12); color:var(--cy-300); border:1px solid var(--cy-700)}
.reg-night .dep-2,.reg-deep .dep-2{background:rgba(255,255,255,.05); color:var(--on-2); border:1px solid var(--ink-500)}
.reg-night .dep-3,.reg-deep .dep-3{background:transparent; color:var(--on-2); border:1px dashed var(--cy-500)}

/* ═══════════════ CARTES ═══════════════ */
.card{
  border-radius:var(--r-lg); padding:24px 22px; display:flex; flex-direction:column; gap:12px;
  transition:transform var(--mid) var(--ease), border-color var(--mid), background var(--mid), box-shadow var(--mid);
}
.card p{margin:0; font-size:.92rem; line-height:1.6}
.reg-night .card,.reg-deep .card{background:rgba(255,255,255,.022); border:1px solid var(--ink-600)}
.reg-night .card:hover,.reg-deep .card:hover{
  transform:translateY(-3px); border-color:var(--cy-600); background:rgba(1,169,214,.055)}
.reg-day .card,.reg-day-alt .card{background:var(--white); border:1px solid var(--rule)}
.reg-day .card:hover,.reg-day-alt .card:hover{
  transform:translateY(-3px); border-color:var(--cy-500); box-shadow:0 18px 40px -22px rgba(11,35,58,.45)}
.card .foot{margin-top:auto; padding-top:12px; font-family:var(--display); font-weight:500;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase}
.reg-night .card .foot,.reg-deep .card .foot{border-top:1px solid var(--ink-600); color:var(--on-3)}
.reg-day .card .foot,.reg-day-alt .card .foot{border-top:1px solid var(--rule); color:var(--ink-300)}

/* ═══════════════ LE RAIL ═══════════════
   Desktop : courbe large en SVG, posée par la page.
   Mobile  : colonne verticale — composition native au petit écran. */
.spine{position:relative; padding-left:26px}
.spine::before{
  content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,var(--cy-300),var(--cy-400) 42%,rgba(1,169,214,0));
}
.spine-step{position:relative; margin-bottom:var(--s4)}
.spine-step:last-child{margin-bottom:0}
.spine-step::before{
  content:""; position:absolute; left:-26px; top:8px; width:9px; height:9px; border-radius:50%;
  background:var(--cy-400); box-shadow:0 0 0 4px rgba(1,169,214,.16);
}

/* ═══════════════ LES 8 FORMATS DE SECTION ═══════════════
   Règle : jamais deux sections consécutives dans le même format. */
.fmt-split{display:grid; gap:var(--s4); grid-template-columns:1fr}
.fmt-offset{display:grid; gap:var(--s3); grid-template-columns:1fr}
.fmt-compare{display:grid; gap:var(--s3); grid-template-columns:1fr}
.fmt-grid3{display:grid; gap:var(--s3); grid-template-columns:1fr}
.fmt-frieze{display:flex; gap:var(--s3); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:var(--s2)}
.fmt-frieze>*{flex:0 0 min(78vw,320px); scroll-snap-align:start}
.fmt-statement{max-width:20ch; font-family:var(--display); font-weight:700;
  font-size:var(--fs-display); line-height:.98; letter-spacing:-.035em}
.fmt-cond{border-left:2px dashed var(--cy-500); padding-left:var(--s3)}

@media(min-width:760px){
  .fmt-grid3{grid-template-columns:repeat(3,1fr)}
  .fmt-compare{grid-template-columns:1fr 1fr; gap:var(--s4)}
}
@media(min-width:900px){
  .fmt-split{grid-template-columns:.88fr 1.12fr; gap:var(--s6); align-items:center}
  .fmt-offset{grid-template-columns:repeat(3,1fr); gap:var(--s4)}
  .fmt-offset>*:nth-child(2){transform:translateY(38px)}
  .fmt-offset>*:nth-child(3){transform:translateY(76px)}
  .fmt-frieze{overflow:visible; display:grid; grid-template-columns:repeat(4,1fr)}
  .fmt-frieze>*{flex:none}
}

/* ═══════════════ MOUVEMENT ═══════════════
   Révélation par masque, jamais un simple fondu.
   L'état AU REPOS est visible : c'est .revealed qui est l'état par
   défaut. Le script ajoute .reveal seulement s'il peut l'animer. */
/* ORDRE CRITIQUE : .revealed doit venir APRES .reveal. A specificite
   egale c'est la derniere regle qui gagne — inverser les deux rend le
   contenu definitivement invisible. C'est arrive une fois. */
.reveal{opacity:0; transform:translateY(14px);
  animation:reveal-secours .01s linear 1.4s forwards}
/* Filet de securite EN CSS : si l'observateur ne se declenche jamais
   — script bloque, navigateur ancien, extension —, cette animation
   revele le contenu au bout de 1,4 s, sans aucun JavaScript. */
@keyframes reveal-secours{to{opacity:1; transform:none}}
.reveal.revealed{opacity:1; transform:none; animation:none;
  transition:opacity var(--mid) var(--ease), transform var(--slow) var(--ease)}
.stagger>*{transition-delay:calc(var(--i,0) * 60ms)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  .reveal{clip-path:none; opacity:1; transform:none}
  .fmt-offset>*{transform:none !important}
}

/* ═══════════════ NAVIGATION ═══════════════
   Le bouton d'audit est visible en permanence : la longueur de la
   page ne peut donc jamais piéger un visiteur prêt à convertir.   */
.nav{position:sticky; top:0; z-index:50; background:rgba(10,17,32,.86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:background var(--mid), border-color var(--mid)}
.nav.is-scrolled{background:rgba(7,13,24,.95); border-bottom-color:var(--ink-600)}
.nav-in{max-width:var(--wrap); margin-inline:auto; padding:11px var(--gut);
  display:flex; align-items:center; gap:var(--s3)}
.nav .logo{font-size:1.02rem; white-space:nowrap}  /* jamais de cesure dans le logo */
/* Baseline visible sous le logo, y compris dans la barre de navigation.
   Taille reduite et interligne serre pour ne pas epaissir la barre. */
.nav .logo{line-height:1.05}
.nav .logo small{font-size:.5rem; letter-spacing:.2em; margin-top:2px; line-height:1.2}
@media(max-width:420px){
  .nav .logo{font-size:.94rem}
  .nav .logo small{font-size:.44rem; letter-spacing:.16em}
}
.nav-links{display:none; gap:var(--s4); margin-inline:auto}
.nl{font-family:var(--display); font-weight:500; font-size:.74rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--on-2); text-decoration:none; transition:color var(--fast)}
.nl:hover,.nl[aria-current="page"]{color:var(--on)}
.nl[aria-current="page"]{color:var(--cy-300)}
.nav .btn{padding:11px 17px; font-size:.66rem; margin-left:auto}
.nav-toggle{margin-left:var(--s1); background:transparent; border:1px solid var(--ink-600);
  color:var(--on-2); border-radius:var(--r); padding:9px 12px; cursor:pointer;
  font-family:var(--display); font-weight:500; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase}
.nav-menu{border-top:1px solid var(--ink-600); background:var(--ink-900); padding:var(--s3) var(--gut)}
.nav-menu a{display:block; padding:12px 0; border-bottom:1px solid var(--ink-700)}
.nav-menu a:last-child{border-bottom:0}
@media(min-width:940px){
  .nav-links{display:flex}
  .nav .btn{margin-left:0}
  .nav-toggle{display:none}
  .nav-menu{display:none !important}
}

/* ═══════════════ HERO ═══════════════ */
.hero{position:relative; background:var(--ink-900); overflow:hidden; isolation:isolate;
  height:clamp(470px,80vh,800px)}
.hero canvas{position:absolute; inset:0; width:100%; height:100%}
.hero-vig{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse at 50% 48%,transparent 26%,rgba(7,13,24,.66) 82%)}
.hero-scrim{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg,rgba(7,13,24,.9) 0%,rgba(7,13,24,.6) 34%,rgba(7,13,24,0) 64%)}
/* align-items:flex-start est structurel, pas cosmetique : sans lui les
   enfants s'etirent sur toute la largeur et hero.js ne peut plus mesurer
   ou le texte s'arrete reellement. */
.hero-in{position:absolute; inset:0; z-index:4; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:flex-start; padding:var(--gut); pointer-events:none}
.hero-in>*{pointer-events:auto}
/* Les plafonds en vw garantissent structurellement que le texte
   n'atteint jamais le centre : la scene garde toujours une bande
   libre a droite, meme si la mesure de hero.js echouait. */
.hero h1{font-size:var(--fs-display); line-height:.96; letter-spacing:-.035em;
  margin:0 0 var(--s3); max-width:min(17ch,46vw); text-shadow:0 4px 40px rgba(7,13,24,.92)}
.hero .lead{margin:0 0 var(--s4); max-width:min(44ch,38vw); text-shadow:0 2px 24px rgba(7,13,24,.95)}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--s2)}
.hero .hero-cta{max-width:min(660px,52vw)}
.hero .btn .sm{display:none}   /* libelle court, active dans la media query mobile */
/* Le texte reste POSÉ SUR l'animation, sur mobile comme sur desktop.
   La non-superposition n'est pas obtenue en empilant : hero.js mesure
   la hauteur réelle du bloc de texte et compose la scène uniquement
   dans la bande libre au-dessus. Voir --hero-band. */
@media(max-width:760px){
  .hero-scrim{background:linear-gradient(0deg,rgba(7,13,24,.96) 0%,rgba(7,13,24,.82) 30%,rgba(7,13,24,0) 60%)}
  .hero-vig{background:radial-gradient(ellipse at 50% 32%,transparent 26%,rgba(7,13,24,.68) 80%)}
  .hero h1{font-size:1.95rem; max-width:100%}
  .hero .lead{font-size:.92rem; max-width:100%; margin-bottom:var(--s3)}
  .hero-cta{flex-direction:column; align-items:stretch; align-self:stretch}
  .hero-cta .btn{justify-content:center}
  /* Libelles courts : sur petit ecran les libelles longs passaient sur
     trois lignes et mangeaient la place de l'animation. */
  .hero .btn .lg{display:none}
  .hero .btn .sm{display:inline}
}

/* ═══════════════ BANDE DES MOTIFS D'APPEL ═══════════════
   Montre l'etendue en trois secondes, sans rien demander a lire. */
.band{background:var(--ink-900); border-block:1px solid var(--ink-600); overflow:hidden; padding:15px 0}
.band-track{display:flex; width:max-content; animation:band-slide 52s linear infinite}
.band-track b{font-family:var(--display); font-weight:500; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-3); padding:0 20px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:20px}
.band-track b::after{content:""; width:4px; height:4px; border-radius:50%; background:var(--cy-600); flex:none}
@keyframes band-slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .band-track{animation:none; width:auto; flex-wrap:wrap; justify-content:center; gap:4px 0}
  .band-track>b:nth-child(n+13){display:none}
}

/* ═══════════════ « L'APPEL » — DEMONSTRATION ═══════════════ */
.appel{background:var(--ink-900); border:1px solid var(--ink-600); border-radius:var(--r-lg);
  overflow:hidden; margin-top:var(--s4); box-shadow:0 24px 60px -20px rgba(3,10,24,.75)}
.appel-top{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; justify-content:space-between;
  padding:15px 19px; border-bottom:1px solid var(--ink-700); background:rgba(255,255,255,.018)}
.wave{display:flex; align-items:center; gap:3px; height:24px}
.wave b{width:3px; border-radius:2px; background:var(--cy-400); height:5px; display:block; opacity:.45;
  transition:height .18s ease, opacity .18s ease}
.appel.is-live .wave b{opacity:1}
.clock{font-weight:600; font-variant-numeric:tabular-nums; font-size:.82rem; color:var(--cy-300)}
.chips{display:flex; flex-wrap:wrap; gap:8px; padding:17px 19px; border-bottom:1px solid var(--ink-700)}
.chip{font-family:var(--body); font-size:.83rem; line-height:1.35; text-align:left; padding:9px 14px;
  border-radius:var(--r); border:1px solid var(--ink-600); background:rgba(255,255,255,.028);
  color:var(--on-2); cursor:pointer; transition:all var(--fast) var(--ease)}
.chip:hover{border-color:var(--cy-500); color:var(--on); transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--grad-signal); border-color:transparent; color:var(--white); font-weight:600}
.appel-stage{display:grid; grid-template-columns:1fr}
.talk{padding:19px; display:flex; flex-direction:column; gap:11px; min-height:320px}
.turn{max-width:88%; padding:11px 15px; border-radius:var(--r); font-size:.9rem; line-height:1.55;
  animation:rise .34s var(--ease) both}
@keyframes rise{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
.t-agent{background:rgba(1,169,214,.1); border-left:2px solid var(--cy-400); color:var(--on)}
.t-pat{background:rgba(255,255,255,.045); border-left:2px solid var(--ink-500); color:var(--on-2); align-self:flex-end}
.turn u{display:block; text-decoration:none; font-family:var(--display); font-weight:500; font-size:.58rem;
  letter-spacing:.16em; text-transform:uppercase; opacity:.65; margin-bottom:5px}
.panel{padding:19px; background:rgba(255,255,255,.014); display:flex; flex-direction:column; gap:var(--s2)}
.verdict{border-radius:var(--r); padding:15px 16px}
.v-traite{background:rgba(1,169,214,.12); border:1px solid var(--cy-700)}
.v-transf{background:rgba(255,255,255,.05); border:1px solid var(--ink-500)}
.verdict b{font-family:var(--display); font-weight:700; font-size:1rem; display:block; color:var(--white)}
.verdict span{font-size:.84rem; color:var(--on-2)}
.fiche{border:1px solid var(--ink-600); border-radius:var(--r); overflow:hidden}
.fiche-h{font-family:var(--display); font-weight:500; font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; padding:9px 14px; background:rgba(1,169,214,.09); color:var(--cy-300);
  border-bottom:1px solid var(--ink-600)}
.fiche dl{margin:0}
.fiche .r{display:grid; grid-template-columns:104px 1fr; gap:10px; padding:9px 14px;
  border-bottom:1px solid rgba(255,255,255,.05); font-size:.83rem; animation:rise .3s var(--ease) both}
.fiche .r:last-child{border-bottom:0}
.fiche dt{font-family:var(--display); font-weight:500; font-size:.6rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--on-3); padding-top:3px}
.fiche dd{margin:0; color:var(--on)}
.urg{color:#FFD9A0; font-weight:600}
@media(min-width:900px){
  .appel-stage{grid-template-columns:1.25fr .95fr}
  .talk{border-right:1px solid var(--ink-700)}
}

/* ═══════════════ ARCHITECTURE EN COUCHES ═══════════════ */
.layers{display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s4)}
.layer{display:grid; grid-template-columns:1fr; gap:var(--s2); padding:20px 22px;
  border-radius:var(--r-lg); position:relative; overflow:hidden;
  transition:border-color var(--mid), background var(--mid)}
.layer::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad-signal)}
.reg-night .layer,.reg-deep .layer{border:1px solid var(--ink-600); background:rgba(255,255,255,.022)}
.reg-night .layer:hover,.reg-deep .layer:hover{border-color:var(--cy-600); background:rgba(1,169,214,.05)}
.reg-day .layer,.reg-day-alt .layer{border:1px solid var(--rule); background:var(--white)}
.layer-n{font-family:var(--display); font-weight:500; font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase}
.reg-night .layer-n,.reg-deep .layer-n{color:var(--cy-300)}
.reg-day .layer-n{color:var(--cy-600)}
.layer h3{margin:3px 0 0}
.layer-items{display:flex; flex-wrap:wrap; gap:8px}
.layer-items span{font-size:.8rem; padding:6px 11px; border-radius:var(--r)}
.reg-night .layer-items span,.reg-deep .layer-items span{
  background:rgba(1,169,214,.09); border:1px solid var(--ink-600); color:var(--on-2)}
.reg-day .layer-items span{background:var(--cy-100); border:1px solid #C3E7F3; color:var(--cy-700)}
@media(min-width:820px){.layer{grid-template-columns:236px 1fr; align-items:center; gap:var(--s4)}}

/* ═══════════════ MOMENT — carte de frise horaire ═══════════════ */
.moment{display:flex; flex-direction:column; gap:9px}
.moment .h{font-family:var(--display); font-weight:700; font-size:1.3rem; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1.1}
.reg-day .moment .h,.reg-day-alt .moment .h{color:var(--cy-600)}
.reg-night .moment .h,.reg-deep .moment .h{color:var(--cy-300)}
.moment .w{font-family:var(--display); font-weight:500; font-size:.6rem; letter-spacing:.15em;
  text-transform:uppercase; opacity:.8}

/* ═══════════════ LÉGENDE DE DÉPENDANCE ═══════════════ */
.legend-bar{display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s4)}

/* ═══════════════ FORMULAIRE ═══════════════ */
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field-row{display:grid; grid-template-columns:1fr; gap:var(--s3)}
@media(min-width:560px){.field-row{grid-template-columns:1fr 1fr}}
.field label,.check span{font-size:.86rem; line-height:1.5}
.field label{font-family:var(--display); font-weight:500; font-size:.68rem;
  letter-spacing:.13em; text-transform:uppercase}
.opt{font-family:var(--body); font-weight:400; font-size:.68rem; letter-spacing:0;
  text-transform:none; opacity:.6; margin-left:6px}
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:1rem; line-height:1.5; padding:12px 14px;
  border-radius:var(--r); width:100%; min-width:0;
  transition:border-color var(--fast), background var(--fast)}
.field textarea{resize:vertical; min-height:96px}
.reg-night .field label,.reg-deep .field label{color:var(--on-2)}
.reg-night .field input,.reg-night .field select,.reg-night .field textarea,
.reg-deep .field input,.reg-deep .field select,.reg-deep .field textarea{
  background:rgba(255,255,255,.04); border:1px solid var(--ink-600); color:var(--on)}
.reg-night .field input::placeholder,.reg-night .field textarea::placeholder,
.reg-deep .field input::placeholder,.reg-deep .field textarea::placeholder{color:var(--on-3)}
.reg-night .field input:focus,.reg-night .field select:focus,.reg-night .field textarea:focus,
.reg-deep .field input:focus,.reg-deep .field select:focus,.reg-deep .field textarea:focus{
  border-color:var(--cy-500); background:rgba(1,169,214,.06)}
.reg-day .field label,.reg-day-alt .field label{color:var(--ink-400)}
.reg-day .field input,.reg-day .field select,.reg-day .field textarea,
.reg-day-alt .field input,.reg-day-alt .field select,.reg-day-alt .field textarea{
  background:var(--white); border:1px solid var(--rule); color:var(--ink-700)}
.reg-day .field input:focus,.reg-day .field select:focus,.reg-day .field textarea:focus{
  border-color:var(--cy-600); background:var(--cy-100)}
.check{display:flex; gap:11px; align-items:flex-start; cursor:pointer}
.check input{margin-top:4px; width:17px; height:17px; flex:none; accent-color:var(--cy-400)}
.reg-night .check span,.reg-deep .check span{color:var(--on-2)}
.reg-day .check span,.reg-day-alt .check span{color:var(--ink-400)}

/* ═══════════════ FAQ — ACCORDÉON ═══════════════ */
.faq{border-top:1px solid var(--rule)}
.reg-night .faq,.reg-deep .faq{border-top-color:var(--ink-600)}
.faq details{border-bottom:1px solid var(--rule)}
.reg-night .faq details,.reg-deep .faq details{border-bottom-color:var(--ink-600)}
.faq summary{cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:1.02rem; line-height:1.35;
  letter-spacing:-.01em; transition:color var(--fast)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  margin-top:-8px; border-right:2px solid var(--cy-500); border-bottom:2px solid var(--cy-500);
  transform:rotate(45deg); transition:transform var(--mid) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.reg-day .faq summary{color:var(--ink-700)}
.reg-day .faq summary:hover,.reg-day-alt .faq summary:hover{color:var(--cy-600)}
.reg-night .faq summary,.reg-deep .faq summary{color:var(--on)}
.faq details>*:not(summary){padding-bottom:4px}
.faq p{margin:0 0 18px; max-width:70ch}

/* ═══════════════ PIED DE PAGE ═══════════════ */
.foot-site{background:var(--ink-900); border-top:1px solid var(--ink-600); padding:var(--s6) var(--gut) var(--s4)}
.foot-in{max-width:var(--wrap); margin-inline:auto; display:grid; gap:var(--s4); grid-template-columns:1fr}
.foot-nav{display:flex; flex-direction:column; gap:10px}
.foot-legal{max-width:var(--wrap); margin:var(--s4) auto 0; padding-top:var(--s3);
  border-top:1px solid var(--ink-700); font-size:.78rem; color:var(--on-3)}
@media(min-width:760px){.foot-in{grid-template-columns:1.4fr 1fr 1fr}}