/* =========================================================
   Chợ Vỉa Hè — La Carte complète
   Réutilise les tokens & composants de ../home.css.
   Ce fichier n'ajoute QUE les styles propres à la page carte.
   Mobile-first strict. État de repos visible sans JS.
   ========================================================= */

/* ---------- En-tête de page carte ---------- */
.carte-header {
  padding: calc(var(--header-h) + clamp(1.5rem, 6vw, 3.5rem)) 0 clamp(1.5rem, 5vw, 3rem);
  position: relative;
  z-index: 1;
  border-bottom: 1px dashed rgba(30,26,23,0.18);
  overflow: hidden;
}
.carte-back {
  display: inline-flex; align-items: center; min-height: 44px;   /* cible tactile */
  font-family: var(--f-hand);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--bleu);
  text-decoration: none;
  margin-bottom: 0.8rem;
  transform: rotate(-2deg);
}
.carte-back:hover, .carte-back:focus-visible { color: var(--framboise); }
.carte-title {
  font-family: var(--f-titre);
  font-weight: 600;
  color: var(--framboise);
  font-size: clamp(2rem, 1.2rem + 5vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 0.4rem;
}
.carte-title .viet {
  display: block;
  font-size: 0.62em;
  color: var(--encre);
}
.carte-title-fr {
  display: block;
  font-family: var(--f-hand);
  font-weight: 600;
  font-size: 0.5em;
  color: var(--bleu-fonce);
  margin-top: 0.15em;
}
.carte-annotation {
  font-family: var(--f-hand);
  font-weight: 600;
  color: var(--bleu);
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  transform: rotate(-2.5deg);
  display: inline-block;
  margin: 0.2rem 0 0;
}
.carte-note {
  color: var(--encre-doux);
  max-width: var(--measure);
  margin-top: 1rem;
  font-size: 0.98rem;
}

/* Paragraphes justifiés, même règle que sur l'accueil (voir home.css).
   Les lignes de plat (nom … prix) ne sont JAMAIS justifiées : c'est le
   pointillé qui fait la liaison, l'étirer casserait l'alignement des prix. */
.carte-note,
.menu-item-desc,
.pho-desc,
.pho-conseil {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
@media (max-width: 339px) {
  .carte-note, .menu-item-desc, .pho-desc, .pho-conseil { text-align: left; }
}
/* ---------- Sommaire collant sous l'en-tête ---------- */
.carte-sommaire {
  position: sticky;
  top: var(--header-h);
  z-index: 900;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.35rem var(--pad-x);
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(30,26,23,0.10);
}
.carte-sommaire::-webkit-scrollbar { display: none; }
/* Centré quand tout tient (comme la nav de l'en-tête et le contenu) ; quand ça
   déborde sur mobile, les marges auto tombent à 0 et la bande défile depuis
   la gauche (justify-content: center couperait « Tapas » hors de portée). */
.carte-sommaire a:first-child { margin-left: auto; }
.carte-sommaire a:last-child { margin-right: auto; }
.carte-sommaire a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border-radius: 999px;
  font-family: var(--f-corps);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
}
.carte-sommaire a:hover,
.carte-sommaire a:focus-visible { background: color-mix(in srgb, var(--framboise) 12%, transparent); color: var(--framboise-fonce); }
/* le sommaire ajoute ~3rem sous l'en-tête : les ancres doivent s'arrêter en dessous */
html { scroll-padding-top: calc(var(--header-h) + 3.4rem); }

/* téléchargement de la carte illustrée (PDF compressé) */
.carte-pdf { margin-top: 1.1rem; }
.carte-pdf a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-weight: 600;
}
.carte-pdf-poids {
  font-family: var(--f-corps);
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--encre-doux);
  border: 1px solid rgba(30,26,23,0.25);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

/* ---------- Apparitions au défilement ----------
   home.css cache les enfants directs de .wrap dans les sections [data-reveal].
   Sur la carte, la LISTE n'est pas animée (ce sont ses items qui le sont) :
   il faut donc la ré-afficher, sinon toute la carte reste invisible. */
.motion-armed [data-reveal] > .wrap > .menu-list { opacity: 1; transform: none; }
.motion-armed .menu-list > .menu-item { opacity: 0; transform: translateY(16px); }

/* ---------- Sections de la carte ---------- */
.menu-section { padding-block: clamp(2.5rem, 7vw, 4.5rem); position: relative; z-index: 1; }
.menu-section-head {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 3vw, 1.5rem);
  margin-bottom: 1.6rem;
}
.menu-section-illus {
  flex: 0 0 auto;
  width: clamp(58px, 15vw, 96px);
  filter: drop-shadow(0 8px 14px rgba(30,26,23,0.12));
}
.menu-section-illus img { width: 100%; }
.menu-section-titles { min-width: 0; }
.menu-section-title {
  font-family: var(--f-titre);
  font-weight: 600;
  color: var(--framboise);
  font-size: clamp(1.6rem, 1.1rem + 3vw, 2.6rem);
  line-height: 1.05;
  margin: 0;
}
.menu-section-title .fr {
  display: block;
  font-family: var(--f-hand);
  color: var(--bleu-fonce);   /* --bleu = 3,94:1 sur papier-ombre, échoue AA sous 24px */
  font-size: 0.5em;
  font-weight: 600;
  transform: rotate(-1.5deg);
  margin-top: 0.1rem;
}

