/* ==========================================================================
   SEI — Feuille de style des pages légales (Politique, Termes)
   Design tokens alignés sur la charte de la page d'accueil (#0053ce).
   Remplace le CSS dupliqué qui était inline dans chaque page.
   ========================================================================== */

:root {
    /* — Couleurs de marque — */
    --sei-primary: #0053ce;
    --sei-primary-dark: #003d96;
    --sei-primary-light: #e8f0fc;

    /* — Couleurs sémantiques (contraste AA sur fond clair) — */
    --sei-success: #1a7f37;
    --sei-success-bg: #e6f4ea;
    --sei-warning: #9a6700;
    --sei-warning-bg: #fff8e1;
    --sei-danger: #b42318;
    --sei-danger-bg: #fdecea;
    --sei-info: #0b6a83;
    --sei-info-bg: #e3f4f8;

    /* — Neutres — */
    --sei-text: #1f2328;
    --sei-text-muted: #57606a;
    --sei-surface: #ffffff;
    --sei-surface-2: #f6f8fa;
    --sei-border: rgba(0, 83, 206, 0.12);

    /* — Élévation & rayons — */
    --sei-radius: 12px;
    --sei-radius-sm: 6px;
    --sei-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --sei-shadow-lg: 0 8px 24px rgba(0, 83, 206, 0.15);

    /* — Rythme — */
    --sei-space-1: 0.5rem;
    --sei-space-2: 1rem;
    --sei-space-3: 1.5rem;
    --sei-space-4: 2.5rem;

    /* Décalage d'ancrage : évite qu'un titre passe sous l'en-tête fixe */
    --sei-anchor-offset: 90px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

/* Lien d'évitement clavier */
.sei-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--sei-primary);
    color: #fff;
    border-radius: 0 0 var(--sei-radius-sm) 0;
    text-decoration: none;
    font-weight: 600;
}

    .sei-skip-link:focus {
        left: 0;
        color: #fff;
    }

/* Anneau de focus visible et cohérent partout */
a:focus-visible,
button:focus-visible,
.toc-link:focus-visible,
.sei-anchor:focus-visible {
    outline: 3px solid var(--sei-primary);
    outline-offset: 2px;
    border-radius: var(--sei-radius-sm);
}

/* --------------------------------------------------------------------------
   Héros
   Dégradé de marque : le contraste du texte blanc reste >= 7:1 sur toute
   la course du dégradé (l'ancien dégradé s'éclaircissait jusqu'à 1.5:1).
   -------------------------------------------------------------------------- */

.hero-section {
    background: linear-gradient(135deg, var(--sei-primary-dark) 0%, var(--sei-primary) 100%);
    color: #ffffff;
    padding: 60px 0;
    margin-bottom: 40px;
}

    /* Tout le texte du héros hérite du blanc — empêche la réapparition
       d'une classe utilitaire sombre (ex. .text-dark) illisible sur le dégradé. */
    .hero-section h1,
    .hero-section p,
    .hero-section .lead,
    .hero-section .badge-version {
        color: #ffffff;
    }

