/* ══════════════════════════════════════════════════════════════
   ekóz · site.css  refonte v8 (vitrine conversion)
   Autonome : ne dépend pas de assets/css/style.css
   ══════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root{
  /* Marque */
  --plum:#1e1b30;
  --plum-2:#272341;
  --plum-3:#3a3557;
  --terra:#c07448;
  --terra-l:#dd9366;
  --terra-d:#a55f37;
  --sage:#6ea8a5;
  --sage-l:#8fc4c1;

  /* Surfaces claires */
  --paper:#f6f4f0;
  --paper-2:#efece6;
  --white:#ffffff;
  --card:rgba(255,255,255,.72);
  --bdr:rgba(30,27,48,.12);
  --bdr-s:rgba(30,27,48,.07);

  /* Texte */
  --ink:#1a1728;
  --dim:#5b5674;
  --muted:#6b6684;

  /* Sur fond sombre */
  --d-ink:#f4f2f8;
  --d-dim:#b3adc9;
  --d-muted:#9b95b8;
  --d-bdr:rgba(255,255,255,.11);
  --d-card:rgba(255,255,255,.045);

  /* Système */
  --nh:70px;
  --r:16px;
  --r-l:24px;
  --r-xl:32px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 24px 60px -28px rgba(30,27,48,.30);
  --shadow-l:0 40px 90px -35px rgba(30,27,48,.38);
  --maxw:1200px;
  --pad:clamp(20px,5vw,56px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button,input,textarea,select{font:inherit;color:inherit;}
button,a,[role=button],label[for],summary{cursor:pointer;}
::selection{background:var(--terra);color:#fff;}

/* ── ACCESSIBILITÉ ──────────────────────────────────────────── */
.skip{position:absolute;left:16px;top:-120px;z-index:10000;background:var(--terra);color:#fff;
  padding:12px 22px;border-radius:0 0 10px 10px;font-weight:700;transition:top .25s;}
.skip:focus{top:0;}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:6px;}
.sr{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

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

/* ── TYPO ───────────────────────────────────────────────────── */
.dsp{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;letter-spacing:-.028em;line-height:1.03;}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;letter-spacing:-.025em;line-height:1.06;color:var(--plum);}
h1{font-size:clamp(40px,7.2vw,84px);}
h2{font-size:clamp(30px,4.4vw,52px);text-wrap:balance;}
h3{font-size:clamp(19px,2.1vw,24px);letter-spacing:-.015em;line-height:1.2;}
.fact h3,h4{font-size:17px;letter-spacing:-.01em;}
p{text-wrap:pretty;}
.hand{font-family:'Caveat',cursive;font-weight:700;}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--terra);margin-bottom:18px;}
.eyebrow::before{content:'';width:26px;height:1.5px;background:currentColor;flex:none;}
.eyebrow.c{justify-content:center;}
.eyebrow.c::after{content:'';width:26px;height:1.5px;background:currentColor;flex:none;}

.lede{font-size:clamp(16px,1.5vw,19px);line-height:1.65;color:var(--dim);max-width:58ch;}
.lede.c{margin-left:auto;margin-right:auto;text-align:center;}
.tiny{font-size:13px;line-height:1.55;color:var(--muted);}
mark,.mk{background:linear-gradient(180deg,transparent 58%,rgba(192,116,72,.28) 58%);color:inherit;padding:0 2px;}
.tx-terra{color:var(--terra);}
.tx-sage{color:var(--sage);}

/* ── LAYOUT ─────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.wrap-n{max-width:920px;}
section{padding:clamp(56px,7vw,104px) 0;position:relative;scroll-margin-top:calc(var(--nh) + 14px);}
.sec-head{max-width:860px;margin-bottom:clamp(32px,4vw,52px);}
.sec-head.c{margin-left:auto;margin-right:auto;text-align:center;}
.sec-head .lede{margin-top:20px;}
.sec-head.c .lede{margin-left:auto;margin-right:auto;}

/* Fond sombre */
.dark{background:var(--plum);color:var(--d-ink);}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--d-ink);}
.dark .lede{color:var(--d-dim);}
.dark .tiny{color:var(--d-muted);}
.dark .eyebrow{color:var(--terra-l);}

/* Texture grain */
.grain::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.grain > *{position:relative;z-index:1;}

/* ── BOUTONS ────────────────────────────────────────────────── */
.btn{
  --bg:var(--terra);--fg:#fff;--bd:var(--terra);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:999px;border:1.5px solid var(--bd);
  background:var(--bg);color:var(--fg);
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15px;letter-spacing:-.01em;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,color .25s,border-color .25s;
  box-shadow:0 12px 28px -14px rgba(192,116,72,.75);
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .35s var(--ease);}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--terra-d);
  transform:translateY(101%);transition:transform .4s var(--ease);}
.btn:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(192,116,72,.8);}
.btn:hover::before{transform:translateY(0);}
.btn:hover svg{transform:translateX(4px);}
.btn:active{transform:translateY(0);}

.btn.ghost{--bg:transparent;--fg:var(--plum);--bd:rgba(30,27,48,.24);box-shadow:none;}
.btn.ghost::before{background:var(--plum);}
.btn.ghost:hover{--fg:#fff;--bd:var(--plum);box-shadow:0 16px 32px -18px rgba(30,27,48,.6);}
.dark .btn.ghost{--fg:var(--d-ink);--bd:rgba(255,255,255,.26);}
.dark .btn.ghost::before{background:#fff;}
.dark .btn.ghost:hover{--fg:var(--plum);--bd:#fff;}
.btn.sm{padding:11px 19px;font-size:14px;}
.btn.lg{padding:18px 34px;font-size:17px;}
.btn.block{width:100%;}

.lnk{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--terra);
  border-bottom:1.5px solid rgba(192,116,72,.35);padding-bottom:2px;transition:border-color .25s,gap .25s;}
.lnk:hover{border-color:var(--terra);gap:12px;}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.btn-row.c{justify-content:center;}

/* ── PUCES DE PREUVE ────────────────────────────────────────── */
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:26px;}
.trust li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--dim);list-style:none;font-weight:500;}
.trust svg{width:15px;height:15px;color:var(--sage);flex:none;}
.dark .trust li{color:var(--d-dim);}
.trust.c{justify-content:center;}

/* ── NAV ────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nh);z-index:900;display:flex;align-items:center;
  transition:background .35s,box-shadow .35s,backdrop-filter .35s,border-color .35s;
  border-bottom:1px solid transparent;}
.nav.solid{background:rgba(246,244,240,.82);backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);border-color:var(--bdr-s);
  box-shadow:0 10px 34px -26px rgba(30,27,48,.5);}
.nav__in{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand{display:flex;align-items:center;color:var(--plum);flex:none;}
/* Le logo est un SVG en currentColor : sa couleur suit le contexte. */
.brand__logo{height:26px;width:auto;display:block;fill:currentColor;transition:color .35s,opacity .3s;}
.brand:hover .brand__logo{opacity:.78;}
@media(max-width:520px){.brand__logo{height:22px;}}
.nav__links{display:flex;align-items:center;gap:4px;}
.nav__links a{padding:9px 13px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--dim);
  transition:color .22s,background .22s;}
