/**
 * Pages légales — CGV, mentions légales, politique de confidentialité.
 *
 * Une seule feuille pour les trois. Elles avaient chacune la leur, soit 734 lignes
 * de CSS et 253 lignes de JavaScript quasi identiques sous trois préfixes différents
 * (cgv-, leg-, prv-) : trois copies à maintenir, et trois occasions de diverger. Tout
 * est passé sous le préfixe lg-.
 *
 * Le parti pris : ce sont des DOCUMENTS, pas des pages d'atterrissage. Chaque article
 * était enfermé dans une carte à fond gris avec une pastille ambre numérotée, ce qui
 * découpe un contrat en quatorze vignettes et empêche de le lire d'un trait. Le
 * découpage se fait maintenant par des filets et du blanc, le numéro d'article vit
 * dans la marge en chiffres mono, et le texte tient dans une colonne de mesure
 * lisible. C'est un document de référence : on doit pouvoir le lire, le chercher,
 * le citer et l'imprimer.
 */

/* ============================================================
   FIX ELEMENTOR
   ============================================================ */
body.page-template-page-cgv,
body.page-template-page-mentions-legales,
body.page-template-page-politique-confidentialite { padding-top:0 !important; }
.lg-page { margin-top:0 !important; }

/* ============================================================
   JETONS
   ============================================================ */
.lg-page {
    --bg0:var(--bg-primary); --bg2:var(--surface-card);
    --b0:var(--border-subtle); --b1:rgba(255,255,255,.10);
    --t0:var(--text-primary); --t1:var(--text-secondary); --t2:var(--text-muted);
    --accent:var(--primary-color);
    --accent-b:var(--primary-light);
    --accent-d:var(--primary-border);
    --ok:var(--success-color);
    --warn:var(--warning-color);
    --r:6px;
    --sans:var(--font-family-primary);
    --mono:var(--font-family-mono);

    display:block;
    font-family:var(--sans); color:var(--t0);
    background:var(--bg0); overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

.lg-evitement {
    position:absolute; left:12px; top:-60px; z-index:1200;
    background:var(--accent); color:#171208;
    font-family:var(--mono); font-size:12px; font-weight:700;
    padding:10px 16px; border-radius:var(--r); text-decoration:none;
    transition:top .15s ease;
}
.lg-evitement:focus { top:12px; }

.lg-page :focus-visible {
    outline:2px solid var(--accent); outline-offset:2px; border-radius:2px;
}

/* Barre d'avancement de lecture. Sur un contrat de quatorze articles elle informe
   vraiment — c'est le seul mouvement conservé sur la page. Plate, sans dégradé. */
.lg-progress-bar {
    position:fixed; top:0; left:0; height:2px; width:0;
    background:var(--accent); z-index:1000;
    transition:width .1s linear; pointer-events:none;
}

/* ============================================================
   EN-TÊTE DU DOCUMENT
   ============================================================ */
.lg-hero {
    max-width:1140px; margin:0 auto;
    padding:88px 40px 44px;
    border-bottom:1px solid var(--b0);
}
.lg-eyebrow {
    font-family:var(--mono); font-size:11px; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent); margin:0 0 16px;
}
/* Le titre était centré et démesuré pour un document de référence : il occupait
   l'écran entier avant le premier mot du contrat. */
.lg-page .page-hero-title {
    font-family:var(--mono) !important;
    font-size:clamp(28px,3.6vw,42px) !important;
    font-weight:var(--font-weight-bold) !important;
    line-height:1.15 !important; letter-spacing:-.02em !important;
    color:var(--t0) !important; margin:0 0 18px !important;
    text-align:left !important;
    background:none !important; -webkit-text-fill-color:var(--t0) !important;
}
.lg-hero-sub {
    font-size:16px; color:var(--t1); line-height:1.7;
    max-width:64ch; margin:0;
}

/* ============================================================
   MISE EN PAGE
   ============================================================ */
.lg-layout {
    max-width:1140px; margin:0 auto;
    padding:44px 40px 96px;
    display:grid; grid-template-columns:236px minmax(0,1fr);
    gap:64px; align-items:start;
}

/* ============================================================
   SOMMAIRE
   ============================================================ */
.lg-toc { position:sticky; top:24px; }
.lg-toc-head { padding:0 0 10px; border-bottom:1px solid var(--b0); }
/* « SOMMAIRE » était en --text-disabled sur le fond : 1,1:1, un fantôme. */
.lg-slbl {
    font-family:var(--mono); font-size:10px; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:var(--t1);
    margin:0;
}
.lg-toc-nav { display:flex; flex-direction:column; padding:8px 0; }
.lg-toc-a {
    display:flex; align-items:baseline; gap:10px;
    min-height:36px; padding:7px 10px 7px 12px;
    font-size:13px; line-height:1.35; color:var(--t1);
    text-decoration:none;
    border-left:2px solid transparent;
    transition:color .12s, border-color .12s, background .12s;
}
.lg-toc-a:hover { color:var(--t0); background:rgba(255,255,255,.03); }
.lg-toc-a.active { color:var(--accent); border-left-color:var(--accent); background:var(--accent-b); }
/* Les numéros du sommaire étaient eux aussi en --text-disabled. */
.lg-toc-num {
    font-family:var(--mono); font-size:10px; font-weight:700;
    color:var(--t2); flex-shrink:0; letter-spacing:.04em;
}
.lg-toc-a.active .lg-toc-num { color:var(--accent); }

