/* ══════════ CHAMPAGNE PHI — Feuille de style globale ══════════ */
:root{
  --noir:#0A0A0A; --noir2:#141414; --ivoire:#F4EFE6;
  --accent:#C8A23A; --gris:#8A8474; --ligne:#2a2620;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--noir);color:var(--ivoire);font-family:'Cormorant Garamond',serif;line-height:1.65;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ── NAV ── */
.nav{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:18px clamp(18px,5vw,60px);border-bottom:1px solid var(--ligne);flex-wrap:wrap}
.nav .brand{font-family:'Cinzel',serif;font-size:17px;letter-spacing:5px;display:flex;align-items:center;gap:10px}
.nav .brand img{height:26px;width:auto}
.nav .links{display:flex;gap:clamp(10px,2.5vw,24px);font-family:'Cinzel',serif;
  font-size:10px;letter-spacing:1.5px;color:var(--gris);text-transform:uppercase;flex-wrap:wrap}
.nav .links a:hover,.nav .links a.on{color:var(--accent)}
.nav .lang{font-family:'Cinzel',serif;font-size:10px;letter-spacing:1px;color:var(--accent)}

/* ── HERO ── */
.hero{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 22px;position:relative}
.hero img.logo{width:min(230px,52vw);margin-bottom:26px}
.hero h1{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(38px,8vw,74px);
  letter-spacing:clamp(8px,2.6vw,20px);text-indent:clamp(8px,2.6vw,20px);margin-bottom:16px}
.hero .tagline{font-style:italic;font-size:clamp(15px,2.2vw,20px);color:#bdb6a8;max-width:560px}
.rule{width:40px;height:1px;background:var(--accent);margin:22px auto}
.cta{display:inline-block;font-family:'Cinzel',serif;font-size:11px;letter-spacing:2.5px;
  color:var(--ivoire);border:1px solid var(--accent);padding:14px 34px;text-transform:uppercase;
  transition:background .25s,color .25s;margin-top:8px}
.cta:hover{background:var(--ivoire);color:var(--noir);border-color:var(--ivoire)}
.cta.solid{background:var(--ivoire);color:var(--noir);border-color:var(--ivoire)}
.cta.solid:hover{background:transparent;color:var(--ivoire);border-color:var(--accent)}

/* ── SECTIONS ── */
section{padding:clamp(50px,8vw,100px) clamp(20px,6vw,80px);border-top:1px solid var(--ligne)}
.maxw{max-width:1040px;margin:0 auto}
.eye{font-family:'Cinzel',serif;font-size:10px;letter-spacing:4px;color:var(--accent);
  text-transform:uppercase;text-align:center}
h2.sec{font-family:'Cinzel',serif;font-weight:600;font-size:clamp(21px,3.6vw,32px);
  letter-spacing:3px;text-transform:uppercase;text-align:center;margin:12px 0 14px}
.lead{font-style:italic;font-size:17px;color:#bdb6a8;text-align:center;max-width:620px;margin:0 auto 34px}
p.body{font-size:17px;color:#cfc8bb;margin-bottom:15px}
p.body b{color:var(--ivoire);font-weight:600}

/* Cuvées grid */
.cuvgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,3vw,28px)}
@media(max-width:680px){.cuvgrid{grid-template-columns:1fr}}
.cuv{border-left:2px solid var(--accent);padding-left:16px}
.cuv .n{font-family:'Cinzel',serif;font-size:17px;font-weight:600;letter-spacing:.5px}
.cuv .b{font-size:14px;color:var(--gris);font-style:italic;margin-top:4px;line-height:1.6}
.cuv .t{font-family:'Cinzel',serif;font-size:9px;letter-spacing:1.5px;color:var(--accent);
  text-transform:uppercase;margin-top:5px}
.cuv .w{font-size:12px;color:#c98;font-style:italic;margin-top:3px}

/* Duo */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:760px;margin:0 auto}
@media(max-width:640px){.duo{grid-template-columns:1fr}}
.person{border:1px solid var(--ligne);padding:30px;text-align:center}
.person .nm{font-family:'Cinzel',serif;font-size:16px;font-weight:600;letter-spacing:1.5px}
.person .ro{font-style:italic;font-size:14px;color:var(--accent);margin-top:6px}
.person .de{font-size:14px;color:#9a9488;margin-top:12px;font-style:italic}

/* Reveal print band */
.reveal{text-align:center}
.reveal .big{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(26px,5vw,48px);
  text-transform:uppercase;line-height:1.05;margin:10px 0 16px}

/* Forms */
.formgrid{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.formgrid input,.formgrid textarea{background:transparent;border:1px solid var(--ligne);
  padding:13px;font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--ivoire);width:100%}
.formgrid input:focus,.formgrid textarea:focus{outline:none;border-color:var(--accent)}
.btnform{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  background:var(--ivoire);color:var(--noir);border:none;padding:16px;cursor:pointer;width:100%}
.consent{font-size:12px;color:var(--gris);font-style:italic;line-height:1.5}

/* Footer */
footer{border-top:1px solid var(--ligne);padding:44px 22px 28px;text-align:center;color:var(--gris)}
footer .phi{font-family:'Cinzel',serif;font-size:30px;color:var(--ivoire);margin-bottom:12px}
footer .flinks{display:flex;gap:20px;justify-content:center;font-family:'Cinzel',serif;
  font-size:9px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px;flex-wrap:wrap}
footer .flinks a:hover{color:var(--accent)}
footer .evin{font-size:12px;font-style:italic;color:#6f695e;margin-top:14px}
footer .copy{font-size:12px;color:#4a463d;margin-top:8px}

/* ── AGE GATE ── */
#ageGate{position:fixed;inset:0;background:rgba(6,6,6,.97);z-index:9999;display:flex;
  align-items:center;justify-content:center;padding:24px}
#ageGate .box{max-width:420px;text-align:center;border:1px solid var(--ligne);padding:44px 34px;background:var(--noir)}
#ageGate .phi{font-family:'Cinzel',serif;font-size:38px;margin-bottom:14px}
#ageGate h2{font-family:'Cinzel',serif;font-size:16px;letter-spacing:3px;margin-bottom:10px;text-transform:uppercase}
#ageGate p{font-style:italic;font-size:14px;color:#bdb6a8;margin-bottom:22px}
#ageGate .btns{display:flex;gap:12px}
#ageGate button{flex:1;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;
  text-transform:uppercase;padding:13px;cursor:pointer}
#ageGate .yes{background:var(--ivoire);color:var(--noir);border:none}
#ageGate .no{background:transparent;color:var(--gris);border:1px solid var(--ligne)}
#ageGate .evin{font-size:11px;color:#6f695e;font-style:italic;margin-top:18px}