.nav__links a:hover{color:var(--plum);background:rgba(30,27,48,.05);}
.nav__cta{display:flex;align-items:center;gap:10px;}
/* La bascule clair/sombre de la nav est pilotée par .on-dark, plus bas. */
.burger{display:none;width:42px;height:42px;border:1px solid var(--bdr);border-radius:12px;
  background:rgba(255,255,255,.6);align-items:center;justify-content:center;flex-direction:column;gap:4px;}
.burger span{display:block;width:17px;height:1.8px;background:var(--plum);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s;}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(5.8px) rotate(45deg);}
.burger[aria-expanded=true] span:nth-child(2){opacity:0;}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg);}

@media(max-width:1000px){
  .nav__links{display:none;}
  .nav__cta .btn.ghost{display:none;}
  .burger{display:flex;}
}
@media(max-width:520px){.nav__cta .btn{display:none;}}

/* Menu mobile */
.mmenu{position:fixed;inset:0;z-index:899;background:var(--plum);color:var(--d-ink);
  padding:calc(var(--nh) + 30px) var(--pad) 40px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .3s,transform .4s var(--ease),visibility .3s;overflow-y:auto;}
.mmenu.open{opacity:1;visibility:visible;transform:none;}
.mmenu a.mm{display:flex;align-items:baseline;gap:14px;padding:16px 0;
  border-bottom:1px solid var(--d-bdr);font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;font-size:26px;letter-spacing:-.02em;color:var(--d-ink);}
.mmenu a.mm span{font-size:12px;color:var(--terra-l);font-family:'Space Grotesk',sans-serif;font-weight:600;}
.mmenu .btn{margin-top:26px;}

/* Barre CTA mobile */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:880;display:none;gap:10px;padding:11px 14px
  calc(11px + env(safe-area-inset-bottom));background:rgba(30,27,48,.94);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--d-bdr);transform:translateY(120%);transition:transform .4s var(--ease);}
.cta-bar.show{transform:none;}
.cta-bar .btn{flex:1;padding:13px 14px;font-size:14px;}
.cta-bar .btn.ghost{--fg:var(--d-ink);--bd:rgba(255,255,255,.26);}
.cta-bar .btn.ghost::before{background:#fff;}
.cta-bar .btn.ghost:hover{--fg:var(--plum);--bd:#fff;}
@media(max-width:760px){.cta-bar{display:flex;} body{padding-bottom:0;}}

/* ── REVEAL ─────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--ease);}
.rv.in{opacity:1;transform:none;}
.rv.l{transform:translateX(-30px);}
.rv.r{transform:translateX(30px);}
.rv.s{transform:scale(.96);}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.hero{position:relative;padding:calc(var(--nh) + clamp(48px,7vw,86px)) 0 clamp(60px,7vw,100px);
  background:radial-gradient(120% 90% at 12% 0%,#2b2645 0%,var(--plum) 46%,#171429 100%);
  color:var(--d-ink);overflow:hidden;isolation:isolate;}
.hero__glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;}
.hero__glow.a{width:520px;height:520px;top:-160px;right:-90px;background:rgba(192,116,72,.30);
  animation:float 17s ease-in-out infinite;}
.hero__glow.b{width:440px;height:440px;bottom:-180px;left:-110px;background:rgba(110,168,165,.24);
  animation:float 21s ease-in-out infinite reverse;}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(34px,-28px) scale(1.09)}}
.hero__grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 30%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 65% at 50% 30%,#000 20%,transparent 78%);}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(36px,5vw,72px);align-items:center;}
@media(max-width:1000px){.hero__in{grid-template-columns:1fr;gap:48px;}}

.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 9px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid var(--d-bdr);font-size:12.5px;font-weight:500;
  color:var(--d-dim);margin-bottom:26px;backdrop-filter:blur(8px);}
.pill b{color:var(--d-ink);font-weight:600;}
.dotpulse{width:7px;height:7px;border-radius:50%;background:var(--sage-l);flex:none;
  box-shadow:0 0 0 0 rgba(143,196,193,.6);animation:pulse 2.4s infinite;}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(143,196,193,0)}100%{box-shadow:0 0 0 0 rgba(143,196,193,0)}}

.hero h1{color:var(--d-ink);}
.hero h1 .l{display:block;overflow:hidden;}
.hero h1 .l > span{display:block;transform:translateY(105%);animation:rise .95s var(--ease) forwards;}
.hero h1 .l:nth-child(1) > span{animation-delay:.05s}
.hero h1 .l:nth-child(2) > span{animation-delay:.16s}
.hero h1 .l:nth-child(3) > span{animation-delay:.27s}
@keyframes rise{to{transform:none}}
.hero h1 em{font-style:normal;position:relative;color:var(--terra-l);white-space:nowrap;}
.hero h1 em::after{content:'';position:absolute;left:0;right:0;bottom:.03em;height:.085em;border-radius:99px;
  background:linear-gradient(90deg,var(--terra),var(--terra-l));transform:scaleX(0);transform-origin:left;
  animation:swipe .8s var(--ease) .85s forwards;}
@keyframes swipe{to{transform:scaleX(1)}}
.hero .lede{color:var(--d-dim);max-width:52ch;margin-top:26px;opacity:0;animation:fadeUp .8s var(--ease) .55s forwards;}
.hero .btn-row{margin-top:34px;opacity:0;animation:fadeUp .8s var(--ease) .68s forwards;}
.hero .trust{opacity:0;animation:fadeUp .8s var(--ease) .8s forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ── MOCKUP POST LINKEDIN ───────────────────────────────────── */
.mock{position:relative;perspective:1400px;}
.mock__card{background:#fff;border-radius:var(--r-l);padding:22px;color:var(--ink);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);
  transform:rotateY(-7deg) rotateX(3deg);transition:transform .7s var(--ease);}
.mock:hover .mock__card{transform:rotateY(-2deg) rotateX(1deg) translateY(-6px);}
@media(max-width:1000px){.mock__card{transform:none;} .mock:hover .mock__card{transform:translateY(-4px);}}
.mock__head{display:flex;align-items:center;gap:11px;padding-bottom:14px;}
.mock__av{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--plum),var(--plum-3));color:#fff;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;}
.mock__nm{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15px;color:var(--plum);}
.mock__mt{font-size:11.5px;color:var(--muted);margin-top:1px;}
.mock__tag{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--terra);background:rgba(192,116,72,.1);border:1px solid rgba(192,116,72,.24);
  padding:5px 9px;border-radius:999px;flex:none;}
