/* ============================================================
   CARTE DES BARS — /carte
   Lot 11 · 02/09/2026
   ------------------------------------------------------------
   ⚠️ CE FICHIER NE TOUCHE PAS À LA CHARTE DU SITE. Les couleurs
      de `theme-h610.css` sont figées par sites_publics.md §11.2,
      et rien ici ne les redéfinit : les jetons Montvilla vivent
      sur `.carte` et nulle part ailleurs. Une page sans carte
      est exactement ce qu'elle était avant ce fichier.

   POURQUOI DES COULEURS À PART. Montvilla a sa propre identité
   — vert profond, crème, jaune — et la carte est le seul endroit
   du site où le bar parle en son nom. Les valeurs sont relevées
   sur son logo.

   LES POLICES SONT CELLES DU SITE, déjà hébergées ici. Bagel Fat
   One pour le nom du bar : c'est la plus proche du lettrage
   rond et plein du logo. Aucune police n'est chargée en plus —
   la CSP interdit les fontes externes, et une carte lue sur un
   téléphone au milieu d'une halle pleine n'a pas de temps à
   perdre.
   ============================================================ */

.carte {
  /* Le vert du logo, et ce qui l'accompagne. */
  --ct-fond:    #1E3324;
  --ct-fond-2:  #26402D;
  --ct-filet:   #375540;
  --ct-texte:   #DCD3C5;
  --ct-second:  #97A895;   /* un gris tiré vers le vert, pas un gris neutre */
  --ct-accent:  #EFC91F;
  --ct-vif:     #F0EBE1;

  background: var(--ct-fond);
  color: var(--ct-texte);
  max-width: 860px;
  margin: 0 auto;
  padding-bottom: 8px;
}

/* La page n'a plus ni en-tête ni pied : le fond du site apparaîtrait
   autour de la carte, en crème, sur toute la hauteur. On le peint dans le
   vert de la carte pour que l'ensemble se lise comme une seule surface.
   `.carte` garde sa largeur maximale : une ligne de prix qui court sur
   1400 px ne se lit plus. */
body.page-carte { background: #16241A; }
.carte { min-height: 100vh; }

/* Au comptoir, la carte prend toute la largeur de la tablette : l'écran
   ne montre qu'elle, il n'y a personne à qui réserver de la marge. */
body.mode-comptoir .carte { max-width: none; }

/* ---- L'en-tête du bar ---- */
.carte-tete {
  background: #16241A;
  padding: 30px 20px 20px;
  text-align: center;
}
.carte-sur {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ct-second);
  margin: 0;
}
.carte-nom {
  font-family: var(--f-sticker);
  font-size: clamp(34px, 9vw, 60px);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ct-vif);
  margin: 6px 0 0;
}
.carte-trait {
  display: block;
  width: min(300px, 70%);
  height: 6px;
  margin: 12px auto 0;
  border-radius: 3px;
  background: var(--ct-accent);
}

/* ---- La barre des familles ----
   Collante : elle reste sous la main pendant qu'on parcourt une famille,
   et c'est elle qui permet de passer des vins aux spiritueux sans repasser
   par l'accueil. */
.carte-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  background: var(--ct-fond);
  border-bottom: 1px solid var(--ct-filet);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carte-nav::-webkit-scrollbar { display: none; }

.carte-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  /* 44 px : la cible tactile minimale d'Apple. On la tient, doigts gras
     compris. */
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ct-second);
  text-decoration: none;
}
.carte-nav a:hover { color: var(--ct-vif); }
.carte-nav a[aria-current] {
  background: var(--ct-accent);
  border-color: var(--ct-accent);
  color: #16241A;
  font-weight: 700;
}
.carte-retour {
  font-size: 20px;
  padding: 8px 14px !important;
  color: var(--ct-accent) !important;
  border-color: var(--ct-filet) !important;
}

/* ---- L'écran d'accueil : six tuiles ---- */
.carte-tuiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 16px 14px;
}
@media (min-width: 760px) {
  .carte-tuiles { grid-template-columns: repeat(3, 1fr); }
}

.carte-tuile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 15px 14px;
  background: var(--ct-fond-2);
  border: 1px solid var(--ct-filet);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}
.carte-tuile:hover, .carte-tuile:focus-visible {
  border-color: var(--ct-accent);
  background: var(--ct-fond);
}
.tuile-nom {
  font-family: var(--f-affiche);
  font-size: 22px;
  line-height: 1.05;
  color: var(--ct-vif);
}
.tuile-detail {
  flex: 1;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ct-second);
}
.tuile-nb {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ct-accent);
}

/* ---- Le corps ---- */
.carte-corps  { padding: 0 20px 8px; }
.carte-famille { padding-top: 26px; }
.carte-famille-nom {
  font-family: var(--f-affiche);
  font-size: 26px;
  line-height: 1.1;
  color: var(--ct-vif);
  margin: 0;
  text-wrap: balance;
}
.carte-famille-nb {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ct-second);
  margin: 4px 0 0;
}

.carte-rubrique { margin-top: 24px; }
.carte-rubrique-nom {
  font-family: var(--f-etiq);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ct-accent);
  margin: 0 0 6px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--ct-accent);
}

/* ---- Les lignes ----
   Une grille : le libellé prend la place qui reste, les prix tiennent
   des colonnes de largeur égale. C'est ce qui aligne « Demi · Pinte ·
   Pichet » sous leur en-tête, et « 4 € » sous « 12,50 € ». */
