/* =========================================================================
   FAISEUR DE ROI : MONOCHROME MODERNE.
   Blanc dominant, encre, hairlines, coins carrés. Zéro dégradé, zéro glow,
   zéro verre, zéro grain. La typographie et la photo N&B font le travail.
   Build-free, zéro em-dash. Thème CLAIR verrouillé.
   ========================================================================= */

@font-face{font-family:"Manrope";src:url("../fonts/manrope-v20-latin-regular.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-v20-latin-500.woff2") format("woff2");font-weight:500;font-display:swap;}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-v20-latin-600.woff2") format("woff2");font-weight:600;font-display:swap;}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-v20-latin-700.woff2") format("woff2");font-weight:700;font-display:swap;}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-v20-latin-800.woff2") format("woff2");font-weight:800;font-display:swap;}

:root{
  --paper:#FAFAF8;
  --white:#FFFFFF;
  --ink:#0E0F12;
  --dim:#54565D;
  --faint:#71737A;
  --line:#E4E3DF;
  --line-2:#CFCEC8;
  /* Accent unique. La couleur ne marque que trois choses : une mesure, une
     action, un relevé. Rien d'autre. Tout passe par ce token : le repasser à
     var(--ink) suffit à revenir au monochrome intégral. */
  --accent:#A32D22;
  --accent-deep:#8A2318;
  --sheet:1180px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --z-nav:80;--z-modal:100;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;font-family:var(--sans);font-weight:400;color:var(--ink);line-height:1.6;
  font-size:clamp(1rem,.96rem + .18vw,1.06rem);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
::selection{background:var(--accent);color:#FFFFFF;}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

.ic{display:inline-block;flex:none;width:1em;height:1em;background-color:currentColor;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;}
.ic-crown{-webkit-mask-image:url("../img/icons/crown.svg");mask-image:url("../img/icons/crown.svg");}
.ic-arrow{-webkit-mask-image:url("../img/icons/arrow-up-right.svg");mask-image:url("../img/icons/arrow-up-right.svg");}
.ic-play{-webkit-mask-image:url("../img/icons/play.svg");mask-image:url("../img/icons/play.svg");}
.ic-x{-webkit-mask-image:url("../img/icons/x.svg");mask-image:url("../img/icons/x.svg");}
.ic-check{-webkit-mask-image:url("../img/icons/check.svg");mask-image:url("../img/icons/check.svg");}
.ic-tiktok{-webkit-mask-image:url("../img/icons/tiktok.svg");mask-image:url("../img/icons/tiktok.svg");}
.ic-youtube{-webkit-mask-image:url("../img/icons/youtube.svg");mask-image:url("../img/icons/youtube.svg");}
.ic-instagram{-webkit-mask-image:url("../img/icons/instagram.svg");mask-image:url("../img/icons/instagram.svg");}
.ic-xlogo{-webkit-mask-image:url("../img/icons/xlogo.svg");mask-image:url("../img/icons/xlogo.svg");}
.ic-linkedin{-webkit-mask-image:url("../img/icons/linkedin.svg");mask-image:url("../img/icons/linkedin.svg");}
.ic-facebook{-webkit-mask-image:url("../img/icons/facebook.svg");mask-image:url("../img/icons/facebook.svg");}
.ic-snapchat{-webkit-mask-image:url("../img/icons/snapchat.svg");mask-image:url("../img/icons/snapchat.svg");}
.ic-threads{-webkit-mask-image:url("../img/icons/threads.svg");mask-image:url("../img/icons/threads.svg");}
.ic-twitch{-webkit-mask-image:url("../img/icons/twitch.svg");mask-image:url("../img/icons/twitch.svg");}
.ic-pinterest{-webkit-mask-image:url("../img/icons/pinterest.svg");mask-image:url("../img/icons/pinterest.svg");}
.ic-reddit{-webkit-mask-image:url("../img/icons/reddit.svg");mask-image:url("../img/icons/reddit.svg");}
.ic-telegram{-webkit-mask-image:url("../img/icons/telegram.svg");mask-image:url("../img/icons/telegram.svg");}
.ic-discord{-webkit-mask-image:url("../img/icons/discord.svg");mask-image:url("../img/icons/discord.svg");}
.ic-whatsapp{-webkit-mask-image:url("../img/icons/whatsapp.svg");mask-image:url("../img/icons/whatsapp.svg");}

main{position:relative;z-index:1;max-width:var(--sheet);margin:0 auto;
  padding:clamp(84px,10vh,106px) clamp(1.4rem,5vw,2.6rem) 0;}
.wrap{width:100%;max-width:var(--sheet);margin-inline:auto;}
.wrap-wide{max-width:var(--sheet);}
main .wrap{padding-inline:0;}
section{position:relative;}
[id]{scroll-margin-top:96px;}
.section-pad{padding-block:clamp(2.8rem,5.5vw,4.6rem);border-top:1px solid var(--line);}
.rule-top{border-top:1px solid var(--line);}
.skip{position:absolute;left:-9999px;top:0;z-index:1000;}
.skip:focus{left:1rem;top:1rem;background:var(--ink);color:var(--paper);padding:.6rem 1rem;font-weight:600;font-size:.8rem;}

h1,h2,h3{font-family:var(--sans);margin:0;color:var(--ink);text-wrap:balance;}
h1,h2{font-weight:800;letter-spacing:-.035em;line-height:1.04;}
h1{font-size:clamp(2.4rem,1.5rem + 3.6vw,4.2rem);}
h2{font-size:clamp(1.65rem,1.3rem + 1.5vw,2.3rem);}
h3{font-weight:700;font-size:clamp(1.05rem,1rem + .35vw,1.24rem);letter-spacing:-.015em;}
p{margin:0 0 1.1rem;max-width:64ch;color:var(--dim);text-wrap:pretty;}

.kick{display:block;font-weight:700;font-size:.82rem;color:var(--faint);margin:0 0 .8rem;letter-spacing:0;}

/* ------------------------------- boutons ------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;cursor:pointer;white-space:nowrap;text-align:center;
  font-weight:700;font-size:.94rem;letter-spacing:-.005em;line-height:1;
  padding:.95rem 1.4rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:background .18s var(--ease),color .18s var(--ease),transform .12s var(--ease);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--paper);}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);}
.btn-ghost{background:transparent;border:0;border-bottom:1px solid var(--line-2);color:var(--dim);padding:.2rem 0;font-weight:600;font-size:.9rem;}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink);}
.btn-block{width:100%;}
.btn-lg{padding:1.02rem 1.6rem;font-size:.97rem;}
.btn .ic-arrow{font-size:1em;transition:transform .2s var(--ease);}
.btn:hover .ic-arrow{transform:translate(2px,-2px);}

/* --------------------------------- nav --------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);background:var(--paper);border-bottom:1px solid var(--line);}
.nav .wrap{padding-inline:clamp(1.4rem,5vw,2.6rem);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;height:68px;}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.04rem;letter-spacing:-.012em;color:var(--ink);}
.brand .ic-crown{font-size:1em;color:var(--ink);}
.brand b{font-weight:800;}
.nav-links{display:flex;gap:2rem;}
.nav-links a{font-weight:600;font-size:.88rem;color:var(--dim);transition:color .2s;}
.nav-links a:hover{color:var(--ink);}
.nav-right{display:flex;align-items:center;gap:.85rem;}
.lang{display:inline-flex;align-items:center;border:1px solid var(--faint);overflow:hidden;}
.lang button{background:transparent;border:0;padding:.42rem .6rem;font-size:.7rem;font-weight:700;letter-spacing:.04em;color:var(--dim);cursor:pointer;transition:color .2s,background .2s;}
.lang button[aria-pressed="true"]{color:var(--paper);background:var(--ink);}
.nav-cta.btn{padding:.58rem 1.05rem;font-size:.85rem;}

/* --------------------------------- hero -------------------------------- */
.hero{padding-top:clamp(1.6rem,4vw,3.4rem);padding-bottom:0;}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,3.6rem);align-items:start;}
.hero-copy{padding-top:.3rem;}
.hero-h1{margin:0;max-width:none;}
.hero-h1 .hl{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.09em;text-decoration-color:var(--ink);}
.hero-sub{font-size:clamp(1.02rem,1rem + .3vw,1.18rem);font-weight:400;color:var(--dim);max-width:42ch;margin:1.5rem 0 0;line-height:1.55;}
.hero-cta{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;margin-top:2rem;}
.hero-photo{border:1px solid var(--line);}
.hero-photo img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center 15%;
  filter:grayscale(1) contrast(1.16) brightness(1.02);}
