/* =============================================================================
   ALEXO — MAQUETTE V2
   Feuille de style unique. Les valeurs (couleurs, tailles, rayons, espacements)
   sont reprises telles quelles des deux fichiers de référence Claude Design
   (alexo-v2-part1.dc.html / alexo-v2-part2.dc.html), sans arrondi.

   Règle de non-régression : tout ce qui masque un élément avant son animation
   est préfixé `html.js` — sans JavaScript, ou si GSAP n'a pas chargé, la page
   reste entièrement lisible.
   ============================================================================= */

/* ------------------------------------------------------------- 0. POLICES --
   Les @font-face sont ICI, et non dans un fichier séparé, volontairement :
   deux feuilles de style bloquent le rendu deux fois plus longtemps qu'une.
   Le <h1> du hero est l'élément LCP de la page — chaque requête bloquante
   retarde sa peinture.
   Polices récupérées chez Google Fonts puis servies depuis ce domaine
   (sous-ensembles latin + latin-ext). `font-display: swap` : le texte
   s'affiche immédiatement avec la police de secours, puis bascule.
   -------------------------------------------------------------------------- */
/* Geist · latin-ext */
@font-face{font-family:'Geist';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('../assets/fonts/geist-normal-300to800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* Geist · latin */
@font-face{font-family:'Geist';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('../assets/fonts/geist-normal-300to800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Geist Mono · latin-ext */
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/geist-mono-normal-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* Geist Mono · latin */
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/geist-mono-normal-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Geist Mono · latin-ext */
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/geist-mono-normal-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* Geist Mono · latin */
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/geist-mono-normal-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Playfair Display · latin-ext */
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;
  src:url('../assets/fonts/playfair-display-italic-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* Playfair Display · latin */
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;
  src:url('../assets/fonts/playfair-display-italic-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Playfair Display · latin-ext */
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;
  src:url('../assets/fonts/playfair-display-italic-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* Playfair Display · latin */
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;
  src:url('../assets/fonts/playfair-display-italic-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Playfair Display · latin-ext */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/playfair-display-normal-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* Playfair Display · latin */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/playfair-display-normal-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------------------------------------------------------------- 1. TOKENS -- */
:root{
  /* couleurs — valeurs exactes de la référence */
  --navy:#373E4D;
  --navy-deep:#2B313C;
  --navy-code:#232833;
  --sage:#C5E1B8;
  --sage-ink:#4E6E3E;
  --paper:#F7F7F7;
  --sand:#E6DCD2;
  --sand-dark:#DDD1C4;
  --grey:#BDC3C7;
  --muted:#646C74;
  --dim:#4D5563;
  --white:#FFFFFF;
  /* gris de départ du titre « constat » (balayé vers le navy au scroll) :
     assez foncé pour rester lisible si le visiteur s'arrête en plein milieu
     du balayage — 3,2:1 sur le fond papier. */
  --grey-read:#828A92;
  /* Variante foncée du vert, pour les petits textes posés sur le fond sable
     (#E6DCD2) de la section Réalisations : #4E6E3E n'y atteint que 4,28:1,
     sous le minimum de 4,5:1. Celle-ci monte à 4,87:1. */
  --sage-ink-sand:#47653A;

  /* famille d'easing unique, alignée sur expo.out / power4.out de GSAP */
  --ease:cubic-bezier(.16,1,.3,1);

  /* conteneur */
  --wrap:1280px;
  --gut:48px;

  --r-card:22px;
  --r-tile:24px;
  --r-big:28px;
  --r-win:18px;
}

/* ------------------------------------------------------------------ 2. BASE -- */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:"Geist","Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
button{font:inherit;color:inherit}

.mono{font-family:"Geist Mono",ui-monospace,Menlo,monospace}
.serif{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500}

a{color:var(--sage-ink)}
a:hover{color:var(--navy)}

:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:4px}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--sage);color:var(--navy);padding:12px 20px;border-radius:0 0 12px 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);width:100%}

.stripes{background:repeating-linear-gradient(135deg,var(--sand) 0 14px,var(--sand-dark) 14px 28px)}

/* Ancres héritées de la V1 : invisibles, sans hauteur, décalées pour que la
   barre de navigation collante ne recouvre pas le titre de la section. */
.anchor-alias{display:block;position:relative;top:-96px;height:0;width:0;overflow:hidden}

/* ------------------------------------------------- 3. MOTIFS DÉCORATIFS ----- */
.grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(197,225,184,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(197,225,184,.07) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 100%);
}
.orb{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(197,225,184,.28) 0%,rgba(197,225,184,0) 65%)}

.dotlive{width:7px;height:7px;border-radius:50%;background:var(--sage);display:inline-block;flex:none}

/* ------------------------------------------------------------- 4. BOUTONS --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:46px;padding:0 22px;border:0;border-radius:999px;
  font-family:inherit;font-size:14.5px;font-weight:600;line-height:1;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .3s,box-shadow .35s var(--ease),border-color .3s;
}
.btn--sage{background:var(--sage);color:var(--navy)}
.btn--sage:hover{color:var(--navy);box-shadow:0 18px 40px -16px rgba(197,225,184,.8)}
.btn--ghost{background:transparent;border:1px solid rgba(247,247,247,.28);color:var(--paper);font-weight:500}
.btn--ghost:hover{background:rgba(247,247,247,.08);color:var(--paper)}
.btn--ghost-dark{border-color:rgba(247,247,247,.35)}
.btn--lg{height:60px;padding:0 30px;font-size:16.5px}
.btn--xl{height:60px;font-size:17px}
.btn--sm{height:42px;padding:0 18px;font-size:14px}
.btn--block{width:100%;height:58px;font-size:16px}
.arrow{transition:transform .35s var(--ease);display:inline-block}
.btn:hover .arrow{transform:translateX(4px)}

/* --------------------------------------------------------------- 5. INTRO --- */
.intro{
  position:fixed;inset:0;z-index:120;
  background:var(--navy-deep);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.intro[hidden]{display:none}
.intro__logo{display:flex;align-items:baseline;gap:4px;
  font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(56px,9vw,104px);color:var(--paper);letter-spacing:-.02em;
  overflow:hidden;padding-bottom:.08em}
.intro__word{display:inline-block}
.intro__dot{width:.12em;height:.12em;border-radius:50%;background:var(--sage);display:inline-block}
.intro__skip{position:absolute;right:24px;bottom:24px;background:transparent;border:1px solid rgba(197,225,184,.35);
  color:var(--grey);border-radius:999px;padding:9px 18px;font-size:13px;cursor:pointer;
  font-family:"Geist Mono",ui-monospace,monospace;letter-spacing:.08em}
.intro__skip:hover{color:var(--paper);border-color:var(--sage)}

/* ------------------------------------------------------------------ 6. NAV --- */
.nav{position:sticky;top:16px;z-index:50;width:min(1200px,calc(100% - 32px));margin:16px auto -92px}
.nav__pill{
  position:relative;height:64px;padding:0 10px 0 24px;
  display:flex;align-items:center;gap:28px;
  background:rgba(43,49,60,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
          backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(197,225,184,.16);
  border-radius:999px;overflow:hidden;
}
.logo{font-family:"Playfair Display",Georgia,serif;font-size:27px;font-weight:500;color:var(--paper);
  text-decoration:none;letter-spacing:-.02em;display:flex;align-items:baseline;gap:2px;flex:none}
.logo:hover{color:var(--paper)}
.logo__dot{width:7px;height:7px;border-radius:50%;background:var(--sage);display:inline-block}

.nav__links{display:flex;gap:26px;font-size:14.5px;flex-grow:1}
.navl{color:var(--grey);text-decoration:none;transition:color .2s}
.navl:hover{color:var(--paper)}

.nav__status{display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.06em;
  color:var(--grey);text-transform:uppercase;white-space:nowrap;flex:none}

.nav__cta{margin-left:auto;flex:none}
.nav__progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sage);
  transform:scaleX(0);transform-origin:0 50%}

.burger{display:none;width:44px;height:44px;margin-left:auto;background:transparent;border:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none}
.burger span{width:20px;height:1.5px;background:var(--paper);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.nav__mobile{margin-top:10px;padding:18px 24px;border-radius:24px;background:rgba(43,49,60,.94);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(197,225,184,.16);display:flex;flex-direction:column;gap:14px}
.nav__mobile[hidden]{display:none}
.nav__mobile a{color:var(--paper);text-decoration:none;font-size:17px}

/* ------------------------------------------------------------------ 7. HERO -- */
.hero{position:relative;background:var(--navy-deep);color:var(--paper);overflow:hidden;
  padding:188px 0 120px}
.hero__orb{width:760px;height:760px;right:-120px;top:-180px}
.hero__scanwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero__scan{height:90px;background:linear-gradient(180deg,rgba(197,225,184,0) 0%,rgba(197,225,184,.05) 100%);
  border-bottom:1px solid rgba(197,225,184,.12);transform:translateY(-10%)}

.hero__inner{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:56px;align-items:center}
.hero__text{display:flex;flex-direction:column;gap:30px}

.kicker{display:flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:.16em;
  color:var(--sage-ink);text-transform:uppercase}
.kicker--sage{color:var(--sage);letter-spacing:.14em}
.kicker__rule{width:28px;height:1px;background:var(--sage);display:inline-block;flex:none}

.hero__title{font-size:clamp(46px,4.7vw,72px);line-height:1.02;letter-spacing:-.045em;font-weight:600;
  text-wrap:balance}
.hero__title .accent{color:var(--sage);font-weight:500;letter-spacing:-.02em}
/* Entrée du hero : 100 % CSS, aucune dépendance à GSAP.
   Ce <h1> est l'élément LCP de la page. Tant que son apparence dépendait d'un
   script, le navigateur ne pouvait pas le considérer comme peint avant d'avoir
   téléchargé et exécuté 70 Ko de JavaScript. Ici l'animation démarre avec le
   CSS, dès la première frame, et fonctionne même si GSAP ne charge jamais.
   Les mots ne passent JAMAIS par opacity 0 : ils sont visibles du début à la
   fin, simplement décalés de 18 px vers le bas. */
.hero__title .w{display:inline-block}
html.js .hero__title .w{animation:heroWord .9s cubic-bezier(.16,1,.3,1) both}
@keyframes heroWord{from{transform:translateY(18px)}to{transform:none}}
.hero__title .w1{animation-delay:0.000s}
.hero__title .w2{animation-delay:0.045s}
.hero__title .w3{animation-delay:0.090s}
.hero__title .w4{animation-delay:0.135s}
.hero__title .w5{animation-delay:0.180s}
.hero__title .w6{animation-delay:0.225s}
.hero__title .w7{animation-delay:0.270s}
.hero__title .w8{animation-delay:0.315s}
.hero__title .w9{animation-delay:0.360s}
.hero__title .w10{animation-delay:0.405s}
.hero__title .w11{animation-delay:0.450s}
.hero__title .w12{animation-delay:0.495s}
.hero__title .w13{animation-delay:0.540s}
.hero__title .w14{animation-delay:0.585s}

/* l'accent passe de flou à net, sans jamais devenir transparent */
html.js .hero__title .accent{animation:heroAccent .75s cubic-bezier(.16,1,.3,1) .18s both}
@keyframes heroAccent{from{filter:blur(9px)}to{filter:none}}
.hero__sub{max-width:540px;font-size:19px;line-height:1.6;color:var(--grey)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__proof{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:12px;letter-spacing:.05em;
  color:var(--grey);text-transform:uppercase}
.hero__proof li{display:flex;align-items:center;gap:8px}
.hero__proof span{color:var(--sage)}

.hero__scroll{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.2em;color:var(--grey);text-decoration:none}
.hero__scroll:hover{color:var(--paper)}
.hero__scroll span{width:1px;height:34px;background:linear-gradient(var(--sage),rgba(197,225,184,0))}

/* --- fenêtre code → site --- */
.hero__demo{position:relative;padding:30px 0;perspective:1400px}
.win{position:relative;border-radius:var(--r-win);background:rgba(35,40,51,.9);
  border:1px solid rgba(197,225,184,.18);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02) inset;
  overflow:hidden;transform-origin:50% 90%}
.win__bar{height:44px;padding:0 16px;display:flex;align-items:center;gap:8px;
  border-bottom:1px solid rgba(197,225,184,.12)}
.win__dots{display:flex;gap:8px}
.win__dots i{width:10px;height:10px;border-radius:50%;background:rgba(189,195,199,.35);display:block}
.win__url{margin-left:14px;flex-grow:1;height:26px;border-radius:8px;background:rgba(247,247,247,.06);
  display:flex;align-items:center;padding:0 12px;font-size:12px;color:var(--grey)}
.win__tag{font-size:10.5px;letter-spacing:.1em;color:var(--sage);
  border:1px solid rgba(197,225,184,.35);border-radius:6px;padding:3px 7px;flex:none}

.win__code{padding:18px 22px;font-size:12.5px;line-height:1.85;color:var(--grey);
  border-bottom:1px solid rgba(197,225,184,.12);height:150px;overflow:hidden}
.cl{display:block;white-space:nowrap;overflow:hidden}
.cl__i{display:inline-block;white-space:pre}
.cl b{color:var(--sage);font-weight:400}
.cl u{color:var(--paper);text-decoration:none}

.win__site{background:var(--paper);color:var(--navy);padding:18px 22px 26px;
  display:flex;flex-direction:column;gap:18px}
.ws__top{display:flex;align-items:center;gap:12px}
.ws__brand{font-weight:700;font-size:13px;letter-spacing:-.01em}
.ws__spacer{flex-grow:1}
.ws__nav{width:44px;height:6px;border-radius:4px;background:var(--grey)}
.ws__chip{height:22px;padding:0 10px;border-radius:999px;background:var(--navy);color:var(--paper);
  font-size:10.5px;display:flex;align-items:center}
.ws__body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;align-items:center}
.ws__copy{display:flex;flex-direction:column;gap:12px}
.ws__kicker{font-size:9.5px;letter-spacing:.14em;color:var(--sage-ink)}
.ws__h1{font-size:22px;font-weight:700;line-height:1.08;letter-spacing:-.03em}
.ws__lines{display:flex;flex-direction:column;gap:6px}
.ws__lines span{height:6px;border-radius:4px;background:var(--grey)}
.ws__lines span:first-child{width:92%}
.ws__lines span:last-child{width:70%}
.ws__btns{display:flex;gap:8px}
.ws__cta{position:relative;height:32px;padding:0 14px;border-radius:999px;background:var(--sage);
  color:var(--navy);font-weight:600;font-size:11.5px;display:flex;align-items:center}
.ws__ring{position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--sage);opacity:0;pointer-events:none}
.ws__ghost{height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--navy);
  font-size:11.5px;display:flex;align-items:center}
