/* Feuille de style des pages légales (mentions-legales.html, confidentialite.html).
   Volontairement autonome et minuscule : ces pages n'ont ni animation, ni script,
   ni mesure d'audience. Les variables reprennent celles d'index.html pour que la
   charte reste la même — si vous touchez aux couleurs là-bas, reportez-les ici. */

:root{
  --paper:#EEF1EE;
  --paper-card:#FFFFFF;
  --paper-card-2:#F6F7F4;
  --ink:#10182B;
  --ink-soft:#4B5565;
  --ink-faint:#77808F;
  --navy-deep:#0A1120;
  --gold:#B4872A;
  --gold-soft:#E4C878;
  --line:rgba(16,24,43,0.12);
  --line-strong:rgba(16,24,43,0.22);

  --display:"Iowan Old Style","Palatino Linotype","URW Palladio L","Georgia",ui-serif,serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0A0F1C;
    --paper-card:#131C30;
    --paper-card-2:#101828;
    --ink:#EDEFEE;
    --ink-soft:#AEB6C4;
    --ink-faint:#7C8797;
    --gold:#D9B54E;
    --gold-soft:#8A6C29;
    --line:rgba(237,239,238,0.14);
    --line-strong:rgba(237,239,238,0.24);
  }
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px;margin:0 auto;padding:0 24px;}

/* ── En-tête : bandeau sombre, comme le héros de la page d'accueil ────── */
.legal-tete{
  background:var(--navy-deep);
  padding:20px 0;
  border-bottom:1px solid rgba(228,200,120,0.18);
}
.legal-tete .wrap{display:flex;align-items:center;gap:12px;}
.legal-tete a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--gold-soft);
  text-decoration:none;
  font-family:var(--display);
  font-size:19px;
  font-weight:600;
}
.legal-tete a:hover{text-decoration:underline;text-underline-offset:3px;}
.legal-retour{
  margin-left:auto;
  font-family:var(--body)!important;
  font-size:13px!important;
  font-weight:600!important;
  color:rgba(228,200,120,0.85)!important;
}

/* ── Corps du document ───────────────────────────────────────────────── */
main{padding:44px 0 64px;}
main h1{
  font-family:var(--display);
  font-size:clamp(26px,3.4vw,34px);
  font-weight:600;
  margin:0 0 6px;
  text-wrap:balance;
}
.legal-chapo{
  color:var(--ink-faint);
  font-size:13px;
  margin:0 0 30px;
}
main h2{
  font-family:var(--body);
  font-size:12px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink);
  margin:32px 0 9px;
}
main p, main li{color:var(--ink-soft);font-size:14.5px;}
main p{margin:0 0 11px;}
main ul{margin:0 0 11px;padding-left:20px;}
main li{margin-bottom:6px;}
main a{color:var(--ink);text-underline-offset:2px;}
main code{font-family:var(--mono);font-size:12.5px;}

/* Les tableaux défilent dans leur cadre : la page ne part jamais de travers. */
.tableau{overflow-x:auto;margin:6px 0 14px;}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px;}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top;color:var(--ink-soft);}
th{background:var(--paper-card-2);color:var(--ink);font-weight:700;}

/* Trous à combler : volontairement voyants, pour qu'aucun ne parte en ligne
   par oubli. Supprimez la balise <span> une fois l'information renseignée. */
.a-completer{
  background:rgba(180,135,42,0.18);
  border:1px dashed var(--gold);
  border-radius:5px;
  padding:1px 6px;
  color:var(--ink);
  font-weight:600;
}

.legal-maj{
  margin-top:26px;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--ink-faint);
}

/* ── Pied de page ────────────────────────────────────────────────────── */
.legal-pied{
  background:#000;
  color:#E4C878;
  font-size:13px;
  padding:26px 0 34px;
}
.legal-pied a{color:inherit;}
/* Même logique que le pied de l'accueil : les liens tiennent leur propre ligne. */
.legal-pied .foot-liens{display:block;margin-top:5px;}

@media (max-width:520px){
  .wrap{padding:0 18px;}
  main{padding:32px 0 48px;}
  .legal-tete .wrap{flex-wrap:wrap;gap:8px;}
  .legal-retour{margin-left:0;}
}