/* La police est déclarée par un <link> dans chaque page : un @import ici
   sérialisait sa découverte derrière celle de cette feuille. */

/* Feuille commune aux pages légales.
 *
 * Extraite plutôt que dupliquée dans chaque document : cinq copies d'un même
 * style divergent à la première correction, et une page légale dont la mise en
 * forme diverge donne à penser qu'elle n'est pas tenue à jour.
 *
 * Contraste vérifié sur l'ensemble des couples texte/fond : ratio minimal 4,6:1
 * en thème clair comme en thème sombre, au-delà du 4,5:1 exigé par le critère
 * WCAG 1.4.3 (niveau AA) et le critère RGAA 3.2.
 */
:root {
  /* Palette « Nimbus Professional », identique à celle de l'application.
     Contraste revérifié après le changement : voir le commentaire d'en-tête. */
  --fond: #f2f2f2; --carte: #ffffff; --carte-2: #f3f3f3; --bord: #e2e2e2;
  --encre: #1a1c1c; --encre-2: #44474e; --encre-3: #63656d;
  --accent: #3d6089; --marine: #1b2d4b; --alerte: #ba1a1a; --bien: #1c6b3f;
  --r: 16px; --r-sm: 8px;
}
:root[data-theme='sombre'] {
  --fond: #0f172a; --carte: #1e293b; --carte-2: #24334a; --bord: #334155;
  --encre: #f1f1f1; --encre-2: #cbd5e1; --encre-3: #94a3b8;
  --accent: #b5c7ed; --marine: #d7e3ff; --alerte: #ffb4ab; --bien: #6ec48f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) {
  --fond: #0f172a; --carte: #1e293b; --carte-2: #24334a; --bord: #334155;
  --encre: #f1f1f1; --encre-2: #cbd5e1; --encre-3: #94a3b8;
  --accent: #b5c7ed; --marine: #d7e3ff; --alerte: #ffb4ab; --bien: #6ec48f;
}
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 16px/1.65 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/* Lien d'évitement : critère RGAA 12.7. Il doit être le premier élément
   focalisable et devenir visible à la prise de focus. */
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.evitement:focus { left: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

.entete {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--carte); border-bottom: 1px solid var(--bord);
}
.marque { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--encre); text-decoration: none; }
.marque svg { color: #e08a00; flex: none; }
.fil { padding: 12px 20px 0; max-width: 860px; margin: 0 auto; font-size: 13px; color: var(--encre-3); }
.fil ol { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; flex-wrap: wrap; }
.fil li::after { content: '›'; margin-left: 8px; color: var(--bord); }
.fil li:last-child::after { content: ''; }

.enveloppe { max-width: 860px; margin: 0 auto; padding: 10px 20px 70px; }
h1 { font-size: 28px; line-height: 1.25; margin: 18px 0 8px; letter-spacing: -.015em; }
h2 { font-size: 20px; margin: 36px 0 10px; letter-spacing: -.008em; }
h3 { font-size: 16px; margin: 22px 0 6px; color: var(--encre-2); }
p, li { color: var(--encre-2); }
main > p:first-of-type { font-size: 17px; }

dl.identite { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; }
dl.identite dt { font-weight: 700; color: var(--encre); }
dl.identite dd { margin: 0; }
@media (max-width: 560px) { dl.identite { grid-template-columns: 1fr; gap: 0 0; } dl.identite dd { margin-bottom: 10px; } }

table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14.5px; }
caption { text-align: left; font-size: 13px; color: var(--encre-3); padding-bottom: 6px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bord); vertical-align: top; }
th { color: var(--encre); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.tableau-large { overflow-x: auto; }

.encart {
  border: 1px solid var(--bord); border-left: 4px solid var(--accent);
  border-radius: 10px; padding: 14px 16px; margin: 20px 0; background: var(--carte);
}
.encart.bien { border-left-color: var(--bien); }
.encart.alerte { border-left-color: var(--alerte); }
.encart p:first-child { margin-top: 0; }
.encart p:last-child { margin-bottom: 0; }

.maj { font-size: 13px; color: var(--encre-3); margin-top: 44px; padding-top: 14px; border-top: 1px solid var(--bord); }

.pied {
  border-top: 1px solid var(--bord); background: var(--carte);
  padding: 22px 20px; margin-top: 40px;
}
.pied-inner { max-width: 860px; margin: 0 auto; font-size: 13px; color: var(--encre-3); }
.pied nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 12px; padding: 0; }
.pied a { color: var(--encre-3); }
.signature { margin: 0; }
.signature a { color: var(--accent); font-weight: 600; }

