/* styles.css - Simulateur v2 Lignea
   Charte reprise de la v1 (Brand Bible v1.3). */

:root {
  --forest:     #0B2621;
  --chestnut:   #592E1E;
  --sand:       #D9BFA0;
  --sage:       #1E5949;
  /* Sauge clair : teinte de Sauge à 7,22:1 sur Forêt, réservée aux surlignages
     sur fond Forêt (le Sauge de charte y donne 1,96:1, invisible). Ajout du
     2026-07-15, à graver en Brand Bible section 5.1. */
  --sage-light: #5FBFA6;
  --grey-light: #F2F0EC;
  --white:      #FFFFFF;
  --serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --sans:  'Open Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* L'attribut HTML `hidden` doit toujours masquer, meme sur les conteneurs flex
 * (sinon `.nav { display: flex }` bat le `display: none` par defaut). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--grey-light);
  color: var(--forest);
  font-size: 16px;
  line-height: 1.7;
  min-height: 100vh;
}

/* ── HEADER ── */
header {
  background: var(--forest);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s;
}
.logo-link:hover { opacity: 0.85; }
.logo-link:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 4px;
  border-radius: 2px;
}
.logo-img {
  display: block;
  height: 28px;
  width: auto;
  max-width: 180px;
}
.header-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(217,191,160,0.7);
}

/* ── HERO ── */
.hero {
  background: var(--forest);
  padding: 48px 24px 60px;
  text-align: center;
}
.hero-overline {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 14px;
  display: block;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(26px, 5vw, 44px);
  color: var(--white);
  line-height: 1.12;
  max-width: 620px;
  margin: 0 auto 14px;
}
.hero-title em { color: var(--sand); font-style: normal; }
.hero-sub {
  font-size: 15px;
  color: rgba(217,191,160,0.75);
  max-width: 500px;
  margin: 0 auto;
  font-weight: 300;
}

/* ── MAIN ── */
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px 64px;
}

/* ── CARD QUIZ ── */
.card {
  background: var(--white);
  border: 1px solid rgba(11,38,33,0.1);
  border-radius: 14px;
  padding: 28px 32px 32px;
  margin-top: -32px;
  box-shadow: 0 8px 40px rgba(11,38,33,0.10);
}
@media (max-width: 540px) {
  .card { padding: 22px 18px 26px; margin-top: -24px; }
}

/* ── PROGRESS ── */
.progress {
  margin-bottom: 28px;
}
.progress-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 8px;
}
.progress-track {
  width: 100%;
  height: 4px;
  background: rgba(11,38,33,0.12);
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--sage);
  border-radius: 4px;
  transition: width 0.35s ease;
}

/* ── SLIDES ── */
.slide { display: none; animation: fade 0.35s ease; }
.slide.is-active { display: block; }
@keyframes fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.slide-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1.2;
  color: var(--forest);
  margin-bottom: 8px;
}
.slide-sub {
  font-size: 14px;
  color: rgba(11,38,33,0.6);
  margin-bottom: 24px;
  font-weight: 300;
}

/* ── QUESTIONS ── */
.question { margin-bottom: 24px; }
.question:last-of-type { margin-bottom: 8px; }
.question-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 12px;
  display: block;
}
.question[hidden] { display: none; }

/* Champ texte / email / nombre */
.field-input {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--forest);
  background: var(--grey-light);
  border: 1.5px solid rgba(11,38,33,0.15);
  border-radius: 6px;
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field-input:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(30,89,73,0.1);
}
.field-input.is-invalid {
  border-color: var(--chestnut);
  box-shadow: 0 0 0 3px rgba(89,46,30,0.1);
}
.field-input--narrow { max-width: 160px; }
.field-error {
  font-size: 12px;
  color: var(--chestnut);
  margin-top: 6px;
  display: none;
}
.field-error.is-visible { display: block; }

