/* =============================================================
   Pages publiques d'une carte de restaurant (offre Menu, CAHIER-MENU.md section 6.3).
   Feuille AUTONOME : ces pages ne chargent pas style.css, et n'appellent aucune ressource tierce.
   Palette de la charte, sans aucun vert. Thème clair uniquement. Lisible dès 320 px, imprimable.

   Direction « L'ardoise du jour » (22/09/2026) : ardoise de bistrot en tête (fond encre, cadre ocre, craie),
   carte sur un panneau crème bordé d'encre, illustrations au trait continu (src/views/carte-illustrations.ts).
   UN SEUL élément terracotta par écran : .cartepub__bouton. Les prix, les titres et les liens restent en encre.

   Elle habille DEUX familles de pages, toutes sous /c/ :
     - la carte elle-même (lot B, body.cartepub--carte) ;
     - les pages de réservation (lot C, body.cartepub--sous, src/views/carte-reservations.ts).
   Les deux partagent la classe de corps « cartepub » et la famille de classes « cartepub__ ».
   ============================================================= */
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/inter-tight-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Orbitron"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/orbitron-700-latin.woff2") format("woff2");
}

:root {
  color-scheme: light only;
  --ink: #172a30;
  --ink-2: #3d4f55;
  --ember: #c45122;
  --ember-d: #a83f18;
  --beige: #ece3d3;
  --cream: #faf7f3;
  --sand: #f1e4d1;
  --sand-2: #e6d3ba;
  --ochre: #d9a066;
  --coral: #e8a98c;
  --white: #ffffff;
  --error: #a3271b;
  --title: "Orbitron", "Inter Tight", system-ui, sans-serif;
  --text: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Hauteur de la barre « Réserver une table » sur téléphone : le pied garde cette place en bas. */
  --bar-h: 104px;
  /* Couleur d'accent (migration 26) : terracotta par défaut, exactement le rendu d'avant la personnalisation.
     --accent : fond du bouton ; --accent-ink : son texte ; --accent-line : son contour (se détache du crème et du
     sable) ; --accent-shadow : son ombre intérieure ; --accent-text : titres « Nous trouver » et « Horaires » (texte sur
     crème : l'ocre et le corail n'y sont pas lisibles, ces deux accents y passent à l'encre) ; --slate-frame : cadre
     de l'ardoise ; --slate-sur : petit titre à la craie sur l'ardoise. */
  --accent: #c45122;
  --accent-ink: #ffffff;
  --accent-line: #c45122;
  --accent-shadow: #a83f18;
  --accent-hover: #a83f18;
  --accent-text: #c45122;
  --slate-frame: #d9a066;
  --slate-sur: #d9a066;
}

/* Palette FERMÉE de la charte (src/menu.ts, MENU_ACCENT_COLORS : mêmes valeurs, vérifiées par les tests). Sur l'ocre
   et le corail, le texte du bouton est à l'encre et son contour aussi : du blanc n'y serait pas lisible. */
