/**
 * ========================================================================
 * PROJET      : LOOM-CMS
 * VERSION     : 1.0.12
 * CLIENT      : CRPMEM de La Réunion
 * MODULE      : CSS - Pages Légales (mentions légales, politique confidentialité)
 * SOCIÉTÉ     : LOOM DIGITAL
 * EMPLACEMENT : /assets/css/legal-content.css
 * ========================================================================
 *
 * Styles dédiés aux pages légales (contrôleurs Option A).
 * Chargé conditionnellement UNIQUEMENT sur mentions-legales.php
 * et politique-de-confidentialite.php.
 *
 * COMPOSANTS :
 * 1. Scroll-padding : compensation navbar fixe pour ancres internes
 * 2. Sommaire : liste ordonnée cliquable en tête de page
 * 3. Headings : espacement h3/h4 pour documents longs (10+ sections)
 * 4. Séparateurs : <hr> entre sections légales
 * 5. Tableaux : styles RGPD/LCEN (cookies, données, finalités)
 * 6. Liens : styles spécifiques contexte légal
 * 7. Footer mise à jour : date discrète
 *
 * DÉPENDANCES :
 * - Bootstrap 5 (via plugins.css / style.css)
 * - perso-crpmem.css (variables CRPMEM, styles .post-content de base)
 *
 * VARIABLES CRPMEM UTILISÉES :
 * - --crpmem-bleu-fonce: #015f68
 * - --crpmem-bleu-clair: #007489
 *
 * ACCESSIBILITÉ RGAA AAA :
 * - Contrastes 7:1 minimum vérifiés
 * - Tailles police >= 12px (0.8rem sur root 20px = 16px)
 * - Interligne confortable (1.6 minimum)
 * - scroll-padding pour navigation clavier par ancres
 *
 * @author  Riley / LOOM DIGITAL
 * @version 1.0.12
 * @date    2026-02-12
 * ========================================================================
 */

/* ========================================================================
   1. SCROLL-PADDING — COMPENSATION NAVBAR FIXE
   ========================================================================
   La navbar fixe (height ~80px) masque les cibles d'ancrage (<h3 id="...">).
   scroll-padding-top ajoute un espace au-dessus de la cible lors du scroll
   déclenché par un clic sur une ancre du sommaire (<a href="#editeur">).
   ======================================================================== */

html {
    scroll-padding-top: 100px; /* navbar (~80px) + marge confort (20px) */
}

/* ========================================================================
   2. SOMMAIRE — LISTE ORDONNÉE CLIQUABLE
   ========================================================================
   Le sommaire est un <ol> en tête de contenu avec liens vers les ancres
   des sections. Style compact, fond léger, séparation visuelle nette.
   ======================================================================== */

