/* Pizzeria : la feuille commune des sites de pizzeria, copiee du systeme de Panda Gourmand
   (pandagourmand/index.html). Chaque page pose ses couleurs dans :root (--y, --k, --r, --p,
   --y-ink, --k-2) : la feuille ne connait aucune marque. .figure est l'image de l'affiche
   (le logo ou la pizza), la ou Panda a son panda. */

@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url('/assets/fonts/archivo-latin.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/montserrat-latin.woff2') format('woff2')}

/* Les trois couleurs sont mesurees sur le logo : le jaune de la combinaison, le noir de
   sa bande, le rouge du nom. Deux chasses d'Archivo seulement : 62 % pour les titres,
   88 % pour les boutons et les etiquettes. */
:root{
  --y:#FEC816;--k:#11110E;--r:#CF1926;--w:#fff;
  --p:#FBF7EC;                /* porcelaine : le fond des sections qu'on lit */
  --af:'Archivo','HelveticaNeue-CondensedBlack','Avenir Next Condensed','Roboto Condensed','Arial Narrow',sans-serif;
  --y-ink:#3a2c00;            /* texte secondaire sur jaune, teinte du jaune */
  --k-2:#b9b29a;              /* texte secondaire sur noir */
  --gut:max(clamp(20px,5vw,64px),env(safe-area-inset-left));--gut-r:42px;--wrap:1180px;--top:64px;
  --bord:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)));   /* bord gauche de la colonne */
  --bw:20px;--br:max(9px,env(safe-area-inset-right));                    /* la double bande : largeur, retrait */
  --colle:0px;                                                             /* hauteur de l'en-tete quand il colle */
  --barre:0px;--mq:0px;                                                   /* poses par le script */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --back:cubic-bezier(0.34,1.56,0.64,1);
}
@media (min-width:760px){:root{--colle:var(--top)}}
@media (min-width:900px){:root{--bw:30px;--br:max(14px,env(safe-area-inset-right));--gut-r:max(var(--gut),calc(var(--br) + var(--bw) + 24px))}}
*{box-sizing:border-box}
html{touch-action:manipulation;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;scroll-padding-block:calc(var(--colle) + 12px) calc(var(--barre) + 16px);-webkit-text-size-adjust:100%;scrollbar-color:var(--k) var(--y)}
body{margin:0;padding-bottom:var(--barre);font-family:'Montserrat',system-ui,sans-serif;font-weight:500;font-size:17px;line-height:1.55;color:var(--k);background:var(--y);overflow-x:hidden;caret-color:var(--r)}
::selection{background:var(--k);color:var(--y)}
img,svg,canvas{display:block;max-width:100%}
[hidden]{display:none!important}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:2px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--r);outline-offset:3px;border-radius:4px}
.s-k :focus-visible,.s-r :focus-visible,.carte :focus-visible,.pied :focus-visible{outline-color:var(--y)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:var(--gut);padding-right:var(--gut-r)}
.d{font-family:var(--af);font-weight:900;font-stretch:62%;text-transform:uppercase;letter-spacing:-.01em;line-height:.98;text-wrap:balance}
h2.d{font-size:clamp(44px,8.4vw,92px)}
/* sous chaque grand titre, une ligne qui dit de quoi parle la section */
.d small{display:block;margin-top:14px;font-size:clamp(16px,1.9vw,21px);font-stretch:88%;font-weight:800;letter-spacing:.01em;line-height:1.15}
.ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saut{position:absolute;left:12px;top:-60px;z-index:60;background:var(--k);color:var(--y);padding:10px 14px;border-radius:8px;font-weight:700}
.saut:focus{top:12px}
#gestes,#avis,#traiteur,#infos,#questions,#horaires{scroll-margin-top:24px}

/* La double bande noire de la combinaison descend toute la page, sur le bord droit.
   Chaque section la redessine dans la couleur qui se lit sur son fond. */
.s,.hero,.carte-v,.pied,.zoom{--bande:var(--k);background-color:var(--fond,var(--y));background-image:linear-gradient(90deg,var(--bande) 0 36%,transparent 36% 64%,var(--bande) 64% 100%);background-repeat:no-repeat;background-size:var(--bw) 100%;background-position:right var(--br) top}
.s{position:relative;padding-block:clamp(72px,10vw,140px) clamp(64px,9vw,120px)}
.s-k,.carte-v,.pied{--fond:var(--k);--bande:var(--y);color:var(--w)}
.s-r{--fond:var(--r);--bande:var(--y);color:var(--w)}
.s-p{--fond:var(--p)}
.s-k h2 small,.carte h2 small{color:var(--w)}

