/* Pizza N'Co, site C : la carte légendée. Les tokens sont ceux de design.md, rien d'autre. */
@font-face { font-family: "Anton"; src: url("assets/fonts/anton-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("assets/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("assets/fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("assets/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

@property --bite { syntax: "<length>"; inherits: false; initial-value: 0px; }

:root {
  --boite: #F5F3EF;
  --charbon: #1D1D1B;
  --sauce: #D40D19;
  --pierre: #DCD8D1;
  --mur: #7E5A40;
  --crepi: #C0673F;

  --f-titre: "Anton", "Arial Narrow", sans-serif;
  --f-texte: "Barlow", system-ui, sans-serif;

  --t-hero: 56px;  --lh-hero: 0.95;
  --t-h2: 40px;    --lh-h2: 1;
  --t-h3: 28px;    --lh-h3: 1.05;
  --t-lead: 20px;  --lh-lead: 1.4;
  --t-body: 18px;  --lh-body: 1.55;
  --t-small: 15px; --lh-small: 1.45;
  --t-button: 17px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --r-rond: 999px;
  --r-carte: 14px;

  --arrive: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gut: 20px;
  --band: var(--s-8);
  --bar-h: 68px;
  --ombre-pizza: drop-shadow(0 10px 18px rgb(29 29 27 / 0.22));
}
@media (min-width: 1024px) {
  :root {
    --t-hero: 104px; --lh-hero: 0.92;
    --t-h2: 64px;    --lh-h2: 0.98;
    --t-h3: 36px;
    --t-lead: 22px;
    --lh-body: 1.6;
    --gut: var(--s-7);
    --band: var(--s-9);
    --bar-h: 80px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + var(--s-3)); }
body {
  margin: 0; background: var(--boite); color: var(--charbon);
  font: 400 var(--t-body)/var(--lh-body) var(--f-texte);
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--sauce); outline-offset: 2px; }
.skip { position: absolute; left: var(--s-4); top: -60px; z-index: 50; background: var(--charbon); color: var(--boite); padding: var(--s-2) var(--s-4); border-radius: var(--r-rond); font: 600 var(--t-small)/1.2 var(--f-texte); text-decoration: none; }
.skip:focus { top: var(--s-2); }

.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gut); }
.h2 { font: 400 var(--t-h2)/var(--lh-h2) var(--f-titre); text-wrap: balance; }
.lead { font: 500 var(--t-lead)/var(--lh-lead) var(--f-texte); max-width: 27em; }
.body { max-width: 27em; }

/* Le lien texte : un filet de 1 px au repos, 2 px qui se dessine de gauche à droite au survol */
.link {
  font: 600 var(--t-button)/1.2 var(--f-texte); text-decoration: none; padding-bottom: 3px;
  background:
    linear-gradient(currentColor, currentColor) left bottom / 0% 2px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
}
.link-big { font-size: var(--t-lead); }