.hero-cap{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.7rem;font-size:.79rem;color:var(--faint);}
.hero-cap b{color:var(--ink);font-weight:700;}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:2rem;}
  .hero-photo,.hero-cap{max-width:420px;margin-inline:auto;}
  .hero-photo img{aspect-ratio:1/1;object-position:center 15%;}
}

.hero-animate .hero-anim{animation:up .6s var(--ease) both;}
.hero-animate .hero-h1.hero-anim{animation-delay:.04s;}
.hero-animate .hero-sub.hero-anim{animation-delay:.12s;}
.hero-animate .hero-cta.hero-anim{animation-delay:.2s;}
@keyframes up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ---------------------- ticker de preuve (hairlines) -------------------- */
.ticker{margin-top:clamp(2.4rem,5vw,3.6rem);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:1.1rem;}
/* Le bandeau passe sur 2 lignes des 1097px utiles. Aucun selecteur ne peut
   viser le dernier item d'une LIGNE VISUELLE : l'item 4 gardait donc son
   filet en fin de ligne, suspendu dans le vide. On separe par l'espace. */
.ticker-line{display:flex;flex-wrap:wrap;row-gap:.6rem;column-gap:2.8rem;font-size:.87rem;font-weight:600;color:var(--dim);}
.ticker-line > span{white-space:nowrap;}
.ticker-line b{color:var(--accent);font-weight:800;}

/* --------------------------- marquee plateformes ------------------------ */
.plats{padding-block:clamp(1.8rem,3.5vw,2.6rem);text-align:center;}
.plats-cap{font-weight:600;font-size:.8rem;color:var(--faint);margin:0 0 1.1rem;}
.plats-marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.plats-track{display:flex;width:max-content;animation:marquee 36s linear infinite;}
.plats-track:hover{animation-play-state:paused;}
.plats-set{display:flex;align-items:center;gap:clamp(1.9rem,3.4vw,3rem);padding-left:clamp(1.9rem,3.4vw,3rem);flex:none;}
.plats-set .ic{font-size:1.6rem;color:var(--faint);transition:color .25s var(--ease);}
.plats-set .ic:hover{color:var(--ink);}
/* -33.3333% parce qu'il y a trois series, pas deux : le decalage doit valoir
   exactement une serie, sinon la boucle saute a chaque tour.
   Pourquoi une troisieme : une serie mesure 920px a 1180px de fenetre, pour
   une fenetre visible de 1097px. Avec deux series, la fin du cycle laissait
   un trou de 177px au bord droit, que le degrade (76px) ne couvrait pas. */
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-33.3333%);}}
@media (prefers-reduced-motion:reduce){
  .plats-track{animation:none;}
  .plats-marquee{overflow-x:auto;touch-action:pan-x;-webkit-mask-image:none;mask-image:none;}
  .plats-set + .plats-set{display:none;}
}

/* --------------------------- sections texte ----------------------------- */
.prob h2{margin-bottom:1.3rem;max-width:24ch;}
.prob .wrap-wide > p:first-of-type,.cta-copy > p:first-of-type{font-size:clamp(1.06rem,1rem + .35vw,1.24rem);color:var(--ink);max-width:56ch;margin-bottom:1.3rem;line-height:1.55;}
.prob p,.prob li{color:var(--dim);}
.prob p strong,.prob li strong{font-weight:700;color:var(--ink);}