/* Bandeau de demonstration */
.mq{background:var(--k);color:var(--w);font-size:12.5px;line-height:1.4;text-align:center;padding:8px var(--gut);text-wrap:balance}
.mq{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq b{background:var(--y);color:var(--k);font-family:var(--af);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;padding:2px 7px;border-radius:3px;margin-right:8px}

/* Boutons */
.b{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 24px;border-radius:999px;border:2.5px solid var(--k);font-family:var(--af);font-weight:800;font-stretch:88%;font-size:17px;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:transform .14s var(--ease-out),background-color .18s ease,color .18s ease,border-color .18s ease}
.b:active{transform:scale(.97)}
.b-k{background:var(--k);color:var(--y)}
.b-o{color:var(--k)}
.b-y{background:var(--y);color:var(--k);border-color:var(--y)}
@media (hover:hover) and (pointer:fine){
  .b-k:hover{background:var(--r);border-color:var(--r);color:var(--w)}
  .b-o:hover{background:var(--k);color:var(--y)}
  .b-y:hover{background:var(--w);border-color:var(--w)}
}
@media (max-width:480px){.b{font-size:15.5px;padding-inline:20px}}

/* Entete */
/* L'en-tete ne colle qu'a partir de 760 px : en dessous, c'est la barre du bas qui garde
   l'appel sous le pouce, et la scene du bol recupere la place. */
.top{position:relative;z-index:30;background:var(--y);border-bottom:2.5px solid var(--k)}
@media (min-width:760px){.top{position:sticky;top:0}}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;height:var(--top);padding-right:max(var(--gut),env(safe-area-inset-right))}
@media (min-width:900px){.top .wrap{padding-right:var(--gut-r)}}
.wm{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-family:var(--af);font-weight:900;font-stretch:62%;font-size:25px;line-height:.9;text-transform:uppercase;color:var(--k)}
.wm img{width:44px;height:44px;background:var(--w);border-radius:50%;border:2px solid var(--k);padding:3px;object-fit:contain}
.top-r{display:flex;align-items:center;gap:16px}
.nav{display:none;gap:22px;white-space:nowrap;font-family:var(--af);font-weight:800;font-stretch:88%;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.nav a{text-decoration:none;padding:13px 0;border-bottom:2.5px solid transparent}
.etat{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.etat::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--k);opacity:.6}
.etat{position:relative;white-space:nowrap}
.etat.on::before{background:#0b7a2e;opacity:1}
.etat.on::after{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#0b7a2e;animation:pouls 2.4s ease-out infinite}
@keyframes pouls{from{opacity:.55;transform:scale(1)}70%,to{opacity:0;transform:scale(2.6)}}
.top .etat{display:none}
.top .b{min-height:44px;padding:8px 16px;font-size:15px}
@media (min-width:760px){.top .etat{display:inline-flex}}
@media (min-width:980px){.nav{display:flex;gap:18px}}
@media (min-width:980px) and (max-width:1159px){.top .etat{display:none}}
@media (hover:hover) and (pointer:fine){.nav a:hover{border-color:var(--k)}}
.top .b .app{display:none}
/* sur telephone le bouton d'appel est dans la barre du bas : l'en-tete garde le numero, en clair */
@media (max-width:759px){.top .b{min-height:44px;padding:0;border:0;background:none;color:var(--k);font-size:16px;gap:7px}}
@media (max-width:380px){.wm{font-size:21px}.wm span{max-width:5.2em}}

/* Hero : l'affiche. Le panda et son soleil en sont la masse, le titre passe devant. */
.hero{position:relative;overflow:clip;display:grid;min-height:min(calc(100svh - var(--top) - var(--mq)),1600px);animation:tombe .9s var(--ease-out) both}
@keyframes tombe{from{background-size:var(--bw) 0}}
.hero .wrap{position:relative;width:100%;display:grid;gap:8px;align-content:space-between;padding-top:clamp(22px,6vw,72px)}
.hero-t{position:relative;z-index:1}
.hero .etat{margin-bottom:14px;white-space:normal;animation:leve .7s var(--ease-out) both}
@media (min-width:760px){.hero .etat{display:none}}
@media (min-width:980px) and (max-width:1159px){.hero .etat{display:inline-flex}}
.hero h1{font-size:clamp(46px,min(15.4vw,9.6svh),96px)}
.hero h1 span{display:block;white-space:nowrap;animation:leve .7s var(--ease-out) both}
.hero h1 span:nth-child(2){color:var(--r);animation-delay:.07s}
.hero h1 span:nth-child(3){animation-delay:.14s}
.hero h1 small{animation:leve .7s .21s var(--ease-out) both}
.lead{max-width:30em;margin-top:20px;font-size:clamp(17px,1.6vw,20px);font-weight:600;animation:leve .7s .28s var(--ease-out) both}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;animation:leve .7s .35s var(--ease-out) both}
.acces{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:6px;font-size:15px;font-weight:700;animation:leve .7s .4s var(--ease-out) both}
.acces a{display:inline-flex;align-items:center;min-height:44px}
.preuve{max-width:34em;margin-top:18px;font-size:15px;font-weight:600;color:var(--y-ink);animation:leve .7s .42s var(--ease-out) both}
.preuve b{color:var(--k);font-weight:800}
.scene{justify-self:center;width:min(84vw,440px,56svh);margin-top:28px}
.scene-i{position:relative;aspect-ratio:1/.8}
.soleil{position:absolute;left:50%;bottom:-46%;width:100%;aspect-ratio:1;border-radius:50%;background:var(--r);translate:-50% 0;overflow:hidden;animation:soleil .9s .1s var(--ease-out) both}
/* un fond de trame, comme l'encre d'une affiche imprimee */
.soleil::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(17,17,14,.3) 0 34%,transparent 36%) 0 0/9px 9px;-webkit-mask:linear-gradient(200deg,transparent 30%,#000 75%);mask:linear-gradient(200deg,transparent 30%,#000 75%)}
.figure{position:absolute;left:50%;bottom:0;width:64%;translate:-50% 0;transform-origin:50% 100%;animation:figure .8s .45s var(--back) both}
.figure span{display:block;position:relative;animation:flotte 4.2s ease-in-out 1.4s infinite alternate}
.figure img{width:100%;height:auto}
/* la vapeur du bol : trois traits qui se tracent et montent, au trait du logo */
.vap{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--k);stroke-width:2.7;stroke-linecap:round}
.vap path{stroke-dasharray:36;stroke-dashoffset:36;animation:vap 2.8s ease-in-out 1.3s infinite}
.vap path:nth-child(2){animation-delay:1.7s}
.vap path:nth-child(3){animation-delay:2.1s}
@keyframes vap{0%{stroke-dashoffset:36;transform:translateY(3px)}45%{stroke-dashoffset:0}100%{stroke-dashoffset:-36;transform:translateY(-6px)}}
@keyframes leve{from{opacity:0;transform:translateY(.5em);clip-path:inset(0 -45% 100% 0)}to{opacity:1;transform:none;clip-path:inset(-20% -45% -20% -5%)}}
@keyframes soleil{from{opacity:0;transform:translateY(22%) scale(.92)}to{opacity:1;transform:none}}
@keyframes figure{from{opacity:0;transform:translateY(30%) scale(.94)}to{opacity:1;transform:none}}
@keyframes flotte{to{transform:translateY(-1.6%) rotate(-.8deg)}}
.cue{display:none}
@media (max-width:899px){
  .lead{display:none}.film .hero .acts .b-o{display:none}
  /* Sur telephone l'affiche tient dans l'ecran, au-dessus de la barre du bas, et le panda
     prend toute la place que le texte lui laisse : plus l'ecran est haut, plus il est
     grand. Son soleil deborde alors l'affiche et passe derriere la double bande. Si la
     place manque, il garde sa taille et ce sont ses jambes qui sortent de l'ecran,
     jamais sa tete ni son bol. */
  .hero{min-height:calc(100svh - var(--top) - var(--mq) - var(--barre));background-image:none;animation:none}
  .hero::after{content:"";position:absolute;z-index:1;top:0;bottom:0;right:var(--br);width:var(--bw);background:linear-gradient(90deg,var(--k) 0 36%,transparent 36% 64%,var(--k) 64% 100%);transform-origin:top;animation:bande .9s var(--ease-out) both;pointer-events:none}
  .hero .wrap{display:flex;flex-direction:column;gap:0;padding-top:18px}
  .hero-t{flex:none}
  .scene{display:flex;flex-direction:column;flex:1 1 220px;min-height:220px;width:100%;margin-top:14px;container-type:size}
  .scene-i{flex:none;align-self:center;margin-top:auto;width:min(84vw,440px,56svh)}
  @supports (width:1cqh){.scene-i{width:clamp(min(84vw,440px,56svh),125cqh,min(150cqw,700px))}}
  /* quand le film se joue, elle reste epinglee le temps de l'iris */
  .film .hero-w::after{content:"";display:block;height:60svh}
  .film .hero{position:sticky;top:0;height:calc(100svh - var(--barre));min-height:0}
  .film .hero .wrap{height:100%}
  .film .scene{flex-basis:0;min-height:0}
  /* a l'arrivee, l'affiche commence sous l'en-tete : la pizza se tient au-dessus de la barre du bas */
  .film .scene{padding-bottom:calc(var(--top) + var(--mq))}
  .film .cue{display:flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--af);font-weight:800;font-stretch:88%;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
  .cue .ic{width:16px;height:16px;transform:rotate(90deg);animation:cue 1.1s ease-in-out infinite alternate}
}
/* ce que la barre du bas porte deja n'a plus a encombrer l'affiche */
@media (max-width:759px){.js .hero .etat,.js .hero .acts,.js .hero .acces{display:none}}
@media (max-width:480px){.hero .acts .b-k{flex:1 1 100%}}
@media (max-width:899px) and (max-height:720px){.preuve{display:none}.scene{margin-top:10px}}
@keyframes bande{from{transform:scaleY(0)}}
@media (max-width:899px) and (max-height:600px){.acces{display:none}}
@media (max-width:340px){.hero .b{white-space:normal}}
@media (max-width:480px){.hero h1 small{font-size:15px;margin-top:12px}}
.hors .vap path,.hors .figure span,.hors .cue .ic{animation-play-state:paused}
@media (min-width:900px) and (min-height:1000px){.hero .wrap{align-content:center}}
@media (min-width:900px) and (max-width:1239px){.scene{margin-right:0!important}.film .cote{--bx:68%!important}}
@media (min-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;align-content:end;column-gap:24px}
  .hero-t{padding-bottom:clamp(40px,6vh,84px)}
  .hero h1{font-size:clamp(72px,min(8.2vw,13.6svh),132px)}
  .scene{width:min(44vw,74svh,600px);margin:0 -3vw 0 0;justify-self:end}
  .acces{display:none}
  @media (min-width:1500px){.scene{width:min(46vw,82svh,780px);margin-right:calc((100vw - var(--wrap)) / -2)}}
  /* l'iris s'ouvre sur une affiche qui ne bouge pas : elle reste epinglee le temps qu'il dure */
  .film .hero-w::after{content:"";display:block;height:60svh}
  .film .hero{position:sticky;top:var(--top)}
  .film .cue{display:flex;align-items:center;gap:8px;margin-top:20px;font-family:var(--af);font-weight:800;font-stretch:88%;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;animation:leve .7s .9s var(--ease-out) both}
  .cue .ic{width:16px;height:16px;transform:rotate(90deg);animation:cue 1.1s ease-in-out infinite alternate}
}
@keyframes cue{to{transform:rotate(90deg) translateX(5px)}}

/* ── La carte ──────────────────────────────────────────────────────────────
   Par defaut : un rail de bols, qu'on fait defiler du doigt.
   En mode film (.film sur html) : une scene epinglee ou le bol tourne. */