.mock__body{font-size:14.6px;line-height:1.62;color:#2c2842;}
.mock__body strong{font-weight:600;color:var(--plum);}
.mock__body p+p{margin-top:11px;}
.mock__hook{font-weight:600;color:var(--plum);font-size:15.4px;}
.mock__cursor{display:inline-block;width:2px;height:1em;background:var(--terra);
  vertical-align:-2px;animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:0}}
.mock__foot{display:flex;align-items:center;gap:16px;margin-top:16px;padding-right:120px;padding-top:13px;
  border-top:1px solid rgba(30,27,48,.09);font-size:12.5px;color:var(--muted);font-weight:500;}
.mock__foot b{color:var(--plum);font-weight:600;}
.mock__stat{position:absolute;background:#fff;border-radius:14px;padding:11px 15px;
  box-shadow:0 20px 44px -20px rgba(0,0,0,.5);display:flex;align-items:center;gap:10px;z-index:3;}
.mock__stat .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;color:var(--plum);line-height:1;}
.mock__stat .k{font-size:10.5px;color:var(--muted);letter-spacing:.05em;margin-top:3px;}
.mock__stat.s1{top:-22px;left:-26px;animation:bob 6s ease-in-out infinite;}
.mock__stat.s2{bottom:-26px;right:-22px;animation:bob 7.5s ease-in-out infinite .6s;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(max-width:1000px){.mock__stat.s1{left:-14px;top:-18px;} .mock__stat.s2{right:-10px;bottom:-18px;}}
@media(max-width:620px){.mock__stat{display:none;} .mock__foot{padding-right:0;}}

/* ── MARQUEE ────────────────────────────────────────────────── */
.mq{background:var(--plum-2);border-block:1px solid var(--d-bdr);padding:17px 0;overflow:hidden;
  display:flex;user-select:none;}
.mq__track{display:flex;flex:none;gap:0;min-width:100%;animation:scroll 38s linear infinite;}
/* Quand le JS prend la main, il pilote lui-meme le transform : l'animation CSS
   ne sert plus que de repli sans JS. Pas de pause au survol, pas de saut. */
.mq--js .mq__track{animation:none;will-change:transform;}
@keyframes scroll{to{transform:translateX(-100%)}}
.mq__i{display:flex;align-items:center;gap:16px;padding:0 24px;white-space:nowrap;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(15px,1.9vw,21px);
  letter-spacing:-.015em;color:rgba(244,242,248,.72);}
.mq__i i{width:6px;height:6px;border-radius:50%;background:var(--terra);flex:none;font-style:normal;}
/* Le bandeau a un fond plus clair que le pied de page : --terra-l n'y
   atteignait que 3,99:1. Variante eclaircie pour ce fond-la seulement,
   le token global reste celui du pied de page ou il passe largement. */
.mq__i b{color:#eaa87f;font-weight:700;}

/* ── CARTES GÉNÉRIQUES ──────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-l);padding:30px;
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--shadow);transition:transform .45s var(--ease),box-shadow .45s,border-color .35s;
  position:relative;overflow:hidden;}
.card.hov:hover{transform:translateY(-5px);border-color:rgba(110,168,165,.42);box-shadow:var(--shadow-l);}
.dark .card{background:var(--d-card);border-color:var(--d-bdr);box-shadow:none;}
.grid{display:grid;gap:22px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
@media(max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr;}}

/* ── SECTION PROBLÈME ───────────────────────────────────────── */
.prob{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--d-bdr);
  border-radius:var(--r-l);overflow:hidden;}
@media(max-width:820px){.prob{grid-template-columns:1fr;}}
.prob__c{padding:34px 30px;border-right:1px solid var(--d-bdr);}
.prob__c:last-child{border-right:0;}
@media(max-width:820px){.prob__c{border-right:0;border-bottom:1px solid var(--d-bdr);}
  .prob__c:last-child{border-bottom:0;}}
.prob__n{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;
  color:var(--terra-l);letter-spacing:.16em;margin-bottom:16px;}
.prob__c h3{font-size:21px;margin-bottom:11px;}
.prob__c p{font-size:15px;line-height:1.65;color:var(--d-dim);}

/* ── AVANT / APRÈS ──────────────────────────────────────────── */
.ab{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch;}
@media(max-width:860px){.ab{grid-template-columns:1fr;}}
.ab__col{border-radius:var(--r-l);padding:28px;border:1px solid var(--bdr);position:relative;
  display:flex;flex-direction:column;background:var(--white);}
.ab__col.bad{background:linear-gradient(180deg,#f3efe9,#efeae2);border-style:dashed;}
.ab__col.good{border-color:rgba(110,168,165,.45);
  box-shadow:0 30px 70px -34px rgba(110,168,165,.6);}
.ab__lb{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;}
.ab__lb.bad{color:#9b8f7f;}
.ab__lb.good{color:var(--sage);}
.ab__tx{font-size:15.6px;line-height:1.68;color:#3a3552;flex:1;}
.ab__tx.bad{color:#8b8272;}
.ab__tx b{color:var(--plum);font-weight:600;}
.ab__mt{display:flex;gap:18px;margin-top:20px;padding-top:16px;border-top:1px solid var(--bdr-s);
  font-size:12.5px;color:var(--muted);}
.ab__mt b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--plum);font-size:15px;}
.ab__arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  width:52px;height:52px;border-radius:50%;background:var(--terra);color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 30px -12px rgba(192,116,72,.9);}
@media(max-width:860px){.ab__arrow{display:none;}}

/* ── BÉNÉFICES ──────────────────────────────────────────────── */
.ben{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media(max-width:800px){.ben{grid-template-columns:1fr;}}
.ben__c{padding:34px 32px;border-radius:var(--r-l);background:var(--white);border:1px solid var(--bdr);
  transition:transform .45s var(--ease),box-shadow .45s,border-color .35s;position:relative;overflow:hidden;}
.ben__c:hover{transform:translateY(-5px);box-shadow:var(--shadow-l);border-color:rgba(192,116,72,.35);}
.ben__c::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--terra),var(--sage));transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);}
.ben__c:hover::before{transform:scaleX(1);}
.ben__c h3{margin-bottom:10px;}
.ben__c p{font-size:15px;line-height:1.68;color:var(--dim);}
/* Déclarés après .ben__c p, et aussi spécifiques : sinon la règle générique
   écrase la taille du chiffre, du kicker et de la note. */
.ben__c .ben__n{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:20px;}
.ben__c .ben__v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(38px,5vw,54px);line-height:1;color:var(--terra);letter-spacing:-.03em;margin-bottom:12px;}
.ben__c .ben__note{margin-top:18px;padding-top:16px;border-top:1px solid var(--bdr-s);
  font-size:13px;line-height:1.55;color:var(--muted);}

