/* ==========================================================================
   LEGAL.CSS : mise en page des documents juridiques
   CGV · Politique de confidentialite · Mentions legales (FR et NL)

   Pourquoi un fichier a la main plutot que des classes Tailwind : le build du
   site (assets/css/tailwind.min.css) est PURGE. Une valeur arbitraire jamais
   rencontree ailleurs, par exemple text-[#8cc63f], n'y produit aucune regle et
   l'element s'affiche sans style. Tout ce qui suit est donc ecrit en clair.

   Parti pris : un document juridique doit ressembler a un document, pas a une
   page de vente. Les anciennes pages portaient une pastille verte en degrade
   « DOCUMENT JURIDIQUE », un bandeau rouge en capitales et quatre badges de
   reassurance. Ces ornements font exactement l'inverse de ce qu'ils cherchent :
   ils donnent l'air amateur a un texte qui engage juridiquement. Ici, la
   credibilite vient de la typographie, de la numerotation et de la tracabilite
   des versions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. JETONS
   Definis sur :root en clair d'abord, puis surcharges pour le theme sombre.
   Le site est sombre par defaut et bascule en clair via html[data-theme].
   -------------------------------------------------------------------------- */
:root {
    --lg-ink:        #e8eef5;   /* texte courant */
    --lg-ink-strong: #ffffff;   /* titres, termes definis */
    --lg-ink-soft:   #93a4b8;   /* metadonnees, notes */
    --lg-rule:       rgba(255, 255, 255, .10);
    --lg-surface:    rgba(255, 255, 255, .035);
    --lg-surface-2:  rgba(255, 255, 255, .06);
    --lg-accent:     #8cc63f;
    --lg-accent-ink: #8cc63f;
    --lg-shadow:     0 1px 2px rgba(0, 0, 0, .30);
    --lg-measure:    68ch;      /* longueur de ligne confortable en lecture */
}
html[data-theme="light"] {
    --lg-ink:        #24384d;
    --lg-ink-strong: #0f2b46;
    --lg-ink-soft:   #5b6f85;
    --lg-rule:       rgba(15, 43, 70, .14);
    --lg-surface:    #ffffff;
    --lg-surface-2:  #f4f7fa;
    --lg-accent:     #4e7d1f;   /* #8cc63f ne donne que 2.05:1 sur blanc */
    --lg-accent-ink: #3d6318;
    --lg-shadow:     0 1px 2px rgba(15, 43, 70, .08);
}

/* --------------------------------------------------------------------------
   2. GABARIT
   Colonne de texte + sommaire lateral colle, a partir de 1100 px seulement.
   En dessous, le sommaire repasse au-dessus du texte, deroulable.
   -------------------------------------------------------------------------- */
.lg-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px 80px;
}
.lg-grid { display: block; }

@media (min-width: 1100px) {
    .lg-grid {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 48px;
        align-items: start;
    }
}

/* --------------------------------------------------------------------------
   3. EN-TETE DU DOCUMENT
   Le bloc de version remplace le « Derniere mise a jour » calcule par
   date('d/m/Y'), qui affichait la date du jour a chaque visite : un document
   contractuel doit porter une date FIGEE, sinon rien ne prouve quelle version
   le client a acceptee le jour de son achat.
   -------------------------------------------------------------------------- */
.lg-head {
    padding: 44px 0 28px;
    border-bottom: 1px solid var(--lg-rule);
    margin-bottom: 40px;
}
.lg-kicker {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lg-ink-soft);
    margin: 0 0 14px;
}
.lg-head h1 {
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    font-weight: 800;
    color: var(--lg-ink-strong);
    margin: 0 0 16px;
    letter-spacing: -.01em;
}
.lg-lede {
    font-size: 17px;
    line-height: 1.65;
    color: var(--lg-ink);
    max-width: var(--lg-measure);
    margin: 0 0 26px;
}

/* Tableau de version : trois faits, alignes, sans decoration. */
.lg-version {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
    padding: 16px 18px;
    background: var(--lg-surface);
    border: 1px solid var(--lg-rule);
    border-radius: 10px;
    max-width: var(--lg-measure);
}
.lg-version div { min-width: 0; }
.lg-version dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--lg-ink-soft);
    margin: 0 0 3px;
}
.lg-version dd {
    font-size: 14px;
    font-weight: 600;
    color: var(--lg-ink-strong);
    margin: 0;
}

/* --------------------------------------------------------------------------
   4. SOMMAIRE
   -------------------------------------------------------------------------- */
