/* ═══════════════════════════════════════════════════════════════════════════
   Harmonisation des pages héritées (about, faq, contact, planifier, blogue,
   légal, remerciements, cas client) sur le langage du site.
   Ces pages sont pilotées par des variables : on les remappe, on repasse les
   polices et on arrondit leurs blocs. Charger APRÈS le <style> de la page.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#000;
  --surface:#161616;
  --surf-low:#1A1A1A;
  --surf-card:#1D1D1D;
  --surf-high:#242424;
  --primary:#2563EB;
  --primary-lt:#B4C5FF;
  --secondary:#2563EB;
  --text:#fff;
  --muted:rgba(255,255,255,.52);
  --label:rgba(255,255,255,.34);
  --grad-btn:none;
  --grad-text:none;
  --grad-hero:none;
  --ghost:rgba(255,255,255,.06);
  --ghost-focus:rgba(37,99,235,.35);
  --glass-bg:rgba(18,18,18,.78);
  --shadow:0 22px 60px rgba(0,0,0,.6);
  --section-gap:clamp(44px,6vw,104px);
}

html{background:#000}
body{background:#000;color:var(--text);font-family:var(--display);
  padding:var(--pad);padding-bottom:0;line-height:1.6}

/* Les dégradés de texte laissent place à l'aplat */
.gradient-text,.c-PageHero-title em,.hero-title em,.display-lg em,h1 em,h2 em{
  background:none!important;-webkit-background-clip:border-box!important;
  background-clip:border-box!important;-webkit-text-fill-color:currentColor!important;
  color:var(--accent-lt)!important;font-style:normal!important}

/* Titres et libellés dans les polices du site */
.display-lg,.display-md,.display-sm,.c-PageHero-title,.faq-section-title,
.section-hd h2,.approach-title,.diff-title,.fail-title,.footer-logo{
  font-family:var(--display)!important;letter-spacing:-.04em;line-height:.96}
.display-lg,.c-PageHero-title{font-size:clamp(36px,5.6vw,86px);font-weight:600;
  text-transform:uppercase;line-height:.9}
.display-md{font-size:clamp(24px,3.4vw,50px);font-weight:600;text-transform:uppercase;line-height:.96}
.display-sm,.approach-title,.diff-title,.fail-title{font-size:clamp(17px,1.6vw,22px);
  font-weight:500;text-transform:uppercase;letter-spacing:-.028em;line-height:1.1}
.label-md,.badge,.c-PageHero-label,.approach-num,.diff-num,.footer-col>h4,
.faq-nav-list a,.c-ContactInfo-item span:first-child{
  font-family:var(--mono)!important;font-weight:500!important;font-size:10.5px!important;
  letter-spacing:.16em!important;text-transform:uppercase!important}
.body-lg,.body-md,.c-PageHero-sub,.approach-text,.diff-text,.fail-text,
.faq-a-inner,.cta-sub,.footer-desc{font-family:var(--display);color:var(--muted)}
.body-lg,.c-PageHero-sub{font-size:clamp(15px,1.35vw,18px);line-height:1.68}
.body-md{font-size:14.5px;line-height:1.7}

/* ─── HERO DE PAGE : papier crème, comme partout ────────────────────────── */
.page-hero,.c-PageHero,.blog-hero{background:var(--paper)!important;color:var(--ink)!important;
  border-radius:var(--r-xl);overflow:hidden;position:relative;
  min-height:min(66svh,660px);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(46px,6vw,104px) clamp(26px,5vw,84px);margin-bottom:var(--pad)}
.page-hero-inner,.c-PageHero>*:not(canvas),.blog-hero>*:not(canvas){position:relative;z-index:2}
.page-hero::before,.c-PageHero::before{display:none}
.page-hero .container,.c-PageHero .container{padding:0;max-width:none}
.page-hero .display-lg,.c-PageHero-title,.blog-hero h1{color:var(--ink)!important;max-width:16ch}
.page-hero .body-lg,.c-PageHero-sub,.blog-hero p{color:rgba(11,11,11,.72)!important;max-width:58ch}
.page-hero .badge,.c-PageHero-label,.blog-hero .badge{color:rgba(11,11,11,.45)!important;
  background:transparent!important;border:none!important;padding:0!important;margin-bottom:20px;
  display:inline-flex;align-items:center;gap:12px}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
