/* ============================================================
   Pages légales (mentions-legales.html, confidentialite.html)
   Thème Astrolabe : header/footer nuit + or, corps parchemin
   pour la lisibilité d'un long texte légal.
   Réutilise les @font-face de fonts.css (Marcellus / Cormorant
   Garamond / Inter — auto-hébergées, RGPD-compatible).
   ============================================================ */

:root{
  --night:#0E0B1C;
  --night-soft:#1A0E0C;
  --parch:#F4ECD7;
  --parch-soft:#ECE0C5;
  --ink:#1F1611;
  --ink-2:#5A4936;
  --gold:#D4AA5A;
  --gold-deep:#9C7421;
  --copper:#B5704B;
  --copper-deep:#7E4523;
  --rule:rgba(122,42,35,.18);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{margin:0}
body{
  font-family:'Cormorant Garamond', Georgia, serif;
  color:var(--ink);
  background:var(--parch);
  font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Marcellus', 'Cormorant Garamond', serif;
  font-weight:400;line-height:1.15;letter-spacing:-.005em;
  color:var(--ink);
}
a{color:var(--copper-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--gold-deep)}

/* — Header — */
.legal-header{
  background:var(--night);
  color:var(--parch);
  padding:18px 0;
  border-bottom:1px solid rgba(212,170,90,.25);
}
.legal-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{
  display:flex;align-items:center;gap:12px;color:var(--parch);text-decoration:none;
  font-family:'Marcellus';font-size:20px;letter-spacing:.04em;
}
.logo .mark{
  width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #F2D996, var(--gold) 55%, var(--gold-deep));
  display:grid;place-items:center;color:var(--night);
  font-family:'Marcellus';font-size:18px;font-weight:400;
  box-shadow:0 0 0 1px rgba(212,170,90,.4), 0 0 16px rgba(212,170,90,.25);
}
.legal-header a.back{
  color:rgba(244,236,215,.7);text-decoration:none;
  font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.04em;
}
.legal-header a.back:hover{color:var(--gold)}

/* — Layout — */
.wrap{width:100%;max-width:780px;margin:0 auto;padding:0 24px}
main{padding:64px 0 80px}

/* — Headings & body — */
main h1{
  font-size:42px;margin-bottom:8px;color:var(--ink);
}
.updated{
  color:var(--ink-2);font-style:italic;
  font-size:15px;margin-bottom:36px;
}
main h2{
  font-size:24px;margin:42px 0 14px;
  padding-top:14px;border-top:1px solid var(--rule);
  color:var(--copper-deep);
}
main h2:first-of-type{border-top:0;margin-top:0;padding-top:0}
main p,main li{color:#2c2118;margin-bottom:12px}
main p strong,main li strong{color:var(--ink);font-weight:600}
main ul{margin:0 0 14px 22px}
main li{margin-bottom:6px}

/* — Tables (utilisé pour finalités / base légale) — */
table{
  width:100%;border-collapse:collapse;margin:16px 0;
  background:rgba(255,255,255,.4);
  border:1px solid var(--rule);
}
th,td{
  text-align:left;padding:12px 14px;
  border-bottom:1px solid var(--rule);
  vertical-align:top;font-size:16px;
}
tr:last-child td{border-bottom:0}
th{
  background:rgba(212,170,90,.15);
  font-family:'Marcellus';font-weight:400;color:var(--ink);
  letter-spacing:.02em;
}

/* — Encarts — */
.disclaimer{
  background:rgba(122,42,35,.06);
  border:1px solid var(--rule);
  border-left:3px solid var(--copper-deep);
  padding:16px 20px;margin-top:36px;
  font-size:16px;color:var(--ink-2);
  font-style:italic;
}
.disclaimer strong{color:var(--copper-deep);font-style:normal}

.todo{
  background:rgba(212,170,90,.15);
  border:1px dashed var(--gold-deep);
  color:var(--copper-deep);
  padding:14px 16px;margin:18px 0;font-size:15px;
}
.todo strong{color:var(--copper-deep)}
.fill{
  background:rgba(212,170,90,.25);padding:1px 6px;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
  color:var(--copper-deep);white-space:nowrap;
}

/* — Footer — */
footer{
  background:#070512;color:rgba(244,236,215,.6);
  padding:28px 0;font-size:13px;text-align:center;
  font-family:'Inter',sans-serif;
}
footer a{color:var(--gold);text-decoration:none}
footer a:hover{color:var(--parch)}

@media (max-width: 600px){
  main h1{font-size:34px}
  main h2{font-size:20px}
  body{font-size:17px}
}