/* BUN'Z : site public.
   Hero bureau recodé d'après Site dev/Maquettes/hero-pc/hero-a3-final.png (2752 × 1527).
   Toutes les cotes du hero sont en unités de maquette : calc(N * var(--u)). */

:root {
  --rouge: #DE0D16;          /* titre et boutons, mesuré sur la maquette */
  --rouge-anneau: #CC0A1E;   /* anneaux des miroirs, un peu plus sombres */
  --encre: #220511;          /* sous-titre */
  --gris-nav: #2C2D2F;       /* liens de la barre */
  --sticker: #2A0814;
  --blanc: #FDFDFD;
}

*, *::before, *::after { box-sizing: border-box; }
html { container-type: inline-size; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  --u: calc(100cqw / 2752);
  margin: 0;
  color: var(--encre);
  background: var(--blanc);
  font-family: 'Poppins', system-ui, sans-serif;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

/* ------------------------------------------------------------ boutons */

.bouton {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--rouge);
  color: #fff;
  white-space: nowrap;
  transition: background .2s, transform .15s;
}
.bouton:hover { background: #C00A12; }
.bouton:active { transform: scale(.98); }

/* ------------------------------------------------------------ barre de navigation */
/* Copie des unités de Pickelz (websites/pickelz/css/style.css l. 69 et 87-95), en px/rem et non en unités
   de maquette : mêmes tailles et même emplacement que Pickelz à toutes les largeurs d'écran.
   .container : max 1180 px, marges clamp(1.2rem, 5vw, 3rem) ; .nav : padding .7rem 0 ; liens Poppins 500
   16 px, interligne 1.65, espacés de 1.8rem ; pilule de langue 42 × 34, bordure 2 px, Poppins 700 .82rem. */

.nav {
  position: absolute; z-index: 10;
  top: 0; left: 0; right: 0;
  padding: .7rem 0;
  background: transparent; /* le béton du hero passe dessous : aucune transition visible */
}
.nav__inner {
  width: 100%; max-width: 1180px; margin-inline: auto;
  padding-inline: clamp(1.2rem, 5vw, 3rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 39.6px; /* hauteur du mot-logo Pickel'z : 1.5rem × 1.65 */
}
.nav__logo { width: 81.2px; flex: none; } /* même largeur que le mot-logo Pickel'z */
.nav__logo img { width: 100%; height: auto; }
.nav__liens {
  display: flex; align-items: center; gap: 1.8rem;
  font-size: 16px; font-weight: 500; line-height: 1.65;
  color: var(--gris-nav);
}
.nav__liens a { opacity: .9; transition: color .25s, opacity .25s; }
.nav__liens a:hover { opacity: 1; color: var(--rouge); }
.nav__langue {
  flex: none;
  width: 42px; height: 34px;
  border: 2px solid rgba(44, 45, 47, .4);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700; line-height: 1;
  color: var(--gris-nav);
  transition: background .25s, color .25s, border-color .25s;
}
.nav__langue:hover { background: var(--gris-nav); border-color: var(--gris-nav); color: #fff; }

/* réseaux du hero : place et tailles de Pickelz (style.css l. 118-119, responsive.css l. 35-40),
   habillage du bouton de langue */
.hero__reseaux {
  position: absolute; left: clamp(.8rem, 3vw, 2.2rem); top: 50%; transform: translateY(-50%); z-index: 5;
  display: flex; flex-direction: column; gap: 1rem;
}
.hero__reseaux a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid rgba(44, 45, 47, .4);
  color: var(--gris-nav);
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.hero__reseaux a:hover { background: var(--gris-nav); border-color: var(--gris-nav); color: #fff; transform: translateY(-2px); }
@media (max-width: 768px) { .hero__reseaux { left: .6rem; gap: .7rem; } .hero__reseaux a { width: 34px; height: 34px; } }
@media (max-width: 480px) { .hero__reseaux { display: none; } }

/* ------------------------------------------------------------ gribouillis */
/* Motif extrait du PDF de leur menu imprimé, posé sur le fond de chaque section.
   Tuile = la période exacte du motif (1465 × 961 px dans le PDF) : aucun joint visible.
   Calé sur la page : site.js donne à chaque section --motif-y = -(sa position), le motif continue d'une section à l'autre. */

body { --motif-t: calc(1816.6 * var(--u)) calc(1191.6 * var(--u)); }
.hero::before, .nouveautes::after, .menu::before, .roue::before, .pied::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('../img/menu/motif.webp') 0 var(--motif-y, 0) / var(--motif-t) repeat;
  opacity: var(--motif, .1);
}
@media (max-width: 1023px) { body { --motif-t: 468.8px 307.5px; } }

/* ------------------------------------------------------------ hero */

.hero {
  --decalage: 150; /* décalage vers la droite du bloc titre + sous-titre + bouton (unités de maquette) */
  position: relative;
  height: calc(1527 * var(--u));
  /* coupe à droite (miroirs qui sortent de l'écran) mais pas en bas : les miroirs du bas passent
     au premier plan sur le bandeau suivant */
  overflow-x: clip; overflow-y: visible;
  z-index: 2;
  /* béton clair : blanc à gauche, gris au centre droit (profil mesuré colonne par colonne) */
  background:
    linear-gradient(90deg,
      #FCFCFC 0%, #FCFCFC 23%, #FBFBFB 27%, #F7F7F7 32%, #F4F4F4 36%, #F1F1F1 41%,
      #EDEDED 45%, #E7E7E7 50%, #E3E3E3 54.5%, #E0E0E0 59%, #E0E0E0 68%, #E1E1E1 72.7%,
      #E5E5E5 77%, #EAEAEA 82%, #EDEDED 86%, #EDEDED 91%, #EEEEEE 100%);
}
.hero::after { /* grain du béton */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* bloc titre + sous-titre + bouton : réduit de 6 % autour de son coin haut gauche */
.hero__bloc { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  transform: scale(.94); transform-origin: calc((184 + var(--decalage)) * var(--u)) calc(366 * var(--u)); }
.hero__bloc > * { pointer-events: auto; }
.hero__titre {
  position: absolute; margin: 0;
  left: calc((184 + var(--decalage)) * var(--u)); top: calc(366 * var(--u));
  font: 400 calc(306 * var(--u)) / calc(267 * var(--u)) 'League Gothic', 'Oswald', sans-serif;
  text-transform: uppercase;
  color: var(--rouge);
}
.hero__titre span { display: block; }
/* la maquette espace davantage les lettres des lignes 2 et 3 (largeurs mesurées : 895 et 438) */
.hero__titre span:nth-child(2) { letter-spacing: calc(4.3 * var(--u)); }
.hero__titre span:nth-child(3) { letter-spacing: calc(9.3 * var(--u)); }

.hero__sous {
  position: absolute; margin: 0;
  left: calc((186 + var(--decalage)) * var(--u)); top: calc(1194 * var(--u));
  font: 600 calc(48.1 * var(--u)) / 1 'Inter Tight', 'Inter', sans-serif;
  letter-spacing: calc(-0.6 * var(--u));
  color: var(--encre);
  white-space: nowrap;
}

.bouton--hero {
  left: calc((187 + var(--decalage)) * var(--u)); top: calc(1298 * var(--u));
  width: calc(277 * var(--u)); height: calc(84 * var(--u));
  font: 600 calc(31 * var(--u)) / 1 'Inter Tight', 'Inter', sans-serif;
  /* Pickel'z .btn--pill-onDark : 0 14px 30px -10px, couleur du bouton à 70 % ; survol : -2 px */
  box-shadow: 0 calc(27 * var(--u)) calc(57 * var(--u)) calc(-19 * var(--u)) rgba(222, 13, 22, .55);
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s, background .25s;
}
.bouton--hero:hover { transform: translateY(calc(-3.8 * var(--u))); background: #C00A12;
  box-shadow: 0 calc(32 * var(--u)) calc(60 * var(--u)) calc(-18 * var(--u)) rgba(222, 13, 22, .6); }

/* ------------------------------------------------------------ miroirs */
/* Cercle extérieur + épaisseur d'anneau mesurés par ajustement de cercle sur la maquette.
   L'image remplit l'intérieur ; ses coordonnées sont relatives à l'intérieur du cercle. */

.hero__miroirs { position: absolute; inset: 0; }

.miroir {
  position: absolute;
  border-radius: 50%;
  border: solid transparent;
  overflow: hidden;
  /* intérieur : reflet gris par défaut (visible là où la photo ne couvre pas) ;
     anneau éclairé par la droite : couleur relevée tous les 30° sur la maquette */
  background: linear-gradient(160deg, #DCD9D7, #A9A5A3) padding-box, var(--anneau, var(--rouge-anneau)) border-box;
  --anneau: conic-gradient(#C90117, #D1011B 30deg, #D5051E 60deg, #D70921 90deg, #D7101F 120deg, #CA0119 150deg,
    #C20119 180deg, #BB0116 210deg, #BA0416 240deg, #BA101C 270deg, #BD0819 300deg, #C30212 330deg, #C90117);
  box-shadow: 0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(60, 10, 10, .14),
              inset 0 0 calc(10 * var(--u)) rgba(0, 0, 0, .18);
}
.miroir img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.miroir--droite-haut img, .miroir--droite-bas img { object-position: left center; } /* seul le bord gauche est visible */

.miroir--grand { left: calc(1528 * var(--u)); top: calc(253.5 * var(--u)); width: calc(883 * var(--u)); height: calc(883 * var(--u)); border-width: calc(72.5 * var(--u)); }

.miroir--pizza { --anneau: conic-gradient(#B40217, #BB0217 30deg, #BD0317 60deg, #BC0217 90deg, #B8031A 180deg, #B3202A 270deg, #B3111B 300deg, #B40418 330deg, #B40217); left: calc(1511 * var(--u)); top: calc(1187.5 * var(--u)); width: calc(520 * var(--u)); height: calc(520 * var(--u)); border-width: calc(50.3 * var(--u)); }

.miroir--frites { --anneau: conic-gradient(#CF0C1F, #D31625 30deg, #D61625 60deg, #D2081F 90deg, #CA011C 120deg, #C4011A 180deg, #BE0218 240deg, #C40219 270deg, #C8001B 300deg, #CA031E 330deg, #CF0C1F); left: calc(2106.7 * var(--u)); top: calc(1136.7 * var(--u)); width: calc(467.2 * var(--u)); height: calc(467.2 * var(--u)); border-width: calc(44.7 * var(--u)); }

.miroir--droite-haut { --anneau: #D6101E; left: calc(2579.6 * var(--u)); top: calc(249 * var(--u)); width: calc(882 * var(--u)); height: calc(882 * var(--u)); border-width: calc(75 * var(--u)); }

.miroir--droite-bas { --anneau: #C8011B; left: calc(2621 * var(--u)); top: calc(1329.8 * var(--u)); width: calc(592 * var(--u)); height: calc(592 * var(--u)); border-width: calc(57 * var(--u)); }

/* ------------------------------------------------------------ nouveautés */
/* Une section par nouveauté, générée depuis le backoffice. Reprise de « Les incontournables » de Pickelz
   (style.css l. 168-178 : grille 2 colonnes alternée, numéro, nom, description, prix ; photo fondue par
   masque radial ; parallaxe) transposée dans la DA claire de BUN'Z. */

.nouveautes {
  position: relative; isolation: isolate;
  background: #F2F1EF;
  /* en haut : de la place pour les miroirs du hero qui débordent */
  padding: max(clamp(3rem, 8vh, 6rem), calc(260 * var(--u))) 0 clamp(5rem, 12vh, 9rem);
}
.nouveautes::before { /* le fond béton du hero se dissout dans le gris : pas de frontière à la jonction */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(520 * var(--u)); z-index: -1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .028 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(90deg,
      #FCFCFC 0%, #FCFCFC 23%, #FBFBFB 27%, #F7F7F7 32%, #F4F4F4 36%, #F1F1F1 41%,
      #EDEDED 45%, #E7E7E7 50%, #E3E3E3 54.5%, #E0E0E0 59%, #E0E0E0 68%, #E1E1E1 72.7%,
      #E5E5E5 77%, #EAEAEA 82%, #EDEDED 86%, #EDEDED 91%, #EEEEEE 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.6) 45%, transparent);
          mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.6) 45%, transparent);
}
.nouveautes__tete { text-align: center; margin-bottom: clamp(2.6rem, 6vh, 4.5rem); padding-inline: 1.2rem; }
.nouveautes__label {
  margin: 0 0 .7rem;
  font: 600 .95rem / 1 'Inter Tight', 'Inter', sans-serif;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--rouge);
}
.nouveautes__titre {
  margin: 0;
  font: 400 clamp(3.4rem, 8vw, 7rem) / .95 'League Gothic', 'Oswald', sans-serif;
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--encre);
}
.nouveautes__liste {
  width: 100%; max-width: 1180px; margin-inline: auto;
  padding-inline: clamp(1.2rem, 5vw, 3rem);
}
.nouveaute {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center;
  margin-bottom: clamp(4rem, 10vh, 8rem);
}
.nouveaute:last-child { margin-bottom: 0; }
.nouveaute--inverse .nouveaute__media { order: 2; }
.nouveaute--inverse .nouveaute__texte { order: 1; justify-self: end; }

.nouveaute__media { position: relative; margin: 0; transform: translate3d(0, var(--sy, 0), 0); will-change: transform; }
.nouveaute__photo { /* carré ; une photo détourée (fond transparent) se pose directement sur le fond */
  width: 80%; height: auto; display: block; margin-inline: auto; /* burgers un peu plus petits que la colonne */
  /* proportions naturelles : un burger détouré haut (pique) garde la même largeur de corps qu'un autre */
  filter: drop-shadow(0 22px 26px rgba(60, 20, 20, .18));
}

.nouveaute__texte { max-width: 30rem; }
.nouveaute__num {
  display: block;
  font: 400 4.2rem / 1 'League Gothic', 'Oswald', sans-serif;
  color: rgba(222, 13, 22, .32);
}
.nouveaute__nom {
  margin: .1rem 0 .9rem;
  font: 400 clamp(2.8rem, 5vw, 4.4rem) / .95 'League Gothic', 'Oswald', sans-serif;
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--rouge);
}
.nouveaute__desc {
  margin: 0;
  font: 400 1.08rem / 1.7 'Inter Tight', 'Inter', sans-serif;
  color: rgba(34, 5, 17, .78);
}
.nouveaute__prix {
  margin: 1.4rem 0 0;
  font: 400 2.2rem / 1 'League Gothic', 'Oswald', sans-serif;
  letter-spacing: .02em;
  color: var(--encre);
}

@media (max-width: 860px) { /* comme Pickelz : image au-dessus, texte dessous */
  .nouveaute { grid-template-columns: 1fr; gap: 2.2rem; }
  .nouveaute__media, .nouveaute--inverse .nouveaute__media { order: -1; max-width: 520px; margin-inline: auto; width: 100%; }
  .nouveaute__texte, .nouveaute--inverse .nouveaute__texte { order: 0; max-width: none; justify-self: stretch; }
}

/* ------------------------------------------------------------ menu */
/* Recodé d'après Site dev V1/Maquettes/menu/menu-pc-v2.png (2752 de large) : cotes en unités de maquette.
   Damier des bords retiré le 2026-10-10 ; le motif de gribouillis couvre maintenant tout le site. */

.menu {
  --rouge-menu: #C90A14;     /* texte et pilule active : mesuré sur la maquette */
  --filet: #93302A;          /* filets et séparateur, plus sombres */
  --creme: #F2F1EF;          /* même fond que les nouveautés */
  --x-g: 165;  --l-g: 1195;  /* colonne gauche : départ et largeur */
  --x-sep: 1375;             /* séparateur vertical */
  --x-d: 1420; --l-d: 1235;  /* colonne droite */
  position: relative; isolation: isolate;
  padding: 0 calc(84 * var(--u)) calc(var(--m-bas, 105) * var(--u));
  background: var(--creme);
  color: var(--rouge-menu);
}
.menu[hidden] { display: none; }

.menu__titre {
  margin: 0; padding-top: calc(var(--titre-y, 77) * var(--u));
  text-align: center; text-transform: uppercase;
  font: var(--titre-w, 750) calc(var(--titre-t, 105) * var(--u)) / 1 'Anybody', 'Montserrat', sans-serif; font-stretch: 125%;
  letter-spacing: calc(var(--titre-e, 3) * var(--u));
}

.menu__filtres {
  display: flex; justify-content: center; gap: calc(34 * var(--u));
  margin-top: calc(var(--filtres-y, 41) * var(--u));
}
.menu__filtre {
  height: calc(74 * var(--u)); padding: 0 calc(var(--pilule-p, 34) * var(--u));
  border: calc(3 * var(--u)) solid var(--rouge-menu); border-radius: 999px;
  background: var(--creme); color: var(--rouge-menu);
  font: 700 calc(var(--pilule-t, 33) * var(--u)) / 1 'Montserrat', sans-serif;
  transition: background-color .2s, color .2s;
}
.menu__filtre:hover { background: #F7E4E1; }
.menu__filtre[aria-pressed="true"] { background: var(--rouge-menu); color: var(--creme); }
.menu__filtre:focus-visible { outline: 2px solid var(--rouge-menu); outline-offset: 3px; }

.menu__grille {
  display: grid; justify-content: start; align-items: start;
  grid-template-columns: calc(var(--l-g) * var(--u)) calc(var(--l-d) * var(--u));
  column-gap: calc((var(--x-d) - var(--x-g) - var(--l-g)) * var(--u));
  margin: calc(var(--grille-y, 74) * var(--u)) 0 0 calc((var(--x-g) - 84) * var(--u));
}
.menu__grille--seule { grid-template-columns: calc(var(--l-d) * var(--u)); justify-content: center; margin-left: 0; }
.menu__grille--large { grid-template-columns: calc((var(--x-d) - var(--x-g) + var(--l-d)) * var(--u)); }

.menu__cat-titre {
  margin: 0; padding-right: calc(74 * var(--u)); /* titres légèrement décentrés, comme sur la maquette */
  text-align: center; text-transform: uppercase;
  font: var(--h3-w, 700) calc(var(--h3-t, 63.6) * var(--u)) / 1 'Anybody', 'Montserrat', sans-serif; font-stretch: 125%;
  letter-spacing: calc(var(--h3-e, -0.3) * var(--u));
}
.menu__cat--droite .menu__cat-titre { padding-right: calc(36 * var(--u)); }
.menu__plats { list-style: none; margin: calc(var(--liste-y, 45) * var(--u)) 0 0; padding: 0; position: relative; }
.menu__cat--droite .menu__plats::before { /* séparateur vertical, entre les deux colonnes d'une paire */
  content: ''; position: absolute; top: 0; bottom: 0;
  left: calc((var(--x-sep) - var(--x-d)) * var(--u));
  width: calc(2 * var(--u)); background: var(--filet);
}
.menu__grille--seule .menu__plats::before { display: none; }

.plat {
  display: grid; grid-template-columns: calc(340 * var(--u)) 1fr; column-gap: calc(25 * var(--u));
  align-items: center; min-height: calc(297 * var(--u)); padding-bottom: calc(37 * var(--u));
  /* comme sur la maquette : le bloc texte est centré verticalement sur la photo */
}
.plat__media { height: calc(240 * var(--u)); display: flex; align-items: center; justify-content: center; }
.plat__photo { max-width: calc(330 * var(--u)); max-height: calc(215 * var(--u)); width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 calc(14 * var(--u)) calc(16 * var(--u)) rgba(60, 20, 10, .2)); }
.plat__texte { position: relative; top: calc(var(--nom-y, -18) * var(--u)); }
.plat__nom {
  margin: 0; text-transform: uppercase;
  font: var(--nom-w, 750) calc(var(--nom-t, 54.6) * var(--u)) / 1 'Anybody', 'Montserrat', sans-serif; font-stretch: 125%;
  letter-spacing: calc(var(--nom-e, 1.7) * var(--u));
}
.plat__desc {
  margin: calc(var(--desc-y, 16) * var(--u)) 0 0; padding-bottom: calc(var(--filet-y, 18) * var(--u));
  font: var(--desc-w, 650) calc(var(--desc-t, 34) * var(--u)) / calc(38 * var(--u)) 'Montserrat', sans-serif;
  letter-spacing: calc(var(--desc-e, -1.5) * var(--u));
  background: linear-gradient(var(--filet), var(--filet)) left bottom / min(100%, calc(780 * var(--u))) calc(1.5 * var(--u)) no-repeat;
}
.plat__prix {
  margin: calc(var(--prix-y, 12) * var(--u)) 0 0;
  font: 800 calc(var(--prix-t, 45) * var(--u)) / 1 'Montserrat', sans-serif;
}

/* catégorie pleine largeur (nombre impair de catégories : la première, ici les box) : plats par trois,
   photo au-dessus du texte centré */
.menu__cat--large { grid-column: 1 / -1; margin-bottom: calc(110 * var(--u)); }
.menu__cat--large .menu__cat-titre { padding-right: calc(68 * var(--u)); }
.menu__cat--large .menu__plats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(90 * var(--u)); }
.menu__cat--large .plat { grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 0; padding-bottom: 0; text-align: center; }
.menu__cat--large .plat__media { height: calc(430 * var(--u)); }
.menu__cat--large .plat__photo { max-width: 100%; max-height: calc(420 * var(--u)); filter: none; } /* ombre déjà dans la photo */
.menu__cat--large .plat__texte { top: 0; margin-top: calc(18 * var(--u)); }
.menu__cat--large .plat__desc { background-position: center bottom; }

/* suppléments : disposition de leur menu imprimé, à l'échelle de la colonne (PDF : colonne 1045 pt, ici 1195 u,
   soit 1 pt = 1,14 u ; la ligne occupe 980 pt et commence 58 pt après le bord gauche de la colonne) :
   titre à la taille des noms de plats, puis « nom  PRIX » sur une ligne ; prix nul = « GRATUITE » au marqueur */
.supp { margin-top: calc(var(--supp-y, 40) * var(--u)); padding-left: calc(30 * var(--u)); margin-right: calc(-20 * var(--u)); }
.menu__cat--large .supp { padding-left: 0; text-align: center; }
.supp__titre {
  margin: 0; text-transform: uppercase;
  font: 680 calc(44.8 * var(--u)) / 1 'Anybody', 'Montserrat', sans-serif; font-stretch: 125%;
  letter-spacing: calc(4.4 * var(--u));
}
.supp__liste {
  list-style: none; margin: calc(var(--supp-l, 16) * var(--u)) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: calc(125 * var(--u)); row-gap: calc(17 * var(--u));
}
.menu__cat--large .supp__liste { justify-content: center; }
.supp__item { display: flex; align-items: baseline; column-gap: calc(23.7 * var(--u)); }
.supp__nom { font: 700 calc(28.6 * var(--u)) / 1 'Montserrat', sans-serif; text-transform: lowercase; }
.supp__prix { font: 900 calc(39.5 * var(--u)) / 1 'Montserrat', sans-serif; }
.supp__gratuit { /* tracé exact du mot du PDF, teinté par la couleur du texte ; le mot reste lisible par les lecteurs d'écran */
  position: relative; top: calc(4 * var(--u)); margin-left: calc(-7.1 * var(--u));
  display: inline-block; width: calc(146 * var(--u)); height: calc(28.3 * var(--u));
  overflow: hidden; white-space: nowrap; color: transparent;
  font: 400 calc(28.3 * var(--u)) / 1 'Knewave', sans-serif;
  background: var(--rouge-menu);
  -webkit-mask: url('../img/menu/gratuite.svg') center / 100% 100% no-repeat;
          mask: url('../img/menu/gratuite.svg') center / 100% 100% no-repeat;
}
html[lang="en"] .supp__gratuit { /* pas de tracé anglais : même esprit, police marqueur penchée */
  width: auto; height: auto; top: 0; margin-left: 0; overflow: visible;
  color: var(--rouge-menu); background: none; -webkit-mask: none; mask: none;
  font-size: calc(34 * var(--u)); text-transform: uppercase; transform: skewX(-10deg);
}

/* Sous 1024 px les unités de maquette rendraient le texte trop petit : une colonne, tailles en rem.
   Filtres défilants comme sur Pickelz (responsive.css l. 26). */
@media (max-width: 1023px) {
  .menu { padding: 0 34px 3.2rem; }
  .menu__titre { padding-top: 2.6rem; font-size: clamp(2rem, 8.5vw, 3.2rem); letter-spacing: .02em; }
  .menu__filtres { margin: 1.3rem -34px 0; padding: 0 34px .3rem; gap: .5rem; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .menu__filtres::-webkit-scrollbar { display: none; }
  @supports (justify-content: safe center) { .menu__filtres { justify-content: safe center; } }
  .menu__filtre { flex: 0 0 auto; height: 2.5rem; padding: 0 1.1rem; border-width: 2px; font-size: .88rem; }
  .menu__grille, .menu__grille--seule { grid-template-columns: minmax(0, 1fr); row-gap: 2.6rem; margin: 2.2rem 0 0; }
  .menu__cat-titre, .menu__cat--droite .menu__cat-titre, .menu__cat--large .menu__cat-titre { padding-right: 0; font-size: clamp(1.35rem, 5.6vw, 2rem); letter-spacing: .01em; }
  .menu__plats { margin-top: 1.1rem; }
  .menu__cat--droite .menu__plats::before { display: none; }
  .menu__grille--large { grid-template-columns: minmax(0, 1fr); }
  .menu__cat--large { margin-bottom: 0; }
  .menu__cat--large .menu__plats { display: block; }
  .menu__cat--large .plat { grid-template-columns: 36% minmax(0, 1fr); align-items: center; text-align: left; }
  .menu__cat--large .plat__media { height: auto; }
  .menu__cat--large .plat__texte { margin-top: 0; }
  .menu__cat--large .plat__desc { background-position: left bottom; }
  .plat { grid-template-columns: 36% minmax(0, 1fr); column-gap: .9rem; min-height: 0; padding: .7rem 0; }
  .plat__media { height: auto; }
  .plat__photo { max-width: 100%; max-height: 130px; }
  .plat__texte { top: 0; }
  .plat__nom { font-size: clamp(1rem, 4.4vw, 1.4rem); letter-spacing: .02em; }
  .plat__desc { margin-top: .35rem; padding-bottom: .55rem; font-size: clamp(.76rem, 3.2vw, .95rem); line-height: 1.35;
    letter-spacing: 0; background-size: 100% 1px; }
  .plat__prix { margin-top: .5rem; font-size: clamp(1rem, 4.2vw, 1.3rem); }
  .supp, .menu__cat--large .supp { margin-top: 1.4rem; padding-left: 0; text-align: left; }
  .menu__cat--large .supp__liste { justify-content: flex-start; }
  .supp__titre { font-size: clamp(1rem, 4.4vw, 1.3rem); letter-spacing: .02em; }
  .supp__liste { margin-top: .45rem; column-gap: 1.5rem; row-gap: .35rem; }
  .supp__item { column-gap: .5rem; }
  .supp__nom { font-size: clamp(.8rem, 3.4vw, .95rem); }
  .supp__prix { font-size: clamp(1.05rem, 4.6vw, 1.3rem); }
  .supp__gratuit { top: .12rem; margin-left: -.15rem; width: 4.45rem; height: .86rem; font-size: .86rem; }
  html[lang="en"] .supp__gratuit { font-size: 1.05rem; }
}

/* ------------------------------------------------------------ roue */
/* Recodée d'après Site dev V1/Maquettes/roue/roue-B-centree.png (2752 × 1536) : cotes en unités de maquette.
   Cadre (anneau + ampoules) fixe, disque des lots qui tourne, moyeu et flèche fixes. */

.roue {
  --rouge-roue: #D10B16;
  --encre-roue: #2A0814;
  position: relative; isolation: isolate;
  height: calc(1536 * var(--u));
  background: #F2F1EF;
  color: var(--rouge-roue);
}
.roue[hidden] { display: none; }
/* demandé après la maquette : tout remonte un peu (--roue-dy), le titre davantage (--titre-dy) pour aérer
   l'espace entre le titre et la roue ; la section raccourcit d'autant */
.roue { --roue-dy: 50; --titre-dy: 40; --roue-bas: 140; height: calc((1536 - var(--roue-dy) + var(--roue-bas)) * var(--u)); }
.roue > :not(dialog) { translate: 0 calc(-1 * var(--roue-dy) * var(--u)); }
.roue > .roue__titre, .roue > .roue__st--new { translate: 0 calc(-1 * (var(--roue-dy) + var(--titre-dy)) * var(--u)); }
.roue__titre {
  position: absolute; left: 0; right: 0; top: calc(var(--rt-y, 212) * var(--u)); margin: 0; padding-left: calc(17 * var(--u));
  text-align: center; text-transform: uppercase;
  font: 900 calc(var(--rt-t, 141.5) * var(--u)) / 1 'Montserrat', sans-serif;
  letter-spacing: calc(var(--rt-e, 14.1) * var(--u)); word-spacing: calc(var(--rt-w, -32) * var(--u));
}
.sticker.roue__st { white-space: pre-line; line-height: .98; z-index: 3; }
.roue__st--new { left: calc(var(--sn-x, 2118) * var(--u)); top: calc(var(--sn-y, 365) * var(--u)); --a: var(--sn-a, -15deg); --t: var(--sn-t, 79); }
.roue__st--tour { left: calc(var(--st-x, 838) * var(--u)); top: calc(var(--st-y, 604) * var(--u)); --a: var(--st-a, -13.4deg); --t: var(--st-t, 60); }
.roue__st--cadeau { left: calc(var(--sc-x, 1929) * var(--u)); top: calc(var(--sc-y, 1094) * var(--u)); --a: var(--sc-a, 16.4deg); --t: var(--sc-t, 60); }

.roue__machine {
  position: absolute; left: calc(942 * var(--u)); top: calc(401.5 * var(--u));
  width: calc(868 * var(--u)); height: calc(868 * var(--u));
  filter: drop-shadow(0 calc(18 * var(--u)) calc(26 * var(--u)) rgba(70, 10, 10, .22));
}
.roue__cadre { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.roue__disque {
  position: absolute; left: calc(57 * var(--u)); top: calc(57 * var(--u));
  width: calc(754 * var(--u)); height: calc(754 * var(--u));
  transform: rotate(var(--rot, 0deg));
}
.roue__disque.tourne { transition: transform 5.2s cubic-bezier(.12, .7, .08, 1); }
.roue__moyeu {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(212 * var(--u)); height: calc(212 * var(--u)); border-radius: 50%;
  background: #fff; border: calc(7 * var(--u)) solid var(--rouge-roue);
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(60, 0, 0, .25);
  display: grid; place-items: center;
}
.roue__moyeu img { width: calc(var(--logo-l, 152) * var(--u)); }
.roue__fleche {
  position: absolute; left: 50%; top: calc(var(--fl-y, -1) * var(--u)); transform: translateX(-50%);
  width: calc(94 * var(--u)); height: calc(90 * var(--u));
  filter: drop-shadow(0 calc(5 * var(--u)) calc(5 * var(--u)) rgba(60, 0, 0, .35));
}

.roue__form { position: absolute; left: calc(995 * var(--u)); top: calc(1329 * var(--u)); width: calc(762 * var(--u)); margin: 0; }
.roue__champ {
  display: flex; align-items: center; height: calc(100 * var(--u));
  border: calc(3 * var(--u)) solid var(--rouge-roue); border-radius: 999px;
  padding: 0 calc(7 * var(--u)) 0 calc(var(--in-x, 41) * var(--u));
  background: rgba(255, 255, 255, .35);
}
.roue__indicatif, .roue__tel {
  font: 400 calc(var(--in-t, 33.6) * var(--u)) / 1 'Montserrat', sans-serif; color: var(--encre-roue);
}
.roue__indicatif { white-space: pre; margin-right: calc(10 * var(--u)); }
.roue__tel { flex: 1; min-width: 0; border: 0; background: none; padding: 0; outline: none; }
.roue__tel::placeholder { color: var(--encre-roue); opacity: 1; }
.roue__bouton {
  flex: none; width: calc(258 * var(--u)); height: calc(82 * var(--u)); border-radius: 999px;
  background: var(--rouge-roue); color: #fff;
  font: 800 calc(var(--bt-t, 33.3) * var(--u)) / 1 'Montserrat', sans-serif; text-transform: uppercase;
  transition: background .2s, transform .2s;
}
.roue__bouton:hover { background: #B10811; }
.roue__bouton:disabled { cursor: progress; }
.roue__champ:focus-within { box-shadow: 0 0 0 calc(5 * var(--u)) rgba(209, 11, 22, .15); }
.roue__accord {
  position: absolute; left: calc(-73 * var(--u)); top: calc(var(--ac-y, 126) * var(--u)); white-space: nowrap;
  display: flex; align-items: center; gap: calc(20 * var(--u)); cursor: pointer;
  font: 600 calc(var(--ac-t, 30.5) * var(--u)) / 1 'Inter Tight', 'Inter', sans-serif; color: var(--encre-roue);
}
.roue__accord input { position: absolute; opacity: 0; pointer-events: none; }
.roue__case { flex: none; position: relative; width: calc(33 * var(--u)); height: calc(33 * var(--u)); border: calc(3 * var(--u)) solid var(--encre-roue); }
.roue__accord input:checked + .roue__case::before, .roue__accord input:checked + .roue__case::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 120%; height: calc(3 * var(--u)); background: var(--encre-roue);
  transform: translate(-50%, -50%) rotate(45deg);
}
.roue__accord input:checked + .roue__case::after { transform: translate(-50%, -50%) rotate(-45deg); }
.roue__accord input:focus-visible + .roue__case { outline: 2px solid var(--rouge-roue); outline-offset: 3px; }
.roue__message { position: absolute; left: 0; right: 0; top: calc(178 * var(--u)); margin: 0; text-align: center;
  font: 700 calc(30 * var(--u)) / 1.3 'Montserrat', sans-serif; }

.roue__resultat {
  border: 0; border-radius: 28px; padding: 2.2rem 2rem 1.8rem; width: min(92vw, 30rem);
  text-align: center; background: #F2F1EF; color: var(--rouge-roue);
  box-shadow: 0 30px 80px rgba(40, 0, 0, .35);
}
.roue__resultat::backdrop { background: rgba(30, 5, 10, .55); }
.roue__res-titre { margin: 0; font: 800 clamp(1.8rem, 6vw, 2.4rem) / 1 'Montserrat', sans-serif; text-transform: uppercase; }
.roue__res-lot { margin: .6rem 0 0; font: 700 1.15rem / 1.3 'Montserrat', sans-serif; color: var(--encre-roue); }
.roue__res-code { margin: 1.2rem 0 0; padding: .7rem 1rem; border: 3px dashed var(--rouge-roue); border-radius: 16px;
  font: 800 clamp(2rem, 9vw, 3rem) / 1 'Montserrat', sans-serif; letter-spacing: .06em; }
.roue__res-code:empty { display: none; }
.roue__res-info { margin: .9rem 0 0; font: 600 .95rem / 1.4 'Montserrat', sans-serif; color: var(--encre-roue); }
.roue__res-fermer { margin-top: 1.4rem; width: auto; height: 2.8rem; padding: 0 1.8rem; font-size: 1rem; }

@media (max-width: 1023px) {
  .roue { height: auto; padding: 2.8rem 20px 3.2rem; display: flex; flex-direction: column; align-items: center; }
  .roue > :not(dialog), .roue > .roue__titre { translate: none; }
  .roue__titre { margin-bottom: .4rem; }
  .roue__titre { position: static; font-size: clamp(2rem, 9vw, 3.2rem); letter-spacing: 0; }
  .sticker.roue__st--new { left: auto; right: 4%; top: 2.2rem; font-size: 1.1rem; transform: rotate(-15deg); }
  .roue__st--tour, .roue__st--cadeau { display: none; }
  .roue__machine { position: relative; left: auto; top: auto; margin-top: 1.8rem; width: min(88vw, 460px); height: min(88vw, 460px); }
  .roue__disque { left: 6.567%; top: 6.567%; width: 86.866%; height: 86.866%; }
  .roue__moyeu { width: 24.4%; height: 24.4%; border-width: 4px; }
  .roue__moyeu img { width: 72%; }
  .roue__fleche { top: 0; width: 10.6%; height: 9.7%; }
  .roue__form { position: relative; left: auto; top: auto; width: min(100%, 460px); margin-top: 1.8rem; }
  .roue__champ { height: 3.4rem; border-width: 2px; padding: 0 5px 0 1.1rem; }
  .roue__indicatif, .roue__tel { font-size: 1rem; }
  .roue__bouton { width: auto; height: 2.8rem; padding: 0 1.3rem; font-size: 1rem; }
  .roue__accord { position: static; margin-top: 1rem; white-space: normal; align-items: flex-start; gap: .7rem; font-size: .85rem; line-height: 1.35; }
  .roue__case { width: 20px; height: 20px; border-width: 2px; }
  .roue__accord input:checked + .roue__case::before, .roue__accord input:checked + .roue__case::after { height: 2px; }
  .roue__message { position: static; margin-top: .9rem; font-size: .9rem; }
}

/* ------------------------------------------------------------ pied de page */
/* Recodé d'après Site dev V1/Maquettes/footer/footer-B3-final.png : même fond et même motif que la roue,
   sans filet en haut. Cotes en unités de maquette, origine = haut du pied de page. */

.pied {
  --rouge-pied: #D10B16;
  --encre-pied: #2A0814;
  position: relative; isolation: isolate;
  height: calc(631 * var(--u));
  background: #F2F1EF; color: var(--encre-pied);
}
.pied__carte {
  position: absolute; left: calc(210 * var(--u)); top: calc(var(--pc-y, 165) * var(--u));
  width: calc(250 * var(--u)); height: calc(250 * var(--u)); border-radius: 50%; overflow: hidden;
  border: calc(21 * var(--u)) solid var(--rouge-pied);
  background: #E8E4DE;
  box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(60, 10, 10, .2), inset 0 0 calc(8 * var(--u)) rgba(0, 0, 0, .25);
}
.pied__carte iframe { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; border: 0; pointer-events: none; }
.pied__col { position: absolute; top: calc(var(--pt-y, 200) * var(--u)); margin-left: calc(-2 * var(--u)); }
.pied__col--adresse { left: calc(694 * var(--u)); }
.pied__col--horaires { left: calc(1486 * var(--u)); }
.pied__col--contact { left: calc(2229 * var(--u)); }
.pied__titre {
  margin: 0; text-transform: uppercase; color: var(--rouge-pied);
  font: 500 calc(var(--ti-t, 36) * var(--u)) / 1 'Roboto', sans-serif; font-stretch: var(--ti-w, 90%);
}
.pied__texte {
  margin: calc(var(--tx-y, 22) * var(--u)) 0 0; white-space: nowrap;
  font: 400 calc(var(--tx-t, 36) * var(--u)) / 1 'Roboto', sans-serif; font-stretch: var(--tx-w, 91.5%);
}
.pied__texte a:hover, .pied__lien:hover { text-decoration: underline; }
.pied__lien {
  display: inline-block; margin-top: calc(var(--li-y, 34) * var(--u)); color: var(--rouge-pied);
  font: 400 calc(var(--li-t, 34) * var(--u)) / 1 'Roboto', sans-serif; font-stretch: 89.5%;
}
.pied__reseaux { display: flex; gap: calc(22 * var(--u)); margin-top: calc(var(--re-y, 26) * var(--u)); }
.pied__reseaux a {
  width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; border: calc(2.5 * var(--u)) solid currentColor;
  transition: background .25s, color .25s;
}
.pied__reseaux svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.pied__reseaux a:hover { background: var(--encre-pied); color: #fff; }
.pied__bas {
  position: absolute; left: calc(189 * var(--u)); right: calc(189 * var(--u)); top: calc(492 * var(--u)); bottom: 0;
  border-top: calc(3 * var(--u)) solid #A0262A;
}
/* demandé : logo et copyright plus petits que sur la maquette et resserrés vers le centre */
.pied__logo { position: absolute; left: calc((826 - 189) * var(--u)); top: calc(var(--lo-y, 58) * var(--u)); width: calc(90 * var(--u)); height: auto; }
.pied__copy { position: absolute; right: calc((2752 - 1926 - 189) * var(--u)); top: calc(var(--co-y, 62) * var(--u)); margin: 0;
  font: 400 calc(var(--co-t, 22) * var(--u)) / 1 'Inter Tight', 'Inter', sans-serif; }

@media (max-width: 1023px) {
  .pied { height: auto; padding: 2.4rem 20px 1.6rem; display: grid; grid-template-columns: 1fr; justify-items: start; gap: 1.4rem; }
  .pied__carte { position: relative; left: auto; top: auto; width: 150px; height: 150px; border-width: 12px; justify-self: center; }
  .pied__col { position: static; margin-left: 0; }
  .pied__titre { font-size: .8rem; letter-spacing: .06em; }
  .pied__texte, .pied__lien { font-size: 1rem; }
  .pied__texte { margin-top: .35rem; white-space: normal; }
  .pied__lien { margin-top: .4rem; }
  .pied__reseaux { gap: .6rem; margin-top: .7rem; }
  .pied__reseaux a { width: 38px; height: 38px; border-width: 1.5px; }
  .pied__reseaux svg { width: 18px; height: 18px; }
  .pied__bas { position: static; width: 100%; display: flex; justify-content: center; align-items: center; gap: 1.6rem; padding-top: 1rem; border-top-width: 1px; }
  .pied__logo, .pied__copy { position: static; }
  .pied__logo { width: 56px; }
  .pied__copy { font-size: .75rem; }
}

/* apparition au défilement */
.apparition { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
.apparition.visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------ chargement et animations */
/* Page masquée tant que les polices ne sont pas prêtes (sinon une image furtive en police de secours,
   plus large), puis fondu d'entrée. Courbe commune : sortie douce. */
:root { --sortie: cubic-bezier(.22, .61, .36, 1); }
html.attente body { opacity: 0; }
body { transition: opacity .45s var(--sortie); }

/* hero : lignes du titre qui montent depuis un masque, puis sous-titre, bouton, miroirs, stickers */
.pret .hero__titre span, .pret .hero__sous, .pret .bouton--hero { animation: monte .9s var(--sortie) both; }
.pret .hero__titre span:nth-child(2) { animation-delay: .08s; }
.pret .hero__titre span:nth-child(3) { animation-delay: .16s; }
.pret .hero__sous { animation-delay: .3s; }
.pret .bouton--hero { animation-delay: .38s; }
.pret .miroir { animation: apparait 1.1s var(--sortie) both; }
.pret .miroir--grand { animation-delay: .15s; }
.pret .miroir--pizza { animation-delay: .3s; }
.pret .miroir--frites { animation-delay: .4s; }
.pret .miroir--droite-haut, .pret .miroir--droite-bas { animation-delay: .5s; }
.pret .hero .sticker { animation: colle .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.pret .sticker--since { animation-delay: .7s; }
.pret .sticker--smash-haut { animation-delay: .8s; }
.pret .sticker--smash-bas { animation-delay: .9s; }
.pret .sticker--pizzeria { animation-delay: 1s; }
@keyframes monte { from { opacity: 0; translate: 0 40%; } to { opacity: 1; translate: 0 0; } }
@keyframes apparait { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
@keyframes colle { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }

/* nouveautés : le burger suit légèrement la souris (Pickel'z, animations.js l. 35-50 : ±13 px / ±11 px) */
.nouveaute__photo { translate: var(--px, 0) var(--py, 0); transition: translate .2s ease-out; }

/* menu : les catégories apparaissent l'une après l'autre */
.menu__cat.apparition:nth-child(2) { transition-delay: .12s; }
.menu__cat.apparition:nth-child(3) { transition-delay: .24s; }

/* roue : le disque fait un quart de tour en arrivant à l'écran */
.roue__disque { rotate: -90deg; transition: rotate 1.8s var(--sortie); }
.roue.visible .roue__disque { rotate: 0deg; }

@media (prefers-reduced-motion: reduce) {
  html.attente body { opacity: 1; }
  .pret .hero__titre span, .pret .hero__sous, .pret .bouton--hero, .pret .miroir, .pret .hero .sticker { animation: none; }
  .nouveaute__photo { translate: none; }
  .roue__disque { rotate: none; }
  .nouveaute__media { transform: none; }
  .apparition { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------ stickers */
/* Texte sombre, contour blanc découpé autour des lettres (text-shadow en couronne), ombre portée. */

.sticker {
  position: absolute; margin: 0;
  font: 700 calc(var(--t, 56) * var(--u)) / 1.02 'Inter', sans-serif;
  letter-spacing: -0.01em;
  color: var(--sticker);
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(var(--a, 0deg));
  --r: .24em;
  text-shadow:
    calc(var(--r) * 1.000) calc(var(--r) * 0.000) #fff, calc(var(--r) * 0.981) calc(var(--r) * 0.195) #fff, calc(var(--r) * 0.924) calc(var(--r) * 0.383) #fff,
    calc(var(--r) * 0.831) calc(var(--r) * 0.556) #fff, calc(var(--r) * 0.707) calc(var(--r) * 0.707) #fff, calc(var(--r) * 0.556) calc(var(--r) * 0.831) #fff,
    calc(var(--r) * 0.383) calc(var(--r) * 0.924) #fff, calc(var(--r) * 0.195) calc(var(--r) * 0.981) #fff, calc(var(--r) * 0.000) calc(var(--r) * 1.000) #fff,
    calc(var(--r) * -0.195) calc(var(--r) * 0.981) #fff, calc(var(--r) * -0.383) calc(var(--r) * 0.924) #fff, calc(var(--r) * -0.556) calc(var(--r) * 0.831) #fff,
    calc(var(--r) * -0.707) calc(var(--r) * 0.707) #fff, calc(var(--r) * -0.831) calc(var(--r) * 0.556) #fff, calc(var(--r) * -0.924) calc(var(--r) * 0.383) #fff,
    calc(var(--r) * -0.981) calc(var(--r) * 0.195) #fff, calc(var(--r) * -1.000) calc(var(--r) * 0.000) #fff, calc(var(--r) * -0.981) calc(var(--r) * -0.195) #fff,
    calc(var(--r) * -0.924) calc(var(--r) * -0.383) #fff, calc(var(--r) * -0.831) calc(var(--r) * -0.556) #fff, calc(var(--r) * -0.707) calc(var(--r) * -0.707) #fff,
    calc(var(--r) * -0.556) calc(var(--r) * -0.831) #fff, calc(var(--r) * -0.383) calc(var(--r) * -0.924) #fff, calc(var(--r) * -0.195) calc(var(--r) * -0.981) #fff,
    calc(var(--r) * -0.000) calc(var(--r) * -1.000) #fff, calc(var(--r) * 0.195) calc(var(--r) * -0.981) #fff, calc(var(--r) * 0.383) calc(var(--r) * -0.924) #fff,
    calc(var(--r) * 0.556) calc(var(--r) * -0.831) #fff, calc(var(--r) * 0.707) calc(var(--r) * -0.707) #fff, calc(var(--r) * 0.831) calc(var(--r) * -0.556) #fff,
    calc(var(--r) * 0.924) calc(var(--r) * -0.383) #fff, calc(var(--r) * 0.981) calc(var(--r) * -0.195) #fff, calc(var(--r) * 0.600) calc(var(--r) * 0.000) #fff,
    calc(var(--r) * 0.554) calc(var(--r) * 0.230) #fff, calc(var(--r) * 0.424) calc(var(--r) * 0.424) #fff, calc(var(--r) * 0.230) calc(var(--r) * 0.554) #fff,
    calc(var(--r) * 0.000) calc(var(--r) * 0.600) #fff, calc(var(--r) * -0.230) calc(var(--r) * 0.554) #fff, calc(var(--r) * -0.424) calc(var(--r) * 0.424) #fff,
    calc(var(--r) * -0.554) calc(var(--r) * 0.230) #fff, calc(var(--r) * -0.600) calc(var(--r) * 0.000) #fff, calc(var(--r) * -0.554) calc(var(--r) * -0.230) #fff,
    calc(var(--r) * -0.424) calc(var(--r) * -0.424) #fff, calc(var(--r) * -0.230) calc(var(--r) * -0.554) #fff, calc(var(--r) * -0.000) calc(var(--r) * -0.600) #fff,
    calc(var(--r) * 0.230) calc(var(--r) * -0.554) #fff, calc(var(--r) * 0.424) calc(var(--r) * -0.424) #fff, calc(var(--r) * 0.554) calc(var(--r) * -0.230) #fff;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(8 * var(--u)) rgba(40, 10, 10, .28));
}
.sticker--since { left: calc(1632 * var(--u)); top: calc(405 * var(--u)); --a: -7.5deg; line-height: 1.1; --t: 52.5; display: flex; align-items: center; gap: .15em; text-align: left; }
.sticker--since img { width: 1.75em; margin-top: .55em; filter: drop-shadow(0 0 0 #fff) drop-shadow(.12em 0 0 #fff) drop-shadow(-.12em 0 0 #fff) drop-shadow(0 .12em 0 #fff) drop-shadow(0 -.12em 0 #fff); }
.sticker--smash-haut { left: calc(2364 * var(--u)); top: calc(466 * var(--u)); --a: 11.5deg; line-height: 1.06; --t: 54; }
.sticker--smash-bas { left: calc(1549 * var(--u)); top: calc(1008 * var(--u)); --a: -18.5deg; line-height: .98; --t: 54; }
.sticker--pizzeria { left: calc(2520 * var(--u)); top: calc(1071 * var(--u)); --a: 16.5deg; line-height: 1.21; --t: 54; text-align: left; }