/* ============================================================
   laothiane.com · shared stylesheet
   ============================================================ */

/* ============ SELF-HOSTED FONTS (no Google Fonts, no render-block) ============ */
/* Titles: Fraunces (serif display). UI chrome: system sans. Narrative: Newsreader. Data: JetBrains Mono. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/fraunces-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/fraunces-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/newsreader-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;
  src:url("/assets/fonts/newsreader-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2")}

/* ============ TOKENS ============ */
:root{
  --ink:#0B0B0B; --paper:#FFFFFF;
  --accent:#A6430E; --accent-hover:#8A3808;
  --bg:#FFFFFF; --fg:#0B0B0B; --muted:#555555;
  --hairline:rgba(11,11,11,.15); --hairline-onink:rgba(255,255,255,.18);
  --display:"Fraunces",Georgia,serif;
  --sans:"Helvetica Neue",Arial,system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"JetBrains Mono","SF Mono",Consolas,monospace;
  --container:72rem; --measure:42rem;
  --pad:clamp(1.25rem,5vw,3rem);
  --sec:clamp(4rem,9vw,9rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0B0B; --fg:#FFFFFF; --muted:#9A9A9A; --hairline:rgba(255,255,255,.18);
  }
}
:root[data-theme="dark"]{
  --bg:#0B0B0B; --fg:#FFFFFF; --muted:#9A9A9A; --hairline:rgba(255,255,255,.18);
}

*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--accent);color:#FFFFFF}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--serif); font-size:1.1875rem; line-height:1.65;
  transition:background-color .2s ease-out,color .2s ease-out;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--container);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:inherit}
.noscroll{overflow:hidden}

.skip{
  position:absolute;left:-999rem;top:0;z-index:100;
  font-family:var(--sans);font-weight:500;font-size:.9375rem;
  background:var(--bg);color:var(--fg);padding:.75rem 1.25rem;border:1px solid var(--fg);border-radius:2px;
}
.skip:focus-visible{left:var(--pad);top:.75rem}

/* ============ TYPE ============ */
.kicker{
  font-family:var(--mono);font-weight:400;font-size:.8125rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;
}
.display{font-family:var(--display);font-weight:700;font-size:clamp(2.5rem,6.2vw,4.5rem);line-height:1.05;letter-spacing:-.02em}
h1.pt{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1.1;letter-spacing:-.015em}
h2{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.2;letter-spacing:-.01em}
h3{font-family:var(--display);font-weight:600;font-size:clamp(1.1875rem,1.8vw,1.375rem);line-height:1.3}
.lead{font-family:var(--serif);font-size:clamp(1.1875rem,1.7vw,1.375rem);line-height:1.5;max-width:var(--measure)}
.body{max-width:var(--measure);font-size:clamp(1.0625rem,1.5vw,1.1875rem)}
.bsans{font-family:var(--sans);font-weight:500;font-size:clamp(.9375rem,1.2vw,1rem);line-height:1.5}
.caption{font-family:var(--sans);font-weight:500;font-size:.875rem;line-height:1.45;letter-spacing:.01em}

.prose{max-width:var(--measure)}
.prose p{font-size:clamp(1.0625rem,1.5vw,1.1875rem)}
.prose p+p{margin-top:1.5rem}
.prose h2{margin:2.75rem 0 .85rem;line-height:1.2}
.prose h2:first-child{margin-top:0}
.prose h2+p{margin-top:0}
section .kicker+h2{margin:.75rem 0 2rem}
section .kicker+h1{margin:.75rem 0 1.25rem}