.carte{position:relative;background:var(--k);color:var(--w)}
.carte-v{padding-block:clamp(72px,10vw,140px) clamp(56px,8vw,104px)}
.carte-h{padding-left:var(--bord);padding-right:calc(var(--br) + var(--bw) + 16px);display:grid;gap:18px}
.carte-h h2{color:var(--y)}
.carte-h p{max-width:34em;color:var(--k-2);font-size:18px}
.plats{display:flex;gap:clamp(14px,2vw,26px);margin:clamp(28px,4vw,48px) calc(var(--br) + var(--bw) + 10px) 0 0;padding:6px 16px 26px var(--bord);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--bord);scrollbar-color:var(--y) #2a2a25;scrollbar-width:thin;overscroll-behavior-x:contain}
.plat{flex:none;width:min(62vw,236px);scroll-snap-align:start}
.rendu{width:100%;height:auto}
.plat h3{margin-top:6px;font-family:var(--af);font-weight:900;font-stretch:62%;font-size:32px;line-height:.98;text-transform:uppercase;color:var(--y)}
.plat p{margin-top:8px;color:var(--k-2);font-size:15.5px;line-height:1.4}
@media (max-width:899px){.plat p{text-wrap:balance}}
.envie{display:none;position:relative;align-items:center;gap:10px;margin-top:14px;min-height:48px;padding:8px 18px 8px 8px;border-radius:999px;border:2.5px solid var(--y);background:var(--k);color:var(--y);font-family:var(--af);font-weight:800;font-stretch:88%;font-size:15px;letter-spacing:.02em;text-transform:uppercase;transition:transform .14s var(--ease-out),background-color .18s ease,color .18s ease}
.js .envie{display:inline-flex}
.envie:active{transform:scale(.96)}
.envie i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--y);color:var(--k);transition:transform .22s var(--back)}
.envie .ic{width:16px;height:16px;stroke-width:3}
.envie .v,.envie[aria-pressed="true"] .p,.envie .t2{display:none}
.envie[aria-pressed="true"]{background:var(--y);color:var(--k)}
.envie[aria-pressed="true"] i{background:var(--k);color:var(--y);transform:scale(1.08)}
.envie[aria-pressed="true"] .v{display:block}
.envie[aria-pressed="true"] .t2{display:inline}
.envie[aria-pressed="true"] .t1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media (hover:hover) and (pointer:fine){.envie:hover{background:var(--y);color:var(--k)}.envie:hover i{background:var(--k);color:var(--y)}}
.plat.fin{width:min(74vw,320px);align-self:center}
.plat.fin .b{margin-top:16px}
.bolw,.carte-n,.carte-x,.carte-j,.carte-s,.fantome-c{display:none}

/* Sous la scene epinglee : la double bande continue tant qu'on voit l'affiche, puis du
   noir, pour qu'aucun jaune ne passe quand la barre d'adresse du telephone se replie. */