.cartepub--accent-terracotta { --accent: #c45122; --accent-ink: #ffffff; --accent-line: #c45122; --accent-shadow: #a83f18; --accent-hover: #a83f18; --accent-text: #c45122; --slate-frame: #d9a066; --slate-sur: #d9a066; }
.cartepub--accent-ocre { --accent: #d9a066; --accent-ink: #172a30; --accent-line: #172a30; --accent-shadow: #3d4f55; --accent-hover: #d9a066; --accent-text: #172a30; --slate-frame: #d9a066; --slate-sur: #d9a066; }
.cartepub--accent-corail { --accent: #e8a98c; --accent-ink: #172a30; --accent-line: #172a30; --accent-shadow: #3d4f55; --accent-hover: #e8a98c; --accent-text: #172a30; --slate-frame: #e8a98c; --slate-sur: #e8a98c; }
.cartepub--accent-encre { --accent: #172a30; --accent-ink: #ffffff; --accent-line: #172a30; --accent-shadow: #3d4f55; --accent-hover: #3d4f55; --accent-text: #172a30; --slate-frame: #e6d3ba; --slate-sur: #e6d3ba; }

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.cartepub {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.55;
}

/* Règles de base à spécificité faible (:where) : une classe « cartepub__ » posée sur un titre, un paragraphe ou un
   lien passe toujours devant elles. */
:where(.cartepub) h1,
:where(.cartepub) h2 {
  font-family: var(--title);
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
  text-wrap: balance;
}
/* Le nom affiché va jusqu'à 120 caractères et le nom d'un plat jusqu'à 100 : un mot long sans espace, rendu en
   majuscules, sortirait de la colonne et ferait défiler la page en travers sur un téléphone de 390 px. */
:where(.cartepub) h1,
:where(.cartepub) h2,
:where(.cartepub) h3 { overflow-wrap: anywhere; }
:where(.cartepub) h1 { font-size: clamp(1.6rem, 7.2vw, 3rem); margin: 0; }
:where(.cartepub) h2 { font-size: 1.1rem; margin: 0 0 12px; }
:where(.cartepub) h3 { font-size: 1.08rem; margin: 0; font-weight: 800; line-height: 1.3; }
:where(.cartepub) p { margin: 0 0 10px; }
:where(.cartepub) a { color: var(--ink); font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:where(.cartepub) a:hover { text-decoration-color: var(--ochre); }
.cartepub img { max-width: 100%; }

/* Focus visible partout : contour encre de 3 px ; crème sur l'ardoise (fond encre). */
.cartepub a:focus-visible,
.cartepub button:focus-visible,
.cartepub input:focus-visible,
.cartepub textarea:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.cartepub__ardoise a:focus-visible { outline-color: var(--cream); }

/* Lien d'évitement : hors écran tant qu'il n'a pas le focus. */
.cartepub__skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.cartepub__skip:focus {
  left: 12px;
  top: 12px;
  z-index: 40;
  padding: 12px 16px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 10px;
}

/* ---------- Dessins au trait (src/views/carte-illustrations.ts) ---------- */

.cpi { display: block; overflow: visible; }
.cpi-o { stroke: var(--ochre); }
.cpi-of { fill: var(--ochre); }
.cpi-t { stroke: var(--ember); }
.cpi-tf { fill: var(--ember); }
.cpi-c { stroke: var(--coral); }
.cpi-ico { width: 22px; height: 22px; flex: none; }

/* ---------- Gabarit ---------- */

.cartepub__retour {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 8px 16px 0;
}
.cartepub__retour a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
/* Flèche de retour tracée par la feuille : le lien garde son texte seul (lecteur d'écran, tests). */
.cartepub__retour a::before {
  content: "";
  width: 10px;
  height: 10px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 4px;
}

.cartepub__main {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 16px 32px;
}

/* ---------- L'ardoise d'en-tête ---------- */

.cartepub__entete { margin: 0 0 18px; }
.cartepub__accroche {
  display: flex;
  justify-content: center;
  height: 28px;
  margin-bottom: -4px;
  position: relative;
  z-index: 1;
  color: var(--ink);
}
.cartepub__ficelle { width: 160px; height: 28px; }

.cartepub__ardoise {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  border: 7px solid var(--slate-frame);
  border-radius: 18px;
  /* Assez de marge pour que le surtitre ne touche jamais le cadre à la craie (inset 8 px), dès 320 px. */
  padding: 30px 26px 24px;
}
.cartepub__cadre {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  color: var(--cream);
  opacity: .28;
  pointer-events: none;
}
.cartepub__poussiere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--cream);
  opacity: .12;
  pointer-events: none;
}
.cartepub__ardoise-grille { position: relative; display: grid; gap: 12px; }
.cartepub__ardoise-texte { min-width: 0; }
.cartepub__sur {
  margin: 0 0 4px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate-sur);
  overflow-wrap: anywhere;
}
.cartepub__ardoise h1 { color: var(--cream); }
/* Logo du restaurant : médaillon crème posé sur l'ardoise, l'image contenue (jamais recadrée ni déformée). */
.cartepub__logo { margin: 0 0 12px; }
.cartepub__logo-img {
  display: block;
  width: 76px;
  height: 76px;
  padding: 6px;
  object-fit: contain;
  background: var(--cream);
  border: 3px solid var(--slate-frame);
  border-radius: 50%;
}
/* Sans scène (le choix par défaut), le logo prend la place du dessin : il grandit. */
.cartepub__ardoise-grille--seule .cartepub__logo-img { width: 104px; height: 104px; }
/* Phrase d'accueil : une ligne à la craie sous le nom. */
.cartepub__bienvenue {
  margin: 10px 0 0;
  color: var(--slate-sur);
  font-size: 1.125rem;
  font-weight: 700;
  font-style: italic;
  max-width: 40ch;
  overflow-wrap: anywhere;
}
.cartepub__ardoise .cartepub__presentation {
  margin: 12px 0 0;
  color: var(--sand);
  font-size: 1.0625rem;
  max-width: 42ch;
  overflow-wrap: anywhere;
}
.cartepub__coords { display: grid; gap: 6px; margin: 14px 0 0; }
.cartepub__adresse,
.cartepub__tel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--cream);
  overflow-wrap: anywhere;
}
.cartepub__coords .cpi-ico { color: var(--ochre); }
.cartepub__ardoise a { color: var(--cream); }
.cartepub__ardoise a:hover { text-decoration-color: var(--ochre); }
/* Cibles tactiles d'au moins 44 px de haut (téléphone, liens des coordonnées et du pied). */
.cartepub__tel a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; }
.cartepub__reseaux { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; }
.cartepub__reseaux a { display: inline-block; padding: 8px 0; }