/* Options cliquables (radio stylise) */
.options { display: flex; flex-direction: column; gap: 10px; }
.option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1.5px solid rgba(11,38,33,0.15);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--white);
}
.option:hover { border-color: rgba(30,89,73,0.5); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option-mark {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(11,38,33,0.3);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
  transition: border-color 0.15s;
}
.option-mark::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--sage);
  transform: scale(0);
  transition: transform 0.15s;
}
.option input:checked ~ .option-mark { border-color: var(--sage); }
.option input:checked ~ .option-mark::after { transform: scale(1); }
.option input:checked ~ .option-body .option-text { color: var(--forest); }
/* Marque carree pour les cases a cocher (signal visuel choix multiple). */
.option input[type="checkbox"] ~ .option-mark { border-radius: 4px; }
.option input[type="checkbox"] ~ .option-mark::after { border-radius: 2px; }
/* Indication "plusieurs choix possibles" au-dessus d'un groupe de checkboxes. */
.options-hint {
  font-size: 11px;
  color: rgba(11,38,33,0.5);
  font-style: italic;
  margin-bottom: 10px;
}
.option:has(input:checked) { border-color: var(--sage); background: rgba(30,89,73,0.05); }
.option input:focus-visible ~ .option-mark {
  box-shadow: 0 0 0 3px rgba(30,89,73,0.18);
}
.option-body { flex: 1; }
.option-text { font-size: 14px; font-weight: 600; color: var(--forest); }
.option-hint { font-size: 12px; color: rgba(11,38,33,0.5); margin-top: 2px; }

/* Slider age */
.slider-wrap { display: flex; flex-direction: column; gap: 8px; }
.slider-header { display: flex; justify-content: space-between; align-items: center; }
.slider-caption { font-size: 12px; color: rgba(11,38,33,0.5); }
.slider-value {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--forest);
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(11,38,33,0.15);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--forest);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--white);
  box-shadow: 0 2px 6px rgba(11,38,33,0.3);
  transition: background 0.2s, transform 0.15s;
}
input[type="range"]::-webkit-slider-thumb:hover { background: var(--sage); transform: scale(1.1); }
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--forest);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--white);
}
.slider-range {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(11,38,33,0.4);
}

/* Micro-copy */
.microcopy {
  font-size: 12px;
  color: rgba(11,38,33,0.5);
  line-height: 1.55;
  background: rgba(30,89,73,0.05);
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: 16px;
}

/* ── CASES A COCHER ── */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 12px;
}
.checkbox input {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--sage);
  flex-shrink: 0;
}
.checkbox span { font-size: 13px; color: rgba(11,38,33,0.75); line-height: 1.5; }

/* ── RGPD ── */
.rgpd {
  font-size: 11px;
  color: rgba(11,38,33,0.45);
  line-height: 1.55;
  margin-top: 14px;
}
.rgpd a { color: var(--sage); }

/* ── NAVIGATION ── */
.nav {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(11,38,33,0.1);
}
.btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 14px 24px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s, transform 0.1s;
  border: 1.5px solid transparent;
}
.btn:active { transform: scale(0.99); }
.btn-primary {
  flex: 1;
  color: var(--white);
  background: var(--forest);
  border-color: var(--forest);
}
.btn-primary:hover { background: var(--sage); border-color: var(--sage); }
.btn-primary:disabled {
  background: rgba(11,38,33,0.2);
  border-color: rgba(11,38,33,0.2);
  cursor: not-allowed;
}
.btn-secondary {
  color: rgba(11,38,33,0.55);
  background: none;
  border-color: rgba(11,38,33,0.2);
}
.btn-secondary:hover { color: var(--forest); border-color: rgba(11,38,33,0.4); }

.disclaimer-slide {
  font-size: 11px;
  color: rgba(11,38,33,0.4);
  line-height: 1.5;
  text-align: center;
  margin-top: 16px;
}

/* ── RECAP (slide 5) ── */
.recap {
  background: var(--grey-light);
  border-radius: 10px;
  padding: 20px 22px;
}
.recap-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(11,38,33,0.08);
}
.recap-item:last-child { border-bottom: none; }
.recap-text { font-size: 13px; color: var(--forest); }
.recap-text strong { font-weight: 600; }
.recap-edit {
  font-size: 12px;
  font-weight: 600;
  color: var(--sage);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
}
.recap-edit:hover { color: var(--forest); }

/* ── PAGE RESULTAT ── */
.result { display: none; }
.result.is-active { display: block; animation: fade 0.4s ease; }

.result-hero {
  background: var(--forest);
  border-radius: 12px;
  padding: 32px 28px 28px;
  text-align: center;
  margin-bottom: 20px;
}
.result-hero-amount {
  font-family: var(--serif);
  font-size: clamp(40px, 9vw, 60px);
  font-weight: 900;
  color: var(--sand);
  line-height: 1;
  margin-bottom: 8px;
}