/* Links, body copy */
.tlink{
  color:var(--fg);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--hairline);
  transition:text-decoration-color .15s ease-out;
}
.tlink:hover{text-decoration-color:var(--accent)}
:root[data-theme="dark"] .tlink:hover{text-decoration-color:var(--fg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tlink:hover{text-decoration-color:var(--fg)}}

/* Arrow links : arrow is a character, never an SVG */
.alink{
  font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1.5;
  color:var(--fg);text-decoration:none;display:inline-block;padding:.375rem 0;
}
.alink:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.alink .arr{display:inline-block;transition:transform .2s ease-out}
.alink:hover .arr{transform:translateX(4px)}

/* Buttons */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:700;font-size:1rem;
  letter-spacing:.01em;padding:.875rem 1.75rem;border-radius:2px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;min-height:48px;text-align:center;
  transition:background-color .15s ease-out,color .15s ease-out,transform .15s ease-out;
}
.btn-primary{background:var(--accent);color:#FFFFFF}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--fg);border-color:currentColor;font-weight:500}
.btn-ghost:hover{background:var(--fg);color:var(--bg)}

/* Micro-bloc "The first call" */
.firstcall{
  font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.6;
  color:var(--muted);margin-top:1rem;max-width:38rem;
}
.firstcall .fc-k{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-right:.875rem;
}

/* ============ LOGO MARK ============ */
.mark{display:inline-block;flex:none}
.wordmark .mark{margin-right:.625rem}

/* ============ HEADER ============ */
header{
  position:sticky;top:0;z-index:50;height:4rem;
  background:var(--bg);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease-out,background-color .2s ease-out;
}
header.scrolled{border-bottom-color:var(--hairline)}
.hbar{height:4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.wordmark{
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;color:var(--fg);white-space:nowrap;
  padding:.625rem 0;display:inline-flex;align-items:center;
}
/* Debordement horizontal mobile, mesure le 24/09/2026 : a 428 px la barre d'en-tete
   demandait 463 px en EN et 485 px en FR pour 385 px disponibles, soit 57 et 79 px de
   debordement, et toute la page heritait d'un scroll horizontal. La cause est ce seuil,
   pose a 400 px : entre 401 px et environ 530 px le prenom restait affiche alors que le
   bouton d'en-tete et le burger ne laissaient plus la place. Le pire cas est le francais,
   ou « Audit croissance » fait 22 px de plus que « Growth audit ». Seuil releve a 560 px,
   avec une marge sur le plus large des deux libelles. */
@media (max-width:560px){.wordmark .wm-first{display:none}}
/* Tres petits ecrans, mesure le 24/09/2026 : a 320 px (iPhone SE, petits Android) la barre
   debordait encore de 42 px en anglais et 45 px en francais, et le francais debordait aussi
   de 5 px a 360 px. Ce defaut-la est anterieur au precedent et n'avait jamais ete mesure.
   On comprime le dernier cran : gouttiere de page, ecart de la barre, et bouton d'en-tete.
   Le bouton n'est PAS masque : c'est l'element de conversion, et le faire disparaitre sur
   les plus petits ecrans reviendrait a le retirer a une part du trafic mobile.
   Le bloc lui-meme est EN FIN DE FICHIER : pose ici, il perdait contre une regle ecrite
   plus bas. */
.hnav{display:flex;align-items:center;gap:1.5rem}
.hnav a.nlink{
  font-family:var(--sans);font-weight:500;font-size:1rem;color:var(--muted);
  text-decoration:none;padding:.625rem 0;transition:color .15s ease-out;white-space:nowrap;
}
.hnav a.nlink:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.hnav a.nlink[aria-current="page"]{color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.hright{display:flex;align-items:center;gap:1rem}
.btn-hdr{padding:.5rem 1.125rem;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.lang{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;display:inline-flex;align-items:center}
.lang a{text-decoration:none;padding:.75rem .375rem}
.lang .on{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lang .off{color:var(--muted);transition:color .15s ease-out}
.lang .off:hover{color:var(--fg)}
.lang .sep{color:var(--hairline)}
.themeBtn{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:1px solid var(--hairline);border-radius:2px;color:var(--fg);
  padding:.625rem .875rem;min-height:44px;cursor:pointer;transition:border-color .15s ease-out;
}
.themeBtn:hover{border-color:var(--fg)}

/* Burger : 2 strokes, 1.5px */
.burger{
  display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;
  position:relative;border-radius:2px;
}
.burger span{
  position:absolute;left:12px;width:20px;height:1.5px;background:var(--fg);
  transition:transform .2s ease-out;
}
.burger span:first-child{top:18px}
.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.panel{position:fixed;inset:0;z-index:40;background:var(--bg);padding-top:4rem;overflow-y:auto}
.panel[hidden]{display:none}
.panel nav{display:flex;flex-direction:column;gap:.5rem;padding-top:2rem}
.panel nav a{
  font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.01em;
  color:var(--fg);text-decoration:none;padding:.75rem 0;border-bottom:1px solid var(--hairline);
}
.panel .pmeta{display:flex;align-items:center;gap:1.5rem;margin-top:2.5rem;padding-bottom:3rem}

/* Nav compression band: 5 items fit on one line on small laptops before the burger takes over */
@media (min-width:1080px) and (max-width:1240px){
  .hnav{gap:1.1rem}
  .hnav a.nlink{font-size:.9375rem}
  .hright{gap:.75rem}
  .btn-hdr{padding:.45rem .85rem;font-size:.9375rem}
  .wordmark{font-size:.9375rem}
}

@media (max-width:1079px){
  .hnav,.hright .lang,.hright .themeBtn{display:none}
  .burger{display:block}
  .btn-hdr{padding:.4rem .8rem;min-height:34px;font-size:.8125rem;white-space:nowrap}
}
@media (min-width:1080px){.panel{display:none}}

/* ============ SECTIONS / REVEALS ============ */
main section{padding-top:var(--sec)}
main section:last-of-type{padding-bottom:var(--sec)}
main section[id]{scroll-margin-top:5rem}
/* .rv is set by JS only : no-JS and reduced-motion get the full page instantly */
/* 07/10/2026 : plus d'opacite sur le reveal. A .01 le texte est mesure illisible par Lighthouse
   (contraste en echec sur ~50 elements, Accessibilite 96). Le mouvement de 12 px reste. */
.rv{transform:translateY(12px);transition:transform .3s ease-out}
.rv.in{transform:none}

/* ============ HERO : the only load animation ============ */
.hero{
  min-height:min(calc(100svh - 4rem),50rem);
  display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(3rem,8vh,5rem);padding-bottom:clamp(3rem,8vh,5rem);
}
.hero .kicker{margin-bottom:.75rem}
.hero .display{max-width:56rem;margin-bottom:2rem}
.hero .cred{
  font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1.7;
  color:var(--muted);margin-bottom:2.5rem;
}
/* Two-beat opening: kicker+title, then proof+CTA. 500 ms total, 12 px, opacity+translateY only. */
.js .h-1{animation:rise .3s cubic-bezier(.25,.6,.35,1) both}
.js .h-2{animation:rise .3s cubic-bezier(.25,.6,.35,1) .2s both}
/* 07/10/2026 : depart a .01 et non 0. Chrome ne retient pas un element a opacite 0 comme LCP :
   le titre du hero etait ignore et le LCP tombait sur le bandeau cookies (rendu apres site.js). */
@keyframes rise{from{opacity:.01;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Inner page hero : H1 + Lead, one beat, no CTA */
.phero{padding-top:clamp(3.5rem,9vh,6rem)}
.phero h1{max-width:56rem}
.phero .lead{margin-top:1.25rem}
.js .phero.h-1{animation:rise .25s cubic-bezier(.25,.6,.35,1) both}

/* ============ PROOF BAND ============ */
.band{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.cell{border-top:1px solid var(--hairline);padding-top:1.5rem}
.cell .num{
  font-family:var(--mono);font-weight:700;font-size:clamp(2.25rem,4.5vw,3.5rem);
  line-height:1.1;letter-spacing:-.01em;color:var(--fg);
}
.cell .num .sign{color:var(--accent)}
.cell .desc{font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.55;color:var(--muted);margin-top:.75rem;max-width:22rem}
.cell .src{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.75rem}
@media (max-width:719px){.band{grid-template-columns:1fr;gap:2.5rem}}

/* ============ LOGO WALL (typographic wordmarks) ============ */
/* Full working width: kicker and rule span the container, the six wordmarks
   spread across the whole row (space-between), vertically centred.
   Vertical rhythm tightened by a third versus standard sections. */
.logos{padding-top:calc(clamp(3rem,6vw,5rem)*.67)}
.logos+section{padding-top:calc(var(--sec)*.67)}
.logos .kicker{margin-bottom:1.25rem}
.logowall{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;width:100%;
  gap:1rem 2rem;border-top:1px solid var(--hairline);padding-top:1.5rem;
}
@media (max-width:719px){.logowall{justify-content:flex-start;gap:1rem 2.5rem}}
.logowall li{
  font-family:var(--sans);font-weight:700;color:var(--muted);opacity:.85;
  font-size:clamp(.9375rem,1.3vw,1.0625rem);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;transition:color .15s ease-out,opacity .15s ease-out;
}
/* 07/10/2026 : .7 donnait #888 sur blanc, contraste 3,54 (seuil 4,5). A .85 : 5,1. */
.logowall li:hover{color:var(--fg);opacity:1}
.logowall .plus{letter-spacing:0}
/* Wordmark characters : evoke each identity typographically, never copy the logos. Monochrome grey, ink on hover. */
.logowall .lw-bboxx{font-family:var(--sans);font-weight:700;font-size:clamp(1rem,1.4vw,1.125rem);letter-spacing:.02em}
.logowall .lw-wb{font-family:var(--sans);font-weight:500;font-size:clamp(.875rem,1.2vw,.9375rem);letter-spacing:.18em}
.logowall .lw-saatchi{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.0625rem,1.5vw,1.1875rem);letter-spacing:0;text-transform:none}
.logowall .lw-canal{font-family:var(--sans);font-weight:700;font-size:clamp(1rem,1.4vw,1.125rem);letter-spacing:-.02em}
.logowall .lw-hachette{font-family:var(--sans);font-weight:500;font-size:clamp(.75rem,1.1vw,.8125rem);letter-spacing:.25em}
.logowall .lw-lagardere{font-family:var(--sans);font-weight:700;font-size:clamp(.9375rem,1.3vw,1rem);letter-spacing:.06em}

/* ============ FULL-BLEED ILLUSTRATION BANDS ============ */
/* .divider : dedicated panoramic artwork (monochrome + discreet Laterite line
   baked in the asset), nothing written on it, no hover play, no filter. */
.divider{padding-left:0;padding-right:0}
.divider img{display:block;width:100%;height:auto;aspect-ratio:21/9;max-height:26rem;object-fit:cover}

/* ============ MANDATE ============ */
.mandate{border:1px solid var(--fg);border-radius:2px;padding:clamp(1.5rem,4vw,3rem);max-width:52rem}
.mandate .kicker{margin-bottom:1.5rem}
.mandate p{font-family:var(--sans);font-weight:500;font-size:clamp(.9375rem,1.2vw,1rem);line-height:1.6;color:var(--muted);padding:.875rem 0}
.mandate p+p{border-top:1px solid var(--hairline)}
.mandate p:first-of-type{padding-top:0}
.mandate p:last-of-type{padding-bottom:0}
.mandate p strong{color:var(--fg);font-weight:500}

/* ============ BIO (GEO) ============ */
.bio h2{margin-bottom:2rem}
.bio-grid{display:grid;grid-template-columns:minmax(0,42rem) minmax(15rem,20rem);gap:3rem 5rem;align-items:start}
.bio p{max-width:var(--measure);font-size:clamp(1.0625rem,1.5vw,1.1875rem)}
.bio p+p{margin-top:1.5rem}
.portrait{
  aspect-ratio:4/5;background:var(--accent);border-radius:2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
}
.portrait .mark{color:var(--paper)}
.portrait .plabel{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
@media (max-width:839px){
  .bio-grid{grid-template-columns:1fr}
  .bio-grid .pcol{order:-1;max-width:18rem}
}

/* ============ TWO DOORS ============ */
.doors{display:grid;grid-template-columns:7fr 4fr;gap:3rem 4rem;align-items:start}
.door{border-top:1px solid var(--fg);padding-top:1.5rem}
.door-b{border-top:1px solid var(--hairline)}
.door h2,.door h3{margin-bottom:.875rem}
.door .dtxt{font-family:var(--serif);color:var(--muted);max-width:34rem;margin-bottom:1.25rem}
.door-b .dtxt{font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1.6}
.door .dlinks{display:flex;gap:2rem;flex-wrap:wrap}
@media (max-width:959px){.doors{grid-template-columns:1fr}}

/* ============ CASE CARDS ============ */
.cases h2{margin-bottom:3rem}
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-bottom:3rem}
.cardgrid.two{grid-template-columns:repeat(2,1fr);gap:3rem 2rem}
@media (max-width:959px){.cardgrid,.cardgrid.two{grid-template-columns:1fr;gap:3rem}}
.card{
  display:block;text-decoration:none;color:var(--fg);
  border-top:1px solid var(--fg);padding-top:1.5rem;position:relative;
}
.card::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:3px;
  background:var(--accent);opacity:0;transition:opacity .2s ease-out;
}
.card:hover::before,.card:focus-visible::before{opacity:1}
.card .cimg{margin:0 0 1.25rem;overflow:hidden;border-radius:2px}
.card .cimg img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  filter:grayscale(1) contrast(1.05);transition:filter .25s ease-out;
}
.card:hover .cimg img,.card:focus-visible .cimg img{filter:none}
.card .num{font-family:var(--mono);font-weight:700;font-size:clamp(1.75rem,2.5vw,2.25rem);line-height:1.1}
.card h3{margin:.625rem 0 .625rem}
.card .meta{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.card .cst{font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.55;color:var(--muted);margin:.875rem 0 1.125rem}
.card .go{font-family:var(--sans);font-weight:500;font-size:1rem;text-decoration:none;
  text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .15s ease-out;}
.card:hover .go,.card:focus-visible .go{text-decoration:underline;text-decoration-color:var(--accent);color:var(--accent)}
:root[data-theme="dark"] .card:hover .go,:root[data-theme="dark"] .card:focus-visible .go{text-decoration-color:var(--fg);color:var(--fg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card:hover .go,:root:not([data-theme="light"]) .card:focus-visible .go{text-decoration-color:var(--fg);color:var(--fg)}}
.card .go .arr{display:inline-block;transition:transform .2s ease-out}
.card:hover .go .arr,.card:focus-visible .go .arr{transform:translateX(4px)}

/* ============ METHOD TEASER ============ */
.teaser .kicker{margin-bottom:1.25rem}
.teaser p{font-family:var(--serif);font-size:clamp(1.1875rem,1.7vw,1.375rem);line-height:1.5;max-width:var(--measure)}
.teaser p+p{margin-top:.5rem}
.teaser .alink{margin-top:1.5rem}

/* ============ FINAL CTA ============ */
.final h2{margin-bottom:.875rem}
.final .sub{font-family:var(--sans);font-weight:500;font-size:1rem;color:var(--muted);margin-bottom:2.5rem}
.final .firstcall{margin:0 0 2rem}
@media (max-width:639px){.final .btn-primary{display:inline-block;width:auto;max-width:100%;padding:.7rem 1.4rem;font-size:.9375rem;min-height:44px}}

/* ============ CASE STUDY : result block ============ */
.csres{padding-top:clamp(2.5rem,7vh,4.5rem)}
.csres h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1.1;letter-spacing:-.015em;max-width:56rem;margin-top:.75rem}
.csres h1 .dnum{
  display:block;font-family:var(--mono);font-weight:700;color:var(--accent);
  font-size:clamp(3.5rem,9vw,7.5rem);line-height:1;letter-spacing:-.02em;margin-bottom:.75rem;
}
.csres .cmeta{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.7;margin-top:1.25rem;max-width:56rem}
.js .csres.h-1{animation:rise .25s cubic-bezier(.25,.6,.35,1) both}

/* Sticky result band : desktop only, visible or not, never animated */
.sband{
  position:sticky;top:4rem;z-index:30;height:3rem;background:var(--bg);
  border-bottom:1px solid var(--hairline);visibility:hidden;
}
.sband.on{visibility:visible}
.sbrow{height:3rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;overflow:hidden}
.sbleft{display:flex;align-items:baseline;gap:.75rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbnum{font-family:var(--mono);font-weight:700;font-size:1.125rem;color:var(--fg)}
.sbtxt{font-family:var(--sans);font-weight:500;font-size:.875rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.sbcta{font-family:var(--sans);font-weight:500;font-size:.875rem;color:var(--fg);text-decoration:none;white-space:nowrap;padding:.625rem 0}
.sbcta:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:959px){.sband{display:none}}

/* Case hero illustration : grayscale at rest, colour on hover */
.casehero{margin:0;max-width:56rem}
.casehero img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:2px;
  filter:grayscale(1) contrast(1.05);transition:filter .25s ease-out;
}
.casehero:hover img{filter:none}
section.cshero{padding-top:clamp(2.5rem,6vw,4rem)}

/* Panoramic case hero : band-format artwork (native ratio), full width like the dividers */
section.pano-hero{padding-left:0;padding-right:0}
.casehero.pano{max-width:none}
.casehero.pano img{aspect-ratio:auto;object-fit:fill}

/* Column figure (Method) */
.figcol{margin:2.5rem 0 0;max-width:var(--measure)}
.figcol img{
  display:block;width:100%;height:auto;border-radius:2px;
  filter:grayscale(1) contrast(1.05);transition:filter .25s ease-out;
}
.figcol:hover img{filter:none}

/* Executive summary : Lead paragraphs */
.execsum .lead+.lead{margin-top:1.5rem}

/* Constraint block : the signature block, one per page */
.constraint{
  background:var(--fg);color:var(--bg);
  border-left:4px solid var(--accent);border-radius:0;
  padding:clamp(1.5rem,4.5vw,3rem);
}
/* 07/10/2026 : kicker en couleur du bloc. Latérite 13 px sur encre = contraste 3,21 (seuil 4,5) et
   règle brand_tokens « accent sur fond sombre : aplats/filets/grands caractères, jamais petit texte ».
   L'accent du bloc reste porté par le filet gauche de 4 px. */
.constraint .kicker{color:inherit;margin-bottom:1.25rem}
.constraint p{font-family:var(--serif);max-width:var(--measure);font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.6}

/* System steps */
.step{max-width:var(--measure)}
.step+.step{margin-top:2.5rem}
.step h3{margin-bottom:.5rem}
.step p{font-size:clamp(1.0625rem,1.5vw,1.1875rem)}
.step .produces{font-family:var(--sans);font-weight:500;font-size:.9375rem;color:var(--muted);margin-top:.75rem}
.step .proof{font-family:var(--sans);font-weight:500;font-size:.9375rem;color:var(--muted);margin-top:.375rem}

/* Results list */
.resnote{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.results{list-style:none;max-width:var(--measure)}
.results li{
  border-top:1px solid var(--hairline);padding:.875rem 0;
  font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1.55;color:var(--fg);
}

/* "What it proves" */
.proves{border-top:1px solid var(--fg);padding-top:1.5rem;max-width:var(--measure)}
.proves p{font-style:italic;font-size:clamp(1.1875rem,1.7vw,1.375rem);line-height:1.5}

/* ============ METHOD : 90 days + FAQ ============ */
.days{list-style:none;max-width:var(--measure);margin-top:1.25rem}
.days li{border-top:1px solid var(--hairline);padding:1rem 0;display:grid;grid-template-columns:8.5rem 1fr;gap:1.5rem}
.days .dd{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:.3rem}
.days p{font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.6;color:var(--fg)}
@media (max-width:639px){.days li{grid-template-columns:1fr;gap:.25rem}}

.how .hblock{max-width:var(--measure)}
.how .hblock+.hblock{margin-top:3rem}
.how .hblock h3{margin-bottom:.75rem}
.how .hblock>p{font-size:clamp(1.0625rem,1.5vw,1.1875rem)}

.qa{max-width:var(--measure)}
.qa+.qa{margin-top:2.5rem}
.qa h3{margin-bottom:.625rem}
.qa p{font-size:clamp(1.0625rem,1.5vw,1.1875rem)}

/* ============ ABOUT ============ */
.metazone{
  border:1px solid var(--hairline);border-radius:2px;padding:1.5rem;
  font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.8;color:var(--muted);
}
.metazone .cvlink{color:var(--fg)}
.aboutgrid{display:grid;grid-template-columns:minmax(0,42rem) minmax(16rem,22rem);gap:3rem 5rem;align-items:start}
@media (max-width:839px){.aboutgrid{grid-template-columns:1fr}}

/* About hero (hero-fix) : name + role + portrait together at the top.
   Desktop = 2 columns, portrait top-aligned with the name (never falls below it).
   Mobile (<=839px) = 1 column, source order name+lead, then portrait, then prose+meta. */
.abouthero{padding-top:clamp(3.5rem,9vh,6rem)}
.abouthero .aboutlead-top .lead{margin-top:1.25rem}
@media (min-width:840px){
  .abouthero .aboutgrid{grid-template-columns:minmax(0,42rem) minmax(16rem,22rem)}
  .abouthero .aboutlead-top{grid-column:1;grid-row:1;min-width:0}
  .abouthero .aboutlead-rest{grid-column:1;grid-row:2;min-width:0}
  .abouthero .pframe{grid-column:2;grid-row:1 / span 2;align-self:start}
}
.aportrait{margin:0}
.aportrait img{
  display:block;width:100%;height:auto;border-radius:2px;
  filter:grayscale(1) contrast(1.05);transition:filter .25s ease-out;
}
.aportrait:hover img{filter:none}

.tl{list-style:none;max-width:52rem}
.tl li{border-top:1px solid var(--hairline);padding:1.25rem 0;display:grid;grid-template-columns:9.5rem 1fr;gap:1.5rem}
.tl .tld{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;color:var(--muted);padding-top:.3rem}
.tl h3{font-size:1.0625rem;font-weight:500;line-height:1.4}
.tl p{font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.55;color:var(--muted);margin-top:.375rem}
@media (max-width:639px){.tl li{grid-template-columns:1fr;gap:.25rem}}

.plainlist{list-style:none;max-width:var(--measure)}
.plainlist li{
  border-top:1px solid var(--hairline);padding:.75rem 0;
  font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.55;color:var(--fg);
}

/* ============ CALENDLY : split module, widget in a deliberate paper card ============ */
/* Left 2/5 : styled content. Right 3/5 : the widget in a Paper card,
   kept Paper in dark mode by design. */
.bookgrid{display:grid;grid-template-columns:2fr 3fr;gap:3rem 4rem;align-items:start}
@media (max-width:959px){.bookgrid{grid-template-columns:1fr;gap:2.5rem}}
/* Debordement de grille, mesure le 24/09/2026 a 320 px : `.bookleft` et `.bookcard` faisaient
   342 px dans un conteneur de 288 px. Ce n'est pas la faute de leur contenu, c'est la valeur
   par defaut `min-width:auto` d'un enfant de grille, qui l'empeche de descendre sous la largeur
   min-content de ce qu'il contient. Le correctif standard est `min-width:0` sur les enfants :
   ils redeviennent compressibles et le texte se replie normalement. */
.bookgrid > *{min-width:0}
.bookleft .firstcall{margin-top:1.25rem}
.bookleft .avail{font-family:var(--sans);font-weight:500;font-size:.9375rem;color:var(--muted);margin-top:1.5rem}
.bookleft .calfallback{margin-top:.5rem}
.bookcard{
  position:relative;background:var(--paper);
  border:1px solid rgba(11,11,11,.15);border-radius:2px;
  padding:clamp(1.25rem,2.5vw,2.25rem);
}
.bookcard .bc-mark{position:absolute;top:1rem;right:1rem;color:var(--ink);line-height:0;z-index:2}
.bookcard .calload{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:#555555;
}
.bookcard .calendly-inline-widget{position:relative;z-index:1}
.calfallback{font-family:var(--sans);font-weight:500;font-size:.875rem;color:var(--muted);margin-top:1rem}

/* ============ CONTACT FORM (Formspree, honeypot, no captcha) ============ */
.cform{max-width:34rem;margin-top:2.5rem}
.cform label{display:block;font-family:var(--sans);font-weight:500;font-size:.9375rem;margin-bottom:.375rem}
.cform input,.cform textarea{
  width:100%;font-family:var(--serif);font-size:1.0625rem;color:var(--fg);
  background:transparent;border:1px solid var(--hairline);border-radius:2px;
  padding:.75rem .875rem;margin-bottom:1.25rem;
}
.cform textarea{min-height:9rem;resize:vertical}
.cform .ferr{
  display:none;font-family:var(--sans);font-weight:500;font-size:.9375rem;color:var(--fg);
  border-left:2px solid var(--accent);padding-left:.75rem;margin-bottom:1.25rem;
}
.cform.error .ferr{display:block}
.fsuccess{font-family:var(--serif);font-size:clamp(1.1875rem,1.7vw,1.375rem);max-width:var(--measure)}
.hp{position:absolute;left:-999rem;width:1px;height:1px;overflow:hidden}
.contactli{font-family:var(--sans);font-weight:500;font-size:1rem;margin-top:2.5rem}

/* ============ CV (print-first) ============ */
.actbar{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;padding-top:2.5rem}
.cvdoc{max-width:52rem;padding-top:clamp(2.5rem,6vw,4rem)}
.cvhead h1{font-family:var(--display);font-weight:700;font-size:clamp(1.75rem,3.4vw,2.5rem);letter-spacing:.01em;text-transform:none;line-height:1.1}
.cvhead .cvrole{font-family:var(--sans);font-weight:500;font-size:1.125rem;margin-top:.5rem}
.cvhead .cvmeta{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.75rem;line-height:1.8}
.cvsec{margin-top:3rem}
.cvsec>.kicker{margin-bottom:1.25rem}
.cvsum{font-size:clamp(1.0625rem,1.5vw,1.1875rem);max-width:var(--measure)}
.keynums{list-style:none}
.keynums li{border-top:1px solid var(--hairline);padding:.75rem 0;font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.55}
.keynums .kn{font-family:var(--mono);font-weight:700;font-size:1.125rem;margin-right:.75rem}
.cventry{border-top:1px solid var(--hairline);padding:1.5rem 0}
.cventry h3{font-size:1.125rem;font-weight:500;line-height:1.35}
.cventry .cvd{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.25rem;margin-bottom:.875rem}
.cventry .intro{font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.6;color:var(--muted);margin-bottom:.75rem;max-width:var(--measure)}
.cventry ul{list-style:none;max-width:var(--measure)}
.cventry li{padding:.375rem 0 .375rem 1.125rem;position:relative;font-size:1.0625rem;line-height:1.55}
.cventry li::before{content:"";position:absolute;left:0;top:.85em;width:.5rem;height:1px;background:var(--fg)}
.cventry .clients{font-family:var(--sans);font-weight:500;font-size:.9375rem;color:var(--muted);margin-top:.75rem}
.cvfoot{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:3.5rem;border-top:1px solid var(--hairline);padding-top:1.25rem}

@media print{
  @page{size:A4;margin:14mm 16mm}
  html{scroll-behavior:auto}
  body{background:#FFFFFF;color:#0B0B0B;font-size:10.5pt;line-height:1.5}
  header,.sband,.actbar,footer,.skip,.panel{display:none !important}
  .wrap{max-width:none;padding:0}
  main section{padding-top:0}
  .cvdoc{max-width:none;padding-top:0}
  .cvhead h1{font-size:20pt}
  .cvhead .cvrole{font-size:12pt}
  .cvsec{margin-top:14pt}
  .cventry{padding:9pt 0;break-inside:avoid}
  .cventry li{font-size:10pt}
  .cvsum,.keynums li{font-size:10pt}
  .cvfoot{margin-top:14pt}
  a{text-decoration:none;color:inherit}
}

/* ============ 404 ============ */
.nf{min-height:min(calc(100svh - 4rem),36rem);display:flex;flex-direction:column;justify-content:center}
.nf p.big{font-family:var(--serif);font-size:clamp(1.375rem,2.4vw,1.75rem);max-width:var(--measure)}
.nf .dlinks{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1.5rem}
.nf+.nf{min-height:0;padding-bottom:6rem}

/* ============ FOOTER : inverted slab, no Laterite ============ */
footer{background:var(--ink);color:var(--paper)}
:root[data-theme="dark"] footer{border-top:1px solid var(--hairline-onink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) footer{border-top:1px solid var(--hairline-onink)}}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem;padding-top:4rem;padding-bottom:3rem}
@media (max-width:719px){.fgrid{grid-template-columns:1fr;gap:2.5rem}}
footer .fid strong{font-family:var(--sans);font-weight:700;font-size:.9375rem;letter-spacing:.01em;display:block;margin-bottom:.5rem}
footer .fid p{font-family:var(--sans);font-weight:500;font-size:.875rem;line-height:1.6;color:#9A9A9A}
footer nav{display:flex;flex-direction:column;gap:.125rem}
footer nav a,footer .fdo a{
  font-family:var(--sans);font-weight:500;font-size:.875rem;color:#9A9A9A;
  text-decoration:none;padding:.375rem 0;display:inline-block;transition:color .15s ease-out;
}
footer nav a:hover,footer .fdo a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
footer .fdo{display:flex;flex-direction:column;gap:.125rem;align-items:flex-start}
footer .fdo .cv{
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:var(--hairline-onink);
}
.fbottom{
  border-top:1px solid var(--hairline-onink);
  padding-top:1.5rem;padding-bottom:2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.fbottom p{font-family:var(--sans);font-weight:500;font-size:.875rem;color:#9A9A9A}
.fbottom .lang a{padding:.75rem .375rem}
.fbottom .lang .on{color:var(--paper)}
.fbottom .lang .off{color:#9A9A9A}
.fbottom .lang .off:hover{color:var(--paper)}
.fmark{color:#9A9A9A;display:inline-flex;align-items:center}

/* Real portrait (v1.1.1) : warm-paper passe-partout mat inside a hairline frame.
   The C tile (44px) sits astride the photo's bottom-right corner, over the mat.
   The C IS the marker: no extra Laterite rule, no Laterite box. */
.pframe{margin:0;border:1px solid var(--hairline);border-radius:0;background:#FAF8F4;padding:clamp(1.25rem,2vw,1.5rem);position:relative}
.pframe .pinner{display:block;position:relative;line-height:0}
.pframe img{display:block;width:100%;height:auto}
.pframe .cbadge{position:absolute;right:-22px;bottom:-22px;width:44px;height:44px;line-height:0}
.pframe .cbadge svg{display:block;width:44px;height:44px}

/* WhatsApp : discreet mono line under the Calendly modules */
.waline{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.5rem}
.waline a{color:var(--fg);text-decoration:none;display:inline-block;padding:.75rem 0}
.waline a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.waline .arr{display:inline-block;transition:transform .2s ease-out}
.waline a:hover .arr{transform:translateX(4px)}

/* WhatsApp block under the contact form */
.wablock{margin-top:3rem;max-width:34rem}
.wablock p{font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1.6;color:var(--muted);margin-bottom:1.25rem}

/* Brands served : plain text line, About */
.brandline{font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;line-height:2.1;color:var(--muted);max-width:52rem;margin-top:1.25rem}

/* Journey band at the head of the About timeline */
.tlband{margin:0 0 2.5rem;max-width:52rem}
.tlband img{display:block;width:100%;height:auto;border-radius:2px;filter:grayscale(1) contrast(1.05);transition:filter .25s ease-out}
.tlband:hover img{filter:none}

/* ============ TAP TARGETS (QA 23/08) : >=44px on touch layouts.
   Invisible spacing only, desktop rhythm untouched. ============ */
@media (max-width:959px){
  .alink{padding:.625rem 0}
  footer nav a,footer .fdo a{padding:.6875rem 0}
}

/* ============ REDUCED MOTION : everything instant and complete ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .rv{opacity:1;transform:none}
}

/* Footer : C mark beside the identity wordmark */
footer .fid .mark{vertical-align:-3px;margin-right:.5rem}

/* ============ COOKIE BANNER (consent mode v2, one analytics cookie) ============ */
.cbanner{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--bg);border-top:1px solid var(--hairline);
}
.cbanner[hidden]{display:none}
.cbrow{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-top:.875rem;padding-bottom:.875rem;flex-wrap:wrap;
}
.cbtxt{font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.5;color:var(--fg)}
.cbtns{display:flex;gap:.75rem}
.cbtn{padding:.5rem 1.125rem;min-height:44px}
.cbtn-no{border-color:var(--hairline);color:var(--muted)}
.cbtn-no:hover{border-color:currentColor}
@media (max-width:639px){.cbrow{align-items:flex-start;flex-direction:column;gap:.75rem}}
@media print{.cbanner{display:none !important}}

/* ============================================================
   OPTION B (validated by Chris) : use the empty right half on
   genuinely wide screens only. Gate: >= 1400px. Nothing changes
   at or below 1400px, so laptop and mobile stay exactly as-is.
   The right-column elements are not rendered below the gate.
   ============================================================ */
.m2-side,.split-aside{display:none}

@media (min-width:1400px){

  /* 1 · MANDATE (home) : reading measure left, brand signature right */
  .mandate-2col{
    max-width:none;
    display:grid;grid-template-columns:minmax(0,42rem) 1fr;
    column-gap:4rem;align-items:center;
  }
  .mandate-2col .m2-body{min-width:0}
  .mandate-2col .m2-side{
    display:block;border-left:1px solid var(--hairline);padding-left:3rem;
  }
  .mandate-2col .m2-num{
    font-family:var(--mono);font-weight:700;font-size:clamp(3rem,4.2vw,4.25rem);
    line-height:1;letter-spacing:-.02em;color:var(--fg);
  }
  .mandate-2col .m2-lab{
    font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);margin-top:1rem;line-height:1.7;
  }

  /* 2 · FINAL CTA : title + button left, "The first call" panel right */
  .final:not([data-cal]){
    display:grid;grid-template-columns:1fr minmax(17rem,20rem);
    column-gap:4rem;align-items:start;
  }
  .final:not([data-cal])>*{grid-column:1}
  .final:not([data-cal])>.firstcall{
    grid-column:2;grid-row:1 / span 6;align-self:start;margin:0;
    border-left:1px solid var(--hairline);padding-left:2rem;
  }
  /* NB: the home #book Calendly section (.final[data-cal]) is deliberately left
     untouched : it is a fixed-width widget block, not a mono-column text block. */

  /* 3 · ABOUT mono-column sections : content left, quiet stat aside right */
  .split{display:grid;grid-template-columns:1fr minmax(15rem,18rem);column-gap:4rem;align-items:start}
  .split .split-main{min-width:0}
  .split .split-aside{
    display:block;margin-top:0;border-left:1px solid var(--hairline);padding-left:2rem;
  }
}

/* Stat aside (shared by About split blocks) */
.stat{list-style:none}
.stat li{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:.75rem 0;border-top:1px solid var(--hairline);line-height:1.5;
}
.stat li:first-child{border-top:0;padding-top:0}
.stat .statbig{
  display:block;font-family:var(--mono);font-weight:700;font-size:clamp(2rem,2.8vw,2.75rem);
  line-height:1;letter-spacing:-.01em;color:var(--fg);margin-bottom:.375rem;
}

/* ============================================================
   OPTION C (case study pages) : same wide-screen discipline as
   Option B, extended to the long-read case pages. Gate: >= 1400px.
   Nothing changes at or below 1400px (laptop and mobile untouched).
   The empty right half is removed by moving each section's mono
   kicker into a narrow left rail and setting the prose in a
   reading column beside it; the constraint box hugs that same
   column instead of stretching full-width. Hero image, sticky
   result band, cards and the CTA (handled by Option B) stay as-is.
   ============================================================ */
@media (min-width:1400px){
  /* prose sections with a kicker (context, the system, results, what it proves).
     The next-cases section is excluded (it carries the card grid, kept full width). */
  .casepage section.wrap:has(> .kicker):not(:has(.cardgrid)){
    display:grid;
    grid-template-columns:14rem minmax(0,var(--measure));
    column-gap:3rem;
    align-items:start;
  }
  .casepage section.wrap:has(> .kicker):not(:has(.cardgrid)) > .kicker{
    grid-column:1;grid-row:1;margin:.3rem 0 0;
  }
  .casepage section.wrap:has(> .kicker):not(:has(.cardgrid)) > *:not(.kicker){
    grid-column:2;
  }
  /* executive summary : no kicker, align its paragraphs to the reading column */
  .casepage .execsum > *{margin-left:17rem;max-width:var(--measure)}
  /* the constraint box : hug the reading column, never full-width */
  .casepage section.wrap > .constraint{
    margin-left:17rem;
    max-width:calc(var(--measure) + 6rem);
  }
}
@media (max-width:639px){.btn-primary{padding:.7rem 1.4rem;font-size:.9375rem;min-height:44px}}
@media (max-width:639px){.btn-hdr{padding:.4rem .75rem;min-height:36px;font-size:.8125rem;white-space:nowrap;line-height:1}}

/* Correctif 13/09/2026 (recette Chris, relayee par Cortex) : dans un bloc inverse,
   .tlink et .alink forcaient color:var(--fg) en dur, donc noir sur noir. */
.constraint .tlink,.constraint .alink{color:inherit;text-decoration-color:var(--accent)}
.constraint .tlink:hover,.constraint .alink:hover{text-decoration-color:currentColor}
/* Meme famille de defaut, trouve par le nouveau controle de contraste le 13/09 :
   .lang .sep utilise --hairline, noir a 15 pourcent, donc invisible dans le pied de page
   et dans tout bloc inverse. Le token --hairline-onink existe pour ce cas. */
footer .lang .sep,.constraint .lang .sep{color:var(--hairline-onink)}

/* ============ TRES PETITS ECRANS : dernier cran de compression (24/09/2026) ============ */
/* Ce bloc est EN FIN DE FICHIER volontairement. Pose au milieu, il perdait contre la regle
   `@media (max-width:639px){.btn-hdr{...}}` ecrite plus bas : specificite egale, c'est l'ordre
   qui tranche, et le debordement de 320 px survivait au correctif. Defaut commis et mesure le
   meme jour. */
@media (max-width:420px){
  .wrap{padding-left:1rem;padding-right:1rem}
  .hbar{gap:.5rem}
  .hright{gap:.5rem}
  .wordmark{font-size:.875rem;letter-spacing:.02em}
  .btn-hdr{padding:.3rem .5rem;font-size:.6875rem;min-height:32px;letter-spacing:0}
}
/* Le widget Calendly porte un `min-width:300px` en dur : c'est son code, pas le notre, et on ne
   le reecrit pas. A 320 px il depasse donc la gouttiere et faisait scroller la PAGE ENTIERE.
   On borne le debordement a sa carte : c'est le widget qui defile, plus le document. */
.bookcard{overflow-x:auto}

/* ============ LIVRE BLANC 01 · BUDGET (03/10/2026) ============ */
/* Bloc unique, en bas de la page Methode (EN et FR). Formulaire Mailchimp sans style Mailchimp,
   sans JavaScript tiers : le POST part vers list-manage.com, Mailchimp gere le double opt-in. */
.paper .lead{margin-bottom:2.5rem}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.pwhat{list-style:none}
.pwhat li{border-top:1px solid var(--hairline);padding:1rem 0;font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.6;color:var(--muted)}
.pwhat li:last-child{border-bottom:1px solid var(--hairline)}
.pwhat .pk{display:block;font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg);margin-bottom:.35rem}
.pcard{border:1px solid var(--fg);border-radius:2px;padding:clamp(1.25rem,3vw,2rem)}
.mcrow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mcf label{display:block;font-family:var(--sans);font-weight:500;font-size:.9375rem;margin-bottom:.375rem}
.mcform input[type="email"],.mcform input[type="text"],.mcform select{
  width:100%;font-family:var(--serif);font-size:1.0625rem;color:var(--fg);
  background:transparent;border:1px solid var(--hairline);border-radius:2px;
  padding:.75rem .875rem;margin-bottom:1.25rem;min-height:48px;
}
.mcform select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 1.25rem) 55%,calc(100% - .9rem) 55%;background-size:.35rem .35rem,.35rem .35rem;background-repeat:no-repeat;padding-right:2.5rem}
.mcform select option{color:#0B0B0B;background:#FFFFFF}
.mcform input:focus,.mcform select:focus{border-color:var(--fg);outline:none}
.mccheck{display:flex;gap:.75rem;align-items:flex-start;font-family:var(--sans);font-weight:500;font-size:.875rem;line-height:1.55;color:var(--muted);margin:.25rem 0 1.5rem}
.mccheck input{flex:0 0 auto;width:1.125rem;height:1.125rem;margin-top:.2rem;accent-color:var(--accent)}
.mcsubmit{margin:0}
.mcsubmit .btn{width:100%;text-align:center}
.mcnote{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:1rem;line-height:1.6}
.mcbadge{margin-top:1.25rem;opacity:.55}
.mcbadge img{width:140px;height:auto;display:block}
:root[data-theme="dark"] .mcbadge img{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mcbadge img{filter:invert(1)}}
@media (max-width:839px){.pgrid{grid-template-columns:1fr}}
@media (max-width:519px){.mcrow{grid-template-columns:1fr}}
/* Page de remerciement (apres confirmation du double opt-in), non indexee */
.thanks .dl{list-style:none;margin:0 0 2rem;max-width:var(--measure)}
.thanks .dl li{border-top:1px solid var(--hairline);padding:1.25rem 0}
.thanks .dl li:last-child{border-bottom:1px solid var(--hairline)}
.thanks .dl .pk{display:block;font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.thanks .dl a.tlink{font-family:var(--display);font-weight:600;font-size:clamp(1.1875rem,1.8vw,1.375rem)}
.thanks .dl .sz{font-family:var(--sans);font-weight:500;font-size:.875rem;color:var(--muted);margin-top:.35rem}