/* ═══════════════════════════════════════════════════════════════
   ATELIER BENJAMIN RIADO — Pages légales (mentions, CGV)
   Feuille de style autonome : mêmes constantes visuelles que le
   site (styles.css), sans le reset plein-écran (overflow:hidden)
   pensé pour la page d'accueil à défilement.
═════════════════════════════════════════════════════════════════ */

:root {
  --c-petrol:   #2f5f69;
  --c-petrol-d: #163f47;
  --c-cream:    #f1e9da;
  --c-paper:    #f7f1e5;
  --c-porcel:   #faf6ee;
  --c-ink:      #1d2b2f;
  --c-accent:   #b4c7b9;
  --c-accent-d: #93ad99;
  --photo-radius: 18px;
  --ff-display: 'Unica One', 'Saira Condensed', 'Barlow Condensed', sans-serif;
  --ff-body:    'EB Garamond', 'Cormorant Garamond', 'Libre Caslon Text', Georgia, serif;
  --ff-mono:    'Saira Condensed', 'Barlow Condensed', sans-serif;
  --measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dt, dd { margin: 0; }

/* ─── Bandeau haut ─────────────────────────────────────────── */
.legal-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(14px, 2.4vh, 22px) clamp(20px, 5vw, 64px);
  background: color-mix(in srgb, var(--c-cream) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid color-mix(in srgb, var(--c-petrol) 14%, transparent);
}
.legal-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-petrol); text-decoration: none;
}
.legal-back .lb-arrow { transition: transform .25s; display: inline-block; }
.legal-back:hover .lb-arrow { transform: translateX(-4px); }
.legal-mark { height: 30px; width: auto; opacity: .9; }

/* ─── Article ──────────────────────────────────────────────── */
.legal-main {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) clamp(20px, 6vw, 40px) clamp(80px, 10vh, 140px);
}
.legal-kicker {
  font-family: var(--ff-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-petrol) 70%, transparent);
  margin-bottom: 14px;
}
.legal-title {
  font-family: var(--ff-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(32px, 5vw, 48px);
  color: var(--c-petrol);
  margin-bottom: clamp(28px, 5vh, 48px);
}
.legal-updated {
  font-style: italic; font-size: 14.5px;
  color: color-mix(in srgb, var(--c-ink) 62%, transparent);
  margin: -20px 0 40px;
}
.legal-section { margin: 0 0 clamp(30px, 5vh, 48px); }
.legal-section h2 {
  font-family: var(--ff-mono); font-size: 14px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-petrol);
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-petrol) 22%, transparent);
}
.legal-section p { margin: 0 0 12px; max-width: var(--measure); }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--c-petrol) 45%, transparent); }
.legal-section a:hover { color: var(--c-petrol); }

.legal-identity {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  column-gap: 24px; row-gap: 14px;
  background: var(--c-porcel);
  border: 1px solid color-mix(in srgb, var(--c-petrol) 16%, transparent);
  border-radius: 4px;
  padding: clamp(18px, 3vh, 28px) clamp(18px, 3vw, 30px);
}
.legal-identity div { min-width: 0; }
.legal-identity dt {
  font-family: var(--ff-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-petrol) 68%, transparent);
  margin-bottom: 3px;
}
.legal-identity dd { font-size: 15.5px; }
@media (max-width: 560px) { .legal-identity { grid-template-columns: 1fr; } }

.legal-note {
  font-size: 14px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--c-accent) 30%, var(--c-porcel));
  border-left: 3px solid var(--c-accent-d);
  border-radius: 0 4px 4px 0;
}

/* ─── Sous-titres, listes, tableau (CGV) ─────────────────────── */
.legal-section h3 {
  font-family: var(--ff-body); font-style: italic; font-weight: 600;
  font-size: 17.5px; color: var(--c-ink);
  margin: clamp(18px, 3vh, 26px) 0 10px;
}
.legal-section h3:first-child { margin-top: 0; }
.legal-section ul.legal-list, .legal-section ol.legal-list {
  margin: 0 0 14px; max-width: var(--measure);
}
.legal-section ul.legal-list li, .legal-section ol.legal-list li {
  position: relative; padding-left: 20px; margin-bottom: 7px;
}
.legal-section ul.legal-list li::before { content: '-'; position: absolute; left: 2px; color: var(--c-petrol); }
.legal-section ol.legal-list { counter-reset: item; }
.legal-section ol.legal-list li::before {
  content: counter(item) '.'; counter-increment: item;
  position: absolute; left: 0; color: var(--c-petrol); font-weight: 700;
}

.legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 15px; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--c-petrol) 16%, transparent); }
.legal-table th {
  font-family: var(--ff-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-petrol) 75%, transparent);
}
.legal-table td:last-child, .legal-table th:last-child { text-align: right; white-space: nowrap; }
@media (max-width: 560px) {
  .legal-table { font-size: 13.5px; }
  .legal-table th, .legal-table td { padding: 8px 6px; }
}

.legal-toc {
  list-style: none; margin: 0 0 clamp(30px, 5vh, 48px); padding: clamp(16px, 2.6vh, 22px) clamp(18px, 3vw, 26px);
  background: var(--c-porcel);
  border: 1px solid color-mix(in srgb, var(--c-petrol) 16%, transparent);
  border-radius: 4px;
  columns: 2; column-gap: 28px;
}
.legal-toc li { break-inside: avoid; margin-bottom: 5px; font-size: 13.5px; }
.legal-toc a { text-decoration: none; color: var(--c-ink); }
.legal-toc a:hover { color: var(--c-petrol); text-decoration: underline; }
@media (max-width: 560px) { .legal-toc { columns: 1; } }

/* ─── Pied de page ─────────────────────────────────────────── */
.legal-footer {
  padding: clamp(28px, 4vh, 44px) clamp(20px, 6vw, 64px);
  border-top: 1px solid color-mix(in srgb, var(--c-petrol) 14%, transparent);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .06em;
  color: color-mix(in srgb, var(--c-ink) 62%, transparent);
}
.legal-footer a { text-decoration: underline; text-underline-offset: 2px; }
.legal-footer nav { display: flex; gap: 16px; }