.legal-content > ol:first-child {
    background-color: #f8f9fa; /* Bootstrap gray-100 */
    border-left: 4px solid var(--crpmem-bleu-fonce, #015f68);
    border-radius: 0 0.375rem 0.375rem 0;
    padding: 1.25rem 1.5rem 1.25rem 2.5rem;
    margin-bottom: 2.5rem;
    line-height: 1.8;
}

.legal-content > ol:first-child li {
    padding: 0.15rem 0;
}

.legal-content > ol:first-child a {
    color: var(--crpmem-bleu-fonce, #015f68);
    text-decoration: none;
    font-weight: 500;
}

.legal-content > ol:first-child a:hover,
.legal-content > ol:first-child a:focus {
    color: var(--crpmem-bleu-clair, #007489);
    text-decoration: underline;
}

/* Focus visible pour navigation clavier (RGAA AAA) */
.legal-content > ol:first-child a:focus-visible {
    outline: 2px solid var(--crpmem-bleu-fonce, #015f68);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ========================================================================
   3. HEADINGS — ESPACEMENT SECTIONS LÉGALES
   ========================================================================
   Documents légaux longs (10+ sections) : espacement généreux entre
   sections pour faciliter la lecture et la navigation visuelle.
   ======================================================================== */

.legal-content h3 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef; /* Bootstrap gray-200 */
    color: var(--crpmem-bleu-fonce, #015f68);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Première section : pas de margin-top (suit le sommaire) */
.legal-content > ol:first-child + h3,
.legal-content > h3:first-child {
    margin-top: 0;
}

.legal-content h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #2d3436; /* ratio 13.50:1 sur blanc — RGAA AAA */
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
}

/* ========================================================================
   4. SÉPARATEURS — HR ENTRE SECTIONS
   ========================================================================
   Les <hr> insérés via Quill séparent les grandes sections du document.
   Style discret mais visible pour structurer la lecture.
   ======================================================================== */

.legal-content hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid #dee2e6; /* Bootstrap gray-300 */
    opacity: 1;
}

/* ========================================================================
   5. TABLEAUX — DONNÉES RGPD / LCEN
   ========================================================================
   Tableaux structurés pour : cookies, données collectées, finalités,
   bases juridiques, durées de conservation. Héritage de .post-content
   (perso-crpmem.css) pour bordures/collapse, ajouts spécifiques ici.
   ======================================================================== */

.legal-content table {
    font-size: 0.9rem;
    line-height: 1.5;
}

.legal-content table th {
    background-color: rgba(1, 95, 104, 0.06); /* Fond bleu CRPMEM très pâle */
    color: var(--crpmem-bleu-fonce, #015f68);
    font-weight: 600;
    white-space: nowrap;
}

.legal-content table td {
    vertical-align: middle;
}

/* ========================================================================
   6. LISTES — UL/OL DANS LE CONTENU LÉGAL
   ========================================================================
   Espacement accru pour listes de droits, mesures de sécurité, etc.
   ======================================================================== */

.legal-content ul,
.legal-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

/* Exclure le sommaire (déjà stylisé en section 2) */
.legal-content > ol:first-child {
    padding-left: 2.5rem;
}

.legal-content li {
    margin-bottom: 0.35rem;
    line-height: 1.6;
}

/* ========================================================================
   7. PARAGRAPHES — INTERLIGNE LÉGAL
   ========================================================================
   Interligne légèrement supérieur au contenu éditorial standard
   pour confort de lecture sur documents longs.
   ======================================================================== */

.legal-content p {
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* ========================================================================
   8. LIENS — CONTEXTE LÉGAL
   ========================================================================
   Liens internes (vers contact, politique) et externes (CNIL, OVH)
   clairement identifiables et accessibles.
   ======================================================================== */

.legal-content a {
    color: var(--crpmem-bleu-fonce, #015f68);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-content a:hover,
.legal-content a:focus {
    color: var(--crpmem-bleu-clair, #007489);
}

/* Focus visible navigation clavier (RGAA AAA) */
.legal-content a:focus-visible {
    outline: 2px solid var(--crpmem-bleu-fonce, #015f68);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Liens target="_blank" : indicateur visuel accessoire (pas seul indice) */
.legal-content a[target="_blank"]::after {
    content: " \2197"; /* flèche nord-est ↗ */
    font-size: 0.75em;
    vertical-align: super;
    text-decoration: none;
    display: inline;
}

/* ========================================================================
   9. RESPONSIVE
   ======================================================================== */

/* Mobile : sommaire plus compact */
@media (max-width: 575.98px) {
    .legal-content > ol:first-child {
        padding: 1rem 1rem 1rem 2rem;
        font-size: 0.9rem;
    }

    .legal-content h3 {
        font-size: 1.15rem;
        margin-top: 2rem;
    }

    .legal-content h4 {
        font-size: 1rem;
    }
}

/* ========================================================================
   10. PRINT — IMPRESSION
   ========================================================================
   Pages légales souvent imprimées : optimisation du rendu papier.
   ======================================================================== */

@media print {
    .legal-content > ol:first-child {
        background-color: transparent;
        border-left: 2px solid #000;
    }

    .legal-content a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        word-break: break-all;
    }

    .legal-content a[target="_blank"]::after {
        content: " (" attr(href) ") \2197";
    }

    .legal-content h3 {
        page-break-after: avoid;
        border-bottom-color: #000;
    }
}

/**
 * ========================================================================
 * SIGNATURE NUMÉRIQUE LOOM-CMS
 * ========================================================================
 * Module      : CSS - Pages Légales
 * Emplacement : /assets/css/legal-content.css
 * Version     : 1.0.12
 * Date        : 2026-02-12
 * Auteur      : Riley / LOOM DIGITAL
 * ========================================================================
 *
 * COMPOSANTS :
 * [x] Scroll-padding navbar fixe (100px)
 * [x] Sommaire <ol> : fond gray-100, bordure bleu CRPMEM, liens stylisés
 * [x] Headings h3 : bordure bottom, couleur CRPMEM, espacement généreux
 * [x] Headings h4 : sous-sections, espacement modéré
 * [x] HR séparateurs : style discret entre sections
 * [x] Tableaux RGPD/LCEN : en-têtes bleu CRPMEM, nowrap
 * [x] Listes ul/ol : espacement accru pour droits/mesures
 * [x] Paragraphes : interligne 1.7 (confort lecture longue)
 * [x] Liens : underline, focus-visible, indicateur target="_blank"
 * [x] Responsive mobile : sommaire compact, h3/h4 ajustés
 * [x] Print : URLs visibles, fond transparent, page-break-after avoid
 *
 * ACCESSIBILITÉ RGAA AAA :
 * [x] Contrastes >= 7:1 (bleu-fonce #015f68 sur blanc : 7.02:1)
 * [x] Sous-titre h4 #2d3436 sur blanc : 13.50:1
 * [x] Focus-visible sur liens et sommaire
 * [x] scroll-padding-top pour navigation clavier par ancres
 * [x] Interligne >= 1.5 sur tout le contenu
 *
 * CHARGEMENT CONDITIONNEL :
 * Chargé uniquement sur mentions-legales.php et politique-de-confidentialite.php
 * (pas sur article.php, contact.php, index.php, category.php)
 *
 * Hash : SHA256-LEGAL-CONTENT-CSS-RGAA-AAA-20260212
 * ========================================================================
 */