/* =========================================================
   PIKA WONKA · pages légales (cgv.html, confidentialite.html)
   Chargée après styles.css : reprend ses variables, avec une
   valeur de repli au cas où l'une d'elles changerait de nom.
   ========================================================= */

.legal-page{background:var(--white,#fff);color:var(--ink,#111112)}
.legal-wrap{width:min(100% - 40px,1120px);margin-inline:auto}

/* ---------- en-tête : le wordmark ramène à l'accueil ---------- */
.legal-head{border-bottom:1px solid var(--line,rgba(17,17,18,.09))}
.legal-head__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.legal-brand{font-family:var(--font-display,'Fraunces',Georgia,serif);font-weight:900;font-size:28px;line-height:1;
  letter-spacing:-.03em;text-decoration:none}
.legal-brand__pika{color:var(--rouge,#C32C26)}
.legal-brand__wonka{color:var(--ink,#111112);font-style:italic}
.legal-head__back{font-size:15px;color:var(--gray,#5d5d64);text-decoration:underline;
  text-decoration-color:var(--line-2,rgba(17,17,18,.18));text-underline-offset:4px;transition:color .2s}
.legal-head__back:hover{color:var(--rouge,#C32C26)}

/* ---------- mise en page : sommaire collant à gauche, texte à droite ---------- */
.legal{padding:72px 0 120px}
.legal__grid{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:72px;align-items:start}
/* mesure : ~70 caractères par ligne (Instrument Sans a des chiffres larges, d'où des em plutôt que des ch) */
.legal__intro{grid-column:2;grid-row:1;max-width:44em;margin-bottom:56px}
.legal__intro h1{font-family:var(--font-display,'Fraunces',Georgia,serif);font-weight:600;
  font-size:clamp(36px,5vw,60px);line-height:1.02;letter-spacing:-.035em;color:var(--ink,#111112);text-wrap:balance}
.legal__version{margin-top:18px;font-size:14px;color:var(--ink-faint,#8e8e95)}
.legal__lead{margin-top:22px;max-width:36em;font-size:18px;line-height:1.65;color:var(--ink-2,#2c2c30);text-wrap:pretty}
.legal__lead+.legal__lead{margin-top:14px}

.legal-toc{grid-column:1;grid-row:1 / span 2;position:sticky;top:32px;font-size:14px;line-height:1.4}
.legal-toc ol{list-style:none;counter-reset:toc;border-left:1px solid var(--line,rgba(17,17,18,.09))}
.legal-toc li{counter-increment:toc}
.legal-toc a{display:flex;gap:8px;padding:6px 0 6px 16px;margin-left:-1px;border-left:1px solid transparent;
  color:var(--gray,#5d5d64);text-decoration:none;transition:color .2s,border-color .2s}
.legal-toc a::before{content:counter(toc) ".";min-width:1.7em;color:var(--ink-faint,#8e8e95);font-variant-numeric:tabular-nums}
.legal-toc a:hover{color:var(--ink,#111112);border-left-color:var(--rouge,#C32C26)}

/* ---------- le texte ---------- */
.legal__body{grid-column:2;grid-row:2;max-width:37em;font-size:16.5px;line-height:1.72;color:var(--ink-2,#2c2c30)}
.legal__body section{scroll-margin-top:24px}
.legal__body section+section{margin-top:48px;padding-top:44px;border-top:1px solid var(--line,rgba(17,17,18,.09))}
.legal__body h2{font-family:var(--font-display,'Fraunces',Georgia,serif);font-weight:600;font-size:clamp(24px,2.6vw,30px);
  line-height:1.15;letter-spacing:-.025em;color:var(--ink,#111112);text-wrap:balance}
.legal__body h3{font-family:var(--font-body,'Instrument Sans',system-ui,sans-serif);font-weight:600;font-size:17px;
  line-height:1.35;color:var(--ink,#111112);margin-top:28px}
.legal__body p,.legal__body ul,.legal__body ol,.legal__body dl{margin-top:14px}
.legal__body h2+p,.legal__body h2+ul,.legal__body h2+ol,.legal__body h2+dl{margin-top:16px}
.legal__body h3+p,.legal__body h3+ul{margin-top:6px}
.legal__body p{text-wrap:pretty}
.legal__body ul,.legal__body ol{padding-left:1.25em}
.legal__body li{margin-top:8px;padding-left:4px}
.legal__body ul li::marker{color:var(--ink-faint,#8e8e95)}
.legal__body ol li::marker{color:var(--rouge,#C32C26);font-weight:600}
.legal__body strong{color:var(--ink,#111112);font-weight:600}
.legal__body a{color:var(--rouge,#C32C26);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal__body a:hover{color:var(--rouge-d,#a5231e)}

/* fiche d'identité de l'exploitant */
.legal-id{border-top:1px solid var(--line,rgba(17,17,18,.09))}
.legal-id>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 0;
  border-bottom:1px solid var(--line,rgba(17,17,18,.09))}
.legal-id dt{font-weight:600;color:var(--ink,#111112);font-size:15px}
.legal-id dd{margin:0}

/* ---------- pied de page ---------- */
.legal-foot{border-top:1px solid var(--line,rgba(17,17,18,.09));padding:40px 0 48px;font-size:14px;color:var(--gray,#5d5d64)}
.legal-foot__inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px 32px}
.legal-foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.legal-foot a{color:var(--ink,#111112);text-decoration:none;transition:color .2s}
.legal-foot a:hover,.legal-foot a[aria-current="page"]{color:var(--rouge,#C32C26)}
.legal-foot__small{flex-basis:100%;font-size:12.5px;color:var(--ink-faint,#8e8e95)}

/* ---------- tablette et mobile : une seule colonne ---------- */
@media (max-width:960px){
  .legal__grid{grid-template-columns:minmax(0,1fr)}
  .legal__intro,.legal__body{grid-column:1;grid-row:auto}
  .legal__intro{margin-bottom:36px}
  .legal-toc{grid-column:1;grid-row:auto;position:static;margin-bottom:48px;padding:14px 0;
    border-block:1px solid var(--line,rgba(17,17,18,.09))}
  .legal-toc ol{border-left:0;columns:2;column-gap:32px}
  .legal-toc li{break-inside:avoid}
  .legal-toc a{padding-left:0;margin-left:0;border-left:0}
}
@media (max-width:600px){
  .legal{padding:44px 0 88px}
  .legal-head__inner{min-height:64px}
  .legal-brand{font-size:24px}
  .legal__lead{font-size:17px}
  .legal__body{font-size:16px}
  .legal-toc ol{columns:1}
  .legal-id>div{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* ---------- impression : le texte seul ---------- */
@media print{
  .legal-head__back,.legal-toc,.legal-foot nav{display:none}
  .legal{padding:0}
  .legal__grid{display:block}
  .legal__body section+section{break-inside:avoid-page}
  .legal__body a{color:inherit}
}