/* ============================================================
   Hervanium — feuille de style des pages légales
   Reprend les tokens de index.html. Un seul fichier partagé par
   mentions-legales.html, cgv.html, cgu.html et confidentialite.html
   ============================================================ */

:root{
  color-scheme: dark;
  --ink:#070d12;
  --ink-2:#0b141a;
  --surface:#0f1c24;
  --surface-2:#142731;
  --line:#1c333f;
  --line-soft:#132530;
  --fog:#8aa5b1;
  --fog-dim:#5d7783;
  --paper:#e9f3f7;
  --cyan:#6bb7ce;
  --deep:#509eb5;
  --amber:#dfa84c;

  --ff-display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ff-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-xs:.75rem;
  --fs-sm:.875rem;
  --fs-base:1rem;
  --fs-lg:1.0625rem;
  --fs-xl:1.3125rem;
  --fs-2xl:clamp(1.4rem,3.2vw,1.85rem);
  --fs-3xl:clamp(1.9rem,4.6vw,2.7rem);

  --wrap:1180px;
  --gutter:clamp(18px,4vw,44px);
  --radius:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ff-body);
  font-size:var(--fs-base);
  line-height:1.68;
  letter-spacing:-.005em;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

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

.eyebrow{
  font-family:var(--ff-mono);
  font-size:var(--fs-xs);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--deep);
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin:0;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--deep);flex:none;opacity:.7}

h1,h2,h3,h4{font-family:var(--ff-display);margin:0;text-wrap:balance;letter-spacing:-.03em;line-height:1.1;font-weight:800}
p{margin:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--ff-body);font-size:var(--fs-sm);font-weight:600;letter-spacing:.01em;
  padding:.82rem 1.35rem;border-radius:10px;border:1px solid transparent;
  cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
  white-space:nowrap;
}
.btn svg{flex:none}
.btn-primary{
  background:linear-gradient(180deg,var(--cyan),var(--deep));
  color:#06222c;
  box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 10px 26px -14px var(--deep);
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--paper);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--deep);background:var(--surface);transform:translateY(-2px)}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(7,13,18,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s ease,background .25s ease;
}
.nav.is-stuck{border-bottom-color:var(--line-soft);background:rgba(7,13,18,.94)}
.nav-in{display:flex;align-items:center;gap:1.5rem;height:68px}
.nav-in>*{min-width:0}
.brand{display:flex;align-items:center;gap:.65rem;margin-right:auto}
.brand img{width:29px;height:29px}
.brand-name{font-family:var(--ff-display);font-weight:800;font-size:1.02rem;letter-spacing:.13em;text-transform:uppercase}
.nav-links{display:none;gap:1.9rem;align-items:center}
.nav-links a{font-size:var(--fs-sm);color:var(--fog);transition:color .18s ease}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--paper)}
@media(min-width:900px){.nav-links{display:flex}}
@media(max-width:559px){
  .nav-in .btn{padding:.68rem 1rem;font-size:.82rem}
  .brand-name{font-size:.95rem;letter-spacing:.1em}
}

/* ============ EN-TÊTE DE PAGE ============ */
.legal-hero{padding-block:clamp(40px,6vw,72px) clamp(20px,3vw,34px);border-bottom:1px solid var(--line-soft)}
.legal-hero h1{font-size:var(--fs-3xl);margin-top:.9rem}
.legal-hero .lede{font-size:var(--fs-lg);color:var(--fog);max-width:62ch;margin-top:1rem}
.legal-meta{
  display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.4rem;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fog-dim);
}
.legal-meta span{border:1px solid var(--line);border-radius:999px;padding:.28rem .7rem;background:var(--ink-2)}

/* ============ CORPS ============ */
.legal-body{
  padding-block:clamp(32px,5vw,58px) clamp(48px,7vw,90px);
  display:grid;gap:clamp(28px,4vw,54px);
  grid-template-columns:1fr;
}
@media(min-width:1000px){
  .legal-body{grid-template-columns:230px minmax(0,1fr);align-items:start}
}