.lg-toc {
    background: var(--lg-surface);
    border: 1px solid var(--lg-rule);
    border-radius: 12px;
    padding: 18px 16px;
    margin-bottom: 36px;
}
@media (min-width: 1100px) {
    .lg-toc {
        position: sticky;
        /* L'en-tete du site est « sticky top-0 » et empile deux rangees : la
           barre d'annonce (min-height 32px + 10px de padding) et la rangee
           principale (h-20, soit 80px sur grand ecran). Elle occupe donc environ
           122px en haut de la fenetre. La valeur de 96px passait dessous, et le
           haut du sommaire disparaissait derriere la navigation. */
        top: 134px;
        max-height: calc(100vh - 168px);
        overflow-y: auto;
        margin-bottom: 0;
    }
}
.lg-toc-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lg-ink-soft);
    margin: 0 0 12px;
    padding: 0 6px;
}
.lg-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: lgtoc; }
.lg-toc li { margin: 0; }
.lg-toc a {
    display: flex;
    gap: 10px;
    padding: 7px 6px;
    border-radius: 7px;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--lg-ink);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.lg-toc a::before {
    counter-increment: lgtoc;
    content: counter(lgtoc);
    flex: none;
    width: 1.5em;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--lg-ink-soft);
}
.lg-toc a:hover { background: var(--lg-surface-2); color: var(--lg-ink-strong); }
.lg-toc a:hover::before { color: var(--lg-accent); }
/* Article en cours de lecture, pose par le script en bas de page. */
.lg-toc a.is-current { background: var(--lg-surface-2); color: var(--lg-ink-strong); font-weight: 600; }
.lg-toc a.is-current::before { color: var(--lg-accent); }

/* --------------------------------------------------------------------------
   5. CORPS DU DOCUMENT
   -------------------------------------------------------------------------- */
.lg-doc { color: var(--lg-ink); font-size: 15.5px; line-height: 1.72; }
.lg-doc > * { max-width: var(--lg-measure); }
.lg-doc table, .lg-doc .lg-full { max-width: 100%; }

.lg-art {
    padding-top: 8px;
    margin-bottom: 44px;
    /* Meme raison que pour le sommaire : sans cette marge, cliquer une entree
       amenait le titre de l'article DERRIERE l'en-tete colle. La rangee
       principale passe de h-16 a h-20 a partir de 640px, d'ou les deux valeurs. */
    scroll-margin-top: 118px;
}
@media (min-width: 640px) {
    .lg-art { scroll-margin-top: 134px; }
}
.lg-art > h2 {
    font-size: 21px;
    line-height: 1.3;
    font-weight: 800;
    color: var(--lg-ink-strong);
    margin: 0 0 6px;
    letter-spacing: -.005em;
}
/* Le numero d'article vit dans un <span>, pas dans un ::before : il doit
   pouvoir etre copie avec le titre quand on cite le document. */
.lg-art > h2 .lg-num {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--lg-accent);
    margin-bottom: 7px;
}
.lg-art > h2 + .lg-sub { margin-top: 0; }
.lg-sub {
    font-size: 15px;
    color: var(--lg-ink-soft);
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lg-rule);
}
.lg-doc h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--lg-ink-strong);
    margin: 28px 0 8px;
}
.lg-doc p { margin: 0 0 15px; }
.lg-doc strong, .lg-doc b { color: var(--lg-ink-strong); font-weight: 650; }
.lg-doc a { color: var(--lg-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.lg-doc a:hover { text-decoration-thickness: 2px; }

.lg-doc ul, .lg-doc ol { margin: 0 0 16px; padding-left: 22px; }
.lg-doc li { margin-bottom: 7px; }
.lg-doc li::marker { color: var(--lg-ink-soft); }

/* Alineas numerotes (6.1, 6.2 ...) : la reference doit rester visible et
   citable, elle est donc dans le texte et non en decoration. */
.lg-clause { margin: 0 0 15px; }
.lg-clause > .lg-ref {
    font-weight: 700;
    color: var(--lg-ink-strong);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   6. TABLEAUX
   Ils portent l'essentiel du contenu RGPD (bases legales, durees,
   sous-traitants). Ils doivent rester lisibles et defiler seuls sur mobile.
   -------------------------------------------------------------------------- */
.lg-table-wrap {
    overflow-x: auto;
    margin: 0 0 20px;
    border: 1px solid var(--lg-rule);
    border-radius: 10px;
}
.lg-doc table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lg-doc thead th {
    text-align: left;
    padding: 11px 14px;
    background: var(--lg-surface-2);
    color: var(--lg-ink-strong);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--lg-rule);
}
.lg-doc tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--lg-rule);
    vertical-align: top;
    line-height: 1.55;
}
.lg-doc tbody tr:last-child td { border-bottom: none; }
.lg-doc tbody td:first-child { color: var(--lg-ink-strong); font-weight: 600; }

/* --------------------------------------------------------------------------
   7. ENCADRES
   Un seul motif, decline par couleur de filet. Pas de fond alarmant, pas de
   capitales : un avertissement se lit mieux qu'il ne se crie.
   -------------------------------------------------------------------------- */
