/* Self-hosted Nunito variable font (no external requests) */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url('/fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url('/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== Design tokens (CSS custom properties) ===== */
:root {
  --color-primary: #22C55E;
  --color-primary-hover: #16A34A;
  --color-dark: #0F172A;
  --color-heading: #1E3A5F;
  --color-text: #5f6061;
  --color-text-light: #6B7280;
  --color-text-dark: #0F172A;
  --color-bg: #ffffff;
  --color-bg-alt: #f8f9fa;
  --color-bg-input: #f1f1f1;
  --color-border: #e5e7eb;
  --color-border-strong: #dbdee0;
  --color-success-bg: #F0FDF4;
  --color-success-border: #BBF7D0;
  --color-success-text: #166534;
  --color-error-bg: #FEF2F2;
  --color-error-border: #FECACA;
  --color-error-text: #991B1B;
  --color-badge-bg: #DCFCE7;
  --radius: 5px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --shadow: 0 2px 10px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 20px rgba(0,0,0,0.1);
}
html.dark {
  --color-bg: #0F172A;
  --color-bg-alt: #1E293B;
  --color-bg-input: #1E293B;
  --color-text: #CBD5E1;
  --color-text-light: #94A3B8;
  --color-text-dark: #F1F5F9;
  --color-heading: #F1F5F9;
  --color-border: #334155;
  --color-border-strong: #334155;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; overflow-x: clip; }
body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--color-text); background: var(--color-bg); line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; }
img[width] { height: auto; }
ul { list-style: none; }
/* ⚠️ NE PAS remettre `ol` dans le reset ci-dessus. Il y était, et supprimait les numéros de
   TOUTES les listes ordonnées du site — FR, ES et DE, qui partagent cette feuille. Des pages
   entières annonçaient « les trois étapes, dans cet ordre » puis rendaient une liste sans le
   moindre chiffre ; plusieurs auteurs avaient d'ailleurs ajouté un `padding-left` en ligne pour
   loger des puces qui n'apparaissaient jamais. Vérifié le 24/08/2026 : aucun `<ol>` du site ne
   sert de fil d'Ariane, de navigation ni de menu — ils portent tous du contenu, donc rétablir
   les numéros ne peut rien casser ailleurs. Les `<ol>` qui fixent leur propre `padding-left`
   en ligne gardent le leur. */
ol { list-style: decimal; padding-left: 24px; }

/* ===== Typography ===== */
h1 { font-size: 2.25rem; font-weight: 700; line-height: 1.15; color: var(--color-heading); margin-bottom: 16px; }
h2 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--color-heading); margin-top: 48px; margin-bottom: 20px; }
h3 { font-size: 1.125rem; font-weight: 700; color: var(--color-heading); margin-bottom: 8px; }
p { margin-bottom: 16px; color: var(--color-text); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
small, .text-muted { color: var(--color-text); font-size: 0.875rem; }
strong { font-weight: 700; }

/* ===== Layout ===== */
.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }
main { min-height: calc(100vh - 160px); padding: 48px 24px; max-width: 960px; margin: 0 auto; }