.lg-toc-foot { padding-top:12px; border-top:1px solid var(--b0); }
.lg-print-btn {
    all:unset; box-sizing:border-box; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    width:100%; min-height:40px;
    font-family:var(--mono); font-size:11px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase;
    color:var(--t1); border:1px solid var(--b0); border-radius:var(--r);
    transition:color .12s, border-color .12s;
}
.lg-print-btn:hover { color:var(--accent); border-color:var(--accent-d); }

/* ============================================================
   CORPS DU DOCUMENT
   ============================================================ */
.lg-content { min-width:0; }

/* Plus de cartes : un filet et du blanc. Un contrat se lit d'un trait, pas en
   quatorze vignettes empilées. */
.lg-sec { padding:0 0 40px; margin-bottom:40px; border-bottom:1px solid var(--b0); }
.lg-sec:last-child { border-bottom:0; margin-bottom:0; }

.lg-sec-head {
    display:flex; align-items:baseline; gap:16px;
    margin-bottom:20px;
}
/* Le numéro était dans une pastille ambre pleine, en tête de chaque carte : six
   à quatorze médaillons identiques qui pèsent plus que les titres qu'ils annoncent. */
.lg-num {
    font-family:var(--mono); font-size:13px; font-weight:700;
    color:var(--t2); flex-shrink:0; letter-spacing:.06em;
    width:26px;
}
.lg-sec-title {
    font-size:24px; font-weight:var(--font-weight-extrabold);
    letter-spacing:-.02em; line-height:1.25; color:var(--t0);
    margin:0;
}

.lg-sec-body { padding-left:42px; max-width:70ch; }

.lg-sublbl {
    font-family:var(--mono); font-size:11px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
    margin:26px 0 10px;
}
.lg-sublbl:first-child { margin-top:0; }

/* Un document légal se lit longuement : 12,5 px en gris ne tient pas trois articles. */
.lg-txt { font-size:15.5px; line-height:1.75; color:var(--t1); margin:0 0 14px; }
.lg-txt:last-child { margin-bottom:0; }
.lg-hl { color:var(--accent); font-weight:600; }
.lg-sec-body strong { color:var(--t0); font-weight:var(--font-weight-bold); }
.lg-sec-body a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.lg-sec-body a:hover { text-decoration-thickness:2px; }

.lg-lst { list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:8px; }
.lg-lst li { font-size:15px; line-height:1.65; color:var(--t1); padding-left:18px; position:relative; }
.lg-lst li::before {
    content:''; position:absolute; left:0; top:9px;
    width:5px; height:1px; background:var(--accent);
}

/* Blocs d'identité (éditeur, hébergeur, DPO) : une fiche, pas un paragraphe. */
.lg-cinfo {
    border:1px solid var(--b0); border-radius:var(--r);
    padding:18px 20px; margin:0 0 16px;
    font-size:15px; line-height:1.85; color:var(--t1);
}
.lg-cinfo p { margin:0; }
.lg-cinfo strong { color:var(--t0); }

.lg-g2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-bottom:16px; }

/* ── Tableaux ────────────────────────────────────────────────
   Enveloppés d'un conteneur qui défile : une page ne défile jamais
   horizontalement à cause d'un tableau. */
.lg-tbl-wrap { overflow-x:auto; margin:0 0 18px; }
.lg-tbl {
    width:100%; border-collapse:collapse; font-size:14px;
    border:1px solid var(--b0); border-radius:var(--r); overflow:hidden;
}
.lg-tbl th {
    text-align:left; padding:11px 14px;
    font-family:var(--mono); font-size:10px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--t1);
    background:rgba(255,255,255,.03); border-bottom:1px solid var(--b0);
    white-space:nowrap;
}
.lg-tbl td {
    padding:12px 14px; color:var(--t1); line-height:1.55;
    border-bottom:1px solid var(--b0); vertical-align:top;
}
.lg-tbl tr:last-child td { border-bottom:0; }
.lg-tbl td strong { color:var(--t0); }
.lg-price { font-family:var(--mono); font-weight:700; color:var(--accent); }

/* ── Encadrés ───────────────────────────────────────────────
   Les emoji 💡 ⚠ ✓ qui les ouvraient sont remplacés par une étiquette nommée :
   un pictogramme décoratif ne dit pas de quel genre de remarque il s'agit, et
   les lecteurs d'écran l'annoncent en toutes lettres. */
