/* ═══════════════════════════════════════════════════════════════════════
   VANDALE — pizza de rue · site d'exemple Artkodin (11/10/2026)
   Noir asphalte, titres géants, tags à la bombe qui coulent.
   ═══════════════════════════════════════════════════════════════════════ */
@property --p{syntax:'<number>';inherits:true;initial-value:100}

:root{
  --noir:#0a0a0a; --asphalte:#111110; --beton:#191918; --trait:#2b2a28;
  --blanc:#f5f3ee; --gris:#a9a7a0; --sourd:#5c5b56;
  --acide:#cdf545;
  --f-titre:"Anton",Impact,"Arial Narrow",sans-serif;
  --f-tag:"Sedgwick Ave Display","Marker Felt","Comic Sans MS",cursive;
  --f-txt:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --marge:clamp(16px,2.6vw,40px);
  --haut:92px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--noir)}
body{margin:0;background:var(--noir);color:var(--blanc);font:500 18px/1.45 var(--f-txt);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
h1,h2,h3,p,ol,ul,figure,address,table{margin:0;padding:0}
ol,ul{list-style:none}
address{font-style:normal}
::selection{background:var(--acide);color:#000}
:focus-visible{outline:2.5px solid var(--acide);outline-offset:3px;border-radius:4px}
.defs{position:absolute}
.wrap{padding-inline:var(--marge)}
html.bloque,html.bloque body{overflow:hidden}

/* grain de mur sur toute la page */
body::after{content:"";position:fixed;inset:0;z-index:85;pointer-events:none;opacity:.075;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ───────── tags à la bombe ───────── */
.tag{position:relative;display:inline-block;font:400 1em/1 var(--f-tag);color:var(--acide);white-space:nowrap;pointer-events:none;text-transform:none;letter-spacing:0;font-style:normal}
.tag.blanc{color:var(--blanc)}
.tag-t{display:block;padding:.14em .12em .18em;--p:100;transition:--p .95s cubic-bezier(.3,.6,.3,1);
  -webkit-mask-image:linear-gradient(100deg,#000 calc(var(--p)*1.4% - 40%),transparent calc(var(--p)*1.4%));
          mask-image:linear-gradient(100deg,#000 calc(var(--p)*1.4% - 40%),transparent calc(var(--p)*1.4%))}
.js .tag:not(.vu) .tag-t{--p:0}
.coulure{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);background:currentColor;border-radius:0 0 99px 99px;
  transform:scaleY(0);transform-origin:top;transition:transform 2.4s cubic-bezier(.2,.7,.2,1) calc(.5s + var(--d))}
.coulure::after{content:"";position:absolute;left:50%;bottom:-.03em;width:175%;aspect-ratio:1;border-radius:50%;background:currentColor;transform:translateX(-50%)}
.tag.vu .coulure,html:not(.js) .coulure{transform:none}
.postillons{position:absolute;left:50%;top:50%;width:.045em;height:.045em;border-radius:50%;opacity:0;transition:opacity .4s .35s}
.tag.vu .postillons,html:not(.js) .postillons{opacity:.9}
.tag.sec,.tag.sec *{transition:none!important}

/* coulures en bord de bloc */
.coulures{position:absolute;left:0;right:0;height:clamp(90px,13vw,190px);pointer-events:none;z-index:3}
.coulures.haut{top:-1px}
.coulures svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:top;transform:scaleY(.1);transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
.coulures.vu svg,html:not(.js) .coulures svg{transform:none}

/* éclaboussures et tags fantômes du décor */
.eclats{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.eclats svg{width:100%;height:100%}
.fantome{position:absolute;z-index:0;font:400 34vw/1 var(--f-tag);color:#121211;white-space:nowrap;pointer-events:none;user-select:none;rotate:-8deg}

/* apparitions simples */
.js .rv{opacity:0;translate:0 28px;transition:opacity .9s var(--ease),translate .9s var(--ease)}
.js .rv.vu{opacity:1;translate:none}

/* ───────── boutons ───────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:13px;overflow:hidden;isolation:isolate;
  background:var(--blanc);color:#0a0a0a;font:700 15.5px/1 var(--f-txt);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:transform .25s var(--ease),color .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--acide);transform:translateY(102%);transition:transform .5s var(--ease)}
.btn:hover::before{transform:none}
.btn:active{transform:scale(.95)}
.btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn.acide{background:var(--acide)}
.btn.acide::before{background:var(--blanc)}
.btn.vide{background:transparent;color:var(--blanc);box-shadow:inset 0 0 0 1.5px rgba(245,243,238,.55)}
.btn.vide:hover{color:#0a0a0a}
.btn.plein{width:100%}

/* ───────── rideau d'entrée ───────── */
.chargeur{position:fixed;inset:0;z-index:100;background:var(--noir);display:grid;place-items:center;will-change:transform}
html:not(.js) .chargeur,.pret .chargeur{display:none}
.ch-tag{font-size:clamp(84px,17vw,250px);rotate:-6deg}
.ch-bas{position:absolute;left:var(--marge);right:var(--marge);bottom:26px;display:flex;justify-content:space-between;align-items:flex-end;font:600 13.5px/1 var(--f-txt);letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.ch-pct{font:400 clamp(64px,11vw,160px)/.8 var(--f-titre);color:var(--blanc)}
.ch-pct::after{content:"%";font-size:.4em;color:var(--acide);margin-left:.08em}
.chargeur .coulures{top:calc(100% - 2px);height:clamp(140px,20vw,260px)}
.chargeur .coulures svg{transform:none}

/* ───────── en-tête ───────── */
.top{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--haut);padding:0 var(--marge);
  transition:transform .6s var(--ease),background .35s,height .35s}
.top.fond{background:rgba(10,10,10,.84);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);height:70px}
.top.cache{transform:translateY(-105%)}
.logo{position:relative;display:inline-block;text-decoration:none;padding:4px 8px 12px 0}
.logo b{display:block;font:400 31px/1 var(--f-titre);text-transform:uppercase;letter-spacing:.015em}
.logo i{position:absolute;left:28%;bottom:-3px;font:400 21px/1 var(--f-tag);color:var(--acide);rotate:-6deg;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,44px)}
.nav a{display:inline-grid;place-items:center;height:40px;text-decoration:none}
.nav a span{grid-area:1/1;transition:opacity .25s,transform .45s var(--ease)}
.nav .n{font:600 14.5px/1 var(--f-txt);letter-spacing:.16em;text-transform:uppercase}
.nav .t{font:400 27px/1 var(--f-tag);color:var(--acide);opacity:0;transform:rotate(-5deg) scale(.7);white-space:nowrap}
.nav a:hover .n,.nav a.on .n{opacity:0;transform:scale(.8)}
.nav a:hover .t,.nav a.on .t{opacity:1;transform:rotate(-5deg) scale(1)}
.top-d{display:flex;align-items:center;gap:18px}
.etat{font:600 12.5px/1 var(--f-txt);letter-spacing:.14em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.etat b{color:var(--acide);font-weight:700}
.etat.ferme b{color:var(--blanc)}
.btn-panier{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 18px;border-radius:99px;background:var(--blanc);color:#0a0a0a;font:700 13.5px/1 var(--f-txt);letter-spacing:.14em;text-transform:uppercase;transition:transform .25s var(--ease),background .25s}
.btn-panier:hover{background:var(--acide)}
.btn-panier:active{transform:scale(.94)}
.btn-panier b{display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:99px;background:#0a0a0a;color:var(--blanc);font:400 15px/1 var(--f-titre);letter-spacing:0}
.btn-panier.saute b{animation:saute .5s var(--ease)}
@keyframes saute{40%{transform:scale(1.5) rotate(-12deg);background:var(--acide);color:#000}}
.burger{display:none;width:44px;height:44px;position:relative}
.burger i{position:absolute;left:9px;right:9px;height:2.5px;background:var(--blanc);border-radius:2px;transition:transform .4s var(--ease),top .4s var(--ease)}
.burger i:first-child{top:16px}.burger i:last-child{top:26px}
.burger[aria-expanded="true"] i:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{top:21px;transform:rotate(-45deg)}

.menu-m{position:fixed;inset:0;z-index:58;background:var(--noir);display:flex;flex-direction:column;justify-content:center;gap:18px;padding:90px var(--marge) 40px;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .7s var(--ease),visibility 0s .7s}
.menu-m.ouvert{clip-path:inset(0);visibility:visible;transition:clip-path .7s var(--ease)}
.menu-m nav{display:flex;flex-direction:column}
.menu-m nav a{font:400 clamp(52px,15.5vw,96px)/1.02 var(--f-titre);text-transform:uppercase;text-decoration:none;translate:0 40px;opacity:0;transition:translate .7s var(--ease),opacity .5s}
.menu-m.ouvert nav a{translate:none;opacity:1}
.menu-m.ouvert nav a:nth-child(2){transition-delay:.05s}.menu-m.ouvert nav a:nth-child(3){transition-delay:.1s}.menu-m.ouvert nav a:nth-child(4){transition-delay:.15s}.menu-m.ouvert nav a:nth-child(5){transition-delay:.2s}
.menu-m .tag{font-size:54px;rotate:-6deg;align-self:flex-end;margin-top:-10px}
.menu-tel{font:600 17px/1 var(--f-txt);letter-spacing:.14em;text-decoration:none;color:var(--gris)}

/* ═════════════ HERO ═════════════ */
.hero{position:relative;padding:var(--dep) 0 26px;overflow:hidden;--fs:21.3vw;--pz:min(40vw,62svh);--dep:calc(var(--haut) + var(--fs)*.115)}
.hero-h{position:relative;z-index:2;margin:0 var(--marge);font:400 var(--fs)/.9 var(--f-titre);text-transform:uppercase;white-space:nowrap;text-align:center;will-change:transform}
.fitin{display:inline-block}
.hero-h .l{display:inline-block;overflow:hidden;vertical-align:top;padding-top:.22em;margin-top:-.22em}
.hero-h .l>span{display:inline-block;will-change:transform}
.hero-h.trait{position:absolute;left:0;right:0;top:var(--dep);z-index:4;color:transparent;-webkit-text-stroke:1.5px var(--blanc);pointer-events:none}
.hero-panel{position:relative;z-index:1;margin:calc(var(--fs)*-.13) var(--marge) 0;height:min(max(calc(100svh - var(--dep) - var(--fs)*.77 - 26px),400px),57vw);border-radius:28px;overflow:hidden;background:#1b1611}
.hero-panel .fond{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;filter:saturate(.92) brightness(.82) contrast(1.05);will-change:transform}
.hero-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.08) 42%,rgba(0,0,0,.05) 66%,rgba(0,0,0,.5));pointer-events:none}
.tache{position:absolute;z-index:1;left:25%;top:30%;width:clamp(70px,9.5vw,150px);fill:#070707}
.hero-copy{position:absolute;z-index:2;left:clamp(20px,2.4vw,38px);top:clamp(22px,2.6vw,40px);max-width:310px}
.hero-copy h2{font:400 clamp(24px,2.3vw,34px)/1.02 var(--f-titre);text-transform:uppercase;letter-spacing:.01em}
.hero-copy p{margin-top:14px;font:600 13.5px/1.55 var(--f-txt);letter-spacing:.07em;text-transform:uppercase;color:rgba(245,243,238,.88)}
.hero-cta{position:absolute;z-index:2;right:clamp(20px,2.4vw,38px);bottom:clamp(20px,2.4vw,38px);display:flex;gap:10px}
.hero-pizza{position:absolute;z-index:3;left:50%;top:calc(var(--dep) + var(--fs)*.4);width:var(--pz);aspect-ratio:1;margin-left:calc(var(--pz)/-2);pointer-events:none;will-change:transform}
.ombre{position:absolute;inset:4% 0 -8%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.8),rgba(0,0,0,.45) 60%,rgba(0,0,0,0));filter:blur(14px)}
.hero-pizza .rot,.hero-pizza .rot2{position:absolute;inset:0;will-change:transform}
.hero-pizza img{width:100%;height:100%;animation:tourne 140s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.hero>.tag{position:absolute;z-index:5}
.hero .t1{right:3.5vw;top:calc(var(--dep) + var(--fs)*.97);font-size:clamp(52px,7.8vw,132px);rotate:-9deg}
.hero .t2{left:50%;top:calc(var(--dep) + var(--fs)*.4 + var(--pz)*.7);translate:-14% 0;font-size:clamp(58px,8.6vw,146px);rotate:-6deg}
.hero .t3{left:3.5vw;bottom:clamp(6px,2svh,30px);font-size:clamp(52px,7.4vw,124px);rotate:-15deg}
.pastille{position:absolute;z-index:5;right:5vw;top:calc(var(--dep) + var(--fs)*.4 + var(--pz)*.63);width:clamp(96px,10.5vw,168px);aspect-ratio:1;rotate:10deg;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5))}
.pastille .tourne{transform-origin:100px 100px;animation:tourne 16s linear infinite}

/* ═════════════ RUBANS ═════════════ */
.rubans{position:relative;z-index:6;height:clamp(190px,23vw,330px);overflow:hidden;margin-top:-10px}
.ruban{position:absolute;left:-6vw;width:112vw;top:50%;padding:.32em 0 .3em;overflow:hidden;white-space:nowrap;font:400 clamp(26px,3.5vw,54px)/1 var(--f-titre);text-transform:uppercase;letter-spacing:.02em;color:#0a0a0a}
.ruban.a{background:var(--acide);translate:0 -50%;rotate:-3.4deg;z-index:2;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.ruban.b{background:var(--blanc);translate:0 -50%;rotate:3deg;z-index:1}
.ruban-in{display:inline-flex;will-change:transform;animation:defile 30s linear infinite}
.ruban.b .ruban-in{animation-direction:reverse;animation-duration:36s}
.ruban-in span{display:inline-flex;align-items:center;padding-left:.7em}
.ruban-in span::after{content:"";width:.34em;height:.34em;margin-left:.7em;border-radius:50%;background:currentColor}
@keyframes defile{to{transform:translateX(-50%)}}

/* ═════════════ titres de section ═════════════ */
.titre{position:relative;display:inline-block;font:400 clamp(76px,15.5vw,270px)/.9 var(--f-titre);text-transform:uppercase;letter-spacing:-.004em}
.titre.petit{font-size:clamp(50px,9.6vw,168px)}
.titre-t{display:inline-block}
.js .titre .titre-t{opacity:0;translate:0 .22em;transition:opacity .7s,translate 1s var(--ease)}
.js .titre.vu .titre-t{opacity:1;translate:none}
.titre .tag{position:absolute;right:-.08em;bottom:-.4em;font-size:.33em;rotate:-7deg}
.chapo{max-width:430px;font-size:clamp(17px,1.35vw,21px);line-height:1.45;color:#c2c0b9}

/* ═════════════ LA CARTE ═════════════ */
.carte{position:relative;padding-top:clamp(50px,7vw,110px)}
.carte-tete{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:30px 40px;flex-wrap:wrap;padding-bottom:clamp(34px,5vw,70px)}
.carte-pin{position:relative;z-index:1;height:100svh;min-height:620px;display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:clamp(10px,2vw,36px)}
.pz-nav{display:flex;flex-direction:column;align-items:flex-start}
.pz-nav button{display:flex;align-items:baseline;gap:14px;padding:.03em 0;font:400 clamp(40px,9.6svh,108px)/1.02 var(--f-titre);text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1.2px var(--sourd);
  transition:color .35s,-webkit-text-stroke-color .35s,translate .6s var(--ease)}
.pz-nav button small{font:600 13px/1 var(--f-txt);letter-spacing:.14em;color:var(--sourd);-webkit-text-stroke:0;transition:color .3s}
.pz-nav button:hover{-webkit-text-stroke-color:var(--blanc)}
.pz-nav button.on{color:var(--blanc);-webkit-text-stroke-color:var(--blanc);translate:16px 0}
.pz-nav button.on small{color:var(--acide)}
.pz-scene{position:relative;height:100%}
.pz{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,310px);align-items:center;gap:clamp(16px,2.4vw,44px);visibility:hidden}
.pz.on{visibility:visible}
.pz-img{position:relative;justify-self:center;width:min(60svh,35vw,100%);aspect-ratio:1;will-change:transform}
.pz-img img{position:relative;width:100%;height:100%}
.pz-img .tag{position:absolute;left:-10%;bottom:4%;font-size:clamp(50px,6.8vw,122px);rotate:-8deg}
.pz-n{font:600 13px/1 var(--f-txt);letter-spacing:.16em;text-transform:uppercase;color:var(--acide)}
.pz-info h3{font:400 clamp(38px,3.4vw,56px)/1 var(--f-titre);text-transform:uppercase;margin-top:10px}
@media (min-width:900px){.pz-info h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
.ing{margin-top:16px;border-top:1.5px solid var(--blanc)}
.ing li{padding:10px 0 9px;border-bottom:1px solid var(--trait);font:600 17px/1.2 var(--f-txt);letter-spacing:.07em;text-transform:uppercase}
.marques{margin-top:14px;min-height:26px;display:flex;align-items:center;gap:10px}
.vege{display:inline-block;padding:5px 11px 4px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--acide);color:var(--acide);font:700 11.5px/1 var(--f-txt);letter-spacing:.16em;text-transform:uppercase}
.piment{display:inline-flex;align-items:center;gap:5px;font:700 11.5px/1 var(--f-txt);letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.piment::before{content:"Ça pique";margin-right:5px}
.piment i{width:9px;height:17px;border-radius:60% 60% 50% 50%/70% 70% 40% 40%;background:var(--trait);rotate:14deg}
.piment[data-n="1"] i:nth-child(-n+1),.piment[data-n="2"] i:nth-child(-n+2),.piment[data-n="3"] i{background:#ff4b2b}
.pz-bas{display:flex;align-items:center;gap:20px;margin-top:18px}
.slap{flex:none;width:112px;border-radius:9px;overflow:hidden;background:var(--blanc);color:#0a0a0a;rotate:-5deg;box-shadow:0 12px 26px rgba(0,0,0,.55)}
.slap-h{display:flex;align-items:baseline;gap:6px;padding:6px 9px 4px;background:var(--acide);font:400 20px/1 var(--f-titre);text-transform:uppercase}
.slap-h small{font:700 9.5px/1 var(--f-txt);letter-spacing:.1em}
.slap-p{padding:1px 4px 6px;text-align:center;font:400 38px/1.1 var(--f-tag)}
.pz-compte{position:absolute;left:var(--marge);bottom:26px;display:flex;align-items:center;gap:12px;font:600 13px/1 var(--f-txt);letter-spacing:.16em;color:var(--sourd)}
.pz-compte b{color:var(--blanc);font-weight:600}
.pz-compte i{width:120px;height:2px;background:var(--trait)}
.pz-compte u{display:block;height:100%;background:var(--acide);transform-origin:left;transform:scaleX(.166)}

.cotes{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,110px);padding-block:clamp(50px,7vw,110px)}
.cote h3{display:inline-block;font:400 clamp(30px,3vw,46px)/1 var(--f-titre);text-transform:uppercase;padding-bottom:10px;background:linear-gradient(var(--acide),var(--acide)) 0 100%/100% 5px no-repeat}
.cote ul{margin-top:10px}
.cote li{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--trait);font:600 19px/1.2 var(--f-txt);letter-spacing:.05em;text-transform:uppercase}
.cote li i{flex:1;border-bottom:2px dotted var(--sourd);translate:0 4px}
.cote li b{font:400 24px/1 var(--f-titre)}
.cote li button{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--sourd);transition:background .25s,box-shadow .25s,color .25s,transform .25s var(--ease)}
.cote li button:hover{background:var(--acide);color:#000;box-shadow:none;transform:rotate(90deg)}
.cote li button:active{transform:scale(.85)}
.cote li svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* ═════════════ LE FOUR ═════════════ */
.four{position:relative;isolation:isolate;padding-top:clamp(70px,10vw,160px);background:#0c0c0c url(img/mur.webp) center/cover}
.four::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--noir),rgba(10,10,10,.6) 18%,rgba(10,10,10,.6) 70%,var(--noir))}
.four-grille{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.72fr);gap:clamp(26px,5vw,90px);align-items:start;margin-top:clamp(60px,8vw,130px)}
.manif{font:400 clamp(38px,5.9vw,104px)/1.03 var(--f-titre);text-transform:uppercase}
.manif em{font-style:normal}
.manif .m{color:#3b3a37;transition:color .25s}
.manif .m.vu{color:var(--blanc)}
.manif em .m.vu{color:var(--acide)}
html:not(.js) .manif .m{color:var(--blanc)}
.puce{display:inline-block;width:1.62em;height:.72em;margin:0 .06em;border-radius:99px;overflow:hidden;vertical-align:-.03em;rotate:-3deg;background:var(--beton)}
.puce img{width:100%;height:100%;object-fit:cover}
.four-photo{position:sticky;top:110px;rotate:2.5deg}
.four-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:20px;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.four-photo .tag{position:absolute;left:-18%;bottom:-4%;font-size:clamp(46px,5.4vw,96px);rotate:-9deg}
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(60px,9vw,150px);border-top:1.5px solid var(--blanc)}
.chiffres li{padding:clamp(18px,2.4vw,36px) clamp(12px,2vw,30px) 0 0}
.chiffres li+li{padding-left:clamp(12px,2vw,30px);border-left:1px solid var(--trait)}
.chiffres b{font:400 clamp(72px,13vw,230px)/.86 var(--f-titre)}
.chiffres i{font:400 clamp(30px,4.6vw,80px)/1 var(--f-titre);font-style:normal;color:var(--acide);margin-left:.08em}
.chiffres span{display:block;margin-top:14px;font:600 14px/1.4 var(--f-txt);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.four-large{position:relative;margin:clamp(50px,7vw,110px) var(--marge) 0;height:min(84svh,60vw);min-height:340px;border-radius:28px;overflow:hidden}
.four-large-in{position:absolute;inset:-14% 0;will-change:transform}
.four-large-in img{width:100%;height:100%;object-fit:cover}
.four-large>.tag{position:absolute;z-index:4;left:4%;bottom:12%;font-size:clamp(66px,11.5vw,200px);rotate:-6deg}

/* ═════════════ LE QUARTIER ═════════════ */
.quartier{position:relative;overflow:hidden;padding-top:clamp(80px,11vw,170px)}
.fantome.f1{left:-3vw;top:34%}
.fantome.f2{right:-8vw;top:30%;rotate:6deg}
.quartier-tete{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:30px 40px;flex-wrap:wrap}
.mur-photos{position:relative;z-index:1;height:clamp(600px,66vw,1080px);margin:clamp(50px,6vw,90px) var(--marge) 0}
.ph{position:absolute;left:var(--x);top:var(--y);width:var(--w);rotate:var(--r);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;will-change:transform}
.ph.prise{cursor:grabbing}
.ph img{width:100%;border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.65);pointer-events:none;transition:box-shadow .3s}
.ph::before{content:"";position:absolute;z-index:1;top:-15px;left:50%;width:104px;height:30px;translate:-50% 0;rotate:-4deg;background:rgba(205,245,69,.9);clip-path:polygon(0 12%,4% 0,9% 10%,96% 2%,100% 14%,97% 88%,100% 100%,3% 94%)}
.ph:nth-child(even)::before{background:rgba(245,243,238,.86);rotate:5deg;left:36%}
.ph figcaption{position:absolute;left:4%;bottom:-.62em;font:400 clamp(26px,3vw,48px)/1 var(--f-tag);color:var(--blanc);rotate:-4deg;text-shadow:0 2px 10px rgba(0,0,0,.9)}

/* ═════════════ COMMANDER ═════════════ */
.modes{position:relative;padding-top:clamp(80px,11vw,170px)}
.modes-tete{padding-bottom:clamp(50px,6vw,90px)}
.modes-liste{position:relative;border-bottom:1.5px solid var(--trait)}
.mode{position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,300px) auto;align-items:center;gap:clamp(14px,2.6vw,46px);width:100%;padding:clamp(16px,2.2vw,34px) var(--marge);
  border-top:1.5px solid var(--trait);text-decoration:none;overflow:hidden;transition:color .35s}
.mode::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--acide);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.mode:hover,.mode:focus-visible{color:#0a0a0a}
.mode:hover::before,.mode:focus-visible::before{transform:none}
.mode-n{font:600 14px/1 var(--f-txt);letter-spacing:.16em;align-self:start;padding-top:1.1em}
.mode-t{padding-top:.08em;font:400 clamp(50px,10vw,176px)/1.02 var(--f-titre);text-transform:uppercase;white-space:nowrap;transition:translate .6s var(--ease)}
.mode:hover .mode-t{translate:22px 0}
.mode-d{font-size:clamp(16px,1.25vw,19px);line-height:1.4}
.mode-a{display:inline-flex;align-items:center;gap:8px;font:700 14px/1 var(--f-txt);letter-spacing:.16em;text-transform:uppercase}
.mode-a svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.mode:hover .mode-a svg{transform:translate(4px,-4px) rotate(45deg)}
.mode-apercu{position:absolute;z-index:4;left:0;top:0;width:clamp(200px,20vw,320px);aspect-ratio:4/5;pointer-events:none;opacity:0;scale:.6;rotate:6deg;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.5);transition:opacity .3s,scale .5s var(--ease)}
.mode-apercu.vu{opacity:1;scale:1}
.mode-apercu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.mode-apercu img.on{opacity:1}

/* ═════════════ INFOS ═════════════ */
.infos{position:relative;padding-block:clamp(90px,12vw,180px) clamp(110px,16vw,260px)}
.infos-grille{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,6vw,110px);align-items:start;margin-top:clamp(56px,7vw,110px)}
.etat-grand{font:700 14px/1 var(--f-txt);letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.etat-grand b{display:inline-block;margin-right:10px;padding:7px 12px 6px;border-radius:8px;background:var(--acide);color:#0a0a0a}
.etat-grand.ferme b{background:var(--blanc)}
.infos address{margin-top:22px;font:400 clamp(38px,5vw,84px)/1 var(--f-titre);text-transform:uppercase}
.infos-b{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.horaires{width:100%;max-width:560px;margin-top:clamp(36px,4vw,60px);border-collapse:collapse;border-top:1.5px solid var(--blanc)}
.horaires th,.horaires td{padding:12px 0 11px;border-bottom:1px solid var(--trait);font:600 16px/1.2 var(--f-txt);letter-spacing:.1em;text-transform:uppercase;text-align:left}
.horaires td{text-align:right;color:var(--gris)}
.horaires tr.auj th,.horaires tr.auj td{color:var(--acide)}
.horaires tr.auj th::before{content:"→ "}
.plan{position:relative;rotate:1.5deg}
.plan svg{width:100%;height:auto;border-radius:26px}
.plan .trajet{animation:trajet 1.6s linear infinite}
@keyframes trajet{to{stroke-dashoffset:-16}}
.plan .croix{filter:url(#bombe)}
.plan .tag{position:absolute;left:52%;top:26%;font-size:clamp(40px,4.6vw,78px);rotate:-10deg}

/* ═════════════ PIED ═════════════ */
.pied{position:relative;background:var(--acide);color:#0a0a0a;padding-top:clamp(120px,17vw,250px);overflow:hidden}
.pied-mot{margin:0 var(--marge);font:400 var(--fs,29vw)/.82 var(--f-titre);text-transform:uppercase;white-space:nowrap;text-align:center}
.pied-bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 30px;padding-block:26px 30px;font:600 13.5px/1.3 var(--f-txt);letter-spacing:.12em;text-transform:uppercase}
.pied-liens{display:flex;flex-wrap:wrap;gap:8px 26px}
.pied-liens button,.pied-liens a,.pied-credit a{font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .4s var(--ease);padding-bottom:3px}
.pied-liens button:hover,.pied-liens a:hover,.pied-credit a:hover{background-size:100% 2px}
.pied-credit a{background-size:100% 2px;font-weight:700}

/* ═════════════ éléments flottants ═════════════ */
.bombe{position:fixed;inset:0;width:100%;height:100%;z-index:80;pointer-events:none}
.bulle{position:fixed;left:0;top:0;z-index:95;pointer-events:none;width:92px;height:92px;margin:-46px 0 0 -46px;display:grid;place-items:center;border-radius:50%;background:var(--acide);color:#0a0a0a;font:400 15px/1 var(--f-titre);letter-spacing:.06em;text-transform:uppercase;scale:0;transition:scale .4s var(--ease)}
.bulle.vu{scale:1}
.toast{position:fixed;left:50%;bottom:26px;z-index:96;max-width:min(92vw,460px);padding:14px 20px 13px;border-radius:12px;background:var(--blanc);color:#0a0a0a;font:700 14px/1.3 var(--f-txt);letter-spacing:.1em;text-transform:uppercase;text-align:center;translate:-50% calc(100% + 110px);transition:translate .6s var(--ease);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.toast.vu{translate:-50% 0}
.onglet{position:fixed;right:0;top:50%;z-index:55;writing-mode:vertical-rl;translate:0 -50%;padding:14px 7px;border-radius:9px 0 0 9px;background:var(--blanc);color:#0a0a0a;font:700 10.5px/1 var(--f-txt);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:background .25s,padding .3s var(--ease)}
.onglet:hover{background:var(--acide);padding-right:12px}
.barre{display:none}

/* panier */
.voile{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.voile.vu{opacity:1;visibility:visible;transition:opacity .4s}
.panier{position:fixed;top:0;right:0;bottom:0;z-index:71;width:min(450px,100vw);display:flex;flex-direction:column;background:var(--asphalte);border-left:1px solid var(--trait);transform:translateX(102%);visibility:hidden;transition:transform .7s var(--ease),visibility 0s .7s}
.panier.ouvert{transform:none;visibility:visible;transition:transform .7s var(--ease)}
.panier-tete{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 16px}
.panier-tete h2{font:400 44px/1 var(--f-titre);text-transform:uppercase}
.ferme{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--sourd);transition:background .25s,color .25s,transform .4s var(--ease)}
.ferme:hover{background:var(--blanc);color:#000;transform:rotate(90deg)}
.ferme svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.panier-corps{flex:1;overflow:auto;padding:0 24px;overscroll-behavior:contain}
.panier-vide{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:30px;color:var(--gris)}
.panier-vide .tag{font-size:92px;rotate:-6deg}
.panier.plein .panier-vide{display:none}
.panier-liste li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--trait)}
.panier-liste .nom{font:400 24px/1.05 var(--f-titre);text-transform:uppercase}
.panier-liste .qte{display:flex;align-items:center;gap:4px}
.panier-liste .qte button{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--sourd);font:600 18px/1 var(--f-txt);transition:background .2s,color .2s}
.panier-liste .qte button:hover{background:var(--acide);color:#000;box-shadow:none}
.panier-liste .qte span{min-width:24px;text-align:center;font:400 20px/1 var(--f-titre)}
.panier-liste .px{min-width:52px;text-align:right;font:400 22px/1 var(--f-titre)}
.panier-pied{padding:16px 24px 24px;border-top:1px solid var(--trait);display:none}
.panier.plein .panier-pied{display:block}
.choix{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.choix button{height:42px;border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--trait);font:700 12px/1 var(--f-txt);letter-spacing:.1em;text-transform:uppercase;text-align:center;color:var(--gris);transition:background .25s,color .25s}
.choix button[aria-checked="true"]{background:var(--blanc);color:#0a0a0a;box-shadow:none}
.total{display:flex;align-items:baseline;justify-content:space-between;margin:18px 0 14px;font:600 14px/1 var(--f-txt);letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.total b{font:400 46px/1 var(--f-titre);color:var(--blanc);letter-spacing:0}
.panier-merci{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:26px;padding:30px;background:var(--asphalte);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.panier.merci .panier-merci{opacity:1;visibility:visible;transition:opacity .4s}
.panier-merci .tag{font-size:min(58px,14vw);rotate:-6deg}
.panier-merci p{font-size:19px;line-height:1.45;color:var(--gris)}
.panier-merci p b{color:var(--blanc)}

/* visionneuse */
.visionneuse{padding:0;border:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;display:none;place-items:center;color:var(--blanc)}
.visionneuse[open]{display:grid}
.visionneuse::backdrop{background:rgba(5,5,5,.93)}
.visionneuse img{max-width:92vw;max-height:80vh;border-radius:8px;rotate:-1.2deg}
.visionneuse p{position:absolute;left:50%;bottom:4vh;translate:-50% 0;font:400 clamp(34px,5vw,64px)/1 var(--f-tag);color:var(--acide);rotate:-4deg}
.visionneuse button{position:absolute;right:22px;top:22px;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--blanc);color:#000}
.visionneuse button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* ═════════════ TABLETTE ET TÉLÉPHONE ═════════════ */
@media (max-width:1080px){
  .etat{display:none}
  .nav{gap:20px}
  .mode{grid-template-columns:auto minmax(0,1fr) auto}
  .mode-d{grid-column:2/4;grid-row:2;max-width:420px}
  .mode-a{grid-row:1;grid-column:3}
}
@media (max-width:899px){
  :root{--haut:72px}
  .nav,.onglet,.pz-nav,.pz-compte,.mode-apercu,.bulle{display:none}
  .burger{display:block}
  .top-d{gap:8px}
  .btn-panier span{display:none}
  .btn-panier{padding:0 8px;height:44px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--sourd)}
  .btn-panier b{background:var(--acide);color:#000}
  .logo b{font-size:27px}.logo i{font-size:18px}

  .hero{--fs:36vw;--pz:86vw;--dep:var(--haut);padding-bottom:18px}
  .hero-h{white-space:normal;line-height:.9}
  .hero-h .l{display:block}
  .hero-panel{margin-top:calc(var(--fs)*-.2);height:auto;display:flex;flex-direction:column;padding:18px;border-radius:22px}
  .hero-panel::after{background:linear-gradient(rgba(0,0,0,.1) 40%,rgba(0,0,0,.72))}
  .tache{display:none}
  .hero-copy{position:relative;left:auto;top:auto;max-width:none;margin-top:calc(var(--pz) - var(--fs)*.15 + 22px)}
  .hero-copy h2{font-size:30px}
  .hero-cta{position:relative;right:auto;bottom:auto;margin-top:20px;flex-wrap:wrap}
  .hero-cta .btn{flex:1}
  .hero-pizza{top:calc(var(--dep) + var(--fs)*1.45)}
  .hero .t1{right:2vw;top:calc(var(--dep) + var(--fs)*1.5 + var(--pz)*.2);font-size:17vw}
  .hero .t2{left:4vw;top:calc(var(--dep) + var(--fs)*1.45 + var(--pz)*.78);translate:none;font-size:19vw}
  .hero .t3{display:none}
  .pastille{right:2vw;top:calc(var(--dep) + var(--fs)*1.45 + var(--pz)*.56);width:23vw}

  .titre{font-size:clamp(64px,21vw,170px)}
  .titre.petit{font-size:clamp(46px,13.2vw,110px)}
  .titre .tag{font-size:.4em;right:-.02em;bottom:-.52em}
  .carte-tete,.quartier-tete{row-gap:44px}

  .carte-pin{height:auto;min-height:0;display:block;padding-inline:0}
  .pz-scene{display:flex;gap:14px;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding:26vw var(--marge) 26px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pz-scene::-webkit-scrollbar{display:none}
  .pz{position:relative;inset:auto;visibility:visible;display:block;flex:0 0 82vw;scroll-snap-align:center;padding:0 20px 22px;border-radius:24px;background:var(--beton)}
  .pz-img{width:86%;margin:-24vw auto 0}
  .pz-img .tag{font-size:17vw;left:-12%}
  .pz-info{margin-top:26px}
  .cotes{grid-template-columns:1fr;padding-top:30px}

  .four-grille{grid-template-columns:1fr}
  .four-photo{position:relative;top:auto;width:72%;margin:10px auto 0}
  .four-photo .tag{left:-14%;font-size:15vw}
  .chiffres{grid-template-columns:1fr}
  .chiffres li,.chiffres li+li{padding:18px 0 22px;border-left:0;border-bottom:1px solid var(--trait)}
  .chiffres b{font-size:30vw}.chiffres i{font-size:11vw}
  .four-large{height:120vw;border-radius:22px}
  .four-large>.tag{font-size:21vw}

  .mur-photos{height:auto;display:flex;gap:22px;overflow-x:auto;margin-inline:0;padding:26px var(--marge) 60px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .mur-photos::-webkit-scrollbar{display:none}
  .ph{position:relative;left:auto;top:auto;flex:0 0 76vw;width:auto;align-self:center;scroll-snap-align:center;cursor:pointer}
  .ph figcaption{font-size:9vw}

  .mode{grid-template-columns:auto minmax(0,1fr);gap:6px 14px;padding-block:22px}
  .mode-t{font-size:15.5vw;white-space:normal}
  .mode-d{grid-column:2;grid-row:2}
  .mode-a{grid-column:2;grid-row:3;margin-top:10px;color:var(--acide)}
  .mode:hover .mode-a{color:inherit}

  .infos-grille{grid-template-columns:1fr}
  .infos address{font-size:11vw}
  .plan{rotate:0deg}
  .plan .tag{font-size:13vw}
  .pied{padding-bottom:84px}
  .pied-bas{flex-direction:column;align-items:flex-start}

  .barre{position:fixed;left:10px;right:10px;bottom:10px;z-index:56;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:6px;padding:6px;border-radius:18px;background:rgba(20,20,19,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.6);translate:0 140%;transition:translate .6s var(--ease)}
  .barre.vu{translate:none}
  .barre a,.barre button{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border-radius:13px;font:700 12.5px/1 var(--f-txt);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--blanc)}
  .barre .fort{background:var(--acide);color:#0a0a0a}
  .barre .fort b{display:grid;place-items:center;min-width:24px;height:24px;border-radius:99px;background:#0a0a0a;color:var(--blanc);font:400 13px/1 var(--f-titre)}
  .barre svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .toast{bottom:86px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js .rv,.js .titre .titre-t{opacity:1;translate:none}
  .chargeur{display:none}
}