/* ── MÉTHODE / ÉTAPES ───────────────────────────────────────── */
.steps{position:relative;display:grid;gap:0;}
.step{display:grid;grid-template-columns:80px 1fr;gap:24px;padding:30px 0;
  border-top:1px solid var(--bdr);align-items:start;}
.step:last-child{border-bottom:1px solid var(--bdr);}
@media(max-width:680px){.step{grid-template-columns:1fr;gap:14px;padding:30px 0;}}
.step__n{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(40px,5vw,60px);
  line-height:.9;color:transparent;-webkit-text-stroke:1.5px rgba(30,27,48,.28);letter-spacing:-.04em;
  transition:color .45s,-webkit-text-stroke-color .45s;}
.step:hover .step__n{color:var(--terra);-webkit-text-stroke-color:var(--terra);}
.step__b{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:start;}
@media(max-width:900px){.step__b{grid-template-columns:1fr;gap:18px;}}
.step h3{font-size:clamp(21px,2.6vw,29px);margin-bottom:12px;}
.step p{font-size:15.5px;line-height:1.68;color:var(--dim);max-width:52ch;}
.step__meta{border-left:2px solid var(--terra);padding-left:16px;}
.step__meta .k{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;}
.step__meta .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:17px;color:var(--plum);}
.step__meta .d{font-size:13px;color:var(--dim);margin-top:6px;line-height:1.55;}

/* ── POUR QUI / PAS POUR QUI ────────────────────────────────── */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media(max-width:800px){.fit{grid-template-columns:1fr;}}
.fit__c{padding:32px;border-radius:var(--r-l);border:1px solid var(--bdr);background:var(--white);}
.fit__c.no{background:transparent;border-style:dashed;}
.fit__c h3{display:flex;align-items:center;gap:11px;margin-bottom:22px;font-size:20px;}
.fit__ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;color:#fff;}
.fit__ic.y{background:var(--sage);}
.fit__ic.n{background:rgba(30,27,48,.22);}
.fit__c ul{list-style:none;display:grid;gap:14px;}
.fit__c li{display:flex;gap:12px;font-size:15px;line-height:1.6;color:var(--dim);}
.fit__c li svg{width:17px;height:17px;flex:none;margin-top:3px;}
.fit__c.yes li svg{color:var(--sage);}
.fit__c.no li{color:var(--muted);}
.fit__c.no li svg{color:rgba(30,27,48,.28);}

/* ── OFFRE / PRICING ────────────────────────────────────────── */
.price{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:stretch;}
@media(max-width:880px){.price{grid-template-columns:1fr;}}
.pc{border-radius:var(--r-xl);padding:clamp(28px,3.4vw,40px);display:flex;flex-direction:column;position:relative;overflow:hidden;}
.pc.main{background:linear-gradient(155deg,#252140,var(--plum) 60%,#191630);color:var(--d-ink);
  box-shadow:0 46px 90px -40px rgba(30,27,48,.7);}
.pc.main::after{content:'';position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(192,116,72,.32),transparent 70%);top:-140px;right:-110px;
  filter:blur(30px);pointer-events:none;}
.pc.main > *{position:relative;z-index:1;}
.pc.alt{background:var(--white);border:1px solid var(--bdr);}
.pc__badge{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 13px;border-radius:999px;margin-bottom:22px;}
.pc.main .pc__badge{background:var(--terra);color:#fff;}
.pc.alt .pc__badge{background:rgba(30,27,48,.06);color:var(--dim);}
.pc h3{font-size:clamp(23px,2.6vw,29px);margin-bottom:8px;}
.pc.main h3{color:var(--d-ink);}
.pc__p{display:flex;align-items:flex-end;gap:9px;margin:18px 0 6px;}
.pc__p .n{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(46px,6.4vw,68px);
  line-height:.95;letter-spacing:-.04em;}
.pc.main .pc__p .n{color:#fff;}
.pc__p .u{font-size:15px;color:var(--muted);padding-bottom:9px;}
.pc.main .pc__p .u{color:var(--d-muted);}
.pc__d{font-size:15px;line-height:1.62;margin-bottom:26px;}
.pc.main .pc__d{color:var(--d-dim);}
.pc.alt .pc__d{color:var(--dim);}
.pc__f{list-style:none;display:grid;gap:12px;margin-bottom:30px;flex:1;}
.pc__f li{display:flex;gap:11px;font-size:14.8px;line-height:1.5;}
.pc__f li svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--terra-l);}
.pc.main .pc__f li{color:var(--d-ink);}
.pc.alt .pc__f li{color:var(--dim);}
.pc.alt .pc__f li svg{color:var(--sage);}
.pc__foot{font-size:12.5px;text-align:center;margin-top:14px;}
.pc.main .pc__foot{color:var(--d-muted);}
.pc.alt .pc__foot{color:var(--muted);}

.guar{margin-top:26px;display:flex;align-items:flex-start;gap:14px;padding:22px 26px;
  border-radius:var(--r);border:1px dashed var(--bdr);background:rgba(110,168,165,.07);}
.guar svg{width:24px;height:24px;color:var(--sage);flex:none;margin-top:2px;}
.guar b{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:var(--plum);}
.guar p{font-size:14.5px;color:var(--dim);line-height:1.6;margin-top:4px;}

/* ── À PROPOS ───────────────────────────────────────────────── */
/* Colonne calee sur 320 px : le portrait vient d'une image de 3735 px de
   large, mais l'afficher plus grand n'apporte rien et alourdit la page.
   A cette taille, la version 640 w couvre les ecrans 2x et la 960 w les 3x. */
.about{display:grid;grid-template-columns:320px 1fr;gap:clamp(32px,5vw,64px);align-items:start;}
@media(max-width:900px){.about{grid-template-columns:1fr;} .about__ph{position:relative;top:0;max-width:340px;}}
/* Le portrait est un PNG détouré : le décor est fait en CSS, pas dans la
   photo. C'est un cyclo gris-vert, pas un fond blanc : en studio le fond est
   éclairé à part, plus faiblement que le sujet. La clé vient de la gauche
   (mesuré sur la photo : joue gauche 156, droite 132), donc la nappe de
   lumière est en haut à gauche, le fond s'éteint vers la droite et le bas, et
   l'ombre du sujet tombe à droite. Le grain casse les aplats : sans lui les
   dégradés se voient par bandes, et c'est ça qui trahit le fond synthétique. */
