:root{
  --bg:#150909; --bg2:#1f0e0e; --ink:#f1ebe0; --mute:#a39d90;
  --gold:#dcb062; --tomato:#c8402b; --basil:#6f8f54;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.7;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:italic;color:var(--gold);font-family:var(--serif)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05}
h1{font-size:clamp(3rem,7vw,6.2rem);letter-spacing:-.01em}
h2{font-size:clamp(2.2rem,4.5vw,3.8rem)}
.eyebrow{font-size:.75rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem}
.lead{color:var(--mute);font-size:1.05rem;max-width:34rem}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:1.4rem 5vw;transition:.4s}
.nav.scrolled{background:rgba(21,9,9,.92);backdrop-filter:blur(10px);padding:.9rem 5vw;border-bottom:1px solid #ffffff12}
.logo{font-family:var(--serif);font-size:1.7rem;letter-spacing:.04em}
nav{display:flex;gap:2.2rem;align-items:center;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}
nav a:not(.btn-sm){position:relative}
nav a:not(.btn-sm)::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:var(--gold);transition:.3s}
nav a:not(.btn-sm):hover::after{width:100%}
.btn-sm{border:1px solid var(--gold);color:var(--gold);padding:.55rem 1.3rem;transition:.3s}
.btn-sm:hover{background:var(--gold);color:var(--bg)}