.cartepub__scene {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
  max-height: 140px;
  margin: 0 auto;
  color: var(--cream);
}
.cartepub__scene--compacte { max-width: 150px; max-height: 110px; }
/* La devanture (boîte carrée) et la table dressée restent à taille humaine : le trait garde 2 à 3 px à l'écran. */
.cartepub__scene--devanture { max-width: 130px; max-height: 130px; }
.cartepub__scene--table { max-width: 200px; }
/* Aucune scène : le texte de l'ardoise prend toute la largeur. */
.cartepub__ardoise-grille--seule { grid-template-columns: minmax(0, 1fr); }

/* ---------- Photo de couverture (migration 26) ---------- */

/* En bandeau : la photo en haut, l'ardoise suspendue DEVANT elle (elle en recouvre le bas). */
.cartepub__couverture { overflow: hidden; border-radius: 18px; background: var(--sand-2); }
.cartepub__couverture-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cartepub__couverture--bandeau { height: 170px; border: 2px solid var(--ink); }
.cartepub__entete--bandeau .cartepub__suspendue { position: relative; margin: -72px 12px 0; }
/* À côté : sous l'ardoise sur téléphone, à sa droite sur grand écran, à la même hauteur qu'elle. */
.cartepub__couverture--cote { margin-top: 14px; aspect-ratio: 4 / 3; border: 2px solid var(--ink); }
.cartepub__rebord { display: none; width: min(320px, 90%); height: 24px; margin: 10px auto 0; color: var(--cream); opacity: .55; }
@media (min-width: 480px) {
  .cartepub__rebord { display: block; }
}

/* ---------- Réserver une table : un seul <aside>, un seul bouton ---------- */

/* Téléphone et tablette : barre fixée en bas de l'écran, toujours visible (encoche prise en compte). */
.cartepub__resa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--cream);
  border-top: 2px solid var(--ink);
}
.cartepub__resa-scene,
.cartepub__resa-titre,
.cartepub__resa-texte { display: none; }
.cartepub__resa-ligne { display: flex; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto; }
.cartepub__resa-table { width: 60px; height: 36px; flex: none; color: var(--ink); }
.cartepub__resa-action { flex: 1; min-width: 0; display: grid; gap: 4px; }
.cartepub__rassure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-size: .8125rem;
  color: var(--ink);
  overflow-wrap: anywhere;
  min-width: 0;
}
.cartepub__rassure .cpi-ico { width: 16px; height: 16px; }

/* Le SEUL élément terracotta de l'écran. Lien sur la carte, bouton d'envoi sur les pages de réservation : la même
   règle habille les deux. Texte BLANC dans tous les états (la règle des liens ne doit jamais l'assombrir). */
.cartepub .cartepub__bouton,
.cartepub .cartepub__bouton:link,
.cartepub .cartepub__bouton:visited,
.cartepub .cartepub__bouton:hover,
.cartepub .cartepub__bouton:active {
  color: var(--accent-ink);
  text-decoration: none;
}
.cartepub__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 10px 18px;
  border: 2px solid var(--accent-line);
  border-radius: 14px;
  background: var(--accent);
  font-family: var(--text);
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 var(--accent-shadow);
  /* Sur deux lignes (téléphone étroit), le texte reste centré et ses lignes équilibrées. */
  text-align: center;
  text-wrap: balance;
}
.cartepub__bouton:hover { background: var(--accent-hover); }
/* Ocre et corail : pas de teinte plus sombre dans la palette, le survol assombrit légèrement la même couleur. */
.cartepub--accent-ocre .cartepub__bouton:hover,
.cartepub--accent-corail .cartepub__bouton:hover { filter: brightness(.94); }
.cartepub__bouton:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.cartepub__bouton-picto { width: 24px; height: 24px; flex: none; color: var(--accent-ink); }
/* Aperçu du titulaire : le bouton d'envoi est désactivé, et se voit comme tel. */
.cartepub__bouton:disabled { cursor: not-allowed; opacity: .6; }
.cartepub__apercu {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1.5px dashed var(--ink);
  border-radius: 12px;
  background: var(--cream);
  font-weight: 700;
  font-size: .9375rem;
}
/* Variante sobre pour une action destructrice (annuler une demande) : le terracotta reste à la réservation. */
.cartepub .cartepub__bouton--sobre,
.cartepub .cartepub__bouton--sobre:hover,
.cartepub .cartepub__bouton--sobre:active {
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: none;
}
.cartepub .cartepub__bouton--sobre:hover { background: var(--sand); }

/* ---------- Sommaire en pastilles ---------- */

.cartepub__sommaire { margin: 0 0 16px; }
.cartepub__sommaire-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cartepub__sommaire-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 16px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  text-decoration: none;
  font-weight: 700;
}
.cartepub .cartepub__sommaire-lien { text-decoration: none; }
.cartepub__sommaire-lien:hover { background: var(--white); }

/* ---------- La carte : panneau crème ---------- */