/* --------------------- entonnoir : encre sur papier --------------------- */
.fnl-head{max-width:36rem;margin:0 0 clamp(2rem,4vw,2.8rem);}
.fnl-head .kick{margin-bottom:.8rem;}
.fnl-head h2{margin:0;max-width:none;}
.fnl-head .hl{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.09em;}
.fnl-lede{margin:1rem 0 0;max-width:46ch;color:var(--dim);font-size:1.02rem;}
.fnl-box{position:relative;max-width:600px;margin:0 auto;}
.fnl-rows{position:relative;}
.fnl-walls{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible;}
.fnl-walls path{fill:#F2F1ED;}
.fnl-walls line{stroke:var(--line-2);}
.fnl-levels{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:11px;padding:7px 0;}
.fnl-lvl{display:flex;align-items:center;gap:.9rem;width:100%;padding:.85rem 1.1rem;
  border:1px solid var(--line);background:var(--white);}
.fnl-chip{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--white);color:var(--ink);}
.fnl-chip .ic{font-size:1.15rem;}
.fnl-logos{display:flex;gap:6px;}
.fnl-logos .ic{font-size:.82rem;}
.fnl-lab{display:block;font-size:.72rem;font-weight:700;color:var(--faint);}
.fnl-line{margin:.12rem 0 0;font-size:.97rem;font-weight:600;color:var(--ink);line-height:1.3;max-width:none;}
.fnl-l1 .fnl-chip{width:auto;min-width:40px;padding:0 .55rem;color:var(--dim);}
.fnl-l1 .fnl-line{color:var(--dim);font-weight:500;}
.fnl-payoff{position:relative;z-index:1;margin:11px auto 0;width:100%;max-width:384px;display:flex;align-items:center;gap:1rem;
  padding:1.1rem 1.3rem;background:var(--ink);border:1px solid var(--ink);border-left:3px solid var(--accent);}
.fnl-payoff .fnl-lab{color:#A6A8AE;}
.fnl-euro{flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;font-weight:800;font-size:1.4rem;color:var(--ink);background:var(--paper);}
.fnl-big{margin:.14rem 0 0;font-size:1.1rem;font-weight:800;letter-spacing:-.015em;color:var(--paper);max-width:none;}
@media (prefers-reduced-motion:no-preference){
  .js .fnl .fnl-w{stroke-dasharray:412;stroke-dashoffset:412;}
  .js .fnl.in .fnl-w{animation:fnlDraw .9s var(--ease) .1s forwards;}
  .js .fnl .fnl-lvl{opacity:0;}
  .js .fnl.in .fnl-lvl{animation:fnlRise .55s var(--ease) forwards;animation-delay:calc(.1s + var(--i,0)*.1s);}
  .js .fnl .fnl-payoff{opacity:0;}
  .js .fnl.in .fnl-payoff{animation:fnlRise .6s var(--ease) .6s forwards;}
}
@keyframes fnlDraw{to{stroke-dashoffset:0;}}
@keyframes fnlRise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@media (max-width:560px){
  .fnl-walls{display:none;}
  .fnl-box{max-width:420px;}
  .fnl-lvl{max-width:100% !important;}
  .fnl-payoff{max-width:100%;}
}

/* ------------------------ concret : modes duo --------------------------- */
.modes-intro{margin:1.9rem 0 1rem;font-weight:700;color:var(--ink);}
.modes-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.mode{border:1px solid var(--line);background:var(--white);padding:1.5rem;transition:border-color .25s;}
.mode:hover{border-color:var(--line-2);}
.mode h3{margin-bottom:.5rem;}
.mode p{color:var(--dim);margin:0;}
.modes-foot{margin-top:1.6rem;font-weight:700;color:var(--ink);max-width:none;letter-spacing:-.01em;}
@media (max-width:560px){.modes-grid{grid-template-columns:1fr;}}

/* ----------------------------- témoignages ------------------------------ */
.tst.section-pad{padding-top:clamp(1rem,2.5vw,1.8rem);border-top:0;}
.reel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.reel-head h2{margin:0;}
.reel-nav{display:flex;gap:.5rem;}
.reel-btn{width:44px;height:44px;border:1px solid var(--line-2);background:var(--white);color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px;transition:background .2s,border-color .2s,transform .12s;}
.reel-btn:hover{border-color:var(--ink);}
.reel-btn:active{transform:translateY(1px);}
.tst-reel{display:grid;grid-auto-flow:column;grid-auto-columns:242px;gap:clamp(1rem,2.4vw,1.4rem);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-behavior:smooth;touch-action:pan-x;margin-top:1.7rem;padding-bottom:.5rem;scrollbar-width:none;}
.tst-reel::-webkit-scrollbar{display:none;}
.tst-slide{scroll-snap-align:start;display:flex;flex-direction:column;}
.vmedia{position:relative;border:1px solid var(--line);overflow:hidden;background:#000;cursor:pointer;padding:0;
  transition:border-color .3s,transform .3s var(--ease);}
.vmedia:hover{border-color:var(--ink);transform:translateY(-3px);}
.tst-slide .vmedia{aspect-ratio:9/16;width:100%;}
.vmedia img{width:100%;height:100%;object-fit:cover;object-position:center 26%;filter:grayscale(1) contrast(1.08);transition:filter .35s;}
.vmedia:hover img{filter:grayscale(0);}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:50px;height:50px;display:grid;place-items:center;
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);transition:transform .25s var(--ease);}
.play .ic-play{font-size:1.05rem;margin-left:3px;}
.vmedia:hover .play{transform:translate(-50%,-50%) scale(1.06);}
.tst-quote{font-weight:500;font-style:normal;font-size:1rem;line-height:1.4;color:var(--ink);margin:.95rem 0 .5rem;}
.tst-name{font-weight:700;color:var(--ink);margin-top:auto;font-size:1rem;}
.tst-handle{font-weight:500;color:var(--faint);font-size:.72rem;letter-spacing:.02em;}
.aud{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem;}
.chip{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;font-size:.66rem;letter-spacing:.02em;color:var(--dim);
  border:1px solid var(--line);padding:.24rem .6rem;background:var(--white);}
.chip .ic{font-size:.85rem;color:var(--ink);}
@media (max-width:640px){.tst-reel{grid-auto-columns:80%;}.reel-nav{display:none;}}