.lg-box {
    border:1px solid var(--b0); border-left:2px solid var(--t2);
    border-radius:0 var(--r) var(--r) 0;
    padding:14px 18px; margin:0 0 16px;
    font-size:15px; line-height:1.7; color:var(--t1);
}
.lg-box-lbl {
    display:block;
    font-family:var(--mono); font-size:10px; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase;
    margin-bottom:6px; color:var(--t1);
}
.lg-box--info { border-left-color:var(--accent); }
.lg-box--info .lg-box-lbl { color:var(--accent); }
.lg-box--warn { border-left-color:var(--warn); }
.lg-box--warn .lg-box-lbl { color:var(--warn); }
.lg-box--ok { border-left-color:var(--ok); }
.lg-box--ok .lg-box-lbl { color:var(--ok); }

/* Marqueur d'information manquante : impossible à laisser passer en production. */
.lg-todo {
    display:inline-block;
    font-family:var(--mono); font-size:11px; font-weight:700;
    letter-spacing:.04em; text-transform:uppercase;
    color:var(--warn); background:var(--warning-bg);
    border:1px solid var(--warning-border); border-radius:3px;
    padding:1px 7px;
}

/* ── Étiquettes de tableau (politique de confidentialité) ── */
.lg-tag {
    display:inline-block; font-family:var(--mono); font-size:10px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase;
    color:var(--accent); background:var(--accent-b);
    border:1px solid var(--accent-d); border-radius:3px; padding:1px 7px;
    white-space:nowrap;
}
.lg-tag--no { color:var(--t1); background:rgba(255,255,255,.04); border-color:var(--b0); }

/* ── Grille des droits RGPD ─────────────────────────────── */
.lg-rights { margin:0 0 18px; }
.lg-rights-head { margin-bottom:14px; }
.lg-rights-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.lg-r-card { border:1px solid var(--b0); border-radius:var(--r); padding:16px 18px; }
.lg-r-ico  { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.08em; margin-bottom:8px; }
.lg-r-name { font-size:15px; font-weight:var(--font-weight-bold); color:var(--t0); margin-bottom:5px; }
.lg-r-desc { font-size:14px; line-height:1.6; color:var(--t1); }

/* ============================================================
   RETOUR EN HAUT
   ============================================================ */
.lg-scroll-top {
    all:unset; cursor:pointer; box-sizing:border-box;
    position:fixed; bottom:24px; right:24px;
    width:44px; height:44px; border-radius:50%;
    background:var(--accent); color:#171208;
    display:flex; align-items:center; justify-content:center;
    z-index:999; opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s, visibility .3s;
}
/* visibility en plus de l'opacité : sinon le bouton reste le dernier arrêt de
   tabulation de la page alors qu'il est invisible. */
.lg-scroll-top.visible { opacity:.92; visibility:visible; pointer-events:auto; }
.lg-scroll-top:hover { opacity:1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px) {
    .lg-layout { grid-template-columns:1fr; gap:28px; padding:32px 24px 72px; }
    .lg-hero   { padding:72px 24px 36px; }
    .lg-toc    { position:relative; top:0; border:1px solid var(--b0); border-radius:var(--r); padding:14px; }
    .lg-toc-nav { max-height:none; }
    .lg-sec-body { padding-left:0; }
    .lg-g2 { grid-template-columns:1fr; gap:20px; }
}
@media (max-width:600px) {
    .lg-hero   { padding:64px 16px 28px; }
    .lg-layout { padding:24px 16px 56px; }
    .lg-sec    { padding-bottom:32px; margin-bottom:32px; }
    .lg-sec-head { flex-direction:column; gap:4px; }
    .lg-sec-title { font-size:21px; }
    .lg-num { width:auto; }
    .lg-cinfo { padding:14px 16px; }
}

/* ============================================================
   IMPRESSION
   Ces pages sont réellement imprimées — elles ont un bouton pour ça.
   ============================================================ */
@media print {
    .lg-progress-bar, .lg-scroll-top, .lg-toc, .lg-evitement { display:none !important; }
    .lg-page   { background:#fff !important; color:#000 !important; }
    .lg-layout { display:block !important; max-width:none; padding:0; }
    .lg-hero   { padding:0 0 18px; border-color:#bbb; }
    .lg-page .page-hero-title { color:#000 !important; -webkit-text-fill-color:#000 !important; font-size:24px !important; }
    .lg-eyebrow, .lg-sublbl, .lg-num, .lg-toc-num { color:#555 !important; }
    .lg-sec-title { color:#000 !important; }
    .lg-txt, .lg-lst li, .lg-hero-sub, .lg-box, .lg-cinfo, .lg-tbl td { color:#222 !important; font-size:11pt; }
    .lg-sec { break-inside:avoid; border-color:#bbb; padding-bottom:18px; margin-bottom:18px; }
    .lg-sec-body { padding-left:0; max-width:none; }
    .lg-box, .lg-cinfo, .lg-tbl, .lg-r-card { border-color:#bbb !important; }
    .lg-sec-body a { color:#000 !important; }
    .lg-sec-body a[href^="http"]::after { content:" (" attr(href) ")"; font-size:9pt; color:#555; }
}

@media (prefers-reduced-motion: reduce) {
    .lg-page *, .lg-page *::before, .lg-page *::after {
        transition-duration:.01ms !important; animation-duration:.01ms !important;
    }
}