/* ============================================================================
   Captain Auto - Pages légales (public/legal.php) et rapport public
   (public/rapport.php) : mode Read de DESIGN.md (« L'instrument de verre »).
   Lecture longue, colonne de 68 caractères, hiérarchie nette, tableaux à filets.
   L'en-tête est l'îlot commun (includes/vues/entete.php, styles dans
   base.css). Ce fichier passe EN DERNIER (après bordereau.css et responsive.css).
   ========================================================================== */

.legal-page {
    width: min(44rem, 100% - 3rem);
    max-width: none;
    margin: 0 auto;
    padding: 40px 0 72px;
}

/* Sous-navigation des documents : bascule en pilules de verre ; la page courante est
   une pilule claire (et porte aria-current). */
.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    margin: 0 0 32px;
    padding: 4px;
    border-radius: var(--radius-pill);
    background: var(--verre);
    border: 1px solid var(--border);
}
.legal-page .legal-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    color: var(--text-2);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--t), background-color var(--t);
}
.legal-page .legal-nav a.on {
    background: var(--text-1);
    color: var(--bg-0);
    font-weight: 560;
}

/* Titre d'écran */
.legal-page h1 {
    margin: 0 0 10px;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 640;
    line-height: 1.05;
    letter-spacing: -0.04em;
    text-wrap: balance;
}
.legal-page .legal-date {
    margin: 0 0 40px;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--text-3);
}

.legal-page h2 {
    margin: 48px 0 14px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    font-size: 1.375rem;
    font-weight: 620;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--text-1);
    scroll-margin-top: calc(var(--haut-collant) + 8px);
}
.legal-page h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-page h3 {
    margin: 28px 0 8px;
    font-size: 1.0625rem;
    font-weight: 620;
    letter-spacing: -0.01em;
    color: var(--text-1);
}

.legal-page p,
.legal-page li {
    color: var(--text-2);
    font-size: 1.0625rem;
    line-height: 1.7;
}
.legal-page p { margin: 0 0 16px; text-wrap: pretty; }
.legal-page ul,
.legal-page ol { margin: 0 0 18px; padding-left: 24px; }
.legal-page li { margin-bottom: 8px; }
.legal-page li::marker { color: var(--text-3); }
.legal-page strong { color: var(--text-1); font-weight: 600; }
/* Lien dans un texte : bleu clair et souligné. */
.legal-page a {
    color: var(--accent-strong);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(124, 192, 240, .5);
}
.legal-page code {
    font-family: var(--font-mono);
    font-size: .85em;
    padding: 1px 7px;
    border-radius: 8px;
    background: var(--verre);
    border: 1px solid var(--border);
    color: var(--text-1);
}

/* Tableaux éventuels : à filets, en-tête Mono, défilement dans le tableau. */
.legal-page table {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin: 8px 0 24px;
    border-collapse: collapse;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
}
.legal-page th {
    padding: 10px 14px 10px 0;
    text-align: left;
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    border-bottom: 1px solid var(--border-strong);
}
.legal-page td {
    padding: 12px 14px 12px 0;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

/* Pied à filets : les liens deviennent des cibles de 44 px. */
.legal-page .legal-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 2px;
    margin: 56px 0 0 -12px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: .875rem;
    color: var(--border-strong);
}
.legal-foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    color: var(--text-2);
    text-decoration: none;
    transition: color var(--t), background-color var(--t);
}
/* (0,2,1) : bat .legal-page a, sinon le pied serait souligné en bleu. */
.legal-page .legal-foot a { color: var(--text-2); text-decoration: none; }

@media (hover: hover) {
    .legal-page .legal-nav a:not(.on):hover { color: var(--text-1); background: rgba(255, 255, 255, .06); }
    .legal-page a:hover { text-decoration-color: currentColor; }
    .legal-page .legal-foot a:hover { color: var(--text-1); background: rgba(255, 255, 255, .05); }
}

@media (max-width: 767px) {
    .legal-page { width: calc(100% - 32px); padding: 28px 0 48px; }
    .legal-nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: var(--radius); }
    .legal-page .legal-nav a { min-height: 44px; justify-content: center; padding: 0 10px; }
    .legal-page p,
    .legal-page li { font-size: 1rem; }
}

@media print {
    .entete-verre, .legal-nav, .legal-foot { display: none !important; }
    body { background: #fff; color: #000; padding: 0; }
    body::before, body::after { display: none; }
    .legal-page { width: auto; padding: 0; }
    .legal-page p, .legal-page li { color: #000; }
}