.carte-ligne {
  display: grid;
  grid-template-columns: 1fr repeat(var(--np, 1), minmax(66px, max-content));
  gap: 4px 14px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--ct-filet);
}
.carte-ligne:last-child { border-bottom: 0; }

.carte-ligne--tete { padding: 6px 0 4px; }
.carte-ligne--tete .carte-prix {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ct-second);
}

.carte-article    { font-size: 16px; font-weight: 500; line-height: 1.3; }
.carte-contenance { font-size: 13px; color: var(--ct-second); margin-left: 6px; white-space: nowrap; }
.carte-description,
.carte-mention {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ct-second);
  margin-top: 2px;
  max-width: 40em;
}
.carte-description { font-style: italic; }

.carte-prix {
  text-align: right;
  font-size: 16px;
  font-weight: 700;
  color: var(--ct-accent);
  white-space: nowrap;
  /* Les chiffres à chasse fixe : sans eux, « 11 » est plus étroit que
     « 44 » et la colonne des prix ondule. */
  font-variant-numeric: tabular-nums;
}

/* ---- Le pied de carte ---- */
.carte-pied {
  padding: 24px 20px 28px;
  border-top: 1px solid var(--ct-filet);
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ct-second);
}
.carte-pied p { margin: 0; }

/* ============================================================
   AVEC JAVASCRIPT : la carte se replie
   ------------------------------------------------------------
   Sans JavaScript, tout ce qui précède s'affiche d'un bloc : le
   sommaire, puis les six familles à la suite. C'est une carte
   complète et lisible. Le repli ci-dessous n'existe que si le
   script s'est exécuté — d'où la classe posée par lui, et non
   ici.
   ============================================================ */
.js-carte .carte-nav[hidden],
.js-carte .carte-tuiles[hidden],
.js-carte .carte-famille[hidden],
.js-carte .carte-retour[hidden] { display: none; }

/* Sans JavaScript la barre des familles n'a pas de raison d'être
   collante : elle ne sert qu'à sauter d'une ancre à l'autre. */
html:not(.js-carte) .carte-nav { position: static; }

/* Le mode comptoir n'a ni en-tête, ni menu, ni pied de site — et aucun des
   trois n'est ENVOYÉ : voir `entete(['nu' => true])` et `pied_nu()` dans
   _inc/layout.php. Il n'y a donc rien à masquer ici, et c'est le but : une
   feuille de style qui n'arrive pas ne peut pas faire réapparaître le menu
   du site sur la tablette du bar. */

/* Une tablette posée sur un bar se fait tirer vers le bas par erreur
   vingt fois par service. Sans ça, chaque geste recharge la page. */
body.mode-comptoir { overscroll-behavior-y: none; }

@media (prefers-reduced-motion: reduce) {
  .carte * { transition: none !important; }
}


/* ============================================================
   LES ANNONCES — le ruban et la bande, entre le nom du bar et
   les familles.
   ------------------------------------------------------------
   Le fond noir de `.now-block` et le ruban viennent de
   shell.css : ce sont ceux de l'accueil, repris tels quels.
   Ce qui suit ne fait que les adapter à une page sans bouton.
   ============================================================ */

/* Le sport se distingue par la couleur de son étiquette, pas par son
   fond : deux fonds différents feraient deux bandes qui se disputent
   l'œil. Le menthe et le jaune sont ceux que la charte emploie déjà. */
.carte .est-sport .now-label { color: var(--c-mint); }

/* ---- Version client : deux colonnes ---- */
.carte-duo { padding: 26px 24px; }
.duo-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
/* Une seule annonce disponible — pas de match dans les quinze jours, ce
   qui arrivera souvent — elle prend toute la largeur. Une demi-bande
   vide se remarque plus qu'elle ne manque. */
.carte-duo.est-seule .duo-inner { grid-template-columns: 1fr; text-align: center; }
.carte-duo.est-seule .duo-inner > * { justify-self: center; }

.duo-sep { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 26px; }
.duo-col .now-title { font-size: clamp(19px, 2.2vw, 25px); margin-top: 8px; }

@media (max-width: 860px) {
  .duo-inner { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .duo-inner > * { justify-self: center; }
  .duo-sep {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding-left: 0;
    padding-top: 20px;
  }
}

/* ---- Version comptoir : une bande qui tourne ----
   ⚠️ LES CINQ VUES OCCUPENT LA MÊME CASE DE GRILLE. C'est ce qui donne à
      la bande la hauteur de la plus haute, et l'empêche de sauter en
      changeant d'annonce. Un empilement en `position:absolute` aurait
      calé la hauteur sur la première vue seulement — et un titre de match
      sur deux lignes serait passé par-dessus les points. */
.carte-tourne { padding: 24px 24px 18px; text-align: center; }
.tourne-scene { display: grid; max-width: 900px; margin: 0 auto; }
.tourne-vue {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .6s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.tourne-vue.est-actif { opacity: 1; }
.carte-tourne .now-title { font-size: clamp(20px, 2.4vw, 28px); }

/* Les points disent qu'il y a d'autres annonces. Ils ne sont pas
   cliquables : rien ne l'est sur cette page. */
.tourne-points { display: flex; gap: 7px; justify-content: center; margin-top: 16px; }
.tourne-point {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  transition: background .3s;
}
.tourne-point.est-actif { background: var(--c-yellow); }

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