/* ═══════════════════════════════════════════════════════════════════════════
   La carte, chez Sur Table — McDonald's.
   Basé sur "PICKLES - Menu AR.dc.html", option 3a (parcours cliquable).
   Every value here comes from the design doc; nothing is invented.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Safe areas. Inside the desktop device shell these are overridden to the
     exact numbers the design was drawn against (62px / 34px). */
  --safe-top: calc(env(safe-area-inset-top, 0px) + 18px);
  --safe-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  --gutter: 18px;
}

html, body { height: 100%; }
body { overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; }

button { font: inherit; color: inherit; }

/* ── App shell ─────────────────────────────────────────────────────────── */

.app {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
}

/* One screen is mounted at a time. Scrolling screens scroll inside .screen. */
.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/* Camera screens (scan, AR) fill the viewport and never scroll. */
.screen--fixed { overflow: hidden; }

.screen__inner { min-height: 100%; }

/* ── Shared atoms ──────────────────────────────────────────────────────── */

.kicker {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
}
.kicker--accent {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent);
}
.rule { height: 2px; background: var(--color-divider); }
.muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.note {
  font-size: 11px; line-height: 1.5; margin: 12px 0 0;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

/* Square 38px icon button, hairline box — the system's back affordance. */
.iconbtn {
  flex: none; width: 38px; height: 38px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--color-divider);
  cursor: pointer; color: var(--color-text);
}
.iconbtn--solid { background: var(--color-bg); border: 0; box-shadow: var(--shadow-sm); }
.iconbtn--light { background: var(--color-neutral-100); border: 0; color: var(--color-text); }

/* Full-width actions. Left-aligned label, square corners, 50/48px tall. */
.action {
  display: flex; align-items: center; gap: 9px;
  width: 100%; min-height: 50px; padding: 0 16px;
  border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
}
.action svg { flex: none; }
.action--primary { background: var(--color-accent); color: var(--color-bg); }
.action--primary:hover { background: var(--color-accent-600); }
.action--primary:active { background: var(--color-accent-700); }
.action--outline {
  min-height: 48px; margin-top: 2px;
  background: transparent; border: 1px solid var(--color-text); color: var(--color-text);
}
.action--outline:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.action--quiet {
  min-height: 48px; margin-top: 2px;
  background: transparent; border: 1px solid var(--color-divider); color: var(--color-text);
}
.action--ink { background: var(--color-text); color: var(--color-bg); }

/* Empty photo frame. A dish with no photo shows the hatched grey slot the
   design specifies; a dish with a photo shows it, in black and white. */
.photo {
  position: relative; overflow: hidden;
  background: var(--color-neutral-200);
}
/* Le système imprime en noir et blanc ; pour un burger la couleur vend mieux.
   Le choix vit dans config.photoTreatment et s'applique partout. */
.photo--bw { filter: grayscale(1) contrast(1.06); }
.photo--empty { background: var(--color-neutral-300); }
.photo--empty::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(32,30,29,.07) 0 7px, rgba(32,30,29,0) 7px 15px);
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
  padding: 8px; text-align: center;
}