.c-PageHero-pills,.c-Next-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.c-PageHero-pill,.c-Next-pill{border-radius:var(--r-pill);border:1px solid rgba(11,11,11,.18);
  background:rgba(11,11,11,.04);padding:11px 19px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(11,11,11,.62)}
.c-PageHero-check{color:var(--accent)!important}
#hero .hero-canvas,canvas.hero-canvas{position:absolute!important;inset:0;width:100%!important;height:100%!important;z-index:0!important;pointer-events:none;border-radius:inherit;display:block}

/* ─── SECTIONS EN CARTES ────────────────────────────────────────────────── */
section.surf-base,section.surf-low,section.faq-section,section.c-ContactPage,
section.c-CalWrap,section.c-Legal,section.c-Steps,section.c-Next,section.c-EndCta,
div.c-CalWrap,div.c-Legal{border-radius:var(--r-xl);overflow:hidden;overflow:clip;margin-bottom:var(--pad)}
section.surf-base{background:var(--card)!important}
section.surf-low{background:var(--card-2)!important}
.section-gap{padding:var(--section-gap) 0}
.container{max-width:1280px;padding:0 clamp(24px,4vw,72px)}
.section-hd{margin-bottom:clamp(26px,3.4vw,52px)}

/* ─── CARTES ────────────────────────────────────────────────────────────── */
.approach-card,.diff-card,.fail-card,.cta-box,.c-Field,.c-Form,.c-ContactInfo,
.c-Step,.mcard,.ph,.who,.ctx-block,.quote-block,.shot,.ss-block,.ai-block,.ba-block{
  border-radius:var(--r-lg)}
.approach-card,.diff-card,.fail-card{background:var(--card-2);border:none;
  padding:clamp(24px,2.6vw,38px);transition:transform .45s var(--ease),background .45s}