.badge-version {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.45);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.badge-meta {
    display: inline-block;
    background-color: #ffffff;
    color: var(--sei-primary-dark);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Cartes de section
   -------------------------------------------------------------------------- */

.section-card {
    margin-bottom: 25px;
    border-left: 4px solid var(--sei-primary);
    border-radius: var(--sei-radius);
    box-shadow: var(--sei-shadow);
    /* Décalage pour les liens d'ancrage de la table des matières */
    scroll-margin-top: var(--sei-anchor-offset);
    /* Pas de translateY : ces cartes ne sont pas cliquables, un effet
       « soulevé » suggérerait à tort une interactivité. */
    transition: box-shadow 0.2s ease;
}

    .section-card:hover {
        box-shadow: var(--sei-shadow-lg);
    }

.section-title {
    color: var(--sei-primary-dark);
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-icon {
    font-size: 1.5rem;
    color: var(--sei-primary);
    flex-shrink: 0;
}

/* Ancre « # » révélée au survol/focus du titre : permet de copier le lien
   direct vers une clause précise (utile en support client). */
.sei-anchor {
    opacity: 0;
    margin-left: 0.35rem;
    font-size: 0.8em;
    color: var(--sei-primary);
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.section-title:hover .sei-anchor,
.sei-anchor:focus {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Encarts d'information
   -------------------------------------------------------------------------- */

.warning-box,
.info-box,
.success-box,
.danger-box {
    padding: 15px;
    margin: 15px 0;
    border-radius: var(--sei-radius-sm);
    border-left: 4px solid;
}

.warning-box {
    background-color: var(--sei-warning-bg);
    border-left-color: var(--sei-warning);
    color: #4a3200;
}

.info-box {
    background-color: var(--sei-info-bg);
    border-left-color: var(--sei-info);
    color: #063845;
}

.success-box {
    background-color: var(--sei-success-bg);
    border-left-color: var(--sei-success);
    color: #0c3d1c;
}

.danger-box {
    background-color: var(--sei-danger-bg);
    border-left-color: var(--sei-danger);
    color: #5c120c;
}

/* Carte de mise en avant : reprend le dégradé de marque du héros.
   Le texte blanc y garde un contraste >= 7:1. */
.highlight-card {
    background: linear-gradient(135deg, var(--sei-primary-dark) 0%, var(--sei-primary) 100%);
    color: #ffffff;
    border: none;
}

    .highlight-card h1,
    .highlight-card h2,
    .highlight-card h3,
    .highlight-card p,
    .highlight-card .lead {
        color: #ffffff;
    }

.company-info {
    background: var(--sei-surface-2);
    padding: 25px;
    border-radius: var(--sei-radius);
    margin: 20px 0;
    border-left: 5px solid var(--sei-primary);
}

/* --------------------------------------------------------------------------
   Table des matières
   -------------------------------------------------------------------------- */

.toc {
    position: sticky;
    top: 20px;
    /* Sans ces deux règles, une TOC de 14 entrées plus haute que l'écran
       rend ses derniers liens inatteignables. */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.toc-link {
    color: var(--sei-text-muted);
    text-decoration: none;
    padding: 8px 15px;
    display: block;
    border-radius: var(--sei-radius-sm);
    /* Bordure transparente réservée dès le départ : évite le reflow
       que provoquait l'ancien changement de padding au survol. */
    border-left: 3px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

    .toc-link:hover {
        background-color: var(--sei-primary-light);
        color: var(--sei-primary-dark);
        border-left-color: var(--sei-primary);
    }

    /* État actif piloté par le scrollspy Bootstrap */
    .toc-link.active {
        background-color: var(--sei-primary-light);
        color: var(--sei-primary-dark);
        font-weight: 600;
        border-left-color: var(--sei-primary);
    }

/* Bouton flottant ouvrant la TOC sur mobile.
   Auparavant la TOC était simplement masquée (d-none d-lg-block) : sous 992 px
   l'utilisateur n'avait plus aucun moyen de naviguer dans le document. */
.toc-fab {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    width: 56px; /* >= 44 px : cible tactile WCAG 2.5.5 */
    height: 56px;
    z-index: 1030;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sei-shadow-lg);
}

/* --------------------------------------------------------------------------
   Contenu long : lisibilité
   -------------------------------------------------------------------------- */

.legal-body {
    color: var(--sei-text);
    line-height: 1.7;
}

    /* Limite la longueur de ligne : au-delà de ~70-75 caractères, la lecture
       d'un texte juridique devient nettement plus fatigante. */
    .legal-body p,
    .legal-body li {
        max-width: 68ch;
    }

ul.custom-list {
    padding-left: 1.25rem;
}

    ul.custom-list li {
        margin-bottom: 10px;
        padding-left: 10px;
    }

/* Barre de progression de lecture */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--sei-primary);
    z-index: 1040;
    transition: width 0.1s linear;
}

/* --------------------------------------------------------------------------
   Accessibilité : mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Mode sombre
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root {
        --sei-text: #e6edf3;
        --sei-text-muted: #9198a1;
        --sei-surface: #0d1117;
        --sei-surface-2: #161b22;
        --sei-border: rgba(88, 166, 255, 0.2);
        --sei-primary-light: #10233f;
        --sei-warning-bg: #2b2100;
        --sei-info-bg: #06232b;
        --sei-success-bg: #0a2413;
        --sei-danger-bg: #2d0f0c;
    }

    .warning-box {
        color: #f2d98c;
    }

    .info-box {
        color: #9fdbe9;
    }

    .success-box {
        color: #9fe0b0;
    }

    .danger-box {
        color: #f5b2ab;
    }
}

/* --------------------------------------------------------------------------
   Impression
   Ces documents sont fréquemment imprimés ou archivés en PDF.
   -------------------------------------------------------------------------- */

@media print {
    .hero-section {
        background: none !important;
        color: #000 !important;
        padding: 0 0 var(--sei-space-2) 0;
        margin-bottom: var(--sei-space-2);
        border-bottom: 2px solid #000;
    }

        .hero-section h1,
        .hero-section p,
        .hero-section .badge-version,
        .hero-section .badge-meta {
            color: #000 !important;
            background: none !important;
            border: none !important;
        }

    /* Navigation et encarts de contact : sans objet sur papier */
    .toc,
    .toc-fab,
    .offcanvas,
    .reading-progress,
    .sei-skip-link,
    .sei-anchor,
    .sei-print-hide {
        display: none !important;
    }

    .section-card {
        break-inside: avoid;
        page-break-inside: avoid;
        border: none;
        border-left: 3px solid #000;
        box-shadow: none !important;
        transform: none !important;
    }

    .section-title {
        color: #000 !important;
    }

    .legal-body p,
    .legal-body li {
        max-width: none;
    }

    /* Expose les URL des liens externes, invisibles autrement sur papier */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        word-break: break-all;
    }

    body {
        font-size: 11pt;
        color: #000;
        background: #fff;
    }
}