/* ── PALIERS DU RÉSULTAT (pile animée au scroll) ──
   Les styles par défaut laissent tout visible, en pile statique. Sous
   .result--progressive (posée par le JS uniquement si IntersectionObserver est
   présent et que le visiteur n'a pas demandé la réduction des animations),
   chaque palier s'épingle en haut du viewport (sticky), le suivant glisse
   par-dessus (superposition, ordre DOM = ordre de peinture) et le palier
   recouvert s'estompe (opacity/scale pilotés au scroll par quiz.js). Fond
   opaque obligatoire sur chaque palier pour masquer celui d'en dessous. */
.result-step {
  min-height: 72vh;
  min-height: 72svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.result-step .result-hero { margin-bottom: 0; }
.result--progressive .result-step {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--white);
  padding: 24px 0;
  will-change: opacity, transform;
}
/* Le dernier palier scrolle normalement : il recouvre le palier 3 puis laisse
   la page continuer (bouton recommencer, disclaimer, bloc SEO). */
.result--progressive .result-step[data-step="4"] {
  position: relative;
}

/* Palier 1 : la phrase, seul objet à l'écran. Sérif = l'émotion (BB règle 2). */
.result-phrase {
  font-family: var(--serif);
  font-size: clamp(22px, 5.5vw, 32px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.35;
}

/* Palier 2 : message du cas 0 €, sous le montant. */
.result-zero { margin-top: 18px; }
.result-zero-title {
  font-family: var(--serif);
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 8px;
}
.result-zero-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  font-weight: 300;
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto;
}

/* Palier 3 : les nuances. */
.result-nuances {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.result-nuance {
  font-size: 15px;
  color: var(--forest);
  line-height: 1.6;
  background: rgba(30,89,73,0.06);
  border-left: 3px solid var(--sage);
  border-radius: 6px;
  padding: 14px 16px;
}

/* Flèche « Scroller pour plus de détails », juste sous la carte de chaque
   palier. Montrée uniquement en mode progressif ; elle s'estompe avec son
   palier quand le suivant le recouvre (opacité pilotée au niveau du palier). */
.result-scroll-cue { display: none; }
.result--progressive .result-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}
.scroll-cue-label {
  font-size: 15px;
  font-weight: 600;
  color: rgba(11,38,33,0.65);
}
.scroll-cue-arrow-wrap { display: block; }
.scroll-cue-arrow {
  display: block;
  width: 22px;
  height: 22px;
  border-right: 3px solid var(--sage);
  border-bottom: 3px solid var(--sage);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue-arrow-wrap { animation: cue-bounce 1.6s ease-in-out infinite; }
  @keyframes cue-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(9px); }
  }
}

.result-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 28px 0 14px;
}

/* Ventilation */
.levier {
  border: 1px solid rgba(11,38,33,0.12);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 10px;
}
.levier.is-off { background: rgba(11,38,33,0.03); border-style: dashed; }
.levier-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.levier-name { font-size: 14px; font-weight: 600; color: var(--forest); }
.levier-article { font-size: 11px; color: rgba(11,38,33,0.45); margin-top: 2px; }
.levier-amount {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--sage);
  white-space: nowrap;
}
.levier.is-off .levier-amount { color: rgba(11,38,33,0.3); font-size: 14px; }
.levier-unit { font-size: 12px; color: rgba(11,38,33,0.5); margin-top: 6px; }
.levier-conditions {
  list-style: none;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.levier-conditions li {
  font-size: 11px;
  color: var(--sage);
  background: rgba(30,89,73,0.08);
  border-radius: 4px;
  padding: 3px 8px;
}
.levier-reason {
  font-size: 12px;
  color: var(--chestnut);
  margin-top: 6px;
  line-height: 1.5;
}

/* Alertes */
.alert {
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.6;
  border-left: 3px solid;
}
.alert-info    { background: rgba(11,38,33,0.04);  border-left-color: rgba(11,38,33,0.3); }
.alert-warning { background: rgba(89,46,30,0.08);  border-left-color: var(--chestnut); }
.alert-action  { background: rgba(30,89,73,0.07);  border-left-color: var(--sage); }
.alert strong { color: var(--forest); }

/* Plan d'action */
.plan-step {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(11,38,33,0.08);
}
.plan-step:last-child { border-bottom: none; }
.plan-num {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--forest);
  color: var(--sand);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-body { flex: 1; }
.plan-step-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 4px;
}
.plan-step-text { font-size: 13px; color: rgba(11,38,33,0.7); line-height: 1.6; }
.plan-step-text p { margin-bottom: 6px; }
.plan-step-text p:last-child { margin-bottom: 0; }
.plan-cta {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--sage);
  margin-top: 8px;
  text-decoration: none;
  border-bottom: 1px solid rgba(30,89,73,0.4);
}
.plan-cta:hover { color: var(--forest); }