.approach-card:hover,.diff-card:hover,.fail-card:hover{transform:translateY(-4px);background:#242424}
.approach-num,.diff-num{color:var(--accent-lt)}
.approach-grid,.diff-grid,.fail-grid{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:var(--gap-c)}

/* Une pastille et des liens pensés pour fond sombre atterrissent sur des
   sections crème : sans ça, 1,2:1 et 1,5:1 de contraste. */
.cta-box .badge,.c-EndCta .badge,.c-Next .badge,.cta-sec .badge{background:rgba(37,99,235,.1);
  border-color:rgba(37,99,235,.3);color:var(--accent)!important}

/* ─── APPEL À L'ACTION ──────────────────────────────────────────────────── */
.cta-box{background:var(--paper)!important;color:var(--ink)!important;
  border:none!important;padding:clamp(38px,6vw,104px) clamp(26px,5vw,84px);
  border-radius:var(--r-xl);display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.cta-box .display-md,.cta-box h2{color:var(--ink)!important}
.cta-box .cta-sub,.cta-box p{color:rgba(11,11,11,.72)!important;max-width:56ch}

/* ─── BOUTONS ───────────────────────────────────────────────────────────── */
.btn-primary,.btn-ghost{display:inline-flex;align-items:center;gap:12px;
  border-radius:var(--r-pill);padding:15px 26px;font-family:var(--mono);font-size:12px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .3s var(--ease),background .3s,color .3s;background-image:none!important}
.btn-primary{background:var(--ink);color:#fff;border:none}
.btn-primary:hover{transform:translateY(-2px);background:var(--accent);color:#fff}
.btn-ghost{background:transparent;border:1px solid rgba(11,11,11,.2);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
section.surf-base .btn-primary,section.surf-low .btn-primary{background:var(--text);color:#000}
section.surf-base .btn-ghost,section.surf-low .btn-ghost{border-color:var(--line);color:var(--text)}
section.surf-base .btn-ghost:hover,section.surf-low .btn-ghost:hover{background:var(--text);color:#000}

/* ─── FORMULAIRE ────────────────────────────────────────────────────────── */
.c-Form{background:var(--card-2);padding:clamp(26px,3vw,44px)}
.c-Field input,.c-Field textarea,.c-Field select{width:100%;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:16px;padding:14px 16px;color:var(--text);
  font-family:var(--display);font-size:15px;transition:border-color .3s,background .3s}
.c-Field input:focus,.c-Field textarea:focus,.c-Field select:focus{outline:none;
  border-color:var(--accent);background:rgba(255,255,255,.06)}
.c-Field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim);display:block;margin-bottom:9px}

/* ─── FAQ ───────────────────────────────────────────────────────────────── */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{padding:clamp(18px,2.2vw,30px) 0}
.faq-q-text{font-size:clamp(16px,1.5vw,21px);font-weight:500;letter-spacing:-.024em;
  line-height:1.22;color:var(--text)}
.faq-a-inner{font-size:14.5px;line-height:1.72;color:var(--muted)}
.faq-chevron{color:var(--muted)}
.faq-nav-list a{color:var(--dim);transition:color .3s}
.faq-nav-list a:hover{color:var(--text)}

/* ─── BLOGUE ────────────────────────────────────────────────────────────── */
.card,.blog-card{border-radius:var(--r-lg)}
.card-cover{border-radius:0}

/* ─── LÉGAL ─────────────────────────────────────────────────────────────── */
.c-Legal{background:var(--card);padding:clamp(32px,4.6vw,84px) clamp(26px,5vw,84px)}
.c-Legal h2{font-family:var(--display);font-size:clamp(20px,2.2vw,30px);font-weight:500;
  text-transform:uppercase;letter-spacing:-.03em;margin:1.9em 0 .6em}
.c-Legal p,.c-Legal li{font-size:15px;line-height:1.75;color:var(--muted)}

/* ─── ANCIENS PIEDS DE PAGE : masqués, le nouveau prend le relais ───────── */
body>footer:not(.foot),footer.footer:not(.foot),.c-MiniFoot{display:none}

/* ─── AJUSTEMENTS ───────────────────────────────────────────────────────── */
.c-Back{display:none}
.reveal{opacity:1;transform:none}
@media(max-width:900px){
  .page-hero,.c-PageHero,.blog-hero{min-height:0;padding:clamp(40px,8vw,72px) 24px}
}


/* ─── LA PASTILLE REPREND LE DESSUS SUR LES ANCIENS STYLES `nav` ────────── */
nav.nav{position:fixed;top:auto;left:50%;bottom:26px;transform:translateX(-50%);
  width:auto;max-width:none;z-index:300;display:flex;align-items:center;gap:3px;padding:9px;
  border-radius:22px;background:rgba(18,18,18,.78);backdrop-filter:blur(26px);
  -webkit-backdrop-filter:blur(26px);border:1px solid var(--line);
  box-shadow:0 22px 60px rgba(0,0,0,.66);justify-content:flex-start}
nav.nav .nav-logo{width:46px;height:46px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;margin:0 8px 0 6px;gap:0}
nav.nav .nav-logo img{width:42px;height:42px;object-fit:contain}
@media(max-width:900px){
  nav.nav{width:calc(100% - 24px);flex-wrap:wrap;justify-content:center;bottom:12px;border-radius:18px}
  nav.nav .nav-logo{width:34px;height:34px;margin:0 4px}
  nav.nav .nav-logo img{width:32px;height:32px}
}

/* ─── LE HERO PAPIER PASSE DEVANT LES FONDS DE SECTION ──────────────────── */
section.page-hero,section.c-PageHero,section.blog-hero,
header.c-PageHero,header.blog-hero,div.c-PageHero,
.page-hero.surf-base,.page-hero.surf-low,#hero.page-hero,#hero.c-PageHero,#hero.blog-hero{
  background:var(--paper)!important;color:var(--ink)!important;
  border-radius:var(--r-xl);overflow:hidden;position:relative;
  min-height:min(66svh,660px);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(46px,6vw,104px) clamp(26px,5vw,84px);margin-bottom:var(--pad);text-align:left}
#hero .page-hero-inner,#hero .c-PageHero-inner{max-width:1000px;margin:0;text-align:left}
#hero .display-lg,#hero .display-md,#hero h1,#hero .c-PageHero-title{color:var(--ink)!important}
#hero .body-lg,#hero p,#hero .c-PageHero-sub{color:rgba(11,11,11,.72)!important}
#hero .badge,#hero .label-md,#hero .c-PageHero-label{color:rgba(11,11,11,.45)!important;
  background:transparent!important;border:none!important;padding:0!important}
#hero .btn-primary{background:var(--ink);color:#fff}
#hero .btn-primary:hover{background:var(--accent)}
#hero .btn-ghost{border-color:rgba(11,11,11,.2);color:var(--ink)}
#hero .btn-ghost:hover{background:var(--ink);color:#fff}
#hero .reveal,.reveal.reveal-delay-1,.reveal.reveal-delay-2,.reveal.reveal-delay-3{
  opacity:1!important;transform:none!important}


/* ─── LES ANCIENS `nav{}` NE DOIVENT TOUCHER QUE LEUR PAGE ──────────────── */
nav:not(.nav){position:static;top:auto;left:auto;bottom:auto;transform:none;width:auto;
  max-width:none;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:none;border-radius:0;padding:0;z-index:auto;box-shadow:none}

/* ─── BOUTON btn05 SUR LES PAGES SANS service-page.css ──────────────────── */
.btn05{position:relative;display:inline-flex;align-items:center;gap:14px;
  border-radius:var(--r-pill);border:none;overflow:visible;background:var(--text);color:#000;
  font-family:var(--mono);padding:0 24px 0 26px;min-height:52px;
  transition:transform .3s var(--ease),background .3s,color .3s}
.btn05:hover{transform:translateY(-2px);background:var(--accent);color:#fff;box-shadow:none}
.btn05_bg{display:none}
.btn05_inner{display:inline-flex;align-items:center;overflow:hidden}
.btn05_text{display:block;padding:0;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.btn05_icon-wrap{display:flex;align-items:center;gap:5px;padding:0;flex-shrink:0}
.btn05_arrow{position:relative;width:11px;height:17px;flex-shrink:0}
.btn05_dot{position:absolute;top:calc(var(--r) * 3.8px);left:calc(var(--c) * 4.6px);
  width:2px;height:2px;border-radius:50%;background:rgba(0,0,0,.6)}
.btn05:hover .btn05_dot{background:rgba(255,255,255,.85)}
#hero .btn05,.c-PageHero .btn05,.cta-box .btn05{background:var(--ink);color:#fff}
#hero .btn05 .btn05_dot,.cta-box .btn05 .btn05_dot{background:rgba(255,255,255,.7)}
#hero .btn05:hover,.cta-box .btn05:hover{background:var(--accent);color:#fff}

/* Le bleu du hero doit porter sur le papier */
#hero .gradient-text,.cta-box .gradient-text{color:var(--accent)!important}


/* ─── LE HERO DE PAGE, DERNIERS AJUSTEMENTS ────────────────────────────── */
#hero{min-height:min(58svh,600px)!important;display:flex!important;flex-direction:column!important;
  justify-content:center!important;align-items:flex-start!important;text-align:left!important}
#hero>*:not(canvas){width:100%}
/* sur le papier, l'accent est le bleu plein, pas le bleu pâle */
#hero em,#hero .gradient-text,#hero .c-PageHero-title em,.cta-box em{
  color:var(--accent)!important;font-style:normal!important}


/* Un bouton ne deborde jamais de sa colonne */
.btn05{max-width:100%}
.btn05_text{white-space:normal;line-height:1.3}
.btn05_inner{min-width:0}

/* Le paragraphe d'intro d'un cas client reste du texte courant */
#hero .hero-sub{font-family:var(--display)!important;font-size:clamp(15px,1.4vw,18px)!important;
  letter-spacing:normal!important;text-transform:none!important;line-height:1.7;
  color:rgba(11,11,11,.72)!important;max-width:62ch}
#hero .hero-sub strong,#hero .hero-sub b{color:var(--ink)!important}


/* ─── INDEX DU BLOGUE ───────────────────────────────────────────────────── */
.blog-grid{padding:0!important;margin-bottom:var(--pad)}
.grid-inner{gap:var(--gap-c)!important;max-width:none!important;
  padding:0 0 clamp(24px,3vw,48px)}
.card{background:var(--card)!important;border-radius:var(--r-xl);overflow:hidden;
  padding:0 0 clamp(26px,2.8vw,38px)!important;gap:14px;
  transition:transform .45s var(--ease),background .45s}
.card:hover{background:var(--card-2)!important;transform:translateY(-4px)}
.card::after{display:none}
.card-cover{margin:0 0 8px!important;aspect-ratio:16/10;background:#E4E1DA}
.card>*:not(.card-cover){margin-left:clamp(24px,2.6vw,36px);margin-right:clamp(24px,2.6vw,36px)}
.card-meta{gap:12px}
.card-cat{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-lt)}
.card-date{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.card-title{font-size:clamp(18px,1.6vw,23px);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.card-title a{color:var(--text)}
.card:hover .card-title a{color:#fff}
.card-desc{font-size:14px;color:var(--muted);line-height:1.68}
.card-link{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.card:hover .card-link{color:var(--accent-lt)}
@media(max-width:600px){.card-cover{margin:0 0 6px!important}}


/* ─── LES POINTS DECORATIFS CEDENT LA PLACE A UNE FLECHE ────────────────── */
/* Les trois grappes de points venaient de l'ancien systeme : elles se font
   ecraser contre le libelle des que le bouton est etroit. Une fleche simple,
   comme sur les boutons de l'accueil, regle le probleme et unifie le site. */
.btn05_arrow{display:none}
.btn05_icon-wrap{display:inline-flex;align-items:center;flex-shrink:0;padding:0;
  font-size:14px;line-height:1}
.btn05_icon-wrap::after{content:'→';display:block;transition:transform .3s var(--ease)}
.btn05:hover .btn05_icon-wrap::after{transform:translateX(4px)}
.btn05{gap:14px;padding-right:22px}
.btn05_inner{flex:0 1 auto;min-width:0;overflow:visible}
.btn05_text{flex:0 1 auto}


/* ═══ CAS CLIENT ET AUTRES PAGES A VOCABULAIRE PROPRE ════════════════════ */

/* Les blocs de premier niveau doivent respirer, sinon les coins arrondis
   se touchent et la page se lit comme un seul pave. */
body>.hero,body>.sec,body>.statement,body>.split,body>.charts,body>.founder,
body>.cta-sec,body>.quote-block,body>.metrics-row,body>.photo-grid,
body>.article-cta,body>.article-related{
  border-radius:var(--r-xl);overflow:hidden;overflow:clip;margin-bottom:var(--pad)}
body>.cta-sec{margin-bottom:calc(var(--pad) * 2)}
body>.sec--low{background:var(--card-2)}

/* Les valeurs chiffrees etaient peintes avec un degrade sur du texte
   transparent. Le degrade a disparu avec l'ancienne palette : sans ce
   rattrapage, les chiffres sont invisibles. */
.hstat-val,.mcard-val,.who-fact-v,.ba-metric-val,.ba-metric-val--good,
.cmp-c--up,.quote-text strong,.blog-hero-title em,.cta-hed em,.sec-title em,
.nav-logo-text,.split-val,.in-val,.stat-value{
  background:none!important;background-image:none!important;
  -webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important}
.hstat-val,.mcard-val,.who-fact-v,.ba-metric-val{color:var(--text)!important}
.ba-metric-val--good,.cmp-c--up{color:var(--accent-lt)!important}
.quote-text strong,.sec-title em,.cta-hed em,.blog-hero-title em{color:var(--accent-lt)!important}

/* La bande de chiffres du cas client est sombre : elle ne doit pas heriter
   de l'encre du hero papier qui l'entoure. */
#hero .hero-stats,#hero .hero-stats *{color:var(--text)}
#hero .hstat-val{color:var(--text)!important}
#hero .hstat-label{color:var(--dim)!important}
#hero .hero-stats{border-radius:var(--r-lg);overflow:hidden}


/* ─── SIGNATURE ET DATE D'UN DOSSIER ────────────────────────────────────── */
.signe{display:flex;align-items:center;gap:14px;margin-top:clamp(26px,3vw,40px);
  padding-top:22px;border-top:1px solid var(--line-ink);position:relative;z-index:2}
.signe img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
.signe-n{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.signe-d{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(11,11,11,.45);margin-top:5px;line-height:1.6}
.signe-d sup{font-size:.7em}