.about__ph{position:sticky;top:calc(var(--nh) + 28px);border-radius:var(--r-xl);overflow:hidden;
  background-color:#55625f;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
    linear-gradient(101deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 34%,transparent 52%,rgba(16,22,21,.26) 100%),
    linear-gradient(0deg,rgba(14,19,19,.40) 0%,rgba(14,19,19,.12) 16%,transparent 32%),
    radial-gradient(84% 66% at 27% 24%,#9aaca7 0%,#7c8d89 26%,#5d6c69 52%,#46534f 76%,#36413f 100%);
  background-blend-mode:soft-light,normal,normal,normal;
  box-shadow:var(--shadow-l);aspect-ratio:4/5;isolation:isolate;}
/* Vignetage : sur un cyclo la lumière tombe dans les angles. */
.about__ph::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(116% 88% at 30% 30%,transparent 46%,rgba(12,18,17,.30) 100%);}
/* Ombre portée du sujet sur le fond, du côté opposé à la clé. */
.about__ph::after{content:'';position:absolute;right:-6%;bottom:6%;width:74%;height:52%;z-index:0;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(10,16,15,.42),rgba(10,16,15,.16) 54%,transparent 78%);
  filter:blur(16px);}
/* Air au-dessus de la tete, et calage horizontal : la tete est a 7 % a droite
   du centre dans le fichier, donc la zone d'image est decalee d'autant vers la
   gauche pour que le visage tombe au milieu du cadre. L'epaule est rognee par
   le bord, ce qui est un cadrage, pas une decoupe. */
.about__ph picture{position:absolute;inset:7% 11% 0 -3%;z-index:1;display:block;}
.about__ph img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(14px 18px 22px rgba(10,16,15,.34));}
.about__ph figcaption{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:34px 24px 20px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(13,19,18,.58) 40%,rgba(13,19,18,.86));}
.about__ph .n{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em;}
.about__ph .r{font-size:12.5px;color:rgba(255,255,255,.76);margin-top:2px;}
.about__q{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(20px,2.4vw,27px);
  line-height:1.36;letter-spacing:-.02em;color:var(--plum);border-left:3px solid var(--terra);
  padding-left:22px;margin:30px 0;}
.about p{font-size:16px;line-height:1.72;color:var(--dim);}
.about p+p{margin-top:16px;}
.about__facts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px;}
@media(max-width:560px){.about__facts{grid-template-columns:1fr;}}
.fact{padding:20px 22px;border-radius:var(--r);border:1px solid var(--bdr);background:var(--white);}
.fact h3,.fact h4{margin-bottom:7px;}
.fact p{font-size:14px;line-height:1.6;}

