/* Feuille de style commune aux pages légales.
   Même palette et même typographie que la landing, en beaucoup plus sobre. */
:root{
  --navy-900:#050a24;
  --navy-800:#091235;
  --navy-700:#0d1c4e;
  --blue:#1668ff;
  --blue-soft:#8fbaff;
  --ink:#0b1a3a;
  --ink-soft:#4b5a7a;
  --ink-mute:#5f6d8a;
  --line:#e3eaf7;
  --paper:#f4f7ff;
  --font-display:"DM Sans",system-ui,-apple-system,sans-serif;
  --maxw:820px;
  --gut:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{
  margin:0;background:var(--navy-900);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.7;color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
/* teinte qui passe le contraste AA sur blanc comme sur le fond papier */
a{color:#0d5aee}
a:hover{text-decoration:none}
/* les liens dans le texte gagnent quelques pixels de hauteur cliquable
   sans decaler la ligne : le padding vertical d'un element inline
   agrandit la zone sensible sans modifier l'interlignage */
.page a{padding-block:3px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:#fff;color:var(--ink);padding:12px 20px;font-weight:600;
}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- Barre du haut ---------- */
.topbar{
  background:
    radial-gradient(115% 140% at 84% -20%, rgba(12,78,217,.45) 0%, rgba(12,78,217,0) 60%),
    linear-gradient(160deg,var(--navy-900),var(--navy-700));
}
.topbar__in{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:82px;padding-block:16px;
}
.brand img{height:24px;width:auto}
.retour{
  display:inline-flex;align-items:center;gap:8px;
  color:#cfdeff;text-decoration:none;font-size:14.5px;font-weight:500;
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:9px 16px;
  transition:background-color .25s,border-color .25s,color .25s;
}
.retour:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff}
.retour svg{width:15px;height:15px;flex:none}

/* ---------- Contenu ---------- */
.page{
  background:#fff;
  padding-block:clamp(40px,6vw,64px) clamp(50px,7vw,80px);
  min-height:60vh;
}
.eyebrow{
  margin:0 0 14px;font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#0d5aee;
}
h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(30px,5vw,44px);letter-spacing:0;line-height:1.15;
  text-transform:uppercase;margin:0;color:var(--ink);
}
.chapo{margin:18px 0 0;color:var(--ink-soft);font-size:16px;max-width:60ch}

section{margin-top:clamp(34px,4.5vw,48px)}
h2{
  font-family:var(--font-display);font-weight:600;font-size:20px;
  letter-spacing:-.01em;margin:0 0 14px;color:var(--ink);
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
section p{margin:0 0 14px;color:var(--ink-soft);max-width:70ch}
section p:last-child{margin-bottom:0}

/* fiche d'identité en paires terme / valeur */
.fiche{margin:0;display:grid;gap:2px}
.fiche > div{
  display:grid;grid-template-columns:230px 1fr;gap:8px 20px;
  padding:11px 14px;border-radius:10px;
}
.fiche > div:nth-child(odd){background:var(--paper)}
.fiche dt{margin:0;font-size:14px;font-weight:600;color:var(--ink-mute)}
.fiche dd{margin:0;color:var(--ink)}

ul{margin:0 0 14px;padding-left:22px;color:var(--ink-soft);max-width:70ch}
li{margin-bottom:8px}
li:last-child{margin-bottom:0}
li strong{color:var(--ink);font-weight:600}

.encart{
  margin-top:18px;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:18px 20px;
}
.encart p{margin:0;color:var(--ink-soft);font-size:15.5px}
.encart p + p{margin-top:10px}

/* ---------- Pied ---------- */
.pied{background:#03071a;color:#8fabdd;font-size:14px;padding:26px 0}
.pied__in{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;align-items:center}
.pied p{margin:0}
.pied nav{display:flex;flex-wrap:wrap;gap:20px}
.pied a{color:#a9c4f5;text-decoration:none;display:inline-block;padding-block:4px}
.pied a:hover{color:#fff}

@media (max-width:640px){
  :root{--gut:18px}
  .fiche > div{grid-template-columns:1fr;gap:2px;padding:12px 14px}
  .topbar__in{min-height:0}
  .brand img{height:21px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
}