/* buttons */
.btn{display:inline-block;background:var(--gold);color:#15130e;padding:1rem 2.2rem;font:500 .8rem var(--sans);letter-spacing:.22em;text-transform:uppercase;border:0;cursor:pointer;transition:.3s}
.btn:hover{background:var(--ink);transform:translateY(-2px)}
.link{font-size:.85rem;letter-spacing:.12em;color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:3px}
.cta{display:flex;gap:2rem;align-items:center;margin-top:2.4rem;flex-wrap:wrap}

/* hero */
.hero{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:4vw;padding:8rem 5vw 4rem;
  background:radial-gradient(ellipse at 80% 40%,#2a2f35 0,transparent 60%)}
.hero h1{margin-bottom:1.8rem}
.hero-img{position:relative;justify-self:center;width:min(100%,460px)}
.frame{aspect-ratio:2/3;overflow:hidden;border-radius:230px 230px 6px 6px;border:1px solid var(--gold);padding:10px}
.frame img{width:100%;height:100%;object-fit:cover;border-radius:220px 220px 2px 2px;animation:zoom 14s ease-in-out infinite alternate}
@keyframes zoom{to{transform:scale(1.08)}}
.badge{position:absolute;left:-2.5rem;bottom:3rem;width:120px;height:120px;border-radius:50%;background:var(--tomato);display:grid;place-content:center;text-align:center;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;box-shadow:0 20px 40px #0008}
.badge span{font:400 2.4rem var(--serif);line-height:1;letter-spacing:0}

/* marquee */
.marquee{border-block:1px solid #ffffff14;overflow:hidden;padding:1.2rem 0;background:var(--bg2)}
.track{display:flex;gap:2.5rem;width:max-content;animation:scroll 35s linear infinite;font:italic 1.5rem var(--serif);color:var(--mute);white-space:nowrap}
.track i{color:var(--gold);font-style:normal;font-size:.9rem;align-self:center}
@keyframes scroll{to{transform:translateX(-50%)}}

/* sections */
.section{padding:8rem 5vw}
.section.dark{background:var(--bg2)}
.head{text-align:center;margin-bottom:4rem}
.menu{list-style:none;max-width:52rem;margin:auto}
.menu li{display:flex;align-items:baseline;gap:1rem;padding:1.6rem 0;border-bottom:1px solid #ffffff10}
.menu h3{font-size:1.8rem;transition:.3s}
.menu li:hover h3{color:var(--gold);padding-left:.6rem}
.menu p{color:var(--mute);font-size:.92rem}
.menu b{font:400 1.7rem var(--serif);color:var(--gold)}
.menu li div{max-width:70%}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:90vh}
.split-img{overflow:hidden}
.split-img img{width:100%;height:100%;object-fit:cover;object-position:center 60%;transform:scale(1.15)}
.split-text{padding:6rem 6vw;display:flex;flex-direction:column;justify-content:center;gap:1.2rem;background:var(--bg)}
.split-text p:not(.eyebrow){color:var(--mute);max-width:32rem}
.stats{display:flex;gap:3rem;margin-top:2rem;padding-top:2rem;border-top:1px solid #ffffff14}
.stats dt{font:400 2.6rem var(--serif);color:var(--gold);line-height:1}
.stats dd{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:.4rem}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;max-width:72rem;margin:auto}
.card{position:relative;padding:2.4rem 2rem;border:1px solid #ffffff14;background:var(--bg);transition:.4s}
.card:hover{border-color:var(--gold);transform:translateY(-8px)}
.card .num{font:italic 1.2rem var(--serif);color:var(--tomato)}
.card h3{font-size:1.7rem;margin:1rem 0 .8rem}
.card p{color:var(--mute);font-size:.92rem;margin-bottom:1.5rem}
.card b{font:400 1.6rem var(--serif);color:var(--gold)}

/* reserve */
.reserve{display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding:8rem 5vw;align-items:center;
  background:linear-gradient(135deg,#2a1713,var(--bg) 60%)}
.form{display:flex;flex-direction:column;gap:1.4rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
label{display:flex;flex-direction:column;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);gap:.4rem}
input,select{background:transparent;border:0;border-bottom:1px solid #ffffff30;color:var(--ink);font:300 1rem var(--sans);padding:.6rem 0;outline:0;color-scheme:dark}
input:focus,select:focus{border-color:var(--gold)}
select option{background:var(--bg)}
.form .btn{margin-top:1rem}

.footer{text-align:center;padding:4rem 5vw;border-top:1px solid #ffffff14;display:grid;gap:.6rem;color:var(--mute);font-size:.9rem}
.footer .logo{color:var(--ink)}
.small{font-size:.75rem;opacity:.6}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.track,.frame img{animation:none}}

@media(max-width:860px){
  nav a:not(.btn-sm){display:none}
  .hero,.split,.reserve{grid-template-columns:1fr}
  .hero{padding-top:7rem}
  .badge{left:0}
  .split-text{padding:4rem 5vw}
  .split-img{height:60vh}
  .menu li div{max-width:none}
  .menu .dots{display:none}
  .menu li{justify-content:space-between}
}

/* ===== Hero façon template : ambre + bordeaux ===== */
.logo{display:flex;align-items:center;gap:.7rem;color:var(--gold)}
.logo span{display:flex;flex-direction:column;line-height:1}
.logo b{font:400 1.6rem 'Anton',sans-serif;letter-spacing:.03em}
.logo small{font:400 .95rem var(--sans);color:var(--ink);letter-spacing:.02em;margin-top:.25rem}
.footer .logo{justify-content:center}
nav.pill{background:var(--gold);border-radius:999px;padding:.4rem;gap:.2rem;letter-spacing:.02em;text-transform:none;font-size:1rem;font-weight:500}
nav.pill a{padding:.7rem 1.8rem;border-radius:999px;color:#2a0f08}
nav.pill a::after{display:none}
nav.pill a.on,nav.pill a:hover{background:#fff;color:#2a0f08}

.hero{position:relative;overflow:hidden;padding:9rem 6vw 4rem;background:linear-gradient(160deg,#1d0b0c,#0f0505);gap:2vw}
.hero::before{content:"";position:absolute;left:-18vw;top:12vh;width:70vw;height:70vw;border-radius:50%;background:#12060605;box-shadow:0 0 0 0 #0000;background:radial-gradient(circle,#0c0404 60%,transparent 61%);opacity:.7}
.blob{position:absolute;border-radius:50%;background:var(--gold)}
.b1{left:-60px;top:-60px;width:170px;height:170px}
.b2{right:-8vw;bottom:-30vw;width:48vw;height:48vw}
.dots{position:absolute;width:90px;height:110px;background:radial-gradient(#fff 1.6px,transparent 2px) 0 0/15px 15px;opacity:.8}
.d1{left:0;bottom:18vh}.d2{right:0;top:42vh}
.leaf{position:absolute;top:-30px;left:46vw;width:150px;transform:rotate(-18deg);filter:drop-shadow(0 12px 14px #0008);z-index:2}
.hero-text,.hero-img{position:relative;z-index:3}
.hero h1{font:400 clamp(4.5rem,13vw,11rem)/.92 'Anton',Impact,sans-serif;color:var(--gold);letter-spacing:.005em;text-transform:uppercase;margin-bottom:2rem}
.tag{display:flex;align-items:center;gap:1.1rem;color:var(--ink);letter-spacing:.32em;text-transform:uppercase;font-size:.85rem;margin-bottom:0}
.tag i{width:14px;height:14px;border-radius:50%;background:var(--gold);flex:none}
.hero-img{width:100%;max-width:none;aspect-ratio:1;display:grid;place-items:center}
.sun{position:absolute;inset:auto 0 -6% 12%;height:46%;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#0003,transparent 70%);filter:blur(8px)}
.pan{width:92%;aspect-ratio:1;border-radius:50%;padding:5%;background:radial-gradient(circle at 35% 30%,#5a3a26,#2a160d 70%);box-shadow:0 40px 60px #000a,inset 0 0 0 6px #00000055;transform:perspective(900px) rotateX(24deg) rotateZ(-14deg);transition:transform .8s}
.pan:hover{transform:perspective(900px) rotateX(10deg) rotateZ(-4deg) scale(1.03)}
.pan img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 58%;transform:scale(1.9);box-shadow:inset 0 0 0 4px #0006}
.pan{overflow:hidden}
.pan img{animation:none}
@media(max-width:860px){
  nav.pill{display:none}
  .logo b{font-size:1.3rem}
  .leaf{left:auto;right:6vw;width:90px}
  .hero{padding-top:7rem}
  .hero-img{max-width:420px;margin:auto}
}
.b1{left:-110px;top:-110px;width:190px;height:190px}
.pan{padding:0;border:clamp(10px,1.6vw,18px) solid #3b2012;background:#2a160d}
.pan img{transform:scale(1.45);box-shadow:none}
.pan::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 30px #000a;pointer-events:none}
.pan{position:relative}

/* ===== Hero "stage" — éditorial luxe ===== */
nav.pill{background:#ffffff0d;border:1px solid #ffffff22;backdrop-filter:blur(10px)}
nav.pill a{color:var(--ink)}
nav.pill a.on,nav.pill a:hover{background:var(--gold);color:#1a0d08}
.logo{color:var(--ink)}
.logo b{font:500 1.5rem var(--serif);letter-spacing:.2em}
.logo small{color:var(--gold);letter-spacing:.3em;text-transform:uppercase;font-size:.6rem}
.logo svg{color:var(--gold)}

.stage{position:relative;min-height:100vh;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;text-align:center;padding:8rem 5vw 2.5rem;
  background:radial-gradient(ellipse at 50% 55%,#3a1412 0,#1a0a0a 45%,#0c0505 100%)}
.stage-eyebrow{font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);position:relative;z-index:3}
.glow{position:absolute;left:50%;top:52%;width:70vmin;height:70vmin;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#dcb06255,transparent 65%);filter:blur(30px)}
.disc-wrap{position:relative;align-self:center;width:min(62vmin,560px);aspect-ratio:1;margin:2rem 0}
.disc{position:absolute;inset:9%;border-radius:50%;overflow:hidden;border:1px solid var(--gold);box-shadow:0 40px 90px #000c,0 0 0 10px #ffffff08}
.disc img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform:scale(1.5);animation:spin 80s linear infinite}
@keyframes spin{to{transform:scale(1.5) rotate(360deg)}}
.ring{position:absolute;inset:0;width:100%;height:100%;animation:ringspin 40s linear infinite}
.ring text{font:400 15px var(--sans);letter-spacing:.42em;fill:var(--gold)}
@keyframes ringspin{to{transform:rotate(360deg)}}
.chip{position:absolute;padding:.55rem 1.1rem;border:1px solid #ffffff30;border-radius:999px;background:#150909cc;backdrop-filter:blur(8px);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;animation:float 6s ease-in-out infinite}
.chip::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:.6rem}
.c1{left:-8%;top:22%}.c2{right:-10%;top:48%;animation-delay:-2s}.c3{left:2%;bottom:8%;animation-delay:-4s}
@keyframes float{50%{transform:translateY(-12px)}}
.mega{position:absolute;left:0;right:0;top:50%;transform:translateY(-46%);z-index:2;pointer-events:none;display:flex;flex-direction:column;align-items:center;line-height:.8;mix-blend-mode:normal}
.mega span{font:italic 300 clamp(1.4rem,3.2vw,2.6rem) var(--serif);color:var(--ink);margin-bottom:-.4em;position:relative;z-index:3}
.mega em{font:300 clamp(7rem,26vw,24rem)/.8 var(--serif);font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--ink);letter-spacing:-.02em;text-transform:uppercase;text-shadow:0 0 60px #0008}
.stage-bottom{position:relative;z-index:3;width:100%;max-width:1200px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;text-align:left;padding-top:1.5rem;border-top:1px solid #ffffff1a}
.stage-bottom p{color:var(--mute);max-width:22rem}
.stage-bottom .cta{margin:0;justify-content:center}
.facts{list-style:none;display:flex;gap:2rem;justify-content:flex-end}
.facts b{display:block;font:400 1.6rem var(--serif);color:var(--gold);line-height:1}
.facts span{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mute)}
@media(max-width:900px){
  .stage{padding-top:7rem}
  .stage-bottom{grid-template-columns:1fr;text-align:center;justify-items:center}
  .facts{justify-content:center}
  .disc-wrap{width:78vw}
  .c1{left:-4%}.c2{right:-4%}.c3{left:0}
  .chip{font-size:.6rem;padding:.4rem .8rem}
}
@media(prefers-reduced-motion:reduce){.disc img,.ring,.chip{animation:none}}
@media(max-width:900px){.mega em{-webkit-text-stroke:2px var(--ink);text-shadow:0 4px 24px #000,0 0 12px #000a}.mega span{text-shadow:0 2px 12px #000}}
.menu li{justify-content:space-between}

/* cartes pâtes avec photo + panier */
.card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card-img{aspect-ratio:4/3;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.card:hover .card-img img{transform:scale(1.08)}
.card-body{padding:1.4rem 1.6rem 1.6rem;display:flex;flex-direction:column;flex:1}
.card-body p{flex:1}
.buy{display:flex;justify-content:space-between;align-items:center}
.buy b{font:400 1.8rem var(--serif);color:var(--gold)}
.add{width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);background:transparent;color:var(--gold);display:grid;place-items:center;cursor:pointer;transition:.3s}
.add:hover{background:var(--gold);color:#1a0d08;transform:scale(1.08)}
.add.done{background:var(--basil);border-color:var(--basil);color:#fff}
nav a.cart{position:relative;display:flex;align-items:center;gap:.4rem}
nav a.cart i{font:500 .7rem var(--sans);font-style:normal;background:var(--tomato);color:#fff;border-radius:999px;min-width:1.2rem;height:1.2rem;display:grid;place-items:center;padding:0 .3rem;transition:transform .3s}
nav a.cart i.bump{transform:scale(1.5)}
@media(max-width:860px){nav.pill{display:flex;background:none;border:0;padding:0}nav.pill a:not(.cart){display:none}}

/* pizze avec photo + panier */
.menu{max-width:56rem}
.menu li{align-items:center;gap:1.4rem}
.menu .thumb{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--gold);transition:transform .5s}
.menu li:hover .thumb{transform:scale(1.08) rotate(6deg)}
.menu li div{flex:1;max-width:none}
.menu li:hover h3{padding-left:0}
.menu .add{flex:none}
@media(max-width:600px){.menu .thumb{width:68px;height:68px}.menu li{gap:.9rem}.menu h3{font-size:1.4rem}.menu p{font-size:.8rem}}

/* Pizze signature : rangée horizontale */
#carte .menu{max-width:none;margin:0 -5vw;padding:.5rem 5vw 2rem;display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
#carte .menu li{flex:0 0 min(300px,78vw);scroll-snap-align:start;display:grid;grid-template-columns:1fr auto;align-items:center;gap:.6rem 1rem;padding:0 0 1.4rem;border:1px solid #ffffff14;background:var(--bg2);transition:border-color .3s,transform .4s}
#carte .menu li:hover{border-color:var(--gold);transform:translateY(-6px)}
#carte .menu .thumb{grid-column:1/-1;width:100%;height:auto;aspect-ratio:1;border-radius:0;border:0;transform:none!important}
#carte .menu li div{grid-column:1/-1;padding:.6rem 1.4rem 0}
#carte .menu h3{font-size:1.6rem}
#carte .menu b{padding-left:1.4rem;font-size:1.8rem}
#carte .menu .add{margin-right:1.4rem}
@media(min-width:1500px){#carte .menu{justify-content:center}}
#carte .menu{scroll-padding-left:5vw}
.split-img img{transform:none;object-position:center}
.split{min-height:45vh}
.split-text{padding-block:4rem}
@media(max-width:860px){.split-img{height:30vh}}

/* espacement réduit entre sections */
.section{padding-block:4rem}
.reserve{padding-block:4rem}
.head{margin-bottom:2.5rem}
.split-text{padding-block:3rem}
.footer{padding-block:2.5rem}
.stage{min-height:92vh}
@media(max-width:860px){.section,.reserve{padding-block:3rem}}

/* panier */
body.lock{overflow:hidden}
.drawer{position:fixed;inset:0;z-index:50;pointer-events:none}
.drawer-back{position:absolute;inset:0;background:#000a;opacity:0;transition:.4s}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--bg2);border-left:1px solid var(--gold);padding:1.6rem;overflow-y:auto;transform:translateX(100%);transition:transform .5s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;gap:1.2rem}
.drawer.open{pointer-events:auto}
.drawer.open .drawer-back{opacity:1}
.drawer.open .drawer-panel{transform:none}
.drawer header{display:flex;justify-content:space-between;align-items:center}
.drawer h2{font-size:2rem}
#cart-close{background:none;border:0;color:var(--ink);font-size:2.2rem;line-height:1;cursor:pointer}
#cart-empty{color:var(--mute)}
#cart-list{list-style:none}
#cart-list li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 0;border-bottom:1px solid #ffffff12}
#cart-list b{display:block;font:400 1.3rem var(--serif)}
#cart-list span{color:var(--gold);font-size:.9rem}
.qty{display:flex;align-items:center;gap:.7rem}
.qty button{width:30px;height:30px;border-radius:50%;border:1px solid var(--gold);background:none;color:var(--gold);cursor:pointer;font-size:1.1rem}
.qty button:hover{background:var(--gold);color:#1a0d08}
.qty em{font-style:normal;min-width:1.2rem;text-align:center}
#cart-form{display:flex;flex-direction:column;gap:1.1rem}
#cart-form[hidden],#cart-done[hidden],#addr[hidden],#cart-empty[hidden]{display:none}
.total{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.total b{font:400 2rem var(--serif);color:var(--gold);letter-spacing:0}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
label.radio{display:block;letter-spacing:.05em;text-transform:none;font-size:.85rem;color:var(--ink)}
label.radio input{position:absolute;opacity:0}
label.radio span{display:block;text-align:center;padding:.7rem;border:1px solid #ffffff30;cursor:pointer;transition:.3s}
label.radio input:checked+span{border-color:var(--gold);background:var(--gold);color:#1a0d08}
#cart-done{text-align:center;display:flex;flex-direction:column;gap:1rem;align-items:center;padding-top:2rem}
#cart-done h3{font-size:2.4rem;color:var(--gold)}
#cart-done p{color:var(--mute)}
.buy b::after,.menu b::after{content:" €";font-size:.6em;letter-spacing:.05em}

/* image "Trois jours" plus petite */
.split-img{display:grid;place-items:center;padding:2.5rem 3vw;height:auto}
.split-img img{width:100%;max-width:440px;height:auto;aspect-ratio:4/3;border:1px solid var(--gold);padding:8px;background:var(--bg2)}
@media(max-width:860px){.split-img{height:auto;padding:2rem 5vw 0}.split-img img{max-width:100%}}

/* netteté des images */
img{image-rendering:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.disc img{animation:none;transform:scale(1.12);object-position:50% 58%}
.card-img img,.menu .thumb,.split-img img,.disc img{filter:contrast(1.06) saturate(1.05)}
@keyframes spin{to{transform:scale(1.12)}}

/* image "Trois jours" : un peu plus grande et rapprochée du texte */
.split{grid-template-columns:1.1fr 1fr}
.split-img{justify-items:end;padding-right:1.5rem}
.split-img img{max-width:540px}
.split-text{padding-left:2rem}
@media(max-width:860px){.split-img{justify-items:center;padding-right:5vw}.split-text{padding-left:5vw}.split-img img{max-width:100%}}