/*
 * Pages légales (/legal/) — ce qui leur est propre : mise en page « document »
 * (texte long, sommaire, tableaux de synthèse). Jetons : /assets/tokens.css ;
 * composants : /assets/composants.css (boutons, cartes, alertes, tableaux,
 * .liens-legaux). Uniquement des jetons sémantiques : le mode sombre de
 * tokens.css s'applique tel quel. Exception : le dégradé du logo (identité).
 */

.legal-conteneur {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 var(--espace-4);
}

/* ---------------------------------------------------------------- En-tête */

/* Non collant : rien ne recouvre le texte ni les liens (WCAG 2.4.11). */
.entete-legal {
    border-bottom: 1px solid var(--couleur-bordure);
    background: var(--couleur-surface);
}

.entete-legal-contenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-3);
    min-height: 4rem;
}

.marque {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-3);
    min-height: var(--cible);
    color: var(--couleur-texte);
    font-family: var(--police-titre);
    font-weight: var(--graisse-titre);
    text-decoration: none;
}

.marque:hover {
    color: var(--couleur-texte);
}

.marque-logo {
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--rayon);
    background: linear-gradient(135deg, var(--sarcelle-600), var(--sarcelle-800));
    color: #ffffff;
    box-shadow: var(--ombre-sm);
}

/* ---------------------------------------------------------------- Mise en page */

.legal-principal {
    padding-top: var(--espace-6);
    padding-bottom: var(--espace-12);
}

main:focus {
    outline: none;
}

.ariane ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-2);
    margin: 0 0 var(--espace-6);
    padding: 0;
    color: var(--couleur-texte-secondaire);
    font-size: var(--texte-sm);
    list-style: none;
}

.ariane li + li::before {
    content: "/";
    margin-right: var(--espace-2);
    color: var(--couleur-texte-discret);
}

.ariane a {
    color: var(--couleur-texte-secondaire);
}

/* Document : colonne de lecture (~70 caractères) + sommaire. */
.document {
    max-width: 44rem;
}

.document h1 {
    font-size: var(--texte-3xl);
}

.chapo {
    color: var(--couleur-texte-secondaire);
    font-size: var(--texte-lg);
}

.mise-a-jour {
    color: var(--couleur-texte-discret);
    font-size: var(--texte-sm);
}

.document section {
    scroll-margin-top: var(--espace-6);
}

.document h2 {
    margin-top: var(--espace-10);
    padding-top: var(--espace-6);
    border-top: 1px solid var(--couleur-bordure);
}

.document h3 {
    margin-top: var(--espace-6);
}

.document ul,
.document ol {
    margin: 0 0 var(--espace-4);
    padding-left: var(--espace-6);
}

.document li + li {
    margin-top: var(--espace-2);
}

.document dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espace-1) var(--espace-5);
    margin: 0 0 var(--espace-4);
    padding: var(--espace-5);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-lg);
    background: var(--couleur-surface);
}

.document dt {
    color: var(--couleur-texte-secondaire);
    font-size: var(--texte-sm);
    font-weight: var(--graisse-forte);
}

.document dd {
    margin: 0 0 var(--espace-3);
}

/* Valeur réelle encore inconnue : repérable à l'œil ET par le texte
   « [À compléter : …] » (jamais la couleur seule). */
.a-completer {
    padding: 0 var(--espace-1);
    border: 1px dashed var(--alerte-bordure);
    border-radius: var(--rayon-sm);
    background: var(--alerte-fond);
    color: var(--alerte-texte);
    font-weight: var(--graisse-moyenne);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Tableaux de synthèse : composant .tableau, enveloppe défilante. */
.document .surface-tableau {
    margin: 0 0 var(--espace-5);
}

.document .tableau td,
.document .tableau th {
    vertical-align: top;
    font-size: var(--texte-sm);
}

/* Sommaire : en tête sur téléphone, colonne collante sur grand écran. */
.sommaire {
    margin: var(--espace-6) 0;
    padding: var(--espace-4) var(--espace-5);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-lg);
    background: var(--couleur-surface);
}

.sommaire-titre {
    margin: 0 0 var(--espace-2);
    color: var(--couleur-texte-secondaire);
    font-size: var(--texte-xs);
    font-weight: var(--graisse-forte);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sommaire ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sommaire;
}

.sommaire li {
    counter-increment: sommaire;
}

.sommaire a {
    display: flex;
    gap: var(--espace-2);
    min-height: 2.25rem;
    align-items: center;
    color: var(--couleur-texte-secondaire);
    font-size: var(--texte-sm);
    text-decoration: none;
}

.sommaire a::before {
    content: counter(sommaire) ".";
    min-width: 1.25rem;
    color: var(--couleur-texte-discret);
    font-variant-numeric: tabular-nums;
}

.sommaire a:hover {
    color: var(--couleur-accent-texte);
    text-decoration: underline;
}

/* Index des pages légales : une carte par page. */
.cartes-legales {
    display: grid;
    gap: var(--espace-4);
    margin: var(--espace-8) 0 0;
    padding: 0;
    list-style: none;
}

.carte-legale {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--espace-1) var(--espace-4);
    transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}

.carte-legale:hover {
    border-color: var(--couleur-bordure-forte);
    box-shadow: var(--ombre-md);
}

.carte-legale .pastille-icone {
    display: grid;
    grid-row: 1 / span 2;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--rayon);
    background: var(--couleur-accent-doux);
    color: var(--couleur-accent);
}

.carte-legale h2 {
    margin: 0;
    font-size: var(--texte-lg);
}

/* Toute la carte est cliquable (lien étendu), le lien reste le seul focus. */
.carte-legale h2 a {
    color: var(--couleur-texte);
    text-decoration: none;
}

.carte-legale h2 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--rayon-lg);
}

.carte-legale h2 a:focus-visible {
    outline: none;
}

.carte-legale:has(a:focus-visible) {
    outline: 3px solid var(--couleur-focus);
    outline-offset: 2px;
}

.carte-legale p {
    margin: 0;
    color: var(--couleur-texte-secondaire);
    font-size: var(--texte-sm);
}

/* ---------------------------------------------------------------- Pied de page */

.pied-legal {
    border-top: 1px solid var(--couleur-bordure);
    background: var(--couleur-surface);
}

.pied-legal-contenu {
    display: grid;
    gap: var(--espace-4);
    padding-top: var(--espace-6);
    padding-bottom: var(--espace-8);
}

.pied-legal .liens-legaux a[aria-current="page"] {
    color: var(--couleur-accent-texte);
    font-weight: var(--graisse-forte);
}

.pied-retours {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-3);
}

.pied-texte {
    margin: 0;
    color: var(--couleur-texte-discret);
    font-size: var(--texte-sm);
}

/* ---------------------------------------------------------------- Grand écran */

@media (min-width: 40rem) {
    .document dl {
        grid-template-columns: 13rem minmax(0, 1fr);
    }

    .document dd {
        margin: 0;
    }

    .document dt,
    .document dd {
        padding: var(--espace-2) 0;
    }

    .cartes-legales {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .avec-sommaire {
        display: grid;
        grid-template-columns: minmax(0, 44rem) 15rem;
        justify-content: space-between;
        gap: var(--espace-12);
    }

    .avec-sommaire .sommaire {
        position: sticky;
        top: var(--espace-6);
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        margin: 0;
    }

    .avec-sommaire .document {
        grid-column: 1;
        grid-row: 1;
    }
}

@media print {
    .entete-legal,
    .pied-legal,
    .sommaire,
    .ariane {
        display: none;
    }
}