/* =========================================================================
   Stackflow v2 — feuille de style
   Design source : stackflow.pen · frames « 2. Accueil — Grid Noir » + méga-menu
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Surfaces sombres */
  --void:#070A08;      --void-2:#0B100D;
  --panel:#0D1310;     --panel-2:#101614;
  --line:#FFFFFF1C;    --line-2:#FFFFFF33;
  --rule:#FFFFFF24;    --rule-soft:#FFFFFF12;
  --hair:#FFFFFF0A;

  /* Texte sur sombre */
  --fg:#FFFFFF;        --fg-2:#A6AEA9;      --fg-3:#69726D;

  /* Surfaces claires */
  --paper:#FFFFFF;     --paper-2:#F1F3F1;
  --ink:#0A0A0A;       --ink-2:#5C635E;     --ink-3:#9AA19C;
  --rule-lt:#0A0A0A1F;

  /* Marque */
  --green:#05D98F;     --green-2:#04A972;   --green-3:#03714D;
  --green-4:#023A29;   --green-ink:#02261B; --mint:#7CF3C2;

  /* Accents fonctionnels des maquettes */
  --blue:#4A9FD8;      --amber:#F5B740;     --red:#FF6B57;

  /* Accents des trames de pixels (hero + charnières) */
  --px-blue:#1F5FA8;   --px-green:#9DFF8E;

  /* Typo */
  --display:"Funnel Sans",system-ui,sans-serif;
  --body:"Geist",system-ui,sans-serif;
  --cap:"Geist Mono",ui-monospace,monospace;

  /* Grille */
  --shell:1456px;
  --gutter:32px;
  --rail:384px;

  /* Mouvement */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.25,.8,.25,1);
  --t-fast:.18s;
  --t-mid:.34s;
  --t-slow:.7s;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0; background:var(--void); color:var(--fg);
  font-family:var(--body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,p,figure,blockquote,ul{margin:0}
ul{padding:0; list-style:none}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
img{max-width:100%; display:block}
svg{width:1em; height:1em; display:block; flex:none}
input{font:inherit}
:focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:2px}

.skip-link{
  position:fixed; top:8px; left:8px; z-index:200; padding:10px 16px;
  background:var(--green); color:var(--green-ink); font-weight:600; border-radius:6px;
  transform:translateY(-160%); transition:transform var(--t-mid) var(--e-out);
}
.skip-link:focus-visible{transform:none}

.shell{width:100%; max-width:var(--shell); margin-inline:auto}
.cap{
  font-family:var(--cap); font-size:10px; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; line-height:1.3;
}
.mock__spacer{flex:1 1 auto; min-width:0}
.is-green{color:var(--green)}
.is-mute{color:var(--fg-3)}

/* ---------- 3. Révélations au scroll ------------------------------------- */
[data-reveal]{
  opacity:0; transform:translate3d(0,22px,0);
  transition:opacity .8s var(--e-out), transform .8s var(--e-out), filter .8s var(--e-out);
  filter:blur(6px);
  transition-delay:var(--rd,0ms);
}
[data-reveal].is-in{opacity:1; transform:none; filter:none}

/* ---------- 3 bis. Ecran de chargement ------------------------------------
   Deux temps distincts, portes par deux etats sur <html> :

   1. `is-loading` — voile noir, logotype geant (un CLONE du logo du header,
      donc jamais un second fichier a maintenir). A la sortie il recule en
      zoom arriere et s'efface, puis le voile s'efface a son tour.
   2. `is-intro` — la page est la, mais elle entre en scene dans l'ordre :
      d'abord le logo a sa place dans la nav, ensuite le reste du header,
      enfin le hero et les revelations au scroll.

   Le voile est display:none par defaut ; seul le script en <head> arme le
   premier etat, donc sans JS (ou en mouvement reduit) la page s'affiche
   directement et aucune de ces regles ne s'applique. */
.loader{display:none}
html.is-loading, html.is-loading body{overflow:hidden}
html.is-loading .loader{
  display:flex; position:fixed; inset:0; z-index:300;
  align-items:center; justify-content:center;
}

.loader__veil{
  position:absolute; inset:0; background:var(--void);
  transition:opacity .45s var(--e-out) .2s;  /* part APRES le zoom arriere */
}
.loader.is-out .loader__veil{opacity:0}

/* Le leger 1.045 -> 1 fait « poser » la marque pendant le temps d'arret, au
   lieu de la laisser inerte ; la sortie repart dans l'autre sens, en reculant. */
.loader__logo{
  position:relative; width:min(72vw,820px); color:var(--fg);
  opacity:0; transform:scale(1.045); transform-origin:50% 50%;
  will-change:transform,opacity;
  transition:opacity .5s var(--e-out), transform .62s var(--e-out);
}
.loader.is-in .loader__logo{opacity:1; transform:none}
/* Doit rester APRES .is-in : meme specificite, c'est l'ordre qui tranche. */
.loader.is-out .loader__logo{
  opacity:0; transform:scale(.84);
  transition:transform .66s var(--e-out), opacity .46s var(--e-out) .08s;
}

/* Uniquement le svg racine : les <svg> imbriques du logotype portent leur
   geometrie en attributs (x/y/width/height), les passer a 100% les ecraserait. */
.loader__logo > svg{width:100%; height:auto; display:block}

/* Le tiret vert s'allume juste apres le mot, pour que la marque « se termine »
   au lieu d'apparaitre d'un bloc. */
.loader__logo .brand__mark-dash{opacity:0; transition:opacity .38s var(--e-out) .32s}
.loader.is-in .loader__logo .brand__mark-dash{opacity:1}

/* --- Entree en scene ---
   Tout ce qui est au-dessus de la ligne de flottaison part a 0 des le premier
   etat : sinon, au basculement is-loading -> is-intro, ces elements passeraient
   de 1 a 0 avec la transition armee et on les verrait s'effacer une fois le
   voile parti. */
html.is-loading .brand__mark,
html.is-loading .topbar, html.is-intro .topbar,
html.is-loading .nav, html.is-intro .nav,
html.is-loading .header__cta, html.is-intro .header__cta,
html.is-loading .burger, html.is-intro .burger{opacity:0}

/* Les filets du header sont retenus eux aussi : sans ca, on verrait le squelette
   vide du header se dessiner pendant que le voile s'efface. Ils reviennent avec
   le logo, qu'ils encadrent. (.header transitionne deja sa border-color.) */
html.is-loading .header{border-bottom-color:transparent}
html.is-loading .brand{border-right-color:transparent}
html.is-intro-anim .brand{transition:border-color .55s var(--e-out)}

/* Les transitions ne sont armees que le temps de l'intro, puis retirees : rien
   ne subsiste sur ces elements une fois la page en place. */
html.is-intro-anim .brand__mark,
html.is-intro-anim .topbar,
html.is-intro-anim .nav,
html.is-intro-anim .header__cta,
html.is-intro-anim .burger{transition:opacity .55s var(--e-out)}
html.is-intro-anim .topbar{transition-delay:.05s}
html.is-intro-anim .nav,
html.is-intro-anim .burger{transition-delay:.13s}
html.is-intro-anim .header__cta{transition-delay:.21s}

/* Le hero ne joue son intro qu'une fois le header en place. */
html.is-loading .hero__px, html.is-intro .hero__px,
html.is-loading .hero__title .line > span,
html.is-intro .hero__title .line > span{animation-play-state:paused}

