/* Villa 444 — pages légales : sobre, lisible, à la marque */
:root{
  --creme:#f2ede2;
  --corail:#d1493f;
  --or:#c9a24b;
  --nuit:#080b0e;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo',sans-serif;color:var(--creme);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(20,80,92,.20), transparent 55%),
    var(--nuit);
  min-height:100vh;line-height:1.75;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--corail);color:var(--creme)}
a{color:var(--corail);text-decoration:none;transition:color .3s}
a:hover{color:var(--creme)}
a:focus-visible,button:focus-visible{outline:1px solid color-mix(in srgb,var(--creme) 78%,transparent);outline-offset:5px;border-radius:2px}

.legal-top{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(24px,6vw,80px);
  background:linear-gradient(180deg,rgba(8,11,14,.92),rgba(8,11,14,.6) 70%,transparent);
  backdrop-filter:blur(6px);
}
.legal-top a{min-height:44px;display:flex;align-items:center}
.legal-top a.home{gap:12px;color:var(--creme)}
.legal-top img{height:40px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.legal-top .name{font-family:'Fraunces',serif;font-style:italic;font-size:16px;letter-spacing:.02em}
.legal-top .back{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--creme) 68%,transparent)}
.legal-top .back:hover{color:var(--creme)}

.legal-wrap{max-width:780px;margin:0 auto;padding:6vh clamp(24px,6vw,40px) 12vh}
.legal-wrap .kicker{
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--corail);margin-bottom:2.5vh;
}
.legal-wrap h1{
  font-family:'Fraunces',serif;font-weight:300;font-style:italic;
  font-size:clamp(38px,6vw,68px);line-height:1.02;letter-spacing:-.02em;margin-bottom:1vh;
}
.legal-wrap .updated{
  font-size:12px;letter-spacing:.08em;color:color-mix(in srgb,var(--creme) 50%,transparent);
  margin-bottom:6vh;font-style:italic;font-family:'Fraunces',serif;
}
.legal-wrap h2{
  font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(21px,2.4vw,28px);letter-spacing:.01em;
  margin:5.5vh 0 1.6vh;padding-top:2vh;
  border-top:1px solid color-mix(in srgb,var(--creme) 12%,transparent);
}
.legal-wrap h3{
  font-family:'Fraunces',serif;font-style:italic;font-weight:400;
  font-size:clamp(16px,1.7vw,19px);margin:3vh 0 1vh;color:color-mix(in srgb,var(--creme) 92%,transparent);
}
.legal-wrap p, .legal-wrap li{
  font-weight:300;font-size:15.5px;letter-spacing:.01em;
  color:color-mix(in srgb,var(--creme) 82%,transparent);margin-bottom:1.4em;
}
.legal-wrap ul{list-style:none;margin:0 0 1.4em}
.legal-wrap li{position:relative;padding-left:1.4em;margin-bottom:.7em}
.legal-wrap li::before{content:'—';position:absolute;left:0;color:var(--corail)}
.legal-wrap strong{color:var(--creme);font-weight:400}
.legal-wrap dl{margin:0 0 1.4em}
.legal-wrap dt{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:color-mix(in srgb,var(--creme) 55%,transparent);margin-top:1.4em}
.legal-wrap dd{font-size:16px;color:var(--creme);font-weight:300}
.legal-wrap button{
  min-height:44px;padding:11px 16px;border-radius:3px;
  border:1px solid color-mix(in srgb,var(--creme) 28%,transparent);
  background:transparent;color:var(--creme);font:400 11px/1 'Archivo',sans-serif;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  transition:border-color .3s,background .3s;
}
.legal-wrap button:hover{border-color:var(--corail);background:color-mix(in srgb,var(--corail) 10%,transparent)}
#analyticsOptoutStatus{margin-top:12px;font-size:13px}

.legal-note{
  margin-top:6vh;padding:22px 26px;border-radius:4px;
  background:color-mix(in srgb,var(--or) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--or) 26%,transparent);
  font-size:13.5px;line-height:1.7;color:color-mix(in srgb,var(--creme) 78%,transparent);
}

.legal-foot{
  margin-top:9vh;padding-top:3vh;border-top:1px solid color-mix(in srgb,var(--creme) 12%,transparent);
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.legal-foot a{min-height:44px;display:inline-flex;align-items:center;color:color-mix(in srgb,var(--creme) 68%,transparent)}
.legal-foot a:hover{color:var(--creme)}
.legal-foot .sep{color:color-mix(in srgb,var(--creme) 50%,transparent)}

@media (max-width:600px){
  .legal-top .name{display:none}
  .legal-wrap{padding-top:4vh}
}