/* Izyprof — pages légales (mentions, confidentialité, CGU).
   Consultables sans connexion. app.css est chargé en amont : on réutilise
   ses tokens de charte (--bg, --surface, --border, --font-title…), mais on
   remplace le bleu (--text froid / --accent navy) par une ENCRE chaude proche
   du logo, pour rester dans la famille lin. */
.legal-body {
    margin: 0;
    background: var(--bg);
    color: #3a352c;                 /* texte courant : gris chaud foncé (pas bleuté) */
    --legal-ink: #2c2820;           /* encre chaude ~ logo : titres, liens, accents */
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
}
/* En-tête clair (comme le reste de l'app) : logo encre, filet bas, nav en encre. */
.legal-header {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 16px 22px;
}
.legal-header a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.legal-header img { height: 34px; width: auto; display: block; }
.legal-brand { flex: none; }
.legal-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.legal-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: .92rem;
    white-space: nowrap;
}
.legal-nav a:hover { color: var(--legal-ink); }
.legal-nav a.on { color: var(--legal-ink); font-weight: 700; }
.legal-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    color: #3a352c;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.legal-back:hover { background: var(--n-100); border-color: var(--legal-ink); color: var(--legal-ink); }

.legal-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 34px 20px 70px;
}
.legal-wrap h1 {
    font-family: var(--font-title); font-weight: 800; letter-spacing: -.01em;
    font-size: 1.85rem; margin: 0 0 6px; color: var(--legal-ink);
}
.legal-maj { color: var(--muted); font-size: .9rem; margin: 0 0 32px; }
.legal-wrap h2 {
    font-family: var(--font-title); font-weight: 700; font-size: 1.2rem; color: var(--legal-ink);
    margin: 34px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.legal-wrap h3 { font-family: var(--font-title); font-weight: 700; font-size: 1.02rem; margin: 22px 0 6px; color: var(--legal-ink); }
.legal-wrap p, .legal-wrap li { margin: 0 0 12px; }
.legal-wrap ul { padding-left: 22px; }
.legal-wrap a { color: var(--legal-ink); text-decoration: underline; }
.legal-note {
    background: var(--n-100); border-left: 4px solid var(--legal-ink);
    padding: 14px 16px; border-radius: 0 var(--r-md) var(--r-md) 0; margin: 18px 0;
}
.legal-table { width: 100%; border-collapse: collapse; margin: 14px 0 22px; font-size: .95rem; }
.legal-table th, .legal-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal-table th { background: var(--n-100); color: var(--legal-ink); }
.legal-table td:first-child { width: 42%; }
.legal-foot {
    margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--border);
    font-size: .92rem; color: var(--muted);
}
.legal-foot a { margin-right: 14px; color: var(--legal-ink); }
@media (max-width: 620px) {
    .legal-header { gap: 12px; }
    .legal-nav { margin-left: 0; width: 100%; gap: 14px; font-size: .88rem; }
}
@media (max-width: 560px) {
    .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
    .legal-table thead { display: none; }
    .legal-table td { border: 0; padding: 3px 0; }
    .legal-table tr { border-bottom: 1px solid var(--border); padding: 10px 0; }
    .legal-table td:first-child { width: auto; font-weight: 600; color: var(--legal-ink); }
}