/* ============================================================
   GROUPE ZULU — Styles des PAGES LEGALES
   (Conditions d'utilisation, Mentions legales, Politique de confidentialite.)
   Repris a l'identique de zulu_conditions_utilisation.html, MAIS sans les styles
   de nav / footer / curseur : ceux-la vivent deja dans style.css (le theme).
   Ce fichier n'est charge que sur les pages legales (voir functions.php).
   ============================================================ */

/* Le defilement doux ameliore la navigation via le sommaire (ancres #). */
html{scroll-behavior:smooth}

/* Liens dans le corps legal (reprend la couleur teal du site) */
.legal-body a{color:var(--teal)}

/* ============ HERO ============ */
.legal-hero{position:relative;background:var(--marine);overflow:hidden;padding:calc(var(--nav-h) + 96px) 64px 96px;border-radius:0 0 var(--r-panel) var(--r-panel)}
.legal-hero .blob{position:absolute;border-radius:50%;pointer-events:none}
.legal-hero .blob-a{width:600px;height:600px;top:-260px;right:-220px;background:radial-gradient(circle,rgba(0,119,159,.85) 0%,transparent 70%)}
.legal-hero .blob-b{width:460px;height:460px;bottom:-260px;left:-160px;background:radial-gradient(circle,rgba(0,162,217,.4) 0%,transparent 70%)}
.legal-hero-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto}
.legal-eyebrow{font-family:var(--ft);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);margin-bottom:16px}
.legal-title{font-family:var(--fh);font-size:clamp(40px,5.5vw,80px);font-weight:900;letter-spacing:.01em;text-transform:uppercase;color:var(--white);line-height:.98}
.legal-updated{font-family:var(--ft);font-size:14px;color:rgba(255,255,255,.6);margin-top:22px}

/* ============ MISE EN PAGE (sommaire + corps) ============ */
.legal-wrap{max-width:1100px;margin:0 auto;padding:72px 64px 40px;display:grid;grid-template-columns:240px 1fr;gap:64px;align-items:start}
.legal-toc{position:sticky;top:calc(var(--nav-h) + 32px)}
.legal-toc-title{font-family:var(--ft);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.legal-toc ol{list-style:none;counter-reset:toc}
.legal-toc li{counter-increment:toc;margin-bottom:4px}
.legal-toc a{position:relative;font-family:var(--ft);font-size:13.5px;color:var(--ink-soft);display:flex;gap:10px;padding:7px 12px;border-radius:10px;line-height:1.4;transition:background .18s,color .18s}
.legal-toc a::before{content:counter(toc,decimal-leading-zero);font-weight:700;color:var(--cyan);font-size:11px;padding-top:2px}
.legal-toc a:hover{background:var(--mist);color:var(--marine)}
.legal-toc a.active{background:var(--mist);color:var(--marine);font-weight:600}
.legal-toc a.active::after{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 2px 2px 0;background:var(--cyan)}

/* ============ CORPS ============ */
.legal-body{max-width:720px}
.legal-intro{font-family:var(--ft);font-size:16px;color:var(--ink-soft);line-height:1.8;margin-bottom:48px;padding-bottom:40px;border-bottom:1px solid rgba(0,57,75,.1)}
.legal-section{margin-bottom:48px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.legal-section h2{font-family:var(--fh);font-size:26px;font-weight:900;letter-spacing:.02em;text-transform:uppercase;color:var(--marine);line-height:1.05;margin-bottom:8px;display:flex;align-items:baseline;gap:14px}
.legal-section h2 .num{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--cyan);letter-spacing:.08em}
.legal-section h3{font-family:var(--fh);font-size:16px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--teal);margin:24px 0 8px}
.legal-section p{font-family:var(--ft);font-size:15px;color:var(--ink-soft);line-height:1.8;margin-bottom:14px}
.legal-section ul{list-style:none;margin:8px 0 16px}
.legal-section li{font-family:var(--ft);font-size:15px;color:var(--ink-soft);line-height:1.75;padding-left:22px;position:relative;margin-bottom:8px}
.legal-section li::before{content:'';position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.legal-section a{font-weight:600;border-bottom:1px solid rgba(0,119,159,.3);transition:border-color .2s}
.legal-section a:hover{border-color:var(--teal)}
.legal-card{background:var(--mist);border-radius:var(--r-card);padding:28px 32px;margin:8px 0 4px}
.legal-card dl{display:grid;grid-template-columns:auto 1fr;gap:8px 24px}
.legal-card dt{font-family:var(--ft);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);padding-top:2px}
.legal-card dd{font-family:var(--ft);font-size:15px;color:var(--marine);line-height:1.6}
.ph{background:rgba(236,97,37,.12);color:var(--dorange);font-weight:600;border-radius:6px;padding:1px 8px;font-size:.92em}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .legal-hero{padding:calc(var(--nav-h) + 64px) 28px 64px;border-radius:0 0 32px 32px}
  .legal-wrap{grid-template-columns:1fr;gap:40px;padding:48px 28px 24px}
  .legal-toc{position:static}
}
@media (max-width:720px){
  .legal-hero{padding-left:20px;padding-right:20px}
  .legal-wrap{padding-left:20px;padding-right:20px}
}
@media (max-width:560px){
  /* Les fiches (raison sociale, coordonnees...) passent sur une seule colonne */
  .legal-card dl{grid-template-columns:1fr;gap:2px 0}
  .legal-card dt{padding-top:12px}
  .legal-card dt:first-child{padding-top:0}
}
@media (max-width:480px){
  .legal-card{padding-left:clamp(20px,calc(7.5vw - 4px),32px);padding-right:clamp(20px,calc(7.5vw - 4px),32px)}
}
@media (max-width:400px){
  /* Titre long (ex. « Confidentialite ») : reduit pour tenir en largeur */
  .legal-title{font-size:clamp(24px,calc(16.25vw - 25px),40px)}
}