/* ── STATS BANDE ────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--d-bdr);
  border:1px solid var(--d-bdr);border-radius:var(--r-l);overflow:hidden;}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{background:var(--plum);padding:32px 26px;text-align:center;}
.stat .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(34px,4.6vw,50px);
  line-height:1;letter-spacing:-.035em;color:var(--terra-l);}
.stat .k{font-size:13px;color:var(--d-dim);margin-top:10px;line-height:1.45;}
.stat .s{font-size:11px;color:var(--d-muted);margin-top:7px;}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq{max-width:840px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--bdr);}
.faq summary{list-style:none;display:flex;align-items:flex-start;gap:18px;padding:24px 0;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(16.5px,1.9vw,20px);
  color:var(--plum);letter-spacing:-.015em;transition:color .25s;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--terra);}
.faq summary .i{margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--bdr);
  display:grid;place-items:center;color:var(--terra);transition:transform .35s var(--ease),background .25s;
  font-size:18px;line-height:1;font-family:'Space Grotesk',sans-serif;font-weight:400;}
.faq details[open] summary .i{transform:rotate(45deg);background:rgba(192,116,72,.1);}
.faq .a{padding:0 44px 26px 0;font-size:15.6px;line-height:1.72;color:var(--dim);
  animation:reveal .4s var(--ease);}
@keyframes reveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ── LEAD MAGNET ────────────────────────────────────────────── */
.lm{display:grid;grid-template-columns:1fr 340px;gap:clamp(28px,4vw,56px);align-items:center;
  padding:clamp(30px,4vw,52px);border-radius:var(--r-xl);
  background:linear-gradient(150deg,#fff,#f2eee7);border:1px solid var(--bdr);box-shadow:var(--shadow);}
@media(max-width:880px){.lm{grid-template-columns:1fr;}}
.lm__cov{position:relative;aspect-ratio:1/1.32;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(155deg,var(--plum),#2e2a4a);color:#fff;padding:30px 26px;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 34px 70px -30px rgba(30,27,48,.72);transform:rotate(2.4deg);
  transition:transform .55s var(--ease);}
.lm:hover .lm__cov{transform:rotate(0deg) translateY(-6px);}
.lm__cov .t{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:26px;line-height:1.14;letter-spacing:-.025em;}
.lm__cov .s{font-size:12px;color:var(--d-muted);letter-spacing:.16em;text-transform:uppercase;}
.lm ul{list-style:none;display:grid;gap:10px;margin:22px 0 26px;}
.lm li{display:flex;gap:10px;font-size:15px;color:var(--dim);}
.lm li svg{width:16px;height:16px;color:var(--terra);flex:none;margin-top:4px;}

/* ── CONTACT / FORM ─────────────────────────────────────────── */
.form{display:grid;gap:16px;}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:600px){.f2{grid-template-columns:1fr;}}
.fw{display:grid;gap:7px;}
.fw label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.field{width:100%;background:var(--white);border:1px solid var(--bdr);border-radius:12px;
  padding:14px 16px;font-size:15px;color:var(--ink);transition:border-color .25s,box-shadow .25s;
  font-family:inherit;resize:vertical;}
.field::placeholder{color:#aaa5bd;}
.field:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(110,168,165,.18);}
.dark .field{background:rgba(255,255,255,.05);border-color:var(--d-bdr);color:var(--d-ink);}
.dark .fw label{color:var(--d-muted);}
.fmsg{padding:13px 16px;border-radius:11px;font-size:14px;font-weight:500;}
.fmsg.ok{background:rgba(110,168,165,.14);color:#2f6b68;border:1px solid rgba(110,168,165,.36);}
.fmsg.ko{background:rgba(192,116,72,.12);color:#9d5730;border:1px solid rgba(192,116,72,.34);}

/* ── CTA FINAL ──────────────────────────────────────────────── */
.final{position:relative;overflow:hidden;
  background:radial-gradient(110% 100% at 50% 0%,#2c2748 0%,var(--plum) 52%,#151223 100%);}
.final .hero__glow.a{width:560px;height:560px;top:-220px;left:50%;margin-left:-280px;background:rgba(192,116,72,.26);}

/* ── FOOTER ─────────────────────────────────────────────────── */
.foot{background:#151223;color:var(--d-dim);padding:70px 0 32px;border-top:1px solid var(--d-bdr);}
.foot__in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;}
@media(max-width:860px){.foot__in{grid-template-columns:1fr 1fr;gap:32px;}}
@media(max-width:520px){.foot__in{grid-template-columns:1fr;}}
.foot .brand{color:var(--d-ink);}
.foot .brand__logo{height:30px;}
.foot h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-l);margin-bottom:16px;font-weight:700;}
.foot ul{list-style:none;display:grid;gap:2px;}
.foot a{font-size:14.5px;color:var(--d-dim);transition:color .22s;
  display:inline-block;padding:5px 0;}
/* Le pied ne proposait aucune action, alors que c'est la derniere chose que
   voit un visiteur arrive en bas. Le bouton comble aussi le vide qui restait
   sous la colonne de marque. */
.foot__cta{margin-top:22px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.foot__dm{font-size:13.5px;text-decoration:underline;text-underline-offset:3px;}
.foot__cta .btn.sm{padding:11px 18px;font-size:14px;}
.foot a:hover{color:var(--terra-l);}
.foot p{font-size:14.5px;line-height:1.65;color:var(--d-muted);max-width:38ch;margin-top:14px;}
.foot__bot{margin-top:52px;padding-top:24px;border-top:1px solid var(--d-bdr);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;font-size:13px;color:var(--d-muted);}

/* ── PROGRESS SCROLL ────────────────────────────────────────── */
.prog{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:950;
  background:linear-gradient(90deg,var(--terra),var(--sage));transition:width .1s linear;}

/* ══════════════════════════════════════════════════════════════
   COUCHE INTERACTIONS  souris, scroll, survol
   Tout est additif : si le JS ne tourne pas, la page reste correcte.
   Tout est désactivé au clavier/tactile et en prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════ */

/* ── CURSEUR : halo qui suit la souris ──────────────────────── */
.cur{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  border:1.5px solid rgba(192,116,72,.55);background:rgba(192,116,72,.05);
  opacity:0;transition:opacity .3s,width .28s var(--ease),height .28s var(--ease),
    margin .28s var(--ease),border-color .28s,background .28s;}
.cur.on{opacity:1;}
.cur.hov{width:62px;height:62px;margin:-31px 0 0 -31px;
  border-color:rgba(192,116,72,.85);background:rgba(192,116,72,.09);}
.cur.press{width:22px;height:22px;margin:-11px 0 0 -11px;}
/* Sur fond sombre le halo passe en clair pour rester visible */
.cur.dark-ctx{border-color:rgba(244,242,248,.5);background:rgba(244,242,248,.06);}
.cur.dark-ctx.hov{border-color:rgba(221,147,102,.9);background:rgba(221,147,102,.12);}
/* Souris fine uniquement : jamais de halo au doigt */
@media(hover:none),(pointer:coarse){.cur{display:none!important;}}
@media(prefers-reduced-motion:reduce){.cur{display:none!important;}}

/* ── SPOTLIGHT : lueur qui suit la souris dans une carte ────── */
.spot{position:relative;}
.spot::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  border-radius:inherit;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
    rgba(192,116,72,.16),transparent 62%);
}
.spot:hover::after{opacity:1;}
.spot > *{position:relative;z-index:1;}
.dark .spot::after,.pc.main.spot::after{
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(221,147,102,.20),transparent 62%);
}
@media(hover:none),(pointer:coarse){.spot::after{display:none;}}

/* ── PARALLAXE : profondeur au scroll ───────────────────────── */
.plx{will-change:transform;}
@media(prefers-reduced-motion:reduce){.plx{transform:none!important;}}

/* ── TITRES : apparition mot à mot ──────────────────────────── */
.wsplit{display:inline-block;overflow:hidden;vertical-align:top;
  padding:.09em .02em .16em;margin:-.09em -.02em -.16em;}
.wsplit > i{display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .85s var(--ease);}
.wsplit.in > i{transform:none;}
@media(prefers-reduced-motion:reduce){.wsplit > i{transform:none!important;}}

/* ── BOUTONS MAGNÉTIQUES ────────────────────────────────────── */
.mag{will-change:transform;}
.mag .btn-lbl{display:inline-flex;align-items:center;gap:10px;will-change:transform;}

/* ── LIENS DE NAV : soulignement qui se déroule ─────────────── */
.nav__links a{position:relative;}
.nav__links a::after{content:'';position:absolute;left:13px;right:13px;bottom:5px;height:1.5px;
  background:var(--terra);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);}
.nav__links a:hover::after,.nav__links a.active::after{transform:scaleX(1);transform-origin:left;}
.nav__links a.active{color:var(--plum);}


/* ── ÉTAPES : la barre de progression de la méthode ─────────── */
.steps{--steps-p:0;}
.step__n{position:relative;}
.step.lit .step__n{color:var(--terra);-webkit-text-stroke-color:var(--terra);}

/* ── IMAGE : léger zoom au survol ───────────────────────────── */
.about__ph img{transition:transform 1.1s var(--ease);transform-origin:50% 100%;}
.about__ph:hover img{transform:scale(1.04);}

/* ══════════════════════════════════════════════════════════════
   COUCHE 2  matière, profondeur, relief
   ══════════════════════════════════════════════════════════════ */

/* ── GRAIN ANIMÉ (texture sur toute la page) ────────────────── */
.film{position:fixed;inset:-18%;width:136%;height:136%;pointer-events:none;z-index:940;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:film .7s steps(3) infinite;}
@keyframes film{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){.film{animation:none;opacity:.03;}}

/* ── HALO DE FOND QUI SUIT LA SOURIS ────────────────────────── */
.aura{position:fixed;top:0;left:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;
  pointer-events:none;z-index:1;opacity:0;transition:opacity .6s;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(192,116,72,.16),rgba(192,116,72,.05) 45%,transparent 70%);}
.aura.on{opacity:1;}
@media(hover:none),(pointer:coarse){.aura{display:none;}}
@media(prefers-reduced-motion:reduce){.aura{display:none;}}

/* ── NAV : pilule flottante en verre ────────────────────────── */
.nav{top:14px;height:auto;left:50%;right:auto;transform:translate(-50%,-150%);
  width:min(1160px,calc(100% - 28px));border-radius:999px;border:1px solid transparent;
  transition:transform .7s var(--ease),opacity .45s ease,background .4s,box-shadow .4s,border-color .4s;
  opacity:0;}