/* --------------------------------- offre -------------------------------- */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:1.7rem;}
.tier{border:1px solid var(--line);background:var(--white);padding:1.6rem 1.7rem;display:flex;flex-direction:column;gap:.9rem;}
.tier-flag{border:2px solid var(--ink);}
.tier-price{font-weight:800;font-size:clamp(1.7rem,1.4rem + 1vw,2.2rem);letter-spacing:-.03em;line-height:1;color:var(--ink);}
.tier-price span{font-size:.9rem;font-weight:600;color:var(--dim);letter-spacing:0;}
.tier-tag{font-weight:700;color:var(--ink);margin:0;max-width:none;}
.tier-terms{margin:auto 0 0;padding-top:1rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--dim);max-width:none;line-height:1.5;}
.offer-col-t{font-size:.78rem;font-weight:700;color:var(--faint);margin:0;}
.offer-inc{list-style:none;margin:.2rem 0 .4rem;padding:0;display:grid;gap:.85rem;}
.offer-inc li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink);line-height:1.45;}
.offer-inc .ic-check{flex:none;font-size:1rem;margin-top:.22rem;color:var(--ink);}
.tier-link{align-self:flex-start;}
.offer-foot{margin:1.4rem 0 0;color:var(--dim);}
.offer-cta{margin-top:1.5rem;}
@media (max-width:700px){
  .tiers{grid-template-columns:1fr;}
}

/* ---------------------------------- faq ---------------------------------
   Liste éditoriale plutôt que boîte blanche : l'intitulé à gauche, la réponse
   à droite, séparés par de simples filets. Sert aussi aux modules de la
   formation. Tout s'empile sous 760px. */
.faq-list{margin-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid var(--line);}
.faq-item{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
  gap:clamp(1rem,3vw,2.8rem);padding:clamp(1.35rem,2.4vw,1.95rem) 0;
  border-bottom:1px solid var(--line);}
.faq-q{font-weight:700;font-size:clamp(1.04rem,1rem + .38vw,1.26rem);letter-spacing:-.018em;
  line-height:1.28;margin:0;color:var(--ink);text-wrap:balance;}
.faq-a{margin:0;color:var(--dim);max-width:62ch;line-height:1.6;}
/* Liens dans le corps de texte. Sans ca ils heritent de a{color:inherit;
   text-decoration:none} et deviennent invisibles au milieu du paragraphe.
   Meme motif que .foot-bottom a. Volontairement PAS l'accent : celui-ci
   reste reserve a une mesure, une action, un releve. */
.faq-a a,.article-body p a,.tool-note a{color:var(--ink);text-decoration:underline;
  text-decoration-thickness:1px;text-decoration-color:var(--line-2);
  text-underline-offset:.16em;transition:text-decoration-color .2s;}
.faq-a a:hover,.article-body p a:hover,.tool-note a:hover{text-decoration-color:var(--ink);}
@media (max-width:760px){
  .faq-item{grid-template-columns:1fr;gap:.5rem;padding:1.25rem 0;}
}

/* ------------------------------ contact --------------------------------- */
.cta-card{position:relative;max-width:none;margin-inline:0;border:1px solid var(--ink);background:var(--white);
  padding:clamp(1.8rem,4vw,2.8rem);display:grid;grid-template-columns:1fr;gap:clamp(1.7rem,3.5vw,2.2rem);}
.cta-copy h2{margin-bottom:.9rem;max-width:20ch;}
.cta-copy p{color:var(--dim);max-width:54ch;}
.sign-off{margin-top:1.4rem;}
.sign-off .so-pre{color:var(--dim);}
.sign-off .so-name{font-weight:800;font-size:1.12rem;line-height:1.1;letter-spacing:-.02em;color:var(--ink);}
.form{display:grid;gap:1.2rem;}
.field{display:grid;gap:.4rem;}
.field label{font-weight:600;font-size:.82rem;color:var(--ink);}
.field input{width:100%;background:var(--white);border:1px solid var(--faint);border-radius:0;padding:.8rem .85rem;color:var(--ink);font-family:var(--sans);font-size:1.02rem;
  transition:border-color .2s;}
.field input::placeholder{color:var(--faint);}
/* L outline n est retire que pour le focus a la SOURIS. Auparavant le
   :focus tout court le retirait aussi au clavier, et .field input:focus
   (0,1,1) battait le :focus-visible global (0,1,0) : celui qui navigue au
   clavier n avait, pour tout repere, qu un filet de 1px qui passait du gris
   au noir. Le rattrapage ne couvrait que les champs DEJA en erreur. */
.field input:focus{border-color:var(--ink);}
.field input:focus:not(:focus-visible){outline:none;}
.field input[aria-invalid="true"]{border-color:var(--accent);border-width:2px;}
.field input[aria-invalid="true"]:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden;}
.form .btn{margin-top:.4rem;}
.form-note{font-weight:400;font-size:.76rem;color:var(--faint);text-align:left;margin:0;line-height:1.6;max-width:none;}
.form-msg{display:none;border:1px solid var(--ink);background:var(--paper);padding:.9rem 1rem;color:var(--ink);}
.form-msg.show{display:block;}
@media (min-width:861px){.cta-card{grid-template-columns:1.1fr .9fr;align-items:start;}}

/* --------------------------------- footer ------------------------------- */
.foot{border-top:1px solid var(--line);margin-top:clamp(2.6rem,5vw,3.6rem);padding-block:2.2rem;background:var(--paper);}
.foot .wrap{padding-inline:clamp(1.4rem,5vw,2.6rem);}
.foot-top{display:flex;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;align-items:flex-start;}
.foot .brand{font-size:1.1rem;margin-bottom:.6rem;}
.foot-tag{color:var(--dim);max-width:42ch;line-height:1.5;}
.social{display:flex;gap:.55rem;margin-top:1.2rem;}
.soc{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);background:var(--white);color:var(--dim);
  transition:color .2s,border-color .2s;}