.result-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.result-actions .btn { flex: 1; min-width: 180px; }

/* ── BLOC OPT-IN (page resultat) ── */
.optin-block {
  background: var(--forest);
  border-radius: 12px;
  padding: 28px 26px;
  margin-top: 28px;
}
.optin-block h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.25;
}
/* Sous-titre du bloc opt-in : sans-serif = la clarté (BB règle 2), plus petit
   que le titre sérif. L'ancienne règle .optin-block > p capturait aussi
   .optin-mention par spécificité (14px au lieu de 11px) : supprimée, la mention
   retrouve ses 11px. */
.optin-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 18px;
  line-height: 1.6;
  font-weight: 400;
}
.optin-sub strong { font-weight: 700; }
/* Surlignage Sauge clair sur fond Forêt (7,22:1), texte Forêt par-dessus. */
.optin-highlight {
  background: var(--sage-light);
  color: var(--forest);
  padding: 0.06em 0.3em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
#optin-form { display: flex; flex-direction: column; gap: 14px; }
#optin-email {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--forest);
  background: var(--grey-light);
  border: 1.5px solid rgba(11,38,33,0.15);
  border-radius: 6px;
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#optin-email:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(30,89,73,0.1);
}
.optin-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.optin-checkbox input {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--sage);
  flex-shrink: 0;
}
.optin-checkbox span { font-size: 13px; color: rgba(217,191,160,0.85); line-height: 1.5; }
#optin-submit {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 15px 24px;
  cursor: pointer;
  color: var(--forest);
  background: var(--sand);
  border: 1.5px solid var(--sand);
  transition: opacity 0.2s, transform 0.15s;
}
#optin-submit:hover { opacity: 0.9; transform: scale(1.01); }
#optin-submit:active { transform: scale(0.99); }
#optin-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Pulsation lente et continue du bouton (échelle seule : compositeur uniquement,
   pas de reflow, tient sur les vieux mobiles - 93 % du trafic). Aucune animation
   si l'utilisateur a demandé la réduction des animations. */
@media (prefers-reduced-motion: no-preference) {
  #optin-submit { animation: optin-pulse 2s ease-in-out infinite; }
  @keyframes optin-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
  }
}
.optin-error {
  font-size: 12px;
  color: var(--sand);
  margin: 0;
}
.optin-mention {
  font-size: 11px;
  color: rgba(217,191,160,0.6);
  line-height: 1.55;
  margin-top: 14px;
}
.optin-mention a { color: var(--sand); }
.optin-confirmation {
  background: rgba(30,89,73,0.08);
  border-left: 3px solid var(--sage);
  border-radius: 4px;
  padding: 14px 16px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--forest);
  line-height: 1.6;
  text-align: left;
}

/* Gros message de confirmation d'envoi (remplace le formulaire apres soumission). */
.optin-confirmation--big {
  background: var(--forest);
  border-left: none;
  border-radius: 12px;
  padding: 40px 28px;
  margin-top: 28px;
  text-align: center;
}
.optin-confirmation--big .confirmation-title {
  font-family: var(--serif);
  font-size: clamp(28px, 6vw, 38px);
  font-weight: 900;
  color: var(--sand);
  line-height: 1.1;
  margin-bottom: 14px;
}
.optin-confirmation--big p {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  font-weight: 300;
  max-width: 460px;
  margin: 0 auto;
}
.optin-confirmation--big strong { color: var(--white); font-weight: 600; }