/* Le bouton principal : sauce, 52 px, une morsure de 10 px au survol */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 52px; padding: 0 var(--s-6); border-radius: var(--r-rond);
  background: var(--sauce); color: var(--boite); text-decoration: none;
  font: 600 var(--t-button)/1 var(--f-texte);
  -webkit-mask: radial-gradient(circle at calc(100% - 26px) 0, transparent var(--bite), #000 calc(var(--bite) + 0.5px));
          mask: radial-gradient(circle at calc(100% - 26px) 0, transparent var(--bite), #000 calc(var(--bite) + 0.5px));
}
.btn:active { transform: translateY(1px); }

@media (hover: hover) and (pointer: fine) {
  .btn { transition: background-color 200ms ease-out, --bite 200ms ease-out; }
  .btn:hover { background: var(--charbon); --bite: 10px; }
  .btn-on-mur:hover { background: var(--charbon); }
  .link { transition: background-size 300ms ease-out; }
  .link:hover { background-size: 100% 2px, 100% 1px; }
  .nav a { transition: background-size 300ms ease-out; }
  .nav a:hover { background-size: 100% 2px; }
}

/* ---------- La barre du haut ---------- */
.bar {
  position: sticky; top: 0; z-index: 30; height: var(--bar-h);
  display: flex; align-items: center; gap: var(--s-4);
  padding-inline: var(--gut); background: var(--boite);
  box-shadow: 0 1px 0 var(--pierre);
}
.bar-logo img { height: 44px; width: auto; }
.bar-order { margin-left: auto; }
.nav { display: flex; gap: var(--s-6); }
.nav a {
  font: 600 var(--t-button)/1.2 var(--f-texte); text-decoration: none; padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 2px no-repeat;
}
.menu-btn {
  display: none; align-items: center; gap: var(--s-2); height: 44px; padding: 0 var(--s-4);
  border-radius: var(--r-rond); background: var(--pierre);
  font: 600 var(--t-small)/1 var(--f-texte);
}
.menu-ico { width: 16px; height: 10px; border-block: 2px solid var(--charbon); }
@media (max-width: 1023px) {
  .menu-btn { display: inline-flex; }
  .nav {
    position: fixed; left: 0; right: 0; top: var(--bar-h); z-index: 29;
    flex-direction: column; gap: 0; padding: var(--s-3) var(--gut) var(--s-6);
    background: var(--boite); box-shadow: 0 1px 0 var(--pierre);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 250ms ease-out, transform 250ms ease-out, visibility 0s linear 250ms;
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 250ms ease-out, transform 250ms ease-out; }
  .nav a { font: 400 var(--t-h2)/1.25 var(--f-titre); padding: var(--s-2) 0; background: none; }
}
@media (min-width: 1024px) {
  .nav { margin-left: auto; }
  .bar-order { margin-left: var(--s-6); }
}

/* ---------- 1. Le héros : une pizza à la fois, légendée ---------- */
.hero {
  position: relative; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding: var(--s-4) 0 var(--s-6);
  background: radial-gradient(ellipse 62% 44% at 50% 46%, rgb(220 216 209 / 0.55), rgb(220 216 209 / 0) 72%);
}
.hero-title {
  padding-inline: var(--gut);
  font: 400 var(--t-h2)/var(--lh-h2) var(--f-titre); text-wrap: balance;
  max-width: 11.5em;
}
.stage {
  position: relative; width: 100%; max-width: 560px; justify-self: center;
  aspect-ratio: 1 / 1.1; margin-top: var(--s-3);
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.stage .pz {
  position: absolute; width: calc(var(--fit, 1.1) * 100%); max-width: none; height: auto;
  left: calc((1 - var(--fit, 1.1)) * 50%);
  top: calc((1.1 - var(--fit, 1.1)) / 1.1 * 50%);
  filter: var(--ombre-pizza);
  -webkit-user-drag: none; pointer-events: none;
}
.edge { position: absolute; top: 0; bottom: 0; width: 22%; z-index: 4; -webkit-tap-highlight-color: transparent; }
.edge-prev { left: 0; cursor: w-resize; }
.edge-next { right: 0; cursor: e-resize; }
.edge:focus-visible { outline-offset: -4px; border-radius: var(--r-carte); }

.pz-meta {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding-inline: var(--gut); margin-top: var(--s-2); min-height: calc(var(--t-hero) * var(--lh-hero));
}
.pz-name { font: 400 var(--t-hero)/var(--lh-hero) var(--f-titre); white-space: nowrap; }
.pz-price { font: 400 var(--t-h3)/1 var(--f-titre); white-space: nowrap; }
.pz-count { margin-left: auto; font: 500 var(--t-small)/1 var(--f-texte); color: var(--mur); white-space: nowrap; font-variant-numeric: tabular-nums; }

.hero-act { padding-inline: var(--gut); margin-top: var(--s-4); display: grid; gap: var(--s-3); justify-items: start; }
.hero-act .btn { width: 100%; }
.hero-line { font: 500 var(--t-small)/var(--lh-small) var(--f-texte); }
.hero-line a { text-decoration: none; white-space: nowrap; }

@media (min-width: 700px) and (max-width: 1023px) {
  .hero-act .btn { width: auto; }
}
@media (min-width: 1024px) {
  .hero {
    max-width: 1280px; margin-inline: auto; padding: var(--s-5) var(--gut) var(--s-7);
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "title stage" "meta stage" "act stage" "rest stage";
    column-gap: var(--s-7);
    min-height: min(calc(100vh - var(--bar-h)), 820px);
    background: radial-gradient(ellipse 36% 46% at 72% 50%, rgb(220 216 209 / 0.6), rgb(220 216 209 / 0) 72%);
  }
  .hero-title { grid-area: title; align-self: end; padding: 0; font-size: var(--t-h2); }
  .stage { grid-area: stage; max-width: 640px; align-self: center; margin: 0; }
  .pz-meta { grid-area: meta; padding: 0; margin-top: var(--s-6); flex-wrap: wrap; row-gap: var(--s-2); }
  .pz-count { margin-left: var(--s-2); }
  .hero-act { grid-area: act; padding: 0; margin-top: var(--s-6); }
  .hero-act .btn { width: auto; }
}

/* L'arrivée : la Regina glisse du bord droit en tournant, puis le nom, puis le bouton */
.js .hero .pz,
.js .hero .pz-meta,
.js .hero .hero-act { opacity: 0; }
.js .hero.go .pz { opacity: 1; animation: pz-in 800ms var(--arrive) both; }
.js .hero.go .pz-meta { opacity: 1; animation: rise-16 400ms var(--arrive) 500ms both; }
.js .hero.go .hero-act { opacity: 1; animation: rise-8 300ms ease-out 900ms both; }
.failsafe .hero .pz, .failsafe .hero .pz-meta, .failsafe .hero .hero-act { opacity: 1; }
@keyframes pz-in { from { transform: translateX(100vw) rotate(200deg); } to { transform: none; } }
@keyframes rise-16 { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rise-8 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- La signature : le trait légendé ---------- */
.lg { position: absolute; }
.lg-lines { left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 2; }
.lg-lines path { fill: none; stroke-linecap: round; }
.lg-lines .halo { stroke: var(--boite); stroke-width: 4; stroke-opacity: 0.75; }
.lg-lines .ink { stroke: var(--charbon); stroke-width: 1.5; }
.dot {
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--charbon); box-shadow: 0 0 0 2px var(--boite); z-index: 3; pointer-events: none;
}
.pill {
  z-index: 3; pointer-events: none; white-space: nowrap;
  padding: 5px 12px 6px; border-radius: var(--r-rond);
  background: var(--boite); border: 1.5px solid var(--charbon);
  font: 600 var(--t-small)/1.2 var(--f-texte); color: var(--charbon);
}
.lg-lines path.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lg-draw var(--d) linear var(--delay) forwards; }
.dot.draw { animation: lg-pop 120ms ease-out var(--delay) both; }
.pill.draw { animation: lg-pop 200ms ease-out var(--delay) both; }
@keyframes lg-draw { to { stroke-dashoffset: 0; } }
@keyframes lg-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }

