/*
 * Pages « Confidentialité » et « Contact — vos données », et leurs liens sous la connexion.
 * Fichier séparé : la politique de sécurité du site (CSP style-src 'self') interdit les styles
 * écrits dans la page. Même allure que l'écran de connexion (style.css : police Marianne,
 * carte blanche, boutons bleus). Thème sombre : classe « dark » posée par connexion.js.
 */

/* Passage d'une page à l'autre du site en fondu, sans écran vide entre les deux
   (navigateurs récents ; les autres changent de page comme avant). */
@view-transition { navigation: auto; }

/* --- Liens sous le formulaire de connexion --- */
.liens-legaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.liens-legaux a {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
    font-size: .8125rem; font-weight: 500; text-decoration: none;
    color: #475569; background: #f8fafc; border: 1px solid #e2e8f0;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.liens-legaux a:hover, .liens-legaux a:focus-visible { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; box-shadow: 0 1px 2px rgb(37 99 235 / .15); }
.liens-legaux i { color: #2563eb; }
.dark .liens-legaux a { color: #cbd5e1; background: #1e293b; border-color: #334155; }
.dark .liens-legaux a:hover, .dark .liens-legaux a:focus-visible { color: #fff; background: #1e3a8a; border-color: #3b82f6; }
.dark .liens-legaux i { color: #60a5fa; }

/* --- Pages --- */
/* Fond posé dès le premier affichage (sinon un éclair blanc avant le thème sombre). */
html.fond-legal { background: #f8fafc; color-scheme: light; }
html.fond-legal.dark { background: #0f172a; color-scheme: dark; }
/* ← MODIF 02/10/2026 : style.css (appli web, carte plein écran) bloque le défilement de la page
   (body overflow hidden) ; les pages légales défilent normalement, sur téléphone surtout. */
html.fond-legal { overflow-y: auto; height: auto; }
body.page-legale { overflow-y: auto; overflow-x: hidden; height: auto; }
.page-legale { min-height: 100vh; margin: 0; background: #f8fafc; color: #0f172a; font-family: var(--font-sans, "Marianne", arial, sans-serif); }
.dark .page-legale { background: #0f172a; color: #e2e8f0; }
.page-legale .barre { max-width: 760px; margin: 0 auto; padding: 16px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-legale .carte {
    max-width: 760px; margin: 16px auto 48px; padding: 32px; border-radius: 1rem; background: #fff;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
}
.dark .page-legale .carte { background: #0f172a; border: 1px solid #1e293b; box-shadow: none; }
@media (max-width: 560px) { .page-legale .carte { margin: 12px 12px 32px; padding: 22px 18px; } }

.page-legale .entete { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.page-legale .logo { width: 48px; height: 48px; flex-shrink: 0; border-radius: .75rem; background: #2563eb; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 10px 15px -3px rgb(37 99 235 / .3); }
.page-legale h1 { margin: 0; font-size: 1.75rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.page-legale h2 { margin: 28px 0 8px; font-size: 1.05rem; font-weight: 700; color: #1e293b; }
.dark .page-legale h2 { color: #f1f5f9; }
.page-legale p, .page-legale li, .page-legale td { line-height: 1.6; }
.page-legale .doux { color: #64748b; font-size: .9rem; margin: 0; }
.dark .page-legale .doux { color: #94a3b8; }
.page-legale a { color: #2563eb; }
.dark .page-legale a { color: #60a5fa; }

.page-legale table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.page-legale th, .page-legale td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid #e2e8f0; }
.page-legale th { color: #64748b; font-weight: 600; }
.dark .page-legale th, .dark .page-legale td { border-color: #1e293b; }
@media (max-width: 560px) {
    .page-legale table, .page-legale thead, .page-legale tbody, .page-legale tr, .page-legale th, .page-legale td { display: block; }
    .page-legale thead { display: none; }
    .page-legale td { border: 0; padding: 2px 0; }
    .page-legale tr { border-bottom: 1px solid #e2e8f0; padding: 10px 0; }
    .page-legale td:first-child { font-weight: 600; }
}

/* Boutons : comme ceux de la connexion. */
.page-legale .bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: .5rem;
    font: inherit; font-size: .9rem; font-weight: 600; color: #fff; background: #2563eb; cursor: pointer; text-decoration: none;
    box-shadow: 0 10px 15px -3px rgb(59 130 246 / .3); transition: background-color .2s;
}
.page-legale .bouton:hover { background: #1d4ed8; }
.page-legale .bouton:disabled { opacity: .6; cursor: default; }
.page-legale .bouton-secondaire {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: .75rem; font-size: .875rem; font-weight: 500;
    text-decoration: none; color: #475569; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgb(0 0 0 / .05); transition: background-color .2s;
}
.page-legale .bouton-secondaire:hover { background: #f8fafc; }
.dark .page-legale .bouton-secondaire { color: #cbd5e1; background: #1e293b; border-color: #334155; }
.dark .page-legale .bouton-secondaire:hover { background: #334155; }
.page-legale .bouton-theme {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: .75rem; cursor: pointer;
    color: #64748b; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgb(0 0 0 / .05);
}
.dark .page-legale .bouton-theme { color: #94a3b8; background: #1e293b; border-color: #334155; }

/* Formulaire : champs comme ceux de la connexion. */
.page-legale form { display: grid; gap: 16px; margin-top: 20px; }
.page-legale label { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; }
.page-legale label span { font-weight: 400; color: #64748b; font-size: .8rem; }
.page-legale input, .page-legale select, .page-legale textarea {
    font: inherit; font-size: .95rem; color: #0f172a; background: #fff; border: 1px solid #d1d5db; border-radius: .5rem; padding: 12px 14px;
    transition: border-color .2s, box-shadow .2s;
}
.page-legale input:focus, .page-legale select:focus, .page-legale textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgb(59 130 246 / .25); }
.dark .page-legale input, .dark .page-legale select, .dark .page-legale textarea { color: #fff; background: #1e293b; border-color: #334155; }
.page-legale textarea { min-height: 140px; resize: vertical; }
.page-legale .piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.page-legale .message { padding: 12px 14px; border-radius: .5rem; border-left: 4px solid; font-size: .9rem; }
.page-legale .message[hidden] { display: none; }
.page-legale .message.erreur { color: #991b1b; background: #fef2f2; border-color: #ef4444; }
.page-legale .message.ok { color: #065f46; background: #ecfdf5; border-color: #10b981; }
.dark .page-legale .message.erreur { color: #fca5a5; background: rgb(127 29 29 / .2); }
.dark .page-legale .message.ok { color: #6ee7b7; background: rgb(6 78 59 / .3); }

/* Icônes soleil / lune du bouton de thème (comme la connexion). */
.page-legale .theme-icon-moon { display: none; }
.dark .page-legale .theme-icon-moon { display: inline-block; }
.dark .page-legale .theme-icon-sun { display: none; }

/* Contrôle anti-robot du formulaire de contact (epreuve.js) */
.page-legale .epreuve { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: .8rem; color: #94a3b8; }
.page-legale .epreuve[hidden] { display: none; }
.page-legale .epreuve[data-epreuve-etat="verifie"] { color: #059669; }
.page-legale .epreuve[data-epreuve-etat="echec"] { color: #d97706; }
.dark .page-legale .epreuve { color: #64748b; }
.dark .page-legale .epreuve[data-epreuve-etat="verifie"] { color: #34d399; }
.dark .page-legale .epreuve[data-epreuve-etat="echec"] { color: #fbbf24; }

/* Pages d'erreur 404 et 403 (erreur.php) */
.page-legale .page-erreur { max-width: 520px; margin-top: 10vh; text-align: center; position: relative; overflow: hidden; }
.page-legale .page-erreur .logo { margin: 0 auto 18px; width: 64px; height: 64px; font-size: 1.8rem; position: relative; }
.page-legale .page-erreur h1 { position: relative; }
.page-legale .page-erreur .doux { margin: 10px auto 24px; max-width: 400px; line-height: 1.6; font-size: .95rem; position: relative; }
.page-legale .code-erreur { position: absolute; top: -18px; left: 0; right: 0; font-size: 9rem; font-weight: 900; line-height: 1; letter-spacing: -.04em; color: #2563eb; opacity: .07; pointer-events: none; user-select: none; }
.dark .page-legale .code-erreur { color: #60a5fa; opacity: .09; }
.page-legale .actions-erreur { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; position: relative; }
.page-legale .actions-erreur a { text-decoration: none; }
@media (max-width: 560px) { .page-legale .page-erreur { margin-top: 6vh; } .page-legale .code-erreur { font-size: 6.5rem; } }
.page-legale a.bouton, .dark .page-legale a.bouton { color: #fff; }
.page-legale a.bouton-secondaire { color: #334155; }
.dark .page-legale a.bouton-secondaire { color: #cbd5e1; }

/* Liste à puces (procédure d'effacement de contact.php) */
.page-legale .liste { list-style: disc; padding-left: 1.25rem; margin: 0 0 8px; }
.page-legale .liste li { margin: 4px 0; line-height: 1.55; }