/* =========================================================
   Sitero — feuille de style
   Direction : blanc dominant, ruptures noires, bleu unique.
   Esprit Apple : typographie serrée, grands blancs, calme.
   ========================================================= */

@font-face{font-family:'Inter';src:url(../fonts/inter-latin.woff2) format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';src:url(../fonts/inter-latin-ext.woff2) format('woff2');font-weight:100 900;font-display:swap;
  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;}
/* Une seule famille sur tout le site : Inter, qui est la plus proche du
   San Francisco d'Apple. Les gros chiffres ne changent pas de police, ils
   changent seulement de graisse et de crénage — c'est ce calme-là qui fait
   « Apple », pas une police d'affiche. */

:root{
  --ink:#1d1d1f;          /* texte principal sur clair */
  --ink-2:#6e6e73;        /* texte secondaire */
  --ink-3:#86868b;        /* texte tertiaire */
  --paper:#f5f5f7;        /* gris de rupture douce */
  --line:#d2d2d7;         /* filets sur clair */
  --white:#fff;
  --black:#000;
  --dark-2:#111113;       /* surfaces sur noir */
  --dark-3:#1c1c1e;
  --dline:rgba(255,255,255,.14);
  /* Turquoise plutôt que bleu franc : la couleur de la marque.
     --blue reste le nom historique de la variable pour ne rien casser ;
     --tint est le nom qu'on utilise dans les feuilles ajoutées depuis. */
  --blue:#0092b5;         /* assez foncé pour porter du texte blanc */
  --blue-h:#00b4d8;       /* survol, franchement électrique */
  --blue-d:#03657e;
  --tint:#0092b5; --tint-h:#00b4d8; --tint-l:#3ce3f8; --tint-d:#03657e;
  /* Le dégradé, c'est lui qui rend la couleur « électrique » sans monter
     en luminosité : l'œil lit le haut clair, le contraste du texte blanc
     est tenu par le bas. Un aplat clair aurait été illisible. */
  --tint-grad:linear-gradient(135deg,#00b8de 0%,#0086ad 58%,#0a6f95 100%);
  --green:#0f9d58;
  --red:#c2352c;

  --w:1240px;
  --gut:clamp(20px,5vw,40px);
  --pad-s:clamp(76px,11vw,168px);   /* respiration verticale des sections */
  --r-s:12px; --r-m:18px; --r-l:24px; --r-xl:30px;

  --e:cubic-bezier(.22,.61,.36,1);
  --e-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'kern' 1,'liga' 1,'cv11' 1;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:6px}
.sec--dark :focus-visible{outline-color:#7fb0ff}

/* icônes : traits, jamais de remplissage */
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.11em}

/* ---------- typographie d'échelle ---------- */
.h2{
  font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.06;font-weight:680;
  letter-spacing:-.035em;text-wrap:balance;
}
.h4{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.2;font-weight:640;letter-spacing:-.02em}
.dim{color:var(--ink-3)}
.sec--dark .dim{color:#86868b}
.lead{font-size:clamp(1.02rem,1.5vw,1.24rem);line-height:1.5;color:var(--ink-2);max-width:56ch;text-wrap:pretty}
.sec--dark .lead{color:#a1a1a6}
.eyebrow{
  font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
/* Un petit trait plein devant le surtitre. Apple n'en met jamais :
   c'est ce genre de détail qui éloigne le site de la copie. */
.eyebrow::before{content:'';width:26px;height:3px;border-radius:2px;background:currentColor;flex:none}
.shead--c .eyebrow,.of__head .eyebrow{justify-content:center}
.sec--dark .eyebrow{color:var(--blue-h)}

.shead{max-width:820px;margin-bottom:clamp(36px,4vw,60px)}
.shead .lead{margin-top:22px}

/* ---------- surfaces ---------- */
.sec--light{background:var(--white);color:var(--ink)}
.sec--paper{background:var(--paper);color:var(--ink)}
.sec--dark{background:var(--black);color:#f5f5f7}

/* ---------- boutons ---------- */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  padding:15px 28px;border-radius:16px;font-size:1rem;font-weight:560;letter-spacing:-.012em;
  cursor:pointer;transition:transform .35s var(--e-out),background .25s,color .25s,border-color .25s,box-shadow .35s var(--e-out);
}
.btn .ic{font-size:1.05em;transition:transform .4s var(--e-out)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .ic{transform:translateX(4px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--blue{--bg:var(--blue);--fg:#fff;background-image:var(--tint-grad);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 8px 22px -12px rgba(0,146,181,.6)}
.btn--blue:hover{box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 14px 40px -12px rgba(0,180,216,.85);
  filter:saturate(1.12) brightness(1.06)}
.btn--dark{--bg:var(--ink);--fg:#fff}
.sec--dark .btn--dark,.ft .btn--dark{--bg:#fff;--fg:#000}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
.btn--ghost:hover{--bd:var(--ink)}
.sec--dark .btn--ghost{--fg:#f5f5f7;--bd:var(--dline)}
.sec--dark .btn--ghost:hover{--bd:#fff}
.btn--sm{padding:10px 20px;font-size:.94rem}
.btn--full{width:100%}

/* =========================================================
   EN-TÊTE
   ========================================================= */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  background:rgba(255,255,255,0);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  border-bottom:1px solid transparent;
  transition:background .45s var(--e),backdrop-filter .45s var(--e),border-color .45s var(--e),color .45s var(--e);
}
.hdr.is-stuck{background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom-color:rgba(0,0,0,.08)}
.hdr.on-dark{color:#f5f5f7}
.hdr.on-dark.is-stuck{background:rgba(0,0,0,.62);border-bottom-color:rgba(255,255,255,.12)}
.hdr__in{display:flex;align-items:center;gap:28px;height:66px}

.logo{display:flex;align-items:center;gap:10px;font-weight:640;font-size:1.12rem;letter-spacing:-.03em;margin-right:auto}
.logo__mk{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5px;width:19px;height:19px}
.logo__mk i{display:block;background:currentColor;border-radius:2.5px;opacity:.28;transition:opacity .5s var(--e),transform .5s var(--e-out)}
.logo__mk i:first-child{background:var(--blue);opacity:1;grid-column:1/-1;height:7.5px}
.logo:hover .logo__mk i{opacity:.6}
.logo:hover .logo__mk i:first-child{opacity:1;transform:translateY(-1px)}

.nav{display:flex;gap:30px;font-size:.93rem;font-weight:450;letter-spacing:-.005em}
.nav a{position:relative;padding:6px 0;opacity:.78;transition:opacity .25s}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:2px;height:1.5px;background:currentColor;transition:right .4s var(--e-out)}
.nav a:hover{opacity:1}
.nav a:hover::after{right:0}
.hdr__cta{display:flex;align-items:center;gap:12px}

.burger{display:none;width:40px;height:40px;background:none;border:0;cursor:pointer;padding:0;place-items:center}
.burger i{display:block;width:19px;height:1.6px;background:currentColor;border-radius:2px;transition:transform .4s var(--e-out),opacity .3s}
.burger i+i{margin-top:5.5px}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.mnav{position:fixed;inset:66px 0 auto;z-index:99;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line);
  padding:14px var(--gut) 28px;display:grid;gap:2px}
.mnav[hidden]{display:none}
.mnav a{padding:15px 4px;font-size:1.15rem;font-weight:520;letter-spacing:-.02em;border-bottom:1px solid rgba(0,0,0,.06)}
.mnav .btn{margin-top:18px;border-bottom:0}

/* =========================================================
   1. HERO
   ========================================================= */
.hero{padding:calc(66px + clamp(40px,5vw,72px)) 0 0;text-align:center;overflow:hidden;position:relative}
.hero__in{max-width:1000px}
.hero__t{
  font-size:clamp(2.9rem,8.2vw,6.6rem);line-height:.98;font-weight:700;letter-spacing:-.045em;
  margin:0 0 26px;text-wrap:balance;
}
.hero__t .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero__t .line>span{display:block;transform:translateY(105%)}
.hero__s{font-size:clamp(1.08rem,2.1vw,1.42rem);line-height:1.45;color:var(--ink-2);max-width:34ch;margin:0 auto;letter-spacing:-.015em;text-wrap:balance}
.hero__s b{color:var(--ink);font-weight:600}
.hero__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero__pts{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:32px;font-size:.9rem;color:var(--ink-3)}
.hero__pts li{display:flex;align-items:center;gap:7px}
.hero__pts .ic{color:var(--blue);font-size:1em;stroke-width:2.6}

/* maquette de navigateur */
.mock{
  position:relative;width:min(1040px,92vw);margin:clamp(32px,4vw,56px) auto 0;
  padding-bottom:clamp(76px,10vw,132px);
  perspective:1600px;
}
.mock__frame{
  position:relative;border-radius:var(--r-l) var(--r-l) 0 0;overflow:hidden;background:#fff;
  border:1px solid var(--line);border-bottom:0;
  box-shadow:0 -1px 0 rgba(0,0,0,.02),0 40px 90px -50px rgba(0,0,0,.42);
  transform:rotateX(9deg) scale(.965);transform-origin:50% 100%;
}
.mock__bar{display:flex;align-items:center;gap:6px;padding:13px 18px;background:var(--paper);border-bottom:1px solid var(--line)}
.mock__bar>i{width:9px;height:9px;border-radius:50%;background:#d2d2d7}
.mock__url{margin-left:14px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:4px 14px;font-size:.72rem;color:var(--ink-3);letter-spacing:-.01em}
.mock__body{padding:0 0 26px;background:#fff}
.mock__nav{display:flex;align-items:center;gap:14px;padding:16px 26px;border-bottom:1px solid #ededf0}
.mock__nav b{width:64px;height:11px;background:var(--ink);border-radius:3px}
.mock__nav u{width:44px;height:7px;background:#e3e3e8;border-radius:3px}
.mock__nav em{margin-left:auto;width:78px;height:24px;background:var(--blue);border-radius:999px}
.mock__hero{display:grid;justify-items:center;gap:11px;padding:44px 26px 30px}
.mock__hero .l1{width:min(58%,420px);height:20px;background:var(--ink);border-radius:5px}
.mock__hero .l2{width:min(40%,300px);height:20px;background:var(--ink);border-radius:5px}
.mock__hero .l3{width:min(48%,340px);height:8px;background:#e3e3e8;border-radius:4px;margin-top:6px}
.mock__hero .cta{width:132px;height:32px;background:var(--blue);border-radius:999px;margin-top:12px}
.mock__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:14px 26px 0}
.mock__grid i{height:88px;background:linear-gradient(160deg,#f0f0f3,#e6e6ea);border-radius:14px;display:block}
.mock__foot{height:34px;margin:22px 26px 0;background:var(--paper);border-radius:10px}
/* état initial d'animation */
.mock__nav>*,.mock__hero>*,.mock__grid i,.mock__foot{opacity:0}

.mock__phone{
  position:absolute;right:-6px;bottom:clamp(46px,7vw,88px);width:clamp(112px,15vw,168px);aspect-ratio:9/18.5;
  background:#fff;border:1px solid var(--line);border-radius:26px;padding:9px 7px;
  box-shadow:0 34px 60px -34px rgba(0,0,0,.5);transform:translateY(14px) rotate(-3.5deg);
  display:grid;grid-template-rows:auto 1fr;gap:8px;opacity:0;
}
.mock__pbar{height:5px;width:38%;background:#e3e3e8;border-radius:3px;justify-self:center}
.mock__pbody{display:grid;gap:7px;align-content:start;padding:4px 6px}
.mock__pbody span{height:7px;background:#e6e6ea;border-radius:3px}
.mock__pbody span:first-child{height:12px;background:var(--ink);width:78%}
.mock__pbody span:nth-child(2){width:56%;background:var(--ink)}
.mock__pbody b{height:22px;background:var(--blue);border-radius:999px;margin-top:6px}

/* bande défilante */
.ticker{border-block:1px solid var(--line);overflow:hidden;padding:20px 0;background:var(--white)}
.ticker__row{display:flex;align-items:center;gap:28px;width:max-content;will-change:transform}
.ticker__row span{font-size:clamp(1.1rem,2.4vw,1.9rem);font-weight:600;letter-spacing:-.035em;color:#c7c7cc;white-space:nowrap}
.ticker__row em{width:5px;height:5px;border-radius:50%;background:var(--blue);opacity:.55;flex:none}

/* =========================================================
   2. LE PROBLÈME (noir + vidéo)
   ========================================================= */
.pb{position:relative;padding:var(--pad-s) 0;overflow:hidden;isolation:isolate}
/* Pas de filter sur la vidéo : le navigateur redécolorerait chaque image
   en plein écran, à 25 images par seconde, pendant tout le défilement.
   L'assombrissement est déjà fait par le voile au-dessus. */
.pb__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.32}
.pb__veil{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 78% at 50% 0%,rgba(0,0,0,.55) 0%,rgba(0,0,0,.86) 52%,#000 100%)}
.pb__in{position:relative}
.pb .lead{margin-top:26px}
.pb__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(52px,6vw,86px)}
/* Fond opaque plutôt qu'un backdrop-filter : flouter la vidéo qui défile
   derrière trois cartes, c'était trois zones recalculées à chaque frame. */
.pbc{
  background:rgba(28,28,30,.72);border:1px solid var(--dline);border-radius:var(--r-l);
  padding:32px 28px 26px;
}
.pbc__n{font-size:clamp(3rem,6vw,4.4rem);line-height:1;font-weight:640;letter-spacing:-.045em;color:#fff}
.pbc__u{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:600;letter-spacing:-.03em;color:var(--blue-h);margin-left:3px}
.pbc p{margin-top:18px;color:#c7c7cc;font-size:.98rem;line-height:1.5}
.pbc cite{display:block;margin-top:16px;font-size:.76rem;font-style:normal;color:#6e6e73;letter-spacing:.02em}

/* =========================================================
   3. BÉNÉFICES
   ========================================================= */
.ben{padding:var(--pad-s) 0}
.ben__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.bc{background:#fff;padding:clamp(30px,3.2vw,44px);transition:background .4s var(--e)}
.bc:hover{background:var(--paper)}
.bc__i{width:30px;height:30px;fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:22px}
.bc h3{font-size:1.16rem;font-weight:620;letter-spacing:-.022em;margin-bottom:11px}
.bc p{color:var(--ink-2);font-size:.97rem;line-height:1.55}

.ben__ph{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:clamp(48px,5vw,72px)}
.ph{border-radius:var(--r-m);overflow:hidden;background:var(--paper);aspect-ratio:4/5}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-out)}
.ph:hover img{transform:scale(1.06)}
.ph:nth-child(even){margin-top:26px}

/* =========================================================
   4. OFFRES — trois cartes de prix
   Fond gris très clair, cartes blanches, coins largement arrondis :
   la mise en page de comparaison d'Apple. La carte du milieu est
   distinguée par un simple liseré bleu, jamais par une couleur de fond.
   ========================================================= */
.of{padding:var(--pad-s) 0 clamp(66px,8vw,110px)}
.of__head{text-align:center;max-width:820px;margin-inline:auto;margin-bottom:clamp(46px,5.5vw,76px)}
.of__head .lead{margin:22px auto 0}

.of__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px);align-items:stretch}
.op{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid rgba(0,0,0,.07);border-radius:var(--r-xl);
  padding:clamp(30px,3vw,40px) clamp(24px,2.6vw,34px) clamp(28px,3vw,36px);
  box-shadow:0 2px 5px rgba(0,0,0,.03),0 18px 40px -28px rgba(0,0,0,.22);
  transition:transform .6s var(--e-out),box-shadow .6s var(--e-out);
}
.op:hover{transform:translateY(-4px);box-shadow:0 2px 5px rgba(0,0,0,.03),0 34px 62px -32px rgba(0,0,0,.3)}
.op--star{border-color:var(--blue);box-shadow:0 2px 5px rgba(0,0,0,.03),0 22px 48px -26px rgba(0,146,181,.42)}
.op--star:hover{box-shadow:0 2px 5px rgba(0,0,0,.03),0 38px 68px -30px rgba(0,146,181,.5)}

/* La place du badge est réservée sur les TROIS cartes, même sans badge :
   sinon la carte du milieu descend et les trois prix ne s'alignent plus. */
.op__hd{position:relative;padding-top:38px;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.op__badge{
  position:absolute;top:0;left:0;height:26px;display:inline-flex;align-items:center;
  background:var(--blue);color:#fff;border-radius:999px;
  padding:0 13px;font-size:.7rem;font-weight:560;letter-spacing:.02em;
}
.op__k{font-size:1.3rem;font-weight:620;letter-spacing:-.028em}
.op__p{margin:14px 0 0;display:flex;align-items:baseline;gap:6px;color:var(--ink)}
.op__p span{font-size:clamp(2.9rem,4.4vw,3.7rem);line-height:1;font-weight:640;letter-spacing:-.05em}
.op__p em{font-size:1.5rem;font-style:normal;font-weight:560;letter-spacing:-.03em;color:var(--ink-3)}
.op__s{color:var(--ink-3);margin-top:10px;font-size:.92rem;letter-spacing:-.01em}

.op__d{color:var(--ink-2);font-size:.99rem;line-height:1.5;letter-spacing:-.012em}
.op__l{margin:24px 0 30px;display:grid;gap:12px}
.op__l li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;color:var(--ink-2);line-height:1.45}
.op__l .ic{color:var(--blue);font-size:1.02em;margin-top:.24em;stroke-width:2.6}
.op__inc{color:var(--ink-3);font-size:.84rem;letter-spacing:.01em;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:2px}
.op .btn{margin-top:auto}

.of__opts{margin-top:clamp(74px,9vw,120px);border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)}
.opt__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:30px}
.opt{background:var(--white);border:1px solid rgba(0,0,0,.07);border-radius:var(--r-m);padding:22px 20px;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out)}
.opt:hover{transform:translateY(-3px);box-shadow:0 16px 34px -26px rgba(0,0,0,.4)}
.opt b{display:block;font-size:.98rem;font-weight:600;letter-spacing:-.018em}
.opt span{display:block;color:var(--blue);font-size:1.02rem;font-weight:640;margin:6px 0 10px}
.opt p{color:var(--ink-2);font-size:.85rem;line-height:1.45}
.of__note{margin-top:30px;color:var(--ink-3);font-size:.9rem;max-width:74ch;line-height:1.55}
.of__note b{color:var(--ink-2);font-weight:560}

/* =========================================================
   5. MÉTHODE
   ========================================================= */
.me{padding:var(--pad-s) 0}
.steps{position:relative;display:grid;gap:0;max-width:920px;margin-inline:auto}
.steps__rail{position:absolute;left:23px;top:12px;bottom:44px;width:1.5px;background:var(--line)}
.steps__rail i{position:absolute;inset:0 0 auto;height:0;background:var(--blue);display:block}
.st{display:flex;gap:26px;padding:0 0 40px}
.st__n{
  flex:none;width:47px;height:47px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1.5px solid var(--line);font-weight:640;font-size:1.02rem;letter-spacing:-.02em;
  position:relative;z-index:1;transition:background .45s var(--e),color .45s var(--e),border-color .45s var(--e),transform .5s var(--e-out);
}
.st.is-done .st__n{background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.06)}
.st h3{font-size:1.24rem;font-weight:620;letter-spacing:-.026em;margin:9px 0 9px}
.st p{color:var(--ink-2);font-size:1rem;line-height:1.55;max-width:60ch}
.me__note{margin:clamp(24px,3vw,40px) auto 0;max-width:920px;padding:26px 30px;background:var(--paper);border-radius:var(--r-m);color:var(--ink-2);font-size:.96rem;line-height:1.55}
.me__note b{color:var(--ink);font-weight:600}

/* =========================================================
   6. EXEMPLES
   ========================================================= */
.ex{padding:var(--pad-s) 0}
.ex__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.exc{position:relative}
.exc__screen{
  border-radius:var(--r-m);overflow:hidden;background:#fff;border:1px solid var(--line);
  box-shadow:0 26px 50px -34px rgba(0,0,0,.34);margin-bottom:22px;
  transition:transform .7s var(--e-out),box-shadow .7s var(--e-out);
}
.exc:hover .exc__screen{transform:translateY(-8px);box-shadow:0 40px 70px -34px rgba(0,0,0,.42)}
.exc__bar{display:flex;gap:5px;padding:10px 14px;background:var(--paper);border-bottom:1px solid var(--line)}
.exc__bar i{width:7px;height:7px;border-radius:50%;background:#d2d2d7}
.exc__pg{padding:0 0 18px;--ac:var(--blue)}
.exc[data-theme="artisan"] .exc__pg{--ac:#b4581f;--im:linear-gradient(150deg,#e8d9c8,#d3b494)}
.exc[data-theme="commerce"] .exc__pg{--ac:#146b4a;--im:linear-gradient(150deg,#d5e7dd,#b3d3c3)}
.exc[data-theme="independant"] .exc__pg{--ac:#1f3f8f;--im:linear-gradient(150deg,#dbe2f2,#bcc9e8)}
.exc__nv{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid #eee}
.exc__nv b{width:38px;height:8px;background:var(--ac);border-radius:2px}
.exc__nv u{width:26px;height:5px;background:#e6e6ea;border-radius:2px}
.exc__hd{display:grid;gap:7px;padding:24px 16px 16px}
.exc__hd span{height:12px;background:#1d1d1f;border-radius:3px;width:82%}
.exc__hd .sm{height:6px;background:#dcdce1;width:62%}
.exc__hd .bt{height:20px;width:88px;background:var(--ac);border-radius:999px;margin-top:6px}
.exc__rw{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:6px 16px 12px}
.exc__rw i{height:38px;background:#f1f1f4;border-radius:7px;display:block}
.exc__im{height:76px;margin:0 16px;border-radius:9px;background:var(--im,var(--paper))}
.exc h3{font-size:1.16rem;font-weight:620;letter-spacing:-.024em;margin-bottom:8px}
.exc p{color:var(--ink-2);font-size:.96rem;line-height:1.5}
.exc__tag{display:inline-block;margin-top:14px;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:4px 12px}

/* =========================================================
   7. INCLUS / EXCLU
   ========================================================= */
.pe{padding:var(--pad-s) 0}
.pe__cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pel{border-radius:var(--r-l);padding:clamp(30px,3.4vw,44px);border:1px solid var(--line)}
.pel--in{background:var(--paper);border-color:transparent}
.pel--out{background:#fff}
.pel h3{display:flex;align-items:center;gap:11px;font-size:1.1rem;font-weight:640;letter-spacing:-.022em;margin-bottom:24px}
.pel h3 .ic{font-size:1.28em;stroke-width:2.6}
.pel--in h3 .ic{color:var(--green)}
.pel--out h3 .ic{color:var(--red)}
.pel ul{display:grid;gap:14px}
.pel li{position:relative;padding-left:20px;font-size:.99rem;line-height:1.5;color:var(--ink-2)}
.pel li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--line)}
.pel--out li{color:var(--ink-3)}
.pe__rule{margin-top:26px;border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(28px,3.4vw,40px);max-width:920px}
.pe__rule p{color:var(--ink-2);margin-top:14px;font-size:.99rem;line-height:1.55}
.pe__warn{background:var(--paper);border-radius:var(--r-s);padding:16px 20px;color:var(--ink)!important}
.pe__warn b{font-weight:620}

/* =========================================================
   8. FAQ
   ========================================================= */
.fq{padding:var(--pad-s) 0}
.fq__in{max-width:900px}
.acc{border-top:1px solid var(--line)}
.ac{border-bottom:1px solid var(--line)}
.ac summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 4px;cursor:pointer;list-style:none;
  font-size:clamp(1.04rem,1.7vw,1.22rem);font-weight:560;letter-spacing:-.024em;
  transition:color .3s;
}
.ac summary::-webkit-details-marker{display:none}
.ac summary:hover{color:var(--blue)}
.ac summary .ic{font-size:1.35em;color:var(--ink-3);flex:none;transition:transform .45s var(--e-out),color .3s;stroke-width:1.9}
.ac[open] summary .ic{transform:rotate(45deg);color:var(--blue)}
.ac__b{padding:0 4px 28px}
.ac__b p{color:var(--ink-2);font-size:1.01rem;line-height:1.6;max-width:70ch}
.ac__b b{color:var(--ink);font-weight:600}

/* =========================================================
   9. CONTACT
   ========================================================= */
.ct{padding:var(--pad-s) 0}
.ct__in{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(40px,6vw,88px);align-items:start}
.ct .lead{margin-top:24px}
.ct__co{display:grid;gap:14px;margin-top:34px}
.ct__co li{display:flex;align-items:center;gap:13px;font-size:1.06rem;letter-spacing:-.018em}
.ct__co .ic{font-size:1.2em;color:var(--blue)}
.ct__co a{border-bottom:1px solid transparent;transition:border-color .3s}
.ct__co a:hover{border-bottom-color:currentColor}
.ct__mini{margin-top:22px;color:var(--ink-3);font-size:.88rem;line-height:1.5;max-width:44ch}
.ct__ph{margin-top:38px;border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/11}
.ct__ph img{width:100%;height:100%;object-fit:cover;object-position:center 30%}

/* le formulaire : une carte claire posée sur le blanc, comme les fiches
   de configuration d'Apple — champs gris très pâles, bordure discrète */
.frm{background:var(--paper);border:1px solid rgba(0,0,0,.06);border-radius:var(--r-xl);padding:clamp(26px,3.4vw,42px)}
.frm__r2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:grid;gap:8px;margin-bottom:18px}
.fld label,.fld legend{font-size:.86rem;font-weight:520;color:var(--ink-2);letter-spacing:-.005em}
.fld i{color:var(--blue);font-style:normal}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld select,.fld textarea{
  width:100%;background:var(--white);border:1px solid var(--line);border-radius:var(--r-s);
  padding:13px 15px;color:var(--ink);font-size:1rem;transition:border-color .3s,box-shadow .3s;
  -webkit-appearance:none;appearance:none;
}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px;padding-right:40px}
.fld textarea{resize:vertical;min-height:104px;line-height:1.5}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,146,181,.14);outline:none}
.fld input::placeholder,.fld textarea::placeholder{color:#a9a9af}
.fld--fs{gap:11px}
.fld--fs legend{margin-bottom:3px}
.rad{display:inline-flex;align-items:center;gap:8px;margin-right:16px}
.rad input{accent-color:var(--blue);width:17px;height:17px}
.rad label{color:var(--ink);font-size:.94rem;cursor:pointer}
.fld--chk{grid-template-columns:auto 1fr;align-items:start;gap:11px;margin-top:22px}
.fld--chk input{accent-color:var(--blue);width:18px;height:18px;margin-top:2px}
.fld--chk label{color:var(--ink);font-size:.9rem;line-height:1.45;cursor:pointer}
.frm__rgpd{font-size:.79rem;line-height:1.5;color:var(--ink-3);margin:16px 0 22px}
.frm__rgpd a{color:var(--ink-2);border-bottom:1px solid var(--line)}
.frm__rgpd a:hover{color:var(--ink)}
.frm__msg{margin-top:16px;font-size:.92rem;line-height:1.5;min-height:1.2em}
.frm__msg.ok{color:#0b7a43}
.frm__msg.ko{color:#b3261e}
.fld.is-bad input,.fld.is-bad select,.fld.is-bad textarea{border-color:#d93025;box-shadow:0 0 0 4px rgba(217,48,37,.1)}

/* =========================================================
   PIED DE PAGE
   ========================================================= */
/* Pied de page gris très clair et texte menu : c'est la signature du bas
   de page d'Apple — petit, calme, gris, jamais un pavé noir. */
.ft{padding:clamp(48px,5vw,68px) 0 26px;border-top:1px solid var(--line)}
.ft__in{display:grid;grid-template-columns:1.15fr 2fr;gap:clamp(32px,5vw,72px)}
.ft__brand p{color:var(--ink-3);font-size:.85rem;line-height:1.55;margin-top:16px;max-width:36ch}
.logo--ft{font-size:1.2rem}
.ft__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ft__nav h3{font-size:.78rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:12px}
.ft__nav a,.ft__nav span{display:block;color:var(--ink-2);font-size:.8rem;padding:4px 0;transition:color .25s}
.ft__nav a:hover{color:var(--ink);text-decoration:underline}
.ft__btm{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(36px,4vw,54px);
  padding-top:20px;border-top:1px solid var(--line);color:var(--ink-3);font-size:.78rem}

/* =========================================================
   ANIMATIONS D'APPARITION
   ========================================================= */
.reveal{opacity:0;transform:translateY(22px)}
.js-off .reveal,.js-off .hero__t .line>span,.js-off .mock__nav>*,.js-off .mock__hero>*,
.js-off .mock__grid i,.js-off .mock__foot,.js-off .mock__phone{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .ben__grid{grid-template-columns:repeat(2,1fr)}
  .opt__grid{grid-template-columns:repeat(3,1fr)}
  .ben__ph{grid-template-columns:repeat(3,1fr)}
  .ben__ph figure:nth-child(n+4){display:none}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:grid}
  .hdr__cta .btn{display:none}
  .ct__in{grid-template-columns:1fr}
  .pb__cards{grid-template-columns:1fr}
  .ex__grid{grid-template-columns:1fr}
  .of__grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .pe__cols{grid-template-columns:1fr}
  .ft__in{grid-template-columns:1fr}
  .mock__phone{display:none}
}
@media (max-width:680px){
  body{font-size:16px}
  .ben__grid{grid-template-columns:1fr}
  .opt__grid{grid-template-columns:1fr}
  .ben__ph{grid-template-columns:repeat(2,1fr)}
  .ben__ph figure:nth-child(n+3){display:none}
  .frm__r2{grid-template-columns:1fr;gap:0}
  .ft__nav{grid-template-columns:1fr}
  .ft__nav>div{border-top:1px solid var(--dline);padding-top:20px}
  .hero__pts{gap:12px 20px;font-size:.85rem}
  .st{gap:16px}
  .steps__rail{left:18px}
  .st__n{width:37px;height:37px;font-size:.9rem}
  .of__grid{grid-template-columns:1fr}
  .ft__btm{flex-direction:column;gap:8px}
}

/* =========================================================
   PRÉFÉRENCES SYSTÈME
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .wm{height:auto}
  .wm__pin{position:static;height:auto;padding:clamp(40px,7vw,90px) 0}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.hero__t .line>span,.mock__nav>*,.mock__hero>*,.mock__grid i,.mock__foot,.mock__phone{opacity:1!important;transform:none!important}
  .pb__vid{display:none}
}
@media print{
  .hdr,.mnav,.pb__vid,.ticker,.mock{display:none}
  body{background:#fff;color:#000}
  .sec--dark{background:#fff!important;color:#000!important}
}

/* =========================================================
   AJOUTS DU 30/07 — pages séparées, couleur, animations
   ========================================================= */

/* Les pages autres que l'accueil commencent sous l'en-tête fixe. */
.page{padding-top:66px}
.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]::after{right:0}
.mnav a[aria-current="page"]{color:var(--blue)}

/* ---------- second accent : un doré chaud ----------
   Le bleu portait tout le site à lui seul. Le doré sert aux chiffres,
   aux unités et aux surtitres d'une section sur deux : la page respire
   sans devenir bariolée. Deux accents, jamais trois. */
:root{--gold:#c8811a;--gold-l:#e8a33d;--mint:#0f8a52}
.eyebrow--gold{color:var(--gold)}
.sec--dark .eyebrow--gold{color:var(--gold-l)}
.pbc__u{color:var(--gold-l)}
.ticker__row em:nth-child(4n){background:var(--gold-l);opacity:.8}

/* =========================================================
   LE NOM EN GRAND QUI SE REMPLIT AU DÉFILEMENT
   Deux copies superposées : celle du dessous est grise, celle du
   dessus est colorée et découpée par clip-path. Le défilement ne
   fait que déplacer la découpe — aucun recalcul de texte.
   ========================================================= */
/* La section est haute : c'est cette hauteur qui donne la durée de
   l'animation. Le contenu, lui, reste collé au centre de l'écran. */
/* L'INTRODUCTION EST UN CALQUE, PAS UNE SECTION QU'ON FAIT DÉFILER.
   Avant, il fallait parcourir deux écrans et demi pour la voir se jouer :
   d'où la « zone morte » au début du site. Elle se joue maintenant toute
   seule, par-dessus la page, et disparaît ensuite. Le site commence donc
   immédiatement sous le doigt. */
.wm{position:fixed;inset:0;z-index:9990;background:var(--white);height:auto}
.wm__pin{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
/* LE BLEU DE L'ARRIVÉE — un seul mécanisme, un seul propriétaire.
   Avant, deux choses essayaient d'amener le bleu : le calque basculait
   d'un coup au bleu quand la traversée commençait, PUIS un second fondu
   repeignait le bloc intérieur une demi-seconde plus tard. Les deux se
   voyaient l'un après l'autre, et entre les deux il restait du blanc.
   Maintenant c'est ce seul voile qui monte, et il monte AU MOMENT EXACT
   où la caméra entre dans le « e » : le bleu et le zoom sont un seul geste.
   Il est posé sous le mot (z-index 0 contre 1) pour qu'on voie la lettre
   grandir par-dessus, et non un aplat qui la recouvre.
   Son opacité appartient à logo.js, à personne d'autre. */
.wm__bleu{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--wm-sortie,#1395e8);opacity:0;
}
.wm__in{z-index:1}
html.intro-finie .wm{display:none}
/* le défilement est bloqué tant que l'introduction se joue */
html.intro-on,html.intro-on body{overflow:hidden;height:100%}
.wm__in{position:relative;padding-inline:var(--gut);width:100%;
  display:grid;place-items:center;transform-origin:50% 50%}

/* LA SCÈNE DU « S »
   Elle porte l'échelle et l'ancrage du zoom, et rien d'autre : un seul
   propriétaire par propriété, c'est le script qui la commande du début à
   la fin. Sa hauteur est donnée en unités d'écran pour que le logo occupe
   la même place quel que soit l'appareil. */
.wm__s{position:relative;height:min(46vh,34vw);aspect-ratio:100/124.27;
  will-change:transform}
.wm__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Le calque coloré est posé EXACTEMENT sur l'autre : c'est une découpe qui
   le révèle, pas un fondu. Sans superposition au pixel près, on verrait le
   gris dépasser sur un bord pendant le remplissage. */
.wm__svg--coul{z-index:1}
/* 🔴 ÉTAT DE REPOS = VISIBLE. Sans script, on voit le S en couleur, tout
   de suite. Le tracé et le gris ne sont montrés que par le script, le
   temps de l'animation. Jamais l'inverse. */








/* =========================================================
   APERÇU DES FORMULES (accueil)
   ========================================================= */
.ap{padding:var(--pad-s) 0;position:relative;overflow:hidden}
/* un voile de couleur très pâle : de la couleur sans rien salir */
.ap::before{content:'';position:absolute;inset:0 0 auto;height:60%;pointer-events:none;
  background:radial-gradient(70% 100% at 50% 0%,rgba(0,146,181,.09),rgba(232,163,61,.05) 55%,transparent 78%)}
.shead--c{text-align:center;margin-inline:auto}
.ap__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px);position:relative}
.apc{
  display:flex;flex-direction:column;background:var(--white);border:1px solid rgba(0,0,0,.07);
  border-radius:var(--r-xl);padding:34px 30px 28px;position:relative;
  transition:transform .55s var(--e-out),box-shadow .55s var(--e-out),border-color .3s;
  box-shadow:0 2px 5px rgba(0,0,0,.03),0 16px 38px -30px rgba(0,0,0,.24);
}
.apc:hover{transform:translateY(-5px);box-shadow:0 2px 5px rgba(0,0,0,.03),0 34px 60px -32px rgba(0,0,0,.32)}
.apc--star{border-color:var(--blue)}
.apc__b{display:inline-block;align-self:flex-start;background:var(--blue);color:#fff;border-radius:999px;
  padding:5px 13px;font-size:.7rem;font-weight:560;margin-bottom:12px}
.apc__k{font-size:1.22rem;font-weight:620;letter-spacing:-.028em}
.apc__p{margin:12px 0 0;display:flex;align-items:baseline;gap:6px}
.apc__p span{font-size:clamp(2.6rem,4vw,3.4rem);line-height:1;font-weight:640;letter-spacing:-.05em}
.apc__p em{font-size:1.4rem;font-style:normal;font-weight:560;color:var(--ink-3)}
.apc__s{color:var(--ink-3);margin-top:10px;font-size:.92rem}
.apc__go{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--blue);font-size:.92rem;font-weight:560;display:flex;align-items:center;gap:7px}
.apc__go .ic{transition:transform .4s var(--e-out)}
.apc:hover .apc__go .ic{transform:translateX(5px)}
.ap__note{margin-top:30px;color:var(--ink-3);font-size:.9rem;max-width:74ch;position:relative}
.ap__note b{color:var(--ink-2);font-weight:560}

/* =========================================================
   OÙ ALLER ENSUITE (accueil)
   ========================================================= */
.go{padding:var(--pad-s) 0}
.go__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.goc{display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r-l);
  padding:clamp(28px,3vw,38px);position:relative;overflow:hidden;
  transition:transform .55s var(--e-out),background .35s}
/* un filet de couleur qui se tire en travers de la carte au survol */
.goc::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--gold-l));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--e-out)}
.goc:hover{transform:translateY(-4px);background:#eeeef1}
.goc:hover::after{transform:scaleX(1)}
.goc h3{font-size:1.16rem;font-weight:620;letter-spacing:-.024em;margin-bottom:12px}
.goc p{color:var(--ink-2);font-size:.95rem;line-height:1.5;flex:1}
.goc__go{margin-top:22px;color:var(--blue);font-size:.92rem;font-weight:560;display:flex;align-items:center;gap:7px}
.goc__go .ic{transition:transform .4s var(--e-out)}
.goc:hover .goc__go .ic{transform:translateX(5px)}

/* =========================================================
   BANDE D'APPEL À L'ACTION (bas des pages)
   ========================================================= */
.band{padding:clamp(64px,8vw,120px) 0}
.band__in{text-align:center;max-width:760px;margin-inline:auto}
.band .lead{margin:22px auto 0}
.band__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}

@media (max-width:900px){
  .ap__grid,.go__grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
}

/* =========================================================
   SORTIE DU NOM — on entre dans le logo, on ressort dans sa couleur
   Le voile bleu du bas de la traversée et le fond de cette section
   sont EXACTEMENT le même dégradé : c'est ce qui supprime la couture.
   ========================================================= */

/* ---- l'arrivee : le hero grandit depuis le centre ----------------------
   Le fond reste bleu, exactement celui de la lettre traversee. Le contenu
   est colle au centre de l'ecran et ne fait que grandir : rien ne monte,
   il n'y a donc aucune couture entre la traversee et le site. */
/* Point 4 : le fond reprend la couleur CALCULÉE dans le dégradé du logo,
   au point exact où la caméra entre. Aucune valeur écrite à la main. */
.wmx{background:var(--wm-sortie,#1395e8);color:#fff;min-height:100svh}
.wmx__in{min-height:100svh;display:grid;place-items:center;
  padding-inline:var(--gut);padding-block:clamp(80px,10vh,140px)}
.wmx__box{max-width:940px;text-align:center;will-change:transform}
.wmx__k{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:22px;display:flex;align-items:center;
  justify-content:center;gap:10px}
.wmx__k::before{content:'';width:26px;height:3px;border-radius:2px;background:currentColor}
.wmx__t{font-size:clamp(2.6rem,7vw,5.4rem);line-height:.98;font-weight:700;
  letter-spacing:-.045em;text-wrap:balance;margin:0}
.wmx__s{margin:26px auto 0;max-width:34ch;font-size:clamp(1.05rem,1.7vw,1.35rem);
  line-height:1.45;color:rgba(255,255,255,.88);letter-spacing:-.015em}
.wmx__s b{color:#fff;font-weight:640}
.wmx__b{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.wmx__pts{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:30px;
  font-size:.88rem;color:rgba(255,255,255,.72)}
.wmx__pts li{display:flex;align-items:center;gap:7px}
.wmx__pts .ic{color:#bff3ff;stroke-width:2.6}


/* deux boutons pensés pour le fond bleu */
.btn--clair{--bg:#fff;--fg:#04566c;background-image:none;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.btn--clair:hover{--bg:#fff;filter:none;box-shadow:0 16px 40px -14px rgba(0,0,0,.6)}
.btn--ligne{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.5)}
.btn--ligne:hover{--bd:#fff;background:rgba(255,255,255,.1)}

/* =========================================================
   EN-TÊTE — version flottante
   La barre pleine largeur collée en haut faisait « gabarit ».
   Ici elle est détachée des bords : une capsule posée sur la page,
   avec un liseré et un flou. Les liens ont chacun leur pastille,
   et l'onglet courant reste visiblement allumé.
   ========================================================= */
.hdr{background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border-bottom:0!important;padding-top:14px;transition:padding-top .4s var(--e)}
.hdr__in{
  display:flex;align-items:center;gap:20px;height:60px;
  border-radius:18px;padding-inline:14px 14px;
  background:rgba(255,255,255,.66);border:1px solid rgba(0,0,0,.07);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px -18px rgba(0,0,0,.35);
  transition:background .4s var(--e),border-color .4s var(--e),box-shadow .4s var(--e);
}
.hdr.is-stuck{padding-top:8px}
.hdr.is-stuck .hdr__in{background:rgba(255,255,255,.82);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 14px 38px -20px rgba(0,0,0,.45)}
/* sur les sections foncées, la capsule s'inverse au lieu de disparaître */
.hdr.on-dark .hdr__in,.hdr.on-dark.is-stuck .hdr__in{
  background:rgba(14,18,22,.52);border-color:rgba(255,255,255,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 14px 38px -20px rgba(0,0,0,.6)}
.hdr.on-dark{color:#fff}
.logo{margin-right:auto;padding-left:6px}

/* les liens : une pastille qui s'allume, plus de soulignement qui rampe */
.nav{gap:4px;font-size:.92rem;font-weight:500}
.nav a{padding:9px 14px;border-radius:11px;opacity:.72;
  transition:opacity .25s,background .28s var(--e),color .28s}
.nav a::after{display:none}
.nav a:hover{opacity:1;background:rgba(0,0,0,.055)}
.hdr.on-dark .nav a:hover{background:rgba(255,255,255,.12)}
.nav a[aria-current="page"]{opacity:1;color:var(--tint);background:rgba(0,146,181,.1)}
.hdr.on-dark .nav a[aria-current="page"]{color:var(--tint-l);background:rgba(60,227,248,.16)}

/* l'appel à l'action prend la couleur de la marque, plus le noir */
.hdr__cta .btn--dark{--bg:var(--blue);--fg:#fff;background-image:var(--tint-grad);
  box-shadow:0 6px 18px -10px rgba(0,146,181,.8)}
.hdr.on-dark .hdr__cta .btn--dark{--bg:#fff;--fg:#04566c;background-image:none}

.mnav{inset:82px 0 auto;border-radius:0 0 20px 20px;margin-inline:var(--gut);
  border:1px solid rgba(0,0,0,.07);border-top:0}
@media (max-width:900px){ .hdr__in{gap:12px} }

/* jauge de lecture : un fil de couleur en haut, jamais plus */
.fx-jauge{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:120;
  background:linear-gradient(90deg,var(--tint-l),var(--tint),var(--gold-l));
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){.fx-jauge{display:none}}

/* =========================================================
   RACCORD PARFAIT ENTRE LE MOT ET LA SUITE
   Le mot garde son dégradé pendant qu'il se remplit — c'est joli.
   Mais au moment de la traversée, un dégradé ne peut PAS coïncider
   avec un aplat : c'est ce décalage de couleur qu'on voyait.
   D'où une troisième copie du mot, en bleu uni, qui prend la place
   du dégradé juste avant le zoom. Mot, voile et panneau suivant
   partagent alors la même valeur exacte : #0093bb.
   ========================================================= */

/* l'invitation à défiler, en bas de l'écran d'accueil */
/* La mention « Faites défiler pour continuer » a été retirée : depuis que
   l'introduction est une animation automatique, le défilement est bloqué
   pendant qu'elle se joue. Demander de faire défiler n'avait donc plus de
   sens, et n'avait aucun effet. Ses styles sont partis avec elle. */

/* le contenu du panneau bleu arrive du fond, au centre */
.wmx__in{will-change:transform}

/* =========================================================
   LES FORMULES S'OUVRENT AU SURVOL
   Plus de bulle flottante : c'est la carte elle-même qui se déplie,
   comme la vignette du coach sur le site de Yoan. On reste sur
   l'objet qu'on regarde, rien ne vient se poser par-dessus.
   L'astuce : une grille dont la ligne passe de 0fr à 1fr — c'est le
   seul moyen d'animer une hauteur qu'on ne connaît pas à l'avance.
   ========================================================= */
.op__plus{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--e-out),margin .5s var(--e-out),opacity .35s var(--e);
  opacity:0;margin-top:0;
}
.op__plus-in{overflow:hidden;min-height:0}
.op:hover .op__plus,.op:focus-within .op__plus{grid-template-rows:1fr;opacity:1;margin-top:4px}

.op__plus-k{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tint);margin-bottom:8px;
}
.op__plus-t{
  font-size:.92rem;line-height:1.55;color:var(--ink-2);
  padding:14px 16px;border-radius:var(--r-s);
  background:rgba(0,146,181,.06);border:1px solid rgba(0,146,181,.16);
  margin-bottom:22px;
}
/* la carte survolée se détache franchement de ses voisines */
.of__grid:hover .op{transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),opacity .45s var(--e),border-color .35s}
.of__grid:hover .op:not(:hover){opacity:.62}
.op:hover{border-color:var(--tint)}
@media (hover:none){
  .op__plus{grid-template-rows:1fr;opacity:1}   /* tactile : toujours ouvert */
  .of__grid:hover .op:not(:hover){opacity:1}
}

/* =========================================================================
   LE LOGO CONSTRUIT — styles du tracé
   Le mot est un SVG fabriqué par logo.js. Deux couches par lettre :
   le TRACÉ (contour, d'abord en pointillés) et le PLEIN (la couleur).
   ========================================================================= */
/* Le SVG porte la construction (ancrage centre), .wm__in porte le zoom
   (ancrage sur le « e »). Chacun garde son ancrage, donc rien ne saute. */
 /* 🔴 Cette règle entrait en conflit avec celle de la scène, plus haut :
   l'une posait height:100% avec inset:0, l'autre height:auto. L'élément
   était donc étiré ET contraint en même temps, ce qui décalait le dessin
   dans sa boîte. Une seule règle commande maintenant la taille du SVG. */
.wm__svg{transform-origin:50% 50%}
.lg-charge .wm__svg{will-change:transform}
/* retiré : police sur des chemins SVG (le tracé était du texte, il ne l'est plus) */
/* le contour : d'abord des points très espacés, comme un relevé technique */
/* 🔴 ÉTAT DE REPOS = VISIBLE. Les quatre segments du tracé sont invisibles
   par défaut, mais le S EN COULEUR ne l'est pas : sans JavaScript on voit
   donc le logo, entier et coloré, tout de suite. Le tracé n'est montré que
   par le script, le temps de l'animation.
   Pas de vector-effect : le trait grossit AVEC le logo, comme un trait de
   crayon sur un dessin qu'on agrandit. Figé à l'écran, les pointillés
   devenaient invisibles tant que le logo était petit. */
.wm__t{opacity:0}
/* la couleur, une fois la lettre fermée */
/* Visible par défaut : si l'animation ne se joue pas, le logo est là
   quand même. C'est la règle qui manquait — une page blanche est toujours
   pire qu'une animation ratée. */
.wm__plein{stroke:none}

/* Le SVG prend la taille que le CSS donnait au mot : logo.js lit cette
   valeur pour calculer ses mesures, donc elle reste la seule référence. */
/* ÉTAT DE BASE, sans JavaScript : le mot est déjà là, déjà en dégradé.
   Le dégradé passe par background-clip, pas par une référence SVG : aucune
   dépendance, aucun identifiant à résoudre. logo.js ne fait ensuite que
   REMPLACER ce mot par sa version animée — et s'il échoue, on garde ceci. */
.wm__t{
  margin:0;text-align:center;line-height:.9;
  font-size:clamp(4rem,19vw,17rem);font-weight:700;letter-spacing:-.055em;
  background:linear-gradient(100deg,#0a2a6b 0%,#1553f0 34%,#12b5e5 68%,#5ee9d8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* =========================================================================
   POINT 5 — LE MENU
   Un vrai verre : le flou seul ne suffit pas, il lui faut la saturation
   (pour que les couleurs de dessous restent vivantes), un liseré clair en
   haut (la tranche qui capte la lumière) et une ombre très étalée. C'est
   la combinaison des trois qui fait la matière, pas le flou.
   ========================================================================= */
.hdr{padding-top:16px;background:none!important;border-bottom:0!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  transition:padding-top .5s var(--e-out)}
.hdr.is-stuck{padding-top:9px}

.hdr__in{
  height:58px;gap:18px;border-radius:19px;padding-inline:9px 9px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),      /* la tranche éclairée */
    inset 0 -1px 0 rgba(0,0,0,.03),
    0 1px 2px rgba(16,24,40,.04),
    0 18px 44px -22px rgba(16,24,40,.28);
  backdrop-filter:saturate(190%) blur(22px);
  -webkit-backdrop-filter:saturate(190%) blur(22px);
  transition:background .5s var(--e-out),box-shadow .5s var(--e-out),
             border-color .5s var(--e-out);
}
.hdr.is-stuck .hdr__in{background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(16,24,40,.05),
             0 22px 54px -24px rgba(16,24,40,.38)}
/* sur le bleu, le verre s'assombrit au lieu de disparaître */
.hdr.on-dark .hdr__in,.hdr.on-dark.is-stuck .hdr__in{
  background:rgba(8,32,48,.34);border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 22px 54px -24px rgba(0,0,0,.5)}
.hdr.on-dark{color:#fff}

/* ---- la marque ---------------------------------------------------------
   LE LOGO
   C'est le fichier de marque de Thibault, détouré et posé tel quel.
   Il n'est PAS redessiné : le premier essai en SVG refait à la main ne
   lui ressemblait pas, et il l'a dit sans détour. On utilise donc son
   image, avec sa typographie et son dégradé exacts.

   LA RECOLORATION SELON LE FOND
   Sur le panneau bleu la marque est BLANCHE, dès qu'on revient sur du
   clair elle reprend ses couleurs. Le site savait déjà où il se trouve :
   la classe « on-dark » est posée sur l'en-tête devant toute section
   marquée data-nav="dark" (main.js). Aucun calcul en plus au défilement.
   Le blanc est obtenu par un FILTRE sur la même image, et non par un
   second fichier : la forme est donc rigoureusement identique, il n'y a
   aucun risque de décalage entre les deux versions, et un filtre
   s'anime — d'où le passage en fondu.
   brightness(0) écrase tout en noir, invert(1) retourne en blanc pur ;
   la transparence, elle, est conservée. */
.logo{margin-right:auto;padding-left:6px;gap:11px}
.lg__i{height:26px;width:auto;display:block;flex:none;
  transition:filter .4s var(--e-out),transform .45s var(--e-out)}
/* 🔴 LE BLANC N'EST PLUS UN FILTRE, C'EST UN VRAI FICHIER.
   « brightness(0) invert(1) » écrasait tout en blanc pur : la forme était
   juste, mais PLATE. Or la charte de Thibault montre un logo blanc qui
   garde les ombres de ses demi-tours, et c'est ce relief qui fait le
   dessin. Les deux plis n'y sont d'ailleurs pas de même nature : celui du
   haut s'assombrit sur lui-même, celui du bas porte une vraie ombre.
   Comme un changement de fichier ne s'anime pas, les deux images sont
   superposées et on croise leur opacité : le fondu de 0,4 s est conservé. */
.lg__w{position:relative;display:block;flex:none;height:26px}
.lg__w .lg__i{position:static}
/* 🔴 « .lg__w .lg__i--b » et non « .lg__i--b » seul : la règle juste
   au-dessus vise « .lg__w .lg__i », qui est PLUS SPÉCIFIQUE et remettait
   le logo blanc dans le flux. Les deux logos s'empilaient l'un sous
   l'autre au lieu de se superposer. */
.lg__w .lg__i--b{position:absolute;left:0;top:0;opacity:0;
  transition:opacity .4s var(--e-out)}
.hdr.on-dark .lg__w .lg__i--b{opacity:1}
.logo:hover .lg__i{transform:translateX(2px)}
.logo--ft .lg__i{height:30px}

/* ---- les liens ---------------------------------------------------------
   Pas de soulignement qui rampe, pas de pastille qui saute : une surface
   très douce qui monte en opacité, et le libellé qui se densifie. */
.nav{display:flex;gap:2px;background:none;border:0;padding:0;
  font-size:.86rem;font-weight:480;letter-spacing:-.005em;margin-right:6px}
.nav a{position:relative;padding:9px 14px;border-radius:12px;opacity:.66;
  transition:opacity .32s var(--e-out),background .32s var(--e-out),font-weight .2s}
.nav a::after{display:none}
.nav a::before{
  content:'';position:absolute;inset:0;border-radius:12px;
  background:rgba(16,24,40,.055);opacity:0;transform:scale(.94);
  transition:opacity .32s var(--e-out),transform .42s var(--e-out);
}
.hdr.on-dark .nav a::before{background:rgba(255,255,255,.14)}
.nav a:hover{opacity:1}
.nav a:hover::before{opacity:1;transform:scale(1)}
.nav a[aria-current="page"]{opacity:1;font-weight:600}

.hdr__cta{gap:8px}
.hdr__cta .btn--dark{
  --bg:var(--blue);--fg:#fff;background-image:linear-gradient(135deg,#1553f0,#12b5e5);
  padding:10px 18px;font-size:.86rem;border-radius:13px;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 24px -12px rgba(21,83,240,.85);
}
.hdr__cta .btn--dark:hover{filter:saturate(1.1) brightness(1.06);
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 16px 34px -12px rgba(18,181,229,.95)}
.hdr.on-dark .hdr__cta .btn--dark{background-image:none;--bg:#fff;--fg:#06455c;box-shadow:0 10px 26px -14px rgba(0,0,0,.6)}
.mnav{inset:88px 0 auto;margin-inline:var(--gut);border-radius:20px;
  border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.82);
  box-shadow:0 24px 60px -26px rgba(16,24,40,.4)}

/* =========================================================================
   POINT 6 — LA MAQUETTE SE CONSTRUIT
   La grille de repère arrive en premier, puis le navigateur, puis les
   blocs, puis les couleurs. On montre le métier plutôt que de l'affirmer.
   ========================================================================= */
.mock__grid-bg{
  position:absolute;inset:-4% -2%;pointer-events:none;opacity:0;
  background-image:
    linear-gradient(to right,rgba(21,83,240,.11) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(21,83,240,.11) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000 55%,transparent 100%);
  mask-image:radial-gradient(70% 60% at 50% 45%,#000 55%,transparent 100%);
}
/* les blocs partent en gris et prennent leur couleur à la fin : c'est le
   dernier geste, celui qui donne l'impression que le site « prend vie » */
.mock__nav em,.mock__hero .cta,.mock__pbody b{transition:none}

/* =========================================================================
   POINT 7 — LES CARTES DE PRIX
   Au survol : la carte avance (échelle + ombre plus profonde), son contour
   s'allume, les voisines reculent. Le contenu caché se déplie ensuite, avec
   un léger retard — c'est ce décalage qui fait « premium » plutôt que
   « tout apparaît d'un coup ».
   ========================================================================= */
.of__grid{perspective:1400px}
.op{
  transition:transform .55s var(--e-out),box-shadow .55s var(--e-out),
             border-color .4s var(--e),opacity .45s var(--e);
  will-change:transform;
}
.op:hover,.op:focus-within{
  transform:translateY(-10px) scale(1.022);
  border-color:rgba(18,181,229,.55);
  box-shadow:
    0 0 0 1px rgba(18,181,229,.22),
    0 2px 6px rgba(16,24,40,.05),
    0 40px 80px -34px rgba(16,24,40,.42),
    0 0 60px -18px rgba(18,181,229,.35);   /* le halo de couleur */
}
/* les voisines reculent : c'est ce qui met la carte visée en avant */
.of__grid:hover .op:not(:hover){transform:scale(.985);opacity:.55}
.of__grid:hover .op:not(:hover) .op__p span{color:var(--ink-3)}

/* le contenu supplémentaire, déplié avec un temps de retard */
.op__plus{
  display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
  transition:grid-template-rows .6s var(--e-out) .06s,opacity .4s var(--e) .1s,
             margin-top .6s var(--e-out) .06s;
}
.op__plus-in{overflow:hidden;min-height:0}
.op:hover .op__plus,.op:focus-within .op__plus{grid-template-rows:1fr;opacity:1;margin-top:6px}
.op__plus-k{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:8px}
.op__plus-t{font-size:.92rem;line-height:1.55;color:var(--ink-2);
  padding:14px 16px;border-radius:var(--r-s);margin-bottom:22px;
  background:linear-gradient(180deg,rgba(18,181,229,.09),rgba(21,83,240,.05));
  border:1px solid rgba(18,181,229,.2)}

@media (hover:none){
  .op__plus{grid-template-rows:1fr;opacity:1}
  .of__grid:hover .op:not(:hover){transform:none;opacity:1}
}

/* =========================================================================
   POINT 8 — COHÉRENCE DES MOUVEMENTS
   Un seul vocabulaire d'accélérations pour tout le site. Les courbes
   « out » démarrent vite et se posent doucement : c'est ce qui donne la
   sensation de matière plutôt que de minuterie.
   ========================================================================= */
:root{
  --e:cubic-bezier(.32,.72,0,1);        /* transitions courantes */
  --e-out:cubic-bezier(.16,1,.3,1);     /* arrivées, dépliages */
  --e-doux:cubic-bezier(.4,0,.2,1);     /* aller-retour symétrique */
}
/* aucun changement instantané : tout ce qui réagit au survol s'anime */
a,button,summary,.bc,.opt,.goc,.apc,.exc__screen,.ph img{
  transition-timing-function:var(--e-out);
}

/* =========================================================================
   LE CHARGEMENT : le logo se construit en petit, seul à l'écran
   Pendant ce temps le menu et l'invitation à défiler sont retirés — c'est
   ce qui fait qu'on lit « le site charge » et non « le site est déjà là ».
   Ils reviennent en fondu quand le mot a pris sa taille.
   ========================================================================= */
.lg-charge .hdr{opacity:0;pointer-events:none}
.hdr{transition:opacity .7s var(--e-out)}
.lg-charge{overflow:hidden}          /* pas de défilement pendant le chargement */

/* 🔴 RÈGLE SUPPRIMÉE, ET POURQUOI. Il y avait ici
   « .wm__coul{clip-path:inset(0 100% 0 0)} », héritée de l'ancienne
   introduction qui utilisait le même nom de classe. Combinée à
   « .wm__gris{opacity:0} », elle rendait le logo TOTALEMENT INVISIBLE
   quand le script ne s'exécutait pas : ni le gris, ni la couleur.
   C'est exactement la règle du projet qu'elle enfreignait — une animation
   ne doit jamais être la seule chose qui rend un contenu visible.
   L'état de repos est donc « le S en couleur, entier ». La découpe est
   posée par logo.js, et seulement si GSAP répond. */

/* Le zoom porte sur un seul élément : on le prévient pour qu'il lui donne
   sa propre couche graphique. Sans ça, Safari repeint tout le mot à chaque
   image et l'entrée dans la lettre saccade. */
/* Point 6 : « will-change » n'est posé QUE pendant la traversée (classe
   wm-vol). Le laisser en permanence oblige le navigateur à réserver une
   couche graphique en mémoire pour un élément qui ne bouge pas. */
.wm__in{backface-visibility:hidden}
.wm-vol .wm__in{will-change:transform}
/* pendant la traversée, les lettres autres que le « e » sont hors écran :
   on cesse de les dessiner, c'est autant de surface en moins à calculer */
/* retiré : lettres autres que le « e » : il n'y a plus de lettres */

/* =========================================================================
   L'ÉCRAN DE CHARGEMENT
   Un voile blanc plein écran, avec le logo qui se construit en petit au
   milieu. Rien d'autre n'est visible. Quand le mot est fini, le voile
   s'efface pendant que le logo grandit jusqu'à sa place sur la page :
   le logo ne change jamais, c'est le décor autour qui arrive.
   ⚠ Ce voile est posé ET retiré par logo.js, qui garde un filet de
   sécurité indépendant. Il ne peut pas rester coincé.
   ========================================================================= */
/* Le voile est posé sur le PIN lui-même, pas sur la page : ainsi le logo
   est forcément au-dessus (ils sont dans le même contexte d'empilement).
   Posé sur <html>, il recouvrait le logo — on ne voyait que du blanc. */
.lg-charge .wm__pin::before{
  content:'';position:fixed;inset:0;z-index:-1;background:#fff;
  pointer-events:none;transition:opacity .7s var(--e-out);
}
.lg-voile-part .wm__pin::before{opacity:0}
.lg-charge .wm__pin{z-index:9990}

/* Pendant le chargement, les lettres grises sont masquées et se révèlent
   une à une (classe posée par logo.js). Dès que « lg-charge » disparaît —
   fin de l'animation OU filet de sécurité — elles sont toutes visibles.
   Aucune opacité n'est pilotée par le script : rien ne peut rester à zéro. */
.lg-charge .wm__plein:not(.wm__c){opacity:0;transition:opacity .3s var(--e-out)}
.lg-charge .wm__plein.lg-vu{opacity:1}

/* La taille du logo pendant le chargement, en CSS : petit tant que
   « lg-charge » est là, taille réelle dès qu'elle disparaît. La
   transition fait l'agrandissement. Comme pour l'opacité, rien n'est
   piloté par le script : le logo ne peut pas rester coincé en petit. */
/* La transformation du logo appartient AU SCRIPT, du début à la fin.
   Le CSS n'y touche plus : c'est le passage de l'un à l'autre qui
   provoquait le décalage au début du défilement (point 3). */

/* =========================================================================
   ALLÉGEMENT PENDANT LA TRAVERSÉE (classe posée par main.js)
   Un flou d'arrière-plan doit être recalculé dès que ce qu'il y a DERRIÈRE
   change. Pendant la traversée, tout l'écran change à chaque image : le
   navigateur refait donc le flou de l'en-tête et celui du curseur 60 fois
   par seconde, en plus d'agrandir le mot. C'est là que partait la fluidité.
   On les remplace par des aplats le temps du mouvement — invisible à l'œil,
   décisif pour la machine.
   ========================================================================= */
.wm-vol .hdr__in{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  background:rgba(255,255,255,.9);
}
.wm-vol .cr-drop__lens{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.wm-vol .cr-drop{opacity:.35}
/* la couche grise est entièrement recouverte par la couleur : inutile de
   continuer à dessiner six lettres de plus à chaque image */
/* Le gris ne s'efface qu'une fois le mot ENTIÈREMENT rempli. Avant, il
   disparaissait dès le premier pixel de défilement : la partie pas encore
   colorée devenait invisible au lieu de rester grise. */
.wm-plein .wm__plein:not(.wm__c){visibility:hidden}
/* on isole la traversée du reste de la page */
/* rien ici non plus : toute forme de « contain » découpe au zoom */
/* Pendant la traversée, on isole complètement le bloc : le navigateur
   n'a plus à vérifier si quoi que ce soit d'autre est affecté par le
   changement d'échelle. Et le lissage des contours est désactivé sur le
   mot : à cette taille il ne se voit pas, mais il coûte à chaque image. */
/* 🔴 « contain:paint » A ÉTÉ RETIRÉ D'ICI, et c'est la cause des bandes
   blanches que Thibault voyait pendant le zoom.
   Cette propriété découpe tout ce qui dépasse de la boîte de l'élément.
   Or c'est .wm__s qui grandit neuf fois, pas .wm__in : la boîte de
   .wm__in restait donc à sa taille d'origine — 370 px de haut — et le
   logo agrandi était rogné net au-dessus et en dessous, laissant voir le
   fond de part et d'autre. C'était posé comme une optimisation ; le gain
   était nul et le coût très visible.
   L'isolation est conservée : elle ne découpe rien. */
.wm-vol .wm__in{isolation:isolate}
.wm-vol .wm__svg text{shape-rendering:optimizeSpeed}
/* le bandeau, la jauge et le curseur ne servent à rien pendant ce
   mouvement : on cesse de les dessiner */
.wm-vol .ticker,.wm-vol .fx-jauge{visibility:hidden}

/* L'image du mot : posée exactement sur le texte, invisible tant qu'on ne
   zoome pas. C'est elle que la carte graphique agrandit — sans redessiner
   la moindre lettre. Voir la note dans logo.js. */


/* =========================================================================
   APPARITIONS — pilotées par une CLASSE, pas par le script
   L'état masqué et la transition sont ici ; le script ne fait qu'ajouter
   « vu » quand l'élément entre à l'écran. Le navigateur s'occupe du reste,
   sur sa couche de composition : c'est plus léger qu'une animation
   JavaScript, et si le script s'arrête, le contenu reste affichable.
   ========================================================================= */
.reveal,.h2,.ph,.ct__ph,.bc,.pbc,.exc,.opt,.pel{
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--e-out),transform .6s var(--e-out);
}
html .reveal.vu,html .h2.vu,html .ph.vu,html .ct__ph.vu,html .bc.vu,
html .pbc.vu,html .exc.vu,html .opt.vu,html .pel.vu{
  opacity:1;transform:none;
}
/* sans script, tout doit être visible : c'est la règle de base du site */
.js-off .reveal,.js-off .h2,.js-off .ph,.js-off .ct__ph,.js-off .bc,
.js-off .pbc,.js-off .exc,.js-off .opt,.js-off .pel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,.h2,.ph,.ct__ph,.bc,.pbc,.exc,.opt,.pel{opacity:1!important;transform:none!important}
}

/* Filet : si les apparitions ne se sont pas déclenchées au bout de 4 s,
   on retire le masquage. Un site sans animation reste un site ; un site
   invisible n'est rien. Voir la note dans main.js. */
html.reveals-off .reveal,html.reveals-off .h2,html.reveals-off .ph,
html.reveals-off .ct__ph,html.reveals-off .bc,html.reveals-off .pbc,
html.reveals-off .exc,html.reveals-off .opt,html.reveals-off .pel{
  opacity:1!important;transform:none!important;
}

/* =========================================================================
   L'ARRIVÉE DU HERO, EN FIN D'INTRODUCTION
   L'état de départ est attaché à la classe « intro-on » : il n'existe donc
   que pendant l'introduction. Dès qu'elle est retirée, la transition CSS
   ramène le hero à sa taille normale. Aucune valeur n'est laissée par le
   script : le hero ne peut pas rester invisible.
   ========================================================================= */
.wmx__box{
  transition:opacity .5s var(--e-out),transform .85s var(--e-out);
}
/* Le hero part de très loin : c'est cette petite échelle de départ qui
   donne la profondeur. À 0,4 on lisait un simple grossissement ; à 0,14
   on a la sensation d'un objet qui vient du fond. */
html.intro-on .wmx__box{opacity:0;transform:scale(.14)}
/* Une fois l'arrivée jouée, le CSS LÂCHE la boîte : c'est GSAP qui prend
   la main pour le mouvement au défilement (main.js). Sans cette coupure,
   la transition ci-dessus lisserait chaque image du parallaxe et on
   verrait la boîte traîner derrière le doigt. Deux propriétaires sur une
   même propriété, c'est le bug qui avait fait sauter le logo. */
html.wmx-pose .wmx__box{transition:none}
html.intro-on.hero-arrive .wmx__box{opacity:1;transform:none}


/* =========================================================================
   LE NOM EN GRAND, PLUS BAS DANS LA PAGE
   Gris au repos, il se remplit de couleur quand on descend. C'est le retour
   d'un effet que Thibault avait aimé il y a longtemps. Le remplissage est
   une simple découpe déplacée au défilement : aucun recalcul, donc fluide.
   ========================================================================= */
/* Le mot occupe TOUTE la largeur de l'écran : il est volontairement hors
   de la gouttière du site. C'est le seul élément dans ce cas, et c'est ce
   qui en fait un moment plutôt qu'un bloc de plus. */
.mot{padding:clamp(56px,8vw,110px) 0;overflow:hidden}
.mot__in{position:relative;padding-inline:1.6vw}
/* Poppins : la police citée par la planche de marque de Thibault.
   8 Ko, servie en local, aucun appel à un serveur extérieur. */
@font-face{
  font-family:'Poppins';
  src:url(../fonts/poppins-600-latin.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
.mot__mot{
  margin:0;text-align:center;white-space:nowrap;
  font-family:'Poppins','Inter',-apple-system,sans-serif;
  /* 36,2vw : MESURÉ, pas estimé. Le rapport entre la largeur de l'encre
     et le corps vaut 2,664 pour ce mot dans cette police. Pour que
     « Sitero » touche les deux bords, il faut donc un corps de 96,8vw
     divisé par 2,664. Toute autre valeur laisse du vide sur les côtés. */
  font-weight:600;font-size:36.2vw;
  line-height:1.06;letter-spacing:-.045em;
}
.mot__mot--gris{color:#dcdfe4}
/* La copie colorée est posée EXACTEMENT sur la grise. Le remplissage est
   un masque au bord FONDU piloté par la variable --p (0 = rien, 1 = tout),
   que le défilement fait monter. Un bord net donnait un rideau qui glisse ;
   un bord fondu donne une couleur qui monte dans le mot. */
.mot__mot--coul{position:absolute;left:0;right:0;top:0;--p:1}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .mot__mot--coul{
    background-image:linear-gradient(100deg,#1166F9 0%,#2297FD 35%,#2FC1FF 70%,#31EEF5 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p)*138% - 38%),transparent calc(var(--p)*138%));
    mask-image:linear-gradient(90deg,#000 calc(var(--p)*138% - 38%),transparent calc(var(--p)*138%));
  }
  /* 🔴 Sans ce @supports, un navigateur qui ignore background-clip:text
     afficherait un mot INVISIBLE par-dessus le gris. */
}
@media (prefers-reduced-motion:reduce){
  .mot__mot--coul{--p:1 !important}
}
}