/* ---------- Les bandes ---------- */
.band { position: relative; isolation: isolate; padding-block: var(--band); }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* 2. La carte : la boîte, le bois de leurs tables à 10 %, le pied du héros fondu sur 120 px */
.band-carte { padding-top: var(--s-7); }
.band-carte::before { background: url("assets/img/bois-900.jpg") center / 900px auto repeat; opacity: 0.1; }
.band-carte::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; z-index: -1;
  background: linear-gradient(var(--boite), rgb(245 243 239 / 0));
}
.carte-head { display: grid; gap: var(--s-4); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); }
.tabs [role="tab"] {
  font: 600 var(--t-small)/1.2 var(--f-texte); padding: var(--s-2) 0 var(--s-2);
  border-bottom: 3px solid transparent; color: var(--mur);
}
.tabs [role="tab"][aria-selected="true"] { color: var(--charbon); border-bottom-color: var(--sauce); }
@media (hover: hover) and (pointer: fine) {
  .tabs [role="tab"] { transition: color 200ms ease-out; }
  .tabs [role="tab"]:hover { color: var(--charbon); }
}

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-3); margin-top: var(--s-6); }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); } }
.grid.is-swapping { animation: fade-in 200ms ease-out; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.grid { grid-auto-flow: row dense; }
.card { position: relative; perspective: 1400px; }
.card[hidden] { display: none; }
.card.is-open { grid-column: 1 / -1; }
.back { display: none; }
.card.is-open .front { display: none; }
.card.is-open .back { display: grid; gap: var(--s-4); }
.disc { position: relative; aspect-ratio: 1; border-radius: var(--r-rond); background: var(--pierre); }
.disc img {
  position: absolute; left: 4%; top: 4%; width: 92%; height: 92%;
  filter: drop-shadow(0 6px 10px rgb(29 29 27 / 0.2));
  transition: transform 250ms ease-out, filter 250ms ease-out;
}
.disc-open { width: 100%; }
.disc-open img { left: 12%; top: 12%; width: 76%; height: 76%; }
.back-text .card-name { margin-top: 0; }
@media (min-width: 700px) {
  .card.is-open { grid-column: span 2; }
  .card.is-open .back { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; gap: var(--s-5); }
}
.card-name { font: 400 var(--t-h3)/var(--lh-h3) var(--f-titre); margin-top: var(--s-4); text-wrap: balance; }
.card-price { font: 400 var(--t-lead)/1.2 var(--f-titre); margin-top: var(--s-1); }
.card-ing { font: 500 var(--t-small)/var(--lh-small) var(--f-texte); margin-top: var(--s-2); }
.card-hit { position: absolute; inset: 0; z-index: 5; border-radius: var(--r-carte); -webkit-tap-highlight-color: transparent; }
.card .pill { white-space: normal; max-width: 92%; line-height: 1.15; }
/* La morsure du logo sur le disque, au survol : trois crocs en haut à droite, comme other/morsure-masque.svg */
.front .disc {
  --bite: 0px;
  -webkit-mask:
    radial-gradient(circle at 81.5% 12.46%, transparent var(--bite), #000 calc(var(--bite) + 0.5px)),
    radial-gradient(circle at 91.55% 24.03%, transparent var(--bite), #000 calc(var(--bite) + 0.5px)),
    radial-gradient(circle at 97.54% 38.15%, transparent var(--bite), #000 calc(var(--bite) + 0.5px));
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at 81.5% 12.46%, transparent var(--bite), #000 calc(var(--bite) + 0.5px)),
    radial-gradient(circle at 91.55% 24.03%, transparent var(--bite), #000 calc(var(--bite) + 0.5px)),
    radial-gradient(circle at 97.54% 38.15%, transparent var(--bite), #000 calc(var(--bite) + 0.5px));
  mask-composite: intersect;
}
@media (hover: hover) and (pointer: fine) {
  .front .disc { transition: --bite 250ms ease-out; }
  .card:not(.is-open):hover .front .disc { --bite: 10.5cqw; }
  .card { transition: transform 250ms ease-out; container-type: inline-size; }
  .card:hover { transform: translateY(-3px); }
  .card:not(.is-open):hover .front .disc img { transform: rotate(8deg); filter: drop-shadow(0 14px 18px rgb(29 29 27 / 0.26)); }
}

.order {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-5); align-items: center;
  margin-top: var(--s-8); padding-top: var(--s-7);
}
.order-img { width: 112px; height: 168px; object-fit: cover; border-radius: var(--r-carte); }
.order-text { display: grid; gap: var(--s-4); justify-items: start; }
.order-line { max-width: 27em; }
@media (min-width: 1024px) {
  .order { grid-template-columns: 180px minmax(0, 1fr); gap: var(--s-7); }
  .order-img { width: 180px; height: 270px; }
}

/* 3. Les offres : la pierre, le parement à 14 %, une ellipse de lumière */
.band-pierre { background: var(--pierre); }
.band-pierre::after {
  content: ""; position: absolute; inset: 0; z-index: -2; background: url("assets/img/parement-1024.jpg") center / cover; opacity: 0.14;
}
.band-pierre::before { background: radial-gradient(ellipse 30% 50% at 50% 45%, rgb(245 243 239 / 0.4), rgb(245 243 239 / 0) 100%); }
.offres { display: grid; gap: var(--s-7); }
.offer-list { display: grid; gap: var(--s-6); }
.offer-line { font: 400 var(--t-h2)/var(--lh-h2) var(--f-titre); text-wrap: balance; }
.offer-note { margin-top: var(--s-2); max-width: 27em; }
@media (min-width: 1024px) {
  .offres { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .offer-list { gap: var(--s-7); }
}

/* 4. La salle : le mur, leur salle en pleine largeur, puis la terrasse */
.band-mur { background: var(--mur); color: var(--boite); padding-top: 0; }
.legended { position: relative; }
.photo-salle img { width: 100%; }
.salle { display: grid; gap: var(--s-7); margin-top: var(--s-7); }
.salle-text { display: grid; gap: var(--s-5); justify-items: start; }
.photo-terrasse { border-radius: var(--r-carte); }
.photo-terrasse img { border-radius: var(--r-carte); width: 100%; }
.photo-terrasse::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-carte); pointer-events: none; z-index: 1;
  background: url("assets/img/parement-1024.jpg") center / cover; mix-blend-mode: overlay; opacity: 0.06;
}
.band-mur .btn-on-mur { box-shadow: none; }
@media (min-width: 1024px) {
  .photo-salle { max-height: 720px; overflow: hidden; }
  .photo-salle img { margin-top: min(0px, calc((720px - 66.69vw) / 2)); }
  .salle { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--s-8); margin-top: var(--s-8); }
}

/* 5. Ils en parlent : la boîte */
.avis { display: grid; gap: var(--s-8); }
.avis-gm { display: grid; gap: var(--s-5); justify-items: start; }
.gm-quote p { font: 400 var(--t-h3)/var(--lh-h3) var(--f-titre); max-width: 16em; }
.gm-src { font: 500 var(--t-small)/var(--lh-small) var(--f-texte); color: var(--mur); max-width: 27em; }
.gm-img { width: 200px; border-radius: var(--r-carte); }
.avis-google { display: grid; gap: var(--s-3); align-content: start; }
.note { display: flex; align-items: baseline; gap: var(--s-3); }
.note-big { font: 400 var(--t-hero)/0.9 var(--f-titre); }
.note-sur { font: 400 var(--t-h3)/1 var(--f-titre); }
.note-count { font: 500 var(--t-lead)/var(--lh-lead) var(--f-texte); }
@media (min-width: 1024px) {
  .avis { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
  .gm-img { width: 240px; }
}

/* 6. Le bloc adresse : le crépi de la maison, le texte en charbon, une plaque boîte pour le détail */
.band-crepi { background: var(--crepi) url("assets/img/crepi-1200.jpg") center / cover; }
.contact { display: grid; gap: var(--s-7); }
.contact-head { display: grid; gap: var(--s-5); justify-items: start; }
.contact-title { max-width: 12em; }
.plate {
  position: relative; background: var(--boite); border-radius: var(--r-carte);
  padding: var(--s-6) var(--s-5) var(--s-6);
  display: grid; gap: var(--s-4); align-content: start;
}
.plate-tel { font: 400 var(--t-h3)/1 var(--f-titre); text-decoration: none; justify-self: start; }
.plate-mail { font: 500 var(--t-small)/var(--lh-small) var(--f-texte); }
.plate-mail a { text-decoration: none; }
.hours { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.day { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--s-3); font: 500 var(--t-small)/var(--lh-small) var(--f-texte); }
.day dt { font-weight: 600; }
.day dd { display: grid; gap: 0; }
@media (min-width: 1024px) {
  .day dd { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); }
  .day dd span + span::before { content: "· "; }
}
.day.is-today dt, .day.is-today dd { font-weight: 600; }
.day.is-today dt::after { content: ", aujourd'hui"; font-weight: 500; }
.plate-note { font: 500 var(--t-small)/var(--lh-small) var(--f-texte); color: var(--mur); }
.plate-more { font: 400 var(--t-body)/var(--lh-body) var(--f-texte); padding-top: var(--s-2); max-width: 27em; }
.pastille { position: absolute; right: -10px; top: -34px; width: 88px; height: 88px; transform: rotate(-8deg); }
.pastille img { width: 100%; height: 100%; }
.pastille span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 var(--t-h3)/1 var(--f-titre); color: var(--boite); padding-top: 4px; }
@media (min-width: 1024px) {
  .contact { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; gap: var(--s-8); }
  .plate { padding: var(--s-7) var(--s-7) var(--s-6); }
  .pastille { width: 104px; height: 104px; right: -24px; top: -40px; }
}

/* 7. Le pied : le charbon, la farine à 18 % en écran */
.foot { position: relative; isolation: isolate; background: var(--charbon); color: var(--boite); padding-block: var(--s-8) var(--s-7); }
.foot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("assets/img/farine-1024.jpg") center / cover; mix-blend-mode: screen; opacity: 0.18; pointer-events: none; }
.foot-in { display: grid; gap: var(--s-5); justify-items: start; }
.foot-logo { width: 72px; height: auto; }
.foot-line { font: 500 var(--t-lead)/var(--lh-lead) var(--f-texte); max-width: 24em; }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.foot-nav a, .foot-contact a { font: 600 var(--t-button)/1.2 var(--f-texte); text-decoration: none; }
.foot-contact a { font: 400 var(--t-h3)/1 var(--f-titre); }
.foot-legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font: 500 var(--t-small)/var(--lh-small) var(--f-texte); padding-top: var(--s-5); }
.foot-legal a { color: var(--pierre); }

