/* ============================================================
   Feuille de style des pages légales
   Partagée par mentions-legales.html, confidentialite.html
   et cookies.html. Reprend les jetons du site principal.
   ============================================================ */

@font-face{font-family:'Michroma';src:url('fonts/michroma.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ardoise:#16232E;
  --ardoise-moy:#2E4356;
  --footer:#101A22;
  --acier:#46688A;
  --acier-clair:#7FA3C6;
  --gris-chaud:#4A4643;
  --gris-froid:#8C9AA6;
  --blanc-casse:#F4F5F3;
  --corps-clair:#3B4650;
  --filet:#C9CFCC;
  --manquant-fond:#FBEEDC;
  --manquant-bord:#B07A18;
  --manquant-texte:#6B4A0C;
  --titre:'Michroma',ui-sans-serif,system-ui,sans-serif;
  --corps:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--blanc-casse);
  color:var(--ardoise);
  font-family:var(--corps);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--acier)}
a:hover{color:var(--ardoise);text-decoration:underline;text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--acier);outline-offset:3px}

/* ---------- bandeau ---------- */
.bandeau{
  background:var(--ardoise);
  padding:16px 5vw;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.bandeau a{font-family:var(--titre);font-size:13px;letter-spacing:.28em;color:var(--blanc-casse);text-decoration:none}
.bandeau a:hover{text-decoration:none;color:var(--blanc-casse)}
.bandeau .gris{color:var(--gris-froid)}
.bandeau .bleu{color:var(--acier-clair)}
.bandeau .retour{font-family:var(--corps);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#C6D0D9}
.bandeau .retour:hover{color:var(--acier-clair);text-decoration:underline;text-underline-offset:3px}

/* ---------- contenu ---------- */
.page{max-width:760px;margin:0 auto;padding:64px 5vw 88px}
.page h1{
  font-family:var(--titre);font-weight:400;
  font-size:clamp(22px,3.2vw,32px);letter-spacing:.1em;line-height:1.35;
  margin:0;
}
.maj{margin-top:14px;font-family:var(--mono);font-size:12.5px;color:var(--gris-chaud)}
.page h2{
  font-family:var(--titre);font-weight:400;
  font-size:15px;letter-spacing:.12em;line-height:1.5;
  margin:52px 0 0;padding-top:20px;border-top:2px solid var(--acier);
}
.page h3{font-family:var(--corps);font-weight:600;font-size:15.5px;margin:26px 0 0}
.page p{margin:14px 0 0;color:var(--corps-clair)}
.page ul{margin:14px 0 0;padding-left:20px;color:var(--corps-clair)}
.page li{margin-top:7px}
.page li::marker{color:var(--acier)}

/* ---------- table d'identité ---------- */
.identite{margin-top:18px;width:100%;border-collapse:collapse;font-size:15px}
.identite th,.identite td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--filet);vertical-align:top}
.identite th{font-weight:500;color:var(--gris-chaud);width:38%;white-space:nowrap}
.identite td{color:var(--corps-clair)}
@media (max-width:620px){
  .identite th{width:auto;white-space:normal;display:block;border-bottom:0;padding-bottom:2px}
  .identite td{display:block;padding-top:0}
}

/* ---------- information manquante ---------- */
.manquant{
  display:inline-block;
  background:var(--manquant-fond);
  border:1px dashed var(--manquant-bord);
  color:var(--manquant-texte);
  font-family:var(--mono);
  font-size:13px;
  padding:2px 8px;
}
.avertissement{
  margin-top:26px;
  background:var(--manquant-fond);
  border-left:4px solid var(--manquant-bord);
  padding:18px 22px;
  font-size:14.5px;
  color:var(--manquant-texte);
}
.avertissement strong{color:#4A3206}
.avertissement p{color:inherit}
.avertissement ul{color:inherit}

/* ---------- pied ---------- */
.pied{background:var(--footer);color:#C6D0D9;padding:42px 5vw;font-size:13.5px}
.pied .dedans{max-width:760px;margin:0 auto;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.pied a{color:var(--acier-clair)}
.pied ul{display:flex;gap:18px;flex-wrap:wrap;margin:0;padding:0;list-style:none}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
@media print{.bandeau,.pied{display:none}body{background:#FFF}}