/* =====================================================================
   PAGES LÉGALES ET D'INFORMATION — feuille partagée (02/10/2026)

   Mentions légales, confidentialité, conditions, tarifs, contact.

   Même famille visuelle que la vitrine (public/index.html) : mêmes jetons
   --acc-*, mêmes polices, même bascule clair/sombre. On reprend les jetons
   plutôt que de recopier des couleurs : le jour où la palette change, ces
   pages suivent sans qu'on y pense.

   Ces pages sont longues et se lisent en entier : colonne étroite (68
   caractères), interligne large, et une seule colonne même sur grand écran.
   ===================================================================== */

:root {
  color-scheme: light;
  --acc-fond: #eef4fb;
  --acc-texte: #14314c;
  --acc-texte-att: #4a6580;
  --acc-texte-tres-att: #8099b0;
  --acc-fond-carte: rgba(255, 255, 255, .9);
  --acc-bordure: rgba(31, 75, 122, .16);
  --acc-accent: #1f4b7a;
  --acc-ambre: #b8820f;
  --acc-ambre-fond: #fdf3dd;
  --acc-ombre-carte: 0 1px 2px rgba(20, 49, 76, .06), 0 14px 34px -14px rgba(20, 49, 76, .3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --acc-fond: #070b16;
    --acc-texte: #e7edf6;
    --acc-texte-att: #9fb2c9;
    --acc-texte-tres-att: #6f83a0;
    --acc-fond-carte: rgba(14, 20, 32, .85);
    --acc-bordure: rgba(56, 189, 248, .2);
    --acc-accent: #38bdf8;
    --acc-ambre: #f5b544;
    --acc-ambre-fond: rgba(245, 181, 68, .12);
    --acc-ombre-carte: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --acc-fond: #070b16;
  --acc-texte: #e7edf6;
  --acc-texte-att: #9fb2c9;
  --acc-texte-tres-att: #6f83a0;
  --acc-fond-carte: rgba(14, 20, 32, .85);
  --acc-bordure: rgba(56, 189, 248, .2);
  --acc-accent: #38bdf8;
  --acc-ambre: #f5b544;
  --acc-ambre-fond: rgba(245, 181, 68, .12);
  --acc-ombre-carte: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--acc-fond);
  color: var(--acc-texte);
  font-family: 'Nunito', 'Avenir Next', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 44rem; margin: 0 auto; padding: 20px 20px 60px; }

/* --- L'en-tête : la marque, et le retour --------------------------- */
.tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0 26px;
}
.marque {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--acc-texte);
  text-decoration: none;
  letter-spacing: .01em;
}
.retour {
  font-size: .9rem;
  color: var(--acc-texte-att);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.retour:hover { color: var(--acc-texte); border-color: var(--acc-bordure); }

/* --- Le texte ------------------------------------------------------ */
h1 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.9rem;
  line-height: 1.2;
  margin: 0 0 6px;
}
.maj {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acc-texte-tres-att);
  margin: 0 0 32px;
}
h2 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.18rem;
  line-height: 1.3;
  margin: 38px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--acc-bordure);
}
h3 { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 1rem; margin: 24px 0 6px; }
p, li { color: var(--acc-texte-att); }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 1.3em; }
li { margin-bottom: 7px; }
strong { color: var(--acc-texte); font-weight: 700; }
a { color: var(--acc-accent); }

/* --- Un encadré qui porte une information à ne pas manquer --------- */
.encadre {
  background: var(--acc-fond-carte);
  border: 1px solid var(--acc-bordure);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 20px;
  box-shadow: var(--acc-ombre-carte);
}
.encadre p:last-child, .encadre ul:last-child { margin-bottom: 0; }

/* --- Un tableau (les tarifs, les durées de conservation) ----------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: .94rem;
}
th, td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--acc-bordure);
  vertical-align: top;
  color: var(--acc-texte-att);
}
th {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--acc-texte-tres-att);
  font-weight: 600;
}
td strong { color: var(--acc-texte); }

/* --- LES ZONES À COMPLÉTER ----------------------------------------
   Volontairement criardes. Ce sont des informations légalement
   obligatoires qui manquent encore : il ne faut pas qu'elles puissent
   passer inaperçues le jour de la mise en ligne.
   `outils/verifier-pages-legales.mjs` les compte et refuse de se taire. */
.a-completer {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--acc-ambre-fond);
  border: 1px dashed var(--acc-ambre);
  color: var(--acc-ambre);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .82em;
  font-weight: 600;
}

/* --- Le pied : la navigation entre ces pages ----------------------- */
.pied {
  margin-top: 54px;
  padding-top: 20px;
  border-top: 1px solid var(--acc-bordure);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: .88rem;
}
.pied a { color: var(--acc-texte-att); text-decoration: none; }
.pied a:hover { color: var(--acc-texte); }
.pied a[aria-current="page"] { color: var(--acc-texte); font-weight: 700; }

@media (max-width: 640px) {
  .page { padding: 16px 16px 44px; }
  h1 { font-size: 1.55rem; }
  table { font-size: .88rem; }
  th, td { padding: 9px 8px; }
}