.soc:hover{color:var(--ink);border-color:var(--ink);}
.soc .ic{font-size:1.05rem;}
.foot-cta{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;}
.foot-links{display:flex;gap:1.5rem;flex-wrap:wrap;}
.foot-links a{font-weight:600;font-size:.88rem;color:var(--dim);transition:color .2s;}
.foot-links a:hover{color:var(--ink);}
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:1.9rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--faint);}
.foot-bottom a{color:var(--dim);text-decoration:underline;text-underline-offset:2px;}
.foot-bottom a:hover{color:var(--ink);}

/* --------------------------------- modal -------------------------------- */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:none;place-items:center;background:rgba(14,15,18,.86);padding:1.5rem;}
.modal.open{display:grid;}
.modal-inner{position:relative;width:auto;max-width:min(92vw,460px);}
.modal video{width:100%;max-height:86vh;border:1px solid var(--line-2);background:#000;}
.modal-close{position:absolute;top:-16px;right:-16px;width:44px;height:44px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .2s;}
.modal-close:hover{transform:scale(1.06);}
.modal :focus-visible{outline-color:var(--paper);}

/* ----------------------------- reveal + mcta ---------------------------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:calc(var(--i,0)*55ms);}
.js .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .hero-animate .hero-anim{animation:none!important;opacity:1!important;transform:none!important;}
  /* .btn .ic-arrow et .play sont des ENFANTS : neutraliser .btn et .vmedia ne
     les touche pas, ils portent leur propre transition de transform. C etaient
     les deux seuls mouvements qui survivaient au reglage. */
  .btn,.vmedia,.reel-btn,.modal-close,.field input,.mode,
  .btn .ic-arrow,.play{transition:none!important;}
  .tst-reel{scroll-behavior:auto!important;}
  .js .fnl .fnl-lvl,.js .fnl .fnl-payoff{opacity:1!important;animation:none!important;}
  .js .fnl .fnl-w{stroke-dasharray:none!important;stroke-dashoffset:0!important;}
}

.mcta{display:none;}
/* 700 et non 560 : ce seuil suit celui du bouton d'en-tete (voir plus bas).
   La barre doit reprendre la main exactement la ou le bouton disparait, sinon
   la bande 561-700px se retrouve sans aucun appel a l'action permanent. */
@media (max-width:700px){
  .mcta{display:flex;justify-content:center;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);
    padding:.6rem clamp(.7rem,3.5vw,1.2rem) calc(.6rem + env(safe-area-inset-bottom,0px));
    background:var(--paper);border-top:1px solid var(--line);
    transform:translateY(135%);visibility:hidden;transition:transform .3s var(--ease),visibility .3s;}
  .mcta.show{transform:translateY(0);visibility:visible;}
  .mcta .btn{width:100%;max-width:440px;}
}
@media (prefers-reduced-motion:reduce){.mcta{transition:none!important;}}

/* Cette regle date de l'epoque a 4 liens. Il en reste TROIS, dont un masque
   sous 480px (.nav-extra) : a 320px le logo et les deux liens encore visibles
   font 237px pour 275px utilisables. Les masquer
   privait tout le mobile de navigation, l'en-tete ne montrait que le logo.
   On garde les liens et on resserre seulement la gouttiere. */
/* Le logo et les liens ne doivent JAMAIS se couper : sans nowrap, a 320px
   « Faiseur De Roi » passait sur deux lignes et « Ce que je fais » aussi.
   Un test de debordement ne le voit pas, puisque le texte se replie au lieu
   de deborder : il faut le nowrap ET un seuil honnete. */
.brand,.nav-links a{white-space:nowrap;}
/* 768 et non 767 : c'est la largeur d'un iPad en portrait, donc un ecran ou
   l'on touche, et c'est aussi la borne du bloc tactile plus bas. Tant que ces
   deux seuils ne coincidaient pas, il restait exactement une largeur, 768px,
   ou les liens de nav retombaient a 23px et le bouton d'en-tete a 34px. */
@media (max-width:768px){
  .nav-links{gap:1.4rem;}
  /* Une fois visibles au doigt, ces liens ne faisaient que 23px de haut.
     On agrandit la cible a 44px SANS toucher a la hauteur de l'en-tete :
     elle reste calee a 68px par .nav-inner. */
  .nav-links a{display:inline-flex;align-items:center;min-height:44px;}
  .nav-cta.btn{min-height:44px;}
}
/* Sous 400px on resserre le corps des liens pour tenir sur un iPhone mini.
   Mesure sans coupure : logo 143px + liens 141px + 16px = 300px, il faut
   donc 345px de fenetre. Sous 350px, rien ne tient : la navigation retombe
   dans le pied de page, qui la porte en entier. */
@media (max-width:400px){.nav-links{gap:1rem;font-size:.84rem;}}
/* Le 3e lien de nav ne rentre pas sur un telephone : mesure a 375px, le logo
   fait 143px sur 330px utilisables, et trois liens en reclament 437. On le
   masque donc sous 480px. A 440px il ne restait que 2px de marge, trop peu :
   un rendu de police un peu different suffirait a faire deborder. A 480px la
   marge est de 42px. L'etude de cas reste atteignable depuis l'accueil et le
   pied de page. */
/* Selecteur volontairement plus specifique que .nav-links a, qui vaut (0,1,1)
   dans la media query des cibles tactiles a 768px et ecrasait ce display:none. */
@media (max-width:479px){.nav-links a.nav-extra{display:none;}}
@media (max-width:350px){.nav-links{display:none;}}
/* Le bouton d'en-tete etait masque a 560px alors qu'il ne rentre qu'a partir
   de 651px : entre 561 et 650px il debordait, et body{overflow-x:hidden} le
   rognait en silence, sans barre de defilement pour le trahir. Mesure au
   navigateur : 85px coupes a 561, 48 a 600, 10 a 640, 0 a 650, et de la marge
   a partir de 651. Le contenu de .nav-inner est integralement en nowrap, donc
   rien ne se comprime : c'est tout ou rien.

   Seuil pose a 700 et non a 651 : a 651 la marge est nulle, et le premier
   rendu se fait dans la police de secours (font-display:swap), plus large. A
   701px il reste 35px de marge, de quoi absorber cet ecart.

   .mcta suit le meme seuil plus haut : les deux vont ensemble. .foot-top
   reste a 560, d'ou la separation en deux blocs. */