/* ---------- Liste des plats ---------- */
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-item {
  padding: 0.9rem 0;
  border-bottom: 1px dashed rgba(30,26,23,0.14);
}
.menu-item:last-child { border-bottom: none; }
.menu-item-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.menu-item-nom {
  font-family: var(--f-titre);
  font-weight: 600;
  color: var(--encre);
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.35rem);
  line-height: 1.2;
}
/* pointillés de liaison nom → prix (feel carte de restaurant) */
.menu-item-lead {
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 1px dotted rgba(30,26,23,0.28);
  transform: translateY(-0.1em);   /* -0.25em se lisait comme un barré, pas un filet */
}
.menu-item-prix {
  font-family: var(--f-corps);
  font-weight: 600;
  color: var(--framboise);
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.25rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.menu-item-desc {
  margin: 0.3rem 0 0;
  color: var(--encre-doux);
  font-size: clamp(0.94rem, 0.9rem + 0.25vw, 1.02rem);
  max-width: 62ch;
}
.menu-item-tag {
  display: inline-block;
  font-family: var(--f-hand);
  font-weight: 600;
  color: var(--vert);
  font-size: 1.05rem;
  transform: rotate(-2deg);
  margin-left: 0.3rem;
}

/* ---------- Code végétarien (repris de la carte imprimée) ----------
   Sur le PDF, les plats végétariens sont écrits en vert. En ligne on garde
   le code couleur (var(--vert)) MAIS jamais seul : chaque plat porte aussi
   l'étiquette texte « végétarien », lisible sans percevoir la couleur.
   --vert brut (#2E7D32) = 3.8:1 sur le kraft → échoue AA dès que le texte
   repasse sous 18,7px gras (nom de plat en mobile). On travaille donc avec
   --vert-lisible, dérivé du token (color-mix 82% + noir) = 5,1:1, à l'œil
   le même vert que la carte imprimée. */
.menu-section { --vert-lisible: color-mix(in srgb, var(--vert) 82%, #000); }
.menu-item--vege .menu-item-nom { color: var(--vert-lisible); }
.menu-item-tag--vege {
  font-family: var(--f-corps);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vert-lisible);
  background: color-mix(in srgb, var(--vert) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--vert) 42%, transparent);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  transform: none;
  margin-left: 0.15rem;
  white-space: nowrap;
}
/* double classe : .menu-sub (défini plus bas) porte la même spécificité */
.menu-sub.menu-sub--vege { color: var(--vert-lisible); font-style: normal; }

/* petite précision (verre/bouteille, origine) sous un item */
.menu-sub {
  display: block;
  color: var(--encre-doux);
  font-size: 0.86rem;
  font-style: italic;
  margin-top: 0.2rem;
}

/* sous-titre de bloc (Cocktails, Vins, etc.) au sein d'une section */
.menu-subhead {
  font-family: var(--f-titre);
  font-weight: 600;
  color: var(--encre);
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.5rem);
  margin: 1.8rem 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid rgba(192,38,75,0.25);
}
.menu-subhead-hint {
  font-family: var(--f-hand);
  font-weight: 600;
  color: var(--bleu-fonce);
  font-size: 0.72em;
  margin-left: 0.3rem;
}

/* rangée compacte (vins, boissons fraîches, cafés) : nom + prix serrés */
.menu-list--compact .menu-item { padding: 0.55rem 0; }
.menu-list--compact .menu-item-desc { margin-top: 0.1rem; }
/* si le nom est trop long, le prix passe à la ligne : qu'il reste à droite */
.menu-item-prix { margin-left: auto; }
/* appellation d'un vin : sous la ligne nom → prix, en petit italique */
.menu-item-cepage {
  font-size: 0.86rem;
  font-style: italic;
  margin-top: 0.15rem;
}

/* note bas de section (suppléments, précisions) */
.menu-section-note {
  margin-top: 1.2rem;
  font-family: var(--f-corps);   /* des prix : jamais en écriture manuscrite (DESIGN.md) */
  font-weight: 500;
  color: var(--encre-doux);
  font-size: 0.95rem;
}

/* alternance douce de fond : classe explicite, pas nth-of-type — les
   bandes du phở et du plateau (fond propre) cassaient le comptage et la
   dernière rubrique, la plus longue, restait sans alternance. */
.menu-section--alt { background: rgba(255,255,255,0.32); }