/* ── BLOC VSL (video post-optin) ── */
.vsl-block {
  margin-top: 28px;
  text-align: center;
}
.vsl-embed {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--forest);
}
.vsl-cta-wrap { margin-top: 22px; }
.vsl-cta {
  display: inline-block;
  background: var(--forest);
  color: var(--sand);
  border: 1.5px solid var(--sand);
  border-radius: 10px;
  padding: 16px 30px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.vsl-cta:hover { background: var(--sand); color: var(--forest); }
.vsl-cta:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

/* Cadre 16:9 : l'iframe (Vidalytics ou YouTube) remplit le conteneur. */
.vsl-embed iframe,
.vsl-embed #vsl-youtube {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* Overlay son du fallback YouTube (équivalent de l'overlay natif Vidalytics).
   Le fond reste léger pour laisser voir la vidéo qui joue derrière, mais le
   bouton d'activation du son est franc et bien visible. */
.vsl-sound-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(11, 38, 33, 0.32);
}
.vsl-sound-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 30px;
  background: var(--sand);
  color: var(--forest);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(11, 38, 33, 0.35);
  text-align: center;
}
.vsl-sound-title { font-size: 19px; font-weight: 800; letter-spacing: .01em; }
.vsl-sound-sub { font-size: 13px; opacity: .8; }
.vsl-sound-overlay:focus-visible { outline: 2px solid var(--sand); outline-offset: -4px; }

/* Bouton de secours manuel : visible, secondaire par rapport au CTA. */
.vsl-fallback-link {
  display: inline-block;
  margin-top: 16px;
  background: none;
  border: 1.5px solid var(--forest);
  border-radius: 10px;
  padding: 11px 22px;
  color: var(--forest);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.vsl-fallback-link:hover { background: var(--forest); color: var(--white); }
.vsl-fallback-link:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

/* CRUCIAL : ces éléments portent un display: de classe (flex / inline-block) qui,
   à spécificité égale, l'emporterait sur [hidden]{display:none}. Sans cette règle,
   element.hidden = true ne masque RIEN (overlay son qui couvre la vidéo, spinner
   qui ne part pas, CTA visible d'emblée). On force donc le masquage. */
.vsl-sound-overlay[hidden],
.vsl-cta[hidden],
.vsl-fallback-link[hidden] { display: none !important; }

.disclaimer-result {
  font-size: 11px;
  color: rgba(11,38,33,0.45);
  line-height: 1.6;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(11,38,33,0.1);
}

/* ── BLOC SEO ── */
.seo-divider-top { border: none; border-top: 1px solid rgba(11,38,33,0.1); margin: 0; }
.seo-block { max-width: 720px; margin: 0 auto; padding: 60px 24px 80px; }
.seo-block .overline {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 12px;
}
.seo-block h2 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--forest);
  margin-bottom: 18px;
}
.seo-block h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--forest);
  margin-top: 32px;
  margin-bottom: 12px;
}
.seo-block p {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--forest);
  margin-bottom: 16px;
}
.seo-block a { color: var(--sage); }
.seo-section-gap { margin-top: 56px; }
.seo-highlight {
  background: rgba(217, 191, 160, 0.15);
  border-left: 3px solid var(--sand);
  padding: 20px 24px;
  margin: 24px 0;
  border-radius: 0 4px 4px 0;
}
.seo-highlight p { margin-bottom: 0; font-size: 15px; }
.seo-highlight .big-number {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 900;
  color: var(--chestnut);
  display: block;
  margin-bottom: 6px;
  line-height: 1.1;
}
.seo-table { width: 100%; border-collapse: collapse; margin: 20px 0 24px; font-size: 14px; }
.seo-table th {
  background: var(--forest);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 16px;
}
.seo-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(11,38,33,0.08);
  color: var(--forest);
}
.seo-table tr:nth-child(even) td { background: var(--grey-light); }
.seo-table .amount { font-family: var(--serif); font-weight: 700; font-size: 16px; }
.seo-table .saved { color: var(--sage); font-weight: 600; }
.seo-caption {
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(11,38,33,0.5);
  margin-top: -8px;
  margin-bottom: 24px;
  line-height: 1.5;
}
.seo-key-point {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(11,38,33,0.07);
}
.seo-key-point:last-child { border-bottom: none; }
.seo-key-point-icon {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--sage);
  flex-shrink: 0;
  width: 28px;
  margin-top: 2px;
}
.seo-key-point p { margin-bottom: 0; font-size: 14px; }
.seo-cta-section {
  background: var(--forest);
  border-radius: 8px;
  padding: 36px 32px;
  text-align: center;
  margin-top: 48px;
}
.seo-cta-section h2 { color: var(--white); font-size: 24px; margin-bottom: 12px; }
.seo-cta-section p { color: var(--sand); font-size: 18px; margin-bottom: 24px; opacity: 0.85; }
.seo-cta-button {
  display: inline-block;
  background: var(--sand);
  color: var(--forest);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 18px 44px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.2s, background 0.2s;
}
.seo-cta-button:hover { transform: scale(1.04); background: var(--white); }
.seo-legal {
  font-size: 11px;
  color: rgba(11,38,33,0.4);
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(11,38,33,0.08);
  line-height: 1.6;
}