.cartepub__carte {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 4px 18px 20px;
  scroll-margin-top: 16px;
}
.cartepub__colonnes { display: block; }
.cartepub__section { padding: 22px 0 10px; scroll-margin-top: 16px; }
.cartepub__section + .cartepub__section { border-top: 2px dashed var(--sand-2); }

/* En-tête de section : le titre seul, sobre, en Orbitron espacé (ni pictogramme ni vague, retours du 23/09/2026). */
.cartepub__section-tete { text-align: center; margin: 0 0 16px; break-inside: avoid; break-after: avoid; }
.cartepub__section h2 { margin: 0; font-size: 1.35rem; letter-spacing: .12em; hyphens: auto; overflow-wrap: anywhere; }

.cartepub__plats { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.cartepub__plat { display: grid; gap: 10px; break-inside: avoid; }
.cartepub__plat-texte { display: grid; gap: 4px; min-width: 0; }
.cartepub__plat-tete { display: flex; align-items: baseline; gap: 8px; }
.cartepub__plat-nom { color: var(--ink); min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
.cartepub__points {
  flex: 1;
  min-width: 14px;
  border-bottom: 2px dotted var(--ink-2);
  opacity: .45;
  transform: translateY(-5px);
}
.cartepub__prix {
  margin: 0;
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cartepub__plat-desc { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }

.cartepub__photo {
  display: block;
  width: 100%;
  /* height: auto : sans lui, l'attribut height="600" l'emporte sur aspect-ratio et la photo s'étire en hauteur. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 1.5px solid var(--sand-2);
  background: var(--sand);
}

.cartepub__regimes { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cartepub__pastille {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--sand);
  border: 1px solid var(--sand-2);
  font-size: .86rem;
  font-weight: 700;
}

/* Allergènes : pastilles rondes, puis la liste en casse normale (information réglementaire, lisible d'abord). */
.cartepub__allergenes {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.cartepub__pictos { display: inline-flex; flex-wrap: wrap; gap: 4px; color: var(--ink); }
.cartepub__picto {
  display: block;
  width: 26px;
  height: 26px;
  padding: 3px;
  border: 1.5px solid var(--sand-2);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
}

.cartepub__vide { padding: 20px 0 4px; color: var(--ink-2); text-align: center; }

/* ---------- Légende des allergènes ---------- */

.cartepub__legende { margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--ink); }
.cartepub__legende h2 { font-size: .9375rem; letter-spacing: .08em; line-height: 1.4; }
.cartepub__legende-liste {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 10px 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.cartepub__legende-item { display: flex; align-items: center; gap: 8px; }
.cartepub__legende-item .cartepub__picto { width: 30px; height: 30px; flex: none; }
.cartepub__legende-note { margin: 0; font-size: .875rem; color: var(--ink-2); max-width: 70ch; }

/* ---------- Infos pratiques ---------- */

.cartepub__infos { display: grid; gap: 12px; margin: 18px 0 0; }
.cartepub__info {
  background: var(--cream);
  border: 1.5px solid var(--sand-2);
  border-radius: 16px;
  padding: 16px 18px;
}
.cartepub__info-titre { display: flex; align-items: center; gap: 10px; font-size: 1rem; letter-spacing: .06em; }
/* « Nous trouver » et « Horaires » : le titre seul (plus d'ancre ni d'horloge), dans la couleur d'accent. En 19 px gras
   (grand texte au sens des WCAG) : le terracotta sur crème fait 4,3:1, au-dessus des 3:1 demandés. */
.cartepub__info-titre--accent { display: block; margin: 0 0 12px; font-size: 1.1875rem; color: var(--accent-text); }
.cartepub__rond {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--sand);
  color: var(--ink);
}
.cartepub__coord { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cartepub__coord li { display: flex; align-items: center; gap: 12px; overflow-wrap: anywhere; min-width: 0; }
.cartepub__coord a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; }

.cartepub__jours { margin: 0; display: grid; gap: 4px; }
/* Jour, points de conduite (pseudo-élément : le <dl> ne porte que des dt et des dd), horaire. */
.cartepub__jour { display: flex; align-items: baseline; gap: 8px; }
.cartepub__jour dt { font-weight: 700; flex: none; }
.cartepub__jour::after {
  content: "";
  order: 1;
  flex: 1;
  min-width: 12px;
  border-bottom: 2px dotted var(--sand-2);
  transform: translateY(-4px);
}
.cartepub__jour dd { order: 2; margin: 0; text-align: right; color: var(--ink-2); overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
.cartepub__jour dd.cartepub__ferme { color: var(--ink); font-style: italic; }

/* ---------- Pied ---------- */

.cartepub__pied {
  padding: 22px 16px;
  text-align: center;
  font-size: .9375rem;
}
.cartepub__pied p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 10px; }
.cartepub__mini-ardoise { width: 36px; height: 27px; color: var(--ink); }
.cartepub__pied a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; }
/* La barre fixe ne doit jamais cacher le pied : il garde sa hauteur en bas. */
.cartepub--carte .cartepub__pied { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }

/* ---------- Pages de réservation (lot C : src/views/carte-reservations.ts) ---------- */

.cartepub__presentation { color: var(--ink-2); max-width: 62ch; }
.cartepub--sous .cartepub__main > .cartepub__presentation { font-size: 1.0625rem; color: var(--ink); margin: 0 0 14px; }
.cartepub--sous .cartepub__main > p:not([class]) { max-width: 62ch; }
.cartepub--sous .cartepub__main { max-width: 860px; }
.cartepub--sous .cartepub__retour { max-width: 860px; }

.cartepub__etapes { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.cartepub__etape {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cream);
  border: 1.5px solid var(--sand-2);
  border-radius: 14px;
  padding: 10px 14px;
}
.cartepub__etape p { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.cartepub__etape strong { display: block; color: var(--ink); font-size: 1rem; }
.cartepub__etape-picto { width: 44px; height: 44px; flex: none; color: var(--ink); }

.cartepub__alerte {
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1.5px solid var(--sand-2);
  border-left: 5px solid var(--ochre);
  border-radius: 12px;
  background: var(--cream);
}
.cartepub__alerte p { margin: 0; font-weight: 700; }
/* Synthèse des erreurs : une entrée par champ fautif, chacune en lien vers le champ. */
.cartepub__alerte-liste { margin: 8px 0 0; padding-left: 20px; }
.cartepub__alerte-liste li { margin: 4px 0; }

.cartepub__form {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 20px 16px;
  margin: 0 0 18px;
  display: grid;
  gap: 18px;
}
.cartepub__obligatoire { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.cartepub__groupe {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
}
.cartepub__legende-champs {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  padding: 6px 0 0;
  font-family: var(--title);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cartepub__champ {
  margin: 0;
  display: grid;
  /* Colonne bornée (minmax(0, 1fr), jamais « auto ») : un champ natif (date, heure) a une largeur intrinsèque, que
     Safari sur iPhone ne sait pas comprimer ; dans une colonne « auto », elle poussait le champ hors de son cadre
     et sur son voisin (retours du 23/09/2026). */
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  grid-column: 1 / -1;
  min-width: 0;
  align-content: start;
}
/* Heure et nombre de couverts côte à côte ; la date (trois listes) garde toute la largeur. */
.cartepub__champ--duo { grid-column: span 1; }
/* Sur téléphone, « Nombre de couverts » passe sur deux lignes et « Heure » tient sur une : les deux libellés prennent
   la même hauteur et se posent en bas, pour que les deux cases restent alignées. */
@media (max-width: 767px) {
  .cartepub__champ--duo .cartepub__label { display: flex; align-items: flex-end; min-height: 2.6em; }
}
/* Sous 400 px, deux colonnes laissent moins de 160 px par champ : heure et couverts passent l'un sous l'autre. */
@media (max-width: 399px) {
  .cartepub__champ--duo { grid-column: 1 / -1; }
  .cartepub__champ--duo .cartepub__label { display: block; min-height: 0; }
}
.cartepub__label { font-weight: 700; line-height: 1.3; }
.cartepub__aide { font-size: .875rem; color: var(--ink-2); }
/* Le téléphone du restaurant (aide des couverts) ne se coupe jamais au milieu. */
.cartepub__aide a { white-space: nowrap; }
.cartepub__erreur { font-size: .9rem; color: var(--error); font-weight: 700; }
/* Enfants d'un groupe qui ne sont pas des champs (choix des montants, phrase d'aide, erreur du groupe) : toute la
   largeur de la grille. Sans cela ils prenaient UNE colonne (145 px sur téléphone) : montants un par ligne, « Autre
   montant » coupé, aide de « Pour qui ? » sur cinq lignes (audit visuel du 05/10/2026, I1). */
.cartepub__groupe > .cartepub__aide,
.cartepub__groupe > .cartepub__erreur,
.cartepub__groupe > .cadeau-montants__choix,
.cartepub__groupe > .avis-note__choix { grid-column: 1 / -1; }
/* Placement souhaité (migration 45) */
.cartepub__choix { margin: 0; padding: 0; border: 0; min-width: 0; grid-column: 1 / -1; display: grid; gap: 6px; }
.cartepub__choix-liste { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.cartepub__choix-item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.cartepub__choix-item input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }

.cartepub__saisie-bloc { position: relative; display: block; min-width: 0; max-width: 100%; }
.cartepub__saisie-ico {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-2);
  pointer-events: none;
}
.cartepub__saisie-bloc--texte .cartepub__saisie-ico { top: 15px; transform: none; }
.cartepub__saisie {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 12px 0 44px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  /* 16 px au moins : en dessous, Safari sur iPhone agrandit la page au toucher du champ. */
  font-size: 16px;
  line-height: 1.25;
}
textarea.cartepub__saisie { height: auto; min-height: 116px; padding-top: 12px; padding-bottom: 12px; line-height: 1.5; resize: vertical; }
/* Nombre : sans l'habillage natif (sur iPhone, une pastille grise centrée, plus large que sa colonne). */
.cartepub__saisie[type="number"] { -webkit-appearance: none; appearance: none; -moz-appearance: textfield; text-align: left; }
.cartepub__saisie-bloc--nu .cartepub__saisie { padding-left: 14px; }
/* Date (jour, mois, année) et heure : listes natives dans la langue de la page, et non plus les contrôles date et heure,
   qui suivaient celle du navigateur (relevé du 30/09/2026). La flèche native reste : elle dit « liste ». */
.cartepub__liste { padding: 0 6px 0 12px; cursor: pointer; }
fieldset.cartepub__date { padding: 0; border: 0; }
.cartepub__date > legend { padding: 0; margin: 0 0 6px; }
.cartepub__date-listes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.1fr); gap: 8px; max-width: 440px; }
.cartepub__saisie:focus-visible { border-color: var(--ink); }
.cartepub__champ--erreur .cartepub__saisie { border-color: var(--error); border-width: 2px; }

.cartepub__form .cartepub__action { margin: 0; }
.cartepub--sous .cartepub__action { margin: 0 0 14px; }
.cartepub__confidentialite { margin: 0 0 18px; font-size: .8125rem; line-height: 1.5; }

/* ---------- Page introuvable ---------- */

.cartepub--404 .cartepub__main { padding-top: 48px; max-width: 620px; }
.cartepub--404 h1 { font-size: 1.6rem; margin: 0 0 12px; }

/* ---------- Tablette et bureau ---------- */

@media (min-width: 768px) {
  .cartepub__main { padding: 20px 32px 48px; }
  .cartepub__retour { padding: 12px 32px 0; }
  .cartepub__ardoise { padding: 36px 40px 18px; }
  .cartepub__ardoise-grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 24px; }
  .cartepub__scene { max-width: 380px; max-height: none; }
  .cartepub__scene--compacte { max-width: 240px; }
  .cartepub__scene--devanture { max-width: 220px; }
  .cartepub__scene--table { max-width: 300px; }
  .cartepub__ardoise-grille--seule { grid-template-columns: minmax(0, 1fr); }
  .cartepub__logo-img { width: 96px; height: 96px; }
  .cartepub__ardoise-grille--seule .cartepub__logo-img { width: 136px; height: 136px; }

  .cartepub__couverture--bandeau { height: 260px; }
  .cartepub__entete--bandeau .cartepub__suspendue { margin: -110px 36px 0; }
  /* À côté : l'ardoise à gauche, la photo à droite, de la même hauteur. */
  .cartepub__entete--cote { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
  .cartepub__entete--cote .cartepub__suspendue { display: flex; flex-direction: column; min-width: 0; }
  .cartepub__entete--cote .cartepub__ardoise { flex: 1; }
  .cartepub__entete--cote .cartepub__ardoise-grille { grid-template-columns: minmax(0, 1fr); }
  .cartepub__entete--cote .cartepub__scene { max-width: 220px; margin: 0; }
  .cartepub__couverture--cote { margin-top: 24px; aspect-ratio: auto; min-height: 240px; }
  .cartepub__ficelle { width: 180px; }

  /* Sections en colonnes séparées par des pointillés sable, lues de haut en bas comme une ardoise. */
  .cartepub__carte { padding: 8px 28px 26px; }
  .cartepub__colonnes { columns: 2 240px; column-gap: 44px; column-rule: 2px dashed var(--sand-2); }
  .cartepub__section + .cartepub__section { border-top: 0; }
  /* Une section ne se coupe plus entre deux colonnes (contrôle visuel du 22/09/2026 : « Plats » coupée à 768 px,
     colonnes déséquilibrées à 1366 px) ; son titre reste avec ses plats. */
  .cartepub__section { padding: 22px 0 14px; break-inside: avoid; }

  .cartepub__infos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartepub__legende-liste { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

  .cartepub__etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cartepub__etape { flex-direction: column; align-items: flex-start; }
  .cartepub__form { padding: 28px 32px; }
  .cartepub__groupe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Votre venue : la date sur une ligne, l'heure et les couverts sur la suivante. */
  .cartepub__groupe--venue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartepub__form .cartepub__bouton { width: auto; min-width: 300px; }
  .cartepub--sous .cartepub__bouton { width: auto; }
}

/* Bureau : la carte à gauche, la réservation en carte collante à droite (toujours visible pendant la lecture). */
@media (min-width: 1024px) {
  .cartepub--carte .cartepub__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 28px;
    align-items: start;
  }
  .cartepub--carte .cartepub__main > * { grid-column: 1; }
  .cartepub--carte .cartepub__entete { grid-column: 1 / -1; }
  /* Avec un bandeau (démonstration, aperçu), une ligne de plus en tête : le bandeau prend toute la largeur et la
     réservation descend d'une ligne, pour rester à droite de la carte et non au-dessus de l'ardoise. */
  .cartepub--carte .cartepub__bandeaux { grid-column: 1 / -1; }
  .cartepub--carte .cartepub__main--bandeau .cartepub__resa { grid-row: 3 / span 4; }
  .cartepub--carte .cartepub__resa {
    grid-column: 2;
    grid-row: 2 / span 4;
    position: sticky;
    top: 24px;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    padding: 20px;
    border: 2px solid var(--ink);
    border-radius: 18px;
    text-align: center;
  }
  .cartepub__resa-scene { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 auto 10px; color: var(--ink); }
  .cartepub__resa-titre { display: block; font-size: 1.05rem; letter-spacing: .05em; margin: 0 0 6px; }
  .cartepub__resa-texte { display: block; font-size: .9375rem; color: var(--ink-2); margin: 0 0 14px; }
  .cartepub__resa-ligne { display: block; }
  .cartepub__resa-table { display: none; }
  .cartepub__resa-action { gap: 8px; }
  /* Sur deux lignes dans l'encart étroit, l'icône suit le texte centré au lieu de rester seule à gauche. */
  .cartepub__rassure { display: block; text-align: center; font-size: .875rem; }
  .cartepub__rassure .cpi-ico { display: inline-block; vertical-align: -3px; margin-right: 6px; }
  .cartepub--carte .cartepub__pied { padding-bottom: 22px; }
  .cartepub__colonnes { columns: 2 280px; column-gap: 44px; }
}

/* Téléphone ou tablette tenus en paysage, ou texte agrandi : la barre fixe mangerait l'écran (WCAG 1.4.4 et 1.4.10).
   Elle redevient un encart dans le flux, juste après l'en-tête. */
@media (max-width: 1023px) and (max-height: 520px) {
  .cartepub__resa {
    position: static;
    border: 2px solid var(--ink);
    border-radius: 18px;
    margin: 0 0 16px;
  }
  .cartepub--carte .cartepub__pied { padding-bottom: 22px; }
}
/* Écrans bas : la barre garde seulement le bouton, et la ligne qui nomme le site du restaurant où il mène. */
@media (max-width: 1023px) and (max-height: 700px) {
  .cartepub__rassure:not(.cartepub__rassure--site),
  .cartepub__resa-table { display: none; }
}
/* Téléphone très étroit (moins de 360 px) : sans la petite table, le bouton tient sur une ligne et la barre reste
   basse ; la réserve du pied suit sa hauteur réelle, pour que « Propulsé par ARDOIZA » ne passe jamais dessous. */
@media (max-width: 359px) {
  :root { --bar-h: 124px; }
  .cartepub__resa { padding-inline: 12px; }
  .cartepub__resa-table { display: none; }
  .cartepub__resa .cartepub__bouton { font-size: 1.0625rem; padding-inline: 12px; }
}
/* Titre des pages de réservation sur tablette : à 48 px, un mot comme « TRANSMISE » ne tient plus dans la colonne de
   l'ardoise et se couperait au milieu. */
@media (min-width: 768px) and (max-width: 1023px) {
  .cartepub--sous .cartepub__ardoise h1 { font-size: 2.25rem; }
}
/* Le focus clavier ne doit jamais finir sous la barre fixe (WCAG 2.4.11). */
@media (max-width: 1023px) {
  html.cartepub-html--carte { scroll-padding-bottom: calc(var(--bar-h) + 16px); }
}

/* ---------- Mouvement ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .cartepub__bouton,
  .cartepub__sommaire-lien { transition: background-color .15s ease; }
}

/* ---------- Impression : une carte papier propre ---------- */

@media print {
  body.cartepub { background: var(--white); }
  .cartepub__skip,
  .cartepub__retour,
  .cartepub__resa,
  .cartepub__sommaire,
  .cartepub__accroche,
  .cartepub__cadre,
  .cartepub__poussiere,
  .cartepub__scene,
  .cartepub__couverture,
  .cartepub__apercu,
  .cartepub__rebord,
  .cartepub__action,
  .cartepub__etapes,
  .cartepub__form,
  .cartepub__photo,
  .cartepub__mini-ardoise { display: none !important; }
  .cartepub__main { display: block !important; max-width: none; padding: 0; }
  .cartepub__ardoise { background: var(--white); color: var(--ink); border: 2px solid var(--ink); padding: 14px; }
  .cartepub__ardoise h1,
  .cartepub__ardoise .cartepub__presentation,
  .cartepub__adresse,
  .cartepub__tel,
  .cartepub__ardoise a { color: var(--ink); }
  .cartepub__sur { color: var(--ink-2); }
  .cartepub__ardoise-grille { display: block; }
  .cartepub__carte,
  .cartepub__info { border-color: var(--ink); background: var(--white); }
  .cartepub__section,
  .cartepub__plat,
  .cartepub__info { break-inside: avoid; }
  .cartepub__pied,
  .cartepub--carte .cartepub__pied { padding: 12px 0 0; }
}

/* ---------- Accueil du domaine des cartes (GET /c/, racine de carte.ardoiza.fr) ---------- */

.cartepub--accueil .cartepub__main { max-width: 980px; }
/* Titre sur deux lignes (« LES CARTES DES » puis « RESTAURANTS », séparées par un <br>) : Orbitron en capitales est
   large, et chaque ligne mesure environ 11,5 fois la taille du texte. Sur téléphone, la taille suit la largeur utile de
   l'ardoise (écran moins marges et bordures) ; sur tablette et bureau, elle tient dans la colonne de texte. Pas
   d'équilibrage automatique ici : il isolait « DES » sur sa ligne. */
.cartepub--accueil .cartepub__ardoise h1 { font-size: clamp(1.25rem, calc((100vw - 92px) / 11.8), 2rem); text-wrap: wrap; }
@media (min-width: 768px) {
  .cartepub--accueil .cartepub__ardoise h1 { font-size: 1.8rem; }
}
@media (min-width: 1024px) {
  .cartepub--accueil .cartepub__ardoise h1 { font-size: 2.2rem; }
}
.cartepub__accueil { display: grid; gap: 14px; }
.cartepub__accueil-bloc { display: flex; flex-direction: column; }
.cartepub__accueil-bloc h2 { margin: 0 0 12px; }
.cartepub__accueil-bloc p { color: var(--ink); max-width: 62ch; }
.cartepub__adresse-type {
  font-weight: 700;
  white-space: nowrap;
  padding: 1px 4px;
  margin-right: -2px;
  border-radius: 6px;
  background: var(--sand);
  /* Coupée sur deux lignes (moins de 360 px), chaque morceau garde son fond et son arrondi. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.cartepub__accueil-lien { margin: 8px 0 0; }
.cartepub__accueil-lien a { display: inline-block; padding: 10px 0; }
.cartepub__accueil-action { display: grid; gap: 12px; margin-top: auto; }
.cartepub__accueil-table { width: 110px; height: auto; max-height: 64px; margin: 4px auto 0; color: var(--ink); }
@media (max-width: 359px) {
  .cartepub__adresse-type { white-space: normal; overflow-wrap: anywhere; }
}
@media (min-width: 768px) {
  .cartepub__accueil { grid-template-columns: 1fr 1fr; gap: 18px; }
  .cartepub__accueil-bloc { padding: 22px 24px; }
}
@media print {
  .cartepub__accueil-table,
  .cartepub__accueil-action { display: none !important; }
}

/* ---------- Langue de la page (lot anglais) : sélecteur FR / EN discret, à la craie sur l'ardoise ----------
   Deux liens courts en haut à droite de l'ardoise, dans le flux (jamais par-dessus le nom du restaurant). La langue
   courante est soulignée d'un trait ocre, l'autre reste lisible (crème sur encre, contraste largement suffisant).
   Cibles de 32 px au moins (WCAG 2.5.8). Dans le pied de la 404 et de la 429, les mêmes liens à l'encre. */
.cartepub__langues {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin: -16px -12px 6px 0;
}
.cartepub__langue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-decoration: none;
}
.cartepub__ardoise .cartepub__langue { color: var(--sand); }
.cartepub__ardoise .cartepub__langue:hover { color: var(--cream); text-decoration: underline; text-decoration-color: var(--ochre); }
.cartepub__langue.is-current { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--slate-sur); }
.cartepub__ardoise .cartepub__langue.is-current { color: var(--cream); }
.cartepub__langue:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.cartepub__pied .cartepub__langues { justify-content: center; margin: 4px 0 0; }
.cartepub__pied .cartepub__langue { color: var(--ink); min-height: 44px; }
.cartepub__pied .cartepub__langue:focus-visible { outline-color: var(--ink); }
@media (min-width: 768px) {
  .cartepub__langues { margin: -22px -26px 4px 0; }
}
/* Texte légal traduit : la mention de la version française de référence, en tête de la section. */
.cartepub__traduction { font-style: italic; color: var(--ink-2); }
/* Sur l'ardoise (fond encre), la mention « Traduction automatique » passe à la craie crème : contraste de 14 pour 1
   environ, au lieu d'une encre claire illisible sur l'encre (plan de nettoyage du 24/09, V6). */
.cartepub__ardoise .cartepub__traduction { color: var(--cream); }
@media print {
  .cartepub__langues { display: none !important; }
}

/* Widget anti-robot Cloudflare Turnstile (src/turnstile.ts), formulaire de réservation : place réservée. */
.turnstile-bloc { margin: 16px 0; min-height: 65px; }