/* =====================================================================
   TOTO BWA : la carte (page ouverte par le QR code, pensée téléphone)
   Fond sombre pour la lecture dans le bar, fiches aux couleurs des
   panneaux des tireuses, softs sur le tableau vert, comme au comptoir.
   ===================================================================== */

.page-carte { background: var(--encre); color: var(--blanc); }

/* ---------- en-tête ---------- */
.carte-tete {
  border-bottom: 6px solid var(--turquoise);
  box-shadow: 0 3px 0 var(--encre);
  color: var(--encre);
}
.carte-tete__in {
  width: min(100% - 2 * var(--gouttiere), 1100px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 0 16px;
}
.carte-tete__logo img { width: clamp(62px, 14vw, 88px); }
.carte-tete__titre .titre-panneau { font-size: clamp(2.6rem, 2rem + 3vw, 4rem); }
.carte-tete__titre .creole { font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); margin-top: 2px; }
.carte-tete .statut { margin: 0; align-self: start; }
@media (max-width: 560px) {
  .carte-tete__in { grid-template-columns: auto 1fr; }
  .carte-tete .statut { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- onglets collants ---------- */
.onglets {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--encre);
  border-bottom: 2px solid rgba(255, 250, 243, .14);
}
.onglets__in {
  width: min(100% - 2 * var(--gouttiere), 1100px);
  margin-inline: auto;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px 0;
}
.onglets__in::-webkit-scrollbar { display: none; }
.onglets a {
  flex: none;
  padding: 8px 14px 9px;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--blanc);
  text-decoration: none;
  border: 2px solid rgba(255, 250, 243, .25);
  border-radius: 999px;
}
.onglets a[aria-current="true"] {
  color: var(--encre);
  background: var(--jaune);
  border-color: var(--jaune);
}

/* ---------- corps ---------- */
.carte-corps {
  width: min(100% - 2 * var(--gouttiere), 1100px);
  margin-inline: auto;
  padding-bottom: 40px;
}
.rubrique { padding-top: 34px; scroll-margin-top: 70px; }
.rubrique__tete h2,
.tableau-softs h2 {
  font-weight: 700;
  font-size: clamp(2rem, 1.6rem + 2vw, 2.8rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--jaune);
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, -4px 5px 0 var(--plum);
}
.rubrique__note { margin: 10px 0 0; color: rgba(255, 250, 243, .82); max-width: 60ch; }

/* mode d'emploi replié */
.mode-mini {
  margin-top: 18px;
  color: var(--encre);
  background: var(--turquoise);
  border: 3px solid #000;
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--lambris);
}
.mode-mini summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  font-weight: 600;
  font-size: 1.08rem;
  cursor: pointer;
  list-style: none;
}
.mode-mini summary::-webkit-details-marker { display: none; }
.mode-mini summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.6rem;
  line-height: 1;
}
.mode-mini[open] summary::after { content: "–"; }
.mode-mini summary svg { width: 26px; height: 26px; flex: none; }
.mode-mini ol {
  margin: 0;
  padding: 0 16px 16px 44px;
  display: grid;
  gap: 8px;
}
.mode-mini li { padding-left: 4px; }
.mode-mini li::marker { font-weight: 700; }
.mode-mini b { display: block; font-weight: 600; line-height: 1.2; }
.mode-mini span { font-family: var(--f-main); font-size: 1.15rem; line-height: 1.2; }

/* envies */
.envies { margin-top: 24px; }
.envies__titre { margin: 0 0 10px; font-family: var(--f-main); font-size: 1.45rem; line-height: 1.1; }
.envies__puces { display: flex; flex-wrap: wrap; gap: 8px; }
.envies__puces button {
  min-height: 42px;
  padding: 6px 15px 7px;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--blanc);
  background: transparent;
  border: 2px solid rgba(255, 250, 243, .4);
  border-radius: 999px;
  cursor: pointer;
}
.envies__puces button[aria-pressed="true"] {
  color: var(--encre);
  background: var(--jaune);
  border-color: var(--jaune);
  box-shadow: 3px 3px 0 var(--lambris);
}
.envies__resultat { min-height: 1.4em; margin: 10px 0 0; font-size: .98rem; color: rgba(255, 250, 243, .75); }