/* Fragilite a connaitre : ce display:none vaut (0,1,0), exactement comme
   .btn{display:inline-flex} plus haut. Il ne gagne que parce qu'il est PLUS
   BAS dans la feuille. Deplacer le bloc .btn sous ce point neutraliserait le
   masquage en silence, et rejouerait le bug deja vu sur .nav-extra. */
@media (max-width:700px){
  .nav-cta{display:none;}
}
@media (max-width:560px){
  .foot-top{flex-direction:column;}
}

/* ------------------------------ blog / article --------------------------- */
.read-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:90;transform-origin:0 50%;transform:scaleX(0);
  background:var(--accent);pointer-events:none;will-change:transform;}

.blog-head{max-width:44rem;margin:0 0 2.4rem;}
.blog-head h1{margin:.6rem 0 0;}
.blog-head p{margin:1rem 0 0;max-width:52ch;}
.blog-list{max-width:none;margin:0;border-top:1px solid var(--line);}
.blog-card{display:block;padding:1.7rem 0;border-bottom:1px solid var(--line);transition:opacity .2s;}
.blog-card:hover h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.08em;}
.blog-cat{font-size:.76rem;font-weight:700;color:var(--faint);}
.blog-card h2{margin:.55rem 0 .5rem;font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem);letter-spacing:-.025em;max-width:30ch;}
.blog-card p{margin:0;max-width:62ch;}
.blog-meta{font-size:.78rem;color:var(--faint);margin-top:.8rem;}

.art-cover{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(1.2rem,3vw,2.8rem);align-items:center;
  margin:0 0 clamp(2.2rem,4vw,3rem);padding-bottom:clamp(1.8rem,3vw,2.6rem);border-bottom:1px solid var(--line);}
.art-cover .kick{display:block;margin-bottom:.9rem;}
.art-cover h1{margin:0;font-size:clamp(2.2rem,1.4rem + 3.4vw,3.9rem);line-height:1;letter-spacing:-.04em;max-width:15ch;}
/* pas de nowrap ici : un titre d'article avec une fin soulignée longue se faisait
   couper au bord de l'écran sur mobile. Le soulignement passe très bien à la ligne. */
.art-cover h1 .hl{color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.09em;}
.article-meta{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--faint);max-width:24rem;}
.art-cover-crown{justify-self:end;width:100%;max-width:250px;aspect-ratio:1/1;pointer-events:none;
  -webkit-mask:url("../img/icons/crown.svg") center/contain no-repeat;mask:url("../img/icons/crown.svg") center/contain no-repeat;
  background:var(--line);}
@media (max-width:760px){
  .art-cover{grid-template-columns:1fr;gap:0;}
  .art-cover-crown{display:none;}
  .art-cover h1{font-size:clamp(1.9rem,1.3rem + 3.2vw,2.7rem);letter-spacing:-.032em;}
}

.article-body{max-width:42rem;margin:0;}
.article-lede{margin:0 0 1.3rem;font-size:1.16rem;color:var(--ink);max-width:52ch;line-height:1.55;}
.article-lede::first-letter{float:left;font-weight:800;font-size:3.05em;line-height:.74;margin:.06em .12em 0 0;color:var(--ink);}
.article-body h2{position:relative;margin:2.4rem 0 1rem;font-size:1.42rem;max-width:none;}
.article-body h2::before{content:"";display:block;width:34px;height:2px;margin-bottom:1rem;background:var(--ink);}
.article-body p{color:var(--dim);}
.article-body p strong{font-weight:700;color:var(--ink);}
.article-close{margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--line);
  font-size:1.1rem;font-weight:600;color:var(--ink);line-height:1.5;max-width:none;letter-spacing:-.01em;}
.article-cta{max-width:42rem;margin:2.6rem 0 0;padding-top:2rem;border-top:1px solid var(--line);}
.article-cta p{color:var(--ink);font-weight:700;margin-bottom:1.1rem;}
.article-back{display:inline-flex;align-items:center;gap:.4rem;color:var(--faint);font-size:.88rem;margin-bottom:2rem;transition:color .2s;}
.article-back:hover{color:var(--ink);}

.art-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin:2.4rem 0;max-width:42rem;
  background:var(--line);border:1px solid var(--line);}
.art-stat{background:var(--white);padding:1.2rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;}
/* Plafond a 1.55rem et non 1.75rem. La cellule, elle, ne grandit pas : la
   grille est bloquee a max-width:42rem, ce qui laisse 98px utiles par colonne
   quoi qu'il arrive. Le chiffre, lui, suivait le viewport. Resultat mesure :
   « 100 000 » tient sur une ligne a 1011px de fenetre et casse en « 100 » /
   « 000 » des 1013px, donc sur tout ecran d'ordinateur. Un test de debordement
   ne peut pas le voir, puisque le texte se replie au lieu de deborder. */
.art-stat .n{font-weight:800;font-size:clamp(1.35rem,1.1rem + .8vw,1.55rem);letter-spacing:-.03em;line-height:1;color:var(--accent);}
.art-stat .l{font-size:.76rem;color:var(--dim);line-height:1.35;}

/* Captures de preuve : une image, un filet, une legende. Rien d'autre.
   Meme traitement que la photo du hero, meme gouttiere que .tiers et .vs. */
/* Piece jointe. La capture vient d'un outil tiers : on l'ENCADRE au lieu de la
   poser a nu, pour qu'elle se lise comme une citation et non comme une erreur
   de mise en page. Le cadre reprend .mode et .vs-side, filet et fond blanc,
   rien de nouveau. Les couleurs d'origine sont conservees : c'est ce qui
   signale que le document vient d'ailleurs. Une figure par section, posee
   juste sous ce qu'elle prouve. */
.shot{margin:1.6rem 0 2rem;max-width:42rem;border:1px solid var(--line);
  background:var(--white);padding:1rem 1rem .85rem;}
