/* ==========================================================================
   WebHopper · legal.css
   Gabarit commun aux 3 pages legales : CGV, CGU, politique de confidentialite.
   Depend de tokens.css et base.css.
   Priorite absolue : la LISIBILITE. Mesure courte, interlignage large, hierarchie
   nette. Un texte juridique n'est jamais lu par plaisir, autant ne pas l'aggraver.
   ========================================================================== */

/* ---- En-tete ---- */
.legal-hero{padding:0 0 clamp(2rem,4vw,3rem)}
.legal-hero .sec-marker{margin-top:1.6rem}
.legal-hero h1{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,4.6vw,3.4rem);
  letter-spacing:-.03em;line-height:1.06;color:var(--charbon);max-width:18ch;margin:0 0 1.4rem}
.legal-lead{font-size:clamp(1.02rem,1.35vw,1.15rem);color:var(--ink);max-width:60ch;line-height:1.7}

/* ---- Grille sommaire + texte ---- */
.legal-main{padding-bottom:clamp(3.5rem,7vw,6rem);border-top:1px solid var(--border-clair)}
.legal-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);padding-top:clamp(2rem,4vw,3rem)}
@media(min-width:980px){.legal-grid{grid-template-columns:.3fr .7fr;align-items:start}}

/* ---- Sommaire ---- */
.legal-toc{background:var(--blanc);border:1px solid var(--border-clair);border-radius:var(--r-card);
  padding:clamp(1.2rem,2.4vw,1.6rem)}
@media(min-width:980px){.legal-toc{position:sticky;top:96px;max-height:calc(100vh - 130px);overflow-y:auto}}
.legal-toc h2{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--pierre);margin-bottom:1.1rem;line-height:1}
.legal-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;display:grid;gap:.15rem}
.legal-toc li{counter-increment:toc}
.legal-toc a{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:baseline;
  padding:.5rem .4rem;border-radius:var(--r-tag);color:var(--charbon);font-size:.92rem;
  line-height:1.4;transition:background-color .2s ease, color .2s ease}
.legal-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-mono);
  font-size:10px;color:var(--ambre);letter-spacing:.5px}
.legal-toc a:hover{background:var(--ambre-pale)}

/* ---- Le texte juridique ---- */
.legal-body{max-width:72ch;color:var(--ink);font-size:1.02rem;line-height:1.8}
.legal-body h2{font-family:var(--font-display);font-weight:900;font-size:clamp(1.35rem,2.4vw,1.85rem);
  letter-spacing:-.025em;line-height:1.15;color:var(--charbon);
  margin:clamp(2.6rem,5vw,3.6rem) 0 1rem;padding-top:1.6rem;border-top:1px solid var(--border-clair);
  scroll-margin-top:100px}
.legal-body > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-body h3{font-family:var(--font-display);font-weight:800;font-size:clamp(1.08rem,1.7vw,1.25rem);
  letter-spacing:-.015em;line-height:1.25;color:var(--charbon);margin:2rem 0 .7rem;scroll-margin-top:100px}
.legal-body h4{font-family:var(--font-body);font-weight:700;font-size:1.02rem;color:var(--charbon);
  margin:1.6rem 0 .6rem}
.legal-body p{margin:0 0 1.15rem}
.legal-body strong{color:var(--charbon);font-weight:700}
.legal-body a{color:var(--charbon);border-bottom:1.5px solid var(--ambre);
  transition:background-color .2s ease}
.legal-body a:hover{background:var(--ambre-pale)}
.legal-body ul,.legal-body ol{margin:0 0 1.3rem;padding:0;display:grid;gap:.6rem}
.legal-body ul{list-style:none}
.legal-body ul li{position:relative;padding-left:1.5rem}
/* puce carree ambre : rappelle les filets du reste du site */
.legal-body ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;
  background:var(--ambre)}
.legal-body ol{list-style:decimal;padding-left:1.4rem}
.legal-body ol li{padding-left:.3rem}
.legal-body ol li::marker{color:var(--ambre);font-family:var(--font-mono);font-size:.85em}
.legal-body blockquote{margin:1.6rem 0;padding:1.1rem 1.3rem;background:var(--ambre-pale);
  border-left:2px solid var(--ambre);border-radius:0 var(--r-tag) var(--r-tag) 0}
.legal-body blockquote p:last-child{margin-bottom:0}
.legal-body table{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:.95rem}
.legal-body th,.legal-body td{text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--border-clair)}
.legal-body th{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;color:var(--pierre)}

/* Icone en tete d'un intitule d'encart. Ces trois encarts arrivaient du WordPress
   avec un emoji (🔒 🌐 ✓), interdit par la charte : les icones sont des Lucide en
   trace, jamais des emoji. Alignement optique sur la ligne de base du texte. */
.lbl-ico{width:16px;height:16px;display:inline-block;vertical-align:-2px;
  margin-right:.45rem;color:var(--ambre)}