.nav.ready{transform:translate(-50%,0);opacity:1;}
.nav__in{padding:8px 8px 8px 20px;}
/* Au repos, au-dessus du hero : transparente. Au scroll : pilule en verre. */
.nav.solid{background:rgba(246,244,240,.72);border-color:rgba(30,27,48,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 4px rgba(30,27,48,.06),
    0 18px 44px -20px rgba(30,27,48,.36);}
.nav.on-dark.solid{background:rgba(24,21,40,.62);border-color:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 48px -18px rgba(0,0,0,.7);}
/* la nav sur fond sombre garde ses couleurs claires même en mode pilule */
.nav.on-dark .brand{color:var(--d-ink);}
.nav.on-dark .nav__links a{color:rgba(244,242,248,.72);}
.nav.on-dark .nav__links a:hover{color:#fff;background:rgba(255,255,255,.09);}
.nav.on-dark .nav__links a.active{color:#fff;}
.nav.on-dark .btn.ghost{--fg:var(--d-ink);--bd:rgba(255,255,255,.28);}
.nav.on-dark .btn.ghost::before{background:#fff;}
.nav.on-dark .btn.ghost:hover{--fg:var(--plum);--bd:#fff;}
.nav.on-dark .burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);}
.nav.on-dark .burger span{background:var(--d-ink);}
@media(max-width:520px){.nav{top:10px;width:calc(100% - 20px);} .nav__in{padding:7px 7px 7px 14px;}}

/* ── BOUTONS : reflet qui balaie ────────────────────────────── */
.btn::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.34) 50%,transparent 68%);
  transform:translateX(-130%);transition:transform .95s var(--ease);}
.btn:hover::after{transform:translateX(130%);}
.btn.ghost::after{background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.18) 50%,transparent 68%);}
.btn > *{position:relative;z-index:1;}
@media(prefers-reduced-motion:reduce){.btn::after{display:none;}}

/* ── CARTES : inclinaison 3D et reflet ──────────────────────── */
.tilt{transform-style:preserve-3d;will-change:transform;}
.tilt .glare{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.30),transparent 55%);}
.tilt:hover .glare{opacity:1;}
.dark .tilt .glare,.pc.main .glare{background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.11),transparent 55%);}
@media(hover:none),(pointer:coarse){.tilt .glare{display:none;}}

/* ── MANIFESTE : le texte s'allume mot par mot au scroll ────── */
.manif{max-width:16ch;}
.mf{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:clamp(25px,3.4vw,42px);line-height:1.18;letter-spacing:-.018em;
  max-width:24ch;text-wrap:balance;}
.mf .w{display:inline-block;color:rgba(244,242,248,.24);transition:color .18s linear;}
.mf .w.on{color:var(--d-ink);}
.mf .w.hot.on{color:var(--terra-l);}
@media(prefers-reduced-motion:reduce){.mf .w{color:var(--d-ink);}.mf .w.hot{color:var(--terra-l);}}

/* ══════════════════════════════════════════════════════════════
   COUCHE 3  conversion : DM LinkedIn, avis clients
   ══════════════════════════════════════════════════════════════ */

/* ── SOUS-TITRE DU H1 ───────────────────────────────────────── */
/* Porte le mot-clé principal dans le h1 sans écraser l'accroche. */
.hero h1 .h1sub{font-size:clamp(15px,2.1vw,21px);font-weight:700;letter-spacing:-.01em;
  line-height:1.3;color:var(--d-dim);margin-top:clamp(12px,1.6vw,18px);text-transform:none;}
.hero__alt{margin-top:18px;opacity:0;animation:fadeUp .8s var(--ease) .74s forwards;}

/* ── BOUTON « M'ÉCRIRE EN DM » ──────────────────────────────── */
/* Secondaire par construction : il accompagne le CTA principal,
   il ne lui prend pas la vedette. */
.btn.li{--bg:var(--white);--fg:#0a66c2;--bd:rgba(10,102,194,.34);box-shadow:none;}
.btn.li::before{background:#0a66c2;}
.btn.li:hover{--fg:#fff;--bd:#0a66c2;box-shadow:0 16px 32px -18px rgba(10,102,194,.7);}
.btn.li svg{width:18px;height:18px;}
.btn.li:hover svg{transform:none;}
.dark .btn.li,.hero .btn.li,.final .btn.li,.pc.main .btn.li,.cta-bar .btn.li,.mmenu .btn.li,
.nav.on-dark .btn.li{--bg:rgba(255,255,255,.06);--fg:#8ec5ff;--bd:rgba(142,197,255,.30);}
.dark .btn.li:hover,.hero .btn.li:hover,.final .btn.li:hover,.pc.main .btn.li:hover,
.cta-bar .btn.li:hover,.mmenu .btn.li:hover,.nav.on-dark .btn.li:hover{--fg:#fff;--bd:#8ec5ff;}
.pc .btn.li.block{margin-top:10px;}

/* Version icône seule : nav et barre mobile, où la place manque. */
.btn.ico{padding:0;width:44px;height:44px;flex:none;border-radius:50%;}
.btn.ico svg{width:19px;height:19px;}
.cta-bar .btn.ico{flex:none;width:46px;height:46px;}
.nav .btn.ico{width:38px;height:38px;}
.nav .btn.ico svg{width:17px;height:17px;}

/* ── TOAST (message copié) ──────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:9990;
  transform:translate(-50%,140%);background:var(--plum);color:var(--d-ink);
  padding:13px 22px;border-radius:999px;font-size:14px;font-weight:500;line-height:1.4;
  box-shadow:0 22px 48px -20px rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.14);
  max-width:calc(100% - 32px);text-align:center;opacity:0;pointer-events:none;
  transition:transform .45s var(--ease),opacity .3s;}
.toast.show{transform:translate(-50%,0);opacity:1;}
/* Au-dessus de la barre CTA quand elle est là. */
@media(max-width:760px){.toast{bottom:calc(84px + env(safe-area-inset-bottom));}}

/* ── AVIS CLIENTS ───────────────────────────────────────────── */
.tst{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media(max-width:820px){.tst{grid-template-columns:1fr;}}
.tst__c{position:relative;background:var(--white);border:1px solid var(--bdr);
  border-radius:var(--r-l);padding:34px 32px 28px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;}
.tst__q{position:absolute;top:-10px;right:22px;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;font-size:120px;line-height:1;color:rgba(192,116,72,.13);pointer-events:none;}
.tst__c blockquote{flex:1;}
.tst__c blockquote p{font-size:clamp(16px,1.7vw,18.5px);line-height:1.66;color:var(--ink);
  font-weight:500;position:relative;z-index:1;}
.tst__c figcaption{display:flex;align-items:center;gap:13px;margin-top:26px;padding-top:20px;
  border-top:1px solid var(--bdr-s);}
.tst__av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--plum),var(--plum-3));color:#fff;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;}
.tst__c figcaption b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:15px;color:var(--plum);letter-spacing:-.01em;}
.tst__c figcaption i{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:2px;}

/* ══════════════════════════════════════════════════════════════
   MOBILE  tout ce qui suit ne concerne que les petits écrans
   Règle de base : rien ne dépasse, rien n'est masqué par une
   barre fixe, aucune cible tactile sous 44 px.
   ══════════════════════════════════════════════════════════════ */

/* Les entrées latérales décalent les blocs hors de l'écran sur mobile :
   sous 900 px tout entre par le bas, jamais par les côtés. */
@media(max-width:900px){
  .rv.l,.rv.r{transform:translateY(24px);}
  .rv.l.in,.rv.r.in{transform:none;}
}

/* La barre CTA fixe masquait la fin de page : on lui réserve sa hauteur. */
@media(max-width:760px){
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom));}
  .foot__bot{margin-top:38px;}
}