/* L'action sous le pouce, sur le téléphone, quand aucun autre bouton n'est à l'écran */
.pin { display: none; }
@media (max-width: 1023px) {
  body { padding-bottom: 0; }
  .pin {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    padding: var(--s-3) var(--gut) calc(var(--s-3) + env(safe-area-inset-bottom));
    background: var(--boite); box-shadow: 0 -1px 0 var(--pierre);
    transform: translateY(110%); transition: transform 250ms ease-out;
  }
  .pin .btn { width: 100%; }
  .pin.is-on { transform: none; }
  .foot { padding-bottom: calc(var(--s-7) + 76px); }
}

/* Les sections se révèlent en montant de 28 px en 0,9 s, une fois */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--arrive), transform 900ms var(--arrive); transition-delay: var(--rd, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .card.reveal.is-in { transition-delay: var(--rd, 0ms), var(--rd, 0ms); }

/* Mouvement réduit : l'état final d'emblée, des fondus de 200 ms */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero .pz, .js .hero .pz-meta, .js .hero .hero-act { opacity: 1; animation: none !important; }
  .js .hero.go .pz, .js .hero.go .pz-meta, .js .hero.go .hero-act { animation: none !important; }
  .lg-lines path.draw { animation: none; stroke-dashoffset: 0; }
  .dot.draw, .pill.draw { animation: fade-in 200ms ease-out both; }
  .js .reveal { transform: none; transition: opacity 200ms ease-out; transition-delay: 0ms; }
  .btn, .link, .nav a, .card, .disc img, .pin, .nav { transition-duration: 200ms !important; }
  .card:hover { transform: none; }
  .card:not(.is-open):hover .front .disc img { transform: none; }
}

