/* ============================================================
   OTTOM4T3 — pages légales.
   Le texte vient mot pour mot du tunnel existant : seul l'habillage
   change. On garde donc les classes d'origine (.zone, .fiche, .maj)
   et on les restyle, plutôt que de retoucher le contenu.
   ============================================================ */

.legal-page{
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(26,32,42,.55) 0%, transparent 60%),
    var(--ink-900);
  min-height:100vh;
}

.chrome--solid{
  position:sticky; top:0;
  background:rgba(8,9,10,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.chrome__nav{display:flex; align-items:center; gap:clamp(14px,1.8vw,28px)}
.chrome__link{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2);
  transition:color var(--t-fast) var(--ease);
}
.chrome__link:hover{color:var(--fg)}

/* ---------- mise en page ---------- */
.legal{
  max-width:74ch; margin:0 auto;
  padding:clamp(40px,7vh,88px) var(--gut) clamp(60px,9vh,110px);
}
.fil{
  display:flex; gap:10px; align-items:center; margin-bottom:clamp(28px,4vh,52px);
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3);
}
.fil a{color:var(--fg-2)}
.fil a:hover{color:var(--fg)}

.legal h1{
  font-size:clamp(28px,4.4vw,52px); font-weight:800; line-height:1.06;
  letter-spacing:-.02em;
}
.legal .maj{
  margin-top:14px; padding-bottom:clamp(24px,3.6vh,44px);
  border-bottom:1px solid var(--line);
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3);
}
.legal h2{
  margin-top:clamp(34px,5vh,58px); margin-bottom:14px;
  font-size:clamp(17px,2vw,25px); font-weight:700; letter-spacing:-.008em; line-height:1.2;
}
.legal h3{margin-top:26px; margin-bottom:10px; font-size:15px; font-weight:700}
.legal p{margin-top:14px; color:var(--fg-2); font-size:15px; line-height:1.78}
.legal p strong, .legal strong, .legal b{color:var(--fg); font-weight:700}
.legal a{color:var(--fg); border-bottom:1px solid var(--line-strong)}
.legal a:hover{border-color:var(--fg)}
.legal ul, .legal ol{margin-top:14px; display:flex; flex-direction:column; gap:10px}
.legal li{
  position:relative; padding-left:20px; color:var(--fg-2);
  font-size:15px; line-height:1.7;
}
.legal li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:9px; height:1px; background:var(--alu-400);
}

/* ---------- fiche d'identité (mentions légales) ---------- */
.legal .fiche{
  margin-top:18px; display:grid; gap:1px;
  background:rgba(190,205,225,.1);
  border:1px solid var(--line);
}
.legal .fiche > div{
  display:grid; grid-template-columns:minmax(120px,32%) 1fr; gap:16px;
  background:var(--ink-900); padding:13px clamp(14px,2vw,20px);
  align-items:baseline;
}
.legal .fiche > div > span:first-child{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3);
}
.legal .fiche > div > span:last-child{font-size:14px; color:var(--fg-2)}

/* ---------- tableaux (politique de confidentialité) ---------- */
.legal table{
  width:100%; margin-top:18px; border-collapse:collapse;
  border:1px solid var(--line); font-size:13.5px;
}
.legal th, .legal td{
  padding:12px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); color:var(--fg-2); line-height:1.6;
}
.legal th{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3);
  background:rgba(255,255,255,.02);
}
.legal tr:last-child td{border-bottom:0}

/* ---------- pied de page ---------- */
.legal__foot{
  max-width:74ch; margin:0 auto;
  padding:clamp(24px,4vh,40px) var(--gut) clamp(40px,6vh,64px);
  border-top:1px solid var(--line);
  display:grid; gap:16px;
}
.legal__foot nav{display:flex; flex-wrap:wrap; gap:clamp(14px,2.4vw,28px)}
.legal__foot a{color:var(--fg-2); font-size:13px}
.legal__foot a:hover{color:var(--fg)}
.legal__foot p{color:var(--fg-3); font-size:11.5px}

@media (max-width:640px){
  .chrome__link{display:none}
  .legal .fiche > div{grid-template-columns:1fr; gap:5px}
  .legal table{font-size:12.5px}
  .legal th, .legal td{padding:10px}
}