/* Horizontal scroller with no visible scrollbar (category chips). */
.hz-strip { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.hz-strip::-webkit-scrollbar { display: none; }

@keyframes hz-sweep { 0% { transform: translateY(-72px); } 100% { transform: translateY(72px); } }
@keyframes hz-pulse { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .scan__sweep, .voice__bar { animation: none !important; }
}

/* ── Screen: scan ──────────────────────────────────────────────────────── */

.scan {
  position: relative; height: 100%; overflow: hidden;
  background: var(--color-neutral-900); color: var(--color-neutral-100);
}
/* The table, seen by the camera: a flat plane with a grain of wood. */
.scan__table, .scan__grain {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
}
.scan__table { background: var(--color-neutral-800); }
.scan__grain { background: repeating-linear-gradient(92deg, rgba(0,0,0,.22) 0 1px, rgba(0,0,0,0) 1px 34px); }
.scan__horizon { position: absolute; left: 0; right: 0; bottom: 46%; height: 2px; background: var(--color-neutral-600); }
.scan__body {
  position: relative; height: 100%; display: flex; flex-direction: column;
  padding: calc(var(--safe-top) + 4px) 22px calc(var(--safe-bottom) + 10px);
}
.scan__head { display: flex; align-items: baseline; justify-content: space-between; }
.scan__brand { font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; }
.scan__table-no { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-400); }
.scan__stack {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start; gap: 26px;
}
.scan__title { font-size: 29px; color: var(--color-neutral-100); margin: 0 0 8px; max-width: 14ch; }
.scan__sub { font-size: 14px; margin: 0; max-width: 31ch; color: var(--color-neutral-400); }
.scan__target { position: relative; width: 206px; height: 206px; }
.scan__corner { position: absolute; width: 36px; height: 36px; }
.scan__corner--tl { top: 0; left: 0; border-top: 3px solid var(--color-accent); border-left: 3px solid var(--color-accent); }
.scan__corner--tr { top: 0; right: 0; border-top: 3px solid var(--color-accent); border-right: 3px solid var(--color-accent); }
.scan__corner--bl { bottom: 0; left: 0; border-bottom: 3px solid var(--color-accent); border-left: 3px solid var(--color-accent); }
.scan__corner--br { bottom: 0; right: 0; border-bottom: 3px solid var(--color-accent); border-right: 3px solid var(--color-accent); }
.scan__qr {
  position: absolute; inset: 24px; border: 0; cursor: pointer; overflow: hidden;
  background: var(--color-neutral-100);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px;
}
.scan__qr > * { min-width: 0; }
.qr-eye { border: 7px solid var(--color-text); aspect-ratio: 1; }
.qr-mesh {
  background:
    repeating-linear-gradient(90deg, var(--color-text) 0 5px, transparent 5px 10px),
    repeating-linear-gradient(0deg, var(--color-text) 0 5px, transparent 5px 10px);
  background-blend-mode: multiply;
}
.qr-mesh--fine {
  background:
    repeating-linear-gradient(90deg, var(--color-text) 0 6px, transparent 6px 11px),
    repeating-linear-gradient(0deg, var(--color-text) 0 6px, transparent 6px 11px);
  background-blend-mode: multiply;
}
.qr-bars-h { background: repeating-linear-gradient(90deg, var(--color-text) 0 5px, transparent 5px 12px); }
.qr-bars-v { background: repeating-linear-gradient(0deg, var(--color-text) 0 5px, transparent 5px 12px); }
.qr-bars-v2 { background: repeating-linear-gradient(0deg, var(--color-text) 0 4px, transparent 4px 9px); }
.qr-solid { background: var(--color-text); }
.scan__sweep {
  position: absolute; left: 24px; right: 24px; top: 50%; height: 2px;
  background: var(--color-accent); pointer-events: none;
  animation: hz-sweep 2.4s ease-in-out infinite alternate;
}
/* Le document utilise le bouton du système ici. Sa hauteur naturelle tombe
   sous la cible tactile de 44 px : on la relève sans toucher au reste. */
.scan__cta { margin: 0; min-height: 50px; font-size: 15px; }

/* ── Screen: menu ──────────────────────────────────────────────────────── */

.menu { position: relative; min-height: 100%; display: flex; flex-direction: column; background: var(--color-bg); }
.menu__head { padding: var(--safe-top) var(--gutter) 0; }
.menu__id { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.menu__resto { font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: .02em; }
.menu__table {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase; margin-top: 6px;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
}
.menu__lang {
  flex: none; padding: 5px 9px; background: transparent;
  border: 1px solid var(--color-divider); font-size: 11px; letter-spacing: .08em;
  color: var(--color-text);
}
.menu__rule { margin: 14px 0 12px; }

.search { display: flex; gap: 8px; }
.search__field {
  flex: 1; display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 10px;
  background: var(--color-surface); border: 1px solid var(--color-divider);
}
.search__field svg { opacity: .5; flex: none; }
.search__field:focus-within { border-color: var(--color-accent); }
.search__input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 0;
  font: inherit; font-size: 13.5px; color: var(--color-text);
  caret-color: var(--color-accent);
}
.search__input::placeholder { color: color-mix(in srgb, var(--color-text) 48%, transparent); }
.search__mic {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-bg); border: 0; cursor: pointer;
}
.search__mic:hover { background: var(--color-accent-600); }