/* ---------- Les pages Réserver et La carte : les mêmes tokens, les pastilles du trait légendé comme choix ---------- */
.page { padding-top: var(--s-7); }
.page-head { display: grid; gap: var(--s-4); justify-items: start; }
.nav a[aria-current="page"] { background-size: 100% 2px; }

/* Un choix : la pastille du trait légendé, pleine en charbon quand elle est prise */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 var(--s-4); border-radius: var(--r-rond);
  background: var(--boite); border: 1.5px solid var(--charbon);
  font: 600 var(--t-small)/1.2 var(--f-texte); color: var(--charbon); white-space: nowrap;
}
.chip small { font: 500 13px/1.2 var(--f-texte); }
.chip-day span { min-height: 56px; border-radius: var(--r-carte); padding: 0 var(--s-3); min-width: 72px; }
.chip input:checked + span { background: var(--charbon); color: var(--boite); }
.chip input:focus-visible + span { outline: 2px solid var(--sauce); outline-offset: 2px; }
.chip input:disabled { cursor: not-allowed; }
.chip input:disabled + span { border-color: var(--pierre); color: var(--mur); text-decoration: line-through; }

.resa { display: grid; gap: var(--s-7); margin-top: var(--s-6); }
.resa [hidden] { display: none; }
.resa-form { display: grid; gap: var(--s-6); }
.step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-3); }
.step legend, .field label { padding: 0; margin-bottom: var(--s-3); font: 400 var(--t-h3)/var(--lh-h3) var(--f-titre); }
.field label { margin-bottom: 0; font: 600 var(--t-small)/1.2 var(--f-texte); }
.resa-side .day dd { display: grid; }
.resa-side .day dd span + span::before { content: none; }
.step-note { font: 500 var(--t-small)/var(--lh-small) var(--f-texte); color: var(--mur); }
.stepper { display: inline-flex; align-items: center; gap: var(--s-4); }
.stepper button { width: 52px; height: 52px; border-radius: var(--r-rond); background: var(--pierre); font: 600 var(--t-lead)/1 var(--f-texte); }
.stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
.stepper output { font: 400 var(--t-h2)/1 var(--f-titre); min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.place { position: relative; display: grid; gap: var(--s-2); }
.place input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.place img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-carte); outline: 3px solid transparent; outline-offset: 3px; }
.place input:checked ~ img { outline-color: var(--sauce); }
.place input:focus-visible ~ img { outline-color: var(--charbon); }
.place span { font: 600 var(--t-button)/1.2 var(--f-texte); }
.place input:checked ~ span::before { content: "✓ "; color: var(--sauce); }
.fields { display: grid; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); }
.field input, .field textarea {
  width: 100%; min-height: 52px; padding: var(--s-3) var(--s-4);
  font: 500 var(--t-body)/1.3 var(--f-texte); color: var(--charbon);
  background: var(--boite); border: 1.5px solid var(--charbon); border-radius: var(--r-carte);
}
.field textarea { min-height: 96px; resize: vertical; }
.field [aria-invalid="true"] { border-color: var(--sauce); border-width: 2px; }
.field-err { font: 600 var(--t-small)/var(--lh-small) var(--f-texte); color: var(--sauce); }
.resa-send { display: grid; gap: var(--s-4); justify-items: start; padding-top: var(--s-5); border-top: 1px solid var(--pierre); }
.resa-send .btn { width: 100%; }
.resa-recap { font: 500 var(--t-lead)/var(--lh-lead) var(--f-texte); }
.resa-done { gap: var(--s-5); }
.resa-done > .h2 { padding-right: 72px; }
.resa-done > .link { justify-self: start; }
.resa-done .hours { margin-top: 0; }
.msg { background: var(--pierre); border-radius: var(--r-carte); padding: var(--s-4) var(--s-5); font: 500 var(--t-small)/var(--lh-small) var(--f-texte); white-space: pre-line; }
.msg-head { font: 600 var(--t-small)/1.2 var(--f-texte); color: var(--mur); }
.resa-side { display: grid; gap: var(--s-5); align-content: start; }
@media (min-width: 700px) {
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-wide { grid-column: 1 / -1; }
  .resa-send .btn { width: auto; }
}
@media (min-width: 1024px) {
  .resa { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-8); align-items: start; }
  .resa-side { position: sticky; top: calc(var(--bar-h) + var(--s-5)); }
}