/* ---------- 4. Bandeau CII ----------------------------------------------- */
.topbar{background:var(--panel); border-bottom:1px solid var(--line)}
.topbar__in{
  display:flex; align-items:center; gap:12px; height:40px;
  padding-inline:var(--gutter);
}
.topbar__dot{
  width:5px; height:5px; border-radius:50%; background:var(--green); flex:none;
  animation:pulse 2.6s var(--e-soft) infinite;
}
@keyframes pulse{
  0%,100%{opacity:1; box-shadow:0 0 0 0 #05D98F66}
  50%{opacity:.55; box-shadow:0 0 0 6px #05D98F00}
}
.topbar__label{color:var(--green)}
.topbar__sep{width:1px; height:10px; background:var(--line-2); flex:none}
.topbar__text{color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar__link{
  color:var(--fg); margin-left:20px; white-space:nowrap;
  position:relative; padding-bottom:2px;
}
.topbar__link::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px; background:var(--green);
  transform:scaleX(0); transform-origin:left; transition:transform var(--t-mid) var(--e-out);
}
.topbar__link:hover::after{transform:scaleX(1)}

/* ---------- 5. Header ---------------------------------------------------- */
.header{
  position:sticky; top:0; z-index:90;
  background:var(--void); border-bottom:1px solid var(--line);
  transition:background var(--t-mid) var(--e-soft), border-color var(--t-mid) var(--e-soft),
             box-shadow var(--t-mid) var(--e-soft), color var(--t-mid) var(--e-soft);
}
.header::after{ /* jauge de progression de lecture */
  content:""; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:var(--green); transform:scaleX(var(--progress,0)); transform-origin:left;
  opacity:.85; transition:opacity var(--t-mid);
}
.header.is-stuck{background:#070A08F2; backdrop-filter:blur(14px); box-shadow:0 12px 40px #00000059}
.header__in{display:flex; align-items:stretch; height:72px}

.brand{
  display:flex; align-items:center; gap:8px; flex:none;
  width:158px; padding-inline:var(--gutter);
  border-right:1px solid var(--line);
}
/* Logotype vectoriel (extrait de la maquette, groupe « Logo ») plutot qu'un
   « stackflow » compose en Funnel Sans : la vraie marque a une ligature propre
   et son accent vert integre. `currentColor` porte l'encre, ce qui laisse
   l'inversion du mega-menu fonctionner sans second fichier. */
.brand__mark{width:94px; height:auto; display:block; flex:none; color:var(--fg)}
.brand__mark-dash{transition:opacity var(--t-mid) var(--e-out)}
.brand:hover .brand__mark-dash{opacity:.55}

.nav{display:flex; align-items:stretch; gap:34px; margin-left:auto; padding-inline:var(--gutter)}
.nav__item--mega{display:flex}
.nav__link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--fg-2); position:relative;
  transition:color var(--t-fast) var(--e-soft);
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:22px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform var(--t-mid) var(--e-out);
}
.nav__link:hover,.nav__link[aria-expanded="true"]{color:var(--fg)}
.nav__link:hover::after{transform:scaleX(1); transform-origin:left}
.nav__chev{width:14px; height:14px; transition:transform var(--t-mid) var(--e-out)}
.nav__link[aria-expanded="true"] .nav__chev{transform:rotate(180deg); color:var(--green)}

.header__cta{
  display:flex; align-items:center; flex:none;
  padding-inline:26px; background:var(--green); color:var(--green-ink);
  font-size:13px; font-weight:500; position:relative; overflow:hidden;
  transition:background var(--t-mid) var(--e-soft);
}
.header__cta::before{
  content:""; position:absolute; inset:0; background:var(--mint);
  transform:translateY(101%); transition:transform var(--t-mid) var(--e-out);
}
.header__cta:hover::before{transform:none}
.header__cta > *{position:relative}
.header__cta:hover{color:var(--green-ink)}

.burger{
  display:none; place-items:center; width:72px; flex:none;
  border-left:1px solid var(--line); color:var(--fg);
}
.burger svg{width:22px; height:22px}
.burger__close{display:none}
.burger[aria-expanded="true"] .burger__open{display:none}
.burger[aria-expanded="true"] .burger__close{display:block}

/* Header clair pendant l'ouverture du méga-menu */
.header.is-mega{background:var(--paper); border-bottom-color:var(--rule-lt)}
.header.is-mega .brand{border-right-color:transparent}
.header.is-mega .brand__mark{color:var(--ink)}
.header.is-mega .nav__link{color:var(--ink-2)}
.header.is-mega .nav__link:hover,
.header.is-mega .nav__link[aria-expanded="true"]{color:var(--ink)}
.header.is-mega .burger{color:var(--ink); border-left-color:var(--rule-lt)}

/* ---------- 6. Méga-menu ------------------------------------------------- */
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--paper); color:var(--ink);
  border-bottom:1px solid var(--rule-lt);
  box-shadow:0 30px 60px #0000001f;
  opacity:0; transform:translateY(-12px); pointer-events:none;
  transition:opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out);
  max-height:calc(100vh - 112px); overflow:auto; overscroll-behavior:contain;
}
.mega.is-open{opacity:1; transform:none; pointer-events:auto}
.mega__scrim{
  position:fixed; inset:0; z-index:80; background:#060A0759;
  opacity:0; pointer-events:none; transition:opacity var(--t-mid) var(--e-soft);
  backdrop-filter:blur(2px);
}
.mega__scrim.is-open{opacity:1; pointer-events:auto}

.mega__grid{display:grid; grid-template-columns:452px 300px 324px 1fr}
.mega__col{padding-top:38px; padding-bottom:24px}
.mega__col + .mega__col{border-left:1px solid var(--rule-lt)}
.mega__label{color:var(--ink-3); letter-spacing:.07em}
.mega__col--exp .mega__label{padding-inline:44px}
.mega__col--exp{padding-bottom:0}

/* colonnes en cascade à l'ouverture */
.mega.is-open .mega__col{animation:megaIn .5s var(--e-out) backwards}
.mega.is-open .mega__col:nth-child(1){animation-delay:.02s}
.mega.is-open .mega__col:nth-child(2){animation-delay:.07s}
.mega.is-open .mega__col:nth-child(3){animation-delay:.12s}
.mega.is-open .mega__col:nth-child(4){animation-delay:.17s}
@keyframes megaIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

.mega__items{margin-top:22px}
.mexp{
  display:flex; min-height:96px; align-items:stretch;
  border-top:1px solid var(--rule-lt);
  transition:background var(--t-mid) var(--e-soft);
}
.mexp:first-child{border-top:0}
.mexp__bar{width:3px; flex:none; background:transparent; transition:background var(--t-mid) var(--e-soft)}
.mexp__body{display:flex; flex-direction:column; gap:7px; padding:19px 40px 19px 41px; flex:1; min-width:0}
.mexp__row{display:flex; align-items:center; gap:13px}
.mexp__n{color:var(--ink-3); transition:color var(--t-mid)}
.mexp__t{font-family:var(--display); font-size:21px; letter-spacing:-.028em; color:var(--ink)}
.mexp__a{width:16px; height:16px; margin-left:auto; color:var(--ink-3);
  transition:transform var(--t-mid) var(--e-out), color var(--t-mid)}
.mexp__d{font-size:13px; line-height:1.5; color:var(--ink-2)}
.mexp:hover,.mexp.is-active{background:var(--paper-2)}
.mexp:hover .mexp__bar,.mexp.is-active .mexp__bar{background:var(--green)}
.mexp:hover .mexp__n,.mexp.is-active .mexp__n{color:var(--green)}
.mexp:hover .mexp__a{color:var(--ink); transform:translateX(5px)}

.mega__col--sect{display:flex; flex-direction:column; gap:18px}
.mega__col--sect .mega__label{padding-inline:var(--gutter)}
.msect li a{
  display:block; padding:9px var(--gutter); font-size:13.5px; color:var(--ink-2);
  transition:color var(--t-fast), background var(--t-fast), padding-left var(--t-mid) var(--e-out);
}
.msect li a:hover{color:var(--ink); background:var(--paper-2); padding-left:calc(var(--gutter) + 6px)}
.msect__all{
  display:inline-flex; align-items:center; gap:8px; margin:6px var(--gutter) 0;
  font-size:12.5px; font-weight:500; color:var(--ink);
}
.msect__all svg{width:13px; height:13px; transition:transform var(--t-mid) var(--e-out)}
.msect__all:hover svg{transform:translateX(5px)}