.ws__photo{height:150px;border-radius:12px;position:relative}
.ws__photo span{position:absolute;left:10px;bottom:8px;font-size:9.5px;color:var(--muted)}

.float-card{position:absolute;left:-44px;top:0;padding:14px 18px;border-radius:14px;
  background:rgba(247,247,247,.96);color:var(--navy);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);display:flex;align-items:center;gap:12px}
.float-card__icon{width:34px;height:34px;border-radius:10px;background:var(--sage);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--navy)}
.float-card__icon svg{width:17px;height:17px}
.float-card__txt{display:flex;flex-direction:column;gap:2px}
.float-card__txt strong{font-weight:600;font-size:14px}
.float-card__txt span{font-size:11px;color:var(--muted)}

.perf-card{position:absolute;right:-28px;bottom:-6px;padding:14px 18px 14px 14px;border-radius:16px;
  background:var(--navy);border:1px solid rgba(197,225,184,.25);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);display:flex;align-items:center;gap:14px}
.perf-card__ring{width:52px;height:52px;flex:none}
.perf-card__txt{display:flex;flex-direction:column;gap:3px}
.perf-card__txt strong{font-weight:600;font-size:14px;color:var(--paper)}
.perf-card__txt span{font-size:11px;color:var(--sage)}

/* -------------------------------------------------------------- 8. BANDEAU -- */
.mq{background:var(--sage);color:var(--navy);overflow:hidden;height:64px;display:flex;align-items:center}
/* `flex:none` : sans lui la piste est rétrécie par le conteneur de 1440 px et
   les libellés en deux mots (« COACHS SPORTIFS », « MAÎCHE & HAUT-DOUBS »)
   passent à la ligne — la piste montait alors à 72 px dans une bande de 64 px
   et tout le texte se retrouvait collé en haut. `nowrap` sur chaque libellé
   verrouille le tout sur une seule ligne. */