/* La carte : les filtres ont la forme des onglets de l'accueil */
.tabs .filter {
  font: 600 var(--t-small)/1.2 var(--f-texte); padding: var(--s-2) 0; min-height: 44px;
  border-bottom: 3px solid transparent; color: var(--mur);
}
.tabs .filter[aria-pressed="true"] { color: var(--charbon); border-bottom-color: var(--sauce); }
@media (hover: hover) and (pointer: fine) {
  .tabs .filter { transition: color 200ms ease-out; }
  .tabs .filter:hover { color: var(--charbon); }
}
.carte-count { margin-top: var(--s-4); font: 500 var(--t-small)/var(--lh-small) var(--f-texte); color: var(--mur); }
.rows { display: grid; }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); align-items: baseline; padding-block: var(--s-3); border-bottom: 1px solid rgb(29 29 27 / 0.18); }
.rows .row-name { font: 400 var(--t-h3)/var(--lh-h3) var(--f-titre); }
.rows .row-price { font: 400 var(--t-lead)/1.2 var(--f-titre); white-space: nowrap; }
.rows .row-note { grid-column: 1 / -1; font: 500 var(--t-small)/var(--lh-small) var(--f-texte); max-width: 34em; }
.carte-more { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .carte-more { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }

@media (prefers-reduced-motion: reduce) {
  .tabs .filter { transition: none; }
}