/* Feuille de style des pages legales (mentions-legales.html, confidentialite.html).
   Volontairement independante de index.html : ces pages sont de simples documents,
   elles n'ont pas besoin des 350 lignes de mise en page de la page d'accueil.
   Les couleurs et polices sont celles de la charte. */

:root{
  --navy-deep:#0f1a69;
  --gold:#c19a5b;
  --gold-soft:#d8bd8b;
  --gold-dim:#8a6d3d;
  --paper:#f1ede4;
  --ink:#12142a;
  --ink-soft:rgba(18,20,42,0.72);
  --line:rgba(18,20,42,0.14);
}

*{box-sizing:border-box;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces','Times New Roman',serif;font-weight:600;letter-spacing:-0.01em;margin:0;}
a{color:var(--navy-deep);}
a:focus-visible, .back:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.topbar{background:var(--navy-deep);border-bottom:1px solid rgba(255,255,255,0.18);}
.topbar-inner{
  max-width:820px;margin:0 auto;padding:0 28px;height:72px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.topbar .brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;}
.topbar .brand img{width:48px;height:48px;object-fit:contain;display:block;}
.topbar .brand b{font-family:'Fraunces',serif;font-size:17.5px;font-weight:600;letter-spacing:0.02em;}
.back{
  color:var(--gold-soft);text-decoration:none;font-size:14.5px;font-weight:600;
  letter-spacing:0.04em;white-space:nowrap;
}
.back:hover{color:#fff;}

main{max-width:820px;margin:0 auto;padding:64px 28px 88px;}
h1{font-size:clamp(32px,4.6vw,45px);line-height:1.15;}
.updated{margin-top:14px;font-size:15px;color:var(--ink-soft);letter-spacing:0.02em;}
.rule{width:56px;height:2px;background:var(--gold);border:none;margin:26px 0 40px;}

h2{font-size:clamp(21px,2.6vw,25px);margin-top:52px;padding-top:26px;border-top:1px solid var(--line);}
section:first-of-type h2{border-top:none;padding-top:0;margin-top:36px;}
p{margin:16px 0;}
ul{margin:16px 0;padding-left:22px;}
li{margin:8px 0;}

/* Fiche d'identite : libelle a gauche, valeur a droite */
dl{margin:20px 0;display:grid;grid-template-columns:210px 1fr;gap:2px 24px;}
dt{font-size:14px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
   color:var(--gold-dim);padding:11px 0;border-top:1px solid var(--line);}
dd{margin:0;padding:11px 0;border-top:1px solid var(--line);}
@media(max-width:620px){
  dl{grid-template-columns:1fr;gap:0;}
  dt{padding-bottom:0;border-top:1px solid var(--line);}
  dd{padding-top:2px;border-top:none;}
}

/* Encadre : ce que le site ne fait pas (l'information la plus utile au visiteur) */
.callout{
  background:var(--navy-deep);color:#fff;border-radius:4px;
  padding:30px 32px;margin:36px 0;
}
.callout h2{color:#fff;border-top:none;padding-top:0;margin-top:0;font-size:21px;}
.callout p, .callout li{color:rgba(255,255,255,0.86);}
.callout strong{color:var(--gold-soft);}

/* Champ que seul le client peut remplir. Volontairement impossible a manquer. */
.todo{
  background:#fff4d6;color:#6b4e00;border:1px dashed #b58900;
  padding:2px 8px;border-radius:3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;font-weight:600;
}

footer{background:var(--navy-deep);padding:30px 0;}
.footer-inner{
  max-width:820px;margin:0 auto;padding:0 28px;
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;
}
.footer-inner p{color:rgba(255,255,255,0.62);font-size:15px;margin:0;}
.footer-inner a{color:rgba(255,255,255,0.78);font-size:15px;text-decoration:none;}
.footer-inner a:hover{color:#fff;}