/* ================================================================
   Pages légales CoinchePassion (Confidentialité / CGU / Cookies)
   Style aligné sur la landing : fond sombre, accents dorés.
================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:     #0e0814;
    --bg2:    #140b1f;
    --gold:   #fbbf24;
    --text:   #f1f5f9;
    --muted:  rgba(241,245,249,.62);
    --border: rgba(255,255,255,.10);
    --card:   rgba(255,255,255,.03);
}

html { scroll-behavior: smooth; }

/* ---- Ascenseur doré ----
   Le même que `.custom-scrollbar` du jeu (rgba(251,191,36,.3), pouce arrondi,
   piste transparente) : encadrées dans une modale, ces pages doivent avoir
   l'ascenseur du jeu et non celui du système, qui trancherait en clair sur le
   fond sombre. Un peu plus large que les 4 px du jeu — ici on fait défiler un
   DOCUMENT, pas un panneau, et le pouce doit s'attraper. */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(251,191,36,.3) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(251,191,36,.3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(251,191,36,.6); }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* ---- Barre supérieure ---- */
.legal-nav {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 24px;
    background: rgba(14,8,20,.85);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.legal-brand {
    font-weight: 900; font-size: 1.15rem; letter-spacing: -.02em;
    color: #fff; text-decoration: none; white-space: nowrap;
}
.legal-brand span { color: var(--gold); }
/* Le signe de la marque : même signature que la landing et le jeu, et il
   PRÉCÈDE le mot — ce qui suit un nom se lit comme une décoration.
   Il tourne au survol — seul mouvement de ces pages, et il désigne la marque. */
.legal-brand { display: inline-flex; align-items: center; }
.legal-brand-signe {
    width: 20px; height: 20px; border-radius: 50%; margin-right: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
    transition: transform .8s cubic-bezier(.2,.8,.3,1);
}
.legal-brand:hover .legal-brand-signe { transform: rotate(360deg) scale(1.12); }
.legal-back {
    color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 700;
    border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px;
    transition: all .15s; white-space: nowrap;
}
.legal-back:hover { color: var(--gold); border-color: rgba(251,191,36,.5); }

/* ---- Contenu ---- */
.legal-wrap { max-width: 820px; margin: 0 auto; padding: 40px 24px 80px; }

.legal-header { margin-bottom: 36px; }
.legal-kicker {
    display: inline-block; font-size: .72rem; font-weight: 900;
    letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
    background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.25);
    border-radius: 999px; padding: 5px 14px; margin-bottom: 16px;
}
.legal-header h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 900; line-height: 1.15; letter-spacing: -.02em; }
.legal-updated { color: var(--muted); font-size: .85rem; margin-top: 10px; }

.legal-toc {
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    padding: 18px 22px; margin: 0 0 40px;
}
.legal-toc h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 12px; }
.legal-toc ol { list-style: none; counter-reset: toc; display: grid; gap: 6px; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { color: var(--text); text-decoration: none; font-size: .92rem; opacity: .85; }
.legal-toc a::before { content: counter(toc) ". "; color: var(--gold); font-weight: 800; }
.legal-toc a:hover { opacity: 1; color: var(--gold); }

.legal-section { margin-bottom: 34px; scroll-margin-top: 80px; }
.legal-section h2 {
    font-size: 1.25rem; font-weight: 900; margin-bottom: 12px;
    padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.legal-section h2 .num { color: var(--gold); margin-right: 8px; }
.legal-section h3 { font-size: 1rem; font-weight: 800; margin: 18px 0 8px; color: #fff; }
.legal-section p, .legal-section li { color: var(--muted); font-size: .96rem; }
.legal-section p { margin-bottom: 12px; }
.legal-section ul { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px; }
.legal-section strong { color: var(--text); }
.legal-section a { color: var(--gold); }

/* Tableau (cookies) */
.legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: .88rem; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border: 1px solid var(--border); vertical-align: top; }
.legal-table th { background: rgba(255,255,255,.04); color: var(--text); font-weight: 800; }
.legal-table td { color: var(--muted); }
.legal-table-scroll { overflow-x: auto; }

/* Encadré (info / à compléter) */
.legal-note {
    background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.28);
    border-radius: 12px; padding: 14px 18px; margin: 0 0 24px;
    color: var(--muted); font-size: .9rem;
}
.legal-note strong { color: var(--gold); }

/* Le formulaire de rétractation des CGV : un cadre à recopier ou imprimer */
.legal-formulaire {
    border: 1px dashed var(--border); border-radius: 12px; padding: 16px 18px;
    background: rgba(255,255,255,.03);
}
.legal-formulaire p { margin-bottom: 8px; }

/* Champ à compléter par l'éditeur */
.todo {
    color: #fca5a5; background: rgba(239,68,68,.10);
    border-bottom: 1px dashed rgba(239,68,68,.5);
    padding: 0 4px; border-radius: 3px; font-style: italic;
}

/* ---- En-tête des pages de variante ----
   Ces pages sont celles où atterrissent les domaines : elles s'ouvrent sur
   l'offre, pas sur le sommaire. Deux en-têtes se suivent — celui de l'accueil,
   puis celui des règles — et le premier s'efface en mode encadré. */
.legal-pitch { color: var(--muted); font-size: 1.02rem; margin-top: 12px; max-width: 44rem; }
.legal-accueil .legal-hero-btn { margin-top: 20px; }
.legal-regles { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--border); }
.legal-regles h2 { font-size: clamp(1.3rem, 3.4vw, 1.75rem); font-weight: 900; letter-spacing: -.01em; }
/* En mode encadré, l'accueil est masqué : ce trait n'aurait plus rien à
   séparer, et la page s'ouvrirait sur une ligne orpheline. */