.mq__track{display:flex;flex:none;align-items:center;width:max-content;will-change:transform}
.mq__set{display:flex;align-items:center;flex:none;gap:36px;padding-right:36px;
  font-size:14px;letter-spacing:.14em;font-weight:500;line-height:1}
.mq__set > span{flex:none;white-space:nowrap;line-height:1}

/* ----------------------------------------------------- 9. RYTHME SECTIONS --- */
.sec{padding:140px 0}
.sec__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;
  margin-bottom:56px}
.sec__head--solo{display:flex;flex-direction:column;align-items:flex-start;gap:22px;
  max-width:900px;margin-bottom:64px}
.sec__head > div{display:flex;flex-direction:column;gap:22px}
.sec__lead{font-size:18px;line-height:1.6;color:var(--muted);max-width:480px}
.sec__lead--dim{color:var(--dim)}
.sec__head--dark .sec__lead{color:var(--grey)}

.h2{font-size:60px;line-height:1.02;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.h2 .accent{color:var(--sage-ink)}
/* Sur fond sombre l'accent passe en sage clair. Deux classes pour égaler la
   spécificité de `.h2 .accent` : sans cela le vert foncé l'emportait et
   tombait à 1,85:1 sur le navy. */
.accent.accent--sage{color:var(--sage)}
.h3--big{font-size:48px;line-height:1.04;letter-spacing:-.035em;font-weight:600}

.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

/* surligneur sage tracé à gauche → droite */
.hl{position:relative;isolation:isolate}
.hl__mark{position:absolute;left:-.04em;right:-.04em;bottom:.02em;height:.38em;background:var(--sage);
  transform:scaleX(0);transform-origin:0 50%;z-index:-1;border-radius:2px}
html:not(.js) .hl__mark{transform:scaleX(1)}

/* --------------------------------------------------------- 10. 01 CONSTAT --- */
.constat{padding-top:140px;padding-bottom:120px}
.constat__cards{margin-bottom:64px}

.card{padding:34px;border-radius:var(--r-card);display:flex;flex-direction:column;gap:18px}
.card--white{background:var(--white);border:1px solid rgba(55,62,77,.1)}
.card--paper{background:var(--paper);border:1px solid rgba(55,62,77,.1)}
.card__top{display:flex;justify-content:space-between;align-items:center}
.card__num{font-size:13px;color:var(--muted)}
.card__ico{width:28px;height:28px;color:var(--navy)}
.card__title{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.card__text{font-size:16px;line-height:1.6;color:var(--muted)}

.constat__punch{font-size:40px;line-height:1.15;letter-spacing:-.03em;font-weight:500;max-width:980px;
  text-wrap:balance}
.constat__punch .accent{color:var(--sage-ink)}

/* mot par mot, gris clair → navy (scrub) */
.h2--word .w{color:var(--grey-read);transition:none}

/* ----------------------------------------------------------- 11. 02 BENTO --- */
.atouts{padding-top:0}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tile{padding:36px;border-radius:var(--r-tile);display:flex;flex-direction:column;gap:24px;
  min-height:330px;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s}
.tile:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(55,62,77,.35)}
.tile--white{background:var(--white);border:1px solid rgba(55,62,77,.1)}
.tile--navy{background:var(--navy);color:var(--paper)}
.tile--sand{background:var(--sand)}
.tile--w2{grid-column:span 2;gap:34px}
.tile__head{display:flex;flex-direction:column;gap:10px}
.tile__title{font-size:26px;font-weight:600;letter-spacing:-.02em}
.tile__text{font-size:15.5px;line-height:1.6;color:var(--muted);max-width:520px}
.tile--w2 .tile__text{font-size:16px}
.tile--navy .tile__text{color:var(--grey)}
.tile--sand .tile__text{color:var(--dim)}

/* A — parcours */
.path{position:relative;margin-top:auto}
.path__line{position:absolute;left:6%;right:6%;top:50%;height:2px;
  background:repeating-linear-gradient(90deg,var(--grey) 0 6px,transparent 6px 12px)}
.path__runner{position:absolute;left:6%;right:6%;top:50%;height:0}
.path__dot{position:absolute;top:-6px;left:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:var(--sage-ink);box-shadow:0 0 0 6px rgba(197,225,184,.6)}
.path__steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.path__step{height:56px;border-radius:14px;background:var(--paper);border:1px solid rgba(55,62,77,.12);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:12.5px;letter-spacing:.04em;padding:0 6px}
.path__step--on{background:var(--sage);border-color:transparent;font-weight:500}

/* B — mobile */
.phone{margin:auto auto -70px;width:150px;height:220px;border-radius:26px;
  border:2px solid rgba(197,225,184,.4);padding:18px 12px;display:flex;flex-direction:column;gap:10px}
.phone__bar{height:4px;border-radius:4px;background:rgba(197,225,184,.18);overflow:hidden}
.phone__fill{height:100%;background:var(--sage);transform:scaleX(0);transform-origin:0 50%}
.phone__content{display:flex;flex-direction:column;gap:8px}
.phone__content span{display:block}
.phone__img{height:60px;border-radius:8px;background:var(--sand)}
.phone__l1{height:8px;width:80%;border-radius:4px;background:var(--paper)}
.phone__l2{height:8px;width:60%;border-radius:4px;background:var(--grey)}
.phone__btn{height:24px;width:70%;border-radius:999px;background:var(--sage)}

/* C — SEO */
.serp{margin-top:auto;padding:18px;border-radius:16px;background:var(--paper);
  display:flex;flex-direction:column;gap:6px}
.serp__site{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.serp__fav{width:18px;height:18px;border-radius:50%;background:var(--navy);flex:none}
.serp__title{font-size:16px;font-weight:600;color:var(--navy)}
.serp__desc{font-size:13px;line-height:1.5;color:var(--muted)}

/* D — CTA */
.ctademo{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.ctademo__main{position:relative;height:50px;border-radius:999px;background:var(--navy);color:var(--paper);
  font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;gap:10px}
.ctademo__main svg{width:16px;height:16px}
.ctademo__ring{position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--sage);opacity:0}
.ctademo__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ctademo__row span{height:44px;border-radius:999px;border:1px solid var(--navy);font-size:14px;
  display:flex;align-items:center;justify-content:center}

/* E — autonomie */
.editor{margin-top:auto;padding:16px;border-radius:16px;background:var(--paper);
  display:flex;flex-direction:column;gap:10px}
.editor__label{font-size:11px;letter-spacing:.1em;color:var(--muted)}
.editor__field{height:42px;border-radius:10px;background:var(--white);border:1px solid var(--grey);
  padding:0 12px;display:flex;align-items:center;font-size:13.5px;color:var(--navy)}
.editor__typed{white-space:nowrap;display:inline-block}
.editor__caret{width:2px;height:18px;background:var(--sage-ink);margin-left:2px;flex:none}
.editor__foot{display:flex;justify-content:flex-end}
.editor__pub{height:28px;padding:0 12px;border-radius:999px;background:var(--sage);font-size:11.5px;
  display:flex;align-items:center}

/* F — radar local */
.tile--radar{grid-column:span 3;border-radius:var(--r-big);background:var(--navy-deep);color:var(--paper);
  padding:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;
  align-items:center;position:relative}
.tile--radar:hover{transform:none;box-shadow:none}
.radar__copy{display:flex;flex-direction:column;gap:22px;position:relative;z-index:1}
.radar__text{font-size:17px;line-height:1.65;color:var(--grey);max-width:460px}

.radar{position:relative;width:480px;max-width:100%;aspect-ratio:1;margin:0 auto}
.radar__ring{position:absolute;border-radius:50%;border:1px solid rgba(197,225,184,.16)}
.radar__ring--1{inset:0}
.radar__ring--2{inset:12.5%}
.radar__ring--3{inset:25%}
.radar__ring--4{inset:37.5%;border-color:rgba(197,225,184,.2)}
.radar__ax{position:absolute;background:rgba(197,225,184,.1)}
.radar__ax--v{left:50%;top:0;bottom:0;width:1px}
.radar__ax--h{top:50%;left:0;right:0;height:1px}
.radar__sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(197,225,184,.35),rgba(197,225,184,0) 70deg,rgba(197,225,184,0) 360deg)}