.shot img{width:100%;height:auto;display:block;}
.shot figcaption{margin-top:.75rem;padding-top:.7rem;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--faint);line-height:1.45;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.shot figcaption a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:var(--line-2);text-underline-offset:.16em;white-space:nowrap;}
.shot figcaption a:hover{text-decoration-color:var(--ink);}
@media (max-width:480px){.shot{padding:.7rem .7rem .6rem;}}
/* 5 chiffres dans une grille de 3 puis 2 colonnes laissaient une cellule vide,
   peinte en var(--line) par le fond du conteneur : un pave gris au milieu du
   bloc de preuve, sur les 16 articles, sur tout telephone. Le 5e item comble. */
@media (max-width:720px){.art-stats{grid-template-columns:repeat(3,1fr);}
  .art-stat:nth-child(5){grid-column:span 2;}}
@media (max-width:480px){.art-stats{grid-template-columns:repeat(2,1fr);}
  .art-stat:nth-child(5){grid-column:1 / -1;}}

.pullquote{margin:2.6rem 0;padding:.2rem 0 .2rem 1.4rem;border-left:2px solid var(--ink);max-width:none;
  font-size:clamp(1.3rem,1.1rem + 1vw,1.75rem);font-weight:800;letter-spacing:-.02em;line-height:1.26;color:var(--ink);text-wrap:balance;}
.pullquote span{color:var(--ink);}

.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:2.6rem 0;}
.vs-side{border:1px solid var(--line);padding:1.5rem 1.6rem;background:var(--white);}
.vs-side .vs-t{font-size:.76rem;font-weight:700;color:var(--faint);margin:0 0 1rem;}
.vs-side ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;}
.vs-side li{display:flex;gap:.6rem;align-items:flex-start;color:var(--dim);line-height:1.4;font-size:.98rem;}
.vs-them li::before{content:"";flex:none;width:6px;height:6px;margin-top:.5rem;background:var(--line-2);}
.vs-you{border-color:var(--ink);background:var(--ink);}
.vs-you .vs-t{color:#A6A8AE;}
.vs-you li{color:var(--paper);}
.vs-you li::before{content:"";flex:none;width:6px;height:6px;margin-top:.5rem;background:var(--paper);}
@media (max-width:640px){.vs{grid-template-columns:1fr;}}

/* ---------------- maillage interne : articles liés ----------------------- */
.related{max-width:42rem;margin:2.6rem 0 0;padding-top:1.9rem;border-top:1px solid var(--line);}
.related-t{font-size:.78rem;font-weight:700;color:var(--faint);margin:0 0 1.1rem;}
.related ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;}
.related li{margin:0;}
.related a{display:inline-flex;gap:.6rem;align-items:baseline;font-weight:700;color:var(--ink);
  font-size:1.04rem;letter-spacing:-.012em;line-height:1.3;}
.related a::before{content:"\2192";color:var(--faint);font-weight:400;flex:none;}
.related a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.1em;}

/* ---------------- newsletter « Recevez les analyses » -------------------- */
/* Dans un article, ce bloc suit .related (42rem) : sans cette regle son filet
   courait sur 1096px contre 672px pour le filet juste au-dessus. */