@media(max-width:900px){
  /* Une nav plus compacte laisse plus de place au contenu. */
  :root{--nh:60px;}
  /* Les effets de survol collent au doigt : on les neutralise. */
  .card.hov:hover,.ben__c:hover,.tst__c:hover{transform:none;}
  .btn:hover{transform:none;box-shadow:0 12px 28px -14px rgba(192,116,72,.75);}
  .btn.ghost:hover,.btn.li:hover{box-shadow:none;}
}

@media(max-width:760px){
  /* Titres : sur 390 px de large, un clamp calé sur la largeur du viewport
     produit des lignes trop hautes. On plafonne. */
  h1{font-size:clamp(36px,10.4vw,46px);line-height:1.02;}
  h2{font-size:clamp(27px,7.4vw,34px);line-height:1.1;}
  h3{font-size:clamp(18px,4.8vw,21px);}
  .lede{font-size:16px;line-height:1.62;}
  .mf{font-size:clamp(22px,6.2vw,28px);line-height:1.24;max-width:none;}
  section{padding:clamp(46px,11vw,64px) 0;}
  .sec-head{margin-bottom:28px;}

  /* Hero : moins d'air en haut, la preuve visuelle remonte. */
  .hero{padding:calc(var(--nh) + 34px) 0 54px;}
  .hero .lede{margin-top:20px;}
  .hero .btn-row{margin-top:26px;}
  .hero .trust{margin-top:22px;gap:9px 18px;}
  .hero__in{gap:38px;}

  /* Boutons : pleine largeur, empilés, hauteur tactile confortable. */
  .btn-row{gap:11px;}
  .btn-row .btn{flex:1 1 100%;width:100%;}
  .btn-row .btn.ico{flex:none;width:44px;}
  .btn.lg{padding:16px 24px;font-size:16px;min-height:52px;}
  .btn{min-height:48px;}

  /* Post d'exemple : l'étiquette chevauchait le nom, faute de place. */
  .mock__head{gap:10px;align-items:flex-start;}
  .mock__av{width:38px;height:38px;font-size:15px;}
  .mock__nm{font-size:14px;}
  .mock__tag{font-size:9px;padding:4px 7px;letter-spacing:.08em;margin-top:2px;}
  .mock__card{padding:18px;}
  .mock__body{font-size:14px;}
  .mock__foot{gap:12px;font-size:11.5px;flex-wrap:wrap;}

  /* Bandeau défilant : deux crans en dessous, il tenait mal la ligne. */
  .mq{padding:13px 0;}
  .mq__i{font-size:14px;gap:12px;padding:0 16px;}

  /* Blocs de contenu : marges intérieures resserrées. */
  .prob__c{padding:26px 22px;}
  .ab__col,.fit__c,.tst__c{padding:24px 22px;}
  .tst__q{font-size:88px;top:-6px;right:16px;}
  .pc{padding:26px 22px;}
  .card{padding:24px 22px;}
  .step{padding:24px 0;}
  .step__n{font-size:34px;}
  .step__meta{border-left-width:2px;padding-left:14px;}
  .faq summary{gap:14px;padding:20px 0;font-size:16.5px;}
  .faq .a{padding:0 0 22px 0;font-size:15px;}
  .guar{flex-direction:column;gap:10px;padding:20px;}
  .lm{padding:26px 22px;}
  .lm__cov{max-width:250px;margin:0 auto;transform:none;}
  /* Le portrait prenait toute la largeur : en 4/5 ça donnait 438 px de
     haut sur un écran de 390, on ne voyait plus que lui. Il est ramené à
     une taille de portrait et centré. */
  /* position:relative est indispensable : la règle sticky d'origine est
     déclarée après le media query 900 px, elle gagnait donc encore ici. */
  .about__ph{position:relative;top:auto;width:100%;max-width:260px;margin-inline:auto;
    border-radius:var(--r-l);box-shadow:var(--shadow);}
  /* Le nom reste en surimpression : le fond du cadre est sombre partout,
     donc le blanc passe quel que soit le cadrage. */
  .about__ph figcaption{padding:30px 20px 16px;}
  .about__ph .n{font-size:18px;}
  .about__ph .r{font-size:13px;}
  .about p{font-size:15.5px;}
  .foot{padding:52px 0 26px;}
  .foot__in{gap:28px;}
  .foot p{max-width:none;}
}

@media(max-width:480px){
  /* Le titre du hero doit tenir sans césure moche. */
  h1{font-size:clamp(34px,9.6vw,42px);}
  .pill{font-size:11.5px;padding:6px 12px 6px 8px;margin-bottom:20px;}
  .trust li{font-size:13px;}
  .mock__stat{display:none;}
  .cta-bar{padding:9px 12px calc(9px + env(safe-area-inset-bottom));}
  .cta-bar .btn{font-size:13.5px;padding:12px 10px;min-height:46px;}
  .mmenu a.mm{font-size:22px;padding:14px 0;}
  .tst__c figcaption{gap:11px;}
  .foot__bot{flex-direction:column;gap:10px;}
}

/* Aucun bloc ne doit déborder horizontalement : le contenu large
   défile dans son propre conteneur, jamais la page. */
@media(max-width:900px){
  .mock,.ab,.fit,.price,.tst,.lm,.steps{max-width:100%;}
  .mock__card,.ab__col,.fit__c,.pc,.tst__c,.card{min-width:0;}
  pre{overflow-x:auto;max-width:100%;}
}

/* Les tableaux ne se compriment pas : ils défilent dans leur conteneur,
   la page ne bouge pas. .tbl est explicite dans les pages du site ; la
   seconde règle sert de filet pour le HTML des articles, écrit en base. */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0;}
.tbl table{margin:0;min-width:520px;}
@media(max-width:760px){
  .art-body>table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
}

/* ── BLOC CTA DES PAGES PILIERS ─────────────────────────────── */
.art-cta__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.art-cta .btn.li{--bg:rgba(255,255,255,.06);--fg:#8ec5ff;--bd:rgba(142,197,255,.30);}
.art-cta .btn.li:hover{--fg:#fff;--bd:#8ec5ff;}
@media(max-width:560px){.art-cta__row .btn{flex:1 1 100%;width:100%;}}

/* Un tableau qui défile doit se voir : on l'annonce au-dessus, sinon la
   colonne de droite passe inaperçue au doigt. Le message est hors du
   conteneur défilant, il ne bouge donc pas avec le tableau. */
.tbl-hint{display:none;font-size:12.5px;color:var(--muted);margin:20px 0 -12px;}
@media(max-width:760px){.tbl-hint{display:block;}}