/* ════════════════════════════════════════════════════════════════════
   VideoDevis — Design v2 "Brûlot"
   ════════════════════════════════════════════════════════════════════

   Override CSS appliqué APRÈS article.css pour faire évoluer la palette
   et la typographie du site vers l'identité éditoriale "Brûlot" :
   greige neutre + accent orange feu + signature rouge en touche unique.

   - Light mode (par défaut) : greige neutre #EDEAE2 sortie du chair
   - Dark mode (toggle) : charcoal warm #1A1816 chaud sans être noir pur
   - Typo : Plus Jakarta Sans (display 800) + Inter Tight (body) + JetBrains Mono

   Non-destructif : si on retire ce fichier, on retombe sur l'ancien design.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Fonts via Google Fonts (Plus Jakarta Sans / Inter Tight / JetBrains Mono) ─── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300..800&family=Inter+Tight:wght@300..700&family=JetBrains+Mono:wght@400..600&display=swap');

/* ════════════════════════════════════════════════════════════════════
   LIGHT MODE (par défaut) — palette "Brûlot papier"
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces : greige neutre, sortie du yaourt/chair */
  --bg:          #EDEAE2 !important;     /* greige neutre, presque sans jaune */
  --bg-alt:      #F5F3ED !important;     /* cards éclairées */
  --bg-elevated: #FFFFFF !important;     /* surfaces actives */
  --bg-elev:     #FFFFFF !important;
  --bg-section:  #E5E2DA !important;     /* sections alternatives */
  --bg-card:     #F5F3ED !important;
  --bg-code:     #E5E2DA !important;

  /* Encres */
  --text:        #1A1816 !important;     /* chocolat profond chaud */
  --text-muted:  #6B655B !important;  /* a11y : contraste 4.8:1 sur greige (était #807A70 = 3.5, sous AA) */
  --border:      #D6D1C5 !important;
  --border-soft: #E5E2DA !important;
  --border-hover:#B8B0A2 !important;

  /* Accent ORANGE feu (CTA, focus, liens actifs) */
  --accent:        #AD380D !important;
  --accent-dark:   #8F2E0A !important;
  --accent-light:  #FBEBE2 !important;
  --accent-tint:   rgba(230, 74, 25, 0.10) !important;
  --accent-glow:   rgba(230, 74, 25, 0.22) !important;
  --shadow-accent: 0 8px 24px rgba(230, 74, 25, 0.20) !important;

  /* Typographie */
  --font-sans: 'Inter Tight', 'Plus Jakarta Sans', -apple-system, 'Segoe UI', system-ui, sans-serif !important;
  --font-display: 'Plus Jakarta Sans', 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace !important;

  /* Alias pour variables utilisées par article.css mais nommées différemment.
     Sans ces alias, var(--text-2) → invalid → fallback `initial` → couleur
     système qui peut être BLANCHE en dark mode → texte invisible. */
  --text-2: #57534C !important;
  --muted: #57534C !important;
  --header-bg-blur: rgba(237, 234, 226, .84) !important;
  --scenario-bg: #F5F3ED !important;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);
  /* Couleurs sémantiques pour callouts info/succès (utilisées par article.css) */
  --blue-bg: #EBF1F8 !important;
  --blue-border: #C5D5E8 !important;
  --blue-text: #1E4A72 !important;
  --green-bg: #EAF5EC !important;
  --green-border: #C2E0CA !important;
  --green-text: #1F6B3A !important;
  /* Couleur de surface inversée (utilisé par .btn-cta) */
  --white: #FFFFFF !important;
  --border2: #B8B0A2 !important;
  --text-text2: #57534C !important;
  --shadow: 0 1px 2px rgba(10,10,11,.04), 0 1px 1px rgba(10,10,11,.03) !important;
  --shadow-md: 0 4px 12px rgba(10,10,11,.08), 0 2px 4px rgba(10,10,11,.05) !important;
  --shadow-sm: 0 1px 2px rgba(10,10,11,.04) !important;
  --shadow-xs: 0 1px 1px rgba(10,10,11,.03) !important;
  --shadow-lg: 0 16px 32px -8px rgba(10,10,11,.10), 0 4px 8px rgba(10,10,11,.05) !important;
  --font: 'Inter Tight', 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif !important;
  /* Variables manquantes (utilisées par article.css mais jamais définies → blanc sur blanc) */
  --text-3: #6B655B !important;   /* a11y AA (5.2:1 sur card) — était #807A70 (3.8, sous AA). hero-subtitle/eyebrow/toc */
  --stat-color: #57534C !important;
  --violet-bg: #EEEAF5 !important;
  --violet-border: #C8BDE0 !important;
  --violet-text: #5B3B8C !important;
  --yellow-bg: #FBF6E5 !important;
  --scenario-border: #D6D1C5 !important;
  --scenario-check: #E64A19 !important;
  --scenario-color: #57534C !important;
  --scenario-icon-bg: #FBEBE2 !important;
}

/* ════════════════════════════════════════════════════════════════════
   DARK MODE (toggle) — palette "Brûlot charcoal"
   ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:          #1A1816 !important;     /* charcoal chaud, pas noir */
  --bg-alt:      #232120 !important;
  --bg-elevated: #2A2724 !important;
  --bg-elev:     #2A2724 !important;
  --bg-section:  #0E0D0C !important;
  --bg-card:     #232120 !important;
  --bg-code:     #0E0D0C !important;

  --text:        #F5F1ED !important;     /* off-white chaud */
  --text-muted:  #A8A39C !important;
  --border:      #2F2C29 !important;
  --border-soft: #232120 !important;
  --border-hover:#45413D !important;

  --accent:        #FF5722 !important;   /* orange plus saturé en dark */
  --accent-dark:   #E64A19 !important;
  --accent-light:  #2A1F14 !important;
  --accent-tint:   rgba(255, 87, 34, 0.14) !important;
  --accent-glow:   rgba(255, 87, 34, 0.26) !important;
  --shadow-accent: 0 8px 24px rgba(255, 87, 34, 0.28) !important;

  /* Alias dark : mêmes vars que light mais valeurs adaptées */
  --text-2: #A8A39C !important;
  --muted: #A8A39C !important;
  --header-bg-blur: rgba(26, 24, 22, .84) !important;
  --scenario-bg: #232120 !important;
  --blue-bg: #1A2738 !important;
  --blue-border: #2C3E5C !important;
  --blue-text: #9DBFE0 !important;
  --green-bg: #182A1F !important;
  --green-border: #2D4A36 !important;
  --green-text: #95C9A5 !important;
  --white: #232120 !important;       /* "white" en dark = bg-alt sombre (pour btn-cta inversé) */
  --border2: #2F2C29 !important;
  /* Dark mode : alias manquants pour bonne lisibilité */
  --text-3: #A8A39C !important;   /* a11y AA dark (6.6:1 sur #232120) — était #807A70 (3.76) */
  --stat-color: #A8A39C !important;
  --violet-bg: #1F1A2A !important;
  --violet-border: #3D2E5C !important;
  --violet-text: #B8A5E0 !important;
  --yellow-bg: #2A2510 !important;
  --scenario-border: #2F2C29 !important;
  --scenario-check: #FF5722 !important;
  --scenario-color: #A8A39C !important;
  --scenario-icon-bg: #2A1F14 !important;
}

/* ════════════════════════════════════════════════════════════════════
   AJUSTEMENTS COMPOSANTS — application des nouveaux tokens
   ════════════════════════════════════════════════════════════════════ */

/* Body / typo de base — Inter Tight prend le relais */
body {
  font-family: var(--font-sans);
}

/* Display headings — Plus Jakarta Sans */
h1, h2, h3, .hero-title, .article-title {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}
h1, .hero-title, .article-title { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }

