/* styles.css - VSL Landing Lignéa (page autonome de réactivation)
   Charte reprise de apps/simulateur_v2 (Brand Bible v1.3). Fichier isolé :
   n'importe aucun style du simulateur, ne reprend que ce dont cette page a besoin. */

:root {
  --forest:     #0B2621;
  --chestnut:   #592E1E;
  --sand:       #D9BFA0;
  --sage:       #1E5949;
  --green-light:#9BD9B4;
  --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;
}

/* ── Bandeau Lignéa (repris visuellement des emails Brevo : fond forest,
      wordmark "Lignéa" en Playfair Display) ── */
.lp-header {
  background: var(--forest);
  padding: 22px 28px;
}
.lp-header-inner {
  max-width: 760px;
  margin: 0 auto;
}
.lp-wordmark {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 22px;
  color: var(--white);
  letter-spacing: 0.02em;
}

/* ── Corps de page ── */
.lp-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 8px 20px;
  text-align: center;
}

/* Mises en forme de la headline et du sous-titre.
   Surlignage type marqueur : fond coloré + texte foncé lisible (pas de texte coloré). */
.hl-mark, .hl-green, .hl-sand {
  color: var(--forest);
  padding: 0 .14em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hl-mark  { font-weight: 900; background: var(--sand); }
.hl-green { background: var(--green-light); }
.hl-sand  { background: var(--sand); }
.hl-underline { text-decoration: underline; }
.hl-bold { font-weight: 700; }

.lp-greeting {
  font-size: 15px;
  color: var(--sage);
  margin-bottom: 10px;
}

.lp-headline {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.55;
  color: var(--forest);
  margin-bottom: 16px;
}

.lp-subtitle {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.85;
  color: rgba(11, 38, 33, 0.75);
  margin-bottom: 4px;
}

/* ── BLOC VSL (repris à l'identique de apps/simulateur_v2/styles.css:695-783) ── */
.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; }

/* ── Pied de page ── */
.lp-footer {
  max-width: 760px;
  margin: 40px auto 0 auto;
  padding: 24px 20px 40px 20px;
}
.lp-disclaimer {
  font-size: 11px;
  color: rgba(11, 38, 33, 0.45);
  line-height: 1.6;
  margin-bottom: 12px;
}
.lp-legal {
  font-size: 11px;
  color: rgba(11, 38, 33, 0.55);
  line-height: 1.6;
}
.lp-legal a { color: var(--sage); }

/* ── COOKIE BANNER - Branding Lignéa ── */
/* Repris à l'identique de apps/simulateur_v2/styles.css:950-1030 pour que la
   bannière de consentement soit visuellement identique à celle du simulateur. */
/* 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: 640px) {
  .lp-main { padding: 28px 16px 8px 16px; }
  .lp-headline { font-size: 25px; }
  .lp-subtitle { font-size: 16px; }
  .lp-header { padding: 18px 16px; }
}