.related + .nl{max-width:42rem;}
.nl{border-top:1px solid var(--line);margin-top:clamp(2.4rem,5vw,3.6rem);padding-top:clamp(2rem,4vw,3rem);}
.nl h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem);margin-bottom:.5rem;}
.nl p{max-width:52ch;}
.nl-form{display:flex;gap:10px;max-width:520px;margin-top:1.1rem;flex-wrap:wrap;}
.nl-form input[type="email"]{flex:1 1 220px;background:var(--white);border:1px solid var(--faint);border-radius:0;padding:.8rem .85rem;color:var(--ink);font-family:var(--sans);font-size:1rem;transition:border-color .2s;}
.nl-form input[type="email"]::placeholder{color:var(--faint);}
.nl-form input[type="email"]:focus{border-color:var(--ink);}
.nl-form input[type="email"]:focus:not(:focus-visible){outline:none;}
.nl-form input[type="email"][aria-invalid="true"]{border-color:var(--accent);border-width:2px;}
.nl-form input[type="email"][aria-invalid="true"]:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.nl-msg{margin-top:.4rem;flex-basis:100%;}
.nl-download{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:var(--ink);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em;}
.nl-download:hover{color:#26272C;}

/* --------- corrections responsive : débordements sur petits écrans -------
   1. Le gros bouton est en white-space:nowrap : dans la carte contact (qui a
      son propre padding) il dépassait de ~33px sous 400px. On réduit padding
      de la carte + du bouton, et on autorise le retour à la ligne en dernier
      recours sur les écrans les plus étroits.
   2. Les items du ticker étaient en nowrap : le texte était coupé (invisible)
      sous ~380px. On les empile proprement. */
@media (max-width:560px){
  .cta-card{padding:1.4rem 1.15rem;}
  .btn-lg{padding:1rem 1rem;font-size:.93rem;}
  .ticker-line{flex-direction:column;row-gap:.5rem;}
  .ticker-line > span{white-space:normal;}
}
@media (max-width:380px){
  .btn{white-space:normal;}
}

/* ---------------- ergonomie tactile mobile (cibles >= 44px) --------------
   Mesure au navigateur : sans ces regles les liens tombent entre 33 et 40 px.
   Deux techniques selon ce que porte la boite du lien.

   1. min-height quand rien n'est accroche a la boite (le lien ne porte que
      sa couleur, ou un soulignement qui suit le texte et non la boite).
   2. une zone de contact posee en ::after quand un filet est colle sous le
      texte : agrandir la boite descendrait le trait avec elle. Le filet reste
      ou il est, seule la surface tactile grandit.

   L'ecart vertical avec le lien voisin a ete mesure avant d'etaler ces zones :
   14 px partout, la ou l'etalement en consomme 5,5 de chaque cote. Pas de
   recouvrement, donc pas de clic capte par le mauvais lien. Seul le pied de
   page passait a 2 px entre deux lignes : son interligne est ouvert plus bas
   pour la meme raison. */
@media (max-width:768px){
  /* Le logo est un lien vers l'accueil : il se touche, donc il se dimensionne.
     Il ne faisait que 38px. La hauteur d'en-tete ne bouge pas, .nav-inner la
     tient a 68px. */
  .nav .brand{display:inline-flex;align-items:center;min-height:44px;padding-block:.35rem;}
  .lang button{padding:.58rem .8rem;}
  .article-back{min-height:44px;}
  /* Lien de verification sous les captures : 18px, le plus petit du site.
     Il est detache de la phrase de legende, donc il n'entre pas dans
     l'exemption qui couvre les liens poses au fil du texte. */
  .shot figcaption a{display:inline-flex;align-items:center;min-height:44px;}
  .foot-links{gap:.6rem 1.5rem;flex-wrap:wrap;}
  .foot-links a{display:inline-flex;align-items:center;min-height:44px;}
  .foot-bottom a{display:inline-flex;align-items:center;min-height:44px;}
  .soc{width:44px;height:44px;}
  .soc .ic{font-size:1.15rem;}

  .btn-ghost{padding:.55rem 0;}
  .tier-link{padding:.55rem 0;align-self:flex-start;}
  .related a{padding:.42rem 0;}
  .btn-ghost,.tier-link,.related a{position:relative;}
  .btn-ghost::after,.tier-link::after,.related a::after{
    content:"";position:absolute;left:0;right:0;top:50%;height:44px;
    transform:translateY(-50%);
  }
}
@media (max-width:480px){
  .nl-form{gap:12px;}
  .nl-form button{flex:1 1 100%;}
}

/* --------------------------------- outils -------------------------------
   Formulaire sobre, resultat en bloc encre (le seul aplat sombre de la page). */
.tool-form{display:grid;gap:1.15rem;max-width:44rem;margin-top:clamp(1.6rem,3vw,2.2rem);}
.tool-field{display:grid;gap:.4rem;}
.tool-field label{font-weight:700;font-size:.94rem;color:var(--ink);line-height:1.35;}
.tool-field .hint{font-size:.82rem;color:var(--faint);line-height:1.45;}
.tool-input{display:flex;align-items:center;border:1px solid var(--faint);background:var(--white);transition:border-color .2s;}
.tool-input:focus-within{border-color:var(--ink);}
.tool-input input,.tool-input select{flex:1;width:100%;min-width:0;border:0;background:transparent;
  padding:.8rem .85rem;color:var(--ink);font-family:var(--sans);font-size:1rem;}
.tool-input input:focus,.tool-input select:focus{outline:none;}
.tool-unit{padding-right:.85rem;color:var(--faint);font-weight:700;font-size:.9rem;flex:none;}
.tool-result{display:none;margin-top:1.7rem;max-width:44rem;background:var(--ink);padding:clamp(1.4rem,3vw,2rem);
  border-top:3px solid var(--accent);}
.tool-result.show{display:block;}
.tool-result .r-pre{font-size:.8rem;color:#A6A8AE;margin:0 0 .35rem;font-weight:700;}
.tool-score{font-weight:800;font-size:clamp(2.3rem,1.9rem + 2.2vw,3.4rem);letter-spacing:-.035em;
  line-height:1;color:var(--paper);margin:0;}
.tool-detail{margin:.6rem 0 0;color:#A6A8AE;font-size:.93rem;font-weight:600;line-height:1.5;}
.tool-band{font-weight:800;font-size:1.12rem;letter-spacing:-.02em;margin:.8rem 0 .5rem;color:var(--paper);}
.tool-verdict{margin:0;color:#C9CBD1;line-height:1.6;max-width:58ch;}
.tool-note{margin-top:1.9rem;max-width:52rem;padding-top:1.4rem;border-top:1px solid var(--line);
  color:var(--dim);font-size:.95rem;line-height:1.6;}
.tool-hooks{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.7rem;max-width:44rem;}
.tool-hooks li{display:flex;gap:.9rem;align-items:flex-start;border:1px solid var(--line);
  background:var(--white);padding:.9rem 1rem;}
.tool-hooks p{margin:0;flex:1;color:var(--ink);font-weight:600;line-height:1.45;max-width:none;}
.tool-copy{flex:none;border:1px solid var(--line-2);background:var(--white);color:var(--dim);
  font-size:.76rem;font-weight:700;padding:.45rem .65rem;cursor:pointer;transition:border-color .2s,color .2s;}
.tool-copy:hover{border-color:var(--ink);color:var(--ink);}
.tool-copy.done{background:var(--ink);color:var(--paper);border-color:var(--ink);}
@media (max-width:560px){
  .tool-hooks li{flex-direction:column;gap:.6rem;}
  .tool-copy{align-self:flex-start;}
}

/* --------------------------------- print -------------------------------- */
@media print{
  .nav,.foot,.modal,.skip,.lang,.hero-cta,.vmedia,.nav-cta,.mcta,.read-progress,.fnl-walls,
  .reel-nav{display:none!important;}
  body{background:#fff;color:#000;}
  main{margin:0;max-width:none;padding:0;}
  .reveal{opacity:1!important;transform:none!important;}
  /* L entonnoir sortait ENTIEREMENT blanc : ses niveaux et sa chute sont a
     opacity:0 tant que .fnl.in n a pas declenche l animation, et le trace est
     masque par son stroke-dashoffset. Qui imprime sans avoir fait defiler
     jusque-la imprimait le coeur de l offre en blanc sur blanc. */
  .js .fnl .fnl-lvl,.js .fnl .fnl-payoff{opacity:1!important;animation:none!important;}
  .js .fnl .fnl-w{stroke-dasharray:none!important;stroke-dashoffset:0!important;}
  /* Les temoignages vivent dans un defilement horizontal : a l impression,
     deux et demi sur cinq tombaient hors page. On les deplie. */
  .tst-reel{display:block!important;overflow:visible!important;}
  .tst-slide{break-inside:avoid;page-break-inside:avoid;margin-bottom:1rem;}
}