/* Code, prix, données numériques — JetBrains Mono */
code, pre, kbd, samp,
[class*="price"], [class*="tjm"], [class*="number"],
.tco-line, .tco-total {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Bouton primary — flat moderne, pas botox */
.btn-primary, .btn--primary, button[type="submit"],
.cta-primary, .calc-cta {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
  border: 0 !important;
  transition: background 0.18s ease, transform 0.12s ease;
}
.btn-primary:hover, .btn--primary:hover, button[type="submit"]:hover,
.cta-primary:hover, .calc-cta:hover {
  background: var(--accent-dark) !important;
}
.btn-primary:active, .btn--primary:active, button[type="submit"]:active,
.cta-primary:active, .calc-cta:active {
  transform: scale(0.98);
}

/* Header / nav — alignement palette */
header, .site-header {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border-bottom: 1px solid var(--border);
}

/* Liens éditoriaux dans le body */
.article-content a,
main p a, main li a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-content a:hover {
  color: var(--accent-dark);
}

/* Selection */
::selection {
  background: var(--accent);
  color: #fff;
}

/* Footer — palette tonale */
footer, .article-footer, .site-footer {
  background: var(--bg-section);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════════
   FIX BUGS visuels post-déploiement
   ════════════════════════════════════════════════════════════════════ */

/* Fix dégradé .hero::before — étendre à 100% (bord visible en dark sinon) */
.hero {
  background: var(--bg) !important;
}
.hero::before {
  width: 100vw !important;
  max-width: none !important;
  height: 100% !important;
  top: 0 !important;
  background:
    radial-gradient(ellipse 50% 60% at 30% 40%, var(--accent-tint) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 70% 30%, rgba(230, 74, 25, 0.06) 0%, transparent 70%) !important;
  opacity: 0.7 !important;
}
[data-theme="dark"] .hero::before {
  opacity: 0.55 !important;
}

/* Fix padding scenario : le .scenario-list n'avait PAS de padding horizontal
   (les li commençaient à 27px du bord). On en ajoute pour vraie respiration */
.scenario-header { padding: 1.6rem 1.9rem 1.3rem !important; }
.scenario-list {
  padding: 0.6rem 1.9rem 0.8rem !important;
  margin: 0 !important;
}
.scenario-list li {
  padding: 0.5rem 0 0.5rem 2rem !important;
  font-size: 0.95rem !important;
}
.scenario-list li::before {
  left: 0 !important;
  width: 18px !important;
  height: 18px !important;
  background-size: 13px !important;
  top: 0.85rem !important;
}
.scenario-note {
  margin: 0 1.9rem 1.5rem !important;
  padding: 0.85rem 1.1rem !important;
}

/* Article hero compact : doit tenir au-dessus du fold + montrer le début de l'article */
.article-hero {
  padding: 1.8rem 1.5rem 1.2rem !important;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.article-hero .hero-eyebrow {
  font-size: 0.7rem !important;
  margin-bottom: 0.7rem !important;
}
.article-hero h1 {
  font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.2 !important;
}
.article-hero .hero-subtitle {
  font-size: clamp(0.9rem, 1.3vw, 1.05rem) !important;
  margin-bottom: 0.8rem !important;
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}
.article-hero .hero-meta {
  font-size: 0.75rem !important;
  gap: 0.5rem 1rem !important;
}

/* Comparaison/TCO tables — meilleure lisibilité en dark */
[data-theme="dark"] .comparison-table {
  background: var(--bg-alt) !important;
}
[data-theme="dark"] .comparison-table th {
  background: var(--bg-section) !important;
  color: var(--text-muted) !important;
}
[data-theme="dark"] .comparison-table .row-criteria {
  background: var(--bg-section) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .comparison-table td,
[data-theme="dark"] .comparison-table th {
  border-color: var(--border) !important;
}
[data-theme="dark"] .verdict-block,
[data-theme="dark"] .tco-card {
  background: var(--bg-alt) !important;
  border-color: var(--border) !important;
}

/* ════════════════════════════════════════════════════════════════════
   OVERRIDES POUR PAGES AVEC CSS INLINE (couleurs hardcodées)
   ────────────────────────────────────────────────────────────────────
   Les 9 pages suivantes n'utilisent pas les variables CSS d'article.css
   mais des hexcodes en dur dans leur <style> inline :
   - index.html, qui-sommes-nous, methodologie, donnees-marche
   - mentions-legales, politique-confidentialite, brief-video
   - calculateur-tjm-freelance, calculateur-marge-mission

   On override les sélecteurs génériques avec !important pour propager
   la palette Brûlot sans toucher au CSS d'origine.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Light mode : sortie du blanc/slate, passage au greige Brûlot ─── */
body {
  margin: 0 !important;
  background: #EDEAE2 !important;
  color: #1A1816 !important;
  font-family: 'Inter Tight', 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif !important;
}
/* scrollbar-gutter: stable réserve toujours la place du scrollbar même quand
   il n'apparaît pas → évite le saut horizontal de 15-17px entre pages courtes
   et pages longues qui décalait la navbar à chaque navigation */
html {
  margin: 0 !important;
  padding: 0 !important;
  scrollbar-gutter: stable !important;
}
/* Header background : exclure la home (body.on-landing) qui a son propre
   liquid glass sticky avec backdrop blur — on casserait son effet sinon */
body:not(.on-landing) header,
body:not(.on-landing) .site-header {
  background: #F5F3ED !important;
  border-color: #D6D1C5 !important;
}
/* Logo couleur : un cran plus douce que pur orange (#ea580c) pour respecter
   la palette Brûlot, mais pas trop criard sur fond noir */
header .logo,
.logo,
.brand,
.site-logo {
  color: #C53D14 !important;
}
h1, h2, h3, h4, h5, h6 {
  color: #1A1816 !important;
  font-family: 'Plus Jakarta Sans', 'Inter Tight', system-ui, sans-serif !important;
}
p, li, dd, label, td, th {
  color: #1A1816 !important;
}
.updated,
.text-muted,
.subtitle,
nav.breadcrumb,
nav.breadcrumb a,
nav.breadcrumb span,
footer,
.footer-meta {
  color: #807A70 !important;
}
.card,
.box,
.panel,
.section-card,
section.box {
  background: #F5F3ED !important;
  border-color: #D6D1C5 !important;
}
a:not(.logo):not(.brand):not(.btn):not(.cta-primary):not(.btn-primary):not(.btn-cta):not(.hub-toc-link) {
  color: var(--accent) !important; /* AA : #AD380D (light) / #FF5722 (dark) */
}
footer,
.site-footer {
  background: #E5E2DA !important;
  border-color: #D6D1C5 !important;
}

/* ─── Dark mode : palette charcoal Brûlot ─── */
[data-theme="dark"] body {
  background: #1A1816 !important;
  color: #F5F1ED !important;
}
/* Header background dark : on exclut aussi la home (liquid glass à préserver) */
[data-theme="dark"] body:not(.on-landing) header,
[data-theme="dark"] body:not(.on-landing) .site-header {
  background: #232120 !important;
  border-color: #2F2C29 !important;
}
/* Logo dark : orange plus chaud mais pas criard (entre vif et doux) */
[data-theme="dark"] header .logo,
[data-theme="dark"] .logo,
[data-theme="dark"] .brand {
  color: #F97316 !important;
}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #F5F1ED !important;
}
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] dd,
[data-theme="dark"] label,
[data-theme="dark"] td,
[data-theme="dark"] th {
  color: #F5F1ED !important;
}
[data-theme="dark"] .updated,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .subtitle,
[data-theme="dark"] nav.breadcrumb,
[data-theme="dark"] nav.breadcrumb a,
[data-theme="dark"] footer,
[data-theme="dark"] .footer-meta {
  color: #A8A39C !important;
}
[data-theme="dark"] .card,
[data-theme="dark"] .box,
[data-theme="dark"] .panel,
[data-theme="dark"] section.box {
  background: #232120 !important;
  border-color: #2F2C29 !important;
}
/* Liens dans la nav header : on laisse le CSS d'origine de chaque page gérer
   leur style (déjà bien fait, avec backgrounds rounded + halos contextuels).
   On override seulement les liens éditoriaux DANS le contenu, pas dans les nav. */
[data-theme="dark"] main p a,
[data-theme="dark"] main li a,
[data-theme="dark"] .article-content a {
  color: #FF5722 !important;
}
main p a,
main li a,
.article-content a {
  color: var(--accent) !important; /* AA : #AD380D (light) / #FF5722 (dark) */
}
[data-theme="dark"] footer,
[data-theme="dark"] .site-footer {
  background: #0E0D0C !important;
  border-color: #2F2C29 !important;
}

/* Force header sur une seule ligne (logo gauche / nav droite).
   Spécificité maximale (html body header .header-inner) pour battre les
   <style> inline avec !important. Exclut la home (on-landing). */
html body:not(.on-landing) header .header-inner,
html body:not(.on-landing) .site-header .header-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
}
html body:not(.on-landing) header .header-inner > .logo,
html body:not(.on-landing) header .header-inner > a.logo {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
html body:not(.on-landing) header .header-inner > nav,
html body:not(.on-landing) header .header-inner > nav.main-nav,
html body:not(.on-landing) header .header-inner > nav.breadcrumb {
  flex: 0 1 auto !important;
  margin-left: auto !important;
  font-size: 0.85rem !important;
}
html body:not(.on-landing) header .header-inner > .header-left {
  flex: 1 1 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

/* Désactive l'effet fade-in/reveal au scroll sur les sections d'article
   (article.js applique .is-visible via IntersectionObserver).
   User feedback : "on dirait un bug ou qu'il n'y a pas plus de contenu" */
main section,
main section.is-visible,
main > section {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  visibility: visible !important;
}

/* ════════════════════════════════════════════════════════════════════
   HOME v3 — landing éditoriale Brûlot (sans vidéo hero)
   Override des styles body.on-landing qui ciblaient la vidéo (blanc + halo)
   ════════════════════════════════════════════════════════════════════ */

/* Désactive les anciens styles vidéo-related sur la landing v3 */
.landing-v3 .hero-video { display: none !important; }
body.on-landing .landing-v3 { background: transparent !important; min-height: auto !important; }
/* Nav header en mode landing : retour à couleur normale (plus de halo blanc sur vidéo) */
body.on-landing nav.main-nav a {
  color: inherit !important;
  text-shadow: none !important;
}
body.on-landing nav.main-nav a:hover {
  background: var(--accent-light, #FBEBE2) !important;
  color: var(--accent, #E64A19) !important;
  text-shadow: none !important;
}
[data-theme="dark"] body.on-landing nav.main-nav a {
  color: #CDC5BC !important;
}

/* Landing v3 — layout */
.landing-v3 {
  padding: 3.5rem 1.5rem 4.5rem;
  background: var(--bg);
  color: var(--text, #1A1816);
  position: relative;
  overflow: hidden;
  min-height: auto;
}
.landing-v3::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 35% at 22% 28%, rgba(230,74,25,.08), transparent 70%),
    radial-gradient(ellipse 38% 30% at 78% 65%, rgba(185,28,28,.06), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .landing-v3::before {
  background:
    radial-gradient(ellipse 45% 35% at 22% 28%, rgba(255,87,34,.14), transparent 70%),
    radial-gradient(ellipse 38% 30% at 78% 65%, rgba(220,38,38,.10), transparent 70%);
}
.landing-v3 .hero-wrap {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* Hero title — Plus Jakarta Sans 800, grand mais cap 6rem (impeccable rule) */
.landing-v3 .hero-title {
  font-family: 'Plus Jakarta Sans', 'Inter Tight', system-ui, sans-serif !important;
  font-size: clamp(2.2rem, 6vw, 4.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  color: var(--text, #1A1816) !important;
  margin: 0 0 1.2rem !important;
  text-wrap: balance;
}
.landing-v3 .hero-title em {
  font-style: italic;
  position: relative;
  display: inline-block;
  font-weight: 800;
}
.landing-v3 .hero-title em::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: 6%;
  height: 22%;
  background: var(--accent, #E64A19);
  opacity: 0.22;
  border-radius: 4px;
  z-index: -1;
}

.landing-v3 .hero-sub {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-size: clamp(1rem, 1.6vw, 1.15rem) !important;
  line-height: 1.55 !important;
  color: var(--text-muted, #807A70) !important;
  max-width: 60ch;
  margin: 0 auto 2rem !important;
  text-wrap: pretty;
}

/* CTAs */
.hero-actions-v3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
}
.btn-start {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 52px;
  padding: 0 1.8rem;
  border-radius: 999px;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  transition: background 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn-start.btn-start--primary {
  background: var(--accent, #E64A19) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.btn-start.btn-start--primary:hover {
  background: var(--accent-dark, #C53D14) !important;
}
.btn-start.btn-start--primary:active { transform: scale(0.98); }
.btn-start.btn-start--ghost {
  background: transparent !important;
  color: var(--text, #1A1816) !important;
  border: 1px solid var(--border, #D6D1C5);
}
.btn-start.btn-start--ghost:hover {
  background: var(--bg-alt, #F5F3ED) !important;
  border-color: var(--text-muted, #807A70);
}

/* Pitch cards */
.landing-v3 .pitch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 0 auto 2rem;
  max-width: 950px;
}
.landing-v3 .pitch-card {
  background: var(--bg-alt, #F5F3ED) !important;
  border: 1px solid var(--border, #D6D1C5);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  text-align: left;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.landing-v3 .pitch-card:hover {
  border-color: var(--text-muted, #807A70);
  transform: translateY(-2px);
}
.landing-v3 .pitch-card h3 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--text, #1A1816) !important;
  margin: 0 0 0.5rem !important;
}
.landing-v3 .pitch-card p {
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
  color: var(--text-muted, #807A70) !important;
  margin: 0 !important;
}

/* Trust pills */
.landing-v3 .trust-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.8rem;
  font-size: 0.78rem;
  color: var(--text-muted, #807A70) !important;
  letter-spacing: 0.02em;
}
.landing-v3 .trust-pills span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.landing-v3 .trust-pills span::before {
  content: "·";
  font-weight: 700;
  color: var(--accent, #E64A19);
}
.landing-v3 .trust-pills span:first-child::before { display: none; }

/* Dark mode landing v3 */
[data-theme="dark"] .landing-v3 {
  background: var(--bg, #1A1816);
}
[data-theme="dark"] .landing-v3 .hero-title { color: #F5F1ED !important; }
[data-theme="dark"] .landing-v3 .hero-sub { color: #B5B0A8 !important; }
[data-theme="dark"] .landing-v3 .pitch-card {
  background: #232120 !important;
  border-color: #2F2C29;
}
[data-theme="dark"] .landing-v3 .pitch-card h3 { color: #F5F1ED !important; }
[data-theme="dark"] .landing-v3 .pitch-card p { color: #A8A39C !important; }
[data-theme="dark"] .btn-start.btn-start--ghost {
  color: #F5F1ED !important;
  border-color: #45413D;
}

/* SEO data block (caché visuellement, gardé pour crawlers) */
.landing-v3 .seo-data-block,
.seo-data-block {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   HOME v3 — sections du bas (guides, créateurs, bloc éditorial, FAQ)
   Refonte Brûlot non-destructive (override CSS, HTML intact)
   ════════════════════════════════════════════════════════════════════ */

/* ─── Guides (Combien coûte ma vidéo / Bien choisir son prestataire) ─── */
.guides-section {
  background: var(--bg-section, #E5E2DA) !important;
  padding: 4rem 1.5rem !important;
  border-top: 1px solid var(--border, #D6D1C5) !important;
}
.guides-section--alt {
  background: var(--bg, #EDEAE2) !important;
}
.guides-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--text, #1A1816) !important;
  margin-bottom: 0.6rem !important;
  text-align: center;
  text-wrap: balance;
}
.guides-sub,
.guides-section p:not(.guide-card p) {
  text-align: center;
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-size: 1rem !important;
  color: var(--text-muted, #807A70) !important;
  max-width: 60ch;
  margin: 0 auto 2.5rem !important;
}
.guide-card {
  background: var(--bg-alt, #F5F3ED) !important;
  border: 1px solid var(--border, #D6D1C5) !important;
  border-radius: 14px !important;
  padding: 1.4rem 1.5rem !important;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: none !important;
  color: var(--text, #1A1816) !important;
}
.guide-card:hover {
  border-color: var(--text-muted, #807A70) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px -4px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.05) !important;
}
.guide-card h3,
.guide-card .guide-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.02em !important;
  color: var(--text, #1A1816) !important;
}
.guide-card p {
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
  color: var(--text-muted, #807A70) !important;
}
.guide-card a:not(.btn):not(.button) {
  color: var(--accent, #E64A19) !important;
  font-weight: 600;
}

/* Dark mode guides */
[data-theme="dark"] .guides-section {
  background: #0E0D0C !important;
  border-top-color: #2F2C29 !important;
}
[data-theme="dark"] .guides-section--alt {
  background: var(--bg, #1A1816) !important;
}
[data-theme="dark"] .guide-card {
  background: #232120 !important;
  border-color: #2F2C29 !important;
  color: #F5F1ED !important;
}
[data-theme="dark"] .guide-card:hover {
  border-color: #45413D !important;
}
[data-theme="dark"] .guide-card h3 { color: #F5F1ED !important; }
[data-theme="dark"] .guide-card p { color: #A8A39C !important; }
[data-theme="dark"] .guide-card a:not(.btn):not(.button) { color: #FF5722 !important; }

/* ─── Creators section (Pour les vidéastes freelances) ─── */
.creators-section {
  background: var(--bg-section, #E5E2DA) !important;
  padding: 4rem 1.5rem !important;
  border-top: 1px solid var(--border, #D6D1C5) !important;
}
.creators-title,
.creators-section h2 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--text, #1A1816) !important;
  text-align: center;
  margin-bottom: 0.6rem !important;
  text-wrap: balance;
}
.creators-card {
  background: var(--bg-alt, #F5F3ED) !important;
  border: 1px solid var(--border, #D6D1C5) !important;
  border-radius: 14px !important;
  padding: 1.4rem 1.6rem !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  color: var(--text, #1A1816) !important;
}
.creators-card:hover {
  border-color: var(--text-muted, #807A70) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px -4px rgba(0,0,0,.10) !important;
}
.creators-card h3,
.creators-card .card-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--text, #1A1816) !important;
}
.creators-card p { color: var(--text-muted, #807A70) !important; }
.creators-card a {
  color: var(--accent, #E64A19) !important;
  font-weight: 600;
}

[data-theme="dark"] .creators-section {
  background: #0E0D0C !important;
}
[data-theme="dark"] .creators-card {
  background: #232120 !important;
  border-color: #2F2C29 !important;
  color: #F5F1ED !important;
}
[data-theme="dark"] .creators-card:hover { border-color: #45413D !important; }
[data-theme="dark"] .creators-card h3 { color: #F5F1ED !important; }
[data-theme="dark"] .creators-card p { color: #A8A39C !important; }
[data-theme="dark"] .creators-card a { color: #FF5722 !important; }

/* ─── FAQ SEO ─── */
.faq-seo {
  background: var(--bg, #EDEAE2) !important;
  border-top: 1px solid var(--border, #D6D1C5) !important;
  padding: 4rem 1.5rem !important;
}
.faq-seo-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--text, #1A1816) !important;
  text-align: center;
  margin-bottom: 2rem !important;
  text-wrap: balance;
}
.faq-item {
  background: var(--bg-alt, #F5F3ED) !important;
  border: 1px solid var(--border, #D6D1C5) !important;
  border-radius: 12px !important;
  transition: border-color 0.2s ease !important;
}
.faq-item:hover { border-color: var(--text-muted, #807A70) !important; }
.faq-item summary {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-weight: 600 !important;
  color: var(--text, #1A1816) !important;
  padding: 1rem 1.2rem !important;
  cursor: pointer;
}
.faq-item summary::after { color: var(--accent, #E64A19) !important; }
.faq-item p {
  color: var(--text-muted, #807A70) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

[data-theme="dark"] .faq-seo {
  background: var(--bg, #1A1816) !important;
  border-top-color: #2F2C29 !important;
}
[data-theme="dark"] .faq-item {
  background: #232120 !important;
  border-color: #2F2C29 !important;
}
[data-theme="dark"] .faq-item:hover { border-color: #45413D !important; }
[data-theme="dark"] .faq-item summary { color: #F5F1ED !important; }
[data-theme="dark"] .faq-item p { color: #A8A39C !important; }
[data-theme="dark"] .faq-item summary::after { color: #FF5722 !important; }

/* ─── Bloc éditorial "Comment fonctionne notre calculateur" ─── */
section[aria-label="Comment fonctionne le calculateur"] {
  background: var(--bg-section, #E5E2DA) !important;
  border-top: 1px solid var(--border, #D6D1C5) !important;
  padding: 3.5rem 1.5rem !important;
}
section[aria-label="Comment fonctionne le calculateur"] h2 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
  font-weight: 800 !important;
  color: var(--text, #1A1816) !important;
  letter-spacing: -0.025em !important;
}
section[aria-label="Comment fonctionne le calculateur"] h3 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  color: var(--text, #1A1816) !important;
  margin-top: 2rem !important;
}
section[aria-label="Comment fonctionne le calculateur"] p {
  color: var(--text-muted, #807A70) !important;
  line-height: 1.6 !important;
}

[data-theme="dark"] section[aria-label="Comment fonctionne le calculateur"] {
  background: #0E0D0C !important;
  border-top-color: #2F2C29 !important;
}
[data-theme="dark"] section[aria-label="Comment fonctionne le calculateur"] h2,
[data-theme="dark"] section[aria-label="Comment fonctionne le calculateur"] h3 {
  color: #F5F1ED !important;
}
[data-theme="dark"] section[aria-label="Comment fonctionne le calculateur"] p {
  color: #A8A39C !important;
}

/* ════════════════════════════════════════════════════════════════════
   V2-SHELL : header + footer uniformes Brûlot sur tout le site
   ════════════════════════════════════════════════════════════════════ */

/* ─── Header v2 ─── */
.site-header-v2 {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg, #EDEAE2) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border, #D6D1C5);
}
.site-header-v2 .header-inner-v2 {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.brand-v2 {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text, #1A1816);
  transition: opacity 0.15s ease;
}
.brand-v2:hover { opacity: 0.78; }
.brand-v2 .brand-text {
  font-family: 'Plus Jakarta Sans', 'Inter Tight', system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text, #1A1816);
}
.brand-v2 .brand-dot {
  color: var(--accent, #E64A19);
  margin-left: 1px;
}
.brand-v2--small .brand-text { font-size: 1.1rem; }

.main-nav-v2 {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.main-nav-v2 a {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted, #807A70);
  text-decoration: none;
  padding: 0.4rem 0;
  position: relative;
  transition: color 0.15s ease;
}
.main-nav-v2 a:hover { color: var(--text, #1A1816); }
.main-nav-v2 a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent, #E64A19);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.main-nav-v2 a:hover::after { transform: scaleX(1); }

[data-theme="dark"] .site-header-v2 {
  background: color-mix(in srgb, #1A1816 95%, transparent) !important;
  border-bottom-color: #2F2C29 !important;
}
[data-theme="dark"] .brand-v2 .brand-text { color: #F5F1ED !important; }
[data-theme="dark"] .brand-v2 .brand-dot  { color: #FF6B35 !important; }
[data-theme="dark"] .main-nav-v2 a { color: #D5D0C8 !important; }
[data-theme="dark"] .main-nav-v2 a:hover { color: #FFFFFF !important; }
[data-theme="dark"] .main-nav-v2 a::after { background: #FF6B35 !important; }

@media (max-width: 700px) {
  .site-header-v2 .header-inner-v2 { gap: 0.6rem; padding: 0.7rem 1rem; }
  .main-nav-v2 { gap: 0.9rem; }
  .main-nav-v2 a { font-size: 0.82rem; }
}

/* Nav actions (theme-toggle + bouton CTA "Démarrer") */
.nav-actions-v2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}
.theme-toggle-v2 {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border, #D6D1C5);
  background: transparent;
  color: var(--text-muted, #807A70);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  padding: 0;
}
.theme-toggle-v2:hover {
  border-color: var(--text-muted, #807A70);
  color: var(--text, #1A1816);
}
.btn-v2 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 40px;
  padding: 0 1.1rem;
  border-radius: 999px;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease;
  white-space: nowrap;
}
.btn-v2--primary,
.btn-v2--primary:visited,
.btn-v2--primary:link,
a.btn-v2--primary,
.nav-actions-v2 a.btn-v2--primary {
  background: var(--accent, #E64A19) !important;
  color: #ffffff !important;
  border: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  text-decoration: none !important;
}
.btn-v2--primary *,
.btn-v2--primary span,
.btn-v2--primary svg,
.btn-v2--primary .btn-v2-arrow {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
.btn-v2--primary:hover,
a.btn-v2--primary:hover {
  background: var(--accent-dark, #C53D14) !important;
  color: #ffffff !important;
}
.btn-v2--primary:active { transform: scale(0.98); }
.btn-v2-arrow {
  width: 14px; height: 14px;
  transition: transform 0.15s ease;
}
.btn-v2--primary:hover .btn-v2-arrow { transform: translateX(3px); }

[data-theme="dark"] .theme-toggle-v2 {
  border-color: #2F2C29;
  color: #A8A39C;
}
[data-theme="dark"] .theme-toggle-v2:hover {
  border-color: #45413D;
  color: #F5F1ED;
}
[data-theme="dark"] .btn-v2--primary,
[data-theme="dark"] .btn-v2--primary:visited,
[data-theme="dark"] .btn-v2--primary:link,
[data-theme="dark"] a.btn-v2--primary,
[data-theme="dark"] .nav-actions-v2 a.btn-v2--primary {
  background: #FF5722 !important;
  color: #ffffff !important;
}
[data-theme="dark"] .btn-v2--primary *,
[data-theme="dark"] .btn-v2--primary span,
[data-theme="dark"] .btn-v2--primary svg,
[data-theme="dark"] .btn-v2--primary .btn-v2-arrow {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
[data-theme="dark"] .btn-v2--primary:hover { background: #E64A19 !important; color: #ffffff !important; }

@media (max-width: 540px) {
  .nav-actions-v2 .btn-v2--primary span,
  .main-nav-v2 a:nth-child(n+3) { display: none; }
  /* Sur mobile compact : on garde brand + 2 premiers liens + theme + bouton */
}

/* Navbar identique sur toutes les pages (y compris calculateur-devis).
   On garde le bouton Démarrer même si on est déjà sur le calculateur :
   l'URL ?start=1 ré-initialise simplement le wizard sans gêner l'UX. */

/* ─── Footer v2 ─── */
.site-footer-v2 {
  background: var(--bg-section, #E5E2DA);
  border-top: 1px solid var(--border, #D6D1C5);
  padding: 3rem 1.5rem 2rem;
  margin-top: 4rem;
}
.site-footer-v2 .footer-inner-v2 {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 720px) {
  .site-footer-v2 .footer-inner-v2 { grid-template-columns: 1fr; }
}
.site-footer-v2 .footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.site-footer-v2 .footer-tag {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted, #807A70);
  max-width: 38ch;
  margin: 0;
}
.site-footer-v2 .footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  font-family: 'Inter Tight', system-ui, sans-serif;
}
.site-footer-v2 .footer-nav a {
  font-size: 0.88rem;
  color: var(--text-muted, #807A70);
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-footer-v2 .footer-nav a:hover { color: var(--accent, #E64A19); }
.site-footer-v2 .footer-copy {
  grid-column: 1 / -1;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border, #D6D1C5);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  color: var(--text-muted, #807A70);
  letter-spacing: 0.04em;
  text-align: center;
}

[data-theme="dark"] .site-footer-v2 {
  background: #0E0D0C;
  border-top-color: #2F2C29;
}
[data-theme="dark"] .site-footer-v2 .footer-tag,
[data-theme="dark"] .site-footer-v2 .footer-nav a,
[data-theme="dark"] .site-footer-v2 .footer-copy {
  color: #A8A39C;
}
[data-theme="dark"] .site-footer-v2 .footer-nav a:hover { color: #FF5722; }
[data-theme="dark"] .site-footer-v2 .footer-copy { border-top-color: #2F2C29; }

/* (overrides hero v2a-pro retirés — causaient un décalage des titres.
    On refera chaque page une par une à partir du design v2a-pro,
    avec validation utilisateur au fur et à mesure.) */

/* ════════════════════════════════════════════════════════════════════
   WIZARD (calculateur-devis.html) — restyling Brûlot
   Composants spécifiques au wizard 3 étapes, override des styles inline.
   ════════════════════════════════════════════════════════════════════ */

/* Value prop banner (en haut du wizard) */
#app-wrap .value-prop {
  padding: 1.8rem 1.5rem !important;
  text-align: center;
  background: transparent !important;
  border: 0 !important;
}
#app-wrap .value-prop-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--text, #1A1816) !important;
  margin: 0 0 0.4rem !important;
  text-wrap: balance;
}
#app-wrap .value-prop-sub {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-size: 0.95rem !important;
  color: var(--text-muted, #807A70) !important;
  margin: 0 !important;
}

/* Resume banner (Reprendre votre dernière simulation) */
#app-wrap .resume-banner {
  max-width: 800px;
  margin: 0.5rem auto 1.5rem !important;
  padding: 1rem 1.3rem !important;
  background: var(--bg-alt, #F5F3ED) !important;
  border: 1px solid var(--border, #D6D1C5) !important;
  border-left: 3px solid var(--accent, #E64A19) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
/* Respecter [hidden] : le banner ne s'affiche QUE s'il y a une simulation sauvegardée
   (sinon le display:flex !important ci-dessus le forçait visible, vide, non masquable). */
#app-wrap .resume-banner[hidden] { display: none !important; }
#app-wrap .resume-label {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-weight: 600 !important;
  color: var(--text, #1A1816) !important;
  font-size: 0.95rem !important;
}
#app-wrap .resume-detail {
  font-size: 0.85rem !important;
  color: var(--text-muted, #807A70) !important;
}
#app-wrap .btn-resume {
  background: var(--accent, #E64A19) !important;
  color: #fff !important;
  font-weight: 600;
  padding: 0.55rem 1.2rem !important;
  border-radius: 999px !important;
  border: 0;
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.18s ease;
}
#app-wrap .btn-resume:hover { background: var(--accent-dark, #C53D14) !important; }
#app-wrap .btn-dismiss {
  background: transparent !important;
  color: var(--text-muted, #807A70) !important;
  font-size: 1rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}

/* Stepper (1 — 2 visuels) */
#app-wrap .stepper-wrap,
#app-wrap nav[id="stepper-nav"] {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  max-width: 600px;
  margin: 1.5rem auto 2rem !important;
  padding: 0.5rem 1.5rem !important;
  /* Stepper épuré : pas de boîte blanche à bordure-bas (les pastilles paraissaient "cropées" en haut) */
  background: transparent !important;
  border: none !important;
}
#app-wrap .s-node {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
}
#app-wrap .s-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-alt, #F5F3ED) !important;
  border: 1.5px solid var(--border, #D6D1C5) !important;
  color: var(--text-muted, #807A70) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.78rem;
  font-weight: 600;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
#app-wrap .s-circle.active {
  background: var(--accent, #E64A19) !important;
  border-color: var(--accent, #E64A19) !important;
  color: #fff !important;
}
#app-wrap .s-label {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--text-muted, #807A70) !important;
}
#app-wrap .s-label.active {
  color: var(--text, #1A1816) !important;
  font-weight: 600 !important;
}
#app-wrap .s-line {
  flex: 1;
  height: 1.5px;
  background: var(--border, #D6D1C5) !important;
  border-radius: 999px;
  max-width: 80px;
}

/* Step container + title */
#app-wrap .step {
  max-width: 800px;
  margin: 0 auto !important;
  padding: 0 1.5rem 3rem !important;
}
#app-wrap .step-eyebrow {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted, #807A70) !important;
  margin-bottom: 0.4rem !important;
  display: inline-block;
}
#app-wrap .step-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--text, #1A1816) !important;
  margin: 0 0 2rem !important;
  text-wrap: balance;
}

/* Role toggle (Je cherche / Je suis vidéaste) */
#app-wrap .role-toggle-wrap {
  background: var(--bg-alt, #F5F3ED) !important;
  border: 1px solid var(--border, #D6D1C5) !important;
  border-radius: 14px !important;
  padding: 1.4rem 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
#app-wrap .role-toggle-label {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--text, #1A1816) !important;
  margin-bottom: 0.7rem !important;
}
#app-wrap .role-toggle {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
@media (max-width: 540px) {
  #app-wrap .role-toggle { grid-template-columns: 1fr; }
}
#app-wrap .role-btn {
  background: var(--bg, #EDEAE2) !important;
  border: 1.5px solid var(--border, #D6D1C5) !important;
  border-radius: 12px !important;
  padding: 1rem 1.2rem !important;
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--text, #1A1816) !important;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}
#app-wrap .role-btn:hover {
  border-color: var(--accent, #E64A19) !important;
  background: var(--bg-alt, #F5F3ED) !important;
  transform: translateY(-1px);
}
#app-wrap .role-btn.active,
#app-wrap .role-btn[aria-pressed="true"] {
  border-color: var(--accent, #E64A19) !important;
  background: rgba(230, 74, 25, 0.08) !important;
  color: var(--accent, #E64A19) !important;
}
#app-wrap .role-emoji {
  font-size: 1.1rem;
}
#app-wrap .role-hint {
  font-size: 0.78rem !important;
  color: var(--text-muted, #807A70) !important;
  margin-top: 0.7rem !important;
  text-align: center;
}

/* Section labels */
#app-wrap .section-label {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--text, #1A1816) !important;
  margin: 1.4rem 0 0.7rem !important;
  letter-spacing: -0.01em;
}

/* Phase reveal (sections qui apparaissent) */
#app-wrap .phase-reveal {
  margin-top: 1rem;
}

/* Pills (boutons options inline) */
#app-wrap .pills,
#app-wrap .pills-section {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem !important;
}
#app-wrap .pills button,
#app-wrap .pills-section button,
#app-wrap button.pill {
  background: var(--bg-alt, #F5F3ED) !important;
  border: 1px solid var(--border, #D6D1C5) !important;
  border-radius: 999px !important;
  padding: 0.5rem 1rem !important;
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: var(--text, #1A1816) !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
#app-wrap .pills button:hover,
#app-wrap .pills-section button:hover,
#app-wrap button.pill:hover {
  border-color: var(--accent, #E64A19) !important;
  background: var(--bg, #EDEAE2) !important;
}
#app-wrap .pills button.active,
#app-wrap .pills-section button.active,
#app-wrap button.pill.active,
#app-wrap button.pill[aria-pressed="true"] {
  background: var(--accent, #E64A19) !important;
  border-color: var(--accent, #E64A19) !important;
  color: #fff !important;
}

/* Form labels */
#app-wrap .form-label {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--text, #1A1816) !important;
  display: block;
  margin: 0.8rem 0 0.4rem !important;
}

/* Boutons navigation (next, restart) */
#app-wrap .btn-next,
#app-wrap .btn-restart {
  background: var(--accent, #E64A19) !important;
  color: #fff !important;
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  padding: 0.85rem 1.8rem !important;
  border-radius: 999px !important;
  border: 0 !important;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
#app-wrap .btn-next:hover:not(:disabled),
#app-wrap .btn-restart:hover {
  background: var(--accent-dark, #C53D14) !important;
}
#app-wrap .btn-next:active,
#app-wrap .btn-restart:active { transform: scale(0.98); }
#app-wrap .btn-next:disabled {
  background: var(--border, #D6D1C5) !important;
  color: var(--text-muted, #807A70) !important;
  cursor: not-allowed;
}

/* Nav (boutons en bas d'étape) */
#app-wrap .nav {
  display: flex !important;
  justify-content: center;
  margin-top: 2rem !important;
}

/* Error message */
#app-wrap .error-msg {
  color: var(--accent-dark, #C53D14) !important;
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500;
}

/* Loading screen */
#app-wrap .loading-screen {
  text-align: center;
  padding: 3rem 1.5rem;
}
#app-wrap .loading-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--text, #1A1816) !important;
  margin-bottom: 0.5rem;
}
#app-wrap .loading-msg {
  color: var(--text-muted, #807A70) !important;
  font-size: 0.95rem !important;
}

/* Progress bar */
#app-wrap .progress-bar-wrap {
  width: 100%;
  height: 6px;
  background: var(--border, #D6D1C5) !important;
  border-radius: 999px;
  overflow: hidden;
  margin: 1rem 0;
}
#app-wrap .progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #E64A19), var(--accent-dark, #C53D14)) !important;
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* Dark mode adjustments */
[data-theme="dark"] #app-wrap .value-prop-title { color: #F5F1ED !important; }
[data-theme="dark"] #app-wrap .value-prop-sub,
[data-theme="dark"] #app-wrap .role-hint,
[data-theme="dark"] #app-wrap .step-eyebrow { color: #A8A39C !important; }
[data-theme="dark"] #app-wrap .resume-banner {
  background: #232120 !important;
  border-color: #2F2C29 !important;
  border-left-color: #FF5722 !important;
}
[data-theme="dark"] #app-wrap .resume-label,
[data-theme="dark"] #app-wrap .step-title,
[data-theme="dark"] #app-wrap .section-label,
[data-theme="dark"] #app-wrap .form-label,
[data-theme="dark"] #app-wrap .loading-title { color: #F5F1ED !important; }
[data-theme="dark"] #app-wrap .resume-detail,
[data-theme="dark"] #app-wrap .loading-msg { color: #A8A39C !important; }
[data-theme="dark"] #app-wrap .role-toggle-wrap {
  background: #232120 !important;
  border-color: #2F2C29 !important;
}
[data-theme="dark"] #app-wrap .role-toggle-label { color: #F5F1ED !important; }
[data-theme="dark"] #app-wrap .role-btn {
  background: #1A1816 !important;
  border-color: #2F2C29 !important;
  color: #F5F1ED !important;
}
[data-theme="dark"] #app-wrap .role-btn:hover { border-color: #FF5722 !important; background: #232120 !important; }
[data-theme="dark"] #app-wrap .role-btn.active,
[data-theme="dark"] #app-wrap .role-btn[aria-pressed="true"] {
  background: rgba(255, 87, 34, 0.15) !important;
  color: #FF5722 !important;
}
[data-theme="dark"] #app-wrap .s-circle {
  background: #232120 !important;
  border-color: #2F2C29 !important;
  color: #A8A39C !important;
}
[data-theme="dark"] #app-wrap .s-circle.active {
  background: #FF5722 !important;
  border-color: #FF5722 !important;
}
[data-theme="dark"] #app-wrap .s-line { background: #2F2C29 !important; }
[data-theme="dark"] #app-wrap .s-label.active { color: #F5F1ED !important; }
[data-theme="dark"] #app-wrap .pills button,
[data-theme="dark"] #app-wrap .pills-section button,
[data-theme="dark"] #app-wrap button.pill {
  background: #232120 !important;
  border-color: #2F2C29 !important;
  color: #F5F1ED !important;
}
[data-theme="dark"] #app-wrap .pills button:hover,
[data-theme="dark"] #app-wrap .pills-section button:hover,
[data-theme="dark"] #app-wrap button.pill:hover {
  border-color: #FF5722 !important;
  background: #1A1816 !important;
}
[data-theme="dark"] #app-wrap .pills button.active,
[data-theme="dark"] #app-wrap .pills-section button.active,
[data-theme="dark"] #app-wrap button.pill.active,
[data-theme="dark"] #app-wrap button.pill[aria-pressed="true"] {
  background: #FF5722 !important;
  border-color: #FF5722 !important;
}
[data-theme="dark"] #app-wrap .btn-next,
[data-theme="dark"] #app-wrap .btn-restart { background: #FF5722 !important; }
[data-theme="dark"] #app-wrap .btn-next:hover:not(:disabled),
[data-theme="dark"] #app-wrap .btn-restart:hover { background: #E64A19 !important; }
[data-theme="dark"] #app-wrap .btn-next:disabled {
  background: #2F2C29 !important;
  color: #6E6963 !important;
}
[data-theme="dark"] #app-wrap .progress-bar-wrap { background: #2F2C29 !important; }
[data-theme="dark"] #app-wrap .error-msg { color: #FF7849 !important; }

/* ════════════════════════════════════════════════════════════════════
   BENTO — composants portés de la home v2a-pro pour usage hors home
   (utilisé par /magazine.html, /observatoire.html, etc.)
   ════════════════════════════════════════════════════════════════════ */

/* Override le main contraint d'article.css sur les pages hub */
body.page-magazine main,
body.page-observatoire main,
body.page-apropos main {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Et la section bento doit aussi prendre toute la largeur disponible */
body.page-apropos .bento-section,
body.page-apropos .manifest,
body.page-apropos .hub-hero {
  max-width: 1100px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.bento-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem;
}
.bento-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0 0 1.5rem;
  flex-wrap: wrap;
}
.bento-section-head .section-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted, #807A70);
  margin: 0 0 0.4rem;
}
.bento-section-head .section-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  letter-spacing: -0.025em;
  color: var(--text, #1A1816);
  margin: 0;
  text-wrap: balance;
}
.bento-section-head .section-sub {
  font-size: 0.98rem;
  color: var(--text-muted, #807A70);
  max-width: 50ch;
  margin: 0;
  text-wrap: pretty;
}

.bento {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(180px, auto);
  }
  .bento-card--xl   { grid-column: span 4; grid-row: span 2; }
  .bento-card--lg   { grid-column: span 3; grid-row: span 2; }
  .bento-card--md   { grid-column: span 3; }
  .bento-card--sm   { grid-column: span 2; }
}

.bento-card {
  background: var(--bg-alt, #F5F3ED);
  border: 1px solid var(--border, #D6D1C5);
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: var(--text, #1A1816);
  text-decoration: none;
}
.bento-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px -4px rgba(0,0,0,.14), 0 2px 4px rgba(0,0,0,.06);
}
.bento-card--xl {
  background:
    radial-gradient(ellipse 50% 60% at 92% 8%, rgba(230, 74, 25, .06), transparent 65%),
    linear-gradient(155deg, var(--bg-deep, #1A1816) 0%, #2A2520 100%);
  color: #F5F1ED !important;
  border-color: var(--border, #D6D1C5);
}
[data-theme="dark"] .bento-card--xl {
  background:
    radial-gradient(ellipse 50% 60% at 92% 8%, rgba(255, 87, 34, .07), transparent 65%),
    linear-gradient(155deg, var(--bg-deep, #0E0D0C) 0%, #1F1A16 100%);
}
.bento-card--azur   { background: var(--tint-azur, #C8D2DC) !important; }
.bento-card--sage   { background: var(--tint-sage, #D5DCC0) !important; }
.bento-card--rose   { background: var(--tint-rose, #D49A8C) !important; }
.bento-card--sand   { background: var(--tint-sand, #D6C284) !important; }
.bento-card--stone  { background: var(--tint-stone, #C8C6B5) !important; }

/* DARK : mêmes tints sombres que la home (mockup v2a-pro inline) */
[data-theme="dark"] .bento-card--azur   { background: #161C24 !important; }
[data-theme="dark"] .bento-card--sage   { background: #1B2418 !important; }
[data-theme="dark"] .bento-card--rose   { background: #2A1818 !important; }
[data-theme="dark"] .bento-card--sand   { background: #2A1F14 !important; }
[data-theme="dark"] .bento-card--stone  { background: #1F1D1B !important; }
/* En dark sur tints sombres : forcer le texte cream pour contraste */
[data-theme="dark"] .bento-card--azur .bento-title,
[data-theme="dark"] .bento-card--sage .bento-title,
[data-theme="dark"] .bento-card--rose .bento-title,
[data-theme="dark"] .bento-card--sand .bento-title,
[data-theme="dark"] .bento-card--stone .bento-title {
  color: #F5F1ED !important;
}
[data-theme="dark"] .bento-card--azur .bento-desc,
[data-theme="dark"] .bento-card--sage .bento-desc,
[data-theme="dark"] .bento-card--rose .bento-desc,
[data-theme="dark"] .bento-card--sand .bento-desc,
[data-theme="dark"] .bento-card--stone .bento-desc {
  color: rgba(245, 241, 237, 0.75) !important;
}
[data-theme="dark"] .bento-card--azur .bento-cta,
[data-theme="dark"] .bento-card--sage .bento-cta,
[data-theme="dark"] .bento-card--rose .bento-cta,
[data-theme="dark"] .bento-card--sand .bento-cta,
[data-theme="dark"] .bento-card--stone .bento-cta {
  color: #FF6B35 !important;
}

.bento-card .bento-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}
.bento-card .bento-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* a11y : #3A352F passe AA (≥4.5:1) sur les 5 tuiles teintées + le greige.
     #6B655B (--text-muted) échouait (2.2–3.7:1). Reste discret/quasi invisible. */
  color: #3A352F;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
}
/* Variante accent : tag orange pour différencier les cards principales (sans changer leur fond) */
.bento-card .bento-tag--accent {
  background: var(--accent, #E64A19);
  color: #fff;
}
[data-theme="dark"] .bento-card .bento-tag { background: rgba(255,255,255,.06); color: #A8A39C; }
[data-theme="dark"] .bento-card .bento-tag--accent { background: #D63E0E; color: #fff; } /* AA : blanc 4.6:1 (était #FF5722, 3.16) */
.bento-card--xl .bento-tag {
  background: rgba(255,255,255,.10);
  color: rgba(244,237,224,.85);
}
.bento-card .bento-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
.bento-card--xl .bento-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
}
.bento-card .bento-desc {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--text-muted, #807A70);
  margin: 0;
}
.bento-card--xl .bento-desc {
  color: rgba(244,237,224,.75);
}
.bento-card--sage .bento-desc,
.bento-card--rose .bento-desc,
.bento-card--azur .bento-desc,
.bento-card--sand .bento-desc,
.bento-card--stone .bento-desc {
  color: rgba(26,24,22,.75);
}
.bento-card .bento-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  /* CTA orange marque sur cartes claires (#AD380D = orange light AA, 5.6:1 sur greige). */
  color: #AD380D;
  transition: gap 0.15s ease;
}
.bento-card:hover .bento-cta { gap: 0.7rem; }
.bento-card--xl .bento-cta { color: var(--accent, #FF5722); }
/* Tuiles teintées : l'orange y échoue AA (1.6–2.8:1) → CTA en texte foncé (7.4–12.5:1). */
.bento-card--azur .bento-cta,
.bento-card--sage .bento-cta,
.bento-card--rose .bento-cta,
.bento-card--sand .bento-cta,
.bento-card--stone .bento-cta {
  color: #1A1816;
}
/* Dark : cartes claires deviennent sombres → orange vif AA (#FF6B35, 5.6:1). Tuiles déjà gérées plus haut. */
[data-theme="dark"] .bento-card .bento-cta { color: #FF6B35; }

.bento-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--accent, #E64A19);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.bento-numlabel {
  font-size: 0.75rem;
  color: var(--text-muted, #807A70);
  margin-top: 0.3rem;
}
.bento-card--xl .bento-numlabel { color: rgba(244,237,224,.55); }

/* ─────────────────────────────────────────────────────────
   Hub TOC — nav latérale de section (Magazine, Observatoire…)
   ≥1100px : sidebar sticky à gauche + scrollspy (.is-active géré par /hub-nav.js).
   <1100px : barre d'onglets sticky horizontale scrollable sous le header.
   ───────────────────────────────────────────────────────── */
.hub-shell { max-width: 1280px; margin: 0 auto; }
.hub-toc-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted, #807A70);
  margin: 0 0 0.75rem;
}
.hub-toc-link {
  display: block;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 0.92rem; font-weight: 600; line-height: 1.3;
  color: var(--text-muted, #6B655B) !important;
  text-decoration: none !important;
  padding: 0.5rem 0 0.5rem 0.85rem;
  border-left: 2px solid var(--border, #D6D1C5);
  transition: color .15s ease, border-color .15s ease;
}
.hub-toc-link:hover { color: var(--text, #1A1816) !important; }
.hub-toc-link.is-active {
  color: var(--text, #1A1816) !important;
  border-left-color: var(--accent, #E64A19);
}

@media (min-width: 1100px) {
  .hub-shell {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    padding: 0 1.5rem;
  }
  .hub-toc { position: sticky; top: 88px; }
  /* sections : remplissent la colonne, plus d'auto-centrage ni padding latéral */
  .hub-main .bento-section { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
}

@media (max-width: 1099px) {
  .hub-toc {
    position: sticky; top: 53px; z-index: 40;
    display: flex; gap: 0.4rem; overflow-x: auto;
    margin: 0 0 0.5rem; padding: 0.55rem 1rem;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--border, #D6D1C5);
    scrollbar-width: none;
  }
  .hub-toc::-webkit-scrollbar { display: none; }
  .hub-toc-label { display: none; }
  .hub-toc-link {
    white-space: nowrap; flex: 0 0 auto;
    border-left: none; border-bottom: 2px solid transparent;
    padding: 0.3rem 0.15rem;
  }
  .hub-toc-link.is-active { border-left: none; border-bottom-color: var(--accent, #E64A19); }
}

[data-theme="dark"] .bento-card {
  background: var(--bg-alt, #232120);
  border-color: var(--border, #2F2C29);
}

/* ════════════════════════════════════════════════════════════════════
   HEADER UNIFIÉ (v4) — version mockup home, portée sur les hubs
   Spécificité haute + !important pour battre les overrides plus haut
   (body:not(.on-landing) header, .brand orange, liens orange, etc.)
   ════════════════════════════════════════════════════════════════════ */

/* Reset défensif — annule les héritages parasites (article.css, CSS locaux)
   qui modifient ul, li, svg, button, a dans le header → décalages d'1-4px */
html body .site-header,
html body .site-header * {
  box-sizing: border-box !important;
}
html body .site-header ul,
html body .site-header ol {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .site-header li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
html body .site-header li::before,
html body .site-header li::marker {
  content: none !important;
  display: none !important;
}
html body .site-header a {
  text-decoration: none !important;
  border-bottom: 0 !important;
}
html body .site-header svg {
  display: block;
  flex-shrink: 0;
}
html body .site-header button {
  font: inherit;
  border: 0;
  background: none;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

html body:not(.on-landing) .site-header,
html body .site-header {
  position: sticky !important; top: 0 !important; z-index: 100 !important;
  background: color-mix(in srgb, var(--bg) 84%, transparent) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
  backdrop-filter: saturate(180%) blur(18px) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
  /* annule les règles "header { display:flex; padding; height }" du CSS local
     (calculateur-devis, tjm, marge…) qui s'appliquent à l'élément <header> */
  display: block !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body .site-header .container {
  width: 100% !important; max-width: 1280px !important;
  margin: 0 auto !important; padding: 0 24px !important;
}
html body .site-header .nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 72px !important;
  gap: 32px !important;
  /* margin: 0 auto pour respecter le centrage de .container (même div) :
     un simple margin:0 tuerait le margin auto et collerait à gauche */
  margin: 0 auto !important;
  padding: 0 24px !important;
  width: 100% !important;
  max-width: 1280px !important;
}
/* Brand : wordmark sombre + dot orange (override .brand orange forcé) */
html body .site-header .brand {
  display: inline-flex !important; align-items: center !important;
  color: var(--text) !important; text-decoration: none !important;
  background: none !important;
  transition: opacity 160ms cubic-bezier(.2,.7,.2,1);
}
html body .site-header .brand:hover { opacity: .8; }
html body .site-header .brand-text {
  font-family: var(--font-display) !important;
  font-size: 22px !important; font-weight: 800 !important;
  letter-spacing: -0.04em !important; line-height: 1 !important;
  color: var(--text) !important;
}
html body .site-header .brand-dot {
  color: var(--accent) !important; margin-left: 1px;
}
html body .site-header .nav-links {
  display: none; gap: 48px !important;
  list-style: none !important; padding: 0 !important; margin: 0 !important;
}
/* Liens nav : muted, pas orange — la règle d'override des liens (line 309)
   utilise 6 :not() (spec 0,6,1), donc on duplique la chaîne pour gagner */
html body .site-header .nav-links a,
html body .site-header .nav-links a:not(.logo):not(.brand):not(.btn):not(.cta-primary):not(.btn-primary):not(.btn-cta) {
  font-size: 14px !important; font-weight: 500 !important;
  color: var(--text-muted) !important;
  position: relative; padding: 4px 0;
  text-decoration: none !important;
  background: none !important;
  transition: color 160ms cubic-bezier(.2,.7,.2,1);
}
html body .site-header .nav-links a:hover,
html body .site-header .nav-links a:not(.logo):not(.brand):not(.btn):not(.cta-primary):not(.btn-primary):not(.btn-cta):hover {
  color: var(--accent) !important;
}
html[data-theme="dark"] body .site-header .nav-links a:not(.logo):not(.brand):not(.btn):not(.cta-primary):not(.btn-primary):not(.btn-cta) {
  color: #A8A39C !important;
}
html[data-theme="dark"] body .site-header .nav-links a:not(.logo):not(.brand):not(.btn):not(.cta-primary):not(.btn-primary):not(.btn-cta):hover {
  color: #FF5722 !important;
}
/* Barre orange animée sous chaque lien nav au hover (effet home) */
html body .site-header .nav-links a::after {
  content: "" !important;
  position: absolute !important;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent) !important;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1);
}
html body .site-header .nav-links a:hover::after { transform: scaleX(1); }
html body .site-header .nav-actions {
  display: flex !important; align-items: center !important; gap: 12px !important;
}
html body .site-header .theme-toggle {
  width: 44px !important; height: 44px !important; border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  color: var(--text-muted) !important; background: transparent !important;
  cursor: pointer;
  transition: all 160ms cubic-bezier(.2,.7,.2,1);
}
html body .site-header .theme-toggle:hover {
  color: var(--accent) !important; border-color: var(--border-hover) !important;
}
html body .site-header .btn {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  height: 44px !important; padding: 0 18px !important; border-radius: 999px !important;
  font-size: 14px !important; font-weight: 600 !important; letter-spacing: -0.01em !important;
  white-space: nowrap !important; text-decoration: none !important;
  transition: all 160ms cubic-bezier(.2,.7,.2,1);
  border: 0 !important; cursor: pointer;
}
html body .site-header .btn--primary,
html body .site-header a.btn--primary,
html body .site-header a.btn--primary:visited,
html body .site-header a.btn--primary:link {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.12) !important;
  text-decoration: none !important;
}
html body .site-header .btn--primary:hover {
  background: var(--accent-dark) !important;
  transform: translateY(-1px);
}
/* a11y AA : en dark, le bouton primaire passe de #FF5722 (blanc=3.16) à #D63E0E
   (blanc=4.6:1) pour respecter le contraste. Couvre header CTA + boutons + start calc. */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn--primary,
html[data-theme="dark"] button[type="submit"],
html[data-theme="dark"] .btn-start.btn-start--primary,
html[data-theme="dark"] body .site-header .btn--primary,
html[data-theme="dark"] body .site-header a.btn--primary,
html[data-theme="dark"] body .site-header a.btn--primary:link,
html[data-theme="dark"] body .site-header a.btn--primary:visited { background: #D63E0E !important; }
html[data-theme="dark"] .btn--primary:hover,
html[data-theme="dark"] .btn-start.btn-start--primary:hover,
html[data-theme="dark"] body .site-header .btn--primary:hover { background: #C53D14 !important; }

/* a11y dark — composants des pages outils/article (centralisé, chargé partout).
   A. fonds orange vif #FF5722 → #D63E0E (texte clair passe AA 4.5+). */
html[data-theme="dark"] .calc-preset.active,
html[data-theme="dark"] .diffusion-toggle.is-active,
html[data-theme="dark"] .fab-restart,
html[data-theme="dark"] .verdict-winner { background: #D63E0E !important; }
/* diffusion-toggle a un texte crème (pas blanc) → un cran plus foncé pour passer AA (4.6) */
html[data-theme="dark"] .diffusion-toggle.is-active { background: #C53D14 !important; }
/* B. valeurs colorées trop sombres sur fond dark → éclaircies (color-coding préservé). */
html[data-theme="dark"] .slider-value { color: #FF6B35 !important; }
html[data-theme="dark"] .statut-card[data-statut="eurl"] { --statut-color: #B69CFF; }
html[data-theme="dark"] .statut-card[data-statut="sasu"] { --statut-color: #FF6B35; }
html[data-theme="dark"] .roi-card[data-key="vs-location"] { --roi-color: #B69CFF; }
html body .site-header .btn .arrow {
  width: 16px !important; height: 16px !important; flex-shrink: 0;
  transition: transform 160ms cubic-bezier(.2,.7,.2,1);
}
html body .site-header .btn:hover .arrow { transform: translateX(2px); }

@media (min-width: 900px) {
  html body .site-header .nav-links { display: flex !important; }
}

/* ─────────────────────────────────────────────────────────
   Menus déroulants navbar (Atelier, Magazine) — ouverture au CLIC.
   Géré par /nav-dropdown.js (toggle .is-open + aria-expanded).
   Visible ≥900px comme le reste de .nav-links (pas de nav < 900px).
   ───────────────────────────────────────────────────────── */
html body .site-header .nav-links .nav-has-dd { position: relative; }
html body .site-header .nav-links .nav-dd-toggle {
  display: inline-flex !important; align-items: center; gap: 5px;
  font-family: inherit; font-size: 14px !important; font-weight: 500 !important;
  color: var(--text-muted) !important;
  background: none !important; border: 0 !important; padding: 4px 0 !important;
  cursor: pointer; position: relative;
  transition: color 160ms cubic-bezier(.2,.7,.2,1);
}
html body .site-header .nav-links .nav-dd-toggle:hover,
html body .site-header .nav-links .nav-has-dd.is-open .nav-dd-toggle { color: var(--accent) !important; }
html[data-theme="dark"] body .site-header .nav-links .nav-dd-toggle { color: #A8A39C !important; }
html[data-theme="dark"] body .site-header .nav-links .nav-dd-toggle:hover,
html[data-theme="dark"] body .site-header .nav-links .nav-has-dd.is-open .nav-dd-toggle { color: #FF5722 !important; }
.nav-caret { flex-shrink: 0; opacity: .55; transition: transform .18s ease; }
.nav-has-dd.is-open .nav-caret { transform: rotate(180deg); opacity: .9; }

.nav-dd {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 272px; max-width: 320px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px;
  background: var(--bg, #EDEAE2);
  border: 1px solid var(--border, #D6D1C5);
  border-radius: 16px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.08);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 200;
}
html[data-theme="dark"] .nav-dd { background: #232120; border-color: #2F2C29; }
.nav-has-dd.is-open .nav-dd {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Items : neutraliser le style hérité de `.nav-links a` (spéc 0,9,1 via :not ×6
   → on rejoint la chaîne pour gagner) ; le texte est porté par des <span>. */
html body .site-header .nav-links .nav-dd a,
html body .site-header .nav-links .nav-dd a:not(.logo):not(.brand):not(.btn):not(.cta-primary):not(.btn-primary):not(.btn-cta) {
  display: flex !important; flex-direction: column; gap: 1px;
  padding: 8px 11px !important; border-radius: 10px;
  text-decoration: none !important; background: none;
}
html body .site-header .nav-links .nav-dd a:hover,
html body .site-header .nav-links .nav-dd a:not(.logo):not(.brand):not(.btn):not(.cta-primary):not(.btn-primary):not(.btn-cta):hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
}
html body .site-header .nav-links .nav-dd a::after { display: none !important; content: none !important; }
.nav-dd-t {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 600; font-size: 0.92rem; line-height: 1.25;
  color: var(--text, #1A1816);
}
.nav-dd-d {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 0.76rem; line-height: 1.3;
  color: var(--text-muted, #6B655B);
}
html[data-theme="dark"] .nav-dd-t { color: #F2EEE8; }
html[data-theme="dark"] .nav-dd-d { color: #A8A39C; }
.nav-dd-all { margin-top: 2px; border-top: 1px solid var(--border, #D6D1C5); border-radius: 0 0 10px 10px; }
html[data-theme="dark"] .nav-dd-all { border-top-color: #2F2C29; }
.nav-dd-all .nav-dd-t { color: var(--accent, #AD380D); }
html[data-theme="dark"] .nav-dd-all .nav-dd-t { color: #FF6B35; }

/* ─────────────────────────────────────────────────────────
   Burger + menu mobile (< 900px). Réutilise le markup des déroulants :
   .nav-links devient un panneau, chaque .nav-dd un accordéon (.is-open).
   ───────────────────────────────────────────────────────── */
html body .site-header .nav-burger {
  display: inline-flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  width: 44px !important; height: 44px !important; border-radius: 999px !important;
  border: 1px solid var(--border) !important; background: transparent !important;
  color: var(--text-muted) !important; cursor: pointer; padding: 0 !important;
}
html body .site-header .nav-burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .2s ease, opacity .2s ease;
}
html body .site-header.nav-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
html body .site-header.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
html body .site-header.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 900px) { html body .site-header .nav-burger { display: none !important; } }

@media (max-width: 899px) {
  html body .site-header.nav-open .nav-links {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    gap: 0 !important;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 16px 32px -12px rgba(0,0,0,.28) !important;
    padding: 6px 16px 16px !important;
    max-height: calc(100vh - 58px); overflow-y: auto;
  }
  html body .site-header .nav-links > li { width: 100%; border-top: 1px solid var(--border); }
  html body .site-header .nav-links > li:first-child { border-top: 0; }
  html body .site-header .nav-links .nav-dd-toggle,
  html body .site-header .nav-links > li > a {
    width: 100%; justify-content: space-between;
    padding: 14px 2px !important; font-size: 16px !important;
  }
  html body .site-header .nav-links a::after { display: none !important; content: none !important; }
  .nav-links .nav-dd {
    position: static; transform: none !important;
    opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; max-width: none;
    border: 0; border-radius: 0; box-shadow: none; background: none;
    padding: 0 0 8px 10px; gap: 0; z-index: auto;
    display: none;
  }
  .nav-links .nav-has-dd.is-open .nav-dd { display: flex; }
  html body .site-header .nav-links .nav-dd a,
  html body .site-header .nav-links .nav-dd a:not(.logo):not(.brand):not(.btn):not(.cta-primary):not(.btn-primary):not(.btn-cta) {
    padding: 9px 8px !important;
  }
  .nav-dd-all { border-top: 0 !important; }
}

/* Header compact ≤480px : empêcher "Démarrer" de déborder (nav-actions ≈ 232px
   dépassait sous ~440px). Cibles tactiles 44px conservées (burger/thème). */
@media (max-width: 480px) {
  html body .site-header .nav-actions { gap: 8px !important; }
  html body .site-header .brand-text { font-size: 19px !important; }
  html body .site-header .btn { padding: 0 12px !important; font-size: 13px !important; }
  html body .site-header .btn .arrow { display: none !important; }
}

/* Dark mode : brand blanc + dot orange (matche le mockup home) */
html[data-theme="dark"] body .site-header,
html[data-theme="dark"] body:not(.on-landing) .site-header {
  background: color-mix(in srgb, #1A1816 80%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, #2F2C29 60%, transparent) !important;
}
html[data-theme="dark"] body .site-header .brand,
html[data-theme="dark"] body .site-header .brand-text {
  color: #F5F1ED !important;
}
html[data-theme="dark"] body .site-header .brand-dot { color: #FF5722 !important; }
html[data-theme="dark"] body .site-header .nav-links a { color: #A8A39C !important; }
html[data-theme="dark"] body .site-header .nav-links a:hover { color: #FF5722 !important; }
html[data-theme="dark"] body .site-header .theme-toggle {
  color: #A8A39C !important; border-color: #2F2C29 !important;
}
html[data-theme="dark"] body .site-header .theme-toggle:hover {
  color: #FF5722 !important; border-color: #45413D !important;
}

/* ════════════════════════════════════════════════════════════════════
   FIX TEXTE BLANC sur fond orange
   ────────────────────────────────────────────────────────────────────
   PROBLÈME : la règle ligne 309 `a:not(.logo):not(.brand)…` (spec 0,6,1)
   force #E64A19 sur tous les <a> non-exclus → texte orange illisible
   sur fond orange. Notre règle simple `.cta-btn` (spec 0,1,0) perd la
   bataille de spécificité, même avec !important.
   ────────────────────────────────────────────────────────────────────
   SOLUTION : modifier directement la règle ligne 309 pour exclure aussi
   toutes les classes de boutons orange connues. Le ":not()" ajouté
   monte la spécificité à (0,13,1) et débloque la cascade naturelle des
   color:#fff propres à chaque classe.
   ════════════════════════════════════════════════════════════════════ */

/* Override de la règle "a:not(...)" (spec 0,6,1) pour les boutons orange.
   Pour gagner la bataille de spec, on duplique la même chaîne :not() à 7+ classes,
   ce qui donne 0,7,X > 0,6,1. La 7e classe (.never) est inerte mais compte. */
html body a.cta-btn:not(.logo):not(.brand):not(.never):not(.never2):not(.never3):not(.never4):not(.never5),
html body a.cta-back:not(.logo):not(.brand):not(.never):not(.never2):not(.never3):not(.never4):not(.never5),
html body .cta-back a:not(.logo):not(.brand):not(.never):not(.never2):not(.never3):not(.never4):not(.never5),
html body a.btn--primary:not(.logo):not(.brand):not(.never):not(.never2):not(.never3):not(.never4):not(.never5),
html body a.btn-primary:not(.logo):not(.brand):not(.never):not(.never2):not(.never3):not(.never4):not(.never5),
html body a.calc-cta:not(.logo):not(.brand):not(.never):not(.never2):not(.never3):not(.never4):not(.never5),
html body a.btn-next:not(.logo):not(.brand):not(.never):not(.never2):not(.never3):not(.never4):not(.never5),
html body a.btn-resume:not(.logo):not(.brand):not(.never):not(.never2):not(.never3):not(.never4):not(.never5),
html body a.btn-start--primary:not(.logo):not(.brand):not(.never):not(.never2):not(.never3):not(.never4):not(.never5),
html body a.cta-bar:not(.logo):not(.brand):not(.never):not(.never2):not(.never3):not(.never4):not(.never5),
html body .cta-bar a.primary:not(.logo):not(.brand):not(.never):not(.never2):not(.never3):not(.never4):not(.never5),
html body a.reco-badge:not(.logo):not(.brand):not(.never):not(.never2):not(.never3):not(.never4):not(.never5),
html body a.resume-devis-cta:not(.logo):not(.brand):not(.never):not(.never2):not(.never3):not(.never4):not(.never5),
html body a.cta-btn:not(.logo):not(.brand):not(.never):not(.never2):not(.never3):not(.never4):not(.never5) *,
html body .cta-back a:not(.logo):not(.brand):not(.never):not(.never2):not(.never3):not(.never4):not(.never5) * {
  color: #ffffff !important;
}

/* Classes VRAIMENT orange (background:var(--accent) fixe, pas mode-aware) */
html body .btn--primary,
html body .btn--primary *,
html body a.btn--primary,
html body a.btn--primary *,
html body button.btn--primary,
html body button.btn--primary *,
html body .btn-primary,
html body .btn-primary *,
html body .cta-btn,
html body .cta-btn *,
html body .cta-primary,
html body .cta-primary *,
html body .cta-back > a,
html body .cta-back > a *,
html body .calc-cta,
html body .calc-cta *,
html body .btn-next,
html body .btn-next *,
html body .btn-resume,
html body .btn-resume *,
html body .btn-action.primary,
html body .btn-action.primary *,
html body .fab-restart,
html body .fab-restart *,
html body .btn-start--primary,
html body .btn-start--primary *,
html body .cta-bar a.primary,
html body .cta-bar a.primary *,
html body .pdf-modal-actions .btn-primary,
html body .pdf-modal-actions .btn-primary *,
html body .resume-devis-cta,
html body .resume-devis-cta * {
  color: #ffffff !important;
}

/* NOTE : .btn-cta, .reco-badge, .level-confirme, .result-hero, .empty-step .step-num
   sont volontairement EXCLUS : ils ont des backgrounds mode-aware (var(--text)
   qui s'inverse light/dark) — forcer color:#fff casserait le contraste. */

/* FIX défensif : .cta-section (article.css) a un fond clair (linear-gradient
   --accent-light → --bg-card). Le <p> doit garder var(--text) lisible.
   Spec (0,2,1) > p {!important} (0,0,1) et > [data-theme="dark"] p (0,1,1) */
html body .cta-section,
html body .cta-section p,
html body .cta-section h2,
html body .cta-section h3 {
  color: var(--text) !important;
}
[data-theme="dark"] html body .cta-section,
[data-theme="dark"] html body .cta-section p,
[data-theme="dark"] html body .cta-section h2,
[data-theme="dark"] html body .cta-section h3 {
  color: var(--text) !important;
}
/* Et idem pour la hero-subtitle qui utilise var(--text-3) (maintenant défini) */
html body .hero-subtitle,
html body .hero-eyebrow {
  color: var(--text-3) !important;
}

/* Styles inline : tout élément avec background orange → texte blanc */
html body [style*="background:var(--accent)"],
html body [style*="background: var(--accent)"],
html body [style*="background:var(--accent,"],
html body [style*="background: var(--accent,"],
html body [style*="background:#E64A19"],
html body [style*="background: #E64A19"],
html body [style*="background:#FF5722"],
html body [style*="background: #FF5722"],
html body [style*="background:#ea580c"],
html body [style*="background: #ea580c"] {
  color: #ffffff !important;
}
html body [style*="background:var(--accent)"] *,
html body [style*="background: var(--accent)"] *,
html body [style*="background:var(--accent,"] *,
html body [style*="background: var(--accent,"] *,
html body [style*="background:#E64A19"] *,
html body [style*="background: #E64A19"] *,
html body [style*="background:#FF5722"] *,
html body [style*="background: #FF5722"] *,
html body [style*="background:#ea580c"] *,
html body [style*="background: #ea580c"] * {
  color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════════════════
   FIN — design-v2.css "Brûlot"
   ════════════════════════════════════════════════════════════════════ */