/* ===== Nav ===== */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--color-dark); }
.nav { display: flex; align-items: center; justify-content: space-between; max-width: 960px; margin: 0 auto; padding: 14px 24px; min-height: 56px; }
.nav a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.9375rem; font-weight: 600; transition: color 0.2s; }
.nav a:hover { color: #fff; }
.nav-logo { font-weight: 800; font-size: 1.25rem; color: #fff !important; letter-spacing: -0.02em; }
.nav-logo .logo-dot-fr,
.nav-logo .nav-logo__accent { color: #22C55E; font-weight: 700; }
.nav-logo img { display: block; height: 28px; width: 145px; }
/* Un libellé de menu ne se coupe JAMAIS en deux lignes : « Analisi CV » s'affichait « Analisi »
   au-dessus de « CV » sur les 407 pages italiennes, ce qui décalait toute la barre et faisait
   chevaucher le logo par la première entrée. On autorise le retour à la ligne ENTRE les entrées
   (flex-wrap) et on l'interdit À L'INTÉRIEUR de chacune (nowrap) : une barre trop chargée passe
   alors proprement sur deux rangs au lieu de casser un mot. */
/* ⚠️ 22 px et non 28 : à 28, la barre italienne réclamait 797 px pour 772 disponibles et passait
   sur trois rangs dès qu'on lui interdisait de couper les mots. L'écart se reprend sur l'espace
   entre entrées, pas sur les libellés. */
.nav-links { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.nav-links > li > a, .nav-links > li > .nav-dropdown__trigger { white-space: nowrap; }
.nav-burger { display: none; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; padding: 4px 8px; }
.nav-dropdown { position: relative; }
.nav-dropdown__trigger { cursor: pointer; background: none; border: none; color: rgba(255,255,255,0.75); font-size: 0.9375rem; font-weight: 600; font-family: inherit; padding: 0; line-height: inherit; }
.nav-dropdown__trigger:hover { color: #fff; }
.nav-dropdown__menu { display: none; position: absolute; top: 100%; right: 0; background: #1E293B; border-radius: 10px; padding: 20px 20px 16px; width: 620px; max-width: calc(100vw - 24px); box-shadow: 0 12px 32px rgba(0,0,0,0.35); z-index: 200; grid-template-columns: repeat(3, 1fr); gap: 4px 20px; }
.nav-dropdown__menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-dropdown__menu--open { display: grid; }
.nav-dropdown__col { min-width: 0; }
.nav-dropdown__heading { color: rgba(255,255,255,0.45); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; padding: 0 8px; }
.nav-dropdown__menu a { display: block; padding: 6px 8px; color: rgba(255,255,255,0.82); font-size: 0.8125rem; font-weight: 500; border-radius: 4px; white-space: normal; line-height: 1.35; }
.nav-dropdown__menu a:hover { background: rgba(34,197,94,0.1); color: #22C55E; }
a.nav-dropdown__all { grid-column: 1 / -1; text-align: center; border-top: 1px solid rgba(255,255,255,0.15); margin-top: 8px; padding: 12px 8px 8px; font-weight: 700; font-size: 0.875rem; color: #22C55E; }
a.nav-dropdown__all:hover { color: #16A34A; background: transparent; }
@media (max-width: 768px) {
  .nav-burger { display: block; }
  .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #0F172A; padding: 16px 24px 32px; gap: 4px; z-index: 10000; border-top: 1px solid rgba(255,255,255,0.1); box-shadow: 0 8px 24px rgba(0,0,0,0.3); max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 10px 0; font-size: 1rem; }
  .nav--open .nav-links { display: flex; }
  .nav-dropdown__menu { position: static; box-shadow: none; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 8px 12px; margin-top: 4px; width: auto; max-width: none; grid-template-columns: 1fr; gap: 0; }
  .nav-dropdown__menu::before { display: none; }
  .nav-dropdown__menu--open { display: block; }
  .nav-dropdown__trigger { display: block; padding: 10px 0; font-size: 1rem; text-align: left; width: 100%; }
  .nav-dropdown__col { margin-bottom: 6px; }
  .nav-dropdown__heading { padding: 6px 4px 2px; margin-bottom: 0; }
  .nav-dropdown__menu a { padding: 6px 4px; font-size: 0.875rem; }
  a.nav-dropdown__all { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 6px; padding: 12px 4px 10px; text-align: center; font-size: 0.9375rem; }
}

/* ===== Footer (3 colonnes) ===== */
.site-footer { /* Hérite de .dark-section */ }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 48px 24px 32px; font-size: 0.875rem; }
.footer-columns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; margin-bottom: 32px; text-align: left; }
.footer-col h3 { color: #fff; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; margin-top: 0; font-weight: 700; }
.footer-col a { display: block; color: rgba(255,255,255,0.6); text-decoration: none; padding: 5px 0; font-size: 0.875rem; }
.footer-col a:hover { color: #22C55E; }
.footer-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; }
.footer-copy { color: rgba(255,255,255,0.55); margin: 0; }
.footer-stats { color: rgba(255,255,255,0.45); font-size: 0.8125rem; margin-top: 4px; }

/* ===== Buttons ===== */
.btn, .btn-primary {
  display: inline-block; padding: 12px 24px; background: #0F172A; color: #fff;
  border: none; border-radius: 5px; font-size: 1rem; font-weight: 700;
  cursor: pointer; text-decoration: none; text-align: center; transition: background 0.2s;
}
.btn:hover, .btn-primary:hover { background: #1a1850; color: #fff; }
.btn:active { background: #0a0830; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--outline, .btn-outline { background: transparent; color: #5f6061; border: 1px solid #dbdee0; }
.btn--outline:hover, .btn-outline:hover { background: #f8f9fa; color: #5f6061; }
.btn--small { padding: 8px 16px; font-size: 0.875rem; }
.btn--success { background: #0F172A; }
.btn--success:hover { background: #1a1850; }
.btn--large { padding: 16px 32px; font-size: 1.0625rem; }
.btn-submit {
  display: block; width: 100%; padding: 14px 24px; background: var(--color-primary); color: var(--color-dark);
  border: none; border-radius: var(--radius); font-size: 1.0625rem; font-weight: 700;
  cursor: pointer; text-align: center; margin-top: 8px; transition: background 0.2s;
}
.btn-submit:hover { background: var(--color-primary-hover); }
.btn-submit:active { background: #32b584; }
.form-reassurance { text-align: center; font-size: 0.8125rem; color: #6b7280; margin-top: 12px; margin-bottom: 0; }
.form-errors { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 5px; padding: 14px 18px; margin-bottom: 20px; font-size: 0.9375rem; }
.form-errors p { margin: 0 0 4px; color: inherit; }
.form-errors p:last-child { margin-bottom: 0; }

/* ===== Forms ===== */
.form-group { margin-bottom: 24px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 0.9375rem; color: #0F172A; }
.form-group input, .form-group select {
  width: 100%; padding: 12px 14px; border: none; border-radius: 5px;
  font-size: 1rem; background: #f1f1f1; color: #0F172A; transition: border-color 0.2s;
  border-bottom: 2px solid transparent;
}
.form-group input:focus, .form-group select:focus {
  outline: none; border-bottom: 2px solid var(--color-primary); background: var(--color-bg-input);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.25);
}
.form-group input:focus-visible, .form-group select:focus-visible {
  box-shadow: 0 0 0 3px rgba(34,197,94,0.4);
}
.form-group select:disabled { opacity: 0.5; cursor: not-allowed; }
.form-group .field-error { border-bottom: 2px solid #dc2626; }
.form-group .field-error:focus { border-bottom: 2px solid #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.25); }
.field-error-msg { color: #dc2626; font-size: 0.8125rem; margin-top: 4px; display: block; }
.form-hint { color: #374151; font-size: 0.8125rem; margin-top: 4px; display: block; }
.form-optional { font-weight: 400; color: #6b7280; font-style: italic; font-size: 0.875em; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-submit { margin-top: 12px; }

/* ===== Wizard steps indicator ===== */
.wizard-steps { display: flex; gap: 8px; margin-bottom: 24px; }
.wizard-step { flex: 1; text-align: center; padding: 10px 0; font-size: 0.8125rem; font-weight: 600; color: #6b7280; border-bottom: 3px solid #e5e7eb; transition: color 0.2s, border-color 0.2s; }
.wizard-step--active { color: #0F172A; border-bottom-color: #22C55E; }
.wizard-step--done { color: #22C55E; border-bottom-color: #22C55E; }
.wizard-panel h3 { font-size: 1.125rem; color: #0F172A; }

.form-section { max-width: 640px; margin: -40px auto 0; padding: 0 24px; position: relative; z-index: 10; }
.benchmark-form, #benchmark-form {
  max-width: 640px; margin: 0 auto; background: #fff; border-radius: 10px;
  padding: 32px; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.1); position: relative;
}
.benchmark-form--compact { padding: 24px; }

/* ===== Alert ===== */
.alert { padding: 14px 18px; border-radius: 5px; margin-bottom: 20px; font-size: 0.9375rem; }
.alert--error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.alert--error ul { margin-top: 8px; padding-left: 20px; list-style: disc; }
.alert--error li { margin-bottom: 4px; }

/* ===== Input with suffix ===== */
.input-with-suffix { position: relative; display: flex; align-items: stretch; }
.input-with-suffix input { flex: 1; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-suffix {
  display: inline-flex; align-items: center; padding: 0 14px;
  background: #f1f1f1; border: none; border-left: 1px solid #dbdee0;
  border-radius: 0 5px 5px 0; font-size: 0.875rem; font-weight: 700; color: #5f6061;
}
.input--large { font-size: 1.25rem !important; font-weight: 700 !important; padding: 14px 16px !important; }
.form-group--tjm { margin-bottom: 24px; }
.form-group--tjm label { font-size: 1rem; }

/* ===== Hero ===== */
/* Template dark section — un seul endroit pour le style dark (hero, footer, CTA) */
.dark-section { background-color: #0F172A; background-position: center center; background-size: cover; background-repeat: no-repeat; color: #fff; position: relative; overflow: hidden; }
.dark-section::before { content: ''; position: absolute; inset: 0; background: rgba(15, 23, 42, 0.75); z-index: 1; }
.dark-section > * { position: relative; z-index: 2; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.dark-section h1, .dark-section h2, .dark-section h3 { color: #fff; }
/* CTA sur fond sombre : .btn-primary a un fond #0F172A, identique à celui de .dark-section —
   le bouton principal se fondait dans le hero et ne se lisait pas comme cliquable, tandis que
   le bouton secondaire (bordé) paraissait plus actionnable : la hiérarchie visuelle était
   inversée. On remplit le bouton principal en vert de marque sur texte sombre (même traitement
   que .btn-submit, contraste AA). Corrigé le 29/07/2026. */
.dark-section .btn, .dark-section .btn-primary { background: var(--color-primary); color: var(--color-dark); }
.dark-section .btn:hover, .dark-section .btn-primary:hover { background: #16A34A; color: var(--color-dark); }
.dark-section .btn--outline, .dark-section .btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.55); }
.dark-section .btn--outline:hover, .dark-section .btn-outline:hover { background: rgba(255,255,255,0.10); color: #fff; }
.dark-section p, .dark-section li { color: rgba(255,255,255,0.7); }
.dark-section a { color: #22C55E; }
.dark-section strong { color: #fff; }

/* Hero = dark-section + layout spécifique */
.hero { text-align: center; padding: 60px 24px 88px; margin-bottom: 0; width: 100vw; left: 50%; margin-left: -50vw; margin-top: -48px; }
.hero h1 { font-size: 2.25rem; color: #fff; }
.hero-subtitle, .hero p { font-size: 1.125rem; color: rgba(255,255,255,0.7); max-width: 560px; margin: 0 auto 32px; }
.hero-preview { font-size: 0.9375rem; color: #22C55E; margin-top: 24px; margin-bottom: 0; }
.hero-preview strong { color: #fff; font-weight: 700; }

/* ===== How it works (home) ===== */
.how-it-works { text-align: center; padding: 48px 24px; background: #f8f9fa; width: 100vw; position: relative; left: 50%; margin-left: -50vw; }
.how-it-works h2 { font-size: 1.5rem; margin-top: 0; margin-bottom: 32px; color: #0F172A; }
.hiw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: left; max-width: 960px; margin: 0 auto; }
.hiw-item strong { display: block; font-size: 1rem; color: #0F172A; margin-bottom: 4px; }
.hiw-item p { font-size: 0.9375rem; color: #5f6061; margin: 0; }

/* ===== Hero Premium ===== */
.hero-premium { text-align: center; padding: 80px 24px 120px; width: 100vw; position: relative; left: 50%; margin-left: -50vw; margin-top: -48px; }
.hero-premium::before { display: none; }
.hero-premium__inner { max-width: 640px; margin: 0 auto; }
.hero-premium__title { font-size: 2.25rem; font-weight: 700; color: #0F172A; margin-bottom: 16px; line-height: 1.15; }
.hero-premium__subtitle { font-size: 1.125rem; color: #5f6061; margin-bottom: 40px; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.hero-premium__subtitle strong { color: #0F172A; font-weight: 700; }
.hero-premium__badge, .hero-premium__badge-label, .hero-premium__badge-value, .hero-premium__badge-hint { display: none; }

/* ===== Form Card ===== */
.form-card-section { max-width: 640px; margin: -72px auto 0; padding: 0 24px; position: relative; z-index: 2; }
.form-card { background: #fff; border-radius: 10px; padding: 36px 32px; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.form-card__heading { font-size: 1.25rem; font-weight: 700; text-align: center; margin: 0 0 24px; color: #0F172A; }
.form-card__footer { text-align: center; margin-top: 16px; font-size: 0.8125rem; color: #6b7280; }
.form-card__reassurance { text-align: center; font-size: 0.8125rem; color: #6b7280; margin-top: 16px; margin-bottom: 0; }
.btn-premium {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 24px; background: #22C55E; color: #0F172A;
  border: none; border-radius: 5px; font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: background 0.2s;
}
.btn-premium:hover { background: #16A34A; }
.btn-premium:active { background: #32b584; }
.btn-premium svg { flex-shrink: 0; }
.btn-premium--light { background: #22C55E; color: #0F172A; }
.btn-premium--light:hover { background: #16A34A; }

/* ===== Result Hero ===== */
.result-hero { text-align: center; padding: 60px 24px 48px; width: 100vw; left: 50%; margin-left: -50vw; margin-top: -48px; margin-bottom: 40px; }
/* Hérite de .dark-section pour background + overlay */
.result-hero h1, .result-hero h2, .result-hero strong { color: #fff; }
.result-hero__number { font-size: 2.5rem; font-weight: 700; color: #22C55E; line-height: 1; display: block; }
.result-hero__subtitle { font-size: 1.125rem; color: rgba(255,255,255,0.7); margin-top: 8px; }
.result-hero .gauge-labels span { color: rgba(255,255,255,0.6); }
.result-hero .gauge-marker__label { color: #fff; }
.result-hero .gauge-bar { background: rgba(255,255,255,0.15); }
.result-hero .gauge-fill { background: #22C55E; }
.result-hero .gauge-marker { background: #fff; }
.result-hero .btn--outline { border-color: rgba(255,255,255,0.3); color: #fff; }
.result-hero .btn--outline:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ===== Gauge ===== */
.gauge { margin: 28px auto; max-width: 640px; }
.gauge-bar { width: 100%; height: 10px; background: #f1f1f1; border-radius: 10px; position: relative; overflow: visible; }
.gauge-fill { height: 100%; border-radius: 10px; background: #22C55E; }
.gauge-marker { position: absolute; top: -6px; width: 4px; height: 22px; background: #0F172A; border-radius: 2px; transform: translateX(-50%); }
.gauge-marker__label { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; font-weight: 700; white-space: nowrap; color: #0F172A; }
.gauge-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.75rem; color: #5f6061; font-weight: 600; }

/* ===== Stat Boxes ===== */
.stat-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
.stat-box { background: #fff; border-radius: 10px; padding: 24px; text-align: center; border: none; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.stat-box--primary, .stat-box--highlight { border-bottom: 3px solid #22C55E; }
.stat-box--user { border-bottom: 3px solid #22C55E; }
.stat-box__label { display: block; font-size: 0.75rem; color: #5f6061; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.stat-box__value { display: block; font-size: 2.5rem; font-weight: 700; margin: 8px 0 4px; color: #0F172A; letter-spacing: -0.02em; line-height: 1.1; }
.stat-box__value small { font-size: 0.8125rem; font-weight: 500; color: #6b7280; letter-spacing: 0; }
.stat-box__note { display: block; font-size: 0.8125rem; color: #6b7280; }

/* ===== Tables ===== */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison-table, .data-table { width: 100%; border-collapse: collapse; margin: 24px 0; background: #fff; }
.comparison-table th, .data-table th {
  text-align: left; padding: 12px 14px; border-bottom: 2px solid #dbdee0;
  font-size: 0.8125rem; color: #5f6061; font-weight: 700;
}
.comparison-table td, .data-table td { padding: 12px 14px; border-bottom: 1px solid #f1f1f1; }
.comparison-table__row--current td { font-weight: 700; }
.comparison-table__row--best td { font-weight: 700; }
.data-table__row--highlight td { font-weight: 700; }

/* ===== Comparison Cards (mobile) ===== */
.comparison-cards { display: none; }
.comparison-card { background: #fff; border-radius: 10px; padding: 16px; border: 1px solid #dbdee0; margin-bottom: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.comparison-card--current { border-color: #22C55E; }
.comparison-card--best { border-color: #22C55E; }
.comparison-card__header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.comparison-card__status { font-weight: 700; color: #0F172A; }
.comparison-card__body { display: flex; justify-content: space-between; align-items: baseline; }
.comparison-card__net { font-size: 1.25rem; font-weight: 700; color: #0F172A; }
.comparison-card__diff { font-size: 0.875rem; }

/* ===== Badges ===== */
.badge { display: inline-block; padding: 2px 10px; border-radius: 5px; font-size: 0.75rem; font-weight: 700; margin-left: 8px; background: #f1f1f1; color: #5f6061; }
.badge--best { background: #DCFCE7; color: #0F172A; }
.badge--current, .badge--you { background: #DCFCE7; color: #0F172A; }
.badge-source { background: #f1f1f1; color: #5f6061; }
.diff--positive, .positive { color: #0F172A; font-weight: 700; }
.diff--negative, .negative { color: #5f6061; font-weight: 700; }

/* ===== Affiliate Cards ===== */
.affiliate-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.affiliate-card { border: none; border-radius: 10px; padding: 24px; margin: 24px 0; background: #fff; position: relative; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.affiliate-label {
  position: absolute; top: -10px; left: 16px; background: #f1f1f1; color: #6b7280;
  font-size: 0.6875rem; padding: 2px 8px; border-radius: 5px; text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 700;
}
.affiliate-card__name { font-size: 1.0625rem; font-weight: 700; color: #0F172A; }
.affiliate-card__tagline, .affiliate-tagline { color: #5f6061; font-size: 0.875rem; margin-bottom: 8px; }
.affiliate-card__context { color: #5f6061; font-size: 0.9375rem; margin-bottom: 12px; }
.affiliate-card__desc { color: #5f6061; font-size: 0.9375rem; margin-bottom: 16px; line-height: 1.6; }
.affiliate-cta { display: inline-block; padding: 10px 20px; background: #22C55E; color: #0F172A; border-radius: 5px; font-weight: 700; font-size: 0.9375rem; text-decoration: none; transition: background 0.2s; }
.affiliate-cta:hover { background: #16A34A; color: #0F172A; }

/* ===== Share Card ===== */
.share-card { background: #fff; border: 1px solid #dbdee0; border-radius: 10px; padding: 28px; text-align: center; margin: 28px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.06); position: relative; z-index: 2; }
.share-card p, .share-card strong { color: #0F172A !important; }
.share-card__text { font-size: 1.0625rem; margin-bottom: 16px; font-weight: 700; color: #0F172A !important; }
.share-card__buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.share-btn { padding: 8px 16px; border-radius: 5px; font-weight: 700; font-size: 0.875rem; cursor: pointer; border: 1px solid #dbdee0; background: #f9fafb; color: #374151; text-decoration: none; transition: background 0.2s; }
.share-btn:hover { background: #e5e7eb; }

/* ===== Trust line ===== */
.trust-line { text-align: center; font-size: 0.8125rem; color: #5f6061; margin: 24px 0 0; }

/* ===== Trust ===== */
.trust { margin: 32px 0; }
.trust-section, .trust-list { display: flex; gap: 32px; justify-content: center; align-items: center; padding: 24px; }
.trust-item, .trust-list li { text-align: center; font-size: 0.9375rem; color: #5f6061; font-weight: 600; display: flex; align-items: center; gap: 8px; }

/* ===== Trust Strip ===== */
.trust-strip { padding: 48px 24px; margin-top: 48px; border-top: 1px solid #dbdee0; border-bottom: 1px solid #dbdee0; width: 100vw; position: relative; left: 50%; margin-left: -50vw; }
.trust-strip__inner { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; }
.trust-strip__icon { display: none; }
.trust-strip__item { display: flex; flex-direction: column; align-items: center; }
.trust-strip__number { font-size: 1.5rem; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
.trust-strip__label { font-size: 0.875rem; font-weight: 700; color: #0F172A; margin-bottom: 2px; }
.trust-strip__sublabel { font-size: 0.8125rem; color: #5f6061; }
.trust-strip__desc { font-size: 0.875rem; color: #5f6061; line-height: 1.5; max-width: 240px; }

/* ===== Steps ===== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0; counter-reset: step; }
.steps::before { display: none; }
.step, .steps li { text-align: center; padding: 20px 16px; counter-increment: step; }
.step__number, .steps li::before { content: counter(step); display: block; font-size: 2rem; font-weight: 700; color: #0F172A; margin-bottom: 8px; }
.steps li strong { display: block; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
.steps li span { display: block; font-size: 0.9375rem; color: #5f6061; margin-top: 4px; line-height: 1.5; }

/* ===== How It Works (premium) ===== */
/* Also section (liens outils sur la home) */
.also-section { text-align: center; padding: 24px 0 48px; }
.also-section__title { font-size: 0.8125rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.also-section__links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.also-section__links a { color: #1E3A5F; font-weight: 600; font-size: 0.9375rem; text-decoration: none; padding: 8px 0; }
.also-section__links a:hover { color: #22C55E; }

.hiw-section { padding: 48px 24px; background: #f8f9fa; width: 100vw; position: relative; left: 50%; margin-left: -50vw; }
.hiw-section .section-heading,
.hiw-section h2 { text-align: center; color: #0F172A; margin-top: 0; }
.hiw-section .hiw-steps,
.hiw-section .hiw-grid { max-width: 960px; margin: 0 auto; }
.section-heading { font-size: 1.75rem; font-weight: 700; text-align: center; color: #0F172A; margin-bottom: 48px; }
.hiw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hiw-step { text-align: center; padding: 28px 20px; }
.hiw-step__icon { display: none; }
.hiw-step__number { display: block; font-size: 2rem; font-weight: 700; color: #0F172A; margin-bottom: 12px; }
.hiw-step__title { font-size: 1rem; font-weight: 700; color: #0F172A; margin-bottom: 6px; }
.hiw-step__desc { font-size: 0.875rem; color: #5f6061; line-height: 1.5; margin: 0; }
.hiw-connector, .hiw-step__connector { display: none; }

/* ===== Value Section ===== */
.value-section { padding: 64px 24px; width: 100vw; position: relative; left: 50%; margin-left: -50vw; }
.value-section .section-heading { margin-bottom: 40px; }
.value-grid { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.value-card { border: none; border-radius: 10px; padding: 28px 24px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.value-card__icon { display: none; }
.value-card__title { font-size: 1rem; font-weight: 700; color: #0F172A; margin-bottom: 6px; }
.value-card__desc { font-size: 0.9375rem; color: #5f6061; line-height: 1.6; margin: 0; }

/* ===== CTA Sections ===== */
.cta-section { border: 1px solid #dbdee0; border-radius: 10px; padding: 64px 32px; text-align: center; margin: 48px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.cta-section::before { display: none; }
.cta-section h2 { margin-top: 0; color: #0F172A; }
.cta-section p { color: #5f6061; }
.cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-buttons .btn-submit { display: inline-block; width: auto; margin-top: 0; }
.cta-premium { text-align: center; padding: 64px 24px; width: 100vw; position: relative; left: 50%; margin-left: -50vw; margin-bottom: -48px; border-top: 1px solid #dbdee0; }
.cta-premium::before { display: none; }
.cta-premium__inner { max-width: 560px; margin: 0 auto; }
.cta-premium__title { font-size: 1.75rem; font-weight: 700; color: #0F172A; margin: 0 0 8px; line-height: 1.2; }
.cta-premium__subtitle { font-size: 1rem; color: #5f6061; margin-bottom: 28px; }

/* ===== Simulateur ===== */
.sim-hero { padding: 28px 24px 56px; text-align: center; width: 100vw; left: 50%; margin-left: -50vw; margin-top: -48px; margin-bottom: 0; }
/* Hérite de .dark-section pour background + overlay */
.sim-hero__inner { max-width: 640px; margin: 0 auto; }
.sim-hero h1 { font-size: 2rem; margin-bottom: 8px; color: #fff; }
.sim-hero__subtitle { font-size: 1rem; color: rgba(255,255,255,0.7); line-height: 1.6; margin: 0; }
.sim-hero__proof { font-size: 0.8125rem; color: rgba(255,255,255,0.45); margin: 12px 0 0; letter-spacing: 0.01em; }

.sim-input-section { display: flex; justify-content: center; margin: -40px auto 40px; position: relative; z-index: 10; max-width: 960px; padding: 0 24px; }
.sim-input-card { background: #fff; border-radius: 10px; padding: 28px 32px; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.1); max-width: 480px; width: 100%; }
.sim-inputs .form-group { margin-bottom: 16px; }
.sim-inputs .form-group label { font-size: 0.9375rem; font-weight: 700; margin-bottom: 6px; display: block; }
.sim-input-wrapper { position: relative; display: flex; align-items: center; }
.sim-input-large {
  width: 100%; padding: 12px 80px 12px 14px; border: none; border-radius: 5px;
  font-size: 1.25rem; font-weight: 700; background: #f1f1f1; -moz-appearance: textfield;
  border-bottom: 2px solid transparent; transition: border-color 0.2s;
}
.sim-input-large::-webkit-inner-spin-button, .sim-input-large::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sim-input-large:focus { outline: none; border-bottom: 2px solid #22C55E; background: #f1f1f1; box-shadow: 0 0 0 3px rgba(34,197,94,0.25); }
.sim-input-large:focus-visible { box-shadow: 0 0 0 3px rgba(34,197,94,0.4); }
.sim-input-suffix { position: absolute; right: 14px; font-size: 0.875rem; font-weight: 700; color: #6b7280; pointer-events: none; }

.sim-ca-display { text-align: center; padding: 16px 0 4px; border-top: 1px solid #f1f1f1; margin-top: 8px; }
.sim-ca-label { display: block; font-size: 0.75rem; color: #5f6061; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.sim-ca { display: inline-block; font-size: 2.5rem; font-weight: 700; color: #0F172A; line-height: 1.2; }
.sim-ca-unit { display: block; font-size: 0.875rem; color: #6b7280; font-weight: 500; }
.sim-input-note { text-align: center; font-size: 0.8125rem; color: #6b7280; margin: 8px 0 0; }

/* ===== Sim Advanced ===== */
.sim-advanced { margin-top: 16px; }
.sim-advanced summary { cursor: pointer; font-size: 0.9375rem; font-weight: 700; color: #5f6061; padding: 8px 0; user-select: none; list-style: none; }
.sim-advanced summary::-webkit-details-marker { display: none; }
.sim-advanced summary::before { content: '\25B6'; display: inline-block; margin-right: 8px; font-size: 0.75rem; }
.sim-advanced[open] summary::before { transform: rotate(90deg); display: inline-block; }
.sim-advanced__content { padding: 12px 0 0; }
.sim-advanced__content .form-group { margin-bottom: 12px; }
.sim-advanced__content label { display: block; font-size: 0.875rem; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
.sim-advanced__content input[type="number"], .sim-advanced__content select {
  width: 100%; padding: 10px 12px; border: none; border-radius: 5px; font-size: 0.9375rem; background: #f1f1f1;
  border-bottom: 2px solid transparent; transition: border-color 0.2s;
}
.sim-advanced__content input[type="number"]:focus, .sim-advanced__content select:focus { outline: none; border-bottom: 2px solid #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,0.25); }
.sim-advanced__content input[type="number"]:focus-visible, .sim-advanced__content select:focus-visible { box-shadow: 0 0 0 3px rgba(34,197,94,0.4); }
.sim-advanced__content input[type="range"] { width: calc(100% - 50px); vertical-align: middle; accent-color: #22C55E; }
#sim-remuneration-pct-val { display: inline-block; width: 40px; text-align: right; font-weight: 700; font-size: 0.9375rem; color: #22C55E; }

/* ===== Sim Protection ===== */
.sim-protection { margin: 0 0 40px; }
.sim-protection h3 { text-align: center; font-size: 1.125rem; font-weight: 700; color: #0F172A; margin-bottom: 16px; }
.sim-protection .data-table { width: 100%; font-size: 0.875rem; }
.sim-protection .data-table th { font-size: 0.8125rem; }
.sim-protection .data-table td:first-child { font-weight: 700; color: #0F172A; white-space: nowrap; }

/* ===== Sim Results ===== */
.sim-results-section { }
.sim-section-title { text-align: center; font-size: 1.5rem; font-weight: 700; margin: 40px 0 24px; color: #0F172A; }

/* ===== Sim Columns ===== */
.sim-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 40px; }
.sim-column { background: #fff; border: 1px solid #dbdee0; border-radius: 10px; overflow: hidden; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.sim-column__header { height: 0; width: 100%; }
.sim-column__header--ae, .sim-column__header--eurl, .sim-column__header--sasu, .sim-column__header--portage { background: transparent; }
.sim-column__body { padding: 20px 16px 24px; }
.sim-column h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: #0F172A; padding: 14px 16px; border-bottom: 1px solid #f1f1f1; display: flex; align-items: center; gap: 8px; }
.sim-regime-toggle { font-size: 0.75rem; font-weight: 600; padding: 2px 6px; border: 1px solid #d1d5db; border-radius: 4px; background: #f9fafb; color: #374151; cursor: pointer; }
.sim-column--best { border-bottom: 3px solid #22C55E; }
.sim-column--ineligible { opacity: 0.45; }
.best-badge, .sim-badge { display: inline-block; padding: 3px 12px; background: #DCFCE7; color: #0F172A; border-radius: 5px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }

.sim-ae-warning { font-size: 0.75rem; color: #6b7280; background: #f1f1f1; padding: 4px 8px; border-radius: 5px; margin-bottom: 8px; font-weight: 700; display: inline-block; }
.conv-card-annotation { font-size: 0.75rem; color: #6B7280; margin: 6px 0 0; min-height: 1.2em; line-height: 1.4; }
.conv-card-annotation--competitive { color: #16A34A; font-weight: 600; }
.sim-net-block { margin-bottom: 4px; }
.sim-net-label { display: block; font-size: 0.75rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
.sim-net { display: block; font-size: 1.75rem; font-weight: 700; color: #0F172A; margin: 2px 0; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sim-column--ae .sim-net, .sim-column--eurl .sim-net, .sim-column--sasu .sim-net, .sim-column--portage .sim-net { color: #0F172A; }
.sim-net-monthly-block { margin-bottom: 16px; }
.sim-net-monthly { display: block; font-size: 1rem; font-weight: 700; color: #5f6061; font-variant-numeric: tabular-nums; }
.sim-net-value { display: block; font-size: 1.5rem; font-weight: 700; color: #0F172A; margin: 4px 0 8px; }

/* ===== Revenu disponible réel ===== */
.sim-revenu-dispo { background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.sim-dispo-label { display: block; font-size: 0.6875rem; color: #166534; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.sim-dispo-value { display: block; font-size: 1.375rem; font-weight: 700; color: #166534; margin: 2px 0; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sim-dispo-monthly { display: block; font-size: 0.8125rem; font-weight: 600; color: #15803D; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.sim-dispo-details { list-style: none; padding: 0; margin: 6px 0 0; border-top: 1px solid #BBF7D0; padding-top: 6px; }
.sim-dispo-details li { font-size: 0.75rem; color: #374151; line-height: 1.6; display: flex; justify-content: space-between; gap: 8px; }
.sim-dispo-details li span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== Sim Breakdown ===== */
.sim-breakdown { text-align: left; font-size: 0.8125rem; color: #5f6061; margin: 0; padding: 10px 0 0; border-top: 1px solid #f1f1f1; }
.sim-breakdown li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #f1f1f1; }
.sim-breakdown li:last-child { border-bottom: none; }
.sim-breakdown__label { flex: 1; }
.sim-breakdown__value { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; font-weight: 600; }
.sim-breakdown__charge .sim-breakdown__value { color: #5f6061; }
.sim-breakdown__total { font-weight: 700; border-top: 2px solid #dbdee0; padding-top: 6px; }
.sim-breakdown__total .sim-breakdown__value { font-weight: 700; }

/* ===== Sim Bars ===== */
.sim-bars { border: 1px solid #dbdee0; border-radius: 10px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.sim-bars__title { font-size: 1rem; font-weight: 700; margin-bottom: 16px; color: #0F172A; text-align: center; }
.sim-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sim-bar-row:last-child { margin-bottom: 0; }
.sim-bar-label { width: 140px; flex-shrink: 0; font-size: 0.8125rem; font-weight: 700; color: #5f6061; text-align: right; }
.sim-bar-track { flex: 1; height: 10px; background: #f1f1f1; border-radius: 10px; overflow: hidden; }
.sim-bar, .sim-bar__fill { height: 100%; border-radius: 10px; background: #22C55E; min-width: 4px; }
.sim-bar--ae, .sim-bar--eurl, .sim-bar--sasu, .sim-bar--portage { background: #22C55E; }
.sim-column--best .sim-bar, .sim-column--best .sim-bar__fill { background: #22C55E; }
.sim-bar-value { width: 100px; flex-shrink: 0; font-size: 0.875rem; font-weight: 700; color: #0F172A; font-variant-numeric: tabular-nums; }
.sim-bar-container { height: 10px; background: #f1f1f1; border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
.sim-disclaimer { text-align: center; font-size: 0.8125rem; color: #6b7280; margin-top: 16px; margin-bottom: 24px; }

/* ===== Sim Explanations ===== */
.sim-explications { margin-top: 48px; }
.sim-explications h2 { text-align: center; }
.sim-explications-grid, .explications-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 24px 0; }
.sim-explication-card, .explication-card { border: none; border-radius: 10px; padding: 24px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.sim-explication-card h3, .explication-card h3 { font-size: 1rem; margin-bottom: 10px; color: #0F172A; }
.sim-explication-card--ae h3, .sim-explication-card--eurl h3, .sim-explication-card--sasu h3, .sim-explication-card--portage h3 { color: #0F172A; }
.sim-explication-card ul, .explication-card ul { padding-left: 0; }
.sim-explication-card li, .explication-card li { padding: 4px 0 4px 16px; position: relative; font-size: 0.9375rem; color: #5f6061; line-height: 1.5; }
.sim-explication-card li::before, .explication-card li::before { content: '\2022'; position: absolute; left: 0; color: #dbdee0; }

/* ===== Sim CTA ===== */
.sim-cta { border: 1px solid #dbdee0; border-radius: 10px; padding: 48px 32px; text-align: center; margin: 48px 0 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); contain: layout inline-size; }
.sim-cta h2 { margin-top: 0; font-size: 1.5rem; }
.sim-cta__subtitle { color: #5f6061; font-size: 1rem; margin-bottom: 24px; }

/* ===== Email Capture ===== */
.email-capture { border: 1px solid #dbdee0; border-radius: 10px; padding: 40px; text-align: center; margin: 48px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.email-capture h2 { margin-top: 0; font-size: 1.25rem; }
.email-capture__fields { display: flex; gap: 10px; max-width: 480px; margin: 16px auto 0; }
.email-capture__fields input { flex: 1; }
.email-capture__note { display: block; margin-top: 12px; }
.email-capture__success { color: #22C55E; font-weight: 700; }
.email-form { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }

/* ===== Net Estimate ===== */
.net-estimate__hero { text-align: center; margin-bottom: 24px; }
.net-estimate__annual { font-size: 2.5rem; font-weight: 700; color: #0F172A; }
.net-estimate__monthly { font-size: 1.125rem; color: #5f6061; }
.net-estimate__best { text-align: center; margin-top: 16px; padding: 16px; border: 1px solid #dbdee0; border-radius: 10px; }
.net-estimate__cta { text-align: center; margin-top: 24px; }

/* ===== TJM Range ===== */
.tjm-range__position { font-size: 1rem; text-align: center; }
.tjm-range__recommendation { text-align: center; font-size: 1rem; color: #5f6061; }
.tjm-range__detail { text-align: center; font-size: 0.9375rem; color: #5f6061; }
.tjm-range__count { display: block; text-align: center; margin-top: 8px; }

/* ===== Recommendations ===== */
.recommendations { margin: 32px 0; }
.recommendations h2 { margin-bottom: 16px; }
.reco-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.reco-card__badge { display: inline-block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; background: #F3F4F6; color: #6B7280; }
.reco-card--action .reco-card__badge { background: #ECFDF5; color: #065F46; }
.reco-card--warning .reco-card__badge { background: #FFFBEB; color: #92400E; }
.reco-card--info .reco-card__badge { background: #EFF6FF; color: #1E40AF; }
.reco-card--tip .reco-card__badge { background: #F5F3FF; color: #5B21B6; }
.reco-card--subtle .reco-card__badge { background: #F9FAFB; color: #6B7280; }
.reco-card__title { font-size: 1.0625rem; color: #1E3A5F; margin: 0 0 8px; }
.reco-card__text { color: #374151; margin: 0; line-height: 1.6; font-size: 0.9375rem; }

/* ===== SEO / FAQ ===== */
.seo-hero { padding: 40px 0 20px; }
.seo-hero__subtitle { color: #5f6061; font-size: 1rem; }
.seo-count { font-size: 0.875rem; color: #6b7280; text-align: center; }
.seo-col-note { font-size: 0.9375rem; color: #5f6061; text-align: center; margin: 16px auto 0; max-width: 640px; line-height: 1.6; }
.seo-col-note strong { color: #0F172A; }
.seo-sirene-note { font-size: 0.875rem; color: #5f6061; text-align: center; margin: 12px auto 0; max-width: 640px; line-height: 1.5; }
.seo-market-tjm { font-size: 0.9375rem; color: #5f6061; text-align: center; margin: 14px auto 0; max-width: 640px; line-height: 1.6; }
.seo-market-tjm strong { color: #0F172A; }
.related-links { margin-top: 40px; }
.related-links h2 { font-size: 1.125rem; margin-bottom: 12px; }
.related-links__list { display: flex; flex-wrap: wrap; gap: 8px; }
.related-links__list a { display: inline-block; padding: 6px 14px; background: #F1F5F9; border-radius: 6px; color: #1E3A5F; font-size: 0.875rem; text-decoration: none; transition: background 0.15s; }
.related-links__list a:hover { background: #22C55E; color: #fff; }
.faq-section { margin-top: 48px; }
.faq-section details { border-bottom: 1px solid #dbdee0; padding: 16px 0; }
.faq-section summary { cursor: pointer; font-weight: 700; font-size: 1rem; list-style: none; color: #0F172A; padding: 4px 0; }
.faq-section summary:hover { color: #22C55E; }
.faq-section summary::-webkit-details-marker { display: none; }
.faq-section summary::before { content: '+'; color: #22C55E; font-weight: 700; margin-right: 12px; font-size: 1.125rem; display: inline-block; width: 16px; }
.faq-section details[open] summary::before { content: '\2212'; }
.faq-section details p { margin-top: 10px; color: #5f6061; }

/* ===== Voiture calculator ===== */
.vc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ===== Methodology / Page ===== */
.page-header { padding: 40px 0 20px; }
.methodo-section { margin-bottom: 32px; }
.methodo-block { margin-bottom: 24px; }
.methodo-list { margin-top: 12px; padding-left: 0; }
.methodo-list li { padding: 8px 0; margin-bottom: 6px; border-bottom: 1px solid #f1f1f1; }
.methodo-list li:last-child { border-bottom: none; }
.privacy-item { padding: 12px 0; border-bottom: 1px solid #f1f1f1; }
.privacy-check { color: #22C55E; font-weight: 700; }
.status-mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0; }
.status-mini-card { border: 1px solid #dbdee0; border-radius: 10px; padding: 16px; text-align: center; }

/* ===== Chart ===== */
.chart-section, .distribution { margin: 32px 0; }
#chart-distribution { max-width: 100%; min-height: 300px; contain: layout inline-size; }
#chart-distribution canvas { width: 100% !important; height: 300px !important; }

/* ===== Section spacing ===== */
section { padding: 4px 0; }

/* ===== Utility ===== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }
[hidden] { display: none !important; }

/* ===== Responsive ===== */
@media (max-width: 640px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.375rem; }
  main { padding: 24px 16px; }
  /* Disable 100vw hack on mobile (causes horizontal overflow) */
  .hero, .sim-hero, .result-hero, .hero-premium, .how-it-works, .trust-strip, .hiw-section, .value-section, .cta-premium {
    width: auto; left: auto; margin-left: -16px; margin-right: -16px;
  }
  .hero { padding: 48px 20px 72px; }
  .hero h1 { font-size: 2rem; }
  .result-hero { padding: 36px 20px 32px; }
  .result-hero__number { font-size: 2rem; }
  .stat-boxes { grid-template-columns: 1fr; }
  .stat-box__value { font-size: 2rem; }
  .form-row, .vc-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .trust-section, .trust-list { flex-direction: column; gap: 12px; }
  .nav-links { gap: 12px; font-size: 0.8125rem; }
  .nav-logo img { height: 24px; width: auto; }
  .hiw-grid { grid-template-columns: 1fr; gap: 20px; }
  .form-section { margin-top: -32px; padding: 0 16px; }
  .sim-hero { padding: 36px 16px 28px; margin: -24px -16px 0; }
  .sim-hero h1 { font-size: 1.625rem; }
  .sim-input-section { margin-top: -20px; padding: 0 16px; }
  .sim-input-card { padding: 20px 16px; max-width: 100%; }
  .sim-input-large { font-size: 1.125rem; padding: 10px 72px 10px 12px; }
  .sim-ca { font-size: 2rem; }
  .sim-columns { grid-template-columns: 1fr; }
  .sim-net { font-size: 1.5rem; }
  .sim-bars { padding: 16px; }
  .sim-bar-row { flex-wrap: wrap; }
  .sim-bar-label { width: 100%; text-align: left; font-size: 0.75rem; margin-bottom: -4px; }
  .sim-bar-value { width: 72px; font-size: 0.8125rem; }
  .sim-explications-grid, .explications-grid { grid-template-columns: 1fr; }
  .sim-cta { padding: 32px 20px; }
  .sim-protection .data-table { font-size: 0.75rem; }
  .sim-protection .data-table th, .sim-protection .data-table td { padding: 6px 4px; }
  .sim-protection .data-table td:first-child { white-space: normal; }
  .email-capture__fields, .email-form { flex-direction: column; }
  .share-card__buttons { flex-direction: column; align-items: center; }
  .comparison-table--desktop { display: none; }
  .comparison-cards { display: block; margin: 24px 0; }
  .net-estimate__annual { font-size: 2rem; }
  .affiliate-cards { grid-template-columns: 1fr; }
  .footer-columns { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .benchmark-form { padding: 20px; margin-left: 8px; margin-right: 8px; }
  .cta-section { padding: 40px 20px; }
  .hero-premium { padding: 48px 20px 100px; margin-top: -24px; }
  .hero-premium__title { font-size: 1.75rem; }
  .hero-premium__subtitle { font-size: 1rem; }
  .form-card-section { margin-top: -60px; padding: 0 16px; }
  .form-card { padding: 24px 16px; }
  .form-card__heading { font-size: 1.125rem; }
  .trust-strip__inner { grid-template-columns: 1fr; gap: 24px; }
  .hiw-steps { grid-template-columns: 1fr; gap: 12px; }
  .value-grid { grid-template-columns: 1fr; }
  .cta-premium { padding: 48px 20px; margin-bottom: -16px; }
  .cta-premium__title { font-size: 1.375rem; }
  .status-mini-cards { grid-template-columns: 1fr; }
  .nav { flex-wrap: wrap; gap: 8px; }
  .sim-net-value { font-size: 1.25rem; }
  .barometre-filters__inner { flex-wrap: wrap; justify-content: center; }
  .barometre-section { padding: 32px 16px; }
  .barometre-section .data-table { font-size: 0.8125rem; }
  .barometre-section .data-table th, .barometre-section .data-table td { padding: 8px 6px; }
  .barometre-cta { padding: 40px 20px; }
  .wizard-btns { flex-direction: column-reverse; gap: 8px; }
  .wizard-btns .btn,
  .wizard-btns .btn-submit { width: 100%; min-height: 48px; flex: unset !important; }
  .wizard-panel button[type="submit"] { min-height: 48px; }
  /* A9 — Cibles tactiles 44px minimum (WCAG 2.5.5) */
  .nav-links a, .nav-dropdown__trigger { min-height: 44px; display: flex; align-items: center; }
  .nav-dropdown__menu a { min-height: 44px; display: flex; align-items: center; }
  .footer-col a { min-height: 44px; display: flex; align-items: center; }
  .btn, .btn-primary, .btn-submit, .btn--outline, .affiliate-cta, .share-btn { min-height: 44px; }
  .also-section__links a { min-height: 44px; display: inline-flex; align-items: center; }
  details summary { min-height: 44px; display: flex; align-items: center; }
  .barometre-filter-pill { min-height: 44px; display: inline-flex; align-items: center; }
  /* Tables larges : scroll horizontal sur petit écran */
  .data-table, .comparison-table--desktop { display: table; }
  section > .data-table, details > .data-table, .sim-protection > .data-table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* Simulateur projection table */
  .sim-projection { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sim-projection .data-table { min-width: 480px; }
  /* Cookie banner responsive */
  #cookie-banner { font-size: 0.75rem; padding: 10px 16px; text-align: left; }
}

/* ===== Baromètre TJM ===== */
.barometre-filters { padding: 24px 24px 0; max-width: 960px; margin: 0 auto; }
.barometre-filters__inner { display: flex; gap: 8px; flex-wrap: wrap; }
.barometre-filter-pill {
  display: inline-block; padding: 6px 16px; border-radius: 20px;
  background: #f1f1f1; color: #0F172A; font-size: 0.875rem; font-weight: 600;
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.barometre-filter-pill:hover { background: #0F172A; color: #fff; }
.barometre-section { max-width: 960px; margin: 0 auto; padding: 40px 24px 0; }
.barometre-section h2 { font-size: 1.375rem; color: #0F172A; margin-bottom: 8px; }
.barometre-section__intro { font-size: 0.875rem; line-height: 1.6; color: #4B5563; margin: 0 0 16px; }
.barometre-section .data-table { border-radius: 8px; overflow: clip; }
.barometre-detail-link { font-size: 0.8125rem; color: #0F172A; font-weight: 600; text-decoration: none; white-space: nowrap; }
.barometre-detail-link:hover { text-decoration: underline; }
.barometre-insufficient { color: #6b7280; font-style: italic; text-align: center; }
.barometre-cta {
  max-width: 640px; margin: 48px auto 0; padding: 48px 24px; text-align: center;
  background: #f8f9fa; border-radius: 12px;
}
.barometre-cta h2 { font-size: 1.25rem; color: #0F172A; margin-bottom: 12px; }
.barometre-cta p { color: #5f6061; margin-bottom: 24px; }

/* Baromètre — Que faire maintenant (3 CTA) */
.barometre-next-steps {
  max-width: 900px; margin: 48px auto 0; padding: 0 20px; text-align: center;
}
.barometre-next-steps h2 { font-size: 1.375rem; color: #0F172A; margin-bottom: 6px; }
.barometre-next-steps__subtitle { color: #6B7280; margin-bottom: 28px; font-size: 0.9375rem; }
.barometre-next-steps__grid {
  display: flex; gap: 20px; justify-content: center;
}
.barometre-next-step-card {
  flex: 1 1 0; max-width: 280px; padding: 28px 22px 24px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.barometre-next-step-card__icon { font-size: 1.75rem; margin-bottom: 10px; line-height: 1; }
.barometre-next-step-card h3 { font-size: 0.9375rem; color: #0F172A; margin: 0 0 8px; font-weight: 700; }
.barometre-next-step-card p { font-size: 0.8125rem; color: #5f6061; margin: 0 0 18px; line-height: 1.55; flex: 1; }
.barometre-next-step-card .btn-submit {
  display: inline-block; width: auto; padding: 10px 22px; font-size: 0.875rem; margin-top: auto;
}
@media (max-width: 680px) {
  .barometre-next-steps__grid { flex-direction: column; align-items: center; }
  .barometre-next-step-card { max-width: 100%; width: 100%; }
}

/* Baromètre — sticky headers */
.barometre-section .data-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: #fff;
}
/* Baromètre — sortable headers */
.barometre-section .data-table th[data-sort] {
  cursor: pointer; user-select: none; white-space: nowrap;
}
.barometre-section .data-table th[data-sort]::after {
  content: ''; display: inline-block; width: 0; height: 0;
  margin-left: 6px; vertical-align: middle; opacity: 0.25;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.barometre-section .data-table th[data-sort].sort-asc::after {
  opacity: 0.7; border-top: none; border-bottom: 5px solid currentColor;
}
.barometre-section .data-table th[data-sort].sort-desc::after {
  opacity: 0.7;
}
/* Baromètre — row hover */
.barometre-section .data-table tbody tr { transition: background 0.15s; }
.barometre-section .data-table tbody tr:hover { background: #f8faf9; }
/* Baromètre — TJM color signals */
.tjm-high { color: #15803d; }
.tjm-low  { color: #b45309; }
/* Baromètre — few responses note */
.barometre-responses-note { font-size: 0.75rem; color: #6b7280; font-weight: 400; }

/* ===== Dark mode (class .dark on <html>, set by JS toggle + system detection) ===== */
html.dark body { background: #0F172A; color: #CBD5E1; }
html.dark h1, html.dark h2, html.dark h3, html.dark h4 { color: #F1F5F9; }
html.dark a { color: #22C55E; }
html.dark .form-card, html.dark .benchmark-form, html.dark .sim-input-card, html.dark .sim-bars,
html.dark .sim-explications-grid > div, html.dark .email-capture, html.dark .stat-box,
html.dark .comparison-card, html.dark .affiliate-card, html.dark .data-table,
html.dark .barometre-cta, html.dark .barometre-section { background: #1E293B; }
html.dark .barometre-next-step-card { background: #1E293B; border-color: #334155; }
html.dark .barometre-next-step-card h3 { color: #F1F5F9; }
html.dark .barometre-next-step-card p { color: #94A3B8; }
html.dark .barometre-next-steps h2 { color: #F1F5F9; }
html.dark .barometre-next-steps__subtitle { color: #94A3B8; }
html.dark .form-group input, html.dark .form-group select { background: #1E293B; color: #F1F5F9; border-color: #334155; }
html.dark .form-group input:focus, html.dark .form-group select:focus { background: #1E293B; }
html.dark .form-hint { color: #94A3B8; }
html.dark .form-group label { color: #E2E8F0; }
html.dark .data-table th { background: #1E293B; color: #E2E8F0; }
html.dark .data-table td { border-color: #334155; color: #CBD5E1; }
html.dark .stat-box { background: #1E293B; }
html.dark .stat-box__label { color: #94A3B8; }
html.dark .stat-box__value { color: #F1F5F9; }
html.dark .site-footer { background: #020617; }
html.dark .btn, html.dark .btn-primary { background: #22C55E; color: #0F172A; }
html.dark .btn:hover, html.dark .btn-primary:hover { background: #16A34A; }
html.dark .form-errors { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }
html.dark .wizard-step { color: #64748B; border-color: #334155; }
html.dark .wizard-panel h3 { color: #F1F5F9; }
html.dark .sim-columns > div { background: #1E293B; }
html.dark .sim-revenu-dispo { background: #1a2e1a; border-color: #2d5a2d; }
html.dark .sim-dispo-label { color: #4ade80; }
html.dark .sim-dispo-value { color: #4ade80; }
html.dark .sim-dispo-monthly { color: #86efac; }
html.dark .sim-dispo-details { border-top-color: #2d5a2d; }
html.dark .sim-dispo-details li { color: #CBD5E1; }
html.dark .conv-card-annotation { color: #94A3B8; }
html.dark .conv-card-annotation--competitive { color: #22C55E; }
html.dark .sim-net-value { color: #22C55E; }
html.dark .barometre-filter-pill { background: #1E293B; color: #CBD5E1; }
html.dark .barometre-filter-pill--active { background: #22C55E; color: #0F172A; }
html.dark .barometre-detail-link { color: #22C55E; }
html.dark .barometre-section__intro { color: #94A3B8; }
html.dark .barometre-section .data-table thead th { background: #1E293B; }
html.dark .barometre-section .data-table tbody tr:hover { background: #263548; }
html.dark .tjm-high { color: #4ade80; }
html.dark .tjm-low  { color: #fbbf24; }
html.dark .barometre-responses-note { color: #64748B; }
html.dark .form-optional { color: #94A3B8; }
html.dark .trust-strip, html.dark .cta-section, html.dark .cta-premium { background: #1E293B; }
html.dark .invite-section { border-color: #334155; }
html.dark .invite-section__input { background: #1E293B; color: #F1F5F9; border-color: #334155; }
html.dark p, html.dark li, html.dark td, html.dark dd { color: #CBD5E1; }
html.dark .sim-disclaimer, html.dark .form-hint, html.dark small, html.dark figcaption { color: #94A3B8; }
html.dark details summary { color: #E2E8F0; }
html.dark details p, html.dark details li { color: #CBD5E1; }
html.dark .seo-col-note { color: #94A3B8; }
html.dark .seo-col-note strong { color: #E2E8F0; }
html.dark .seo-sirene-note { color: #94A3B8; }
html.dark .seo-market-tjm { color: #94A3B8; }
html.dark .seo-market-tjm strong { color: #E2E8F0; }
html.dark .faq-section details { border-color: #334155; }
html.dark .related-links a { color: #CBD5E1; border-color: #334155; }
html.dark .related-links a:hover { background: #1E293B; color: #22C55E; }

/* ===== Dark mode: override inline styles (hack for colors hardcoded in PHP views) ===== */
html.dark [style*="color:#374151"], html.dark [style*="color: #374151"] { color: #CBD5E1 !important; }
html.dark [style*="color:#0F172A"], html.dark [style*="color: #0F172A"] { color: #E2E8F0 !important; }
html.dark [style*="color:#1E3A5F"], html.dark [style*="color: #1E3A5F"] { color: #93C5FD !important; }
html.dark [style*="color:#5f6061"], html.dark [style*="color: #5f6061"] { color: #94A3B8 !important; }
html.dark [style*="color:#6B7280"], html.dark [style*="color: #6B7280"] { color: #94A3B8 !important; }
html.dark [style*="color:#166534"], html.dark [style*="color: #166534"] { color: #4ADE80 !important; }
html.dark [style*="color:#DC2626"], html.dark [style*="color: #DC2626"] { color: #FCA5A5 !important; }
html.dark [style*="color:#92400E"], html.dark [style*="color: #92400E"] { color: #FCD34D !important; }
html.dark [style*="color:#1E40AF"], html.dark [style*="color: #1E40AF"] { color: #93C5FD !important; }
html.dark [style*="color:#6D28D9"], html.dark [style*="color: #6D28D9"] { color: #C4B5FD !important; }
html.dark [style*="background:#f8f9fa"], html.dark [style*="background: #f8f9fa"] { background: #1E293B !important; }
html.dark [style*="background:#f0fdf4"], html.dark [style*="background: #f0fdf4"] { background: #0D2818 !important; }
html.dark [style*="background:#F0FDF4"] { background: #0D2818 !important; }
html.dark [style*="background:#EFF6FF"] { background: #172554 !important; }
html.dark [style*="background:#FEF3C7"] { background: #422006 !important; }
html.dark [style*="background:#F5F3FF"] { background: #2E1065 !important; }
html.dark [style*="background:#FFF7ED"] { background: #431407 !important; }
html.dark [style*="border:1px solid #e5e7eb"], html.dark [style*="border: 1px solid #e5e7eb"] { border-color: #334155 !important; }

/* ===== Content utility classes ===== */
.content-h2 { color: #1E3A5F; margin-bottom: 16px; }
.content-body { line-height: 1.7; color: #374151; }
.content-strong { color: #0F172A; }
.detail-card { margin-bottom: 12px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; }
.detail-card summary { font-weight: 700; cursor: pointer; color: #0F172A; }
.detail-card p { margin-top: 12px; line-height: 1.7; color: #374151; }
.callout { padding: 16px 20px; border-radius: 0 8px 8px 0; margin-top: 24px; }
.callout p { margin: 0; line-height: 1.7; }
.callout--tip { background: #f0fdf4; border-left: 4px solid #22c55e; }
.callout--warn { background: #fef2f2; border-left: 4px solid #ef4444; }
.callout--info { background: #eff6ff; border-left: 4px solid #3b82f6; }
.card-grid { display: grid; gap: 12px; }
.card-grid > div { border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px; }
html.dark .content-h2 { color: #93C5FD; }
html.dark .content-body, html.dark .detail-card p { color: #CBD5E1; }
html.dark .content-strong, html.dark .detail-card summary { color: #E2E8F0; }
html.dark .detail-card { border-color: #334155; }
html.dark .callout--tip { background: #0D2818; border-left-color: #22C55E; }
html.dark .callout--warn { background: #2D1215; border-left-color: #ef4444; }
html.dark .callout--info { background: #172554; border-left-color: #3b82f6; }
html.dark .card-grid > div { border-color: #334155; }

/* ===== Sitemap links ===== */
.sitemap-link { color: #374151; text-decoration: none; transition: color 0.15s; }
.sitemap-link:hover { color: #22C55E; text-decoration: underline; }
html.dark .sitemap-link { color: #CBD5E1; }
html.dark .sitemap-link:hover { color: #22C55E; }

/* ===== Focus visible (accessibilité clavier) ===== */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #22C55E;
  outline-offset: 2px;
  border-radius: 2px;
}
/* Dark section: focus ring plus visible */
.dark-section a:focus-visible,
.dark-section button:focus-visible,
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible { outline-color: #22C55E; }
/* Remove default outline on mouse click (focus-visible handles keyboard) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
select:focus:not(:focus-visible),
input:focus:not(:focus-visible) { outline: none; }
/* Skip link — visible on focus */
.skip-link:focus-visible { outline: 2px solid #22C55E; outline-offset: 2px; }
/* Dropdown menu items — visible focus */
.nav-dropdown__menu a:focus-visible { outline-color: #22C55E; background: rgba(34,197,94,0.1); color: #22C55E; }
/* Details/summary arrow key hint */
details > summary:focus-visible { outline: 2px solid #22C55E; outline-offset: 2px; }

/* ===== Trust strip recent activity ===== */
.trust-strip__recent {
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

/* ===== Progress milestone (results page) ===== */
.milestone-section {
  max-width: 600px;
  margin: 0 auto 24px;
  padding: 20px 24px;
  text-align: center;
}
.milestone-section__count {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-dark);
  margin: 0 0 12px;
}
.milestone-section__bar-wrapper { max-width: 400px; margin: 0 auto; }
.milestone-section__bar {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}
.milestone-section__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: transform 0.3s ease;
  transform-origin: left;
}
.milestone-section__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: 6px;
}

/* ===== Invite section (results page) ===== */
.invite-section {
  max-width: 600px;
  margin: 0 auto 32px;
  padding: 24px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.invite-section h2 {
  font-size: 1.125rem;
  margin-bottom: 8px;
}
.invite-section__text {
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-bottom: 16px;
  line-height: 1.5;
}
.invite-section__url-box {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.invite-section__input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: var(--color-text);
  background: var(--color-bg-alt);
  min-width: 0;
}
.invite-section__copy { white-space: nowrap; }
.invite-section__confirm {
  font-size: 0.8125rem;
  color: var(--color-success-text);
  margin-top: 8px;
}

/* ===== Testimonials (results page) ===== */
.testimonials {
  max-width: 800px;
  margin: 0 auto 32px;
  text-align: center;
}
.testimonials h2 {
  font-size: 1.25rem;
  margin-bottom: 20px;
}
.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}
.testimonial-card {
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-align: left;
  background: var(--color-bg);
}
.testimonial-card__quote {
  font-style: italic;
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0 0 12px;
  quotes: none;
}
.testimonial-card__quote::before {
  content: '\201C';
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-light);
  line-height: 1;
  margin-right: 2px;
}
.testimonial-card__quote::after {
  content: '\201D';
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-light);
  line-height: 1;
  margin-left: 2px;
}
.testimonial-card__author {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin: 0;
  font-weight: 600;
}
html.dark .testimonial-card {
  background: #1E293B;
  border-color: #334155;
}
html.dark .testimonial-card__quote { color: #CBD5E1; }
html.dark .testimonial-card__author { color: #94A3B8; }

/* ===== Mon profil (dashboard personnel) ===== */
.profil-stat-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 12px; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); background: var(--color-bg);
  text-align: center;
}
.profil-stat-card__label {
  font-size: 0.75rem; color: var(--color-text-light);
  text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700; margin-bottom: 4px;
}
.profil-stat-card__value {
  font-size: 2rem; font-weight: 800; color: var(--color-heading); line-height: 1.1;
}
.profil-stat-card__unit {
  font-size: 0.75rem; color: var(--color-text-light);
}
html.dark .profil-stat-card {
  background: #1E293B; border-color: #334155;
}

.profil-net-card {
  padding: 14px 12px; border: 1px solid var(--color-border);
  border-radius: var(--radius); text-align: center;
  background: var(--color-bg);
}
.profil-net-card--current {
  border-color: var(--color-primary); background: var(--color-success-bg);
}
.profil-net-card__label {
  display: block; font-size: 0.8125rem; color: var(--color-text);
  font-weight: 600; margin-bottom: 4px;
}
.profil-net-card__value {
  display: block; font-size: 1.125rem; font-weight: 800;
  color: var(--color-heading);
}
.profil-net-card__badge {
  display: block; font-size: 0.6875rem; color: var(--color-primary);
  font-weight: 700; margin-top: 4px;
}
html.dark .profil-net-card {
  background: #1E293B; border-color: #334155;
}
html.dark .profil-net-card--current {
  background: rgba(34,197,94,0.08); border-color: var(--color-primary);
}

.profil-action-link {
  font-size: 0.875rem; padding: 8px 18px;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Tableau large sur écran étroit.
   La classe était utilisée dans les vues FR sans être définie ici : elle n'existait que dans la
   feuille du site espagnol. Résultat, un tableau plus large que l'écran ne défilait pas dans son
   conteneur — il débordait de la page entière, et la colonne de droite (celle qui explique ce que
   couvre chaque offre) restait invisible sur mobile. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { margin: 0; }

/* Tableau tarifaire empilé sous 560 px.
   Le défilement horizontal réglait le débordement mais pas le vrai problème : la colonne qui dit
   CE QUE COUVRE chaque offre restait hors écran, et rien n'indiquait qu'on pouvait faire défiler.
   Le lecteur mobile voyait donc trois prix sans savoir ce qu'ils achètent — précisément la
   décision que la page est censée l'aider à prendre. Sous 560 px, chaque offre devient un bloc :
   plus de min-width, plus de geste à deviner, rien de caché. */
@media (max-width: 560px) {
  .table-scroll:has(.pricing-table) { overflow-x: visible; }
  .pricing-table { min-width: 0 !important; display: block; }
  .pricing-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pricing-table tbody, .pricing-table tr, .pricing-table td { display: block; width: auto; }
  .pricing-table tr { border-bottom: 1px solid #e5e7eb; padding: 12px 0; }
  .pricing-table tr:last-child { border-bottom: 0; }
  .pricing-table td { border: 0 !important; padding: 2px 0 !important; text-align: left !important; }
  .pricing-table td:nth-child(2) { font-size: 1.05rem; }
  .pricing-table td:nth-child(3) { color: #4b5563; margin-top: 4px; }
}

/* ===== Bilan de situation — formulaire =====
   Constaté le 2026-08-05 : 15 sessions voyaient le formulaire, 1 seule le remplissait. La page
   ouvrait sur seize champs stylés en ligne, largeurs de 160 à 320 px sans logique, bouton tout
   en bas. Le visiteur voyait le coût avant la contrepartie. Les blocs facultatifs sont
   désormais repliés (`<details>` natif, sans JavaScript) et l'action suit les quatre champs
   qui suffisent au calcul. */
.bilan-carte {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 26px 28px;
  margin-bottom: 18px;
}
.bilan-carte__titre { margin: 0 0 6px; font-size: 1.15rem; color: var(--color-heading); }
.bilan-carte__intro { margin: 0 0 20px; font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-light); }

.bilan-plus {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: 18px;
  background: var(--color-bg);
}
.bilan-plus__titre {
  cursor: pointer; list-style: none; padding: 18px 24px;
  font-weight: 700; font-size: 1rem; color: var(--color-heading);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.bilan-plus__titre::-webkit-details-marker { display: none; }
/* Le chevron indique l'état : fermé il pointe vers le bas, ouvert vers le haut. */
.bilan-plus__titre::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--color-text-light); border-bottom: 2px solid var(--color-text-light);
  transform: rotate(45deg); transition: transform 0.2s; margin-right: 4px;
}
.bilan-plus[open] .bilan-plus__titre::before { transform: rotate(-135deg); }
.bilan-plus__titre:hover { color: var(--color-text-dark); }
.bilan-plus__note { font-weight: 400; font-size: 0.85rem; color: var(--color-text-light); }
.bilan-plus__corps { padding: 0 24px 22px; border-top: 1px solid var(--color-border); padding-top: 20px; }

/* Une case à cocher n'a pas à occuper toute la largeur comme un champ de saisie. */
.bilan-case label { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.bilan-case input[type="checkbox"] { width: auto; padding: 0; accent-color: var(--color-primary); }

@media (max-width: 620px) {
  .bilan-carte, .bilan-plus__corps { padding-left: 18px; padding-right: 18px; }
  .bilan-plus__titre { padding: 16px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   MODE SOMBRE — RATTRAPAGE DES VALEURS ÉCRITES EN LIGNE DANS LES VUES
   ═══════════════════════════════════════════════════════════════════════════════════════
   Les vues portent environ 600 fonds clairs et 1 400 couleurs de texte en `style="…"`.
   Un style en ligne l'emporte sur toute règle de feuille : en mode sombre, ces blocs
   restaient BLANCS avec du texte clair par-dessus, donc illisibles. Mesuré le 25/08/2026
   sur les trois sites — l'accueil français lui-même servait un formulaire blanc.

   Reprendre les 2 000 valeurs à la source serait un chantier de refonte ; ce rattrapage
   couvre les trois sites d'un coup, depuis la feuille qu'ils partagent. Il est délibérément
   TOLÉRANT À LA CASSE (`i`) et gère l'écriture avec ou sans espace après les deux-points :
   les vues mélangent `background:#fff` et `background: #FFF`.

   ⚠️ Ne pas déplacer ce bloc plus haut : il doit rester après les règles de mode sombre
   existantes, dont il complète la portée.
   ⚠️ La cible est le style EN LIGNE, pas les classes. Une classe se corrige proprement
   au-dessus ; c'est l'inline qui n'a pas d'autre recours que `!important`. */

html.dark [style*="background:#fff" i],  html.dark [style*="background: #fff" i],
html.dark [style*="background:#f8fafc" i], html.dark [style*="background: #f8fafc" i],
html.dark [style*="background:#f8f9fa" i], html.dark [style*="background: #f8f9fa" i],
html.dark [style*="background:#f9fafb" i], html.dark [style*="background: #f9fafb" i],
html.dark [style*="background:#fafafa" i], html.dark [style*="background: #fafafa" i],
html.dark [style*="background:#f1f5f9" i], html.dark [style*="background: #f1f5f9" i] {
  background: #131c2e !important;
  border-color: #1E293B !important;
}

/* Fonds teintés : on garde la TEINTE, on descend la luminosité. Les remplacer par du gris
   effacerait le code couleur (vert = gain, bleu = information, ambre = vigilance) sur
   lequel s'appuient les encadrés. */
html.dark [style*="background:#f0fdf4" i], html.dark [style*="background: #f0fdf4" i],
html.dark [style*="background:#ecfdf5" i] { background: #0d2b1c !important; border-color: #14532d !important; }
html.dark [style*="background:#eff6ff" i], html.dark [style*="background: #eff6ff" i],
html.dark [style*="background:#eef2ff" i] { background: #0f1f3d !important; border-color: #1e3a8a !important; }
html.dark [style*="background:#fefce8" i], html.dark [style*="background:#fffbeb" i] { background: #2b2410 !important; border-color: #713f12 !important; }
html.dark [style*="background:#fef2f2" i] { background: #2c1414 !important; border-color: #7f1d1d !important; }
html.dark [style*="background:#e2e8f0" i], html.dark [style*="background: #e2e8f0" i] { background: #334155 !important; }

/* Textes écrits en ligne : encre et gris secondaires. */
html.dark [style*="color:#0f172a" i], html.dark [style*="color: #0f172a" i],
html.dark [style*="color:#1e3a5f" i], html.dark [style*="color: #1e3a5f" i],
html.dark [style*="color:#1f3a52" i], html.dark [style*="color: #1f3a52" i],
html.dark [style*="color:#111827" i], html.dark [style*="color: #111827" i] { color: #E2E8F0 !important; }
html.dark [style*="color:#334155" i], html.dark [style*="color: #334155" i],
html.dark [style*="color:#475569" i], html.dark [style*="color: #475569" i],
html.dark [style*="color:#64748b" i], html.dark [style*="color: #64748b" i],
html.dark [style*="color:#6b7280" i], html.dark [style*="color: #6b7280" i] { color: #94A3B8 !important; }

/* Bordures claires écrites en ligne. */
html.dark [style*="border:1px solid #e5e7eb" i], html.dark [style*="border: 1px solid #e5e7eb" i],
html.dark [style*="border:1px solid #e2e8f0" i], html.dark [style*="border: 1px solid #e2e8f0" i] {
  border-color: #1E293B !important;
}

/* ⚠️ L'IDENTIFIANT L'EMPORTE SUR LA CLASSE. Le formulaire de l'accueil porte
   `id="benchmark-form"` et AUCUNE classe : la règle sombre ne visait que
   `.benchmark-form`, elle ne s'appliquait donc jamais — et `#benchmark-form{background:#fff}`
   l'aurait de toute façon emporté en spécificité. Résultat : le premier écran des trois
   sites servait un formulaire blanc au texte illisible. */
html.dark #benchmark-form { background: #1E293B !important; border-color: #334155 !important; }

/* Bandes pleine largeur « comment ça marche » : aucune règle sombre ne les couvrait. */
html.dark .how-it-works, html.dark .hiw-section { background: #131c2e; }
html.dark .how-it-works h2, html.dark .hiw-section h2,
html.dark .hiw-section .section-heading { color: #F1F5F9; }
html.dark .how-it-works p, html.dark .hiw-section p { color: #94A3B8; }

/* ⚠️ CHAMPS DE SAISIE HORS `.form-group`. La règle sombre existante ne visait que
   `.form-group input` : les formulaires qui posent leur champ directement dans un `<label>`
   — c'est le cas du contact espagnol et allemand — gardaient des champs BLANCS sur fond
   sombre. On cible donc les types de champ eux-mêmes. Les boutons sont exclus par
   construction : on n'énumère que les types de saisie, jamais `submit` ni `button`. */
html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="number"],
html.dark input[type="search"], html.dark input[type="tel"], html.dark input[type="url"],
html.dark input[type="password"], html.dark input[type="date"], html.dark input:not([type]),
html.dark textarea, html.dark select {
  background: #1E293B;
  color: #F1F5F9;
  border-color: #334155;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #64748B; }

/* ===== Fil d'Ariane =====
   ⛔ IL PROLONGE L'EN-TÊTE, IL NE LE COUPE PAS.
   Première version : une bande BLANCHE, insérée entre l'en-tête sombre et le hero sombre. Sur
   les 83 vues (sur 107) qui ouvrent sur un bloc sombre, elle tranchait en deux ce qui se lisait
   jusque-là comme un seul bandeau — un liseré clair au milieu du bloc d'identité du site.
   Le défaut ne se voyait pas dans le HTML ni dans les tests : il fallait REGARDER la page.
   Le fil reprend donc le fond de l'en-tête ; header, fil et hero redeviennent continus. */
.fil-ariane { background: var(--color-dark); font-size: 0.8125rem; }
.fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center;
                 gap: 0 8px; margin: 0 auto; padding: 9px 24px;
                 /* Aligné sur `.nav` : le fil doit tomber sous le logo, pas ailleurs. */
                 max-width: 960px; }
.fil-ariane li { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.55); }
/* Le séparateur est décoratif : `::before` le sort du flux lu par les lecteurs d'écran. */
.fil-ariane li + li::before { content: '/'; color: rgba(255,255,255,0.3); }
.fil-ariane a { color: rgba(255,255,255,0.6); text-decoration: none;
                border-bottom: 1px solid transparent; }
.fil-ariane a:hover, .fil-ariane a:focus-visible { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }
.fil-ariane [aria-current="page"] { color: rgba(255,255,255,0.85); font-weight: 600; }

/* La page courante n'est pas un lien : sur mobile, seul le cran de remontée compte, et le
   chemin complet ferait deux lignes au-dessus du titre. */
@media (max-width: 560px) {
  .fil-ariane li { display: none; }
  .fil-ariane li:nth-last-child(2) { display: flex; }
  .fil-ariane li:nth-last-child(2)::before { content: '←'; }
}

/* ⛔ LE MODE SOMBRE DOIT ÊTRE REPRIS EXPLICITEMENT — QUESTION DE SPÉCIFICITÉ.
   J'avais retiré ces règles en pensant que le fil, déjà sur fond sombre dans les deux thèmes,
   n'avait rien à redéfinir. Faux pour la COULEUR DU TEXTE : `html.dark a` pèse (0,1,2) — `html`
   compte comme un élément — contre (0,1,1) pour `.fil-ariane a`. Le vert des liens l'emportait
   donc, et le fil s'affichait en vert sur le bandeau sombre.
   ⚠️ Ne pas juger d'une couleur sur une capture : c'est `getComputedStyle()` qui tranche. */
html.dark .fil-ariane a { color: rgba(255,255,255,0.6); }
html.dark .fil-ariane a:hover,
html.dark .fil-ariane a:focus-visible { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }

@media print { .fil-ariane { display: none; } }

/* ===== Annonce de mission expirée =====
   ⛔ LE FILIGRANE EST UNE PROTECTION DU LECTEUR, PAS UNE DÉCORATION.
   Depuis que les fiches de mission sont indexables, quelqu'un peut arriver dessus par Google
   des semaines après le retrait de l'offre. Le bandeau en tête le dit ; le filigrane fait que
   ça reste vrai même après avoir fait défiler la page, au moment précis où l'on est en train
   de lire les missions comme si elles étaient ouvertes.
   ⚠️ `pointer-events:none` : sans lui, la couche capterait les clics et les liens du contenu
      deviendraient inertes. Le texte reste sélectionnable, la page reste utilisable. */
.mission-expiree { position: relative; }
.mission-expiree::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    /* Texte incliné répété, en SVG intégré : pas de requête réseau, pas de police à charger. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Ctext x='150' y='110' fill='%237F1D1D' fill-opacity='0.07' font-family='sans-serif' font-size='38' font-weight='700' text-anchor='middle' transform='rotate(-24 150 100)'%3EEXPIR%C3%89E%3C/text%3E%3C/svg%3E");
    background-repeat: repeat;
}
/* Le contenu passe AU-DESSUS du filigrane : il doit rester parfaitement lisible. */
.mission-expiree > * { position: relative; z-index: 2; }

html.dark .mission-expiree::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Ctext x='150' y='110' fill='%23FCA5A5' fill-opacity='0.09' font-family='sans-serif' font-size='38' font-weight='700' text-anchor='middle' transform='rotate(-24 150 100)'%3EEXPIR%C3%89E%3C/text%3E%3C/svg%3E");
}

@media print { .mission-expiree::before { display: none; } }