.mega__col--tech{display:flex; flex-direction:column; gap:20px; padding-inline:var(--gutter)}
.mtech{display:flex; flex-direction:column; gap:9px}
.mtech__c{font-size:11.5px; color:var(--ink-3)}
.mtech__tags{display:flex; flex-wrap:wrap; gap:7px}
.mtech__tags span{
  padding:6px 11px; border:1px solid var(--rule-lt); border-radius:7px;
  font-size:12.5px; color:var(--ink);
  transition:border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--e-out);
}
.mtech__tags span:hover{border-color:var(--green); background:#05D98F14; transform:translateY(-2px)}

.mega__col--une{display:flex; flex-direction:column; gap:20px; padding-inline:36px}
.mcase{
  display:flex; flex-direction:column; gap:14px; padding:22px;
  background:var(--void); color:var(--fg); border-radius:14px;
  transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.mcase:hover{transform:translateY(-3px); box-shadow:0 18px 40px #05d98f26}
.mcase__cap{color:var(--green); letter-spacing:.06em}
.mcase__t{font-family:var(--display); font-size:19px; line-height:1.25; letter-spacing:-.026em}
.mcase__stat{display:flex; align-items:center; gap:12px}
.mcase__stat b{font-family:var(--display); font-size:30px; line-height:1; letter-spacing:-.033em; font-weight:500}
.mcase__stat i{font-style:normal; font-size:11.5px; line-height:1.4; color:var(--fg-3)}
.mcase__link{
  display:flex; align-items:center; gap:8px; padding-top:10px;
  border-top:1px solid var(--rule-soft); font-size:13px; font-weight:500;
}
.mcase__link svg{width:14px; height:14px; margin-left:auto; color:var(--green); transition:transform var(--t-mid) var(--e-out)}
.mcase:hover .mcase__link svg{transform:translateX(5px)}
.mcii{display:flex; flex-direction:column; gap:8px; padding-top:20px; border-top:1px solid var(--rule-lt)}
.mcii__h{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500; color:var(--ink)}
.mcii__h svg{width:16px; height:16px; color:var(--green)}
.mcii__p{font-size:12.5px; line-height:1.5; color:var(--ink-2)}
.mcii__l{font-size:12.5px; font-weight:500; color:var(--green)}
.mcii__l:hover{text-decoration:underline; text-underline-offset:3px}

.megafoot{background:var(--paper-2); border-top:1px solid var(--rule-lt)}
.megafoot__in{display:flex; align-items:center; gap:26px; min-height:96px; padding:20px 44px}
.megafoot__txt{display:flex; flex-direction:column; gap:5px; margin-right:auto}
.megafoot__a{font-family:var(--display); font-size:18px; font-weight:500; letter-spacing:-.022em; color:var(--ink)}
.megafoot__b{font-size:13px; color:var(--ink-2)}
.megafoot__tel{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink)}
.megafoot__tel svg{width:15px; height:15px; color:var(--ink-2)}

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:8px;
  font-size:13.5px; font-weight:500; white-space:nowrap;
  transition:transform var(--t-fast) var(--e-out), background var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
}
.btn svg{width:14px; height:14px; transition:transform var(--t-mid) var(--e-out)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(4px)}
.btn--ghost{border:1px solid var(--rule-lt); color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--green{background:var(--green); color:var(--green-ink)}
.btn--green:hover{background:var(--mint); box-shadow:0 10px 26px #05d98f4d}
.btn--block{width:100%; justify-content:center; padding-block:15px}

/* ---------- 7. Drawer mobile --------------------------------------------- */
.drawer{
  position:fixed; inset:0; z-index:85; padding-top:var(--header-bottom,112px);
  background:var(--void); display:flex; flex-direction:column; justify-content:space-between;
  padding-inline:var(--gutter); padding-bottom:40px;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out);
  overflow:auto;
}
.drawer.is-open{opacity:1; transform:none; pointer-events:auto}
.drawer__nav{display:flex; flex-direction:column; padding-top:24px}
.drawer__nav a{
  font-family:var(--display); font-size:30px; font-weight:500; letter-spacing:-.03em;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.drawer.is-open .drawer__nav a{animation:megaIn .45s var(--e-out) backwards}
.drawer.is-open .drawer__nav a:nth-child(1){animation-delay:.05s}
.drawer.is-open .drawer__nav a:nth-child(2){animation-delay:.1s}
.drawer.is-open .drawer__nav a:nth-child(3){animation-delay:.15s}
.drawer.is-open .drawer__nav a:nth-child(4){animation-delay:.2s}
.drawer.is-open .drawer__nav a:nth-child(5){animation-delay:.25s}
.drawer__foot{display:flex; flex-direction:column; gap:18px; padding-top:32px}
.drawer__tel{display:inline-flex; align-items:center; gap:10px; color:var(--fg-2); font-size:14px}
.drawer__tel svg{width:16px; height:16px}
body.is-locked{overflow:hidden}

/* ---------- 8. Hero ------------------------------------------------------ */
.hero{
  position:relative; overflow:hidden; background:var(--void);
  border-bottom:1px solid var(--line);
  min-height:550px; display:flex; align-items:stretch;
}
/* Voile flou pose DEVANT la grille. backdrop-filter ne floute que ce qui est
   peint AVANT lui : le titre, insere apres dans le DOM, reste net. Les carres
   gardent leurs angles vifs, le flou ne fait que les faire deborder les uns
   sur les autres — ils se lisent en champ lumineux plutot qu'en trame seche. */
.hero__blur{
  position:absolute; inset:0; pointer-events:none;
  -webkit-backdrop-filter:blur(10px) saturate(1.25);
  backdrop-filter:blur(10px) saturate(1.25);
}

/* Degrade de lisibilite, pose par-dessus le flou et sous le titre. */
.hero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,9,7,.78) 0%, rgba(6,9,7,.55) 34%, rgba(6,9,7,.18) 66%, rgba(6,9,7,0) 100%);
}

/* Champ de pixels interactif sur fond noir. Dessine en canvas 2D plutot qu'en
   DOM : plusieurs centaines de cellules qui reagissent au curseur
   individuellement, ce que ni une grille de <div> ni un masque CSS ne savent
   faire a ce cout. */
.hero__px{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; pointer-events:none;
  opacity:0; animation:pxFieldIn 1.6s var(--e-out) .2s forwards;
}
@keyframes pxFieldIn{to{opacity:1}}

.hero__in{position:relative; display:flex; flex-direction:column; padding:56px var(--gutter) 40px; flex:1}
.hero__title{
  font-family:var(--display); font-weight:500; line-height:1.2;
  font-size:clamp(38px,6.05vw,88px); letter-spacing:-.034em;
}
.hero__title .line{display:block; overflow:hidden}
.hero__title .line > span{
  display:block; transform:translateY(105%);
  animation:lineUp 1s var(--e-out) forwards;
}
.hero__title .line:nth-child(1) > span{animation-delay:.12s}
.hero__title .line:nth-child(2) > span{animation-delay:.24s}
@keyframes lineUp{to{transform:none}}
.hero__title em{font-style:normal; color:var(--green)}

/* Segment « machine a ecrire ». Le connecteur (« de » / « d’ ») fait partie du
   texte frappe : l’elision impose « d’applications », pas « de application ».
   La frappe traverse donc la frontiere de couleur entre .type__con (blanc) et
   .type__word (vert), d’ou les deux noeuds de texte distincts. */
.type{white-space:nowrap}
.type__caret{
  display:inline-block; width:.057em; height:.75em; margin-left:.13em;
  background:var(--green); vertical-align:-.06em;
  animation:caret 1s steps(2,start) infinite;
}
.type.is-typing .type__caret{animation:none}
@keyframes caret{to{opacity:0}}

/* Le « qui sommes-nous » remonte dans le hero (maquette « Grid Noir ») : il se
   cale en pied de section, sous le champ de pixels et le voile. */
.hero__intro{margin-top:auto; padding-top:56px; display:flex; flex-direction:column; gap:20px}
.hero__label{color:var(--fg-3)}
.hero__text{max-width:520px; font-size:19px; line-height:1.42; letter-spacing:-.016em}

/* ---------- 9. Clients -------------------------------------------------- */
.clients{background:var(--void); border-bottom:1px solid var(--line)}
.clients__grid{display:grid; grid-template-columns:repeat(7,1fr)}
.clients__cell{
  display:grid; place-items:center; min-height:92px;
  padding:0 18px; border-right:1px solid var(--line);
  transition:background var(--t-mid) var(--e-soft);
}
/* Les logos sont servis en <img> : `currentColor` ne traverse pas la frontiere
   du document SVG, l'encre (#D6D6D6, valeur de la maquette) est donc portee par
   un attribut `color` dans chaque fichier. Le survol ne joue que sur l'opacite,
   ce qui preserve les logos bichromes (Academie de Toulouse). */
.clients__logo{
  display:block; width:auto; height:auto; max-width:100%; max-height:31px;
  opacity:.78; transition:opacity var(--t-mid) var(--e-soft);
}
.clients__cell:hover .clients__logo{opacity:1}
.clients__cell:last-child{border-right:0}
.clients__cell:hover{background:var(--panel)}

/* ---------- 10. Transitions pixellisées ---------------------------------
   Charnière entre une section sombre et une section claire (et l'inverse).
   Reprise du mécanisme `.transition-cont` de tr9.webflow.io.

   Deux grilles de 20 × 5 carrés, superposées et parfaitement alignées :
   dessous les carrés d'accent (bleu / vert en damier), dessus les carrés de
   la couleur d'arrivée. Les deux jouent la même dissolution mais avec deux
   tirages aléatoires indépendants — un carré dont l'accent est apparu et que
   le carré plein n'a pas encore recouvert « flashe » en couleur. Il n'y a
   aucune animation de couleur : le scintillement est un artefact de
   désynchronisation des deux couches.

   Le scroll ne pilote qu'UNE variable, --p (0 → 1) posée sur le conteneur.
   Chaque carré porte son propre seuil --t et calcule son opacité en CSS :
   l'opacité étant bornée à [0,1] par la spec, calc((--p - --t) * 40) produit
   une marche nette sans un seul style inline par image.

   Le facteur 40 n'est pas cosmétique : la référence anime en `duration: 0`,
   les carrés apparaissent d'un coup. Une rampe plus douce laisse chaque carré
   traîner en opacité partielle, et l'accent comme le carré plein se mélangent
   au fond — la charnière se remplit de gris et de verts ternes au lieu de
   couleurs franches. */
.trans{position:relative; overflow:hidden; --p:0}
.trans--bw{background:var(--void)}
.trans--wb{background:var(--paper)}

.trans__grid{position:relative; z-index:2}
.trans__grid--mix{position:absolute; top:0; left:0; right:0; z-index:1}
.trans__row{display:flex}

/* flex-basis 0 + aspect-ratio : la colonne fait exactement 1/20 de la largeur
   et le carré reste carré, sans jamais écrire de vw (la barre de défilement
   fausse 100vw). La hauteur du bloc en découle : 5 rangées = 25 % de la
   largeur de fenêtre. */
.trans__px{flex:1 1 0; aspect-ratio:1; opacity:calc((var(--p) - var(--t)) * 40)}
.trans--bw .trans__grid--solid .trans__px{background:var(--paper)}
.trans--wb .trans__grid--solid .trans__px{background:var(--void)}
.trans__px--a{background:var(--px-blue)}
.trans__px--b{background:var(--px-green)}

/* Le filet du rail traverse la charnière. Il est sous les grilles (z-index 0),
   donc visible seulement là où la dissolution n'est pas encore passée. */
.trans__rule{
  position:absolute; top:0; height:100%; left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--shell); z-index:0; pointer-events:none;
}
.trans__rule::before{
  content:""; position:absolute; top:0; bottom:0; left:var(--rail);
  border-left:1px solid var(--line);
}

/* ---------- 11. Résultats — diagonale sombre ------------------------------
   La section passe du blanc au noir (maquette « Variante A — Diagonale
   sombre »). Le degrade file du haut-droit (#060907) vers le bas-gauche
   (#00190F) : pen.dev compte ses angles dans le sens antihoraire depuis le
   haut, 125deg cote maquette valent donc 235deg en CSS. Seule la colonne
   d'intro le laisse transparaitre — les quatre panneaux sont noirs opaques. */