.regles-nues .legal-regles { margin-top: 0; padding-top: 0; border-top: 0; }

.legal-hero-btn {
    flex-shrink: 0;
    display: inline-block; padding: 11px 22px;
    background: var(--gold); color: #2a1c08;
    font-weight: 900; text-decoration: none;
    border-radius: 999px; white-space: nowrap;
    transition: transform .15s, box-shadow .15s;
}
.legal-hero-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(251,191,36,.32);
}

/* ---- Le film des règles (31/10/2026) ----
   Un LIEN vers YouTube, pas un lecteur intégré : un lecteur chargerait
   YouTube et ses traceurs à chaque ouverture de la page, et demanderait un
   bandeau de consentement. La vignette est une copie locale
   (`static/images/films/`), pour la même raison. */
.legal-video {
    display: flex; align-items: center; gap: 18px;
    margin: 0 0 28px; padding: 12px;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    color: var(--text); text-decoration: none;
    transition: border-color .15s, background .15s;
}
.legal-video:hover { border-color: rgba(251,191,36,.5); background: rgba(251,191,36,.06); }
.legal-video:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.legal-video-vignette {
    position: relative; flex-shrink: 0;
    width: 200px; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden;
}
.legal-video-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Le bouton de lecture : un disque sombre, un triangle doré par-dessus */
.legal-video-vignette::after {
    content: ''; position: absolute; z-index: 1; left: 50%; top: 50%;
    width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
    background: rgba(14,8,20,.75); box-shadow: 0 2px 10px rgba(0,0,0,.5);
    transition: transform .15s;
}
.legal-video-vignette::before {
    content: ''; position: absolute; z-index: 2; left: 50%; top: 50%;
    width: 15px; height: 18px; margin: -9px 0 0 -5px;
    background: var(--gold); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.legal-video:hover .legal-video-vignette::after { transform: scale(1.1); }
.legal-video-texte { display: grid; gap: 3px; }
.legal-video-kicker {
    font-size: .72rem; font-weight: 900; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gold);
}
.legal-video-titre { font-size: 1.05rem; font-weight: 900; line-height: 1.3; }
.legal-video-sous { font-size: .85rem; color: var(--muted); line-height: 1.4; }

/* ---- Pied ---- */
.legal-foot {
    max-width: 820px; margin: 0 auto; padding: 28px 24px 60px;
    border-top: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
    color: var(--muted); font-size: .85rem;
}
.legal-foot a { color: var(--muted); text-decoration: none; }
.legal-foot a:hover { color: var(--gold); }
.legal-foot .sep { opacity: .4; }

/* ---- Mode ENCADRÉ (`?nu=1`) ----
   La même page, appelée depuis le jeu dans une modale. On retire ce qui
   appartient au SITE et non aux règles : la marque, « ← Retour au site » — le
   joueur ne revient pas au site, il revient à sa partie — et le pied de page
   avec ses liens légaux, qui l'en sortiraient. Le contenu, lui, est identique
   au caractère près : c'est le même fichier. */
.regles-nues .legal-nav,
.regles-nues .legal-foot,
.regles-nues .legal-accueil,
.regles-nues .legal-cta { display: none; }
.regles-nues .legal-wrap { padding-top: 24px; padding-bottom: 40px; }

/* Téléphone en portrait (25/10/2026) : une colonne d'un tableau trop large
   — « Durée » des cookies, « Dame » des carrés — sortait à droite sans que
   rien ne le dise. Une ombre dorée borde le côté qui cache encore quelque
   chose (elle s'efface quand on a défilé jusqu'au bout), et les cellules
   se resserrent. */
/* ---- Impression, et PDF des conditions de vente (31/10/2026) ----
   Le PDF joint à chaque confirmation d'achat est CETTE page imprimée
   (`outils/cgv_pdf.py`) : un document qu'on garde, donc noir sur blanc, sans
   la barre ni le pied, qui ne mènent nulle part sur le papier. Le sommaire
   reste : ses liens fonctionnent dans le PDF. */
@page { size: A4; margin: 16mm 15mm 18mm; }
@media print {
    :root {
        --bg: #fff; --bg2: #fff; --card: #fff;
        --gold: #8a5a00; --text: #111; --muted: #2b2b2b; --border: #c9c9c9;
    }
    html { font-size: 10.5pt; }
    body { background: #fff; line-height: 1.5; }
    .legal-nav, .legal-foot, .legal-video { display: none; }
    .legal-wrap { max-width: none; padding: 0; }
    .legal-header { margin-bottom: 18px; }
    .legal-kicker { background: none; padding: 0; border: 0; margin-bottom: 6px; }
    .legal-toc { padding: 10px 14px; margin-bottom: 20px; break-inside: avoid; }
    .legal-toc ol { grid-template-columns: 1fr 1fr; gap: 2px 24px; }
    .legal-section { margin-bottom: 16px; }
    .legal-section h2 { font-size: 1.12rem; break-after: avoid; }
    .legal-section h3 { color: var(--text); break-after: avoid; }
    .legal-section a { color: var(--text); }
    .legal-formulaire { break-inside: avoid; }
}

@media (max-width: 500px) {
    .legal-video { flex-direction: column; align-items: stretch; gap: 12px; }
    .legal-video-vignette { width: 100%; }
    .legal-table { font-size: .8rem; }
    .legal-table th, .legal-table td { padding: 8px; }
    .legal-table-scroll {
        background:
            linear-gradient(to right, var(--bg) 30%, rgba(14,8,20,0)) left center / 28px 100% no-repeat local,
            linear-gradient(to left, var(--bg) 30%, rgba(14,8,20,0)) right center / 28px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(251,191,36,.45), transparent) left center / 14px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(251,191,36,.45), transparent) right center / 14px 100% no-repeat scroll;
    }
}