.cats { display: flex; gap: 6px; margin: 12px 0 0; }
.cat {
  flex: none; padding: 6px 11px; font-size: 12px; cursor: pointer;
  background: transparent; color: var(--color-text); border: 1px solid var(--color-divider);
}
.cat[aria-pressed="true"] { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }

.query {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 9px 11px; background: var(--color-accent-100); border-left: 3px solid var(--color-accent);
}
.query__text { font-size: 12.5px; flex: 1; color: var(--color-accent-800); }
.query__clear {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; color: var(--color-accent-800);
}

.menu__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 0; }
.viewtoggle { display: flex; flex: none; border: 1px solid var(--color-divider); }
.viewtoggle button {
  width: 32px; height: 30px; display: grid; place-items: center;
  background: transparent; color: var(--color-text); border: 0; cursor: pointer;
}
.viewtoggle button + button { border-left: 1px solid var(--color-divider); }
.viewtoggle button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-bg); }

/* Grid: two columns hairlined by the divider showing through a 2px gap. */
.grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--color-divider); margin: 16px 0 0;
  border-top: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider);
}
.grid__item {
  display: block; text-align: left; padding: 0; border: 0; cursor: pointer;
  background: var(--color-bg); color: inherit;
}
.grid__photo { height: 106px; }
.grid__body { padding: 10px 12px 14px; }
.grid__name { font-family: var(--font-heading); font-weight: 800; font-size: 13.5px; line-height: 1.2; min-height: 32px; }
.grid__meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 7px; }
.grid__price { font-size: 13px; }
.grid__kcal { font-size: 11px; margin-top: 5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.list { margin: 16px 0 0; border-top: 2px solid var(--color-divider); }
.list__item {
  display: flex; gap: 13px; width: 100%; text-align: left; align-items: flex-start;
  padding: 13px var(--gutter); border: 0; border-bottom: 1px solid var(--color-divider);
  cursor: pointer; background: var(--color-bg); color: inherit;
}
.list__photo { flex: none; width: 64px; height: 64px; }
.list__body { flex: 1; min-width: 0; }
.list__name { font-family: var(--font-heading); font-weight: 800; font-size: 14.5px; line-height: 1.2; }
.list__desc {
  font-size: 12px; line-height: 1.4; margin-top: 4px;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.list__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.list__price { font-size: 13.5px; }
.list__kcal { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* The one red mark on the card: the AR badge. */
.ar-badge {
  flex: none; font-size: 10px; letter-spacing: .1em; padding: 2px 6px;
  background: var(--color-accent); color: var(--color-bg);
}

.menu__empty { padding: 28px var(--gutter); font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.menu__foot {
  padding: 20px var(--gutter) 46px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

/* Running total, pinned to the bottom of the carte once anything is added. */
.mealbar {
  position: sticky; bottom: 0; display: block; width: 100%; text-align: left;
  padding: 0; border: 0; border-top: 2px solid var(--color-text);
  cursor: pointer; background: var(--color-bg); color: inherit;
}
.mealbar__track { height: 4px; background: var(--color-neutral-300); }
.mealbar__fill { height: 4px; background: var(--color-accent); }
.mealbar__row { display: flex; align-items: center; gap: 12px; padding: 12px var(--gutter) calc(var(--safe-bottom) + 14px); }
.mealbar__label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.mealbar__nums { display: flex; align-items: baseline; gap: 7px; margin-top: 4px; }
.mealbar__body { flex: 1; min-width: 0; }
.mealbar__kcal { font-family: var(--font-heading); font-weight: 800; font-size: 21px; line-height: 1; }
.mealbar__unit { font-size: 12px; }
.mealbar__price { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.mealbar__chev { flex: none; color: var(--color-accent); display: flex; }

/* Voice sheet. */
.voice {
  position: absolute; inset: 0; z-index: 30;
  background: color-mix(in srgb, var(--color-neutral-900) 58%, transparent);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: calc(var(--safe-bottom) + 20px);
}
.voice__sheet { background: var(--color-bg); border-top: 2px solid var(--color-accent); padding: 20px var(--gutter) 24px; }
.voice__head { display: flex; align-items: center; gap: 12px; }
.voice__meter { display: flex; align-items: center; gap: 3px; height: 26px; flex: none; }
.voice__bar { width: 3px; height: 26px; background: var(--color-accent); animation: hz-pulse .9s ease-in-out infinite; }
.voice__bar:nth-child(2) { animation-delay: .15s; }
.voice__bar:nth-child(3) { animation-delay: .3s; }
.voice__bar:nth-child(4) { animation-delay: .45s; }
.voice__title { margin: 0; font-size: 19px; flex: 1; }
.voice__close {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--color-divider); cursor: pointer; color: var(--color-text);
}
.voice__hint { font-size: 13px; margin: 12px 0 14px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.voice__list { display: flex; flex-direction: column; gap: 2px; background: var(--color-divider); border-top: 1px solid var(--color-divider); }
.voice__opt {
  display: block; width: 100%; text-align: left; padding: 12px 2px;
  background: var(--color-bg); border: 0; cursor: pointer; font-size: 14px; color: var(--color-text);
}

/* ── Screen: detail ────────────────────────────────────────────────────── */

.detail { min-height: 100%; background: var(--color-bg); display: flex; flex-direction: column; }
.detail__hero { position: relative; height: 258px; flex: none; }
.detail__hero .photo { position: absolute; inset: 0; }
.detail__back { position: absolute; top: calc(var(--safe-top) - 2px); left: 16px; }
.detail__body { padding: 20px var(--gutter) calc(var(--safe-bottom) + 34px); }
.detail__name { font-size: 27px; margin: 8px 0 12px; max-width: 20ch; }
.detail__desc { font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; text-wrap: pretty; }
.detail__pricerow { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; }
.detail__price { font-family: var(--font-heading); font-weight: 800; font-size: 24px; }
.detail__portion { font-size: 12px; color: color-mix(in srgb, var(--color-text) 52%, transparent); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 20px; }
.tag-chip {
  font-size: 11px; padding: 3px 9px; border: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* Nutrition block. */
.nutri { margin-top: 28px; border-top: 2px solid var(--color-divider); }
.nutri__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; }
.nutri__head h6 { margin: 0; }
.unit { display: flex; flex: none; border: 1px solid var(--color-divider); }
.unit button { padding: 4px 9px; font-size: 11px; background: transparent; color: var(--color-text); border: 0; cursor: pointer; }
.unit button + button { border-left: 1px solid var(--color-divider); }
.unit button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-bg); }
.nutri__kcalrow { display: flex; align-items: flex-end; gap: 8px; margin-top: 14px; }
.nutri__kcal {
  font-family: var(--font-heading); font-weight: 800; font-size: 46px;
  line-height: .85; letter-spacing: -.02em; color: var(--color-accent-700);
}
.nutri__unit { font-size: 14px; padding-bottom: 3px; }
.nutri__spacer { flex: 1; }
.nutri__pct { font-size: 12px; padding-bottom: 4px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.gauge { height: 6px; background: var(--color-neutral-300); margin-top: 12px; }
.gauge__fill { height: 6px; background: var(--color-accent); }
.nutri__basis { font-size: 11px; margin-top: 7px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.macrobar { display: flex; height: 12px; margin-top: 20px; background: var(--color-neutral-300); }
.macrobar__seg { height: 12px; box-sizing: border-box; border-right: 2px solid var(--color-bg); }
.macros { margin-top: 12px; border-top: 1px solid var(--color-divider); }
.macros__row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-divider); }
.macros__swatch { flex: none; width: 11px; height: 11px; }
.macros__key { flex: 1; font-size: 13px; }
.macros__key--sub { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.macros__g { flex: none; font-size: 13px; font-family: var(--font-heading); font-weight: 800; }
.macros__g--plain { font-family: var(--font-body); font-weight: 400; }
.macros__pct { flex: none; width: 38px; text-align: right; font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* Fiche table (origine, cuisson, prêt en…). */
.spec { margin-top: 26px; border-top: 2px solid var(--color-divider); }
.spec__row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.spec__k {
  flex: none; width: 98px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.spec__v { flex: 1; font-size: 13px; }

/* ── Screen: AR ────────────────────────────────────────────────────────── */

.ar { position: relative; height: 100%; background: var(--color-neutral-900); overflow: hidden; }
.ar__table, .ar__grain, .ar__light {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64%;
}
.ar__table { background: var(--color-neutral-700); }
.ar__grain { background: repeating-linear-gradient(93deg, rgba(0,0,0,.2) 0 1px, rgba(0,0,0,0) 1px 30px); }
.ar__light { background: linear-gradient(to bottom, rgba(255,255,255,.07), rgba(0,0,0,.3)); }
.ar__horizon { position: absolute; left: 0; right: 0; bottom: 64%; height: 2px; background: var(--color-neutral-500); }
.ar__stage {
  /* La zone de rendu s'arrête au-dessus du bandeau : l'objet est centré dans
     ce qui reste visible, quelle que soit sa hauteur.
     Hauteur CALCULÉE, pas « auto » : model-viewer lit sa taille au montage, et
     un petit modèle peut arriver avant que la mise en page ne soit résolue —
     il rend alors une fois dans le vide et n'y revient jamais. */
  position: absolute; left: 0; right: 0; top: 0;
  width: 100%; height: calc(100% - 132px);
  background: transparent;
  --poster-color: transparent;
  /* le halo de chargement et les bulles par défaut jureraient avec le système */
  --progress-bar-color: var(--color-accent);
  --progress-mask: transparent;
}
model-viewer::part(default-progress-bar) { height: 2px; }
.ar__head {
  position: absolute; top: calc(var(--safe-top) - 4px); left: 0; right: 0;
  display: flex; align-items: flex-start; gap: 12px; padding: 0 16px; pointer-events: none;
}
.ar__head .iconbtn { pointer-events: auto; }
.ar__title { flex: 1; min-width: 0; padding-top: 2px; }
.ar__name { font-family: var(--font-heading); font-weight: 800; font-size: 16px; line-height: 1.2; color: var(--color-neutral-100); }
.ar__meta { font-size: 12px; margin-top: 3px; color: var(--color-neutral-300); }
.ar__scale {
  flex: none; font-size: 10px; letter-spacing: .1em; padding: 3px 8px;
  border: 1px solid var(--color-neutral-400); color: var(--color-neutral-100);
}
.ar__foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 16px calc(var(--safe-bottom) + 30px); pointer-events: none;
  /* voile sombre : l'objet 3D occupe tout le cadre, le texte doit rester
     lisible par-dessus sans qu'on lui pose une boîte opaque */
  background: linear-gradient(to bottom, transparent, rgba(20,19,18,.55) 38%, rgba(20,19,18,.82));
}
/* Même raison en haut, derrière le titre et la bascule. */
.ar__head::before {
  content: ''; position: absolute; left: -16px; right: -16px;
  top: calc(var(--safe-top) * -1 - 20px); height: 190px; z-index: -1;
  background: linear-gradient(to bottom, rgba(20,19,18,.85) 45%, transparent);
  pointer-events: none;
}
.ar__hint { font-size: 12px; margin: 0 0 14px; color: var(--color-neutral-300); }
.ar__actions { display: flex; gap: 2px; pointer-events: auto; }
.ar__actions .action { flex: 1; }
.ar__share {
  flex: none; width: 50px; min-height: 50px; display: grid; place-items: center;
  background: var(--color-neutral-100); color: var(--color-text); border: 0; cursor: pointer;
}
/* If three.js can't load, the AR stage says so rather than showing nothing. */
/* Le lanceur AR : action principale de l'écran, il ouvre l'appareil photo.
   Masqué par ar.js quand l'appareil ne sait pas faire d'AR. */
.ar__launch { pointer-events: auto; margin-bottom: 2px; }
.ar__launch[hidden] { display: none; }

/* Sur le fond sombre, le bouton secondaire doit s'inverser. */
.action--ondark {
  background: var(--color-neutral-100); color: var(--color-text);
}
.action--ondark:hover { background: #fff; }

/* ── Screen: meal ──────────────────────────────────────────────────────── */

.meal { min-height: 100%; background: var(--color-bg); padding: var(--safe-top) var(--gutter) calc(var(--safe-bottom) + 34px); }
.meal__head { display: flex; align-items: center; gap: 10px; }
.meal__headlabel { flex: 1; }
.meal__title { font-size: 27px; margin: 20px 0 0; }
.meal__rule { margin: 14px 0 0; }
.meal__kcalrow { display: flex; align-items: flex-end; gap: 8px; margin-top: 18px; }
.meal__kcal {
  font-family: var(--font-heading); font-weight: 800; font-size: 58px;
  line-height: .82; letter-spacing: -.03em; color: var(--color-accent-700);
}
.meal__unit { font-size: 16px; padding-bottom: 4px; }
.meal__pct { font-size: 12px; padding-bottom: 5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.meal__gauge { margin-top: 14px; }
.meal__left { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; }
.meal__leftlabel { font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.meal__ref { font-size: 11px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.meal__macrobar { margin-top: 24px; }
.meal__items { margin-top: 10px; border-top: 2px solid var(--color-divider); }
.meal__item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.meal__itembody { flex: 1; min-width: 0; }
.meal__itemname { font-family: var(--font-heading); font-weight: 800; font-size: 14px; line-height: 1.25; }
.meal__itemmeta { font-size: 12px; margin-top: 3px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.meal__remove {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--color-divider); cursor: pointer; color: var(--color-text);
}
.meal__empty { font-size: 13px; margin: 12px 0 0; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.meal__actions { display: flex; gap: 2px; margin-top: 24px; }
.meal__actions .action { flex: 1; }
.meal__clear {
  flex: none; width: 50px; min-height: 50px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--color-divider); cursor: pointer; color: var(--color-text);
}

/* ── Desktop preview shell ─────────────────────────────────────────────────
   On a phone the app is the whole viewport. On a wide screen it is shown at
   the size it was designed against (402 × 874) inside a device frame, so the
   layout can be checked without a handset.
   ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 620px) and (min-height: 700px) {
  body { display: grid; place-items: center; background: var(--color-neutral-200); }

  .app {
    width: 402px; height: 874px;
    border-radius: 48px;
    box-shadow: 0 40px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.12);
    /* The numbers the design was drawn against, inside the frame. */
    --safe-top: 62px;
    --safe-bottom: 34px;
  }
  /* Dynamic island + home indicator, drawn by the shell not the app. */
  .app::before {
    content: ''; position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
    width: 126px; height: 37px; border-radius: 24px; background: #000; z-index: 50;
    pointer-events: none;
  }
  .app::after {
    content: ''; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    width: 139px; height: 5px; border-radius: 100px;
    background: rgba(0,0,0,.25); z-index: 60; pointer-events: none;
  }
  /* On the dark camera screens the indicator has to invert to stay visible. */
  .app[data-dark="true"]::after { background: rgba(255,255,255,.7); }
}

/* ── Toast ─────────────────────────────────────────────────────────────────
   Used only where the platform has no UI of its own to fall back on (a share
   sheet that isn't there, a copy that succeeded silently).
   ────────────────────────────────────────────────────────────────────────── */

.toast {
  position: absolute; left: 16px; right: 16px; z-index: 80;
  bottom: calc(var(--safe-bottom) + 24px);
  padding: 12px 14px;
  background: var(--color-text); color: var(--color-bg);
  font-size: 13px; line-height: 1.4;
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.toast--on { opacity: 1; transform: none; }

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

/* ── Overlay layer ─────────────────────────────────────────────────────────
   Sheets are siblings of the scroll container, so they sit against the
   viewport instead of the bottom of a carte that is taller than the screen.
   ────────────────────────────────────────────────────────────────────────── */

.overlay { position: absolute; inset: 0; z-index: 40; }
.overlay:empty { display: none; }

/* Nothing behind an open sheet should scroll. */
.screen--locked { overflow: hidden; }

/* ── Sélecteur de formule ──────────────────────────────────────────────────
   Burger seul / formule simple / formule double. Un vrai choix, pas un menu
   déroulant : les trois prix sont lisibles d'un coup d'œil.
   ────────────────────────────────────────────────────────────────────────── */

.opts { border-top: 2px solid var(--color-divider); }
.opt {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left; padding: 13px 12px;
  border: 0; border-bottom: 1px solid var(--color-divider);
  background: transparent; color: inherit; cursor: pointer;
}
.opt:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.opt--on { background: var(--color-accent-100); }
.opt--on:hover { background: var(--color-accent-100); }
.opt__mark { flex: none; width: 14px; height: 14px; border: 1px solid var(--color-divider); }
.opt--on .opt__mark { border-color: var(--color-accent); background: var(--color-accent); }
.opt__body { flex: 1; min-width: 0; }
.opt__label { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 14px; }
.opt__note {
  display: block; font-size: 11.5px; margin-top: 3px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.opt--on .opt__note { color: var(--color-accent-800); }
.opt__price { flex: none; font-size: 15px; }
.opt--on .opt__price { font-family: var(--font-heading); font-weight: 800; }

/* ── Bloc calories « affiche » ─────────────────────────────────────────────
   L'autre mise en forme (config.calorieStyle) : le chiffre devient le pavé
   rouge de la fiche et les macros passent dans le tableau du système. Le pavé
   déborde la gouttière, comme dans la maquette.
   ────────────────────────────────────────────────────────────────────────── */

.poster {
  background: var(--color-accent); color: var(--color-bg);
  padding: 20px 16px 22px;
  margin: 28px calc(var(--gutter) * -1) 0;
}
.poster__basis { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.poster__kcalrow { display: flex; align-items: flex-end; gap: 9px; margin-top: 10px; }
.poster__kcal {
  font-family: var(--font-heading); font-weight: 800; font-size: 66px;
  line-height: .82; letter-spacing: -.035em;
}
.poster__unit { font-size: 17px; padding-bottom: 6px; }
.poster__rule { height: 2px; background: var(--color-bg); opacity: .4; margin: 16px 0 10px; }
.poster__ar { font-size: 13px; }
.poster__head { margin: 22px 0 10px; }
.poster-wrap .table td { font-size: 13px; }
.poster__w { width: 66px; }
.poster__p { width: 56px; }

/* ── Suppléments ───────────────────────────────────────────────────────────
   Le petit encadré au bas de la carte, repris de la carte papier.
   ────────────────────────────────────────────────────────────────────────── */

.supp { padding: 18px var(--gutter) 0; }
.supp__box { border: 1px solid var(--color-divider); padding: 12px 13px; }
.supp__title {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.supp__text { font-size: 12px; line-height: 1.5; margin: 7px 0 0; text-wrap: pretty; }

/* ── Bascule AR : le burger / la formule ───────────────────────────────────
   Visible seulement quand l'option choisie est une formule.
   ────────────────────────────────────────────────────────────────────────── */

.artoggle {
  position: absolute; top: calc(var(--safe-top) + 50px); left: 16px; z-index: 5;
  display: flex; border: 1px solid var(--color-neutral-500);
}
.artoggle button {
  padding: 6px 12px; font-size: 12px; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent);
  color: var(--color-neutral-100);
}
.artoggle button + button { border-left: 1px solid var(--color-neutral-500); }
.artoggle button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-bg); }

/* ── Total du repas ────────────────────────────────────────────────────────
   Le compteur suit les calories ET l'addition.
   ────────────────────────────────────────────────────────────────────────── */

.meal__totalrow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: 26px;
}
.meal__totalrow h6 { margin: 0; }
.meal__total { font-family: var(--font-heading); font-weight: 800; font-size: 18px; }