/* fiches bières : les panneaux du mur */
.bieres {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.bieres__attente { font-family: var(--f-main); font-size: 1.3rem; }
.fiche {
  --c: #1e4fd8;
  --t: var(--jaune);
  --st: #8fe3f7;
  --contour: #000;
  position: relative;
  padding: 16px 16px 14px;
  color: var(--t);
  background-color: var(--c);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 4px);
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 5px 5px 0 rgba(211, 91, 198, .9);
  transition: opacity .25s, filter .25s, transform .25s;
}
.fiche.est-hors { opacity: .25; filter: saturate(.3); transform: scale(.98); }
.fiche__haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fiche__nom {
  font-weight: 700;
  font-size: 2.05rem;
  line-height: .95;
  text-transform: uppercase;
  text-shadow: -2px -2px 0 var(--contour), 2px -2px 0 var(--contour), -2px 2px 0 var(--contour), 2px 2px 0 var(--contour), -2px 4px 0 var(--contour);
}
.fiche__marque { display: block; font-family: var(--f-main); font-size: 1.15rem; line-height: 1; margin-bottom: 4px; color: #23365f; }
.fiche__style {
  margin: 7px 0 0;
  font-weight: 500;
  font-size: .98rem;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--st);
  text-shadow: 0 1.5px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
}
.fiche__degre {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 0;
  padding: 5px 9px 6px;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  color: #000;
  background: var(--t);
  border: 2px solid #000;
  border-radius: 8px;
}
.fiche__degre .drapeau { font-size: 14px; }
.fiche__profil {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.fiche__profil dt {
  font-weight: 600;
  font-size: .82rem;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 5px;
  text-shadow: 0 1.5px 0 var(--contour), 1px 0 0 var(--contour), -1px 0 0 var(--contour), 0 -1px 0 var(--contour);
}
.fiche__profil dd { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; height: 11px; }
.fiche__profil dd span { border: 1.5px solid rgba(255, 255, 255, .92); border-radius: 2px; }
.fiche__profil dd span.on { background: var(--cyan) repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 1px, transparent 1px 3px); }
.fiche__notes { margin: 12px 0 0; font-weight: 500; font-size: 1.04rem; line-height: 1.25; text-shadow: 0 1.5px 0 var(--contour), 1px 0 0 var(--contour), -1px 0 0 var(--contour), 0 -1px 0 var(--contour); }
.fiche__sans {
  display: inline-block;
  margin: 14px 0 0;
  padding: 4px 10px 5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--c);
  background: var(--t);
  border-radius: 6px;
}
.fiche--claire { --st: #1f56c5; --contour: transparent; }
.fiche--claire .fiche__nom { text-shadow: 1px 2px 0 rgba(0, 0, 0, .25); }
.fiche--claire .fiche__style { text-shadow: none; }
.fiche--claire .fiche__profil dt { color: #135a2b; text-shadow: none; }
.fiche--claire .fiche__notes { color: #135a2b; text-shadow: none; }
.fiche--claire .fiche__profil dd span { border-color: #1e7f3f; }
.fiche--claire .fiche__degre { color: var(--c); background: #1e7f3f; color: #fff; }

.eau-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  padding: 12px 16px;
  font-weight: 500;
  font-size: 1.1rem;
  background: #1d57c9;
  border: 3px solid #000;
  border-radius: 12px;
}
.eau-ligne svg { width: 24px; height: 24px; color: #9fd8ff; flex: none; }

/* ---------- softs : le tableau vert du comptoir ---------- */
.tableau-softs {
  position: relative;
  padding: 18px 18px 20px;
  background: #1f6b38;
  border: 3px solid #000;
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--lambris), inset 0 0 0 6px rgba(255, 255, 255, .08);
}
.tableau-softs__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tableau-softs h2 { color: #ff6a3d; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; }
.tableau-softs__tete img { width: 64px; }
.tableau-softs ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px 34px;
}
.tableau-softs li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--jaune);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.tableau-softs li .vol { font-weight: 400; text-transform: none; color: var(--blanc); white-space: nowrap; }
.tableau-softs li .points { flex: 1; border-bottom: 2px dotted rgba(255, 250, 243, .45); transform: translateY(-4px); min-width: 16px; }
.tableau-softs li .prix { white-space: nowrap; color: var(--blanc); }

/* ---------- à grignoter ---------- */
.grignote {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.grignote li {
  position: relative;
  padding: 18px 18px 16px;
  color: var(--jaune);
  background: #1f6b38;
  border: 3px solid #000;
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--lambris);
}
.grignote h3 {
  max-width: calc(100% - 80px);
  font-weight: 700;
  font-size: 2rem;
  line-height: .95;
  text-transform: uppercase;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, -3px 4px 0 #000;
}
.grignote .detail { max-width: calc(100% - 80px); margin: 8px 0 0; font-family: var(--f-main); font-size: 1.3rem; line-height: 1.15; color: var(--blanc); }
.grignote .choix { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.grignote .choix span {
  padding: 3px 10px 4px;
  font-weight: 600;
  font-size: .98rem;
  text-transform: uppercase;
  color: #000;
  background: var(--jaune);
  border-radius: 6px;
}
.grignote .mention { margin: 12px 0 0; font-size: .9rem; line-height: 1.3; color: rgba(255, 250, 243, .9); }
.grignote .prix {
  position: absolute;
  top: 14px; right: 14px;
  display: grid;
  place-items: center;
  width: 66px; height: 66px;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--encre);
  background: #bfe8ff;
  border: 3px solid #000;
  border-radius: 50%;
  transform: rotate(-8deg);
}

/* ---------- infos pratiques ---------- */
.pratique {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.pratique__bloc {
  padding: 16px 18px;
  background: rgba(255, 250, 243, .06);
  border: 2px solid rgba(255, 250, 243, .2);
  border-radius: 12px;
}
.pratique__bloc h3 { font-weight: 600; font-size: 1.25rem; color: var(--jaune); margin-bottom: 8px; }
.pratique__bloc p { margin: 8px 0 0; }
.pratique__bloc a { color: var(--blanc); font-weight: 500; }
.jours-carte { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.jours-carte li.aujourdhui { color: var(--jaune); font-weight: 600; }
.jours-carte li.aujourdhui::after { content: "  (aujourd'hui)"; font-family: var(--f-main); font-weight: 400; }
.jours-carte li.ferme { opacity: .65; }
.pratique__actions { display: grid; gap: 12px; align-content: start; }
.pratique__actions .btn { width: 100%; }

/* ---------- pied ---------- */
.carte-pied {
  margin-top: 30px;
  padding: 24px var(--gouttiere) 30px;
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
  border-top: 2px dashed rgba(255, 250, 243, .18);
}
.carte-pied__liens { margin: 0; }
.carte-pied__liens a { color: rgba(255, 250, 243, .8); }