/* ============================================================
   Agenova — feuille de style partagée des pages légales
   Reprend les tokens, la typographie et les surfaces d'index.html.
   Mode lecture : la structure sert la compréhension avant l'expression.
   ============================================================ */

:root{
  --navy:#0a0e1f;
  --paper:#f6f7fb;
  --white:#ffffff;
  --line:#e3e6f0;
  --line-navy:rgba(255,255,255,.13);
  --ink:#0a0e1f;
  --body:#2b3049;           /* 12,6:1 sur blanc — le corps d'un document se lit plus dense */
  --muted:#5b6178;          /* 6,13:1 sur blanc */
  --muted-navy:#b9bed6;     /* 10,43:1 sur --navy */
  --accent:#5b5bf7;
  --accent-deep:#4a4ae0;
  --shadow-sm:0 1px 2px rgba(10,14,31,.05), 0 2px 8px -3px rgba(10,14,31,.10);
  --shadow-lg:0 8px 16px -10px rgba(10,14,31,.18), 0 28px 56px -28px rgba(10,14,31,.42);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; color-scheme:light; -webkit-text-size-adjust:100%;}
[id]{ scroll-margin-top:88px;} /* le header collant masquerait sinon le titre visé */
body{
  font-family:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:16px; line-height:1.65; color:var(--ink); background:var(--white);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{ font-family:'Sora','Manrope',sans-serif; font-weight:800; line-height:1.15; letter-spacing:-.025em;}
a{ color:inherit; text-decoration:none;}
svg{ display:block; flex:none;}

/* ---------- SURFACES DU NAVIGATEUR ---------- */
::selection{ background:var(--accent); color:#fff;}
header.main ::selection, .page-head ::selection, footer ::selection{ background:#7de8d5; color:var(--navy);}
:root{ accent-color:var(--accent); caret-color:var(--accent);}
html{ scrollbar-width:thin; scrollbar-color:#c3c8dc var(--paper);}
::-webkit-scrollbar{ width:12px; height:12px;}
::-webkit-scrollbar-track{ background:var(--paper);}
::-webkit-scrollbar-thumb{ background:#c3c8dc; border-radius:99px; border:3px solid var(--paper);}
::-webkit-scrollbar-thumb:hover{ background:#a3aac6;}

/* Anneau de focus : deux teintes, aucune ne tient 3:1 sur les deux fonds. */
:root{ --focus-ring:var(--accent);}
header.main, .page-head, footer{ --focus-ring:#9cc4ff;}
:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:5px;}

.container{ max-width:1120px; margin:0 auto; padding:0 24px;}

/* ---------- BOUTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:11px 20px; border-radius:12px;
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer;
  transition:background-color .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-sm);}
.btn-primary:hover{ background:var(--accent-deep); transform:translateY(-1px); box-shadow:var(--shadow-lg);}
.btn-primary:active{ transform:none;}
.lbl-short{ display:none;}
@media (prefers-reduced-motion: reduce){ .btn{ transition:none;} .btn-primary:hover{ transform:none;} }

/* ---------- EN-TÊTE ---------- */
header.main{
  position:sticky; top:0; z-index:50;
  background:var(--navy); border-bottom:1px solid var(--line-navy);
}
header.main .container{ display:flex; align-items:center; gap:20px; height:72px;}
.logo{
  display:inline-flex; align-items:center; gap:11px; margin-right:auto;
  font-family:'Sora',sans-serif; font-weight:800; font-size:20px; letter-spacing:-.025em; color:#fff;
}
.logo .mark{ width:32px; height:32px; border-radius:9px; background:var(--accent); display:grid; place-items:center;}
header nav{ display:flex; gap:4px;}
header nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 12px;
  font-size:15px; font-weight:600; color:var(--muted-navy); border-radius:8px;
  transition:color .15s, background-color .15s;
}
header nav a:hover{ color:#fff; background:rgba(255,255,255,.06);}

/* ---------- BANNIÈRE DE PAGE ---------- */
.page-head{
  position:relative; overflow:hidden; color:#fff; background:var(--navy);
  padding:clamp(56px, 7vw, 88px) 0 clamp(48px, 6vw, 72px);
}
/* Une seule source de lumière : le fond reste une surface, pas une texture. */
.page-head::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(720px 460px at 82% -20%, rgba(91,91,247,.40), transparent 62%);
}
.page-head .container{ position:relative;}
.page-head h1{ font-size:clamp(2rem, 1.4rem + 2.2vw, 3rem); max-width:18ch;}
.page-head .updated{ margin-top:14px; font-size:14.5px; color:var(--muted-navy);}

/* ---------- CORPS DU DOCUMENT ----------
   Un document, pas une carte : le texte pose directement sur la page,
   à une mesure lisible. Rien n'est imbriqué dans rien. */
.legal-body{ background:var(--white); padding:clamp(48px, 6vw, 76px) 0 clamp(72px, 9vw, 104px);}
.legal-body .container{ max-width:788px;} /* ~70 caractères par ligne */
article > p.intro{ font-size:17.5px; line-height:1.6; color:var(--muted); margin-bottom:8px;}
article h2{
  font-size:clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight:800;
  margin:52px 0 16px; padding-top:28px; border-top:1px solid var(--line);
}
article h2:first-of-type{ margin-top:34px;}
article h3{ font-size:17px; font-weight:700; margin:30px 0 10px;}
article p{ margin-bottom:15px; color:var(--body);}
article ul, article ol{ margin:0 0 18px 22px; color:var(--body);}
article li{ margin-bottom:9px;}
article a:not(.btn){
  color:var(--accent); font-weight:600;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:rgba(91,91,247,.4);
}
article a:not(.btn):hover{ text-decoration-color:var(--accent);}
article strong{ font-weight:700; color:var(--ink);}

.identity{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:22px 24px; margin:18px 0 24px; font-size:15px; line-height:1.85;
}
.identity dt{ display:none;}

/* Encadré : une surface teintée et un filet complet — pas un liseré coloré. */
.callout{
  background:rgba(91,91,247,.055); border:1px solid rgba(91,91,247,.22); border-radius:14px;
  padding:18px 22px; margin:22px 0; font-size:15px;
}
.callout p:last-child{ margin-bottom:0;}

.table-wrap{ overflow-x:auto; margin:20px 0 26px; border:1px solid var(--line); border-radius:14px;}
table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px; font-variant-numeric:tabular-nums;}
thead th{
  background:var(--paper); text-align:left; font-weight:700; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  padding:13px 18px; border-bottom:1px solid var(--line);
}
tbody td{ padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--body);}
tbody tr:last-child td{ border-bottom:none;}

.toc{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:24px 26px; margin-bottom:10px;}
.toc h2{ all:unset; display:block; font-family:'Manrope',sans-serif; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin-bottom:14px;}
.toc ol{ margin:0 0 0 20px; font-size:14.5px; columns:2; column-gap:34px; color:var(--body);}
.toc li{ margin-bottom:0; break-inside:avoid;}
/* Le rembourrage remplace la marge : même rythme, cible cliquable de 30 px. */
article .toc a{ color:var(--body); display:inline-block; padding:5px 0; text-decoration:none; font-weight:600;}
.toc a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px;}

/* ---------- PIED DE PAGE ---------- */
footer{ background:var(--navy); color:var(--muted-navy); padding:56px 0 40px; border-top:1px solid var(--line-navy);}
.foot{ display:flex; flex-wrap:wrap; gap:32px 48px; justify-content:space-between; align-items:flex-start;}
.foot p{ font-size:14.5px; max-width:36ch; margin-top:16px;}
.foot nav{ display:flex; flex-wrap:wrap; gap:8px 28px;}
.foot nav a{ display:inline-flex; align-items:center; min-height:44px; font-size:14.5px; font-weight:600; overflow-wrap:anywhere;}
.foot nav a:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px;}
.foot-bottom{ margin-top:40px; padding-top:24px; border-top:1px solid var(--line-navy); font-size:13.5px;}

/* ---------- ADAPTATION ---------- */
@media (max-width: 620px){
  /* Sous cette largeur, le CTA prime sur les ancres. */
  header nav{ display:none;}
  header.main .container{ gap:12px;}
  .logo{ font-size:18px;}
  .toc ol{ columns:1;}
  article .toc a{ padding:11px 0;}
  .foot{ gap:24px;}
}
@media (max-width: 620px){
  /* Libellé court : le nom de marque et le CTA tiennent tous deux sur la ligne. */
  header .lbl-long{ display:none;}
  header .lbl-short{ display:inline;}
}
@media (max-width: 344px){
  .btn{ font-size:14px; padding:11px 13px;}
  .logo span:last-child{ display:none;} /* sous cette largeur, le sigle cède la place au CTA */
}