/* =============================================================================
   Nuyo — legal.css
   Pages légales : style document classique.
   Serif système, noir sur blanc, beaucoup d'air, hiérarchie sobre.
   Complète site.css.
   ============================================================================= */

/* ─── Override : on retire toutes les fioritures de site.css ─── */
html, body {
    background: #ffffff;
    color: #1a1a1a;
    font-family: Georgia, 'Times New Roman', Times, serif;
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
}

/* On retire la texture papier sur les pages légales (lecture pure) */
body::before {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   En-tête du document :
   - Bouton retour à GAUCHE
   - Titre centré
   - Méta centrée sous le titre

   On utilise une grille 3 colonnes [retour | titre | spacer] : le titre
   occupe la colonne centrale et est donc vraiment centré dans le viewport,
   pas centré entre le retour et le bord droit. Le spacer à droite a la même
   largeur que le retour à gauche pour conserver la symétrie.
   ═══════════════════════════════════════════════════════════════════════════ */

.legal-header {
    padding: 32px 0 32px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
}

/* Switcher FR | EN — positionné en haut à droite, au-dessus de la ligne
   [retour | titre | spacer] pour ne pas perturber le centrage du titre.
   Sur la version "document légal" on garde une teinte sobre. */
.legal-header > .lang-switch {
    position: absolute;
    top: 18px;
    right: max(24px, calc((100% - 800px) / 2 + 24px));
    margin-left: 0;
    z-index: 2;
}
.legal-header > .lang-switch a {
    color: #888;
}
.legal-header > .lang-switch a:hover {
    color: #1a1a1a;
}
html[lang="fr"] .legal-header > .lang-switch .lang-fr,
html:not([lang="fr"]) .legal-header > .lang-switch .lang-en {
    color: #1a1a1a;
}
@media (max-width: 767px) {
    .legal-header > .lang-switch {
        top: 14px;
        right: 20px;
    }
}

.legal-header-row {
    /* Grille 3 colonnes :
       - Col 1 : retour, taille auto (largeur de son contenu)
       - Col 2 : titre, prend tout l'espace restant (1fr) et peut se réduire (min-width: 0)
       - Col 3 : spacer, même largeur que col 1 pour que le titre soit
                 visuellement centré dans le viewport
       Le titre étant dans une colonne 1fr avec min-width: 0, il ne peut
       PAS pousser hors de sa colonne — il se contente de l'espace dispo. */
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
}

.legal-header-spacer {
    /* Spacer invisible à droite, équilibre la largeur du retour à gauche
       pour que le titre soit centré dans le viewport, pas centré entre
       le retour et le bord droit. */
    visibility: hidden;
    font-size: 0.95rem;
    white-space: nowrap;
}

.legal-back {
    /* Colonne 1 : retour */
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 0.95rem;
    color: #555;
    text-decoration: none;
    white-space: nowrap;
}

.legal-back:hover {
    color: #000;
    text-decoration: underline;
}

h1.legal-title {
    /* Colonne 2 : titre. min-width: 0 est CRUCIAL : sans ça, un grid item
       ne peut pas se réduire en dessous de la taille de son contenu et
       pousserait les autres colonnes hors de la grille. */
    min-width: 0;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.2;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: 0;
    text-align: center;
}

.legal-meta {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    font-style: italic;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Conteneur principal
   ═══════════════════════════════════════════════════════════════════════════ */

.legal-wrap {
    flex: 1;
    padding-bottom: 80px;
}

.legal-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Préambule
   ═══════════════════════════════════════════════════════════════════════════ */

.legal-intro {
    margin: 32px 0 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #1a1a1a;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sommaire
   ═══════════════════════════════════════════════════════════════════════════ */

.toc {
    margin: 48px 0;
    padding: 24px 28px;
    background: #f7f7f5;
    border: 1px solid #e0e0e0;
}

.toc-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 14px;
}

.toc-list {
    margin: 0;
    padding-left: 24px;
    color: #1a1a1a;
}

.toc-list li {
    padding: 3px 0;
    font-size: 0.98rem;
    line-height: 1.6;
}

.toc-list a {
    color: #1a1a1a;
    text-decoration: none;
}

.toc-list a:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Articles
   ═══════════════════════════════════════════════════════════════════════════ */

.article-section {
    margin: 48px 0 0;
    scroll-margin-top: 24px;
}

.article-title {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.3;
    color: #1a1a1a;
    margin: 0 0 16px;
    letter-spacing: 0;
}

/* Sous-titres */
.article-section h3 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #1a1a1a;
    margin: 24px 0 8px;
}

/* Paragraphes */
.article-section p {
    font-size: 1rem;
    line-height: 1.7;
    color: #1a1a1a;
    margin: 0 0 14px;
    text-align: justify;
    hyphens: auto;
}

.article-section p strong {
    font-weight: 700;
    color: #1a1a1a;
}

.article-section a {
    color: #1a1a1a;
    text-decoration: underline;
}

.article-section a:hover {
    color: #555;
}

/* Listes */
.article-section ul,
.article-section ol {
    margin: 0 0 16px;
    padding-left: 28px;
    color: #1a1a1a;
}

.article-section ul li,
.article-section ol li {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 4px;
}

/* Liste de définition (identité, finalités) */
.def-list {
    margin: 16px 0 20px;
    padding: 0;
    font-size: 1rem;
    line-height: 1.6;
}

.def-list dt {
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 10px;
}

.def-list dt:first-child {
    margin-top: 0;
}

.def-list dd {
    margin: 2px 0 0;
    padding-left: 0;
    color: #1a1a1a;
}

/* Sous-traitants : encadré simple */
.subprocessor {
    margin: 14px 0 18px;
    padding-left: 16px;
    border-left: 3px solid #d0d0d0;
}

.subprocessor-name {
    font-weight: 700;
    margin: 0 0 4px;
    font-size: 1rem;
}

.subprocessor-name .country {
    font-weight: 400;
    color: #666;
    font-style: italic;
}

.subprocessor p {
    margin: 4px 0;
    font-size: 0.97rem;
    text-align: left;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Footer minimal (override de site.css)
   © à gauche, liens à droite. On gère le layout en flex maison (pas de
   dépendance Bootstrap dans les pages légales).
   ═══════════════════════════════════════════════════════════════════════════ */

footer {
    font-family: Georgia, 'Times New Roman', Times, serif !important;
    font-size: 0.85rem !important;
    color: #666 !important;
    border-top: 1px solid #e0e0e0 !important;
    padding: 24px 0 !important;
    letter-spacing: 0 !important;
}

.legal-footer-row {
    /* Container interne au footer.
       © à gauche, liens à droite, alignés sur la baseline. */
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}

.legal-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

footer a {
    color: #666 !important;
    margin: 0 !important;
}

footer a:hover {
    color: #1a1a1a !important;
}

@media (max-width: 575px) {
    .legal-footer-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .legal-header-row {
        /* Sur mobile : on quitte la grille pour empiler verticalement
           (retour, puis titre). Plus lisible sur petit écran. */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

    .legal-back {
        align-self: flex-start;
    }

    /* Le spacer ne sert plus à rien quand on empile verticalement */
    .legal-header-spacer {
        display: none;
    }

    h1.legal-title {
        font-size: 1.7rem;
    }

    .article-title {
        font-size: 1.2rem;
    }

    .legal-header {
        padding: 24px 0;
    }

    .article-section {
        margin-top: 36px;
    }

    .article-section p {
        text-align: left;
    }

    .toc {
        padding: 20px 22px;
    }
}