.radar__home{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px}
.radar__pin{position:relative;width:16px;height:16px;border-radius:50%;background:var(--sage)}
.radar__ping{position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--sage);opacity:0}
.radar__name{font-size:12px;font-weight:500;color:var(--paper);letter-spacing:.08em}
.radar__town{position:absolute;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--grey);
  white-space:nowrap}
.radar__town i{width:7px;height:7px;border-radius:50%;background:var(--sage);flex:none}
.radar__coord{position:absolute;right:0;bottom:0;font-size:10px;letter-spacing:.1em;color:var(--muted)}

/* ----------------------------------------------------- 12. 03 AVANT/APRÈS --- */
.ba{background:var(--navy-deep);color:var(--paper);position:relative;overflow:hidden}
.ba__grid{opacity:.6}
.ba__inner{position:relative}

.ba__frame{position:relative;height:600px;border-radius:var(--r-tile);overflow:hidden;
  border:1px solid rgba(197,225,184,.2);box-shadow:0 60px 120px -50px rgba(0,0,0,.7)}

/* --- AVANT : pastiche de vieux site --- */
.old{position:absolute;inset:0;background:#D9D9D9;font-family:"Times New Roman",Times,serif;color:#222;
  display:flex;flex-direction:column}
.old__banner{height:90px;background:#1F3F8F;color:#FF6;display:flex;align-items:center;justify-content:center;
  font-size:clamp(18px,2.4vw,30px);font-weight:700;text-align:center;padding:0 12px;flex:none}
/* `flex-grow` sur le corps + photo étirable : sans ça le vieux site s'arrêtait
   après « Dernière mise à jour » et laissait une bande grise vide au bas du
   cadre de 600 px. */
.old__body{flex-grow:1;min-height:0;padding:30px 60px;display:flex;flex-direction:column;gap:18px;
  align-items:center;text-align:center}
