/* ════════════════════════════════════════════════════════════════
   OVELIYA SCELLÉ — Finition mobile (chargée EN DERNIER, non destructive)
   But : éviter les débordements/chevauchements, centrer le texte,
   privilégier la largeur écran, atténuer l'« effet tache » de fond.
   N'altère que ≤ 640px (sauf garde-fou anti-débordement, sûr partout).
   ════════════════════════════════════════════════════════════════ */

/* Garde-fou anti-débordement horizontal — sûr à toutes tailles */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas, video { max-width: 100%; height: auto; }

/* ════════════════════════════════════════════════════════════════
   PALETTE RAFFINÉE (globale, desktop + mobile) — non destructive.
   On redéfinit seulement les variables de couleur du thème ; le sceau
   est restauré à son or d'origine plus bas (intact).
   Pour revenir en arrière : supprimer ce bloc.
   ════════════════════════════════════════════════════════════════ */
:root {
  --bg: #0E0C0A !important;          /* charcoal chaud (au lieu du noir froid) */
  --surface: #16130E !important;
  --surface2: #1E1A13 !important;
  --ink-readable: #ECE4D6 !important; /* ivoire doux (au lieu du blanc cru) */
  --ink-light: #CFC4AC !important;
  --gold: #C2A35A !important;        /* or antique mat (au lieu du jaune vif) */
  --gold2: #A8863F !important;
  --gold3: #7E6228 !important;
  --border: rgba(194, 163, 90, 0.20) !important;
  --border-soft: rgba(194, 163, 90, 0.10) !important;
  --glow: rgba(194, 163, 90, 0.20) !important;
  --text-dim: rgba(236, 228, 214, 0.78) !important;
  --text-mid: rgba(236, 228, 214, 0.92) !important;
}
html, body { background-color: #0E0C0A; }

/* Le SCEAU reste son or d'origine — on ne le touche pas */
#landing-seal, .landing-seal, .landing-seal *,
.landing-seal-ring, .landing-seal-img {
  --gold: #d4af37 !important;
  --gold2: #c19a2f !important;
  --gold3: #a67c1f !important;
  --glow: rgba(212, 175, 55, 0.25) !important;
}

@media (max-width: 640px) {

  /* Permet aux enfants flex/grid de rétrécir → supprime les débordements
     qui provoquent des chevauchements de texte */
  *, *::before, *::after { min-width: 0; }

  /* Le texte se replie proprement, jamais hors écran */
  h1, h2, h3, p, li,
  .dossier-lead, .offer-name, .offer-price, .cta-final-title {
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* Atténuer l'« effet tache » : halo doré derrière le sceau + radials décoratifs */
  .landing-seal-glow {
    display: none !important;
  }
  #p-landing .dossier-entry::before,
  .cta-final::before,
  footer.site-footer::before,
  #p-landing #dossier-hero.dossier-entry--hero-split::before {
    background: none !important;
  }

  /* L'aire du sceau ne doit jamais devenir une grande bande sombre :
     on la borne partout (pas seulement dans le hero) et on retire tout fond/ombre. */
  .landing-seal-stage,
  .dossier-hero-seal-stage {
    width: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 6px auto !important;
    background: none !important;
    box-shadow: none !important;
  }
  .landing-seal-img { width: 96px !important; height: 96px !important; }
  .mirror-main, .mirror-cols, .dossier-hero-fade { background: none !important; }

  /* Privilégier la largeur écran : sections pleine largeur, marge latérale homogène */
  #p-landing > section,
  #p-landing .dossier-entry,
  .landing-trust-block,
  .cta-final,
  #screen-recap {
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Héros empilé et centré */
  .dossier-hero-grid { grid-template-columns: 1fr !important; }
  .dossier-hero-copy,
  .dossier-lead,
  .hero-note,
  .cta-final,
  .cta-final-title,
  .cta-final p {
    text-align: center !important;
  }
  /* Boutons du héros bien au centre */
  .dossier-hero-copy .btn,
  .cta-final .btn { margin-left: auto; margin-right: auto; }

  /* Réduire les très grands titres pour éviter tout chevauchement */
  .cta-final-title { font-size: clamp(26px, 8vw, 40px) !important; }

  /* Cartes d'offres : pleine largeur, contenu qui ne déborde pas */
  .offer-features li { overflow-wrap: anywhere; }

  /* ── Vérificateur ── */
  /* Chevauchement : annule la marge négative (-32px) qui superpose
     « Sans recopier… » au paragraphe du dessus quand le texte se replie. */
  #p-verify .hub-muted { margin-top: 10px !important; }
  /* Privilégier la largeur écran (moins « centré/étroit ») */
  #p-verify .verify-max {
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* ── Bande sombre/dorée du miroir = halo du sceau : on l'élimine ── */
  .landing-seal-glow,
  .dossier-hero-rail::before, .dossier-hero-rail::after,
  .landing-seal::before, .landing-seal::after,
  .landing-seal-stage::before, .landing-seal-stage::after {
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
  .dossier-hero-rail { min-height: 0 !important; }
  .landing-seal {
    width: 120px !important; height: 120px !important;
    background: none !important; box-shadow: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   FOND PREMIUM — couleur unique, lisse, sans vignette/grain/dégradé.
   Global (desktop + mobile). Pour changer la couleur : modifier --bg.
   ════════════════════════════════════════════════════════════════ */
:root { --bg: #141210 !important; --surface: #1A1712 !important; --surface2: #221E17 !important; }
html, body { background: #141210 !important; }

/* Supprimer ce qui rend le fond inégal */
body::after,
.grain-overlay { display: none !important; }
.archive-vignette { box-shadow: none !important; }

/* Aplatir les dégradés/halos qui teintent le fond (uniforme partout) */
#p-landing .dossier-entry::before,
#p-landing #dossier-hero::before,
#p-landing #dossier-hero.dossier-entry--hero-split::before,
.cta-final::before,
footer.site-footer::before,
.landing-seal-glow,
.dossier-hero-fade,
.mirror-main, .mirror-cols {
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.cta-final { background: transparent !important; }

/* ── Pop-up « Reprendre votre parcours » : carte compacte centrée ── */
.modal-overlay { padding: 20px !important; align-items: center !important; }
.modal-card {
  max-width: 360px !important;
  width: 100% !important;
  margin: auto !important;
  padding: 26px 22px !important;
  border-radius: 16px !important;
}
.modal-card-title { font-size: 22px !important; line-height: 1.2 !important; }
.modal-card-desc { font-size: 14px !important; line-height: 1.55 !important; }
.modal-actions { gap: 10px !important; }
.modal-btn-dismiss, .modal-btn-primary { padding: 13px 16px !important; font-size: 13px !important; }

/* ── Toast « bientôt » : discret, en bas ── */
#toast {
  max-width: 340px !important;
  margin: 0 auto !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  border-radius: 12px !important;
}

@media (max-width: 640px) {
  /* En-tête aéré : sceau plus petit, actions qui passent dessous, pas de chevauchement */
  #main-nav { flex-wrap: wrap !important; gap: 8px 10px !important; padding: 8px 12px !important; align-items: center !important; }
  #main-nav .nav-seal-slot img { width: 40px !important; height: 40px !important; }
  #main-nav .nav-logo { font-size: 14px !important; letter-spacing: .12em !important; }
  .nav-actions { flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; width: 100% !important; }
  .nav-link { font-size: 11px !important; padding: 7px 10px !important; }
  .nav-cta { font-size: 11px !important; padding: 9px 14px !important; }
  .nav-lang { font-size: 11px !important; padding: 6px 8px !important; }
}

/* ── PDF sur mobile : cadre cassé masqué, repli clair vers le bon bouton ── */
@media (max-width: 640px) {
  #pdf-iframe { display: none !important; }
  #pdf-mobile-fallback { display: flex !important; }

  /* Page Cartographie / récap : pleine largeur, SANS paddings cumulés.
     Une seule gouttière externe ; les conteneurs internes à 0. */
  #screen-recap .wiz-body.recap-max,
  #screen-recap .recap-max {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  #screen-recap .recap-scroll,
  .recap-kpi-acc,
  #recap-kpi-details,
  #recap-kpi-zone {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  /* Cartes d'indices : pleine largeur + mises en valeur (pas coincées) */
  #recap-kpi-zone div[style*="border-left"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 18px !important;
    border-left-width: 3px !important;
    border-radius: 0 10px 10px 0 !important;
    background: rgba(236, 231, 222, 0.055) !important;
    margin-bottom: 14px !important;
  }
  #recap-kpi-zone .recap-item-label { font-size: 12px !important; letter-spacing: .16em !important; }
  #recap-kpi-zone .recap-item-text { font-size: 16px !important; line-height: 1.6 !important; }
}