/* ==========================================================================
   HT VTC 83, style partagé des pages légales (mentions, confidentialité)
   Reprend la charte du site : noir chaud + or, Outfit / Space Grotesk.
   ========================================================================== */
:root{
  --bg:#14130E; --surface:#1E1C15; --surface-2:#18160F;
  --ink:#FAF8F4; --muted:rgba(250,248,244,.60); --muted-2:rgba(250,248,244,.45);
  --line:rgba(250,248,244,.09); --line-2:rgba(250,248,244,.15);
  --gold:#C9A24B; --gold-hi:#E0BE6A; --gold-soft:rgba(201,162,75,.14);
  --container:920px; --gutter:clamp(20px,5vw,48px); --pill:100px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:'Outfit',system-ui,-apple-system,sans-serif; font-weight:300;
  line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:var(--gold); text-decoration:none; transition:color .25s var(--ease); }
a:hover{ color:var(--gold-hi); }
::selection{ background:var(--gold); color:#16150F; }

.container{ max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }

/* ---- Header sticky simple ---- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(20,19,14,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; max-width:1280px; margin:0 auto; padding:14px var(--gutter); }
.brand{ display:flex; align-items:center; gap:14px; }
.brand img{ width:56px; height:56px; object-fit:contain; }
.brand-word{ display:flex; align-items:baseline; gap:7px; font-family:'Space Grotesk',sans-serif; font-size:22px; color:var(--ink); }
.brand-word .ht{ font-weight:700; letter-spacing:1px; }
.brand-word .vtc{ font-weight:500; letter-spacing:3px; }
.brand-word .num{ font-weight:700; letter-spacing:1px; color:var(--gold); }
.brand-word .sep{ width:5px; height:5px; background:var(--gold); border-radius:50%; align-self:center; }
.back-link{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--muted); }
.back-link:hover{ color:var(--ink); }

/* ---- Contenu légal ---- */
.legal{ padding-block:clamp(48px,8vw,88px); }
.legal .eyebrow{ font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.legal h1{ font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.02em; line-height:1.08; font-size:clamp(32px,6vw,52px); margin:12px 0 10px; }
.legal .updated{ font-size:14px; color:var(--muted-2); margin-bottom:clamp(32px,5vw,48px); }

.legal section{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:clamp(24px,3.5vw,36px); margin-bottom:18px;
}
.legal h2{ font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:-.01em; font-size:clamp(20px,3vw,26px); color:var(--ink); margin-bottom:14px; }
.legal h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; color:var(--ink); margin:18px 0 8px; }
.legal p{ font-size:15.5px; color:var(--muted); margin-bottom:12px; }
.legal p:last-child{ margin-bottom:0; }
.legal ul{ list-style:none; margin:6px 0 12px; }
.legal li{ font-size:15.5px; color:var(--muted); padding:5px 0 5px 22px; position:relative; }
.legal li::before{ content:""; position:absolute; left:2px; top:14px; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.legal strong{ color:var(--ink); font-weight:600; }
.legal a{ font-weight:500; }

/* Champ à compléter par l'éditeur, bien visible */
.todo{
  display:inline-block; color:var(--gold-hi); font-weight:600;
  background:var(--gold-soft); border:1px dashed rgba(201,162,75,.55);
  border-radius:6px; padding:1px 8px; font-size:.92em;
}

/* Encadré d'information */
.notice{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:16px;
  padding:20px 24px; margin-bottom:22px;
}
.notice svg{ flex:none; margin-top:2px; }
.notice p{ font-size:14.5px; color:var(--muted); margin:0; }

/* ---- Footer (identique au site) ---- */
.site-footer{ border-top:1px solid var(--line); background:var(--surface-2); }
.footer-inner{
  max-width:1280px; margin:0 auto; padding:clamp(40px,6vw,60px) var(--gutter);
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px;
}
.footer-col{ display:flex; flex-direction:column; align-items:flex-start; }
.footer-brand{ display:flex; align-items:center; gap:12px; font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:700; color:var(--ink); }
.footer-brand img{ width:44px; height:44px; object-fit:contain; }
.footer-note{ font-size:14px; color:var(--muted); margin-top:14px; max-width:320px; }
.footer-h{ font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px; }
.footer-link{ font-size:14px; font-weight:500; color:var(--muted); padding:5px 0; }
.footer-link:hover{ color:var(--gold-hi); }
.footer-bottom{ border-top:1px solid var(--line); }
.footer-bottom p{ max-width:1280px; margin:0 auto; padding:22px var(--gutter); text-align:center; font-size:13px; color:var(--muted-2); }

@media (max-width:760px){
  .footer-inner{ grid-template-columns:1fr; gap:28px; }
  .brand-word{ font-size:19px; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }