/* L'écran du snack V2 (1920 x 1080, mis à l'échelle de son cadre) : un produit vedette en photo par page, devant le nom de sa catégorie écrit en très grand. */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; font-display: block;
}

/* Les thèmes : un commerce change de style en un toucher (éditeur, rubrique « Style »). Tout passe par ces variables. */
.board, .theme-swatch {
  --bg: #16110D; --glow-1: rgba(255, 170, 60, .13); --glow-2: rgba(226, 51, 42, .10);
  --ink: #F6ECDC; --ink-2: rgba(246, 236, 220, .58); --filet: rgba(246, 236, 220, .13);
  --accent: #FFC62B; --on-accent: #16110D; --alert: #E2332A;
  --band: #FFC62B; --band-ink: #16110D; --rule: #FFC62B;
  --name-w: 900; --name-wdth: 62; --grain: .07; --grain-blend: screen;
}
[data-theme='ketchup'] {
  --bg: #C4241C; --glow-1: rgba(255, 120, 60, .35); --glow-2: rgba(90, 0, 0, .35);
  --ink: #FFF6E8; --ink-2: rgba(255, 246, 232, .72); --filet: rgba(255, 246, 232, .24);
  --accent: #FFD23A; --on-accent: #8E130E; --alert: #16110D;
  --band: #FFF6E8; --band-ink: #B11E17; --rule: #FFD23A; --grain: .08;
}
[data-theme='papier'] {
  --bg: #F3EADB; --glow-1: rgba(255, 255, 255, .7); --glow-2: rgba(196, 140, 80, .14);
  --ink: #1B1612; --ink-2: rgba(27, 22, 18, .58); --filet: rgba(27, 22, 18, .14);
  --accent: #D52B1E; --on-accent: #FFF6E8; --alert: #D52B1E;
  --band: #1B1612; --band-ink: #F3EADB; --rule: #1B1612; --grain: .10; --grain-blend: multiply;
}
[data-theme='ardoise'] {
  --bg: #1F2A28; --glow-1: rgba(255, 255, 255, .07); --glow-2: rgba(0, 0, 0, .25);
  --ink: #EDEEE6; --ink-2: rgba(237, 238, 230, .6); --filet: rgba(237, 238, 230, .16);
  --accent: #F4D35E; --on-accent: #1F2A28; --alert: #E86A4F;
  --band: #EDEEE6; --band-ink: #1F2A28; --rule: #EDEEE6; --name-w: 800; --name-wdth: 75; --grain: .12;
}
[data-theme='olive'] {
  --bg: #1E3B2C; --glow-1: rgba(240, 180, 90, .18); --glow-2: rgba(0, 0, 0, .25);
  --ink: #F8EEDC; --ink-2: rgba(248, 238, 220, .62); --filet: rgba(248, 238, 220, .15);
  --accent: #F2A541; --on-accent: #1E3B2C; --alert: #E2332A;
  --band: #F2A541; --band-ink: #1E3B2C; --rule: #F2A541;
}
[data-theme='neon'] {
  --bg: #0B0B12; --glow-1: rgba(255, 46, 136, .20); --glow-2: rgba(0, 220, 255, .14);
  --ink: #F4F2FF; --ink-2: rgba(244, 242, 255, .55); --filet: rgba(244, 242, 255, .12);
  --accent: #FF3B8D; --on-accent: #0B0B12; --alert: #FF3B8D;
  --band: #00D9F5; --band-ink: #0B0B12; --rule: #FF3B8D; --name-wdth: 100; --name-w: 900;
}

/* le mot géant derrière la photo : la couleur du fond, à peine plus claire (ou plus foncée sur papier) */
.board { --word: rgba(246, 236, 220, .055); --shadow: rgba(0, 0, 0, .55); }
[data-theme='ketchup'] { --word: rgba(255, 246, 232, .10); --shadow: rgba(70, 0, 0, .5); }
[data-theme='papier'] { --word: rgba(27, 22, 18, .06); --shadow: rgba(90, 60, 30, .32); }
[data-theme='ardoise'] { --word: rgba(237, 238, 230, .06); }
[data-theme='olive'] { --word: rgba(248, 238, 220, .07); }
[data-theme='neon'] { --word: rgba(255, 59, 141, .09); }

.b-fit { position: relative; overflow: hidden; background: #000; }
.board {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden;
  font-family: 'Archivo', system-ui, sans-serif; color: var(--ink);
  background:
    radial-gradient(1300px 900px at 22% 62%, var(--glow-1), transparent 70%),
    radial-gradient(900px 600px at 105% 110%, var(--glow-2), transparent 70%),
    var(--bg);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}
.board::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--grain); mix-blend-mode: var(--grain-blend); z-index: 9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------------------------- en-tête */
.b-head { position: absolute; z-index: 5; left: 96px; right: 96px; top: 60px; display: flex; align-items: flex-start; justify-content: space-between; }
.b-id { display: flex; align-items: baseline; gap: 24px; min-width: 0; }
.b-name { font-size: 64px; line-height: .9; font-weight: var(--name-w); font-variation-settings: 'wdth' var(--name-wdth); text-transform: uppercase; white-space: nowrap; }
.b-sous { font-size: 22px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.b-pages { display: flex; align-items: center; gap: 10px; padding-top: 18px; }
.b-cur { font-size: 22px; font-weight: 700; color: var(--ink-2); margin-right: 18px; white-space: nowrap; }
.b-pages i { position: relative; width: 44px; height: 5px; border-radius: 3px; background: var(--filet); overflow: hidden; }
.b-pages b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); }

/* ---------------------------------------------------------------------------------------------- pages */
.b-body { position: absolute; left: 0; top: 0; right: 0; bottom: 96px; }
.b-page { position: absolute; inset: 0; }

.word {
  position: absolute; left: 70px; top: 120px; white-space: nowrap; pointer-events: none;
  font-size: 600px; line-height: .78; font-weight: 900; font-variation-settings: 'wdth' 62; text-transform: uppercase;
  letter-spacing: -.01em; color: var(--word);
}
/* sur les pages à colonne de texte, le mot se couche le long du bord gauche, derrière la photo, jamais derrière un prix */
.word.vertical { writing-mode: vertical-rl; transform: rotate(180deg); left: 36px; top: 150px; font-size: 300px; line-height: .8; }
.photo { position: absolute; display: block; pointer-events: none; filter: drop-shadow(0 30px 40px var(--shadow)); }

.col { position: absolute; }
.lead, .kicker { margin: 0; font-size: 34px; font-weight: 600; color: var(--accent); }
.sec-h { font-size: 26px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 6px; }
.row + .sec-h { margin-top: 34px; }

/* une ligne de la carte */
.row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 2px solid var(--filet); }
.row > .hl { position: absolute; left: -24px; right: -24px; top: 0; bottom: 0; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; border-radius: 8px; z-index: 0; }
.row > :not(.hl) { position: relative; z-index: 1; }
.r-txt { flex: 1; min-width: 0; }
.r-name { font-weight: 800; font-variation-settings: 'wdth' 68; text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-detail { color: var(--ink-2); font-weight: 500; line-height: 1.25; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-price { position: relative; display: flex; align-items: baseline; color: var(--accent); font-weight: 800; font-variation-settings: 'wdth' 82; white-space: nowrap; line-height: 1; }
.r-price .eur { font-size: .5em; margin-left: .1em; font-weight: 700; }
.r-price .num { display: inline-block; }
.r-out { position: absolute; left: 0; top: 0; }
.r-sold { display: none; font-size: 24px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--alert); padding: 9px 14px 8px; border-radius: 6px; }
.row.sold .r-price { display: none; }
.row.sold .r-sold { display: block; }
.row.sold .r-name, .row.sold .r-detail { opacity: .45; text-decoration: line-through; text-decoration-thickness: 4px; text-decoration-color: var(--alert); }
.row.flash .r-price, .row.flash .r-name, .row.flash .r-detail { color: var(--on-accent); }

/* page 1 : frites */
.ph-frites { left: 120px; top: 150px; height: 860px; }
.col-frites { left: 1010px; right: 96px; top: 250px; }
.col-frites .lead { margin-bottom: 26px; }
.row.big { padding: 30px 0 32px; }
.row.big .r-name { font-size: 92px; font-variation-settings: 'wdth' 62; font-weight: 900; }
.row.big .r-detail { font-size: 28px; }
.row.big .r-price { font-size: 128px; }
.row.big:last-child { border-bottom: 0; }

/* page 2 : les sauces (pots vus de dessus, à la couleur de chaque sauce) */
.sauces-head { position: absolute; left: 96px; right: 96px; top: 176px; display: flex; align-items: center; justify-content: space-between; }
.sauces-head .title { font-size: 150px; line-height: .85; font-weight: 900; font-variation-settings: 'wdth' 62; text-transform: uppercase; }
.tag { font-size: 44px; font-weight: 800; font-variation-settings: 'wdth' 80; color: var(--on-accent); background: var(--accent); padding: 18px 28px 16px; border-radius: 10px; white-space: nowrap; }
.cups { position: absolute; left: 96px; right: 96px; top: 400px; display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 52px; column-gap: 20px; }
.cup { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pot {
  position: relative; width: 184px; height: 184px; border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, #FFFFFF 0 64%, #E9E4DA 66%, #CFC8BB 71%, #BDB5A6 72%);
  box-shadow: 0 18px 30px var(--shadow), 0 2px 0 rgba(255, 255, 255, .5) inset;
}
.pot i {
  position: absolute; left: 15%; top: 13%; width: 70%; height: 70%; border-radius: 50%; background: var(--sauce);
  box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .22), inset 0 8px 12px rgba(255, 255, 255, .25);
}
.pot i::before { /* la surface de la sauce : un tourbillon de cuillère */
  content: ''; position: absolute; inset: 14%; border-radius: 50%;
  background: conic-gradient(from 30deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16), rgba(0, 0, 0, .06), rgba(255, 255, 255, 0), rgba(255, 255, 255, .12), rgba(0, 0, 0, .05), rgba(255, 255, 255, 0));
}
.pot i::after { /* le reflet */
  content: ''; position: absolute; left: 20%; top: 14%; width: 34%; height: 22%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%); transform: rotate(-24deg);
}
.cup-name { font-size: 34px; font-weight: 800; font-variation-settings: 'wdth' 68; text-transform: uppercase; line-height: 1; text-align: center; white-space: nowrap; }
.cup-sold { display: none; position: absolute; top: 66px; font-size: 20px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--alert); padding: 7px 12px 6px; border-radius: 5px; transform: rotate(-6deg); }
.cup.sold .pot { filter: grayscale(1); opacity: .35; }
.cup.sold .cup-name { opacity: .45; text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--alert); }
.cup.sold .cup-sold { display: block; }

/* page 3 : la mitraillette en vedette */
.p-mitra .word { font-size: 330px; top: 170px; left: 80px; }
.ph-mitra { right: -40px; top: 300px; width: 1240px; }
.col-hero { left: 96px; top: 500px; width: 760px; }
.col-hero .kicker { margin-bottom: 14px; }
.row.hero { display: block; border: 0; }
.row.hero > .hl { left: -32px; right: -32px; top: -24px; bottom: -24px; }
.row.hero .r-name { font-size: 120px; font-weight: 900; font-variation-settings: 'wdth' 62; overflow: visible; }
.row.hero .r-detail { font-size: 30px; white-space: normal; max-width: 640px; margin-top: 18px; line-height: 1.3; }
.row.hero .r-price { font-size: 150px; margin-top: 30px; width: max-content; }
.row.hero .r-sold { display: none; margin-top: 36px; font-size: 44px; padding: 14px 24px; width: max-content; }
.row.hero.sold .r-sold { display: block; }

/* page 4 : snacks */
.ph-snacks { left: 40px; top: 400px; width: 760px; }
.col-snacks { left: 860px; right: 96px; top: 210px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); column-gap: 56px; }
.col-snacks .row { padding: 22px 0 21px; gap: 16px; }
.col-snacks .r-name { font-size: 40px; font-variation-settings: 'wdth' 62; }
.col-snacks .r-detail { font-size: 20px; margin-top: 5px; }
.col-snacks .r-price { font-size: 54px; }

/* page 5 : sandwichs, pitas, boissons */
.ph-pita { left: 24px; top: 270px; width: 640px; }
.col-sandw { left: 730px; width: 560px; top: 190px; }
.col-boissons { left: 1360px; right: 96px; top: 190px; }
.col-sandw .row, .col-boissons .row { padding: 12px 0 11px; gap: 16px; }
.col-sandw .r-name, .col-boissons .r-name { font-size: 40px; font-variation-settings: 'wdth' 64; }
.col-sandw .r-detail { font-size: 19px; margin-top: 4px; }
.col-sandw .r-price, .col-boissons .r-price { font-size: 48px; }
.row.drink .r-txt { display: flex; align-items: baseline; gap: 12px; }
.row.drink .r-detail { margin: 0; font-size: 20px; flex: none; }
.col-boissons .row { padding: 15px 0 14px; }

/* ---------------------------------------------------------------------------------------------- bandeau */
.b-band { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 96px; background: var(--band); color: var(--band-ink);
  display: flex; align-items: center; justify-content: space-between; padding: 0 96px; gap: 40px; }
.b-note { font-size: 40px; font-weight: 800; font-variation-settings: 'wdth' 72; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-meta { font-size: 22px; font-weight: 700; white-space: nowrap; opacity: .82; }
.b-meta span + span::before { content: '·'; margin: 0 .7em; }
.p-snacks .word.vertical { font-size: 262px; top: 160px; }
.ph-snacks { top: 430px; }
/* la vedette : seul le prix s'allume (le bandeau de couleur passerait sur la photo) */
.row.hero > .hl { display: none; }
.row.hero .r-price { border-radius: 16px; padding: 8px 22px 10px; margin-left: -22px; transition: background-color .35s, color .35s; }
.row.hero.flash .r-name, .row.hero.flash .r-detail { color: inherit; }
.row.hero.flash .r-detail { color: var(--ink-2); }
.row.hero.flash .r-price { background: var(--accent); color: var(--on-accent); }

/* ---------------------------------------------------------------------------------------------- détails (V3) */
/* les doodles au marqueur (Illustrator) : couleur de l'encre du thème, ombre portée nette comme un vrai marqueur */
.board { --doodle: var(--ink); --doodle-shadow: rgba(0, 0, 0, .5); }
[data-theme='papier'] { --doodle: #1B1612; --doodle-shadow: rgba(255, 255, 255, .6); }
[data-theme='ketchup'] { --doodle-shadow: rgba(90, 0, 0, .55); }
.doodles { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; z-index: 4; overflow: visible;
  color: var(--doodle); filter: drop-shadow(2px 3px 0 var(--doodle-shadow)); }
.doodles .dd-sparkle-1, .doodles .dd-sparkle-2 { transform-box: fill-box; transform-origin: center; animation: dd-twinkle 2.8s ease-in-out infinite; }
.doodles .dd-sparkle-2 { animation-delay: 1.4s; }
.doodles .dd-steam path { transform-box: fill-box; transform-origin: center bottom; animation: dd-steam 3.2s ease-in-out infinite; }
.doodles .dd-steam path:nth-child(2) { animation-delay: .5s; }
.doodles .dd-steam path:nth-child(3) { animation-delay: 1s; }
@keyframes dd-twinkle { 0%, 100% { transform: scale(.35) rotate(0deg); opacity: .15; } 50% { transform: scale(1) rotate(20deg); opacity: 1; } }
@keyframes dd-steam { 0% { opacity: 0; transform: translateY(12px) scaleY(.85); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px) scaleY(1.08); } }

/* les photos respirent très doucement (au repos, l'écran n'est jamais figé) */
.photo { transform-origin: 50% 90%; animation: ph-breathe 7s ease-in-out infinite alternate; }
.ph-mitra { animation-duration: 8s; }
@keyframes ph-breathe { from { transform: none; } to { transform: scale(1.014) translateY(-3px); } }

/* la frite qui trempe dans l'andalouse (page des sauces) */
.ph-dip { left: 398px; top: 304px; width: 130px; transform-origin: 70% 90%; animation: ph-dip 4.6s ease-in-out infinite; filter: drop-shadow(0 16px 18px var(--shadow)); z-index: 2; }
@keyframes ph-dip { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-3deg); } }

@media (prefers-reduced-motion: reduce) {
  .photo, .doodles *, .ph-dip { animation: none !important; }
}

/* vapeur (After Effects) : derrière l'en-tête, devant le mot géant, fondue en haut et en bas */
canvas.steam { position: absolute; pointer-events: none; z-index: 1; opacity: .95;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22%, #000 60%, transparent 100%); mask-image: linear-gradient(to top, transparent 0, #000 22%, #000 60%, transparent 100%); }
.st-frites { left: 130px; top: 0; width: 560px; height: 315px; }
.st-mitra { left: 1000px; top: 110px; width: 620px; height: 349px; transform: scaleX(-1); }
.st-snacks { left: 320px; top: 330px; width: 480px; height: 270px; }
.st-pita { left: 110px; top: 40px; width: 460px; height: 259px; transform: scaleX(-1); }
.b-page > .photo { z-index: 2; }
[data-theme='papier'] canvas.steam { opacity: 0; }

/* ---------------------------------------------------------------------------------------------- V5 : la marque */
/* lettres 3D : la face crème (dégradé + grain) par-dessus son double, qui porte l'épaisseur dorée et l'ombre ;
   l'épaisseur suit la couleur d'accent du thème */
.board { --face-1: #FBF4E6; --face-2: #E7DAC2; --ext-1: color-mix(in srgb, var(--accent) 88%, #fff); --ext-2: color-mix(in srgb, var(--accent) 55%, #000); }
[data-theme='papier'] { --face-1: #2A221C; --face-2: #15100C; }
.w3d { position: relative; display: inline-block; white-space: pre; color: transparent;
  background: linear-gradient(180deg, var(--face-1) 0%, var(--face-2) 100%); -webkit-background-clip: text; background-clip: text; }
.w3d::before { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1; color: var(--ext-2);
  text-shadow: 0 .008em 0 var(--ext-1), 0 .016em 0 var(--ext-1), .002em .024em 0 color-mix(in srgb, var(--ext-1) 60%, var(--ext-2)),
    .003em .032em 0 color-mix(in srgb, var(--ext-1) 35%, var(--ext-2)), .004em .04em 0 var(--ext-2), .02em .09em .08em rgba(0, 0, 0, .55); }
.b-name .w3d::before { text-shadow: 0 .02em 0 var(--ext-1), 0 .04em 0 var(--ext-2), 0 .08em .08em rgba(0, 0, 0, .4); }
.b-name { isolation: isolate; }

.p-marque .brand { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 60px; isolation: isolate; }
.brand-name { margin: 0; display: flex; align-items: flex-end; font-size: 300px; line-height: .86; font-weight: 900; font-variation-settings: 'wdth' 62; letter-spacing: .005em; white-space: nowrap; isolation: isolate; }
.cone3d { height: 1.3em; width: auto; margin: 0 -.06em -.12em; position: relative; z-index: 2; filter: drop-shadow(0 .05em .06em rgba(0, 0, 0, .55)); transform: rotate(-4deg); transform-origin: 50% 100%; }
.brand-sub { display: flex; align-items: center; gap: 34px; width: 1640px; margin-top: 64px; font-size: 52px; font-weight: 500; letter-spacing: .14em; color: var(--ink); white-space: nowrap; }
.brand-sub i { flex: 1; height: 5px; border-radius: 3px; background: var(--accent); }
.brand-sub span { display: flex; align-items: center; gap: 30px; }
.brand-sub .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); }
.st-brand { width: 420px; height: 236px; }
.p-marque .b-pages, .p-marque ~ * { }

/* ---------------------------------------------------------------------------------------------- V5 : l'illusion de profondeur */
/* trois plans qui glissent lentement à des vitesses différentes (le loin bouge peu, le proche bouge plus) : la TV a
   l'air d'une caméra qui avance doucement le long du comptoir. Propriété « translate » : elle s'ajoute aux transform
   des entrées et de la respiration sans les écraser. */
.word, .brand-sub { animation: dp-far 16s ease-in-out infinite alternate; }
.photo { animation: ph-breathe 7s ease-in-out infinite alternate, dp-near 16s ease-in-out infinite alternate; }
.doodles, .brand-name { animation: dp-mid 16s ease-in-out infinite alternate; }
.cone3d { animation: dp-cone 16s ease-in-out infinite alternate; }
@keyframes dp-far { from { translate: -6px 0; } to { translate: 6px 0; } }
@keyframes dp-mid { from { translate: -11px 0; } to { translate: 11px 0; } }
@keyframes dp-near { from { translate: -20px 3px; } to { translate: 20px -3px; } }
@keyframes dp-cone { from { translate: -14px 4px; } to { translate: 10px -6px; } }
@media (prefers-reduced-motion: reduce) { .word, .brand-sub, .photo, .doodles, .brand-name, .cone3d { animation: none !important; } }
.photo.ph-dip { animation: ph-dip 4.6s ease-in-out infinite, dp-near 16s ease-in-out infinite alternate; }
.cone-wrap { position: relative; display: inline-block; z-index: 2; margin: 0 -.06em -.12em; animation: dp-cone 16s ease-in-out infinite alternate; }
.cone-wrap .cone3d { margin: 0; display: block; animation: none; }
.cone-wrap .st-brand { position: absolute; left: 50%; bottom: 72%; width: 1.5em; height: .84em; margin-left: -.8em; }
.brand-name { font-size: 400px; }