/* sommaire */
.toc{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:1.2rem 1.2rem 1.3rem;
}
@media(min-width:1000px){.toc{position:sticky;top:92px;max-height:calc(100vh - 120px);overflow:auto}}
.toc h2{
  font-family:var(--ff-mono);font-size:var(--fs-xs);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--deep);margin-bottom:.9rem;
}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;counter-reset:toc}
.toc a{
  font-size:var(--fs-sm);color:var(--fog);line-height:1.45;display:block;
  transition:color .18s ease;counter-increment:toc;
}
.toc a::before{
  content:counter(toc,decimal-leading-zero) " ";
  font-family:var(--ff-mono);font-size:10.5px;color:var(--fog-dim);letter-spacing:.06em;
}
.toc a:hover{color:var(--cyan)}

/* articles */
.legal-content{max-width:74ch}
.legal-content section{scroll-margin-top:92px;padding-block:1.6rem}
.legal-content section+section{border-top:1px solid var(--line-soft)}
.legal-content h2{
  font-size:var(--fs-2xl);margin-bottom:.9rem;display:flex;gap:.7rem;align-items:baseline;
}
.legal-content h2 .num{
  font-family:var(--ff-mono);font-size:12px;font-weight:500;color:var(--deep);
  letter-spacing:.08em;flex:none;position:relative;top:-.15em;
}
.legal-content h3{font-size:var(--fs-lg);margin-top:1.5rem;margin-bottom:.5rem;color:var(--paper)}
.legal-content p{color:var(--fog);margin-bottom:.9rem}
.legal-content p:last-child{margin-bottom:0}
.legal-content strong{color:var(--paper);font-weight:600}
.legal-content ul,.legal-content ol{color:var(--fog);margin:0 0 .9rem;padding-left:1.25rem;display:flex;flex-direction:column;gap:.45rem}
.legal-content li::marker{color:var(--deep)}
.legal-content a:not(.btn){color:var(--cyan);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.legal-content a:not(.btn):hover{color:var(--paper)}
.legal-content code{
  font-family:var(--ff-mono);font-size:.85em;background:var(--ink-2);
  border:1px solid var(--line-soft);border-radius:5px;padding:.1rem .35rem;color:var(--paper);
}

/* encadré d'information */
.note{
  border:1px solid var(--line);border-left:2px solid var(--deep);
  background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;
  padding:1.1rem 1.2rem;margin:1.2rem 0;
}
.note p{margin-bottom:.6rem}
.note p:last-child{margin-bottom:0}
.note-title{
  font-family:var(--ff-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--deep);display:block;margin-bottom:.5rem;
}
.note-warn{border-left-color:var(--amber)}
.note-warn .note-title{color:var(--amber)}

/* tableau */
.legal-table{width:100%;overflow-x:auto;margin:1.1rem 0}
.legal-table table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--fs-sm)}
.legal-table th,.legal-table td{
  text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--line-soft);
  vertical-align:top;color:var(--fog);
}
.legal-table th{
  font-family:var(--ff-mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--deep);font-weight:500;border-bottom-color:var(--line);
}

/* champ à compléter — à retirer une fois renseigné */
.todo{
  font-family:var(--ff-mono);font-size:.82em;letter-spacing:.03em;
  color:var(--amber);background:rgba(223,168,76,.09);
  border:1px dashed rgba(223,168,76,.45);border-radius:5px;padding:.08rem .4rem;
}

/* ============ PIED DE PAGE ============ */
.foot{border-top:1px solid var(--line-soft);background:var(--ink-2);padding-block:clamp(34px,4.5vw,56px) 1.6rem}
.foot-top{display:grid;gap:2rem;grid-template-columns:1fr;margin-bottom:2rem}
@media(min-width:760px){.foot-top{grid-template-columns:1.6fr 1fr 1fr}}
.foot-brand p{color:var(--fog-dim);font-size:var(--fs-sm);max-width:42ch;margin-top:.9rem}
.foot-col h4{
  font-family:var(--ff-mono);font-size:var(--fs-xs);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--deep);margin-bottom:1rem;
}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.foot-col a{font-size:var(--fs-sm);color:var(--fog);transition:color .18s ease}
.foot-col a:hover{color:var(--cyan)}
.foot-bottom{
  border-top:1px solid var(--line-soft);padding-top:1.4rem;
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;align-items:center;
}
.foot-bottom small{
  font-family:var(--ff-mono);font-size:10.5px;color:var(--fog-dim);
  letter-spacing:.04em;line-height:1.7;
}