/* --- Formulaire ---------------------------------------------------------- */
form.rgpd { max-width: 620px; }
.champ { margin-bottom: 18px; }
.champ label { display: block; font-weight: 650; margin-bottom: 5px; color: var(--encre); }
.champ .aide { display: block; font-weight: 400; font-size: 13px; color: var(--encre-3); margin-top: 2px; }
.champ input, .champ textarea, .champ select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--bord); border-radius: 9px;
  background: var(--carte); color: var(--encre); font: inherit; font-size: 15.5px;
}
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.champ textarea { min-height: 150px; resize: vertical; }
.champ[data-erreur] input, .champ[data-erreur] textarea { border-color: var(--alerte); border-width: 2px; }
.erreur { color: var(--alerte); font-size: 13.5px; margin: 5px 0 0; font-weight: 600; }
.requis { color: var(--alerte); }
.consentement { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 20px; }
.consentement input { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.consentement label { font-weight: 400; font-size: 14.5px; color: var(--encre-2); }

/* Piège à robots. Il ne doit être invisible QUE pour l'œil : `display:none`
   est repéré par les robots modernes, et masquerait le champ aux lecteurs
   d'écran sans les avertir. D'où le retrait hors cadre, l'exclusion de la
   tabulation et l'`aria-hidden`. */
.piege {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}

.bouton {
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 9px;
  background: var(--accent); color: #fff; font: inherit; font-size: 16px;
  font-weight: 700; cursor: pointer;
}
.bouton:hover { filter: brightness(1.1); }
.bouton[disabled] { opacity: .6; cursor: progress; }
.retour-form { margin-top: 18px; font-weight: 600; }
.retour-form.ok { color: var(--bien); }
.retour-form.ko { color: var(--alerte); }

/* --- Bandeau d'information ------------------------------------------------ */
.bandeau {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  max-width: 560px; margin: 0 auto;
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--r);
  box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: 16px 18px;
}
.bandeau p { margin: 0 0 12px; font-size: 14px; }
.bandeau .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bandeau .bouton { min-height: 44px; font-size: 14.5px; padding: 0 18px; }
.bandeau a { font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media print {
  .entete, .pied nav, .bandeau, .evitement { display: none; }
  body { background: #fff; color: #000; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 10px; }
}

/* --- Contraste renforcé et contraste forcé --------------------------------
   Les pages légales n'avaient rien de tout cela, alors qu'elles sont celles
   qu'on vient lire de bout en bout : conditions, politique de confidentialité,
   déclaration d'accessibilité. C'est le texte le plus long du site, et le seul
   qu'on ne survole pas. */
@media (prefers-contrast: more) {
  :root { --bord: var(--encre-3); --encre-3: var(--encre-2); }
  a { text-decoration-thickness: from-font; }
}
@media (forced-colors: active) {
  .bandeau, .entete { border: 1px solid CanvasText; }
  .bouton { border: 1px solid ButtonText; }
  .entete a[aria-current='page'] { border-bottom: 2px solid Highlight; }
}

/* Les titres de section ne laissent plus un mot seul en dernière ligne, et les
   paragraphes juridiques — longs, à la ponctuation dense — ne se terminent plus
   par une orpheline. */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* L'en-tête de ces pages ne colle pas, mais les ancres internes des sommaires
   arrivaient contre le bord haut de la fenêtre, sans marge de lecture. */
h2[id], h3[id], section[id] { scroll-margin-top: 24px; }