.film .carte{z-index:2;height:520svh;margin-top:-160svh;pointer-events:none;background:linear-gradient(90deg,var(--k) 0 36%,transparent 36% 64%,var(--k) 64% 100%) right var(--br) top/var(--bw) 160svh no-repeat,linear-gradient(to bottom,transparent 0 160svh,var(--k) 160svh)}
.film .carte-v{position:sticky;top:0;height:100svh;padding:0;overflow:hidden;clip-path:circle(0 at 72% 55%)}
.film .carte-v.ouv{pointer-events:auto}
.film .carte-h{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.film .bolw{display:block;position:absolute;left:var(--bx,50%);top:var(--by,60%);width:var(--bol,300px);height:var(--bol,300px);margin:calc(var(--bol,300px) / -2) 0 0 calc(var(--bol,300px) / -2);will-change:transform}
.disque{position:absolute;inset:-6%;border-radius:50%;background:var(--r);translate:3% 3%}
.bol{position:absolute;inset:0;width:100%;height:100%;max-width:none;touch-action:pan-y;cursor:grab;opacity:0;transition:opacity .35s ease}
.bolw.la .bol{opacity:1}
.bolw.la.attend .bol{opacity:.25}
.bol.pris{cursor:grabbing}
/* le nom du plat, en tres grand et presque noir, glisse derriere le bol */
.film .fantome-c{display:block;position:absolute;inset:0 calc(var(--br) + var(--bw) + 10px) 0 0;overflow:hidden;pointer-events:none}
.fantome{position:absolute;left:0;top:var(--fy,var(--by,60%));translate:0 -50%;white-space:nowrap;font-family:var(--af);font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:min(44svh,40vw);line-height:.8;color:#1a1a15;will-change:transform;transition:opacity .2s ease}
.astuce{display:none;position:absolute;left:50%;translate:-50% 0;white-space:nowrap;font-family:var(--af);font-weight:800;font-stretch:88%;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--w);transition:opacity .4s ease}
.film .grand .astuce{display:block;bottom:-8.2%}
/* Empile (telephone, tablette debout) : le nom en haut, le bol au milieu, le bouton et
   le compteur sous le pouce. La taille et la place du bol viennent de disposer(),
   dans pg.js, qui mesure ce qu'il reste entre les deux. */
.film .plats{display:block;position:absolute;z-index:1;left:var(--gut);right:var(--gut-r);top:calc(var(--colle) + 16px);bottom:calc(max(var(--barre),env(safe-area-inset-bottom)) + 66px);margin:0;padding:0;overflow:visible;pointer-events:none}
/* une fiche sort avant que la suivante entre : jamais deux titres l'un sur l'autre */
.film .plat{position:absolute;inset:0;width:auto;display:flex;flex-direction:column;align-items:flex-start;opacity:0;transform:translateY(36px);transition:opacity .12s ease-out,transform .3s var(--ease-out)}
.film .plat.av{transform:translateY(-36px)}
.film .plat.on{opacity:1;transform:none;transition:opacity .22s ease-out .12s,transform .5s var(--ease-out) .12s}
.film .plat.on .envie,.film .plat.on .b{pointer-events:auto}
.film .rendu{display:none}
.film .plat h3{margin:0;font-size:clamp(38px,13.5vw,min(11svh,120px));text-wrap:balance}
.film .plat p{margin-top:10px;max-width:19em;font-size:17px;text-wrap:balance}
.film .plat .envie,.film .plat.fin .b{margin-top:auto}
.film .plat.fin{width:auto;align-self:stretch}
/* sous le pouce droit, sur la ligne du bouton : le plat suivant */
.film .carte-v:not(.cote) .carte-s{display:grid;place-items:center;position:absolute;z-index:1;right:calc(var(--gut-r) + 2px);bottom:calc(max(var(--barre),env(safe-area-inset-bottom)) + 64px);width:52px;height:52px;border-radius:50%;border:2.5px solid var(--y);color:var(--y);transition:transform .14s var(--ease-out),background-color .18s ease,color .18s ease}
.carte-s:active{transform:scale(.94)}
.carte-s .ic{width:22px;height:22px;stroke-width:2.6}
.film .plats:has(.fin.on)~.carte-s{visibility:hidden}
/* la phrase qui dit a quoi sert la liste, sur les telephones assez hauts pour la loger */
@media (max-width:899px) and (min-height:700px){.film .carte-v:not(.cote) .carte-j{display:block;position:absolute;z-index:1;left:var(--gut);right:var(--gut-r);bottom:calc(max(var(--barre),env(safe-area-inset-bottom)) + 126px);font-size:14px;line-height:1.35;color:var(--k-2);text-wrap:balance}}
/* Au doigt, chaque defilement se pose sur un plat entier : un cran d'arret par plat,
   poses par pg.js, et l'aimant de proximite du navigateur. */
@media (pointer:coarse){html.film{scroll-snap-type:y proximity}}
.cran{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-snap-align:start}
.film .plats:has(.fin.on)~.carte-j{visibility:hidden}
@media (max-height:699px){.film .carte-v:not(.cote) .plat p{display:none}}
.film .carte-n{display:flex;align-items:center;gap:12px;position:absolute;z-index:1;left:var(--gut);bottom:calc(max(var(--barre),env(safe-area-inset-bottom)) + 10px);min-height:44px;font-family:var(--af);font-weight:800;font-stretch:88%;font-size:15px;letter-spacing:.06em;color:var(--k-2);font-variant-numeric:tabular-nums}
.carte-n b{color:var(--y)}
.crans{display:flex;gap:4px}
.crans i{width:9px;height:4px;border-radius:2px;background:#3a3a33;transition:background-color .25s ease,width .35s var(--ease-out)}
.crans i.on{background:var(--y);width:18px}
@media (max-width:379px){.crans{display:none}}
.film .carte-x{display:flex;align-items:center;position:absolute;z-index:1;right:calc(var(--gut-r) + 2px);bottom:calc(max(var(--barre),env(safe-area-inset-bottom)) + 10px);min-height:44px;padding-inline:8px;font-size:15px;font-weight:700;color:var(--k-2)}
/* Cote a cote (a partir de 900 px de large) : le texte a gauche, le bol a droite */
.film .cote{--bol:min(calc(68svh - var(--barre)),40vw);--bx:70%;--by:calc(50% + var(--top) / 2 - var(--barre) / 2);--fy:76%}
.film .cote .disque{inset:-9%;translate:4% 4%}
.film .cote .plats{left:var(--bord);right:auto;top:var(--top);bottom:calc(var(--barre) + 96px);width:min(40vw,540px)}
.film .cote .plat{justify-content:center}
.film .cote .plat h3{font-size:clamp(60px,min(6.6vw,13svh),124px)}
.film .cote .plat p{font-size:19px;margin-top:18px}
.film .cote .plat .envie,.film .cote .plat.fin .b{margin-top:22px}
.film .cote .carte-n{left:var(--bord)}
.film .cote .carte-x{right:max(calc(var(--gut-r) + var(--bw)),calc((100vw - var(--wrap)) / 2 + var(--gut)))}
.film .cote .carte-j{display:block;position:absolute;z-index:1;left:var(--bord);bottom:calc(var(--barre) + 62px);max-width:min(40vw,34em);font-size:14px;color:var(--k-2);text-wrap:balance}
.film .cote .crans i{width:18px}
.film .cote .crans i.on{width:30px}
.film .cote .astuce{display:block;bottom:-10.5%;font-size:13px}
.bolw.su .astuce,.bolw:not(.pret) .astuce{opacity:0}

/* Le defile des plats */
.defile{background:var(--y);color:var(--k);overflow:hidden;padding-block:14px;border-block:2.5px solid var(--k);position:relative;z-index:3}
.defile div{display:flex;width:max-content;animation:defile 46s linear infinite}
.defile ul{display:flex;flex:none}
.defile li{font-family:var(--af);font-weight:800;font-stretch:88%;font-size:20px;text-transform:uppercase;white-space:nowrap;padding-inline:18px}
.defile li::after{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--r);margin-left:36px;vertical-align:.12em}
@keyframes defile{to{transform:translateX(-50%)}}

/* Trois gestes : la sequence porte l'information, donc elle est numerotee. Le bol
   revient ici une fois, vu du dessus, et tourne un peu avec le defilement. */
/* meme fond que la section d'au-dessus : un filet les separe */
.suite{padding-top:0}
.gestes-h{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:clamp(56px,8vw,104px);border-top:2.5px solid var(--k)}
.tourne{flex:0 1 auto;min-width:0;width:clamp(120px,27vw,330px);height:auto;margin-block:-5% -3%;margin-right:-2%}
/* sur telephone le bol sort du rang : le titre garde ses deux lignes, « une barquette » d'un seul tenant */
@media (max-width:480px){.gestes-h{display:block;position:relative}.gestes-h h2 span{white-space:nowrap}.tourne{position:absolute;right:-11px;top:0;translate:0 -38%;width:clamp(104px,29vw,128px);margin:0}}
.gestes{display:grid;gap:36px;margin-top:clamp(36px,5vw,64px);counter-reset:g}
.gestes li{counter-increment:g;position:relative;display:grid;grid-template-columns:56px 1fr;column-gap:14px;align-items:start;padding-top:18px}
.gestes li::after{content:"";position:absolute;left:0;right:0;top:0;height:2.5px;background:var(--k);transform-origin:left}
.gestes li::before{content:counter(g);font-family:var(--af);font-weight:900;font-stretch:62%;font-size:84px;line-height:.8;color:var(--r)}
.gestes h3{font-family:var(--af);font-weight:900;font-stretch:62%;font-size:32px;line-height:1;text-transform:uppercase}
.gestes p{margin-top:8px;max-width:26em;color:var(--y-ink)}
@media (min-width:900px){.gestes{grid-template-columns:repeat(3,1fr);gap:40px}}
/* chaque geste arrive a son tour : le trait se tire, puis le chiffre tombe */
.js .gestes li::after{transform:scaleX(0);transition:transform .7s var(--ease-out)}
.js .gestes li::before,.js .gestes li>div{opacity:0;transform:translateY(18px);transition:opacity .4s ease,transform .6s var(--ease-out)}
.js .gestes.vu li::after{transform:none}
.js .gestes.vu li::before,.js .gestes.vu li>div{opacity:1;transform:none}
.js .gestes li:nth-child(2)::after,.js .gestes li:nth-child(2)::before,.js .gestes li:nth-child(2)>div{transition-delay:.12s}
.js .gestes li:nth-child(3)::after,.js .gestes li:nth-child(3)::before,.js .gestes li:nth-child(3)>div{transition-delay:.24s}

/* Les avis : la note, et les trois mots qui reviennent, composes comme une affiche */
.avis{display:grid;gap:32px;align-items:end}
.note{display:flex;align-items:baseline;font-family:var(--af);font-weight:900;font-stretch:62%;font-size:clamp(130px,36vw,260px);line-height:.74;letter-spacing:-.02em;color:var(--y);overflow:hidden;padding:.06em 0 .16em;margin-bottom:-.1em}
.note small{font-size:.3em;font-stretch:88%;color:var(--w);letter-spacing:0;margin-left:.2em}
.note span{display:inline-block}
.mots{font-size:clamp(54px,9vw,128px);color:var(--w)}
@media (max-width:899px){h2.mots{font-size:clamp(54px,15.4vw,76px)}}
.mots span{display:block;overflow:hidden;padding-top:.12em;margin-top:-.06em}
.mots b{display:block;font-weight:inherit}
.avis p{margin-top:22px;max-width:32em;font-size:18px}
.avis .b{margin-top:24px}
.js .note span,.js .note small,.js .mots b{transform:translateY(112%);transition:transform .8s var(--ease-out)}
.js .note span:nth-child(2),.js .mots span:nth-child(2) b{transition-delay:.07s}
.js .note span:nth-child(3),.js .mots span:nth-child(3) b{transition-delay:.14s}
.js .note small{transition-delay:.22s}
.js .note.vu span,.js .note.vu small,.js .mots.vu b{transform:none}
@media (min-width:900px){.avis{grid-template-columns:auto 1fr;gap:64px}}

/* Traiteur : la photo du comptoir entre par un volet, une fois */
.trt{overflow:hidden}
.trt h2{color:var(--y)}
.trt p{margin-top:20px;max-width:30em;font-size:18px;color:var(--k-2)}
.trt .b{margin-top:26px}
.trt-f{position:relative;overflow:hidden;margin:calc(-1 * clamp(72px,10vw,140px)) 0 44px;aspect-ratio:3/2}
.trt-f img{width:100%;height:100%;object-fit:cover}
.js .trt-f{clip-path:inset(0 0 0 100%);transition:clip-path .9s var(--ease-out)}
.js .trt.vu .trt-f{clip-path:inset(0)}
@media (min-width:900px){
  .trt{min-height:min(88svh,760px);display:grid;align-items:center}
  .trt-f{position:absolute;inset:auto calc(var(--br) + var(--bw) + 14px) auto 52%;top:50%;translate:0 -50%;margin:0;aspect-ratio:3/2}
  .trt-c{position:relative;width:100%}
  .trt-c>h2{max-width:min(30em,46vw)}
  .trt-c>p{max-width:min(30em,40vw)}
  .trt-c>.fours-c{grid-template-columns:1fr;max-width:min(540px,calc(52vw - var(--gut) - 28px))}   /* les deux cartes restent a gauche de la photo */
}

/* Infos pratiques */
.inf-i{margin-top:24px;max-width:44em;font-size:18px;color:var(--y-ink)}
/* le numero de la rue, en grand, comme une plaque */
.plaque{display:none}
@media (min-width:1100px){.plaque{display:block;position:absolute;right:max(calc(var(--gut-r) + 8px),calc((100vw - var(--wrap)) / 2 + var(--gut-r)));top:clamp(48px,6vw,96px);font-family:var(--af);font-weight:900;font-stretch:62%;font-size:clamp(220px,24vw,340px);line-height:.8;color:var(--r)}.inf-i{max-width:min(44em,52vw)}}
.inf{display:grid;gap:44px;margin-top:clamp(32px,5vw,56px)}
.inf h3{font-family:var(--af);font-weight:900;font-stretch:62%;font-size:32px;line-height:1;text-transform:uppercase;padding-bottom:12px;border-bottom:2.5px solid var(--k)}
.adr{margin-top:16px;font-size:22px;font-weight:700;line-height:1.3;font-style:normal}
.adr span{white-space:nowrap}
.inf .b{margin-top:20px}
.inf .tel{display:block;margin-top:14px;font-family:var(--af);font-weight:900;font-stretch:62%;font-size:clamp(46px,9vw,68px);line-height:1;text-decoration:none}
@media (hover:hover) and (pointer:fine){.inf .tel:hover{color:var(--r)}}
.hor{font-variant-numeric:tabular-nums;font-size:16px}
.hor div{display:grid;grid-template-columns:6.4em 1fr;gap:10px;padding:11px 0;border-bottom:1px solid rgba(17,17,14,.22)}
.hor dt{font-weight:800}
.hor dd{text-wrap:balance}
.hor .auj{background:var(--k);color:var(--y);margin-inline:-12px -4px;padding-inline:12px 4px;border-radius:8px;border-color:transparent}
@media (min-width:900px){.inf{grid-template-columns:1fr 1fr;gap:72px}}
@media (max-width:899px){#infos .wrap{display:flex;flex-direction:column}#infos .inf{margin-top:28px}#infos .inf>div:last-child{order:-1}#infos .inf-i{order:1;margin-top:44px}}
@media (max-width:480px){.avis .b,.trt .b,.inf .b{display:flex}}

/* Questions */
.faq{margin-top:clamp(28px,4vw,48px);border-bottom:2.5px solid var(--k);max-width:860px}
.faq details{border-top:2.5px solid var(--k);break-inside:avoid}
@media (min-width:1100px){.faq{max-width:none;columns:2;column-gap:64px}}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;cursor:pointer;list-style:none;font-family:var(--af);font-weight:800;font-stretch:88%;font-size:clamp(19px,2.2vw,23px);line-height:1.2;transition:color .18s ease}
@media (max-width:899px){.faq summary{text-wrap:balance}}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{width:24px;height:24px;stroke-width:2.6;transition:transform .2s var(--ease-out)}
.faq details[open] summary .ic{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){.faq summary:hover{color:var(--r)}}
.faq p{padding:0 0 22px;max-width:38em}

/* Pied : le nom en grand, et le panda qui passe la tete sur son soleil */
.pied{position:relative;isolation:isolate;overflow:hidden;color:var(--k-2);padding-top:clamp(150px,min(27vw,28svh),350px);padding-bottom:calc(40px + env(safe-area-inset-bottom));font-size:15px}
.pied-m{position:relative;font-family:var(--af);font-weight:900;font-stretch:62%;text-transform:uppercase;color:var(--y);font-size:19.4vw;line-height:.82;letter-spacing:-.012em;padding-left:var(--gut)}
.pied-m>span:not(.pied-p){display:block;overflow:hidden;padding:.06em .04em 0 0}
.pied-m b{display:block;font-weight:inherit}
.pied-p{position:absolute;right:max(calc(var(--gut-r) + 3vw),var(--bord));bottom:100%;width:clamp(170px,min(30vw,32svh),380px);aspect-ratio:1/.8;overflow:hidden;margin-bottom:-.4%;z-index:-1}
/* sur telephone le panda descend a cote de « Panda » : son soleil se pose sur « Gourmand » au lieu du vide */
@media (max-width:759px){.pied{padding-top:20vw}.pied-p{bottom:50%;right:var(--gut-r);width:clamp(138px,calc(63vw - 90px),210px);margin-bottom:0}}
.pied-p::before{content:"";position:absolute;left:0;bottom:-46%;width:100%;aspect-ratio:1;border-radius:50%;background:var(--r)}
.pied-p img{position:absolute;left:18%;bottom:0;width:64%;height:auto}
.js .pied-m b{transform:translateY(102%);transition:transform .9s var(--ease-out)}
.js .pied-m>span:nth-of-type(3) b{transition-delay:.08s}
.js .pied-p::before{transform:translateY(60%);transition:transform .9s .25s var(--ease-out)}
.js .pied-p img{transform:translateY(102%);transition:transform .7s .5s var(--back)}
.js .pied-m.vu b,.js .pied-m.vu .pied-p::before,.js .pied-m.vu .pied-p img{transform:none}
.pied-c{display:grid;gap:26px;margin-top:clamp(28px,4vw,48px)}
.pied-c b{color:var(--w)}
.pied-c a{display:inline-block;padding-block:11px;color:var(--y)}
.pied-c p{line-height:1.5}
.pied-n{display:flex;flex-wrap:wrap;gap:0 22px}
.calme-b{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;color:var(--y);font-weight:600;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:2px}
@media (hover:hover) and (pointer:fine){.pied-c a:hover,.calme-b:hover{color:var(--w)}}
@media (min-width:760px){.pied-m{font-size:min(12.4vw,153px);white-space:nowrap;padding-left:var(--bord)}.pied-m>span:not(.pied-p){display:inline-block;vertical-align:top}.pied-c{grid-template-columns:1fr 1fr 1.2fr;gap:56px}}

/* La barre du bas. Sur telephone c'est la telecommande, la des la premiere seconde et
   toujours de la meme hauteur : l'etat d'ouverture (ou la liste), puis « Y aller » et
   un grand « Appeler », cale a droite sous le pouce. Sur ordinateur elle n'apparait
   que pour porter la liste. */
.barre{position:fixed;inset-inline:0;bottom:0;z-index:40;background:var(--y);color:var(--k);border-top:2.5px solid var(--k);transform:translateY(105%);visibility:hidden;transition:transform .32s var(--ease-drawer),visibility 0s .32s}
.barre.on{transform:none;visibility:visible;transition:transform .32s var(--ease-drawer)}
.barre .wrap{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom))}
.barre p{flex:1 1 0;min-width:0;font-weight:700;font-size:15px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.barre p b{font-family:var(--af);font-weight:800;font-stretch:88%;font-size:13px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;margin-right:8px}
.barre p b:empty{display:none}
.barre .etat{text-decoration:none}
.barre-a{display:flex;align-items:center;gap:8px}
.barre .b{min-height:46px;padding:8px 16px;font-size:15px}
.barre-x{min-height:44px;padding:10px 8px;font-size:15px;font-weight:700;text-decoration:underline;white-space:nowrap}
@media (min-width:760px){.barre .barre-i{display:none}}
@media (max-width:759px){
  .barre .num{display:none}
  .barre .wrap{flex-direction:column;align-items:stretch;gap:7px;padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom))}
  .barre p{flex:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barre .b{min-height:50px}
  .barre .barre-t{flex:1}
  .barre.envies .barre-i{display:none}
  .barre-x{order:-1;min-height:50px;padding-inline:2px 8px}
  /* la liste tient sur une ligne qu'on fait glisser du doigt, estompee aux deux bords */
  .barre.envies p{display:flex;align-items:center;overflow:visible}
  .barre.envies p span{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding:8px 16px 7px 8px;margin:-8px 0 -7px -8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 16px),transparent)}
  .barre.envies p span::-webkit-scrollbar{display:none}
  /* l'etat d'ouverture mene aux horaires : une cible de 35 px au lieu de 19 */
  .barre:not(.envies) p{margin-block:-8px}
  .barre .etat{display:flex;width:fit-content;padding:8px 12px 8px 0}
}
@media (max-width:379px){.barre.envies .b{padding-inline:10px}}
@media (max-width:339px){.barre.envies .b .ic{display:none}}