.results{
  color:var(--fg);
  background:linear-gradient(235deg, #060907 0%, #141A17 55%, #00190F 100%);
}
.results__grid{display:grid; grid-template-columns:var(--rail) repeat(4,1fr); min-height:620px}
.results__intro{
  display:flex; flex-direction:column; padding:64px var(--gutter) 36px;
  border-right:1px solid var(--line);
}
.results__title{font-family:var(--display); font-weight:500; line-height:1.06; letter-spacing:-.036em; font-size:clamp(30px,3.1vw,44px)}
.results__title span{display:block}
.results__title .is-accent{color:var(--green)}
.results__note{margin-top:auto; padding-top:24px; color:var(--fg-2); font-size:13px; line-height:1.4}

.panel{
  display:flex; flex-direction:column; justify-content:space-between;
  padding:26px 24px; background:#000; border-right:1px solid var(--line);
  position:relative; overflow:hidden;
}
.panel:last-child{border-right:0}

/* --- Remplissage vert au scroll -------------------------------------------
   Chaque panneau se remplit par le bas, l'un apres l'autre. Le voile fait
   toute la hauteur et remonte en `translateY` plutot que de grandir en
   `scaleY` : un scaleY ecraserait le liseré vif de 2px qui coiffe le
   remplissage.

   Le declencheur est `.is-filled`, pose sur la grille par un observateur dedie
   qui surveille le PREMIER chiffre. Il ne peut pas s'accrocher a `.is-in` du
   panneau : les panneaux font 620px et leurs chiffres sont cales tout en bas,
   donc le seuil de revelation (12% de la hauteur) est franchi bien avant que
   « 20 % » soit a l'ecran — le vert serait deja monte hors du champ de vision.

   La cascade elle-meme ne coute rien : elle reutilise le `--rd` que
   l'observateur de revelations pose deja depuis `data-reveal-delay`. */
.panel::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, var(--green) 0 2px, var(--green-4) 2px 100%);
  transform:translate3d(0,100%,0);
  transition:transform 1.05s var(--e-out);
  transition-delay:var(--rd,0ms);
}
.results__grid.is-filled .panel::before{transform:translate3d(0,0,0)}
.panel > *{position:relative; z-index:2}

/* Le numero passe d'un gris sourd sur noir a un gris clair une fois le vert
   monte : #69726D sur #023A29 ne tient que 2,5:1, insuffisant pour du 10px. */
.panel__n{color:var(--fg-3); transition:color var(--t-slow) var(--e-soft)}
.results__grid.is-filled .panel__n{color:var(--fg-2); transition-delay:var(--rd,0ms)}
.panel__foot{display:flex; flex-direction:column; gap:16px}
.panel__v{
  font-family:var(--display); font-size:clamp(36px,3.7vw,52px); font-weight:500;
  line-height:1; letter-spacing:-.038em; color:var(--fg);
}
.panel__l{
  font-size:13px; line-height:1.45; color:var(--fg-2); max-width:60ch;
}

/* ---------- 12. Expertises ----------------------------------------------- */
.expertise{background:var(--paper); color:var(--ink); padding-bottom:164px}
.exhead{border-top:1px solid var(--rule-lt)}

/* --- Empilement des 5 expertises (desktop) --------------------------------
   Chaque volet colle en haut de la fenetre. Comme le bloc englobant est
   .expertise (et non le volet lui-meme), un volet reste colle jusqu'a la fin
   de la section : le suivant remonte et le recouvre, au lieu de le pousser.
   La duree de defilement d'un volet = sa propre hauteur, soit une fenetre.

   `min-height` et non `height` : si le contenu depasse sur un ecran bas, le
   volet grandit au lieu d'etre coupe sous la ligne de flottaison. */
@media (min-width:981px){
  .expertise{padding-bottom:0}
  /* Un volet colle tant que .expertise defile encore. Sans reserve en bas, le
     dernier volet n'a aucune duree d'accroche : il passe centre puis repart
     aussitot.
     ATTENTION : un padding-bottom ne sert a rien ici. Le bloc englobant d'un
     enfant de niveau bloc est la *content box* du parent, et c'est elle qui
     borne la course du sticky — le padding tombe en dehors. Il faut une vraie
     boite dans le flux, d'ou ce ::after. Il n'est jamais visible : le volet 5
     le recouvre en restant colle. */
  .expertise::after{content:""; display:block; height:100svh}
  .exslide{
    position:sticky; top:0; min-height:100svh;
    display:flex; flex-direction:column; justify-content:center;
    background:var(--paper);
    box-shadow:0 -30px 64px #0A0A0A17;
  }
  .exslide:first-child{box-shadow:none}
  /* Le filet separateur n'a plus de sens une fois le contenu centre :
     c'est le recouvrement lui-meme qui marque la limite entre deux volets. */
  .exslide .exhead{border-top:0}
  /* Le header colle est toujours visible : on centre dans la bande reellement
     libre (fenetre moins header), pas dans la fenetre entiere — sinon le
     contenu parait remonte de la moitie de la hauteur du header. */
  .exslide{padding-top:72px}
  /* html a scroll-padding-top:96px pour les ancres classiques. Ici le volet
     doit atterrir pile a y=0 (il gere lui-meme le retrait du header), sinon un
     saut depuis le mega-menu le pose 96px trop bas. */
  .exslide{scroll-margin-top:-96px}
}
.exhead__grid{display:grid; grid-template-columns:var(--rail) 1fr; min-height:172px}
.exhead__rail{color:var(--ink-2); padding:24px var(--gutter); border-right:1px solid var(--rule-lt)}
.exhead__main{display:flex; align-items:flex-start; gap:24px; padding:24px var(--gutter)}
.exhead__h{
  max-width:800px; font-family:var(--display); font-weight:500; line-height:1.04;
  letter-spacing:-.038em; font-size:clamp(28px,3.65vw,52px);
}
.exhead__num{color:var(--ink-2); margin-left:auto; flex:none}

.excard__wrap{padding-inline:var(--gutter)}
.excard{
  display:grid; grid-template-columns:104px 300px 1fr; min-height:340px;
  background:var(--void); color:var(--fg); overflow:hidden; position:relative;
}
.excard__n{color:var(--fg-3); padding:26px 0 0 28px}
.excard__txt{display:flex; flex-direction:column; justify-content:space-between; gap:20px; padding:26px 24px 26px 0}
.excard__t{
  font-family:var(--display); font-size:21px; font-weight:500; line-height:1.2; letter-spacing:-.028em;
  transition:color var(--t-mid) var(--e-soft);
}
.excard:hover .excard__t{color:var(--green)}
.excard__d{font-size:12.5px; line-height:1.5; color:var(--fg-2)}
.excard__mock{padding-top:26px; min-width:0}

