/* ================================================================
   OUIPC — MENTIONS LÉGALES
   Direction : "dossier technique" sobre — une carte centrée et
   resserrée (comme la conception d'origine), un sommaire présenté
   comme une vraie section, et des articles séparés par des filets
   fins plutôt que par une mise en page pleine largeur.
   ================================================================ */

:root {
    --ink: #10192b;
    --ink-soft: #3a4356;
    --paper: #f3f5f8;
    --card: #ffffff;
    --accent: #2098f5;
    --accent-dark: #146fc2;
    --mono-accent: #12b3a0;
    --line: #e3e7ee;
    --muted: #7c8496;
    --radius: 18px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink-soft);
    background: var(--paper);
    padding: 48px 20px 80px;
    min-height: 100vh;
}

::selection {
    background: var(--accent);
    color: #fff;
}

.mono {
    font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

/* --- Carte centrée, largeur resserrée --- */
.legal-container {
    max-width: 820px;
    margin: 0 auto;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(16, 25, 43, 0.06), 0 4px 20px rgba(16, 25, 43, 0.02);
    overflow: hidden;
}

.legal-container::before {
    content: '';
    display: block;
    height: 5px;
    background: linear-gradient(90deg, var(--accent-dark), var(--mono-accent), var(--accent-dark));
}

/* --- En-tête --- */
.legal-header {
    text-align: center;
    padding: 46px 48px 36px;
    border-bottom: 1px solid var(--line);
}

.legal-header .logo {
    max-width: 110px;
    height: auto;
    margin: 0 auto 16px;
}

.legal-header .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'IBM Plex Mono', Consolas, monospace;
    font-size: 0.76rem;
    color: var(--mono-accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 14px;
}

.legal-header .eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mono-accent);
    box-shadow: 0 0 0 4px rgba(18, 179, 160, 0.15);
}

.legal-header h1 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    color: var(--ink);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.legal-header .subtitle {
    margin: 14px auto 0;
    max-width: 46ch;
    color: var(--muted);
    font-size: 1.2rem;
}

/* --- Sommaire, présenté comme une vraie section --- */
.legal-toc {
    padding: 36px 48px 8px;
    border-bottom: 1px solid var(--line);
}

.legal-toc h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 2rem;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.legal-toc .toc-caption {
    font-size: 1.4rem;
    color: var(--muted);
    margin-bottom: 20px;
}
@media (max-width: 700px) {
    /* ... vos autres règles ... */

    .legal-toc .toc-caption {
        font-size: 1.1rem;        /* ← Plus grand sur mobile */
    }
}
.legal-toc ol {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 18px;
    margin-bottom: 28px;
}

.legal-toc li a {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 1px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--ink-soft);
    font-size: 1.4rem;
    line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease;
}

.legal-toc li a .num {
    font-family: 'IBM Plex Mono', Consolas, monospace;
    color: var(--accent-dark);
    font-size: 0.78rem;
    flex-shrink: 0;
}

.legal-toc li a:hover {
    background: #f0f6fe;
    color: var(--ink);
}

/*.legal-toc li a.active {
    background: #eaf4ff;
    color: var(--ink);
    font-weight: 600;
}*/

.legal-toc li a.active .num {
    color: var(--accent);
}

/* --- Corps du document --- */
.legal-content {
    padding: 8px 48px 40px;
}

.legal-section {
    scroll-margin-top: 24px;
    padding: 36px 0 4px;
    border-top: 1px solid var(--line);
}

.legal-section:first-of-type {
    border-top: none;
    padding-top: 8px;
}

.legal-section h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 2rem;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

.legal-section h2 .tag {
    font-family: 'IBM Plex Mono', Consolas, monospace;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background: var(--ink);
    padding: 2px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}

.legal-section h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
    margin: 26px 0 12px;
    padding-left: 14px;
    border-left: 3px solid var(--mono-accent);
}

.legal-section p {
    margin: 14px 0;
}

.legal-section p strong {
    color: var(--ink);
    font-weight: 600;
}

.legal-section a {
    color: var(--accent-dark);
    text-decoration: none;
    border-bottom: 1.5px solid rgba(32, 152, 245, 0.3);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.legal-section a:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* --- Listes --- */
.legal-section ul {
    list-style: none;
    margin: 14px 0 22px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.legal-section ul li {
    position: relative;
    padding: 5px 0 5px 15px;
    border-bottom: 1px solid #f2f4f8;
    font-size: 1.5rem;
}

.legal-section ul li:last-child {
    border-bottom: none;
}

.legal-section ul li::before {
    content: '›';
    position: absolute;
    left: 2px;
    top: 8px;
    color: var(--mono-accent);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
}


/* ============================================================
   CONTACT — style "Proximité"
   ============================================================ */

.legal-address {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(16, 25, 43, 0.04);
    transition: box-shadow 0.25s ease;
}

.legal-address:hover {
    box-shadow: 0 4px 16px rgba(16, 25, 43, 0.08);
}
.legal-note {
    font-size: 1.6rem;
    color: var(--muted);
    margin: 16px 0 0 8px;
    line-height: 1.6;
    font-style: italic;
    padding-left: 4px;
}

.contact-item {
    padding: 12px 0;
    border-bottom: 1px solid #f0f2f5;
}

.contact-item:last-child {
    border-bottom: none;
}

.contact-label {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #2098F5;
    margin: 0 0 4px 0;
    letter-spacing: 0.02em;
}

.contact-value {
    font-size: 1rem;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.6;
}

.contact-value a {
    color: var(--accent-dark);
    text-decoration: none;
    border-bottom: 1.5px solid rgba(32, 152, 245, 0.25);
    transition: border-color 0.2s ease;
}

.contact-value a:hover {
    border-bottom-color: var(--accent-dark);
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .legal-address {
        padding: 16px 18px;
    }

    .contact-label {
        font-size: 0.95rem;
    }

    .contact-value {
        font-size: 0.95rem;
    }
}

/* --- Mot-clé mis en avant --- */
.legal-section .highlight {
    background: #fff4d6;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    color: #8a5a00;
}

/* --- Note de source / crédit générateur --- */
.legal-credit {
    margin-top: 22px;
    font-size: 0.84rem;
    color: var(--muted);
    font-style: italic;
}

/* --- Pied de page --- */
.legal-footer-note {
    max-width: 820px;
    margin: 24px auto 0;
    text-align: center;
    font-size: 1.2rem;
    color: var(--muted);
}

.legal-footer-note .mono {
    color: var(--ink-soft);
}

/* --- Bouton retour en haut --- */
.legal-back-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.05rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 10px 24px rgba(16, 25, 43, 0.25);
}

.legal-back-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* --- Responsive --- */
@media (max-width: 700px) {
    body {
        padding: 24px 12px 60px;
    }

    .legal-header,
    .legal-toc,
    .legal-content {
        padding-left: 24px;
        padding-right: 24px;
    }

    .legal-toc ol {
        grid-template-columns: 1fr;
    }

    .legal-header h1 {
        font-size: 1.6rem;
    }

    .legal-section h2 {
        font-size: 1.8rem;
    }

    .legal-address .row,
    .legal-host .row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

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

    * {
        transition: none !important;
    }
}

@media print {
    .legal-back-top {
        display: none;
    }

    body {
        background: #fff;
        padding: 0;
    }

    .legal-container {
        box-shadow: none;
        max-width: none;
    }
}