/* Moins de mouvement : a la demande du systeme, ou par le bouton du pied de page */
.calme .defile div,.calme .vap path,.calme .figure span,.calme .etat.on::after,.calme .cue .ic{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero,.hero .etat,.hero h1 span,.hero h1 small,.lead,.acts,.preuve,.soleil,.figure{animation:fondu .3s ease both}
  .figure span,.defile div,.etat.on::after,.cue .ic{animation:none}
  .vap path{animation:none;stroke-dashoffset:0}
  .barre,.barre.on{transition:none}
  .js .gestes li::after,.js .gestes li::before,.js .gestes li>div,.js .note span,.js .note small,.js .mots b,.js .pied-m b,.js .pied-p::before,.js .pied-p img{transform:none;opacity:1;transition:none}
  .js .trt-f{clip-path:none}
  .calme-b{display:none}
  @keyframes fondu{from{opacity:0}to{opacity:1}}
}

/* Le prix et les tailles d'une pizza : trois pilules, la moyenne choisie d'avance */
.plat .prix{display:inline-block;margin-left:6px;font-family:var(--af);font-weight:800;font-stretch:88%;font-size:14px;color:var(--y);white-space:nowrap}
.tailles{display:flex;gap:6px;margin-top:12px}
.tailles button{min-height:34px;padding:4px 12px;border-radius:999px;border:2px solid var(--k-2);color:var(--k-2);font-family:var(--af);font-weight:800;font-stretch:88%;font-size:13px;letter-spacing:.02em;text-transform:uppercase;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.tailles button[aria-pressed="true"]{background:var(--w);border-color:var(--w);color:var(--k)}
.film .plat .tailles{margin-top:12px}
.film .plat .envie{margin-top:14px}
.film .plat .tailles,.film .plat .envie{pointer-events:none}
.film .plat.on .tailles{pointer-events:auto}

/* la bouche du four : un disque sombre, une lueur au fond, le feu WebGL se dessine devant */
.feu .disque{background:radial-gradient(circle at 50% 62%,#5a1d08 0,#2a0f06 38%,#140a06 62%,var(--k) 74%)}

/* ── Toute la carte : chaque prix est une pilule qui ajoute la pizza, dans cette taille ── */
.menu .wrap{display:grid;gap:18px}
.menu .d{margin:0}
.menu-p{max-width:34em;margin:0;font-size:16px;color:var(--k-2)}
.menu-g{margin-top:14px}
.menu-g h3{margin:0 0 4px;padding:8px 0;border-bottom:2px solid var(--y);font-family:var(--af);font-weight:800;font-stretch:88%;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--y)}
.menu-g ul{list-style:none;margin:0;padding:0}
.mi{display:grid;grid-template-columns:1fr;gap:8px 14px;padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--y) 18%,transparent)}
.mi.av{grid-template-columns:64px 1fr}
.mi img{grid-row:1/3;width:64px;height:64px;border-radius:50%;object-fit:cover;background:#2a2722}
.mi-t{min-width:0}
.mi-t b{display:block;color:var(--y);font-family:var(--af);font-weight:800;font-stretch:88%;font-size:19px;letter-spacing:.01em;text-transform:uppercase;line-height:1.1}
.mi-t b i{font-style:normal;color:var(--r);font-size:16px;vertical-align:.05em;margin-left:4px}
.mi-t small{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:var(--k-2)}
.pp{display:flex;flex-wrap:wrap;gap:6px}
.mi.av .pp{grid-column:2}
.pz{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 12px 4px 10px;border-radius:999px;border:2px solid color-mix(in srgb,var(--y) 45%,transparent);color:var(--y);font-family:var(--af);font-weight:800;font-stretch:88%;font-size:14px;letter-spacing:.02em;white-space:nowrap;transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .12s ease}
.pz b{font-weight:800;font-size:12px;letter-spacing:.08em;opacity:.75}
.pz:active{transform:scale(.96)}
.pz[aria-pressed="true"]{background:var(--y);border-color:var(--y);color:var(--k)}
.pz[aria-pressed="true"] b{opacity:.9}
.pz[aria-pressed="true"]::before{content:"✓";margin-right:2px}
.menu-n{margin:10px 0 0;font-size:14px;color:var(--k-2)}
@media (min-width:760px){
  .menu .wrap{grid-template-columns:1fr 1fr;column-gap:40px}
  .menu .d,.menu-p,.menu-n{grid-column:1/-1}
  .mi{grid-template-columns:1fr auto;align-items:center}
  .mi.av{grid-template-columns:64px 1fr auto}
  .mi img{grid-row:auto}
  .mi.av .pp{grid-column:auto}
}

/* la ligne d'offre sous le titre, et le bouton de commande du telephone (ailleurs la barre le porte) */
.sous{margin:14px 0 0;font-weight:700;font-size:15px;max-width:30em}
.hero-cmd{margin:18px 0 0}
@media (min-width:760px){.hero-cmd{display:none}}
@media (max-width:759px){.js .hero .hero-cmd{display:block}}
/* la carte de fidelite : dix cases, comme sur la carte imprimee */
.fid{display:grid;gap:10px;margin-top:22px;padding:18px 20px;border:2px solid var(--y);border-radius:14px}
.fid b{font-family:var(--af);font-weight:800;font-stretch:88%;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--y)}
.cases{display:flex;gap:6px;flex-wrap:wrap}
.cases i{width:30px;height:30px;border:2px solid var(--y);border-radius:6px;opacity:.9}