.old__welcome{font-size:clamp(17px,1.9vw,24px);font-weight:700;color:#8B0000}
.old__nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:clamp(13px,1.2vw,16px)}
.old__nav span{color:#00E;text-decoration:underline}
.old__img{width:min(360px,80%);flex:1 1 190px;min-height:110px;background:#A9A9A9;border:3px ridge #777;
  display:flex;align-items:center;justify-content:center;color:#555;font-size:14px}
.old__text{font-size:15px;line-height:1.5;max-width:560px;color:#555}
.old__meta{font-size:12px;color:#999}

/* --- APRÈS : le site refait --- */
.new{position:absolute;inset:0;background:var(--paper);color:var(--navy);display:flex;flex-direction:column;
  clip-path:inset(0 0 0 0)}
.new__top{height:76px;padding:0 44px;display:flex;align-items:center;gap:28px;
  border-bottom:1px solid rgba(55,62,77,.08);flex:none}
.new__brand{font-weight:700;font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.new__spacer{flex-grow:1}
.new__nav{font-size:14px;color:var(--muted);white-space:nowrap}
.new__cta{height:40px;padding:0 18px;border-radius:999px;background:var(--sage);font-weight:600;font-size:14px;
  display:flex;align-items:center;white-space:nowrap;flex:none}
/* `align-items:stretch` : la mosaïque occupe toute la hauteur du corps au lieu
   d'être centrée entre deux bandes blanches. Le texte, lui, reste centré. */
.new__body{flex-grow:1;min-height:0;padding:50px 44px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:stretch}
.new__copy{display:flex;flex-direction:column;justify-content:center;gap:20px}
.new__kicker{font-size:12px;letter-spacing:.16em;color:var(--sage-ink)}
.new__h1{font-size:clamp(26px,3.2vw,44px);font-weight:700;line-height:1.02;letter-spacing:-.035em}
.new__sub{font-size:17px;line-height:1.55;color:var(--muted)}
.new__btns{display:flex;gap:10px;flex-wrap:wrap}
.new__b1{height:50px;padding:0 22px;border-radius:999px;background:var(--navy);color:var(--paper);
  font-weight:600;font-size:15px;display:flex;align-items:center;white-space:nowrap}
.new__b2{height:50px;padding:0 22px;border-radius:999px;border:1px solid var(--navy);font-size:15px;
  display:flex;align-items:center;white-space:nowrap}
.new__mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;height:auto;min-height:0}
.new__mosaic > span{border-radius:16px;display:block}
.new__mosaic > span:first-child{grid-row:span 2;
  background:repeating-linear-gradient(135deg,var(--sand) 0 16px,var(--sand-dark) 16px 32px)}
.new__m2{background:var(--navy)}
.new__m3{background:var(--sage)}

/* --- poignée --- */
.ba__handle{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:var(--sage);
  box-shadow:0 0 24px rgba(197,225,184,.8);pointer-events:none;will-change:transform}
.ba__knob{position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  background:var(--sage);color:var(--navy);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ba__knob svg{width:22px;height:22px}
.ba__tag{position:absolute;top:18px;height:30px;padding:0 12px;border-radius:999px;font-size:11.5px;
  letter-spacing:.14em;display:flex;align-items:center;pointer-events:none}
.ba__tag--old{left:18px;background:rgba(43,49,60,.85);color:var(--paper)}
.ba__tag--new{right:18px;background:var(--sage);color:var(--navy)}
.ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:transparent}
.ba__range::-webkit-slider-thumb{-webkit-appearance:none;width:60px;height:600px}
.ba__range:focus-visible{opacity:.001;outline:2px solid var(--sage);outline-offset:4px}
.ba__note{margin-top:22px;font-size:11.5px;letter-spacing:.08em;color:var(--grey);text-align:center}

/* -------------------------------------------------------- 13. 04 MÉTHODE ---- */
.methode__head .sec__head{margin-bottom:0}
.methode__viewport{margin-top:64px;overflow:hidden}
.methode__track{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}
.methode__rail{position:absolute;left:var(--gut);right:var(--gut);top:27px;height:2px;
  background:rgba(55,62,77,.1)}
.methode__fill{position:absolute;inset:0;background:var(--sage-ink);transform:scaleX(0);transform-origin:0 50%}
.step{display:flex;flex-direction:column;gap:16px;position:relative}
.step__num{width:56px;height:56px;border-radius:50%;background:var(--paper);border:1.5px solid var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;flex:none;
  transition:background .4s var(--ease),color .4s var(--ease)}
.step.is-on .step__num{background:var(--sage);color:var(--navy)}
.step__title{font-size:20px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;
  flex-wrap:wrap}
.step__badge{font-size:10px;letter-spacing:.1em;padding:3px 7px;border-radius:6px;background:var(--navy);
  color:var(--sage);font-weight:400}
.step__text{font-size:14.5px;line-height:1.6;color:var(--muted)}

/* mode rail horizontal : activé par le JS au-dessus de 980px (classe posée sur
   #methodeViewport), retiré automatiquement en dessous par gsap.matchMedia. */
/* La piste démarre alignée sur le titre et finit à fleur de gouttière droite :
   aucune zone vide à l'une ou l'autre extrémité. Aucune étape ne passe donc par
   le centre de l'écran — c'est la ligne de progression qui sert de repère, et
   js/v2.js allume chaque pastille au moment où la ligne l'atteint. */
.methode--h{--pad-l:calc(max(0px,(100vw - var(--wrap))/2) + var(--gut));
  --pad-r:var(--gut)}
.methode--h .methode__track{display:flex;flex-wrap:nowrap;width:max-content;max-width:none;margin:0;
  padding-left:var(--pad-l);padding-right:var(--pad-r);will-change:transform}
.methode--h .step{flex:0 0 340px}
/* Le rail va du centre de la pastille 01 au centre de la pastille 06 :
   340 (largeur d'étape) - 28 (demi-pastille) = 312 px avant la fin du contenu.
   La pastille n° i se trouve donc exactement à i/5 de la longueur du rail. */
.methode--h .methode__rail{left:calc(var(--pad-l) + 28px);
  right:calc(var(--pad-r) + 312px);top:27px;bottom:auto;width:auto;height:2px}
.methode--h .methode__fill{transform:scaleX(0);transform-origin:0 50%}

/* ---------------------------------------------------- 14. 05 RÉALISATIONS --- */
.work{background:var(--sand)}
.work__grid{gap:22px;margin-bottom:56px}
.wk{text-decoration:none;color:var(--navy);display:flex;flex-direction:column;gap:18px;
  transition:transform .6s var(--ease)}
.wk:hover{color:var(--navy)}
.wk__screen{aspect-ratio:4/3.2;border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:10px;
  position:relative;overflow:hidden}
.wk__screen--navy{background:var(--navy)}
.wk__screen--paper{background:var(--paper)}
.wk__screen--deep{background:var(--navy-deep)}
.wk__dots{display:flex;gap:6px;flex:none}
.wk__dots i{width:8px;height:8px;border-radius:50%;background:rgba(247,247,247,.3);display:block}
.wk__alert{height:26px;border-radius:8px;background:#A4342A;color:var(--paper);font-size:11px;
  display:flex;align-items:center;padding:0 10px;flex:none}
.wk__shot{flex-grow:1;border-radius:12px;overflow:hidden;display:block;position:relative}
.wk__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transform-origin:50% 20%}
.wk__badge{position:absolute;right:16px;top:14px;font-size:10.5px;letter-spacing:.12em;padding:4px 9px;
  border-radius:999px}
.wk__badge--low{top:54px}
.wk__badge--sage{background:var(--sage);color:var(--navy)}
.wk__badge--navy{background:var(--navy);color:var(--paper)}
.wk__badge--paper{background:var(--paper);color:var(--navy)}
.wk__meta{display:flex;flex-direction:column;gap:8px}
.wk__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.wk__name{font-size:22px;font-weight:600;letter-spacing:-.02em}
.wk__link{font-size:12px;color:var(--sage-ink-sand);white-space:nowrap}
.wk__text{font-size:15px;line-height:1.55;color:var(--dim)}
.work__note{font-size:11.5px;letter-spacing:.08em;color:var(--dim)}
/* le kicker « 05 — RÉALISATIONS » est lui aussi sur fond sable */
.work .kicker{color:var(--sage-ink-sand)}

/* -------------------------------------------------------- 15. 06 CHIFFRES --- */
.figs{background:var(--navy);color:var(--paper);padding:190px 0 130px}
.figs .sec__head--solo{max-width:820px;margin-bottom:60px}
.figs .h2{font-size:56px;line-height:1.04}
.figs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(197,225,184,.22);margin-bottom:60px}
.fig{position:relative;padding:40px 36px 10px;display:flex;flex-direction:column;gap:16px}
.fig:first-child{padding-left:0}
.fig:last-child{padding-right:0}
.fig__rule{position:absolute;right:0;top:0;bottom:0;width:1px;background:rgba(197,225,184,.22);
  transform:scaleY(0);transform-origin:50% 0}
html:not(.js) .fig__rule{transform:scaleY(1)}
.fig__num{font-size:104px;font-weight:600;letter-spacing:-.06em;line-height:1;color:var(--sage);
  display:flex;align-items:baseline}
.fig__pct{font-size:52px;margin-left:6px}
.fig__text{font-size:17px;line-height:1.55;color:var(--paper)}
.fig__src{font-size:11px;letter-spacing:.08em;color:var(--grey)}
.figs__note{font-size:11px;letter-spacing:.08em;color:var(--grey)}

/* ----------------------------------------------------------- 16. 07 QUI ----- */
.who__inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:center}
.who__media{position:relative}
.who__photo{aspect-ratio:4/5;border-radius:var(--r-big);overflow:hidden;position:relative;
  background:repeating-linear-gradient(135deg,var(--sand) 0 18px,var(--sand-dark) 18px 36px)}
.who__photo img{width:100%;height:100%;object-fit:cover}
.who__coord{position:absolute;left:20px;bottom:20px;right:20px;display:flex;justify-content:space-between;
  font-size:11px;letter-spacing:.1em;color:var(--paper);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.who__badge{position:absolute;right:-28px;top:40px;padding:18px 22px;border-radius:18px;background:var(--navy);
  color:var(--paper);box-shadow:0 30px 60px -24px rgba(55,62,77,.6);display:flex;flex-direction:column;gap:4px}
.who__badge-n{font-size:38px;font-weight:600;letter-spacing:-.04em;color:var(--sage);line-height:1}
.who__badge-l{font-size:11px;letter-spacing:.08em;color:var(--grey)}
.who__copy{display:flex;flex-direction:column;gap:26px}
.who__p{font-size:19px;line-height:1.65;color:var(--dim)}
.who__sign{display:flex;align-items:center;gap:18px;padding-top:8px}
.who__sign-name{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:40px;color:var(--navy);
  display:inline-block}
.who__sign-role{font-size:11.5px;letter-spacing:.12em;color:var(--muted)}

/* -------------------------------------------------------- 17. 08 TARIFS ----- */
.pricing{background:var(--white);border-top:1px solid rgba(55,62,77,.08)}
.pricing__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;
  align-items:stretch;margin-bottom:56px}
.pricing__factors{padding:44px;gap:28px}
.pricing__label{font-size:12px;letter-spacing:.14em;color:var(--muted)}
.facs{display:flex;flex-direction:column;border-top:1px solid rgba(55,62,77,.12)}
.fac{display:flex;gap:22px;align-items:baseline;padding:20px 0;border-bottom:1px solid rgba(55,62,77,.12)}
.fac__n{font-size:13px;color:var(--sage-ink);flex:none}
.fac__t{font-size:19px;line-height:1.45;color:var(--navy)}

.quote{position:relative;padding:44px;border-radius:var(--r-tile);background:var(--navy);color:var(--paper);
  display:flex;flex-direction:column;gap:26px;overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(55,62,77,.7)}
.quote__orb{width:420px;height:420px;right:-160px;top:-160px;
  background:radial-gradient(circle,rgba(197,225,184,.25) 0%,rgba(197,225,184,0) 65%)}
.quote > :not(.quote__orb){position:relative}
.quote__tag{align-self:flex-start;height:30px;padding:0 12px;border-radius:999px;background:var(--sage);
  color:var(--navy);font-size:11px;letter-spacing:.12em;display:flex;align-items:center}
.quote__h{font-size:34px;line-height:1.12;letter-spacing:-.03em;font-weight:600}
.quote__p{font-size:17px;line-height:1.65;color:var(--grey)}
.quote .btn{margin-top:auto}

.incl{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:center;font-size:12.5px;letter-spacing:.06em;
  color:var(--dim);padding:22px;border-radius:16px;border:1px dashed var(--grey)}
.incl__i{color:var(--sage-ink)}

/* ------------------------------------------------------- 18. 09 CONTACT ----- */
.contact{background:var(--navy-deep);color:var(--paper);position:relative;overflow:hidden}
.contact__orb{width:700px;height:700px;left:-200px;bottom:-300px;
  background:radial-gradient(circle,rgba(197,225,184,.22) 0%,rgba(197,225,184,0) 65%)}
.contact__inner{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:64px;align-items:start}
.contact__copy{display:flex;flex-direction:column;gap:28px}
.contact .h2{font-size:56px;line-height:1.04}
.contact__intro{font-size:18px;line-height:1.6;color:var(--grey)}
.steps3{display:flex;flex-direction:column;border-top:1px solid rgba(197,225,184,.18)}
.steps3 li{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid rgba(197,225,184,.18);
  font-size:16px;color:var(--paper)}
.steps3 .mono{color:var(--sage);font-size:13px;flex:none}

/* transition de texte masquée */
.swap{display:inline-block;overflow:hidden;vertical-align:bottom}
.swap__i{display:inline-block}
.swap--plain{vertical-align:baseline}

.lead{padding:36px;border-radius:var(--r-big);background:rgba(55,62,77,.75);
  border:1px solid rgba(197,225,184,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;gap:22px}
.seg{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px;
  border-radius:999px;background:rgba(43,49,60,.9)}
.seg__pill{position:absolute;left:6px;top:6px;bottom:6px;width:calc(50% - 9px);border-radius:999px;
  background:var(--sage);will-change:transform}
.seg__btn{position:relative;height:48px;border:0;border-radius:999px;background:transparent;
  font-size:15px;font-weight:600;cursor:pointer;color:var(--grey);transition:color .3s}
.seg__btn.is-on{color:var(--navy)}

.lead__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field__label{font-size:11.5px;letter-spacing:.1em;color:var(--grey);
  font-family:"Geist Mono",ui-monospace,Menlo,monospace}
.lead input,.lead textarea{height:52px;padding:0 16px;border-radius:14px;
  border:1px solid rgba(189,195,199,.35);background:rgba(247,247,247,.05);color:var(--paper);
  font-family:inherit;font-size:16px;width:100%}
.lead textarea{height:auto;padding:14px 16px;resize:vertical;min-height:92px}
.lead input::placeholder{color:rgba(189,195,199,.6)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:44px;padding:0 18px;border-radius:999px;font-size:14.5px;cursor:pointer;
  border:1px solid rgba(189,195,199,.35);background:transparent;color:var(--paper);
  transition:background .25s,border-color .25s,color .25s}
.chip:hover{border-color:var(--sage)}
.chip.is-on{background:var(--sage);border-color:var(--sage);color:var(--navy)}

.lead__fine{font-size:11px;letter-spacing:.06em;color:var(--grey);text-align:center}
.lead__note{font-size:14px;line-height:1.5;color:var(--sage);text-align:center}
.lead__note:empty{display:none}
.lead__note.is-err{color:#F3B0A8}

/* ----------------------------------------------------------- 19. 10 FAQ ----- */
.faq__inner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.faq__aside{display:flex;flex-direction:column;gap:22px;position:sticky;top:120px}
.faq .h2{font-size:56px;line-height:1.04}
.faq__lead{font-size:17px;line-height:1.6;color:var(--muted)}
.faq__list{display:flex;flex-direction:column;border-top:1px solid rgba(55,62,77,.15)}
.qa{border-bottom:1px solid rgba(55,62,77,.15)}
.qa__btn{width:100%;min-height:76px;padding:20px 0;border:0;background:transparent;display:flex;
  align-items:center;gap:20px;text-align:left;cursor:pointer;color:var(--navy)}
.qa__n{font-size:12px;color:var(--muted);width:28px;flex:none}
.qa__q{flex-grow:1;font-size:20px;font-weight:600;letter-spacing:-.015em}
.qa__ico{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;background:rgba(55,62,77,.06);
  transition:transform .4s var(--ease),background .3s}
.qa__ico svg{width:16px;height:16px}
.qa__btn[aria-expanded=true] .qa__ico{transform:rotate(45deg);background:var(--sage)}
.qa__panel{overflow:hidden}
.qa__a{padding:0 58px 26px 48px;font-size:16.5px;line-height:1.65;color:var(--dim)}

/* -------------------------------------------------------- 20. FOOTER -------- */
/* Repris du pied de page en production : bandeau défilant en diagonale, et
   « alexo » géant en fond. `--fp` va de 0 (pied encore caché sous le contenu)
   à 1 (pied plein cadre) — js/v2.js la pilote au défilement. Valeur par défaut
   1 : sans JavaScript le pied s'affiche directement à son état final. */
.foot{background:var(--navy-deep);color:var(--paper);padding:0 0 36px;position:relative;overflow:hidden;
  --fp:1}
html.js .foot{--fp:0}
.foot__grid{opacity:.5}

.foot__giant{position:absolute;bottom:-4vh;left:50%;z-index:0;
  font-family:"Playfair Display",Georgia,serif;font-size:26vw;font-weight:500;line-height:.75;
  letter-spacing:-.05em;white-space:nowrap;pointer-events:none;user-select:none;
  color:transparent;-webkit-text-stroke:1px rgba(247,247,247,.07);
  background:linear-gradient(180deg,rgba(247,247,247,.13) 0%,transparent 62%);
  -webkit-background-clip:text;background-clip:text;
  opacity:calc(.25 + var(--fp) * .75);
  transform:translateX(-50%)
            translateY(calc((1 - var(--fp)) * 9vh))
            scale(calc(.84 + var(--fp) * .16))}

/* --- bandeau défilant en diagonale --- */
.foot__mq{position:relative;z-index:1;margin:96px 0 0;width:100%;overflow:hidden;padding:15px 0;
  border-top:1px solid rgba(247,247,247,.13);border-bottom:1px solid rgba(247,247,247,.13);
  background:rgba(55,62,77,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transform:rotate(-2deg) scale(1.1);
  box-shadow:0 24px 60px rgba(0,0,0,.25);pointer-events:none}
/* La piste contient deux fois la même liste : à -50 % le second exemplaire est
   exactement là où était le premier, la boucle est invisible. */
.foot__mq-track{display:flex;flex:none;align-items:center;width:max-content;
  font-family:"Geist Mono",ui-monospace,Menlo,monospace;font-size:.62rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;line-height:1;color:#B7BCC6;
  animation:foot-mq 42s linear infinite}
@keyframes foot-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.foot__mq-group{display:flex;flex:none;align-items:center;gap:34px;padding:0 17px}
.foot__mq-group span{flex:none;white-space:nowrap;line-height:1}
.foot__mq-group i{font-style:normal;color:var(--sage);flex:none}

.foot__inner{position:relative;z-index:1;margin-top:88px}
.foot__top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:end}
.foot__top > div:first-child{display:flex;flex-direction:column;gap:22px}
.foot__h{font-size:84px;line-height:.98;letter-spacing:-.05em;font-weight:600}
.foot__lead{font-size:18px;line-height:1.6;color:var(--grey);max-width:520px}
.foot__actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.foot__mail{font-size:14px;color:var(--paper);text-decoration:none;
  border-bottom:1px solid rgba(197,225,184,.5);padding-bottom:3px}
.foot__mail:hover{color:var(--sage)}

.foot__base{position:relative;z-index:1;margin-top:96px;
  display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;font-size:12px;
  letter-spacing:.06em;color:var(--grey);border-top:1px solid rgba(197,225,184,.16);padding-top:26px}
.foot__links{display:flex;gap:22px;flex-wrap:wrap}
.foot__links a,.foot__links button{color:var(--grey);background:transparent;border:0;padding:0;cursor:pointer;
  font-size:12px;letter-spacing:.06em;font-family:inherit;text-decoration:none}
.foot__links a:hover,.foot__links button:hover{color:var(--sage)}

/* -------------------------------------------------------- 21. COOKIES ------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--navy);color:var(--paper);
  border-top:1px solid rgba(197,225,184,.25);padding:18px 0}
.cookie[hidden]{display:none}
.cookie__inner{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.cookie__text{font-size:14.5px;line-height:1.5;max-width:720px}
.cookie__actions{display:flex;gap:10px}

/* ==========================================================================
   23. ÉTATS INITIAUX D'ANIMATION — uniquement quand JS + GSAP sont actifs.
   Chaque règle ici a son pendant exact dans js/v2.js (gsap.set au démarrage) :
   le CSS évite le flash avant l'exécution du script, GSAP prend ensuite le relais.
   ========================================================================== */
html.js .sec__lead,
html.js .constat__punch,
html.js .radar__text,
html.js .ba__note,
html.js .work__note,
html.js .figs__note,
html.js .who__p,
html.js .who__sign,
html.js .contact__intro,
html.js .steps3,
html.js .faq__lead,
html.js .incl,
html.js .pricing__label,
html.js .foot__lead,
html.js .foot__actions,
html.js .quote{opacity:0;transform:translateY(40px)}

html.js .constat__card{opacity:0;transform:perspective(900px) translateY(56px) rotateX(-12deg);
  transform-origin:50% 100%}
html.js .tile{opacity:0;clip-path:inset(0 100% 0 0);transform:scale(.97)}
html.js .ba__frame{opacity:0;transform:scale(.94)}
html.js .wk{opacity:0;transform:translateY(70px)}
html.js .fig{opacity:0;transform:translateY(40px)}
html.js .fac{opacity:0;transform:translateX(-44px)}
html.js .lead .seg,
html.js .lead .field,
html.js .lead__fine,
html.js #leadSubmit{opacity:0;transform:translateY(26px)}

/* titres et kickers : masqués le temps du découpage SplitText */
html.js [data-type]{visibility:hidden}
html.js .h2,html.js .h3--big,html.js .foot__h{visibility:hidden}
/* .hero__title est volontairement ABSENT de la règle ci-dessus : c'est
   l'élément LCP de la page. Le masquer, même une frame, retarde la mesure que
   fait Google. Son entrée est jouée par js/v2.js depuis un état déjà visible
   (mots décalés de 18 px, opacity 1). */

/* hero */
html.js .hero__sub,html.js .hero__cta,html.js .hero__proof,html.js .hero__demo{opacity:0}
html.js .float-card,html.js .perf-card{opacity:0}
html.js .cl__i{clip-path:inset(0 100% 0 0)}
html.js .bl{opacity:0}
html.js .ws__ring,html.js .ctademo__ring{opacity:0}

/* qui je suis + radar */
html.js .who__photo{clip-path:inset(0 0 100% 0)}
html.js .who__badge{opacity:0}
html.js .who__sign-name{clip-path:inset(0 100% 0 0)}
html.js [data-town]{opacity:0}

html.js.intro-lock{overflow:hidden}

/* ==========================================================================
   24. RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .h2{font-size:52px}
  .figs .h2,.contact .h2,.faq .h2{font-size:48px}
  .foot__h{font-size:64px}
  .fig__num{font-size:84px}
  .fig__pct{font-size:44px}
  .tile--radar{padding:44px}
  .h3--big{font-size:40px}
  .who__inner{gap:48px}
  .contact__inner{gap:44px}
  .faq__inner{gap:44px}
  .nav__links{gap:18px;font-size:14px}
  .nav__status{display:none}
}

@media (max-width:980px){
  :root{--gut:20px}

  .nav{width:calc(100% - 24px);margin:12px auto -84px}
  .nav__links{display:none}
  .nav__cta{display:none}
  .burger{display:flex}

  .hero{padding:150px 0 90px}
  .hero__inner{grid-template-columns:minmax(0,1fr);gap:48px}
  .hero__title{font-size:46px}
  .hero__demo{padding:0}
  .float-card{left:0;top:-18px;padding:11px 14px}
  .float-card__txt strong{font-size:13px}
  .perf-card{right:0;bottom:-18px;padding:11px 14px}
  .hero__scroll{display:none}

  .sec{padding:96px 0}
  .figs{padding:120px 0 96px}
  .sec__head{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;margin-bottom:40px}
  .h2{font-size:36px}
  .figs .h2,.contact .h2,.faq .h2{font-size:36px}
  .h3--big{font-size:32px}
  .constat__punch{font-size:28px}

  .g3,.bento{grid-template-columns:minmax(0,1fr)}
  .tile--w2,.tile--radar{grid-column:auto}
  .tile{min-height:0;padding:28px}
  .tile--radar{padding:32px 24px;grid-template-columns:minmax(0,1fr);gap:32px}
  .path__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .path__line,.path__runner{display:none}
  .phone{margin:24px auto -40px}
  .radar{width:100%;max-width:360px}
  .radar__town{font-size:9.5px;gap:4px}
  .radar__town i{width:5px;height:5px}
  .radar__name{font-size:10px}

  .ba__frame{height:430px}
  .old__body{padding:18px 20px;gap:10px}
  .old__text{font-size:12.5px}
  .old__meta{font-size:10px}
  .old__img{height:90px}
  .new__top{height:56px;padding:0 18px;gap:12px}
  .new__brand{font-size:14px}
  .new__nav{display:none}
  .new__cta{display:none}
  .ba__tag{top:auto;bottom:14px}
  .new__body{padding:22px 18px;grid-template-columns:minmax(0,1fr);gap:18px}
  .new__mosaic{display:none}
  .new__sub{font-size:14px}
  .new__b1,.new__b2{height:40px;padding:0 16px;font-size:13px}
  .ba__knob{width:44px;height:44px;margin:-22px 0 0 -22px}
  .ba__range::-webkit-slider-thumb{height:430px}

  .methode__viewport{margin-top:40px;overflow:visible}
  .methode__track{display:flex;flex-direction:column;gap:34px;padding-left:calc(var(--gut) + 72px)}
  .methode__rail{left:calc(var(--gut) + 27px);right:auto;top:10px;bottom:10px;width:2px;height:auto}
  .methode__fill{transform:scaleY(0);transform-origin:50% 0}
  .step__num{position:absolute;left:-72px;top:-4px;width:56px;height:56px}
  .step{padding-left:0}

  .work__grid{margin-bottom:36px}

  .figs__grid{grid-template-columns:minmax(0,1fr)}
  .fig{padding:28px 0;border-bottom:1px solid rgba(197,225,184,.22)}
  .fig:last-child{border-bottom:0}
  .fig__rule{display:none}
  .fig__num{font-size:72px}
  .fig__pct{font-size:38px}

  .who__inner{grid-template-columns:minmax(0,1fr);gap:44px}
  .who__media{max-width:420px}
  .who__badge{right:0;top:20px;padding:14px 18px}
  .who__p{font-size:17px}

  .pricing__grid{grid-template-columns:minmax(0,1fr)}
  .pricing__factors,.quote{padding:28px}
  .fac__t{font-size:17px}
  .quote__h{font-size:27px}
  .incl{justify-content:flex-start;padding:18px}

  .contact__inner{grid-template-columns:minmax(0,1fr);gap:40px}
  .lead{padding:24px}
  .lead__row{grid-template-columns:minmax(0,1fr)}

  .faq__inner{grid-template-columns:minmax(0,1fr)}
  .faq__aside{position:static}
  .qa__q{font-size:17px}
  .qa__a{padding:0 0 22px 48px}

  .foot{padding:0 0 28px}
  .foot__mq{margin-top:64px;transform:rotate(-2.5deg) scale(1.16)}
  .foot__inner{margin-top:56px}
  .foot__top{grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
  .foot__h{font-size:46px}
  .foot__giant{font-size:42vw;bottom:-2vh}
  .foot__base{margin-top:64px;gap:12px}
}

@media (max-width:560px){
  .hero__title{font-size:38px}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .btn--lg{height:54px;font-size:15.5px}
  .win__code{font-size:10.5px;height:126px;padding:14px 16px}
  .ws__body{grid-template-columns:minmax(0,1fr)}
  .ws__photo{height:96px}
  .h2{font-size:31px}
  .figs .h2,.contact .h2,.faq .h2{font-size:31px}
  .constat__punch{font-size:24px}
  .ba__frame{height:380px}
  .ba__range::-webkit-slider-thumb{height:380px}
  .old__banner{height:64px}
  .cookie__actions{width:100%}
  .cookie__actions .btn{flex:1}
}

/* ==========================================================================
   25. MOUVEMENT RÉDUIT — plus d'intro, de Lenis, d'épinglage, de scrub ni de
   boucle. js/v2.js s'arrête après la partie « interface » ; c'est donc ce bloc
   qui doit annuler, un à un, tous les états initiaux posés en section 23.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  html.js .sec__lead,
  html.js .constat__punch,
  html.js .radar__text,
  html.js .ba__note,
  html.js .work__note,
  html.js .figs__note,
  html.js .who__p,
  html.js .who__sign,
  html.js .contact__intro,
  html.js .steps3,
  html.js .faq__lead,
  html.js .incl,
  html.js .pricing__label,
  html.js .foot__lead,
  html.js .foot__actions,
  html.js .quote,
  html.js .constat__card,
  html.js .tile,
  html.js .ba__frame,
  html.js .wk,
  html.js .fig,
  html.js .fac,
  html.js .lead .seg,
  html.js .lead .field,
  html.js .lead__fine,
  html.js #leadSubmit,
  html.js .hero__sub,
  html.js .hero__cta,
  html.js .hero__proof,
  html.js .hero__demo,
  html.js .float-card,
  html.js .perf-card,
  html.js .bl,
  html.js .cl__i,
  html.js [data-town],
  html.js .who__photo,
  html.js .who__badge,
  html.js .who__sign-name,
  html.js .hero__title .w{
    opacity:1!important;transform:none!important;clip-path:none!important;visibility:visible!important
  }

  html.js [data-type],
  html.js .h2,html.js .h3--big,html.js .foot__h{visibility:visible!important}

  /* états « tracés » figés à leur valeur d'arrivée */
  .hl__mark{transform:scaleX(1)!important}
  .fig__rule{transform:scaleY(1)!important}
  .methode__fill{transform:scaleX(1)!important}
  .nav__progress{transform:scaleX(1)!important}
  .foot{--fp:1!important}

  /* l'intro n'est jamais jouée */
  .intro{display:none!important}

  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}