/* ---------- desktop : 2 colonnes de plats sur les grosses sections ---------- */
@media (min-width: 780px) {
  .menu-list--2col {
    columns: 2;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .menu-list--2col .menu-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
}

/* =========================================================
   PLATEAU À PARTAGER — Mẹt Vỉa Hè
   Un seul item : il vaut une carte, pas une ligne de liste.
   ========================================================= */
/* Le plateau réutilise désormais la mise en page du phở (.pho-*) :
   les styles de carte encadrée ont été supprimés, seul le prix reste
   spécifique. Le dessin du plateau est plus étroit que celui du phở. */
#plateau .pho-illus { width: clamp(80px, 22vw, 150px); }
.plateau-prix {
  text-align: right; max-width: 58ch;   /* aligné sur le bord droit de la description, comme les autres prix */
  margin: 0.6rem 0 0;
  font-family: var(--f-corps);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--framboise);
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.7rem);
}

/* =========================================================
   PHỞ BÒ DU NORD — le plat signature
   Une page entière dans la carte imprimée : ici une bande à part,
   fond kraft foncé + filets framboise, puis 3 cartes de déclinaison.
   ========================================================= */
.pho-section {
  /* Semi-transparent : depuis que le fond porte la matière du carnet, un
     aplat opaque ferait un rectangle plat au milieu du papier — l'effet
     patchwork que la cliente redoutait. */
  background: color-mix(in srgb, var(--papier-ombre) 55%, transparent);
  border-block: 2px solid rgba(192,38,75,0.3);
}
.pho-section.menu-section:nth-of-type(even) { background: color-mix(in srgb, var(--papier-ombre) 55%, transparent); }
.pho-intro {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 4vw, 2.5rem);
  flex-direction: column;
}
.pho-illus {
  flex: 0 0 auto;
  width: clamp(110px, 32vw, 240px);
  filter: drop-shadow(0 10px 18px rgba(30,26,23,0.18));
}
.pho-illus img { width: 100%; height: auto; }
.pho-texte { min-width: 0; }
.pho-kicker {
  color: var(--bleu-fonce);
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  margin: 0 0 0.15rem;
  display: inline-block;
  transform: rotate(-2deg);
}
.pho-title { font-size: clamp(1.9rem, 1.2rem + 4vw, 3.1rem); }
.pho-desc {
  margin: 0.7rem 0 0;
  color: var(--encre);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
  max-width: 58ch;
}
.pho-conseil {
  margin: 0.9rem 0 0;
  padding-left: 0.9rem;
  border-left: 3px solid rgba(30,110,140,0.35);
  color: var(--encre-doux);
  font-size: clamp(0.94rem, 0.9rem + 0.25vw, 1.02rem);
  max-width: 58ch;
}
.pho-subhead {
  border-bottom-color: rgba(192,38,75,0.4);
  margin-top: clamp(1.6rem, 5vw, 2.6rem);
}
.pho-list { display: grid; gap: clamp(0.6rem, 2vw, 1rem); }
/* Dans une carte de ~200px, le pointillé + flex-wrap faisaient passer le
   prix à la ligne sur deux cartes sur quatre (mesuré : décalage 36px contre
   -4). Ici pas de pointillé : nom à gauche, prix à droite, une seule ligne. */
.pho-list .menu-item-head { flex-wrap: nowrap; justify-content: space-between; gap: 0.5rem; }
.pho-list .menu-item-lead { display: none; }
.pho-list .menu-item {
  border-bottom: none;
  background: color-mix(in srgb, var(--papier) 82%, #fff);
  border: 1px solid rgba(30,26,23,0.12);
  border-radius: var(--r-card);
  padding: clamp(0.85rem, 3vw, 1.15rem);
}

@media (min-width: 780px) {
  .pho-intro { flex-direction: row; align-items: center; }
  /* 4 déclinaisons depuis la carte du 31/08 (phở gà ajouté) : auto-fit plutôt
     qu'un nombre fixe, pour qu'un ajout ou un retrait ne laisse jamais une
     carte orpheline sur sa ligne. */
  .pho-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
}

/* ---------- CTA footer réserver ---------- */
.carte-cta-final {
  text-align: center;
  padding-block: clamp(3rem, 8vw, 5rem);
  position: relative;
  z-index: 1;
}
.carte-cta-final h2 {
  color: var(--framboise);
  font-size: clamp(1.7rem, 1.2rem + 3vw, 2.6rem);
}
.carte-cta-final p { color: var(--encre-doux); max-width: 40ch; margin-inline: auto; }
.carte-cta-final .btn-cta { margin-top: 1.2rem; font-size: 1.1rem; padding: 1rem 2rem; }

/* Le pied de page est PARTAGÉ (défini dans home.css) : aucune surcharge ici,
   sinon la page carte n'a pas le même visuel que le reste du site.
   (Un ancien bloc remettait un trait framboise permanent sous les liens et
   des interlignes différents — supprimé.) */

/* allergies footnote */
.carte-allergies {
  text-align: center;
  color: var(--encre-doux);
  font-style: italic;
  padding: 0 var(--pad-x) clamp(2rem, 6vw, 3rem);
  position: relative;
  z-index: 1;
}