/* =====================================================================
   UTOPIA SPORT — Thème v9 « Cream broadsheet, dark velvet chambers » — Wispr Flow pur, version finale
   D'après la fiche Refero « Wispr Flow » : canevas crème #ffffeb, chambres noires
   #1a1a1a aux angles 40-80 px, titres EB Garamond 400 qui s'imposent par la taille,
   Figtree pour tout le reste, lavande #f0d7ff pour l'action principale, vert forêt
   #034f46 pour les badges, orange braise #ffa946 pour les états actifs, bordures
   2 px encre, aucune ombre. Chargé après style.css et theme-v7.css (structure).
   ===================================================================== */

:root {
  --cream: #ffffeb; --stone: #e4e4d0; --fog: #8a8a80; --char: #222222;
  --vast: #1a1a1a; --lav: #f0d7ff; --forest: #034f46; --ember: #ffa946;
  --bg: var(--cream); --bg-2: var(--cream); --bg-3: var(--stone);
  --ink: var(--vast); --text: var(--vast); --text-2: var(--char); --text-3: var(--fog);
  --line: var(--vast); --line-strong: var(--vast);
  --blue: var(--forest); --blue-2: #046b5e; --link: var(--vast);
  --font: "Figtree", "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  --font-serif: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  --r: 32px; --r-sm: 32px; --r-room: clamp(32px, 6vw, 80px);
  --shadow: none; --ambient: none;
}
html { background: var(--cream); }
body { background: var(--cream); color: var(--vast); font-family: var(--font); font-size: 16px; line-height: 1.3; letter-spacing: 0; }
::selection { background: var(--lav); color: var(--vast); }
a.link-arrow, .faq-a a, .footer li a:hover { color: inherit; text-decoration: underline; }

/* ---------- Typographie : serif 400 à grande taille, sans pour tout le reste ---------- */
.display { font-family: var(--font-serif); font-weight: 400; line-height: .95; letter-spacing: -0.02em; text-wrap: balance; }
.h1 { font-size: clamp(3.2rem, 8.6vw, 7.5rem); line-height: .88; letter-spacing: -0.03em; font-weight: 400; }
.h2 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); line-height: .95; letter-spacing: -0.03em; }
.h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.05; }
.h4 { font-family: var(--font); font-weight: 600; font-size: 1.2rem; line-height: 1.25; letter-spacing: 0; }
.display em, .h2 em, .h3 em { font-style: italic; color: var(--fog); }
.hero .h1 em { color: var(--vast); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 30 2, 60 11, 90 6 S 150 3, 198 7' fill='none' stroke='%23f0d7ff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .18em; padding-bottom: .04em; }
/* le soulignement se dessine comme un coup de crayon, de gauche à droite, juste après la montée des mots du titre */
.hero .h1 em { --uh: .18em; background-size: 0% var(--uh); transition: background-size 1.05s cubic-bezier(.55, .05, .25, 1); }
.hero .h1.drawn em { background-size: 100% var(--uh); }
@media (prefers-reduced-motion: reduce) { .hero .h1 em { transition: none; background-size: 100% var(--uh); } }
.lead { font-family: var(--font); font-weight: 400; font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.3; color: var(--char); letter-spacing: 0; }
strong { font-weight: 600; color: inherit; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 9999px; background: var(--forest); color: var(--cream); font-family: var(--font); font-weight: 500; font-size: .86rem; letter-spacing: 0; text-transform: none; }
.eyebrow::before { display: none; }
.section-head { gap: 20px; }
.section-head > div { gap: 20px; }
.muted, .price-note, .proof-line, .breadcrumb, .score-label, .feat span, .chapter p, .dstep p, .mstep p, .pipe p, .plan .sub, .svc p, .faq-a p, .range label, .field label { color: var(--char); }
.proof-line span::before { color: var(--forest); }