/* ── FOOTER ── */
footer {
  background: var(--forest);
  padding: 24px;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  line-height: 1.6;
}
footer strong {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 900;
  color: rgba(255,255,255,0.6);
}

/* ── UTILS ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ── COOKIE BANNER - Branding Lignéa ── */
/* Overlay fond */
html body.tarteaucitron-modal-open div#tarteaucitronRoot::before {
  background: rgba(11,38,33,0.55) !important;
}
/* Container popup */
html body #tarteaucitronRoot #tarteaucitronAlertBig {
  background: #FFFFFF !important;
  color: #0B2621 !important;
  font-family: 'Open Sans', sans-serif !important;
  border-radius: 12px !important;
  border: 1px solid rgba(11,38,33,0.1) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.18) !important;
}
/* Texte et liens dans le popup */
#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert,
#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong,
#tarteaucitronAlertBig strong,
#tarteaucitronAlertBig a {
  color: #0B2621 !important;
  font-family: 'Open Sans', sans-serif !important;
}
/* Lien politique de confidentialité */
#tarteaucitronAlertBig #tarteaucitronPrivacyUrl,
#tarteaucitronAlertBig #tarteaucitronPrivacyUrlDialog {
  background: transparent !important;
  color: rgba(11,38,33,0.45) !important;
  font-size: 12px !important;
  border: none !important;
}
/* Boutons bannière — style "pilule" (inspiration capture Quentin 2026-06-10).
   Refuser et Personnaliser : gris doux plein. Accepter : forest plein.
   Refuser reste un vrai bouton, aussi visible qu'Accepter (conformite CNIL). */

/* Bouton "Tout accepter" — forest plein */
#tarteaucitronRoot #tarteaucitronPersonalize2 {
  background: #0B2621 !important;
  color: #FFFFFF !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  border: 1px solid #0B2621 !important;
  border-radius: 999px !important;
  padding: 11px 24px !important;
  margin: 5px 6px !important;
}
#tarteaucitronRoot #tarteaucitronPersonalize2:hover {
  background: #1E5949 !important;
  border-color: #1E5949 !important;
}
/* Bouton "Tout refuser" — gris doux plein */
#tarteaucitronRoot #tarteaucitronAllDenied2 {
  background: rgba(11,38,33,0.05) !important;
  color: rgba(11,38,33,0.75) !important;
  border: 1px solid rgba(11,38,33,0.15) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  padding: 11px 24px !important;
  margin: 5px 6px !important;
}
#tarteaucitronRoot #tarteaucitronAllDenied2:hover {
  background: rgba(11,38,33,0.09) !important;
  color: #0B2621 !important;
}
/* Bouton "Personnaliser" — gris doux plein, secondaire */
#tarteaucitronRoot #tarteaucitronCloseAlert {
  background: rgba(11,38,33,0.05) !important;
  color: rgba(11,38,33,0.75) !important;
  border: 1px solid rgba(11,38,33,0.15) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  border-radius: 999px !important;
  padding: 11px 24px !important;
  margin: 5px 6px !important;
}
#tarteaucitronRoot #tarteaucitronCloseAlert:hover {
  background: rgba(11,38,33,0.09) !important;
  color: #0B2621 !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .seo-block h2 { font-size: 22px; }
  .seo-block { padding: 40px 18px 60px; }
  .seo-highlight .big-number { font-size: 26px; }
  .seo-cta-section { padding: 28px 20px; }
  .seo-table { font-size: 12px; }
  .seo-table th, .seo-table td { padding: 8px 10px; }
  .seo-table .amount { font-size: 13px; }
}
@media (max-width: 460px) {
  .nav { flex-direction: column-reverse; }
  .levier-head { flex-direction: column; }
}

/* ── IMPRESSION ── */
@media print {
  header, .hero, .progress, .nav, .seo-divider-top, .seo-block, footer,
  .result-actions, .optin-block, .optin-confirmation, .vsl-block,
  .result-scroll-cue { display: none !important; }
  .result-step {
    min-height: 0;
    display: block;
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .card { box-shadow: none; border: none; margin-top: 0; }
  body { background: var(--white); }
}