/* Accueils FR et NL (30/10/2026) — « voir avant de payer » : une vraie question à jouer, puis le
   cours, l'examen blanc, les films, les panneaux, et seulement ensuite les tarifs. Même identité que
   site.css (papier chaud, encre, bleu roi, ruban jaune) et que les vidéos du cours (pastille jaune,
   ligne pointillée de la route). Ni émoji ni grille d'icônes. Mobile d'abord (320 → 412 px), puis
   ordinateur à partir de 900 px. Chargée après site.css, numérotée par vite.config.js. */

.accueil { --texte: #3d4452; --ko: #b3260d; --ko-doux: #fdf0ec; --ok-doux: #edf7f0; --ombre: 0 1px 0 var(--line), 0 24px 48px -30px rgba(30, 37, 48, 0.4); }
.accueil main { overflow-x: clip; }
.lp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* En-tête : sur téléphone, seuls le bouton et la langue restent (les sections suivent au défilement). */
.accueil nav.main { gap: 0.9rem 1.1rem; }
.accueil nav.main a:not(.pill):not(.langlink) { display: none; }

/* La ligne pointillée de la route, comme sous l'en-tête des vidéos du cours. */
.lp-route { display: block; height: 4px; border: 0; margin: 0; background: repeating-linear-gradient(90deg, var(--yellow) 0 22px, transparent 22px 38px); }

/* La pastille jaune des vidéos. */
.lp-pastille { display: inline-block; background: var(--yellow); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 0.82rem; line-height: 1.25; padding: 0.32rem 0.8rem; border-radius: 999px; text-decoration: none; }
a.lp-pastille:hover { background: #ffd83d; }
.lp-pastille b { font-weight: 800; }

/* ---------- boutons ---------- */
.lp-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.55rem 1.3rem; border-radius: 12px; border: 2px solid transparent; font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.lp-btn-plein { background: var(--accent); color: #fff; }
.lp-btn-plein:hover { background: var(--accent-dark); }
.lp-btn-trait { background: var(--surface); color: var(--ink); border-color: var(--line); }
.lp-btn-trait:hover { border-color: var(--ink); }
.lp-lien { font-family: var(--display); font-weight: 700; text-decoration: none; }
.lp-lien:hover { text-decoration: underline; }

/* ---------- ouverture ---------- */
.lp-hero { padding: 22px 0 34px; }
.lp-hero-grid { display: grid; gap: 26px; align-items: start; }
.lp-hero h1 { font-size: clamp(2rem, 8vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em; margin: 14px 0 14px; }
.lp-hero h1 mark { background: linear-gradient(transparent 60%, var(--yellow) 60%, var(--yellow) 92%, transparent 92%); color: inherit; padding: 0 0.06em; }
.lp-sub { font-size: 1.05rem; line-height: 1.55; color: var(--texte); margin: 0 0 20px; max-width: 34em; }
.lp-hero .lp-btns .lp-btn { flex: 1 1 210px; }
.lp-prix-indice { margin: 14px 0 0; font-size: 0.92rem; color: var(--muted); }
.lp-prix-indice a { white-space: nowrap; }

/* ---------- la question d'essai ---------- */
.lp-quiz { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 14px; box-shadow: var(--ombre); }
.lp-q-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; font-family: var(--display); font-weight: 700; font-size: 0.86rem; color: var(--muted); margin: 2px 2px 10px; }
.lp-q-tete b { color: var(--ink); }
.lp-grave { background: var(--ko-doux); color: #86200d; border: 1px solid #f1c3b6; border-radius: 999px; padding: 1px 9px; font-size: 0.78rem; white-space: nowrap; }
.lp-q-photo { position: relative; margin: 0 0 12px; border-radius: 12px; overflow: hidden; aspect-ratio: 1024 / 572; background: var(--line); }
.lp-q-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* « Image de synthèse » : le même réglage que dans l'appli (src/styles.css, .qphoto-mention), le plancher validé le 29/10. */
.lp-synth { position: absolute; right: 5px; bottom: 3px; color: rgba(255, 255, 255, 0.72); font-size: 0.38rem; line-height: 1; letter-spacing: 0.02em; text-shadow: 0 0 2px rgba(0, 0, 0, 0.6); white-space: nowrap; pointer-events: none; }
.lp-q-texte { font-family: var(--display); font-weight: 700; font-size: 1.07rem; line-height: 1.35; margin: 0 2px 12px; }
.lp-choix-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lp-choix { width: 100%; min-height: 48px; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; text-align: left; font: inherit; font-size: 0.95rem; line-height: 1.4; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; }
.lp-choix:hover { border-color: var(--accent); }
.lp-choix:disabled { cursor: default; }
.lp-lettre { flex: none; width: 26px; height: 26px; margin-top: -1px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); font-family: var(--display); font-weight: 800; font-size: 0.85rem; }
/* Juste / faux : la couleur ne parle jamais seule (lecteur daltonien) — la lettre devient ✓ ou ✗. */
.lp-choix.est-bonne { border-color: var(--ok); background: var(--ok-doux); }
.lp-choix.est-bonne .lp-lettre { background: var(--ok); border-color: var(--ok); color: #fff; }
.lp-choix.est-fausse { border-color: var(--ko); background: var(--ko-doux); }
.lp-choix.est-fausse .lp-lettre { background: var(--ko); border-color: var(--ko); color: #fff; }
.lp-q.repondu .lp-choix:not(.est-bonne):not(.est-fausse) { opacity: 0.55; }
.lp-reponse { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg); font-size: 0.93rem; line-height: 1.5; }
.lp-reponse p { margin: 0; }
.lp-verdict { font-family: var(--display); font-weight: 800; font-size: 1rem; margin-bottom: 4px !important; }
.lp-verdict:empty { display: none; }
html.js .lp-q:not(.repondu) .lp-reponse { display: none; }
.lp-quiz { scroll-margin-top: 76px; }
.lp-quiz-pied { display: flex; margin-top: 12px; }
.lp-quiz-pied[hidden] { display: none; }
.lp-quiz-pied .lp-btn { flex: 1 1 auto; }
.lp-fin { padding: 8px 4px 4px; }
.lp-fin h3 { font-size: 1.3rem; margin: 0 0 8px; }
.lp-fin p { margin: 0 0 14px; color: var(--texte); }

/* ---------- les chiffres ---------- */
.lp-chiffres { list-style: none; margin: 0; padding: 18px 0 2px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; border-top: 1px solid var(--line); }
.lp-chiffres li { font-size: 0.9rem; line-height: 1.35; color: var(--muted); }
.lp-chiffres b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.55rem; line-height: 1.05; color: var(--ink); letter-spacing: -0.02em; }

/* ---------- sections ---------- */
.lp-section { padding: 44px 0; }
.lp-section-blanche { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lp-wrap.narrow { max-width: 820px; }
.lp-etiquette { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--display); font-weight: 700; font-size: 0.86rem; color: var(--accent-dark); }
.lp-etiquette::before { content: ''; width: 18px; height: 4px; border-radius: 2px; background: var(--yellow); }
.lp-section h2 { font-size: clamp(1.55rem, 6vw, 2.35rem); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 12px; }
.lp-chapo { font-size: 1.03rem; line-height: 1.6; color: var(--texte); margin: 0 0 18px; max-width: 40em; }
/* Deux colonnes sur ordinateur. Sur téléphone, une seule : la capture ou la vignette du film (premier
   enfant) flotte à droite en petit, et le texte l'habille. */
.lp-deux { display: block; }
.lp-deux > * + * { margin-top: 26px; }
.lp-deux > .lp-telephone + *, .lp-deux > .lp-film + * { margin-top: 0; }
.lp-deux::after { content: ''; display: block; clear: both; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vignette-loupe svg { display: block; color: #fff; }
.lp-points { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 10px; }
.lp-points li { position: relative; padding-left: 26px; line-height: 1.5; color: var(--texte); }
.lp-points li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 14px; height: 4px; border-radius: 2px; background: var(--yellow); }
.lp-points strong { color: var(--ink); }

/* ---------- le cours : aperçu vidéo + chapitres ---------- */
.lp-video { margin: 0; }
.lp-video-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lp-video-image { position: relative; flex: none; width: 140px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--asphalt); box-shadow: var(--ombre); }
.lp-video-image img, .lp-video-image video { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-lecture { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--yellow); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.lp-lecture::after { content: ''; position: absolute; left: 17px; top: 13px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--ink); }
.lp-video-texte { display: grid; gap: 6px; font-size: 0.92rem; line-height: 1.4; color: var(--texte); }
.lp-video-texte strong { font-family: var(--display); font-size: 1rem; color: var(--ink); }
.lp-video-texte .lp-pastille { justify-self: start; font-size: 0.82rem; }
.lp-chapitres { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: ch; display: grid; gap: 2px; }
.lp-chapitres li { counter-increment: ch; }
.lp-chapitres a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 4px 0; color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.3; border-bottom: 1px dashed var(--line); }
.lp-chapitres a::before { content: counter(ch); flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); font-family: var(--display); font-weight: 800; font-size: 0.82rem; color: var(--accent-dark); }
.lp-chapitres a:hover { color: var(--accent); }

/* ---------- l'examen blanc : capture de l'appli ---------- */
.lp-telephone { float: right; width: 112px; margin: 2px 0 12px 16px; padding: 5px; border-radius: 18px; background: var(--ink); box-shadow: var(--ombre); }
.lp-telephone a { position: relative; display: block; }
.lp-telephone img { display: block; width: 100%; height: auto; border-radius: 13px; }
.lp-bareme { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 0.94rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.lp-bareme th, .lp-bareme td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lp-bareme tr:last-child td { border-bottom: 0; }
.lp-bareme th { font-family: var(--display); font-size: 0.82rem; color: var(--muted); background: var(--bg); }
.lp-bareme td { overflow-wrap: anywhere; }
.lp-section-blanche .lp-bareme { background: var(--bg); }
.lp-section-blanche .lp-bareme th { background: #f3efe4; }

/* ---------- le test de perception des risques : bandeau « asphalte » ---------- */
.lp-asphalte { background: var(--asphalt); color: #e8ebf2; padding: 0 0 44px; }
.lp-asphalte .lp-route { margin-bottom: 40px; }
.lp-asphalte h2 { color: #fff; }
.lp-asphalte .lp-etiquette { color: var(--yellow); }
.lp-asphalte .lp-chapo, .lp-asphalte .lp-points li { color: #c9cfdb; }
.lp-asphalte .lp-points strong, .lp-asphalte .lp-prix-tpr strong { color: #fff; }
.lp-asphalte a:not(.lp-btn) { color: #ffd83d; }
.lp-film { float: right; width: 128px; margin: 4px 0 12px 14px; }
.lp-asphalte .lp-badge-tpr { font-size: 0.82rem; }
.lp-film a { position: relative; display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.lp-film img { display: block; width: 100%; height: auto; }
.lp-oblig { margin: 0 0 12px; font-family: var(--display); font-weight: 700; color: #fff; }
.lp-villes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.lp-villes li { padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); font-size: 0.84rem; color: #e8ebf2; }
.lp-prix-tpr { margin: 0 0 18px; font-size: 0.95rem; color: #c9cfdb; }
.lp-asphalte .lp-btn-trait { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.lp-asphalte .lp-btn-trait:hover { border-color: #fff; }
.lp-asphalte .lp-badge-tpr { display: table; margin: 0 0 12px; }

/* ---------- les panneaux ---------- */
.lp-panneaux { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 10px; margin: 0 -20px 18px; padding: 4px 20px 10px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.lp-panneaux li { scroll-snap-align: start; }
.lp-panneaux a { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; padding: 12px 8px 10px; text-align: center; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.lp-panneaux a:hover { border-color: var(--accent); }
.lp-panneaux img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 4px; }
.lp-panneaux b { font-family: var(--display); font-size: 0.95rem; }
.lp-panneaux span { font-size: 0.82rem; line-height: 1.25; color: var(--muted); }

/* ---------- le journal des nouveautés ---------- */
.lp-journal { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lp-journal li { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.lp-journal time { font-family: var(--display); font-weight: 700; font-size: 0.82rem; color: var(--accent-dark); }
.lp-journal strong { font-family: var(--display); font-size: 1rem; }
.lp-journal p { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--texte); }

/* ---------- les avis ---------- */
/* Téléphone : défilement horizontal, une carte et le bord de la suivante (au lieu de ≈ 2 500 px de cartes
   empilées) ; ordinateur : trois colonnes. La réponse de TheoRoute est repliée (details), un toucher la
   déplie ; le texte complet reste dans la page. */
.lp-avis .reviews-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; align-items: start; margin: 0 -20px; padding: 4px 20px 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.lp-avis .review-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 12px; border-radius: 16px; box-shadow: var(--ombre); }
.lp-avis .review-text { margin: 2px 0 0; font-size: 0.95rem; line-height: 1.5; }
.lp-avis .review-meta { margin: 0; font-family: var(--display); font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.lp-avis details.review-reply { margin: 4px 0 0; padding: 0; background: none; border: 0; border-top: 1px dashed var(--line); border-radius: 0; color: var(--texte); font-size: 0.9rem; }
.lp-avis details.review-reply summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 700; font-size: 0.88rem; color: var(--accent-dark); }
.lp-avis details.review-reply summary::-webkit-details-marker { display: none; }
.lp-avis details.review-reply summary::after { content: '+'; margin-left: 8px; font-size: 1.1rem; line-height: 1; }
.lp-avis details.review-reply[open] summary::after { content: '−'; }
.lp-avis details.review-reply p { margin: 2px 0 4px; padding: 8px 10px; background: var(--bg); border-left: 3px solid var(--yellow); border-radius: 0 8px 8px 0; line-height: 1.5; }
.lp-avis + .lp-tarifs { border-top: 1px solid var(--line); }

/* ---------- les tarifs ---------- */
.lp-gratuit { margin: 0 0 22px; padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.lp-gratuit h3 { margin: 0 0 10px; font-size: 1.15rem; }
.lp-gratuit .lp-points { margin: 0; gap: 8px; }
.lp-tarifs .offers-title { font-family: var(--display); font-size: 1.15rem; text-align: left; margin: 0 0 12px; }
.lp-honnete { margin: 18px 0 0; font-size: 0.95rem; color: var(--texte); }
.lp-tarifs .guarantee { margin: 14px 0 0; }

/* ---------- boîte d'agrandissement des vidéos ---------- */
.lp-dialogue { width: min(96vw, 960px); max-width: none; padding: 0; border: 0; border-radius: 14px; background: #000; }
.lp-dialogue::backdrop { background: rgba(15, 23, 42, 0.86); }
.lp-dialogue video { display: block; width: 100%; height: auto; }
.lp-dialogue button { position: absolute; top: 8px; right: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.92); font-family: var(--display); font-weight: 700; cursor: pointer; }

/* ---------- 520 px et plus ---------- */
@media (min-width: 520px) {
  .lp-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-video-image { width: 200px; }
  .lp-telephone { width: 150px; }
  .lp-film { width: 210px; }
  .lp-gratuit .lp-points { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}

/* ---------- ordinateur ---------- */
@media (min-width: 900px) {
  .accueil nav.main a:not(.pill):not(.langlink) { display: inline-block; padding: 8px 2px; }
  .lp-hero { padding: 44px 0 52px; }
  .lp-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 52px; }
  .lp-hero .lp-btns .lp-btn { flex: 0 1 auto; }
  .lp-quiz { padding: 18px; margin-top: 6px; }
  .lp-chiffres { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 8px; }
  .lp-section { padding: 76px 0; }
  .lp-asphalte { padding-bottom: 76px; }
  .lp-asphalte .lp-route { margin-bottom: 72px; }
  .lp-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .lp-deux > * + * { margin-top: 0; }
  .lp-deux::after { content: none; }
  .lp-deux-inverse > :first-child { order: 2; }
  .lp-deux-inverse { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .lp-asphalte .lp-deux { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; }
  /* Sur ordinateur, l'aperçu vidéo et les captures prennent toute leur place. */
  .lp-video-btn { display: block; }
  .lp-video-image { width: 100%; border-radius: 16px; }
  .lp-lecture { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .lp-lecture::after { left: 28px; top: 21px; border-width: 15px 0 15px 22px; }
  .lp-video-texte { margin-top: 14px; }
  .lp-chapitres { grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .lp-telephone { float: none; width: 290px; margin: 0 auto; padding: 10px; border-radius: 40px; }
  .lp-telephone img { border-radius: 30px; }
  .lp-film { float: none; width: 100%; margin: 0; }
  .lp-film a { border-radius: 16px; }
  .lp-panneaux { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 22px; padding: 0; overflow: visible; }
  .lp-journal { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .lp-avis .reviews-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; overflow: visible; }
}

/* Espace dys sur l'accueil (04/11/2026) : une carte crème, le fond de l'affichage facile à lire. */
.lp-dys { background: #fdf9ee; border: 1.5px solid var(--line); border-radius: 18px; padding: 28px 26px; max-width: 860px; }
.lp-dys .lp-chapo { max-width: 46em; }
@media (max-width: 700px) { .lp-dys { padding: 20px 16px; } }
.lp-dys-partage { margin: 14px 0 0; font-size: 0.95rem; color: var(--muted); }
/* Ruban « Dyslexie » sous l'en-tête (04/11/2026) : visible sur téléphone, où la navigation de bureau est repliée. */
.lp-ruban { display: block; text-align: center; padding: 9px 16px; background: #fdf9ee; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 0.95rem; line-height: 1.4; }
.lp-ruban strong { color: var(--accent-dark); }
.lp-ruban:hover { background: var(--yellow-soft); }