.fid small{font-size:14px;color:var(--k-2)}
/* le midi : deux photos cote a cote */
.midi-i{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.midi-i img{width:100%;height:auto;aspect-ratio:9/10;object-fit:cover;border-radius:14px}
.js .midi-i img{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js .midi-i img:nth-child(2){transition-delay:.12s}
.js .midi-i.vu img{opacity:1;transform:none}
/* sur telephone la longue ligne de marque sous le titre reste pour les lecteurs d'ecran : l'affiche garde sa place pour la pizza */
@media (max-width:759px){.hero h1 small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* les deux pizzerias : deux cartes, chacune son numero et son plan */
.fours-c{display:grid;gap:14px;margin-top:26px}
@media (min-width:700px){.fours-c{grid-template-columns:1fr 1fr;gap:18px}}
.four{padding:20px 20px 22px;border:2px solid color-mix(in srgb,var(--y) 55%,transparent);border-radius:16px}
.four h3{margin:0;font-family:var(--af);font-weight:800;font-stretch:88%;font-size:24px;text-transform:uppercase;color:var(--y);line-height:1.05}
.four h3 small{display:block;margin-top:4px;font-size:13px;letter-spacing:.14em;color:var(--k-2)}
.four address{margin-top:12px;font-style:normal;font-weight:600;color:var(--y)}
.four p{margin-top:8px;font-size:15px;max-width:none;color:var(--k-2)}
.four-a{font-weight:700}
.four .acts{margin-top:16px}
.trt .four .b{margin-top:0}
/* dans la barre : quelle pizzeria recoit la commande */
.fours{display:flex;gap:6px;margin:0 0 2px}
.fours button{min-height:32px;padding:3px 12px;border-radius:999px;border:2px solid color-mix(in srgb,var(--k) 40%,transparent);color:var(--k);font-family:var(--af);font-weight:800;font-stretch:88%;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.fours button[aria-checked="true"]{background:var(--k);color:var(--y);border-color:var(--k)}
@media (min-width:760px){.barre .wrap{flex-wrap:wrap}.fours{order:-1;flex-basis:100%;margin-bottom:4px}}

/* la ligne fine au-dessus du titre de l'affiche */
.avant{margin:0 0 12px;font-family:var(--af);font-weight:800;font-stretch:125%;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--k-2)}
/* l'en-tete : un numero par pizzeria ; sur telephone, celui de la pizzeria choisie */
.four-tel small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;line-height:1}
.top-r{display:flex;gap:8px;align-items:center}
.four-tel .num{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.05}
@media (min-width:760px){.top .four-tel{padding-block:5px}}
@media (max-width:759px){.four-tel[aria-current="false"]{display:none}.four-tel small{display:none}}
/* la carte entiere : familles en puces collantes, lignes compactes sur telephone */
.menu-nav{position:sticky;top:0;z-index:2;display:flex;gap:6px;overflow-x:auto;margin:0 calc(-1 * var(--gut));padding:10px var(--gut);background:var(--fond,var(--k));scrollbar-width:none;grid-column:1/-1}
.menu-nav::-webkit-scrollbar{display:none}
.menu-nav a{flex:none;padding:6px 12px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--y) 40%,transparent);color:var(--y);font-family:var(--af);font-weight:800;font-stretch:88%;font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.menu-g{scroll-margin-top:64px}
[data-q]:not([data-q="1"])::after{content:" ×" attr(data-q);font-weight:800}
@media (max-width:759px){
  .mi{grid-template-columns:1fr;align-items:center;gap:6px 10px;padding:10px 0}
  .mi.av{grid-template-columns:44px 1fr}
  .mi img{width:44px;height:44px;grid-row:1/3}
  .mi-t b{font-size:16px}
  .mi-t small{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pp{gap:5px;flex-wrap:nowrap}
  .mi.av .pp{grid-column:2}
  .pz{flex:1 1 0;min-height:32px;padding:2px 6px;font-size:12.5px;gap:4px;justify-content:center}
  .pz:only-child{flex:0 0 auto;min-width:96px;padding-inline:16px}
  .pz b{font-size:10.5px}
  .pz[aria-pressed="true"]::before{margin-right:0}
}
/* la barre : les lignes se retirent d'un toucher, et l'envoi passe devant l'appel */
#barre-l button{display:inline;padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
.barre.envies .b.b-o#barre-sms{background:var(--k);color:var(--y);border-color:var(--k)}
.barre.envies .b.b-k.barre-t{background:transparent;color:var(--k);border-color:var(--k)}
/* le dialogue de fin de commande : une feuille qui monte du bas sur telephone */
.fin{border:0;padding:0;background:transparent;width:100%;max-width:none;max-height:100dvh;margin:auto 0 0;color:var(--k)}
.fin::backdrop{background:rgba(0,0,0,.62)}
.fin form{background:var(--y);color:var(--k);border-radius:22px 22px 0 0;padding:20px var(--gut) calc(20px + env(safe-area-inset-bottom));display:grid;gap:12px;max-width:560px;margin:0 auto}
@media (min-width:760px){.fin{margin:auto;width:min(560px,92vw)}.fin form{border-radius:22px}}
.fin h2{margin:0;font-family:var(--af);font-weight:800;font-stretch:88%;font-size:22px;text-transform:uppercase}
.fin-r{margin:0;font-size:15px;line-height:1.45}
.fin-r b{font-family:var(--af);font-weight:800;font-stretch:88%}
.fin-l{display:grid;gap:6px;font-weight:700;font-size:14px}
.fin input[type="text"],.fin select{width:100%;min-height:46px;padding:8px 12px;border:2px solid color-mix(in srgb,var(--k) 35%,transparent);border-radius:12px;background:#fff;color:#111;font:inherit;font-size:16px}
.fin-m{display:flex;gap:8px;border:0;padding:0;margin:0;position:relative}
.fin-m label{flex:1;display:flex;align-items:center;justify-content:center;min-height:46px;border:2px solid var(--k);border-radius:999px;font-family:var(--af);font-weight:800;font-stretch:88%;font-size:14px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.fin-m label:has(:checked){background:var(--k);color:var(--y)}
.fin-m input{position:absolute;opacity:0;width:0;height:0}
.fin-a{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}
.fin-a .b{min-height:48px}
/* le pied : le logo a la place du nom en capitales */
.pied-logo{padding-inline:var(--gut)}
.pied-logo img{width:min(86vw,520px);height:auto;opacity:0;transform:translateY(10%);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.pied-logo.vu img{opacity:1;transform:none}

/* la barre : le retrait d'une ligne se voit, le mot d'apres l'envoi, la derniere commande */
#barre-l button::after{content:" ✕";opacity:.65;font-size:.85em}
.barre-ok{position:fixed;left:50%;bottom:calc(var(--barre) + 12px);z-index:41;transform:translateX(-50%);width:min(92vw,520px);margin:0;padding:12px 16px;border-radius:14px;background:var(--k);color:var(--y);font-weight:700;font-size:14px;line-height:1.35;box-shadow:0 12px 40px rgba(0,0,0,.35)}
#barre-r{text-decoration:underline dotted}
/* le dialogue : la pizzeria, la note de livraison, et avec ca, le SMS */
.fin-four label{font-size:13px}
.fin-n{margin:0;font-size:13px;color:var(--k-2);line-height:1.4}
.fin-n a{color:inherit;text-underline-offset:3px}
.fin-plus{display:grid;gap:6px}
.fin-plus>b{font-family:var(--af);font-weight:800;font-stretch:88%;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.fin-plus .pz{color:var(--k);border-color:color-mix(in srgb,var(--k) 45%,transparent)}
.fin-plus .pz[aria-pressed="true"]{background:var(--k);color:var(--y);border-color:var(--k)}
.fin-plus .pz b{font-size:11px;letter-spacing:.04em;text-transform:uppercase;opacity:.85}
/* la carte filtree */
.menu-f{display:flex;gap:6px;flex-wrap:wrap;grid-column:1/-1}
.menu-f button{min-height:36px;padding:4px 14px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--y) 55%,transparent);color:var(--y);font-family:var(--af);font-weight:800;font-stretch:88%;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.menu-f button[aria-pressed="true"]{background:var(--y);color:var(--k);border-color:var(--y)}
.fid b+small+b{margin-top:8px}
/* le film : le prix dans chaque pilule de taille */
.tailles button{letter-spacing:0;padding-inline:10px}
/* le dialogue ne deborde jamais de l'ecran : les pilules « et avec ca » passent a la ligne */
.fin,.fin form{box-sizing:border-box;overflow-x:hidden}
.fin-plus .pp{flex-wrap:wrap}
.fin-plus .pz{flex:0 0 auto;min-height:36px}
.fin-m{flex-wrap:wrap}
.fin-m label{flex:1 1 40%;min-width:0;padding-inline:8px;text-align:center}

/* ── Telephone : l'affiche entiere des l'ouverture, sans saut ── */
@media (max-width:759px){
  :root{--barre:calc(104px + env(safe-area-inset-bottom))}
  .js .barre{transform:none;visibility:visible;transition:none}
  .avant{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;letter-spacing:.18em;font-stretch:100%}
  .scene-i{width:min(84vw,440px,max(100cqh,260px))}
  .barre .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom))}
  .barre p{grid-column:1;margin:0}
  .fours{grid-column:2;margin:0}
  .fours button{min-height:30px;padding:2px 10px;font-size:11.5px}
  .barre-a{grid-column:1/-1}
  .barre.envies .fours{display:none}   /* la liste prend le rang entier : la pizzeria se choisit dans le dialogue */
  .barre.envies .wrap{grid-template-columns:minmax(0,1fr)}
}
.figure .badge{position:absolute;z-index:2;left:12px;bottom:12px;padding:7px 12px;border-radius:999px;background:rgba(14,13,16,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f3ecdc;font-weight:600;font-size:13px;line-height:1;white-space:nowrap}
.figure .badge b{font-weight:800}
.hero-n{display:block;margin-top:8px;font-size:13px;font-weight:600;color:var(--k-2)}
.s-k .b-o,.pied .b-o,.carte .b-o{color:var(--y);border-color:var(--y)}
/* ── le dialogue : une vraie feuille ── */
.fin{overscroll-behavior:contain}
body:has(dialog[open]){overflow:hidden}
.fin form::before{content:"";justify-self:center;width:36px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--k) 35%,transparent)}
.fin input[type="text"],.fin select{background:color-mix(in srgb,var(--k) 92%,#fff);color:#141216;border:0;border-radius:10px;min-height:48px}
.fin input[type="text"]:focus-visible,.fin select:focus-visible{outline:0;box-shadow:0 0 0 3px var(--r)}
.fin-m label:has(:focus-visible){outline:3px solid var(--r);outline-offset:3px}
.fin-a{display:grid;grid-template-columns:1fr;gap:4px}
.fin-a .b-k{min-height:52px;width:100%}
.fin-a .b-o{border:0;min-height:40px;text-decoration:underline;text-underline-offset:3px;background:none}
.fin-r{display:grid;gap:4px}
.fin-r span{display:flex;justify-content:space-between;gap:12px}
.fin-r span i{font-style:normal;font-family:var(--af);font-weight:800;font-stretch:88%;margin-right:4px}
.fin-r .tot{margin-top:4px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--k) 25%,transparent);color:var(--r);font-family:var(--af);font-weight:800;font-stretch:88%;text-transform:uppercase;letter-spacing:.06em}
.fin-r small{font-size:12px;color:var(--k-2);letter-spacing:.1em;text-transform:uppercase}
/* ── la carte au pouce : pilules de 40 px, la taille ecrite une fois ── */
.menu-g h3{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.menu-g h3 span{opacity:.7;letter-spacing:.08em;font-size:12px}
@media (max-width:759px){
  .pz{min-height:40px;font-size:13.5px}
  .mi{padding:12px 0}
}
.hor div{grid-template-columns:9em 1fr}

/* la barre : la liste ne passe jamais sous les puces, les boutons se replient */
.barre p{min-width:0;overflow:hidden}
.barre.envies p{overflow:hidden}
.barre-a{flex-wrap:wrap}
/* telephone : le titre un peu plus court, pas de « defilez », pour que l'affiche entiere tienne */
@media (max-width:759px){
  .hero h1{font-size:clamp(42px,min(13.5vw,8.6svh),84px)}
  .film .cue{display:none}
  .hero-cmd{margin-top:14px}
  .hero-n{margin-top:6px}
  .hero .wrap{padding-top:14px}
}
@media (max-width:759px){.hero .preuve,.hero .lead,.hero .hero-n{padding-right:calc(var(--bw) + var(--br) + 6px)}}
/* la barre tient sur deux rangs : « Y aller » n'est qu'une epingle sur telephone, la derniere commande se rappelle dans le premier rang */
.barre-r{padding:0;border:0;background:none;font:inherit;font-weight:700;color:inherit;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
@media (max-width:759px){
  .barre-i .t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .barre-i{padding-inline:14px}
  .barre-a{flex-wrap:nowrap}
  .barre-a .b{padding-inline:12px}
  .barre p{display:flex;align-items:center;gap:10px}
  .barre .etat{flex:0 1 auto;min-width:0;overflow:hidden}
  .barre-r{flex:0 1 auto;margin-left:auto;white-space:nowrap;font-size:14px;overflow:hidden;text-overflow:ellipsis}
  #barre-l:empty{display:none}
  .barre .wrap:has(.fours) p:has(.barre-r:not([hidden])) .etat{display:none}   /* deux pizzerias : pas la place pour l'etat et le rappel */
}

/* Deux pizzerias (fiche : fours[].porte) : le four se choisit dans le haut de page, chacun
   dit s'il est allume en ce moment, avec ses propres horaires. Le choix suit la barre du bas. */
.portes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0 6px;max-width:540px}
.porte{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;min-height:68px;padding:8px 12px 8px 8px;border-radius:16px;border:2px solid color-mix(in srgb,var(--k) 22%,transparent);background:none;color:var(--k);text-align:left;font:inherit;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,transform .12s ease}
.porte img{width:52px;height:52px;border-radius:10px;object-fit:cover}
.porte b{display:block;font-family:var(--af);font-weight:800;font-stretch:88%;font-size:14px;letter-spacing:.05em;text-transform:uppercase;line-height:1.15}
.porte small{display:block;font-size:13px;line-height:1.3;opacity:.78}
.hero .porte .etat,.js .hero .porte .etat{display:flex;margin:3px 0 0;font-size:13px;line-height:1.25;white-space:normal;animation:none;gap:6px}
.porte .etat::before{width:8px;height:8px}
.porte .etat.on::after{width:8px;height:8px;margin-top:-4px}
.porte[aria-pressed="true"]{border-color:var(--k);background:color-mix(in srgb,var(--k) 10%,transparent)}
.porte:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.porte:hover{border-color:color-mix(in srgb,var(--k) 60%,transparent)}}
@media (max-width:759px){
  .portes{margin:14px 0 2px}
  .portes{gap:6px}
  .porte{grid-template-columns:30px minmax(0,1fr);column-gap:8px;row-gap:3px;min-height:0;padding:8px}
  .porte>span{display:contents}
  .porte img{grid-column:1;grid-row:1;width:30px;height:30px;border-radius:7px}
  .porte b{grid-column:2;grid-row:1;font-size:12.5px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .porte small{grid-column:1/-1;grid-row:2;font-size:12px;line-height:1.25}
  .hero .porte .etat,.js .hero .porte .etat{grid-column:1/-1;grid-row:3;margin:0;font-size:12.5px}
}

/* Une pizza a trois distances (fiche : zoom). Le cadre reste au milieu, la photo s'approche
   d'un detail puis du bord de la pate ; le titre est en deux moities, la legende vient en dernier. */
.zoom{height:260vh;position:relative}
.zoom-s{position:sticky;top:var(--colle);height:calc(100svh - var(--colle) - var(--barre));display:grid;place-items:center;overflow:hidden}   /* sous l'en-tete quand il colle */
.zoom-p{position:relative;width:min(28vw,400px,44svh);display:flex;flex-direction:column;align-items:center}
.zoom h2{display:contents}
.zoom h2>span{display:flex;justify-content:center;white-space:nowrap;font-size:clamp(44px,min(6.4vw,9.5svh),104px)}
.zoom .za{order:1;margin-bottom:.1em}
.zoom-f{order:2;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:20px;background:#2a2722}
.zoom-f img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.zoom .zb{order:3;margin-top:.12em;transition:opacity .5s ease,translate .6s var(--ease-out)}
.zoom-l{order:4;position:absolute;left:calc(100% + 40px);top:clamp(44px,min(6.4vw,9.5svh),104px);width:30ch;font-size:16px;transition:opacity .5s ease,translate .6s var(--ease-out)}
.zoom-l p{margin:0 0 14px}
.zoom-l .pp{gap:6px}
.zoom[data-etape="2"] .zoom-f img{transform:scale(var(--s2,1.7));transform-origin:var(--o2,50% 50%)}
.zoom[data-etape="3"] .zoom-f img{transform:scale(var(--s3,2.4));transform-origin:var(--o3,50% 50%)}
.js .zoom[data-etape="1"] .zb,.js .zoom[data-etape="1"] .zoom-l,.js .zoom[data-etape="2"] .zoom-l{opacity:0;translate:0 14px;pointer-events:none}
@media (max-width:899px){
  .zoom-s{padding-inline:calc(var(--bw) + var(--br) + 6px)}       /* les bandes de droite restent libres, des deux cotes pour garder le centre */
  .zoom-p{width:min(60vw,300px,44svh)}
  .zoom h2>span{font-size:min(10vw,7svh)}
  .zoom-l{position:static;width:calc(100vw - 2 * (var(--bw) + var(--br) + 6px));max-width:420px;margin-top:10px;text-align:center;font-size:15px}
  .zoom-l .pp{justify-content:center;flex-wrap:nowrap}
  .zoom-l .pz{padding:4px 10px}
}
@media (prefers-reduced-motion:reduce){.zoom-f img,.zoom .zb,.zoom-l{transition:none}}

/* Une fiche du film qui mene ailleurs (fiche : pizzas[].lien) : le meme bouton, une fleche */
a.envie{text-decoration:none}
a.envie i{background:var(--y);color:var(--k)}

/* Composer son plat (fiche : compose) : quatre etapes en pilules, le total colle en bas de l'ecran */
.compo .wrap{display:grid;gap:14px}
.compo h2 span:nth-child(2){color:var(--r)}
.compo-p{max-width:34em;font-size:17px;color:var(--y-ink)}
.compo-f{display:grid;gap:26px;margin-top:10px}
.compo-e{display:grid;gap:10px;min-width:0;margin:0;padding:0;border:0}
.compo-e legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:0;margin-bottom:12px;font-family:var(--af);font-weight:900;font-stretch:62%;font-size:28px;line-height:1;text-transform:uppercase}
.compo-e legend>i{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--y);color:var(--k);font-style:normal;font-size:21px}
.compo-e legend small{font-family:var(--af);font-weight:800;font-stretch:88%;font-size:14px;letter-spacing:.06em;color:var(--y-ink)}
.compo .pp{flex-wrap:wrap;gap:8px}
.compo .pz{flex:0 0 auto;position:relative;cursor:pointer;min-height:46px;padding:6px 16px;font-size:15.5px;color:var(--k);border-color:color-mix(in srgb,var(--k) 28%,transparent);user-select:none;-webkit-user-select:none}
.compo .pz b{margin-left:2px;opacity:.7}
.compo .pz input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.compo .pz:has(:checked){background:var(--k);border-color:var(--k);color:var(--p)}
.compo .pz:has(:checked)::before{content:"✓";margin-right:2px}
.compo .pz:has(:focus-visible){outline:3px solid var(--r);outline-offset:3px}
.compo-d p,.compo-n{max-width:40em;font-size:14.5px;line-height:1.45;color:var(--y-ink)}
/* le total, le bouton, puis la composition sur toute la largeur : elle se lit d'un coup d'oeil */
.compo-t{position:sticky;bottom:calc(var(--barre) + 10px);z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 14px;margin-top:4px;padding:10px 10px 12px 18px;border-radius:20px;background:var(--k);color:var(--p);box-shadow:0 16px 44px rgba(0,0,0,.28)}
.compo-t p{display:contents}
.compo-t output{grid-area:1/1;font-family:var(--af);font-weight:900;font-stretch:62%;font-size:36px;line-height:1}
.compo-t small{grid-area:2/1/3/3;min-width:0;font-size:13px;line-height:1.3;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compo-t .b{grid-area:1/2;background:var(--y);border-color:var(--y);color:var(--k);padding-inline:18px}
@media (max-width:420px){.compo-t .b{font-size:15px;padding-inline:14px;gap:8px}}
@media (min-width:900px){.compo-f{grid-template-columns:1fr 1fr;gap:34px 48px}.compo-f>.compo-n,.compo-t{grid-column:1/-1}}

/* Les avis cites (fiche : avis.citations) : des cartes qu'on fait glisser, en grille sur ordinateur */
.cit{display:grid;grid-auto-flow:column;grid-auto-columns:min(84%,360px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:44px calc(-1 * var(--gut)) 0;padding:4px var(--gut) 12px;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
.cit::-webkit-scrollbar{display:none}
.cit li{scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:20px 20px 18px;border-radius:18px;background:color-mix(in srgb,var(--w) 9%,transparent);border:1.5px solid color-mix(in srgb,var(--w) 24%,transparent)}
.cit q{font-size:17px;line-height:1.45;font-weight:600;quotes:"«\00a0" "\00a0»"}
.cit b{font-family:var(--af);font-weight:800;font-stretch:88%;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.cit b small{display:block;margin-top:2px;font-size:11.5px;letter-spacing:.14em;opacity:.7}
@media (min-width:900px){.cit{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin-inline:0;padding-inline:0}}

/* La commande du bureau : un prenom par repas, dans le recapitulatif */
.fin-qui{display:grid;grid-template-columns:minmax(0,1fr) 8.5em;align-items:center;gap:8px;font-size:14px;line-height:1.3}
.fin-qui span{display:flex;justify-content:space-between;gap:8px;min-width:0}
.fin-qui b{white-space:nowrap}
.fin .fin-qui input[type="text"]{min-height:42px}

/* Le plan, sous les horaires (fiche : plan) */
.plan{display:block;width:100%;height:min(62vw,380px);margin-top:40px;border:0;border-radius:18px;background:color-mix(in srgb,var(--k) 8%,transparent)}