/* ---------- Boutons : 12 px, bordure 2 px encre, lavande pour l'action principale ---------- */
.btn { border-radius: 12px; border: 2px solid var(--vast); font-family: var(--font); font-weight: 500; font-size: 1rem; letter-spacing: 0; padding: 14px 24px; min-height: 52px; box-shadow: none !important; --bg: var(--cream); --fg: var(--vast); transition: transform .2s, background .2s; }
.btn::before, .btn::after { display: none !important; }
.btn:hover { transform: translateY(-2px); background: var(--stone); }
.btn-blue { --bg: var(--lav); --fg: var(--vast); }
.btn-blue:hover { background: #e9c6ff; }
.btn-ghost { --bg: var(--cream); --fg: var(--vast); border-color: var(--vast); }
.btn-ghost:hover { background: var(--stone); }
.btn-lg { min-height: 58px; padding: 16px 28px; font-size: 1.05rem; }
.bone .btn, .dark .btn, .rule-box .btn, .cta-final .btn, .diag-result .btn, .footer .btn, .hscroll.room .btn { border-color: var(--cream); --bg: transparent; --fg: var(--cream); }
.bone .btn:hover, .dark .btn:hover, .cta-final .btn:hover, .rule-box .btn:hover, .diag-result .btn:hover { background: rgba(255,255,235,.12); }
.bone .btn-blue, .dark .btn-blue, .cta-final .btn-blue, .rule-box .btn-blue, .diag-result .btn-blue { --bg: var(--lav); --fg: var(--vast); border-color: var(--lav); }
.bone .btn-blue:hover, .cta-final .btn-blue:hover { background: #e9c6ff; }
.link-arrow { font-family: var(--font); font-weight: 500; font-size: 1rem; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.link-arrow svg { display: none; }

/* ---------- Navigation : pilule crème flottante, bordure 2 px ---------- */
.nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); width: min(calc(100% - 32px), 1200px); max-width: none; min-height: 0; padding: 8px 8px 8px 20px; border-radius: 9999px; border: 2px solid var(--vast); border-bottom: 2px solid var(--vast); background: var(--cream) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.nav.scrolled { background: var(--cream) !important; }
.nav.hide { transform: translateX(-50%) translateY(-140%); }
.nav-links a { font-family: var(--font); font-weight: 500; font-size: .95rem; color: var(--char); opacity: 1; padding: 8px 12px; border-radius: 9999px; }
.nav-links a:hover, .nav-links a.active { color: var(--vast); background: var(--stone); }
.nav .btn { min-height: 40px; padding: 8px 16px; font-size: .9rem; border-width: 2px; }
.nav .btn-ghost { background: var(--cream); }
.nav-group { color: var(--char); }
.nav-group small { color: var(--fog); }
.burger { border: 2px solid var(--vast); background: var(--cream); }
.burger span { background: var(--vast); }
.mobile-menu { background: var(--cream); color: var(--vast); }
.mobile-menu a:not(.btn) { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; border-bottom: 2px solid var(--vast); }
.mobile-menu a small { color: var(--fog); }
.mobile-menu .btn-blue { --bg: var(--lav); --fg: var(--vast); border-color: var(--vast); }

/* ---------- Chambres : les sections grises deviennent des salles noires arrondies ---------- */
.section.bone { background: var(--vast); color: var(--cream); --bg: var(--vast); --bg-2: #262626; --bg-3: #333; --text: var(--cream); --text-2: rgba(255,255,235,.82); --text-3: rgba(255,255,235,.6); --line: rgba(255,255,235,.25); --line-strong: rgba(255,255,235,.4); border-radius: var(--r-room); margin: 16px; }
.section.bone .muted, .section.bone .price-note, .section.bone .proof-line, .section.bone .lead, .section.bone .score-label, .section.bone .chapter p, .section.bone .dstep p, .section.bone .mstep p, .section.bone .svc p, .section.bone .faq-a p, .section.bone .plan .sub, .section.bone .range label, .section.bone .field label, .section.bone .quote footer span { color: rgba(255,255,235,.82); }
.section.bone .display em, .section.bone .h2 em { color: var(--lav); }
.section.bone .eyebrow { background: var(--forest); color: var(--cream); }
.section.bone .h3, .section.bone .h4 { color: var(--cream); }
.rule-box, .diag-result, .cta-final, .footer { background: var(--vast); color: var(--cream); }
.cta-final { border-radius: var(--r-room); margin: 16px; }
.cta-final .glow { display: none; }
.cta-final .display em, .rule-box .display em { color: var(--lav); }
.cta-final .eyebrow, .rule-box .eyebrow, .diag-result .eyebrow { background: var(--forest); color: var(--cream); }
.cta-final .lead, .rule-box .lead { color: rgba(255,255,235,.82); }
.rule-box { border-radius: 40px; }
.rule-box::before { display: none; }
.commission div { background: var(--forest); border-radius: 24px; border: 0; box-shadow: none !important; }
.commission b, .commission div:last-child b { color: var(--cream); }
.commission small { color: rgba(255,255,235,.7); }
.hscroll { background: var(--cream); }
.manifesto { background: var(--vast); }

/* ---------- Cartes : crème, 32 px, bordure 2 px, aucune ombre ---------- */
.plan, .svc, .quote, .mstep, .faq-item, .feat, .chapter, .pipe, .scoreboard > div, .diag-panel, .problem, .contact-grid div, .case, .plan-toggle, .group-card, .pillar, .mock, .form, .seg { border-radius: 32px; box-shadow: none !important; background: var(--cream); border: 2px solid var(--vast); color: var(--vast); }
.section:not(.bone) .plan, .section:not(.bone) .svc, .section:not(.bone) .quote, .section:not(.bone) .mstep, .section:not(.bone) .faq-item, .section:not(.bone) .chapter, .section:not(.bone) .problem, .section:not(.bone) .case, .section:not(.bone) .pipe, .section:not(.bone) .scoreboard > div, .feat { background: var(--cream) !important; box-shadow: none !important; }
.section.bone .plan, .section.bone .svc, .section.bone .quote, .section.bone .mstep, .section.bone .faq-item, .section.bone .chapter, .section.bone .problem, .section.bone .case, .section.bone .diag-panel, .section.bone .feat, .section.bone .pillar, .section.bone .plan-toggle { background: var(--cream) !important; border-color: var(--cream); color: var(--vast); --text: var(--vast); --text-2: var(--char); --text-3: var(--fog); --line: rgba(26,26,26,.15); }
.section.bone .plan .sub, .section.bone .svc p, .section.bone .faq-a p, .section.bone .mstep p, .section.bone .chapter p, .section.bone .quote footer span, .section.bone .range label, .section.bone .field label, .section.bone .diag-panel .muted { color: var(--char); }
.section.bone .plan .h3, .section.bone .plan .h4, .section.bone .svc .h3, .section.bone .mstep .h3, .section.bone .faq-q, .section.bone .quote p, .section.bone .chapter .h4 { color: var(--vast); }
.plan.featured, .section.bone .plan.featured { background: var(--forest) !important; border-color: var(--forest); color: var(--cream); --text: var(--cream); --text-2: rgba(255,255,235,.85); --text-3: rgba(255,255,235,.7); --line: rgba(255,255,235,.25); }
.plan.featured .sub, .plan.featured li, .plan.featured .h3, .section.bone .plan.featured .h3, .section.bone .plan.featured .sub { color: var(--cream); }
.plan.featured .btn { border-color: var(--cream); --bg: var(--cream); --fg: var(--vast); }
.plan .badge { background: var(--ember); color: var(--vast); border-radius: 9999px; font-weight: 600; }
.plan .name, .svc .num, .pillar-num, .pipe .step, .dstep .num, .mstep .num, .case-body .eyebrow, .chapter-num { color: var(--forest); font-weight: 600; }
.plan.featured .name { color: rgba(255,255,235,.8); }
.plan li::before, .include li::before, .check-list li::before, .feat b::before { color: var(--forest); }
.plan.featured li::before { color: var(--cream); }
.price { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; }
.plan .price span { color: var(--fog); }
.tag { border-radius: 9999px; background: transparent; border: 1.5px solid currentColor; color: inherit; font-weight: 500; box-shadow: none !important; padding: 6px 12px; }
.plan.featured .tag, .pipe.lit .tag { border-color: rgba(255,255,235,.5); }
.svc { border-radius: 32px; }
.svc:hover, .plan:hover, .case:hover, .quote:hover, .mstep:hover, .problem:hover { transform: none; }
.quote footer i { background: var(--forest); color: var(--cream); border-radius: 50%; }
.quote p::before, .quote p::after { color: var(--forest); }
.faq-q { font-family: var(--font); font-weight: 500; }
.faq-item { border-radius: 24px; }
.pipe { border: 2px solid var(--vast); }
.pipe .ico { border-radius: 14px; background: var(--stone); border: 0; box-shadow: none; }
.pipe.lit, .section:not(.bone) .pipe.lit, .hscroll .pipe.lit { background: var(--vast) !important; color: var(--cream); border-color: var(--vast); }
.pipe.lit .ico { background: var(--ember); color: var(--vast); }
.pipe.lit p { color: rgba(255,255,235,.8); }
.pipe.lit .step span:first-child { color: var(--ember); }
.hline { background: var(--stone); }
.hline i { background: var(--vast); }

/* Pilier « Deux moteurs » et maquettes */
.pillar { border-radius: 40px; overflow: hidden; }
.pillar-media { border-radius: 0; }
.mock-wrap { background: var(--stone); }
.mock { border-radius: 24px; box-shadow: none !important; border: 2px solid var(--vast); }
.mock-row, .mock-kpis div, .mock-toc div { background: var(--stone); border-radius: 12px; }
.mock-cal, .mock-btn { background: var(--lav); color: var(--vast); border-radius: 12px; border: 2px solid var(--vast); }
.mock-cal small { color: var(--char); opacity: 1; }
.mock-cal-ic { background: var(--vast); color: var(--cream); border-radius: 8px; }
.mock-dot { background: var(--ember); box-shadow: 0 0 0 3px rgba(255,169,70,.25); }
.mock-toc i, .mock-share { color: var(--forest); }
.mock-share { background: var(--stone); }
.mock-hero { background: var(--vast); border-radius: 16px; }
.mock-hero b { font-family: var(--font-serif); font-weight: 400; font-size: 1.25rem; }
.mock-offers span { border-radius: 9999px; border: 1.5px solid var(--vast); }
.mock-offers span.on { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.mock-bars i { background: var(--forest); }

/* Chapitres / tuiles de la plaquette, étapes de la méthode */
.chapter { min-height: 0; }
.chapter-num { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.4rem, 3.4vw, 3.2rem); color: var(--forest); }
.feat { border-radius: 24px; }
.feat b { font-weight: 600; }
.mstep .num { color: var(--forest); }

/* Photos et tuiles chiffrées : 32-40 px, bordure fine encre */
.hero-visual, .page-hero .hero-media { border-radius: 40px; box-shadow: none !important; border: 2px solid var(--vast); }
.stat-tile, .case-tile { border-radius: 40px; }
.stat-tile { background-color: var(--vast); color: var(--cream); }
.stat-tile b { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.6rem, 4.4vw, 4.4rem); }
.stat-tile b::before { background: var(--lav); }
.stat-tile small { color: rgba(255,255,235,.75); }
.section.bone .stat-tile:not(.has-photo) { background-color: var(--forest); }
.case-big b { font-family: var(--font-serif); font-weight: 400; }
.case-tile { background: var(--stone); }
.case-tile .meta .tag { background: var(--cream); border-color: var(--vast); }
.case { border-radius: 40px; overflow: hidden; }

/* Hero : centré, titre géant, deux tons */
.hero { padding-top: clamp(140px, 16vw, 200px); }
.hero .h1 { max-width: 12ch; font-size: clamp(3.4rem, 9vw, 8rem); }
.hero .lead { max-width: 46ch; color: var(--char); font-size: clamp(1.15rem, 1.5vw, 1.35rem); }
.chip { font-family: var(--font); font-weight: 500; font-size: .9rem; padding: 8px 16px; border-radius: 9999px; background: var(--forest); color: var(--cream); border: 0; box-shadow: none !important; }
.chip i { display: inline-block !important; background: var(--ember); animation: none; }
.hero-visual { border-radius: 40px; }
.page-hero .h1 { max-width: 14ch; }
.page-hero .breadcrumb { font-family: var(--font); color: var(--fog); }
.page-hero .contact-grid div { background: var(--cream); border: 2px solid var(--vast); border-radius: 24px; }
.page-hero .contact-grid small { color: var(--fog); }

/* Chiffres clés : cartes crème à bordure, chiffres en serif */
.scoreboard > div { border-radius: 32px; }
.score { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.03em; font-size: clamp(2.6rem, 3.6vw, 4rem); }
.score .pre, .score .unit { color: var(--forest); }
.score-label { font-weight: 500; color: var(--vast); }

/* Bandeau logos : gris pierre */
.logos-strip .logos-label { color: var(--fog); font-family: var(--font); }
.logos-marquee .lg img { opacity: .55; }

/* Simulateur : panneau crème, résultat vert forêt */
.seg { background: var(--stone); border: 0; border-radius: 9999px; }
.seg-ind { background: var(--cream); border: 2px solid var(--vast); box-shadow: none !important; }
.seg-btn { font-family: var(--font); font-weight: 500; color: var(--char); }
.seg-btn.on { color: var(--vast); }
.seg-sm .seg-ind { border-width: 1.5px; }
.range output { color: var(--forest); }
input[type=range]::-webkit-slider-thumb { border: 2px solid var(--vast); background: var(--lav); box-shadow: none; }
input:not([type=range]), select, textarea { border-radius: 12px !important; border: 2px solid var(--vast) !important; background: var(--cream) !important; box-shadow: none !important; color: var(--vast); }
input:not([type=range]):focus, select:focus, textarea:focus { border-color: var(--forest) !important; box-shadow: 0 0 0 4px rgba(3,79,70,.15) !important; }
.choices label { border-radius: 9999px; border: 2px solid var(--vast); background: var(--cream); }
.choices input:checked + span, .choices label:has(input:checked) { background: var(--lav); }
.diag-result { background: var(--forest); color: var(--cream); border-radius: 32px; --text: var(--cream); --text-2: rgba(255,255,235,.85); --text-3: rgba(255,255,235,.7); --line: rgba(255,255,235,.25); }
.diag-result .big { color: var(--cream); font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; }
.diag-result .row b { color: var(--cream); font-weight: 500; }
.diag-result .btn { border-color: var(--cream); --bg: var(--cream); --fg: var(--vast); }
.form { border: 0; padding: 0; background: transparent; }

/* Téléphone / showcase (si présent) */
.phone { box-shadow: none !important; border: 2px solid var(--vast); }

/* Tableau des tarifs */
.rate-table th { color: var(--fog); font-weight: 500; font-family: var(--font); }
.rate-table td, .rate-table th { border-color: var(--vast); }
.rate-table td:last-child { font-family: var(--font-serif); font-weight: 400; font-size: 1.3rem; }

/* CTA collant mobile */
.sticky-cta { background: var(--cream); border-top: 2px solid var(--vast); box-shadow: none !important; }

/* Pied de page : bande noire pleine largeur */
.footer { background: var(--vast); color: var(--cream); border-top: 0; margin-top: 16px; }
.footer h4 { color: var(--cream); font-family: var(--font); font-weight: 600; }
.footer li, .footer li a, .footer p { color: rgba(255,255,235,.75); }
.footer li a:hover { color: var(--cream); }
.footer .logo-img { mix-blend-mode: normal; background: #fff; padding: 6px 10px; border-radius: 12px; height: 44px; }
.footer .group-card { background: var(--forest); border: 0; color: var(--cream); }
.footer .group-card small, .footer .group-card span { color: rgba(255,255,235,.8); }
.footer .group-card b { color: var(--cream); }
.footer-bottom { border-top: 1px solid rgba(255,255,235,.2); color: rgba(255,255,235,.6); }
.footer-bottom a { color: rgba(255,255,235,.8); }

/* Titres de section : centrés mais corps de texte en mesure serrée */
.section-head .lead { max-width: 60ch; }

/* Correctifs de contraste après audit */
.eyebrow { width: fit-content; max-width: 100%; justify-self: center; text-align: center; line-height: 1.25; }
.diag-result { grid-template-columns: minmax(0, 1fr); }
.diag-result > * { min-width: 0; }
.diag-result .eyebrow { justify-self: start; text-align: left; }
.case-body .eyebrow { justify-self: start; color: var(--cream); }
.section.bone .svc .btn, .section.bone .chapter .btn, .section.bone .plan:not(.featured) .btn, .section.bone .diag-panel .btn, .svc .btn, .chapter .btn { --bg: var(--vast); --fg: var(--cream); border-color: var(--vast); }
.section.bone .svc .btn:hover, .svc .btn:hover, .section.bone .plan:not(.featured) .btn:hover { background: #333; }
.plan.featured .name, .plan.featured .price, .plan.featured .price span, .plan.featured li, .plan.featured .sub, .plan.featured .h3, .plan.featured .h4, .section.bone .plan.featured .name, .section.bone .plan.featured .price, .section.bone .plan.featured li, .section.bone .plan.featured .sub, .section.bone .plan.featured .h3 { color: var(--cream) !important; }
.plan.featured li.no, .section.bone .plan.featured li.no { color: rgba(255,255,235,.7) !important; }
.plan.featured li::before { color: var(--lav); }
.pipe .step span:last-child { color: var(--char); }
.pipe.lit .step span:last-child { color: rgba(255,255,235,.75); }
.cta-final .proof-line, .section.bone .proof-line, .rule-box .proof-line { color: rgba(255,255,235,.8); }
.cta-final .proof-line span::before, .section.bone .proof-line span::before { color: var(--lav); }
.footer p a { color: var(--cream) !important; }
.cta-final .contact-grid div { background: #272625; border: 0; }
.section.bone .stat-tile.has-photo { background-color: var(--vast); }

/* Correctifs audit 2 : carte mise en avant, formulaire sur fond noir, pipeline en grille sur fond noir */
.section .plan.featured, .section:not(.bone) .plan.featured, .section.bone .plan.featured, .plans .plan.featured, .plans-3t .plan.featured { background: var(--forest) !important; border-color: var(--forest) !important; color: var(--cream) !important; }
.plan.featured .badge { background: var(--ember); color: var(--vast); }
.section.bone .field label, .section.bone .form label, .section.bone .choices span, .section.bone .form .muted { color: var(--cream); }
.section.bone .choices span { background: #272625; color: var(--cream); border-color: rgba(255,255,235,.4); }
.section.bone .choices input:checked + span { background: var(--lav); color: var(--vast); border-color: var(--lav); }
.section.bone .check-list li::before { color: var(--lav); }
.section.bone .check-list li { color: var(--cream); }
.section.bone .pipeline .pipe, .section.bone .pipe { background: var(--cream) !important; color: var(--vast); border-color: var(--cream); }
.section.bone .pipe .h4, .section.bone .pipe p, .section.bone .pipe .step span:last-child { color: var(--vast); }
.section.bone .pipe p { color: var(--char); }
.section.bone .pipe.lit { background: var(--forest) !important; border-color: var(--forest); color: var(--cream); }
.section.bone .pipe.lit .h4, .section.bone .pipe.lit p, .section.bone .pipe.lit .step span:last-child { color: var(--cream); }
.section.bone .pipe.lit .ico { background: var(--ember); color: var(--vast); }
.compare > div { border-radius: 32px; }
.compare .before { background: #272625 !important; color: var(--cream); }
.compare .after { background: var(--forest) !important; }
.compare .after h4, .compare .after li::before { color: var(--lav); }
.compare .before h4 { color: rgba(255,255,235,.7); }
.compare .before li { color: var(--cream); }
.section.bone .h4 { color: inherit; }
.section.bone .diag-panel .field label, .section.bone .diag-panel label { color: var(--vast); }
.section.bone .choices label { background: transparent; border: 0; color: var(--cream); }

/* Simulateur : jamais plus large que l'écran (Figtree est plus large qu'Inter) */
.diag { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
@media (max-width: 960px) { .diag { grid-template-columns: minmax(0, 1fr); } }
.diag-panel, .diag-result { min-width: 0; }
.seg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.seg-btn { min-width: 0; }
.seg-btn span { overflow-wrap: anywhere; }
@media (max-width: 480px) { .seg-btn { font-size: .8rem; gap: 6px; padding: 8px 6px; } .seg-btn svg { width: 16px; height: 16px; } }

/* Méthode en colonne (page Plaquette web) : frise verticale, rail encre, pastille par étape */
.split .method { gap: 0 !important; position: relative; padding-left: 0; }
.split .method .mstep, .section.bone .split .method .mstep { background: transparent !important; border: 0 !important; border-radius: 0; padding: 4px 0 30px 40px !important; position: relative; box-shadow: none !important; display: grid; gap: 6px; }
.split .method .mstep::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: -6px; width: 2px; background: var(--vast); }
.split .method .mstep:last-child::before { bottom: auto; height: 14px; }
.split .method .mstep::after { content: ""; position: absolute; left: 0; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--lav); border: 2px solid var(--vast); box-sizing: border-box; }
.split .method .mstep:last-child::after { background: var(--ember); }
.split .method .mstep .num { display: inline-flex; width: fit-content; padding: 4px 10px; border-radius: 9999px; background: var(--forest); color: var(--cream); font-size: .78rem; font-weight: 500; margin-bottom: 4px; }
.split .method .mstep .h3 { font-size: clamp(1.35rem, 1.8vw, 1.7rem) !important; }
.split .method .mstep p { font-size: 1rem; }
.section.bone .split .method .mstep::before { background: var(--cream); }
.section.bone .split .method .mstep::after { border-color: var(--cream); }
.section.bone .split .method .mstep .h3, .section.bone .split .method .mstep p { color: var(--cream); }
.section.bone .split .stat-tile { align-self: start; position: sticky; top: 100px; }

/* FAQ : bouton « + » lisible partout (pastille lavande, croix encre ; ouvert = encre / croix crème) */
.faq-q .plus, .section.bone .faq-q .plus, .faq-item .plus { background: var(--lav) !important; color: var(--vast) !important; border: 2px solid var(--vast); width: 36px; height: 36px; }
.faq-item.open .plus, .section.bone .faq-item.open .plus { background: var(--vast) !important; color: var(--cream) !important; border-color: var(--vast); }
.faq-q .plus::before, .faq-q .plus::after { width: 14px; height: 2px; }
.faq-item.open { box-shadow: none !important; }

/* Hero : de l'air sous le titre souligné, sur tous les écrans */
.hero .wrap { gap: 26px; }
.hero .h1 { line-height: .95; margin-bottom: clamp(10px, 1.6vw, 22px); padding-bottom: .12em; }
.hero .h1 em { padding-bottom: .08em; background-position: 0 100%; --uh: .16em; }
.hero .lead { margin-top: 4px; }
.page-hero .h1 { line-height: .95; padding-bottom: .1em; }

/* Pipeline épinglé : actif sur tous les écrans (piste horizontale conservée sur tablette et téléphone) */
@media (max-width: 900px) {
  .htrack { flex-wrap: nowrap !important; width: max-content !important; padding-right: var(--gutter) !important; gap: 12px; }
  .htrack .pipe { width: min(360px, 78vw) !important; min-height: 0 !important; padding: 24px 22px 26px; }
  .hline { display: block !important; }
  .hscroll { padding-block: var(--section); }   /* plus de ligne de défilement : mêmes marges que les autres sections */
  .hscroll-head { padding-bottom: 22px; }
  .hscroll-head .h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .hscroll-head .lead { font-size: 1rem; }
}

/* Carte réalisation sur téléphone : la tuile photo prend la largeur de la carte, jamais plus */
@media (max-width: 900px) { .case.wide .case-media, .case .case-media { aspect-ratio: auto !important; height: 300px; width: 100%; min-width: 0; max-width: 100%; } }

/* Accueil, « Pas un PDF » : les 4 chapitres gardent leurs cartes ; les 8 atouts sont rangés dans UN seul cadre,
   en grille séparée par de fins filets (au lieu de 8 petites cartes encadrées : moins de boîtes, lecture plus claire) */
.feat-grid.feat-panel:last-child { margin-bottom: 0; }   /* dernier élément de sa section : l'espacement standard suffit */
.feat-grid.feat-panel { gap: 0; border: 2px solid var(--vast); border-radius: 32px; padding: 6px 10px; background: transparent; }
.feat-panel .feat { border: 0 !important; border-radius: 0; background: transparent !important; padding: 20px 22px; }
.feat-panel .feat:nth-child(n+5) { border-top: 1px solid rgba(26,26,26,.16) !important; }
.feat-panel .feat:not(:nth-child(4n+1)) { border-left: 1px solid rgba(26,26,26,.16) !important; }
@media (max-width: 1000px) {
  .feat-panel .feat:nth-child(n) { border-top: 0 !important; border-left: 0 !important; }
  .feat-panel .feat:nth-child(n+3) { border-top: 1px solid rgba(26,26,26,.16) !important; }
  .feat-panel .feat:nth-child(2n) { border-left: 1px solid rgba(26,26,26,.16) !important; }
}
@media (max-width: 560px) {
  .feat-panel .feat:nth-child(n) { border-left: 0 !important; border-top: 1px solid rgba(26,26,26,.16) !important; }
  .feat-panel .feat:first-child { border-top: 0 !important; }
  .feat-panel .feat { padding: 16px 12px; }
}

/* Encarts chiffrés avec boucle vidéo de fond (Réalisations, Prospection IA) : la vidéo remplit l'encart,
   la scène est en haut à droite, le chiffre reste sur l'aplat vert en bas à gauche.
   L'affiche = 1re image de la boucle : rien n'apparaît d'un coup quand la vidéo démarre. */
.stat-tile.has-video { position: relative; overflow: hidden; isolation: isolate; background: var(--forest) !important; background-image: none !important; }
.stat-tile.has-video > .tile-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 0%; z-index: -1; pointer-events: none; }
.stat-tile.has-video > b, .stat-tile.has-video > small { position: relative; }
/* même boucle dans la grande carte Réalisations de l'accueil : chiffre en bas à gauche, sur l'aplat, loin de la scène */
.case-tile.has-video { position: relative; overflow: hidden; isolation: isolate; background: var(--forest) !important; background-image: none !important; place-content: end start; text-align: left; }
.case-tile.has-video > .tile-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 0%; z-index: -1; pointer-events: none; }
.case-tile.has-video .case-big { justify-items: start; }
.case-tile.has-video .case-big b { color: var(--cream); }
.case-tile.has-video .case-big small { color: rgba(255,255,235,.8); }
.case:hover .case-media.has-video video, .case:hover .case-media.has-video img.tile-video { transform: none; }
@media (max-width: 900px) { .case-tile.has-video > .tile-video { object-position: 80% 0%; } }
@media (max-width: 560px) { .case-tile.has-video .meta { display: none; } }   /* téléphone : les étiquettes toucheraient la scène */
@media (max-width: 560px) { .stat-tile.has-video { min-height: 400px; } .stat-tile.has-video > .tile-video { object-position: 80% 0%; } }

/* Logos clients sous les témoignages (chambre sombre) : logos en crème, même défilement */
.quotes-logos { margin-top: clamp(44px, 5vw, 68px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid rgba(255,255,235,.14); display: grid; gap: 16px; justify-items: center; }
.quotes-logos .logos-label { color: rgba(255,255,235,.62); font-family: var(--font); font-size: .82rem; }
.quotes-logos .logos-marquee .lg img { filter: grayscale(1) brightness(0) invert(1); opacity: .62; }
.quotes-logos .logos-marquee .lg img:hover { opacity: .95; }

/* Accueil — rythme vertical : entre deux sections CLAIRES consécutives, aucun bord ne coupe l'espace,
   donc 2 × 102 px se lisent comme un seul vide deux fois plus grand qu'ailleurs (où le bord d'un bloc sombre
   partage l'espace en ~118 + ~102). On réduit le haut de la seconde : ~150 px sur ordinateur, ~100 px sur téléphone. */
main > .section:not(.bone):not(.cta-final) + .section:not(.bone):not(.cta-final),
main > .pin-spacer:has(> .section:not(.bone)) + .section:not(.bone):not(.cta-final) { padding-top: clamp(28px, 3.6vw, 52px); }
/* même rythme (≈148 px à 1280, ≈100 px sur téléphone) après l'en-tête d'une page et après une bande de chiffres clés */
main > .page-hero + .section:not(.bone):not(.cta-final) { padding-top: clamp(100px, 11.6vw, 172px); }
main > section.wrap[aria-label="Chiffres clés"] + .section:not(.bone):not(.cta-final) { padding-top: clamp(44px, 4.6vw, 64px); }
/* chiffres clés suivis d'un bloc sombre : même marge que toute autre section avant un bloc */
main > section[aria-label="Chiffres clés"]:has(+ .section.bone) { padding-bottom: var(--section) !important; }
/* une grille en dernière position n'ajoute pas de marge sous elle : l'espacement de la section suffit */
.chapters:last-child { margin-bottom: 0; }

/* Mobile : chambres moins arrondies, marges réduites */
@media (max-width: 700px) {
  .section.bone, .cta-final { border-radius: 32px; margin: 10px; }
  .nav { top: 10px !important; left: 10px !important; right: 10px !important; transform: none !important; width: auto !important; max-width: none !important; min-width: 0; padding: 6px 6px 6px 14px; box-sizing: border-box; }
  .nav.hide { transform: translateY(-140%); }
  .logo-img { height: 26px; }
  .hero .h1 { font-size: clamp(3rem, 15vw, 4.6rem); }
  .plan, .svc, .quote, .mstep, .chapter, .pipe, .scoreboard > div, .diag-panel, .case { border-radius: 24px; }
}

/* texte réservé aux lecteurs d'écran (et lu par les moteurs) : complète une ancre courte comme « Détails » */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }