/* ===================================================
   landing-base.css — règles factorisées partagées
   entre plusieurs pages de direkol.fr
   =================================================== */

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
  color:var(--g);background:#fff;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;font:inherit}
ul{list-style:none}

/* ===== LAYOUT ===== */
/* .container : utilisé dans index.html et 404.html (max-width 1120px) */
.container{max-width:1120px;margin:0 auto;padding:0 24px}

/* .sr-only : utilisé dans index.html */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ===== FOOTER (partagé : index.html + 404.html) ===== */
.footer{background:var(--g);color:var(--g3);padding:36px 0;font-size:.82rem}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{color:var(--g3);transition:color .2s}
.footer-links a:hover{color:#fff}
.footer-brand{display:flex;align-items:center;gap:8px}
.footer-brand svg{width:22px;height:22px;flex-shrink:0}
.footer-brand .wm{font-family:'Inter Tight',system-ui,sans-serif;font-weight:800;font-size:.95rem;letter-spacing:-0.02em;line-height:1}
.footer-brand .dir{color:var(--vl)}
@media(max-width:600px){
  .footer-inner{flex-direction:column;text-align:center}
}

/* ===== LEGAL PAGES ===== */
/* Partagé par les cinq pages légales : cgv.html, cgv-2026-05-12.html (archive),
   conditions-utilisation.html, confidentialite.html, mentions-legales.html.
   Chacune portait auparavant sa propre copie de ces règles dans un <style>
   local ; elles avaient commencé à diverger (h3 défini à deux poids
   différents, une marge de liste présente sur quatre pages et absente sur la
   cinquième). Ce qui reste local, c'est ce qu'UNE page utilise seule : les
   tableaux de confidentialite.html, et la marge entre deux paragraphes d'un
   même encadré dans cgv.html. */
.legal{max-width:720px;margin:0 auto;padding:60px 24px 80px}
/* La typographie du corps est posée ici et non sur body : index.html et
   404.html partagent cette feuille et gardent la pile système. Le body d'une
   page légale ne contient que ce conteneur, l'héritage rend donc exactement
   ce que rendait la règle body qu'on remplace. */
.legal{font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;line-height:1.7}
.legal a{color:var(--v);text-decoration:underline}
.legal h1{font-size:1.8rem;font-weight:800;margin-bottom:8px}
.legal .subtitle{font-size:.9rem;color:#6b7280;margin-bottom:40px}
.legal h2{font-size:1.15rem;font-weight:700;margin-top:36px;margin-bottom:12px;color:var(--v)}
.legal h3{font-size:1rem;font-weight:600;margin-top:24px;margin-bottom:8px}
.legal p,.legal li{font-size:.92rem;color:#4b5563;margin-bottom:10px}
.legal ul,.legal ol{padding-left:20px;margin-bottom:14px}
.legal ul{list-style:disc}
.legal ol{list-style:decimal}
/* Encadré violet. Doit rester APRÈS « .legal p » : les deux sélecteurs ont la
   même spécificité, c'est l'ordre qui décide, et c'est cette marge nulle qui
   doit gagner à l'intérieur d'un encadré. */
.highlight{background:var(--v-soft);border-left:3px solid var(--v);padding:14px 18px;border-radius:8px;margin:16px 0}
.highlight p{margin-bottom:0}
.back{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:600;color:var(--v);margin-bottom:32px}
.back:hover{text-decoration:underline}