/* --- Coquille commune des maquettes --- */
.mock{
  height:100%; background:var(--panel-2);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color var(--t-slow) var(--e-soft);
}
.excard:hover .mock{border-color:#05D98F40}
.mock__bar{
  display:flex; align-items:center; gap:14px; height:46px; padding-inline:18px; flex:none;
  border-bottom:1px solid var(--rule-soft);
}
.mock__title{font-family:var(--display); font-size:16px; font-weight:500; letter-spacing:-.025em}
.mock__logo{
  display:grid; place-items:center; width:22px; height:22px; flex:none;
  background:var(--green-4); border:1px solid var(--green); border-radius:6px; color:var(--green);
}
.mock__logo svg{width:11px; height:11px}
.mock__logo--lg{width:30px; height:30px; border-radius:8px}
.mock__logo--lg svg{width:14px; height:14px}
.mock__src{display:flex; flex-direction:column; gap:2px; flex:none}
.mock__src i{font-family:var(--cap); font-size:8.5px; letter-spacing:.035em; text-transform:uppercase; color:var(--fg-3); font-style:normal}
.mock__src b{font-size:11.5px; font-weight:500}
.mock__filter{font-size:12px; color:var(--fg-2); flex:none; white-space:nowrap}

.avatars{display:flex; flex:none}
.av{
  display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  border:1.5px solid var(--panel-2); font-size:9px; font-weight:500; flex:none;
  font-style:normal;
  transition:transform var(--t-mid) var(--e-out);
}
.avatars .av + .av{margin-left:-7px}
.avatars:hover .av{transform:translateY(-2px)}
.av--g{background:#1E3A2E; color:#7CF3C2}
.av--b{background:#233246; color:#8FC4E8}
.av--y{background:#3A2E1E; color:#F5CE85}
.av--r{background:#3A2323; color:#F2A091}
.av--p{background:#2B2440; color:#B9A8E8}
.av--n{background:var(--panel); color:var(--fg-2)}
.av--lg{width:34px; height:34px; font-size:13px; border:0}
.av--xl{width:44px; height:44px; font-size:15px; border:0}

/* --- Maquette 1 : planning --- */
.week{display:grid; grid-template-columns:repeat(3,1fr); flex:1; min-height:0}
.day{display:flex; flex-direction:column; border-right:1px solid var(--rule-soft); min-width:0}
.day:last-child{border-right:0}
.day__h{padding:11px 16px; border-bottom:1px solid var(--rule-soft); color:var(--fg-3); letter-spacing:.045em}
.day__n{padding:9px 16px 3px; font-size:11.5px; color:var(--fg-3)}
.day__ev{display:flex; flex-direction:column; gap:7px; padding:4px 12px 12px}

.ev{
  display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:center;
  padding:9px 11px 9px 14px; background:var(--panel); position:relative; overflow:hidden;
  transition:background var(--t-fast) var(--e-soft), transform var(--t-fast) var(--e-out);
}
.ev::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:currentColor}
.ev:hover{transform:translateX(3px); background:#151D19}
.ev b{font-size:12px; font-weight:500; color:currentColor}
.ev i{font-family:var(--cap); font-size:9.5px; color:var(--fg-3); font-style:normal; text-align:right}
.ev em{grid-column:1/-1; font-style:normal; font-size:11px; color:var(--fg-2)}
.ev--wide{padding:9px 13px 9px 16px}
.ev--green{color:var(--green)} .ev--blue{color:var(--blue)}
.ev--amber{color:var(--amber)} .ev--red{color:var(--red)}
.ev--wide b{color:var(--fg)}
em.is-green{color:var(--green)} em.is-amber{color:var(--amber)} em.is-red{color:var(--red)}

/* --- Maquette 2 : PWA --- */
.mock--pwa{flex-direction:row}
.tour{display:flex; flex-direction:column; gap:11px; padding:18px 22px; flex:1; min-width:0}
.tour__head{display:flex; align-items:center; gap:12px}
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:6px;
  font-family:var(--cap); font-size:9.5px; letter-spacing:.02em; flex:none;
}
.pill svg{width:11px; height:11px}
.pill--amber{background:#F5B7401F; border:1px solid #F5B7404D; color:var(--amber)}
.pill--green{background:#05D98F1F; color:var(--green)}
.dot{width:5px; height:5px; border-radius:50%; flex:none; display:inline-block}
.dot--green{background:var(--green); animation:pulse 2.4s var(--e-soft) infinite}
.dot--amber{background:var(--amber)} .dot--red{background:var(--red)}
.tour__prog{display:flex; align-items:center; gap:11px; margin-top:auto}
.track{flex:1; height:4px; border-radius:2px; background:#FFFFFF14; overflow:hidden}
.track i{display:block; height:100%; width:0; border-radius:2px; background:var(--green);
  transition:width 1.4s var(--e-out) .2s}
.excard.is-in .track i{width:var(--w)}
.track__l{color:var(--fg-3); flex:none}

.device{position:relative; width:300px; flex:none; overflow:hidden}
.device__glow{
  position:absolute; left:20px; top:30px; width:260px; height:280px; border-radius:50%;
  background:radial-gradient(circle, #05D98F26, transparent 70%);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1); opacity:.9} 50%{transform:scale(1.14); opacity:.55}}
.phone{
  position:absolute; left:54px; top:26px; width:196px; height:320px;
  display:flex; flex-direction:column; gap:9px; padding:12px 11px 0;
  background:var(--void); border:1.5px solid var(--line-2); border-radius:26px; overflow:hidden;
  transition:transform var(--t-slow) var(--e-out);
}
.excard:hover .phone{transform:translateY(-8px)}
.phone__status{display:flex; align-items:center; gap:6px}
.phone__status b{font-family:var(--cap); font-size:9px; font-weight:500}
.phone__status svg{width:11px; height:11px; color:var(--fg-3)}
.phone__status .is-amber{color:var(--amber)}
.phone__t{font-family:var(--display); font-size:14px; font-weight:500}
.pcard{display:flex; flex-direction:column; gap:5px; padding:9px 10px; background:var(--panel); border-radius:8px}
.pcard b{font-size:11px; font-weight:500}
.pcard i{display:flex; align-items:center; gap:6px; font-style:normal; font-size:9.5px; color:var(--fg-2)}
.phone__sync{
  display:flex; align-items:center; justify-content:center; gap:7px; height:34px; margin-top:auto;
  margin-bottom:12px; background:var(--green); color:var(--green-ink); border-radius:8px;
  font-size:11.5px; font-weight:500;
}
.phone__sync svg{width:12px; height:12px}
.excard:hover .phone__sync svg{animation:spin 1.1s linear}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- Maquette 3 : conversation IA --- */
.callbar{
  display:flex; align-items:center; gap:14px; height:66px; padding-inline:18px; flex:none;
  background:var(--panel); border-bottom:1px solid var(--rule-soft);
}
.ident{display:flex; flex-direction:column; gap:3px; flex:none}
.ident b{font-size:13px; font-weight:500}
.ident i{font-style:normal; font-size:11px; color:var(--fg-3)}
.wave{display:flex; align-items:center; gap:2.5px; height:24px; flex:none}
.wave span{width:2px; border-radius:1px; background:#FFFFFF3D; height:8px; transform-origin:center}
.wave--lg{height:26px}
.excard:hover .wave span,.scard:hover .wave span{animation:bounce 1s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1.7)}}
.callbtn{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%; flex:none;
  background:var(--green); color:var(--green-ink); box-shadow:0 0 22px 2px #05D98F5C;
  animation:ring 3.4s var(--e-soft) infinite;
}
.callbtn svg{width:17px; height:17px}
.callbtn--lg{width:44px; height:44px} .callbtn--lg svg{width:19px; height:19px}
@keyframes ring{0%,86%,100%{transform:rotate(0)} 90%{transform:rotate(-12deg)} 94%{transform:rotate(12deg)}}

.chat{display:flex; flex-direction:column; gap:9px; padding:16px 18px; flex:1; min-height:0}
.bub{
  max-width:430px; padding:10px 13px; border-radius:10px; background:var(--panel);
  border:1px solid #05D98F3D; font-size:12px; line-height:1.45; color:var(--fg-2);
  opacity:0; transform:translateY(8px);
}
.bub--ai{margin-left:auto; background:#05D98F1A; color:var(--mint)}
.excard.is-in .bub{animation:bubIn .55s var(--e-out) forwards}
.excard.is-in .bub:nth-child(1){animation-delay:.25s}
.excard.is-in .bub:nth-child(2){animation-delay:.55s}
.excard.is-in .bub:nth-child(3){animation-delay:.85s}
.excard.is-in .bub:nth-child(4){animation-delay:1.15s}
@keyframes bubIn{to{opacity:1; transform:none}}

/* --- Maquette 4 : commandes --- */
.tbl{display:flex; flex-direction:column; flex:1; min-height:0}
.tbl__h,.tbl__r{display:grid; grid-template-columns:1fr 160px 170px 130px; align-items:center; padding-inline:18px}
.tbl__h{padding-block:10px; border-bottom:1px solid var(--rule-soft)}
.tbl__h span{color:var(--fg-3); font-size:9px; letter-spacing:.045em}
.tbl__r{min-height:45px; border-bottom:1px solid var(--hair); font-size:12px; color:var(--fg-2);
  transition:background var(--t-fast) var(--e-soft)}
.tbl__r:last-child{border-bottom:0}
.tbl__r:hover{background:#FFFFFF08}
.tbl__c{display:flex; align-items:center; gap:11px; color:var(--fg); font-size:12.5px; font-weight:500}
.tbl__c .av{width:26px; height:26px; font-size:10px; border:0}
.tag{
  display:inline-block; padding:4px 10px; border-radius:6px; font-size:11px; font-weight:500; font-style:normal;
}
.tag--green{background:#05D98F1F; border:1px solid #05D98F4D; color:var(--green)}
.tag--amber{background:#F5B7401F; border:1px solid #F5B7404D; color:var(--amber)}
.tag--red{background:#FF6B571F; border:1px solid #FF6B574D; color:var(--red)}
.tag--blue{background:#4A9FD81F; border:1px solid #4A9FD84D; color:var(--blue); font-size:10.5px}
.tag--solid{background:var(--green); color:var(--green-ink); font-family:var(--cap); font-size:10px; padding:3px 8px}

/* --- Maquette 5 : souveraineté --- */
.flow{display:flex; align-items:center; gap:14px; padding-inline:26px; flex:1; min-height:0}
.node{
  display:flex; flex-direction:column; gap:11px; width:250px; flex:none;
  padding:14px 15px; background:var(--panel); border:1px solid var(--rule-soft); border-radius:10px;
}
.node__r{display:flex; align-items:center; gap:11px}
.node__ic{
  display:grid; place-items:center; width:30px; height:30px; flex:none;
  background:var(--panel-2); border:1px solid var(--rule-soft); border-radius:8px; color:var(--fg-2);
}
.node__ic svg{width:14px; height:14px}
.node__r b{display:flex; flex-direction:column; gap:3px; font-size:12.5px; font-weight:500; min-width:0}
.node__r em{font-style:normal; font-size:10.5px; font-weight:400; color:var(--fg-3)}
.node .tag{align-self:flex-start}
.link{display:flex; flex-direction:column; align-items:center; gap:9px; flex:1; min-width:0}
.link .cap{color:var(--fg-3); font-size:9px; letter-spacing:.035em}
.link__rail{display:block; width:100%; height:2px; background:#05D98F1A; overflow:hidden; position:relative}
.link__rail b{
  position:absolute; inset:0; display:block;
  background:linear-gradient(90deg,#05D98F00,#05D98F);
  animation:flowRight 2.6s linear infinite;
}
.link--rev .link__rail b{background:linear-gradient(270deg,#05D98F00,#05D98F); animation-name:flowLeft}
@keyframes flowRight{from{transform:translateX(-100%)} to{transform:translateX(100%)}}
@keyframes flowLeft{from{transform:translateX(100%)} to{transform:translateX(-100%)}}
.core{
  display:grid; place-items:center; width:92px; height:92px; flex:none;
  background:var(--void); border:2px solid var(--green); border-radius:24px; color:var(--green);
  box-shadow:0 0 34px 2px #05D98F52; animation:breathe 5s ease-in-out infinite;
}
.core svg{width:38px; height:38px}
.guarantees{display:grid; grid-template-columns:repeat(3,1fr); min-height:60px; border-top:1px solid var(--rule-soft); flex:none}
.guarantees > span{
  display:flex; align-items:center; gap:10px; padding-inline:18px;
  border-right:1px solid var(--rule-soft);
}
.guarantees > span:last-child{border-right:0}
.guarantees svg{width:13px; height:13px; color:var(--green); flex:none}
.guarantees b{display:flex; flex-direction:column; gap:3px; font-size:11.5px; font-weight:500; min-width:0}
.guarantees em{font-style:normal; font-size:10px; font-weight:400; color:var(--fg-3)}

/* ---------- 13. Méthode 360 ---------------------------------------------- */
.method{background:var(--paper); color:var(--ink); border-top:1px solid #E6E6E6; overflow:hidden}
.method__grid{display:grid; grid-template-columns:1fr 1fr; min-height:900px}
.method__left{display:flex; flex-direction:column; justify-content:space-between; padding-bottom:52px}
.method__top{display:flex; flex-direction:column; gap:30px; padding:64px var(--gutter) 0}
.method__mark{display:flex; align-items:center; gap:16px; color:var(--ink-3); font-size:12px; letter-spacing:.02em}
.method__mark span{flex:1; height:1px; background:var(--rule-lt)}
.method__h{font-family:var(--display); font-weight:400; line-height:1; letter-spacing:-.038em; font-size:clamp(40px,5.55vw,80px)}
.method__h span{display:block}

.pillars{display:flex; flex-direction:column}
.pillar{
  display:flex; align-items:center; gap:16px; min-height:88px; width:100%; text-align:left;
  padding-right:var(--gutter); border-top:1px solid var(--rule-lt); background:transparent;
  transition:background var(--t-mid) var(--e-soft);
}
.pillar:last-child{border-bottom:1px solid var(--rule-lt)}
.pillar__bar{width:4px; align-self:stretch; background:transparent; flex:none;
  transition:background var(--t-mid) var(--e-soft), transform var(--t-mid) var(--e-out); transform:scaleY(0)}
.pillar__t{font-family:var(--display); font-size:clamp(21px,2.3vw,32px); letter-spacing:-.031em; padding-left:24px;
  transition:transform var(--t-mid) var(--e-out)}
.pillar__n{margin-left:auto; color:var(--ink-3); flex:none; transition:color var(--t-mid)}
.pillar:hover{background:#F7F7F7}
.pillar.is-active{background:#F7F7F7}
.pillar.is-active .pillar__bar,.pillar:hover .pillar__bar{background:var(--green); transform:none}
.pillar.is-active .pillar__n{color:var(--green)}
.pillar:hover .pillar__t{transform:translateX(4px)}

.method__right{position:relative; background:var(--void); color:var(--fg); overflow:hidden; padding:122px 80px 52px}
.method__glow{position:absolute; border-radius:50%; pointer-events:none}
.method__glow--g{left:104px; top:250px; width:520px; height:520px;
  background:radial-gradient(circle,#05D98F1F,transparent 70%); animation:breathe 9s ease-in-out infinite}
.method__glow--b{left:180px; top:370px; width:420px; height:420px;
  background:radial-gradient(circle,#4A9FD81A,transparent 70%); animation:breathe 11s ease-in-out infinite reverse}

.scard{position:relative; max-width:568px; background:var(--panel); border:1px solid var(--rule-soft); border-radius:16px; padding:16px 18px}
.scard--need{display:flex; flex-direction:column; gap:15px}
.scard__row{display:flex; align-items:center; gap:13px}
.scard__q{font-family:var(--display); font-size:clamp(17px,1.55vw,22px); line-height:1.3; letter-spacing:-.027em}
.scard--done{display:flex; align-items:center; gap:13px; flex-wrap:wrap}
.scard__ic{display:grid; place-items:center; width:44px; height:44px; flex:none;
  background:#05D98F1F; border:1px solid #05D98F4D; border-radius:12px; color:var(--green)}
.scard__ic svg{width:20px; height:20px}
.scard__btn{display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:9px;
  background:var(--paper); color:var(--ink); font-size:13px; font-weight:500; flex:none;
  transition:transform var(--t-fast) var(--e-out)}
.scard__btn svg{width:14px; height:14px}
.scard--done:hover .scard__btn{transform:translateY(-2px)}

.wire{position:relative; display:block; width:2px; height:86px; margin:20px auto; overflow:hidden; background:#05D98F14}
.wire i{position:absolute; inset:0; display:block; box-shadow:0 0 16px #05D98F8A}
.wire--down i{background:linear-gradient(180deg,#05D98F00,#05D98F); animation:flowDown 2.4s linear infinite}
.wire--up i{background:linear-gradient(0deg,#05D98F00,#05D98F); animation:flowUp 2.4s linear infinite}
@keyframes flowDown{from{transform:translateY(-100%)} to{transform:translateY(100%)}}
@keyframes flowUp{from{transform:translateY(100%)} to{transform:translateY(-100%)}}
.wirept{display:block; width:10px; height:10px; margin:-58px auto 48px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 14px 1px #4A9FD8A6; animation:pulse 2.2s var(--e-soft) infinite}
.wirept--bot{margin:-58px auto 48px}

.core360{
  width:200px; height:200px; margin-inline:auto; border-radius:46px; padding:3px;
  background:linear-gradient(135deg,var(--green),var(--blue));
  box-shadow:0 0 70px #05D98F4D;
  animation:core360 14s linear infinite;
}
@keyframes core360{to{filter:hue-rotate(20deg)}}
.core360__in{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; gap:5px;
  background:#050706; border-radius:43px;
}
.core360__m{font-family:var(--display); font-size:82px; font-weight:500; letter-spacing:-.049em; line-height:1}
.core360__d{color:var(--green); font-size:20px; animation:pulse 3s var(--e-soft) infinite}
.method__p{max-width:470px; margin-top:60px; font-size:12.5px; line-height:1.55; color:var(--fg-3)}

/* --- Onglets de la methode : 4 panneaux, un seul visible ------------------ */
.mpanel[hidden]{display:none}
/* L'animation est portee par .is-active : elle rejoue donc a chaque bascule.
   Au chargement elle s'execute une fois pour le panneau 01, hors ecran. */
.mpanel.is-active .scard,
.mpanel.is-active .core360,
.mpanel.is-active .method__p{animation:mpanelIn .55s var(--e-out) backwards}
.mpanel.is-active .scard--need{animation-delay:.04s}
.mpanel.is-active .core360{animation-delay:.12s}
.mpanel.is-active .scard--done{animation-delay:.2s}
.mpanel.is-active .method__p{animation-delay:.28s}
@keyframes mpanelIn{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

.scard__hero{display:flex; flex-direction:column; gap:12px}
.scard__ic--blue{background:#4A9FD81F; border-color:#4A9FD84D; color:var(--blue)}
.scard__ic--amber{background:#F5B7401F; border-color:#F5B7404D; color:var(--amber)}

/* 02 — lots de construction */
.mchips{display:flex; flex-wrap:wrap; gap:7px}
.mchip{
  padding:5px 11px; border-radius:7px; font-size:11.5px; color:var(--fg-3);
  border:1px solid var(--rule-soft); background:#FFFFFF08;
}
.mchip.is-done{color:var(--green); border-color:#05D98F4D; background:#05D98F14}
.mchip.is-live{color:var(--blue); border-color:#4A9FD84D; background:#4A9FD814}
.mchip.is-live::after{content:" ·"; animation:ellipsis 1.4s steps(4) infinite}
@keyframes ellipsis{0%{content:" ·"}33%{content:" ··"}66%{content:" ···"}}
.mprog{display:flex; align-items:center; gap:11px}
.mpanel.is-active .track i{width:var(--w)}

/* 03 — resultat de la suite de tests */
.qbar{display:flex; gap:2px; height:8px; width:100%}
.qbar i{display:block; border-radius:2px}
.qbar .is-ok{background:var(--green)}
.qbar .is-warn{background:var(--amber)}
.qbar .is-ko{background:var(--red)}
.qlegend{display:flex; flex-wrap:wrap; gap:8px 18px}
.qlegend b{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:400; color:var(--fg-3)}

/* 04 — charge serveur */
.spark{display:flex; align-items:flex-end; gap:3px; height:44px; width:100%}
.spark span{flex:1; border-radius:2px; background:#FFFFFF1F; transition:height .5s var(--e-out)}
.spark .is-peak{background:var(--amber); box-shadow:0 0 12px #F5B74066}
.spark__l{color:var(--fg-3)}

/* Onglets : etat clavier lisible sur fond clair */
.pillar[aria-selected="true"]{background:#F7F7F7}
.pillar:focus-visible{outline-offset:-3px}

/* ---------- 14. Témoignages ---------------------------------------------- */
.testi{background:var(--paper); color:var(--ink); border-top:1px solid var(--rule-lt)}
.testi__head{display:grid; grid-template-columns:var(--rail) 1fr; min-height:258px; border-bottom:1px solid var(--rule-lt)}
.testi__rail{color:var(--ink-2); padding:64px var(--gutter); border-right:1px solid var(--rule-lt); line-height:1.6}
.testi__title{display:flex; flex-direction:column; padding:64px var(--gutter) 24px}
.testi__title h2{font-family:var(--display); font-weight:500; line-height:1.06; letter-spacing:-.036em; font-size:clamp(32px,3.95vw,56px)}
.testi__title h2 span{display:block}
.testi__count{margin-top:auto; color:var(--ink-2)}
.testi__count b{color:var(--ink); font-weight:400}

.testi__body{display:block}
.quote{display:grid; grid-template-columns:var(--rail) 1fr; min-height:400px; border-bottom:1px solid var(--rule-lt)}
.quote__portrait{position:relative; overflow:hidden; border-right:1px solid var(--rule-lt); background:var(--paper-2)}
.quote__portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.quote__front{transition:transform 1.4s var(--e-out)}
.quote:hover .quote__front{transform:scale(1.05)}
.quote__tags{position:absolute; left:0; bottom:0; display:flex; flex-direction:column; align-items:flex-start}
.quote__name,.quote__role{padding:8px 14px; font-size:12.5px}
.quote__name{background:var(--ink); color:var(--paper); font-weight:500}
.quote__role{background:var(--green); color:var(--green-ink)}
.quote__content{display:flex; flex-direction:column; gap:32px; padding:36px var(--gutter) 44px}
.quote__text{max-width:820px; font-family:var(--display); font-weight:400; line-height:1.35; letter-spacing:-.03em; font-size:clamp(19px,1.9vw,27px)}
.quote__text span{display:block}
.quote__text .is-accent{color:var(--green-3)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); margin-top:auto; padding-top:0; border-top:1px solid var(--rule-lt); min-height:104px}
.stat{display:flex; flex-direction:column; justify-content:center; gap:6px; padding:16px 24px 16px 18px; border-left:2px solid var(--green)}
.stat b{font-family:var(--display); font-size:30px; font-weight:500; letter-spacing:-.033em; line-height:1}
.stat span{font-size:11.5px; line-height:1.45; color:var(--ink-2)}

/* ---------- 15. FAQ ------------------------------------------------------ */
.faq{background:var(--void); padding-block:100px}
.faq__grid{display:grid; grid-template-columns:var(--rail) 1fr}
.faq__rail{color:var(--fg-3); padding:30px var(--gutter); border-right:1px solid var(--line); line-height:1.6}
.faq__title{padding:30px var(--gutter) 34px; border-bottom:1px solid var(--line)}
.faq__title h2{font-family:var(--display); font-weight:500; line-height:1.06; letter-spacing:-.038em; font-size:clamp(30px,3.65vw,52px)}
.faq__title h2 span{display:block}

.qa{border-bottom:1px solid var(--line); transition:background var(--t-mid) var(--e-soft)}
.qa.is-open{background:var(--panel)}
.qa__q{
  display:flex; align-items:center; gap:24px; width:100%; text-align:left;
  padding:22px var(--gutter); font-family:var(--display); font-size:19px; font-weight:500; letter-spacing:-.026em;
  transition:color var(--t-fast)}
.qa__q > span:first-child{max-width:720px}
.qa__q:hover{color:var(--green)}
.qa__i{position:relative; width:17px; height:17px; margin-left:auto; flex:none}
.qa__i::before,.qa__i::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--fg-3);
  transform:translate(-50%,-50%); transition:transform var(--t-mid) var(--e-out), background var(--t-mid);
}
.qa__i::before{width:15px; height:1.8px}
.qa__i::after{width:1.8px; height:15px}
.qa.is-open .qa__i::before,.qa.is-open .qa__i::after{background:var(--green)}
.qa.is-open .qa__i::after{transform:translate(-50%,-50%) scaleY(0)}
.qa__a{
  display:grid; grid-template-rows:0fr; visibility:hidden;
  transition:grid-template-rows .45s var(--e-out), visibility 0s linear .45s;
}
.qa.is-open .qa__a{
  grid-template-rows:1fr; visibility:visible;
  transition:grid-template-rows .45s var(--e-out), visibility 0s;
}
.qa__a > div{overflow:hidden}
.qa__a p{
  max-width:700px; padding:0 var(--gutter) 24px; font-size:13.5px; line-height:1.6; color:var(--fg-2);
  opacity:0; transform:translateY(6px); transition:opacity .4s var(--e-out) .1s, transform .4s var(--e-out) .1s;
}
.qa.is-open .qa__a p{opacity:1; transform:none}

/* ---------- 16. CTA final ------------------------------------------------ */
.cta{background:var(--void)}
.cta__banner{position:relative; min-height:900px; display:flex; flex-direction:column; overflow:hidden; background:var(--panel)}
.cta__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cta__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#060A07B8 0%,#060A0740 42%,#060A07E6 100%);
}
.cta__mosaic{position:absolute; inset:0; overflow:hidden}
.cta__mosaic i{position:absolute; width:70px; height:70px; background:#fff;
  transition:opacity var(--t-slow) var(--e-soft)}
.cta__halo{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg,#fff 0 70px,transparent 70px 72px);
  -webkit-mask-image:repeating-linear-gradient(0deg,#000 0 70px,transparent 70px 72px),
              radial-gradient(circle 260px at var(--mx,50%) var(--my,50%),#000,transparent 70%);
  mask-image:repeating-linear-gradient(0deg,#000 0 70px,transparent 70px 72px),
             radial-gradient(circle 260px at var(--mx,50%) var(--my,50%),#000,transparent 70%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  opacity:0; transition:opacity var(--t-slow) var(--e-soft);
}
.cta__banner:hover .cta__halo{opacity:.14}
.cta__bar{
  position:relative; display:flex; align-items:center; gap:34px; min-height:56px;
  padding-inline:var(--gutter); border-bottom:1px solid var(--line); color:var(--fg-2);
}
.cta__title{position:relative; margin-top:auto; padding:0 var(--gutter) 44px}
.cta__title h2{font-family:var(--display); font-weight:500; line-height:1.04; letter-spacing:-.034em; font-size:clamp(36px,5.3vw,76px)}
.cta__title h2 span{display:block}
.cta__title .is-accent{color:var(--green)}

.cta__actions{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line)}
.cta__cell{display:flex; flex-direction:column; justify-content:space-between; gap:24px; min-height:150px; padding:24px var(--gutter)}
.cta__cell--recall{background:var(--panel); border-right:1px solid var(--line)}
.cta__cell--recall .cap{color:var(--fg-3)}
.cta__cell--rdv{background:var(--green); color:var(--green-ink); align-items:stretch;
  transition:background var(--t-mid) var(--e-soft)}
.cta__cell--rdv .cap{color:#00190FB3}
.cta__cell--rdv:hover{background:var(--mint)}
.cta__rdv{
  align-self:flex-end; font-family:var(--display); font-size:clamp(24px,2.3vw,32px); font-weight:500; letter-spacing:-.031em;
  transition:transform var(--t-mid) var(--e-out);
}
.cta__cell--rdv:hover .cta__rdv{transform:translateX(-8px)}

/* ---------- 17. Footer --------------------------------------------------- */
.footer{background:var(--void)}
.footer__top{display:grid; grid-template-columns:var(--rail) 1fr; min-height:210px; border-bottom:1px solid var(--line)}
.footer__brand{display:flex; flex-direction:column; gap:16px; padding:30px var(--gutter); border-right:1px solid var(--line)}
.footer__brand .brand{width:auto; padding:0; border:0}
.footer__desc{font-size:12.5px; line-height:1.55; color:var(--fg-3)}
.footer__nav{display:flex; gap:72px; padding:30px var(--gutter); flex-wrap:wrap}
.fcol{display:flex; flex-direction:column; gap:12px; width:170px}
.fcol .cap{color:var(--fg-3)}
.fcol a{font-size:13px; color:var(--fg-2); width:fit-content; position:relative}
.fcol a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--green);
  transform:scaleX(0); transform-origin:left; transition:transform var(--t-mid) var(--e-out)}
.fcol a:hover{color:var(--fg)}
.fcol a:hover::after{transform:scaleX(1)}
.footer__actions{display:flex; gap:22px; margin-left:auto; font-size:13px; height:fit-content}
.footer__actions a{color:var(--fg-2)}
.footer__actions a:hover{color:var(--fg)}
.footer__actions .is-green{color:var(--green)}

.footer__wordmark{padding:25px var(--gutter); color:var(--fg)}
/* Le positionnement des couches est porte par des <svg> imbriques (x/y/width/
   height), plus par un transform="translate() scale()" sur les <path> : une
   propriete CSS `transform` ne peut donc plus l'ecraser silencieusement. On
   continue neanmoins d'animer le <svg> racine pour le deplacement et seulement
   l'opacite sur les couches. */
.footer__wordmark svg{
  width:100%; height:auto; display:block;
  transform:translateY(18px); transition:transform 1s var(--e-out);
}
.footer__wordmark.is-in svg{transform:none}
.footer__wordmark svg svg{opacity:0; transition:opacity .9s var(--e-out)}
.footer__wordmark.is-in svg svg{opacity:1}
.footer__wordmark.is-in svg svg:nth-child(2){transition-delay:.10s}
.footer__wordmark.is-in svg svg:nth-child(3){transition-delay:.26s}
.footer__wordmark.is-in svg svg:nth-child(4){transition-delay:.18s}

.footer__legal{display:flex; align-items:center; gap:28px; min-height:56px; padding-inline:var(--gutter);
  color:var(--fg-3); flex-wrap:wrap}
.footer__legal a:hover{color:var(--fg)}

/* =========================================================================
   18. Responsive — desktop-first, on n'ajoute que les réductions
   ========================================================================= */

/* --- ≤ 1280 : on resserre la gouttière et le rail --- */
@media (max-width:1280px){
  :root{--gutter:24px; --rail:300px}
  .mega__grid{grid-template-columns:1fr 260px 280px}
  .mega__col--une{grid-column:1/-1; border-left:0; border-top:1px solid var(--rule-lt); padding-top:28px}
  .mega__col--exp .mega__label,.mexp__body{padding-inline:24px}
  .mexp__body{padding-inline:24px 24px}
  .megafoot__in{padding-inline:24px}
  .tbl__h,.tbl__r{grid-template-columns:1fr 110px 130px 110px}
  .device{width:250px}
  .method__right{padding:80px 40px 40px}
}

/* --- ≤ 1100 : les maquettes riches passent en mode compact --- */
@media (max-width:1100px){
  .excard{grid-template-columns:72px 260px 1fr}
  .excard__n{padding-left:20px}
  .week{grid-template-columns:repeat(2,1fr)}
  .week .day:nth-child(3){display:none}
  .flow{flex-direction:column; gap:10px; padding:18px 20px}
  .link{flex-direction:row; width:100%; gap:10px}
  .link__rail{flex:1}
  .node{width:100%}
  .core{width:70px; height:70px} .core svg{width:28px; height:28px}
  .guarantees{grid-template-columns:1fr; min-height:0}
  .guarantees > span{border-right:0; border-bottom:1px solid var(--rule-soft); padding-block:10px}
  .guarantees > span:last-child{border-bottom:0}
  .mock--sov{height:auto}
}

/* --- ≤ 980 : bascule tablette --- */
@media (max-width:980px){
  /* 10 colonnes au lieu de 20 : les carrés restent lisibles, le bloc passe
     à 50 % de la largeur de fenêtre en hauteur. Le filet du rail tomberait au
     milieu de la bande — on le retire, comme la référence. */
  .trans__px--wide{display:none}
  .trans__rule{display:none}

  html{scroll-padding-top:80px}
  .nav,.header__cta{display:none}
  .burger{display:grid; margin-left:auto}
  .brand{border-right:0}
  .mega{display:none}
  .topbar__text{display:none}
  .topbar__link{margin-left:auto}


  .clients__grid{grid-template-columns:repeat(4,1fr)}
  .clients__cell{min-height:76px; border-bottom:1px solid var(--line)}
  .clients__cell:nth-child(4n){border-right:0}
  /* 7 logos sur 4 colonnes : le dernier occupe la place vacante */
  .clients__cell:last-child{grid-column:span 2; border-right:0; border-bottom:0}

  .results__grid{grid-template-columns:1fr 1fr; min-height:0}
  .results__intro{grid-column:1/-1; border-right:0; border-bottom:1px solid var(--line); padding-top:48px}
  .panel{min-height:240px}
  .panel:nth-child(3),.panel:nth-child(5){border-right:0}
  .panel:nth-child(2),.panel:nth-child(3){border-bottom:1px solid var(--line)}

  .exhead__grid{grid-template-columns:1fr; min-height:0}
  .exhead__rail{border-right:0; border-bottom:1px solid var(--rule-lt); padding-block:18px}
  .exhead__main{padding-block:20px 28px}

  .excard{grid-template-columns:1fr; min-height:0}
  .excard__n{padding:22px 24px 0}
  .excard__txt{padding:12px 24px 24px}
  .excard__mock{padding:0 0 0 24px}
  .mock{min-height:320px}
  .mock--pwa{flex-direction:column}
  .device{width:100%; height:300px}
  .device__glow{left:50%; margin-left:-130px}
  .phone{left:50%; margin-left:-98px; top:10px; height:280px}
  .chat{padding:14px}
  .bub{max-width:88%}

  .method__grid{grid-template-columns:1fr; min-height:0}
  .method__top{padding-top:56px}
  .method__right{padding:64px 24px 40px}
  .scard{max-width:none}
  .core360{width:160px; height:160px; border-radius:38px}
  .core360__in{border-radius:35px}
  .core360__m{font-size:64px}

  .testi__head{grid-template-columns:1fr; min-height:0}
  .testi__rail{border-right:0; border-bottom:1px solid var(--rule-lt); padding-block:28px 20px}
  .testi__title{padding-block:24px 28px; gap:24px}
  .quote{grid-template-columns:1fr; min-height:0}
  .quote__portrait{border-right:0; height:340px}
  .quote__content{padding-block:28px 32px}
  .stats{grid-template-columns:1fr; min-height:0}
  .stat{border-left:2px solid var(--green); border-bottom:1px solid var(--rule-lt); padding-block:18px}

  .faq{padding-block:64px}
  .faq__grid{grid-template-columns:1fr}
  .faq__rail{border-right:0; border-bottom:1px solid var(--line); padding-block:22px}
  .faq__title{padding-block:24px 28px}
  .qa__q{gap:16px; font-size:17px}

  .cta__banner{min-height:600px}
  .cta__actions{grid-template-columns:1fr}
  .cta__cell--recall{border-right:0; border-bottom:1px solid var(--line)}

  .footer__top{grid-template-columns:1fr; min-height:0}
  .footer__brand{border-right:0; border-bottom:1px solid var(--line)}
  .footer__nav{gap:32px 48px; padding-block:28px}
  .footer__actions{width:100%; margin-left:0; padding-top:8px}
}

/* --- ≤ 640 : mobile --- */
@media (max-width:640px){
  :root{--gutter:20px}
  .topbar__in{gap:8px}

  .hero{min-height:auto}
  .hero__in{padding:44px var(--gutter) 120px}

  .recall{gap:14px}
  .recall__field{width:100%}
  .recall__cta{margin-left:0}

  .clients__grid{grid-template-columns:repeat(2,1fr)}
  .clients__cell:nth-child(n){border-right:1px solid var(--line)}
  .clients__cell:nth-child(2n){border-right:0}
  .clients__cell:last-child{grid-column:1/-1; border-right:0; border-bottom:0}

  .results__grid{grid-template-columns:1fr}
  .panel{min-height:200px; border-right:0; border-bottom:1px solid var(--line)}
  .panel:last-child{border-bottom:0}

  .expertise{padding-bottom:72px}
  .excard__mock{padding-left:20px}
  .mock__bar{gap:10px; padding-inline:12px; height:auto; padding-block:10px; flex-wrap:wrap}
  .mock__src,.mock__filter,.avatars{display:none}
  .week{grid-template-columns:1fr}
  .week .day:nth-child(2),.week .day:nth-child(3){display:none}
  .tour{padding:14px}
  /* Le tableau passe en fiches : ligne 1 = client + statut, ligne 2 = canal / paiement.
     On repasse en flex (et non en grille) pour que les deux metadonnees se
     placent cote a cote sans se superposer dans une meme cellule. */
  .tbl__h{display:none}
  .tbl__r{display:grid; grid-template-columns:1fr auto; gap:5px 12px; padding:12px; min-height:0}
  .tbl__r > span:nth-child(1){grid-area:1/1}
  .tbl__r > span:nth-child(4){grid-area:1/2; justify-self:end}
  .tbl__r > span:nth-child(2){grid-area:2/1}
  .tbl__r > span:nth-child(3){grid-area:2/2; justify-self:end}
  .tbl__r > span:nth-child(2),
  .tbl__r > span:nth-child(3){font-size:11px; color:var(--fg-3)}
  .callbar{height:auto; padding:12px; gap:10px; flex-wrap:wrap}
  .callbar .wave{display:none}

  .method__p{margin-top:36px}
  .quote__portrait{height:260px}
  .quote__text{font-size:19px}

  .qa__q{padding-inline:var(--gutter); font-size:16px}
  .qa__a p{padding-inline:var(--gutter)}

  .cta__banner{min-height:520px}
  .cta__bar{gap:14px; flex-wrap:wrap; padding-block:12px}
  .cta__title{padding-bottom:32px}
  .cta__cell{min-height:0}
  .cta__rdv{align-self:flex-start}

  .footer__nav{flex-direction:column; gap:28px}
  .fcol{width:auto}
  .footer__legal{gap:10px 20px; padding-block:18px}
  .footer__legal .mock__spacer{display:none}
}

/* ---------- 19. Accessibilité mouvement ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  .type__caret{animation:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1; transform:none; filter:none}
  .panel::before{transform:translate3d(0,0,0)!important; transition:none}
  .hero__title .line > span{transform:none}
  .hero__px{animation:none; opacity:1}
  .bub{opacity:1; transform:none}
  .track i{width:var(--w)}
  .qa__a{transition:none}
  .footer__wordmark svg svg{opacity:1}
  .footer__wordmark svg{transform:none}
  .trans{--p:1}
}