.lg-note {
    border-left: 3px solid var(--lg-rule);
    background: var(--lg-surface);
    border-radius: 0 10px 10px 0;
    padding: 15px 18px;
    margin: 0 0 20px;
}
.lg-note > :last-child { margin-bottom: 0; }
.lg-note-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--lg-ink-strong);
    margin: 0 0 6px;
}
.lg-note.is-key    { border-left-color: var(--lg-accent); }
.lg-note.is-warn   { border-left-color: #d97706; }
html[data-theme="light"] .lg-note.is-warn { border-left-color: #b45309; }

/* Definitions (article 1 des CGV). */
.lg-defs { margin: 0 0 20px; }
.lg-defs dt { font-weight: 700; color: var(--lg-ink-strong); margin-top: 14px; }
.lg-defs dd { margin: 4px 0 0; padding-left: 0; }

/* Coordonnees (mediation, APD, hebergeur). */
.lg-card {
    background: var(--lg-surface);
    border: 1px solid var(--lg-rule);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.6;
}
.lg-card .lg-card-name { font-weight: 700; color: var(--lg-ink-strong); display: block; margin-bottom: 4px; }

/* Pied du document : signature, contact, renvois. */
.lg-foot {
    margin-top: 56px;
    padding-top: 22px;
    border-top: 1px solid var(--lg-rule);
    font-size: 13.5px;
    color: var(--lg-ink-soft);
    max-width: var(--lg-measure);
}
.lg-foot a { color: var(--lg-accent-ink); }
.lg-crosslinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lg-crosslinks a {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--lg-rule);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--lg-ink);
    transition: border-color .15s, color .15s;
}
.lg-crosslinks a:hover { border-color: var(--lg-accent); color: var(--lg-ink-strong); }

/* --------------------------------------------------------------------------
   8. PANNEAU DE REGLAGE DES COOKIES
   Utilise uniquement par la page /cookies. Ecrit ici plutot que dans un
   <style> de la page : sur la version NL, nl-router.php sort les blocs <style>
   du flux du dictionnaire, mais les garder groupes avec le reste du style des
   documents juridiques evite d'avoir deux endroits ou chercher.
   -------------------------------------------------------------------------- */
.lg-panel {
    background: var(--lg-surface);
    border: 1px solid var(--lg-rule);
    border-radius: 12px;
    padding: 20px;
    margin: 0 0 24px;
}
.lg-state {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--lg-ink-strong);
    margin: 0 0 4px;
}
.lg-state .dot {
    flex: none; width: 9px; height: 9px; border-radius: 50%;
    background: var(--lg-ink-soft);
}
.lg-state.is-on  .dot { background: #22c55e; }
.lg-state.is-off .dot { background: #ef4444; }
.lg-state.is-unset .dot { background: #d97706; }
.lg-state-note { font-size: 13.5px; color: var(--lg-ink-soft); margin: 0 0 16px; }

.lg-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lg-btn {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--lg-rule);
    background: transparent;
    color: var(--lg-ink);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.lg-btn:hover { border-color: var(--lg-accent); color: var(--lg-ink-strong); }
.lg-btn.is-primary {
    background: #4e7d1f;
    border-color: #4e7d1f;
    color: #ffffff;
}
.lg-btn.is-primary:hover { background: #3d6318; border-color: #3d6318; color: #ffffff; }
.lg-btn:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 2px; }

/* Message de confirmation apres un clic. Masque par [hidden]. */
.lg-feedback {
    margin: 14px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lg-accent-ink);
}

/* --------------------------------------------------------------------------
   9. IMPRESSION
   Un contrat se telecharge et s'imprime. Sans ces regles, la page sortait en
   blanc sur blanc et les liens perdaient leur destination.
   -------------------------------------------------------------------------- */
@media print {
    :root {
        --lg-ink: #000; --lg-ink-strong: #000; --lg-ink-soft: #333;
        --lg-rule: #bbb; --lg-surface: #fff; --lg-surface-2: #f2f2f2;
        --lg-accent: #000; --lg-accent-ink: #000;
    }
    header, footer, nav, .lg-toc, .lg-crosslinks, .lg-actions,
    .cookie-banner, #cookieBanner { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .lg-wrap { max-width: none; padding: 0; }
    .lg-grid { display: block; }
    .lg-doc { font-size: 10.5pt; line-height: 1.5; }
    .lg-doc > * { max-width: none; }
    .lg-art { page-break-inside: avoid; margin-bottom: 22pt; }
    .lg-art > h2 { page-break-after: avoid; }
    .lg-doc table { page-break-inside: avoid; }
    /* La destination d'un lien doit survivre a l'impression. */
    .lg-doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #444; }
    .lg-version { border: 1px solid #bbb; }
}