/* =========================================================================
   booking4show.ch — base.css
   Feuille de style SYSTEME, commune à tous les clients.
   Emplacement réel : base2/css/base.css

   Cette feuille gère la STRUCTURE (layout, composants, comportement
   responsive, mode sombre). Elle ne contient AUCUNE couleur ni police en
   dur : tout passe par les variables CSS définies dans la feuille du
   client (clients_b4s_custom/[path]/style.css). Voir le README pour la
   liste complète des variables et un guide d'installation pour un
   nouveau client.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Reset minimal + fondations
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button {
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none; /* évite que Safari mobile impose son propre fond de bouton */
  border: none;
  background: none;
  color: inherit;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  color: var(--c-ink);
}

.b4s-eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* Respecte les préférences de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Focus clavier toujours visible (accessibilité) */
:focus-visible {
  outline: 2px solid var(--c-dominant);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   1. Layout général de page (header / body / footer)
   ------------------------------------------------------------------------- */
.b4s-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.b4s-main {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  min-width: 0; /* sans ça, un enfant non réductible (ex. le plan de salle non redimensionné) peut forcer cette boîte à s'élargir au-delà de l'écran — piège classique des conteneurs flex/grid */
}

/* -------------------------------------------------------------------------
   2. Header — logo + navigation + ligne d'accent "rideau"
   ------------------------------------------------------------------------- */
.b4s-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-surface); /* suit le thème de la page, contrairement aux tuiles de contenu */
  border-bottom: 3px solid var(--c-dominant); /* la "ligne de rideau" */
}

.b4s-header-row {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
}

.b4s-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.b4s-logo img, .b4s-logo svg { height: 38px; width: auto; max-width: 160px; object-fit: contain; }

/* Desktop : le logo peut respirer davantage (signalé trop petit) */
@media (min-width: 881px) {
  .b4s-logo img, .b4s-logo svg { height: 60px; max-width: 260px; }
}

/* Navigation desktop : onglets horizontaux simples */
.b4s-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.b4s-nav a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid transparent; /* réserve l'espace, évite un saut de taille sur l'état actif */
  font-size: .92rem;
  font-weight: 500;
  color: var(--c-ink-soft);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.b4s-nav a:hover { background: var(--c-bg); color: var(--c-ink); }
/* Contour plutôt que fond plein : on garde le fond plein vert exclusivement
   pour les vrais boutons d'action (ex. "Réserver"), afin qu'un remplissage
   identique ne crée pas d'ambiguïté entre "tu es ici" et "clique ici". */
.b4s-nav a.is-active {
  background: transparent;
  color: var(--c-dominant);
  border-color: var(--c-dominant);
  font-weight: 700;
}
.b4s-nav a i { font-size: .85em; opacity: .85; }

/* Actions à droite : thème + compte */
.b4s-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.b4s-icon-btn {
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-ink);
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: border-color .15s ease, transform .15s ease;
}
.b4s-icon-btn:hover { border-color: var(--c-dominant); transform: translateY(-1px); }

/* Pastille "où on est" — visible même sans ouvrir le menu burger.
   Même langage visuel que l'onglet actif en desktop (contour + texte
   couleur dominante), pour un comportement cohérent entre les deux. */
.b4s-location-chip {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--c-dominant);
  font-size: .85rem;
  font-weight: 700;
  color: var(--c-dominant);
  text-decoration: none;
  cursor: pointer;
}

/* Bouton burger (mobile) */
.b4s-burger {
  display: none;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-ink); /* sans ça, l'icône restait noire en mode sombre */
  width: 38px; height: 38px;
  border-radius: 10px;
  align-items: center; justify-content: center;
  font-size: 1.1rem;
}

/* Panneau de navigation mobile (slide-down) */
.b4s-mobile-panel {
  display: none;
  flex-direction: column;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding: 8px 16px 16px;
}
.b4s-mobile-panel .b4s-mobile-here {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink-soft);
  padding: 10px 4px 4px;
}
.b4s-mobile-panel a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 8px;
  border-radius: 10px;
  font-weight: 500;
  border-bottom: 1px solid var(--c-border);
  border-left: 3px solid transparent;
}
.b4s-mobile-panel a:last-child { border-bottom: none; }
.b4s-mobile-panel a.is-active { color: var(--c-dominant); font-weight: 700; border-left-color: var(--c-dominant); }
.b4s-page[data-nav-open="true"] .b4s-mobile-panel { display: flex; }

/* -------------------------------------------------------------------------
   3. Responsive : bascule desktop -> mobile pour le header
   ------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .b4s-nav { display: none; }
  .b4s-burger { display: flex; }
  .b4s-location-chip { display: flex; }
}

/* -------------------------------------------------------------------------
   4. Zone "spectacle" : affiche + infos (colonne gauche page 1)
   ------------------------------------------------------------------------- */
.b4s-show-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
}

.b4s-poster-card {
  background: var(--c-bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px;
  position: sticky;
  top: 96px;
}
.b4s-poster-card h1, .b4s-poster-card h2, .b4s-poster-card h3 { color: var(--c-ink-card); }

/* Texte d'intro (top_affiche) -- existe en double dans le HTML (une copie
   au-dessus de l'affiche pour le desktop, une copie à côté de l'affiche
   pour le mobile) ; une seule des deux copies est visible à la fois,
   selon la largeur d'écran. Idem pour down_affiche (copie "desktop" en
   paragraphe simple toujours visible / copie "mobile" repliée derrière
   un "..."). Règles regroupées ici, dans l'ordre, pour éviter toute
   ambiguïté de cascade. */
.b4s-poster-top         { display: block !important; font-size: .85rem; color: var(--c-ink-card-soft); margin: 0 0 12px; line-height: 1.5; }
.b4s-poster-top-mobile  { display: none  !important; }
.b4s-down-affiche       { display: block !important; }
.b4s-poster-more        { display: none  !important; }

@media (max-width: 880px) {
  .b4s-poster-top        { display: none  !important; }
  .b4s-poster-top-mobile { display: block !important; }
  .b4s-down-affiche      { display: none  !important; }
  .b4s-poster-more       { display: block !important; }
}

/* Encoche "billet" en haut à droite de l'affiche — signature visuelle */
.b4s-poster-frame {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
  clip-path: polygon(
    0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%
  );
}
.b4s-poster-frame img, .b4s-poster-frame svg { width: 100%; height: auto; display: block; }

.b4s-show-meta { font-size: .9rem; color: var(--c-ink-card-soft); }
.b4s-show-meta strong { color: var(--c-ink-card); }
.b4s-show-meta p { margin: 0 0 .6em; }

/* "..." dépliable (down_affiche, mobile) -- le display block/none ci-dessus
   contrôle uniquement si l'élément <details> existe visuellement à cet
   endroit ; son ouverture/fermeture reste le comportement natif du
   navigateur, aucun CSS supplémentaire n'est nécessaire pour ça. */
.b4s-poster-more summary {
  list-style: none;
  width: 22px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--c-bg-card-tint);
  color: var(--c-ink-card-soft);
  font-size: .75rem;
  cursor: pointer;
  margin-top: 4px;
}
.b4s-poster-more summary::-webkit-details-marker { display: none; }
.b4s-poster-more[open] summary { color: var(--c-dominant); }
.b4s-poster-more p { margin: 6px 0 0; font-size: .8rem; color: var(--c-ink-card-soft); line-height: 1.5; }

@media (max-width: 880px) {
  .b4s-show-layout { grid-template-columns: 1fr; }

  /* Carte spectacle compacte : l'affiche à gauche, à droite 3 lignes
     tronquées (intro / titre / auteur), puis -- s'il y a plus à dire --
     un petit "..." dépliable, puis le lien vers les dates, toujours
     visible quel que soit le contenu au-dessus. */
  .b4s-poster-card {
    position: static;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px;
  }
  .b4s-poster-frame {
    width: 72px;
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .b4s-poster-body {
    flex: 1;
    min-width: 0; /* indispensable pour que la troncature fonctionne dans un flex item */
  }
  .b4s-poster-top-mobile {
    min-width: 0;
    margin: 0 0 2px;
    font-size: .78rem;
    color: var(--c-ink-card-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .b4s-poster-card h2 {
    min-width: 0;
    margin: 0 0 .2em;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .b4s-show-meta { min-width: 0; }
  .b4s-auteur-line {
    min-width: 0;
    margin: 0 !important;
    font-size: .82rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Petit lien stylisé "X dates disponibles", à l'intérieur même de la carte
   spectacle (remplace l'ancien bouton flottant, devenu inutile une fois la
   carte compacte en place — et qui se déclenchait au mauvais moment). */
.b4s-poster-cta {
  display: none;
}
@media (max-width: 880px) {
  .b4s-poster-cta {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--c-dominant);
  }
  .b4s-poster-cta i { font-size: .75em; }
}


/* -------------------------------------------------------------------------
   5. Liste des représentations — tuiles "ticket"
   ------------------------------------------------------------------------- */
.b4s-list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  scroll-margin-top: 88px; /* compense le header sticky lors du saut d'ancre */
}

.b4s-rep-list { display: flex; flex-direction: column; gap: 12px; }

.b4s-rep-tile {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr auto auto;
  align-items: center;
  gap: 18px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-radius: var(--radius-card);
  padding: 14px 18px;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.b4s-rep-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--c-dominant);
}

/* Tampon-calendrier : remplace l'affichage textuel de la date
   Toujours posé sur un fond clair (cohérent clair/sombre) -> tokens "-card" */
.b4s-date-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--c-border-card, #E1E5E4);
  border-radius: 10px;
  padding: 8px 4px;
  font-family: var(--font-mono);
  line-height: 1.1;
  color: var(--c-ink-card);
  background: var(--c-bg-card-tint);
}
.b4s-date-stamp .b4s-date-day { font-size: 1.5rem; font-weight: 700; }
.b4s-date-stamp .b4s-date-month { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-card-soft); }
/* Heure mise en évidence (demande client) : gras + légère coloration */
.b4s-date-stamp .b4s-date-time { font-size: .74rem; font-weight: 700; color: var(--c-dominant); margin-top: 3px; }

.b4s-rep-info { min-width: 0; }
.b4s-rep-info .b4s-rep-weekday { font-size: .82rem; color: var(--c-ink-card-soft); text-transform: capitalize; }
.b4s-rep-info .b4s-rep-venue { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-top: 2px; color: var(--c-ink-card); }
.b4s-rep-info .b4s-rep-venue a { color: var(--c-ink-card-soft); font-weight: 400; font-size: .85rem; display: inline-flex; align-items: center; gap: 4px; }
.b4s-rep-info .b4s-rep-venue a:hover { color: var(--c-dominant); }

.b4s-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  min-width: 0; /* sinon, en grille mobile (.b4s-rep-tile), ce texte non-coupé
    force toute la colonne -- et donc toute la page -- plus large que l'écran;
    même piège que le plan de salle et la bulle affiche mobile, déjà rencontré
    ailleurs. */
}
/* Même précaution pour le conteneur nom de salle + lien "plan", imbriqué en
   flex dans .b4s-rep-info (qui a lui-même déjà min-width:0, mais ça ne
   protège pas automatiquement ses propres enfants flex). */
.b4s-rep-info .b4s-rep-venue { min-width: 0; }
/* Les 4 états reprennent EXACTEMENT la logique déjà calculée par le PHP
   ($resa_bg = '', '_w', '_w2', '_comp') — voir README pour le mapping.
   Intensité volontairement croissante avec l'urgence : le "ok" reste
   discret (rien d'urgent à signaler), "mid" et "low" passent en fond
   plein + léger halo pour attirer l'œil, "low" pulse doucement (l'état le
   plus urgent avant complet). */
.b4s-badge--ok   { background: color-mix(in srgb, var(--c-success) 14%, transparent); color: var(--c-success); }
.b4s-badge--mid  {
  background: var(--c-warning);
  color: #ffffff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-warning) 18%, transparent);
}
.b4s-badge--low  {
  background: var(--c-orange);
  color: #ffffff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-orange) 22%, transparent);
  animation: b4s-pulse 1.8s ease-in-out infinite;
}

@keyframes b4s-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Ruban PROMO — accroché au coin de la tuile, bien plus visible que l'ancien
   texte discret. Fonctionne en mode clair comme en mode sombre (couleurs
   fixes, non dépendantes du thème). */
.b4s-ribbon-promo {
  position: absolute;
  top: -3px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px 8px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  background: var(--c-accent-gold);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  box-shadow: 0 3px 6px rgba(20,24,28,.18);
}

.b4s-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  font-size: .9rem;
  /* !important volontaire : un précédent essai (appearance:none simple) n'a
     pas suffi à empêcher un fond de bouton natif de prendre le dessus en
     mobile. On force ici explicitement, couleur ET image de fond. */
  background-color: var(--c-dominant) !important;
  background-image: none !important;
  color: var(--c-dominant-contrast) !important;
  transition: filter .15s ease, transform .15s ease;
}
.b4s-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.b4s-btn--ghost { background-color: transparent !important; color: var(--c-ink-card) !important; border: 1px solid var(--c-border-card, #E1E5E4); }
.b4s-btn--ghost:hover { border-color: var(--c-dominant); color: var(--c-dominant) !important; }

/* "COMPLET" : occupe désormais la place du bouton Réserver (plus de bouton
   grisé séparé). C'est un <span>, pas un <button> : rien n'est cliquable. */
.b4s-flag-complet {
  background-color: var(--c-danger) !important;
  color: #fff !important;
  cursor: default;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: .03em;
  min-width: 132px; /* aligné sur la largeur typique du bouton Réserver */
}
.b4s-flag-complet:hover { filter: none; transform: none; }

@media (max-width: 620px) {
  .b4s-rep-tile {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "stamp info"
      "stamp badge"
      "stamp action";
    row-gap: 8px;
  }
  .b4s-date-stamp { grid-area: stamp; }
  .b4s-rep-info { grid-area: info; }
  .b4s-badge { grid-area: badge; justify-self: start; }
  .b4s-btn { grid-area: action; justify-self: stretch; justify-content: center; }
}

/* -------------------------------------------------------------------------
   7. Page de sélection (plusieurs spectacles à l'affiche)
   Réutilise les tokens et la logique visuelle de la page 1, dans un
   contexte différent : pas de spectacle choisi encore, donc header réduit
   au logo (voir b4s_spec_select.php — le markup du header n'inclut tout
   simplement pas le bloc nav/actions sur cette page, pas besoin de CSS
   spécifique pour ça).
   ------------------------------------------------------------------------- */
.b4s-select-intro { text-align: center; margin-bottom: 28px; }
.b4s-select-intro p { color: var(--c-ink-soft); }

.b4s-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

.b4s-select-card {
  position: relative;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-radius: var(--radius-card);
  padding: 16px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: var(--shadow-card);
}
.b4s-select-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--c-dominant);
}

/* Étiquette ACTUELLEMENT / PROCHAINEMENT — ACTUELLEMENT en fond plein +
   léger halo (on veut que ça saute aux yeux, c'est ce qui se joue
   maintenant) ; PROCHAINEMENT reste neutre, rien d'urgent à signaler. */
.b4s-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.b4s-tag--now {
  background: var(--c-dominant);
  color: var(--c-dominant-contrast);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-dominant) 20%, transparent);
}
.b4s-tag--soon { border: 1.5px solid var(--c-border-card, #E1E5E4); color: var(--c-ink-card-soft); }

.b4s-select-card .b4s-poster-frame { margin-bottom: 12px; }
.b4s-select-card h2 { font-size: 1rem; margin: 0 0 .2em; color: var(--c-ink-card); }
.b4s-select-author { font-size: .82rem; color: var(--c-ink-card-soft); margin: 0 0 .7em; }

.b4s-select-dates { display: flex; flex-wrap: wrap; gap: 6px; }

/* Mini tampon-date : même composant que la page 1, en version compacte
   (pas d'heure, plusieurs côte à côte) */
.b4s-date-stamp--mini {
  flex-direction: row;
  gap: 4px;
  padding: 4px 8px;
  font-size: .72rem;
}
.b4s-date-stamp--mini .b4s-date-day { font-size: .85rem; }
.b4s-date-stamp--mini .b4s-date-month { font-size: .62rem; }

.b4s-select-more {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--c-bg-card-tint);
  color: var(--c-ink-card-soft);
  font-size: .72rem;
  font-weight: 600;
}

/* Etat "rien à l'affiche" (mysqli_num_rows==0) */
.b4s-select-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--c-ink-soft);
}
.b4s-select-empty h1 { font-size: 1.2rem; }

/* -------------------------------------------------------------------------
   8. Barre de progression (pages 2 à 6 du processus de réservation)
   Pas visible sur la page 1. Reprend des éléments déjà connus du
   spectateur (affiche miniature, date/heure) ; les autres infos (places,
   total, paiement) s'ajouteront au fil de l'avancement dans les pages
   suivantes — le PHP décidera quoi afficher selon l'étape.
   ------------------------------------------------------------------------- */
.b4s-progress {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
/* Modificateur "plein bord" : à utiliser quand la barre de progression est
   rendue depuis une page de contenu (resa2.php, etc.), donc imbriquée dans
   .b4s-main (qui a son propre padding + max-width:1200px) plutôt que placée
   en sœur directe du <header> comme dans la démo. Technique standard pour
   ressortir d'un conteneur centré jusqu'aux bords réels de l'écran, sur
   n'importe quelle largeur d'écran (un simple margin négatif fixe ne
   suffirait pas au-delà de 1200px). Annule aussi le padding-top de
   .b4s-main pour coller sous le header. */
.b4s-progress--bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -32px;
  margin-bottom: 32px;
}
.b4s-progress-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Récapitulatif des choix déjà faits, organisé en "blocs de choix" — un
   bloc = les infos décidées ensemble à une même étape. Une fine ligne
   verticale grise sépare les blocs entre eux (jamais après le dernier). */
.b4s-progress-recap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.b4s-progress-block { display: flex; align-items: center; gap: 10px; }
.b4s-progress-sep-v { width: 1px; height: 30px; background: var(--c-border); flex-shrink: 0; }

.b4s-progress-poster {
  width: 36px;
  height: 50px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.b4s-progress-poster img, .b4s-progress-poster svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.b4s-progress-recap .b4s-date-stamp--compact { background: var(--c-bg-card-tint); padding: 5px 9px; }
.b4s-date-stamp--compact .b4s-date-day { font-size: 1.05rem; }
.b4s-date-stamp--compact .b4s-date-month { font-size: .6rem; }
.b4s-date-stamp--compact .b4s-date-time { font-size: .64rem; margin-top: 1px; }

/* Places + prix : superposés (et non côte à côte) pour gagner en largeur —
   c'est ce qui partait à la ligne en mobile portrait. Même étape, donc
   regroupés dans un seul bloc, comme demandé. */
.b4s-progress-stack { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.b4s-progress-stack .b4s-progress-chip { padding: 3px 9px; font-size: .72rem; }

/* Indicateur d'étapes */
.b4s-progress-steps { display: flex; align-items: center; gap: 6px; }
.b4s-progress-step { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--c-ink-soft); white-space: nowrap; }
.b4s-progress-step .dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700;
  flex-shrink: 0;
}
.b4s-progress-step.is-current { color: var(--c-dominant); font-weight: 700; }
.b4s-progress-step.is-current .dot { border-color: var(--c-dominant); background: var(--c-dominant); color: var(--c-dominant-contrast); }
.b4s-progress-step.is-done .dot { border-color: var(--c-dominant); color: var(--c-dominant); }
.b4s-progress-step.is-done .dot i { font-size: .65rem; }
.b4s-progress-sep { width: 22px; height: 1px; background: var(--c-border); flex-shrink: 0; }

/* Mobile : les libellés prennent trop de place, on garde juste l'étape
   courante + une mini-barre, le récap reste visible (demande explicite) */
@media (max-width: 700px) {
  .b4s-progress-step span.label { display: none; }
  .b4s-progress-step:not(.is-current) { display: none; }
  .b4s-progress-sep { display: none; }
  .b4s-progress-step.is-current::before {
    content: "Étape " attr(data-step) " / " attr(data-total) " — ";
    font-weight: 400;
    color: var(--c-ink-soft);
  }
}

/* -------------------------------------------------------------------------
   9. Page tarifs (et composants de formulaire réutilisables, cf. C.7)
   ------------------------------------------------------------------------- */
.b4s-tarif-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--c-bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.b4s-tarif-card h1 { font-size: 1.2rem; text-align: center; margin-bottom: 22px; color: var(--c-ink-card); }

.b4s-tarif-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.b4s-tarif-table th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-ink-card-soft);
  padding: 0 10px 8px;
  border-bottom: 2px solid var(--c-border-card, #E1E5E4);
}
.b4s-tarif-table th:last-child, .b4s-tarif-table td:last-child { text-align: right; }
/* Alignement du total général : explicite, pour ne pas dépendre du
   :last-child ci-dessus (fragile : un input caché placé après le td dans le
   <tr> suffit à le faire échouer -- les input hidden ne sont PAS déplacés
   hors du tr par le parseur HTML, contrairement aux autres éléments). */
.b4s-tarif-table .b4s-total-amount { text-align: right; }
.b4s-tarif-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--c-border-card, #E1E5E4);
  color: var(--c-ink-card);
  font-size: .92rem;
}
.b4s-tarif-table tbody tr:hover td { background: var(--c-bg-card-tint); }
.b4s-tarif-table td.b4s-tarif-total { font-weight: 700; }
.b4s-tarif-table tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--c-border-card, #E1E5E4);
  font-weight: 700;
  font-size: 1.05rem;
  padding-top: 16px;
}

/* Sélecteur de quantité — compact, dans une cellule */
.b4s-qty-select {
  appearance: none;
  -webkit-appearance: none;
  width: 64px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--c-border-card, #E1E5E4);
  background: var(--c-bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234B5358' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center;
  color: var(--c-ink-card);
  font-family: var(--font-body);
  font-size: .9rem;
  cursor: pointer;
}
.b4s-qty-select:focus {
  outline: none;
  border-color: var(--c-dominant);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-dominant) 18%, transparent);
}

/* Champs de formulaire "label au-dessus" — base réutilisée en C.7 */
.b4s-field { margin-bottom: 16px; }
.b4s-field label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-ink-card-soft);
  margin-bottom: 5px;
  transition: color .15s ease;
}
.b4s-field input, .b4s-field select, .b4s-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--c-border-card, #E1E5E4);
  background: var(--c-bg-card);
  color: var(--c-ink-card);
  font-family: var(--font-body);
  font-size: .92rem;
}
.b4s-field input:focus, .b4s-field select:focus, .b4s-field textarea:focus {
  outline: none;
  border-color: var(--c-dominant);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-dominant) 18%, transparent);
}
.b4s-field:focus-within label { color: var(--c-dominant); }

/* Remplissage automatique du navigateur (Chrome, Edge, Safari). Sans cette
   regle, le navigateur impose SON fond -- blanc ou jaune pale -- et sa
   couleur de texte des qu'un champ est rempli automatiquement. C'est ce qui
   faisait passer nom, prenom, adresse et email en blanc en theme sombre
   pendant que les autres champs restaient sombres : seuls les champs que le
   navigateur sait reconnaitre etaient touches, d'ou l'aspect panache.
   L'astuce du box-shadow interieur est la seule facon de repeindre ce fond,
   background-color etant ignore ici ; la transition tres longue empeche le
   navigateur de le reappliquer apres coup. */
.b4s-field input:-webkit-autofill,
.b4s-field input:-webkit-autofill:hover,
.b4s-field input:-webkit-autofill:focus,
.b4s-field input:-webkit-autofill:active,
.b4s-field textarea:-webkit-autofill,
.b4s-field select:-webkit-autofill {
  -webkit-text-fill-color: var(--c-ink-card);
  caret-color: var(--c-ink-card);
  -webkit-box-shadow: 0 0 0 1000px var(--c-bg-card) inset;
  box-shadow: 0 0 0 1000px var(--c-bg-card) inset;
  transition: background-color 100000s ease-in-out 0s;
}
/* Firefox */
.b4s-field input:autofill, .b4s-field textarea:autofill {
  background: var(--c-bg-card);
  color: var(--c-ink-card);
}
/* Champ obligatoire non rempli : fine bordure rouge + léger halo, dès l'affichage.
   Volontairement adoucie (--c-danger-soft) : c'est un simple rappel "à
   remplir", pas encore une erreur active — celle-ci reste au rouge franc
   (--c-danger), voir .has-error plus bas. */
.b4s-field--required input, .b4s-field--required select, .b4s-field--required textarea {
  border-color: var(--c-danger-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-danger-soft) 12%, transparent);
}
.b4s-field--required label::after { content: " *"; color: var(--c-danger-soft); }

/* Champ obligatoire correctement rempli : bordure verte (remplace le rouge).
   Doit rester APRÈS la règle rouge ci-dessus pour gagner à spécificité égale. */
.b4s-field.is-valid input, .b4s-field.is-valid select, .b4s-field.is-valid textarea {
  border-color: var(--c-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success) 12%, transparent);
}

/* Drapeau pays affiché dans les champs téléphone (fixe / mobile / prof).
   Le <input> reçoit un padding-left élargi ; le drapeau est superposé en
   absolu à gauche. Le wrapper .b4s-phone-wrap est ajouté par resa-form.js. */
.b4s-phone-wrap { position: relative; }
.b4s-phone-flag {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 15px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  pointer-events: none;
  display: none; /* masqué tant qu'aucun pays n'est détecté */
}
.b4s-phone-flag svg { display: block; width: 100%; height: 100%; }
.b4s-phone-wrap.has-flag input { padding-left: 40px; }
.b4s-phone-wrap.has-flag .b4s-phone-flag { display: block; }

/* Captcha — défi simple (calcul), plus accessible qu'une image à déchiffrer */
.b4s-captcha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin: 26px auto;
  padding: 14px 16px;
  background: var(--c-bg-card-tint);
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-radius: 12px;
}
.b4s-captcha-challenge {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-ink-card);
  white-space: nowrap;
}
/* Captcha réel (image à recopier) — la balise <img id="captcha"> vient de
   b4s_captcha.php, dimensions fixées par ce script-là. AUCUN redimensionnement
   ici (même principe que le plan de salle) : une image de captcha réduite en
   CSS devient illisible. */
.b4s-captcha-img {
  display: block;
  max-width: 100%; /* garde-fou anti-débordement mobile uniquement, ne réduit jamais en pratique */
  border-radius: 8px;
  border: 1px solid var(--c-border-card, #E1E5E4);
  flex-shrink: 0;
}
.b4s-captcha input {
  width: 110px;
  text-align: center;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid var(--c-border-card, #E1E5E4);
  font-family: var(--font-body);
  font-size: .95rem;
}
.b4s-captcha input:focus { outline: none; border-color: var(--c-dominant); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-dominant) 18%, transparent); }
.b4s-captcha-refresh,
.b4s-captcha-hint {
  margin-left: auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--c-border-card, #E1E5E4);
  background: var(--c-bg-card);
  color: var(--c-ink-card-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.b4s-captcha-refresh:hover,
.b4s-captcha-hint:hover { color: var(--c-dominant); border-color: var(--c-dominant); }

.b4s-form-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

/* Prix/totaux en police mono, comme les dates et billets (cf. design
   system) — appliqué ici aux cellules tarif/prix-unitaire/total. */
.b4s-tarif-table .b4s-price { font-family: var(--font-mono); }

/* -------------------------------------------------------------------------
   9bis. Tarifs regroupés (resa2.php) — bascule entre groupes tarifaires.
   Trois présentations selon tarif_regroupement.id_tarif_regroupement_mode :
     - mode 1 : choix exclusif via gros boutons (ex. "Repas-spectacle" /
       "Spectacle seulement"). Les noms de classe .bouton / .bouton_vert
       sont IMPOSÉS par regroup_tarif() dans fonction_js.php, qui réécrit
       tout le className en JS (allid[bouton].className='bouton_vert') —
       impossible de les renommer sans toucher au JS, donc on les reprend
       tels quels et on les redessine entièrement ici.
     - mode 2 : interrupteur on/off pour un groupe optionnel (remplace
       l'ancien style/button.php, abandonné).
     - autre (mode 3, ou non défini) : section dépliable avec chevron.
   ------------------------------------------------------------------------- */

/* Mode 1 — rangée de boutons de choix exclusifs, au-dessus du tableau */
.b4s-tarif-choice-row td { padding: 6px 0 18px !important; border-bottom: none !important; }
.b4s-tarif-choice { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.b4s-tarif-card .bouton,
.b4s-tarif-card .bouton_vert {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem !important; /* écrase l'ancien style inline (font-size:24px) du bouton historique */
  padding: 14px 22px;
  border-radius: 12px;
  cursor: pointer;
  flex: 1 1 200px;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}
.b4s-tarif-card .bouton {
  border: 1.5px solid var(--c-border-card, #E1E5E4);
  background-color: var(--c-bg-card);
  background-image: none;
  color: var(--c-ink-card);
}
.b4s-tarif-card .bouton:hover { border-color: var(--c-dominant); color: var(--c-dominant); transform: translateY(-1px); }
.b4s-tarif-card .bouton_vert {
  border: 1.5px solid var(--c-dominant);
  background-color: var(--c-dominant) !important;
  background-image: none !important;
  color: var(--c-dominant-contrast) !important;
}

/* En-tête de groupe ("line_X") — titre + bascule (switch ou chevron) */
.b4s-tarif-group-head td { border-bottom: none !important; padding: 18px 10px 8px !important; }
.b4s-tarif-group-head h1 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .95rem;
  text-align: left;
  margin: 0;
  color: var(--c-ink-card);
}
.b4s-quota-flag {
  margin-left: auto;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--c-danger);
  white-space: nowrap;
  padding-left: 10px;
}

/* Mode 2 — interrupteur on/off (remplace style/button.php) */
.b4s-switch-wrap { display: inline-flex; align-items: center; gap: 10px; }
.b4s-switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.b4s-switch-track {
  position: relative;
  display: inline-block;
  width: 44px; height: 25px;
  border-radius: 999px;
  background: var(--c-border-card, #E1E5E4);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .2s ease;
}
.b4s-switch-track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.b4s-switch-input:checked + .b4s-switch-track { background: var(--c-dominant); }
.b4s-switch-input:checked + .b4s-switch-track::after { transform: translateX(19px); }
.b4s-switch-input:focus-visible + .b4s-switch-track { outline: 2px solid var(--c-dominant); outline-offset: 2px; }
.b4s-switch-wrap .off, .b4s-switch-wrap .on {
  font-size: .85rem;
  font-weight: 400;
  color: var(--c-ink-card-soft);
  transition: color .15s ease, font-weight .15s ease;
}
.b4s-switch-input:checked ~ .on { color: var(--c-dominant); font-weight: 700; }
.b4s-switch-input:not(:checked) ~ .off { color: var(--c-ink-card); font-weight: 700; }

/* Mode "autre" (3) — chevron CSS (remplace les images fleche_bas/dr.png) */
.b4s-chevron {
  display: inline-flex;
  width: 18px; height: 18px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-ink-card-soft);
  font-size: .85rem;
}
.b4s-tarif-group-head td[onclick] { cursor: pointer; }
.b4s-tarif-group-head td[onclick] .b4s-chevron { color: var(--c-dominant); }

/* Ligne de tarif promotionnel recalculé (AJAX tarif_promo.php) */
.b4s-promo-row td {
  font-size: .82rem;
  font-style: italic;
  color: var(--c-dominant);
  background: color-mix(in srgb, var(--c-dominant) 8%, var(--c-bg-card));
  border-bottom: 1px solid var(--c-border-card, #E1E5E4);
}

/* Ligne "EPUISE" (tarif/regroupement complet) */
.b4s-tarif-sold { color: var(--c-ink-card-soft); font-style: italic; font-size: .85rem; }

/* Total général */
.b4s-total-label { font-weight: 700; font-size: 1.05rem; }
.b4s-total-amount { font-weight: 700; font-size: 1.05rem; }

/* Alerte inline (quota dépassé / solde changé / code captcha invalide) —
   variante compacte de .b4s-confirm-banner, pour usage à l'intérieur d'une
   carte de formulaire plutôt qu'en bandeau pleine largeur. */
.b4s-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: .88rem;
}
/* Cas particulier : l'alerte captcha vit DANS la zone captcha (#captchaimg),
   juste sous le bloc de saisie -- on borne sa largeur à celle du bloc
   .b4s-captcha au-dessus d'elle et on la centre pareil. */
#captchaimg .b4s-alert { max-width: 480px; margin: 14px auto 0; }
.b4s-alert i { font-size: 1.1rem; margin-top: 1px; flex-shrink: 0; }
.b4s-alert strong { display: block; margin-bottom: 2px; text-transform: uppercase; font-size: .8rem; letter-spacing: .02em; }
.b4s-alert p { margin: 0; }
.b4s-alert--danger {
  background: color-mix(in srgb, var(--c-danger) 10%, var(--c-bg-card));
  border: 1px solid var(--c-danger);
  color: var(--c-danger);
}
.b4s-alert--danger p { color: var(--c-ink-card); }

@media (max-width: 600px) {
  .b4s-tarif-card { padding: 18px 14px; }
  .b4s-tarif-table th, .b4s-tarif-table td { padding: 10px 6px; font-size: .85rem; }
  .b4s-qty-select { width: 54px; padding: 6px 8px; }
  .b4s-tarif-card .bouton, .b4s-tarif-card .bouton_vert { flex: 1 1 100%; }
}

/* Chips additionnels du récap (places, prix) — ajoutés dès que ces infos
   sont connues (à partir de la page plan de salle, qui suit la page
   tarifs). Même esprit que .b4s-progress-time. */
.b4s-progress-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-ink);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
}
.b4s-progress-chip--price { color: var(--c-dominant); border-color: var(--c-dominant); }

/* -------------------------------------------------------------------------
   11. Page plan de salle (C.5)
   ------------------------------------------------------------------------- */
.b4s-plan-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}
.b4s-plan-col { min-width: 0; } /* même piège qu'ailleurs : un élément de grille refuse par défaut de devenir plus étroit que son contenu */
.b4s-seats-col h2 { font-size: 1.05rem; margin: 0 0 12px; }

/* Cadre du plan : AUCUN redimensionnement de l'image — la détection de clic
   se base sur les coordonnées x/y réelles du fichier fourni par le client.
   AUCUN scroll interne non plus (ni vertical ni horizontal, sur aucun
   écran) : la boîte s'étire en hauteur/largeur selon ce que le plan exige,
   jamais l'inverse. C'est le reste de la page qui s'adapte. */
.b4s-plan-frame {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
}
.b4s-plan-frame h2 { font-size: 1.05rem; margin: 0 0 12px; color: var(--c-ink-card); }

/* Bascule entre les deux gabarits existants (resa_mplace.php /
   resa_plan.php) — même mécanisme que dans resa2pl.php (#mpl / #ppl),
   juste redessiné. Pas de logique réelle dans cette démo : on se
   concentre sur le mode "plan de salle" demandé. */
.b4s-plan-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.b4s-plan-tab {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--c-border-card, #E1E5E4);
  background: transparent;
  color: var(--c-ink-card-soft);
  font-size: .85rem;
  font-weight: 600;
}
.b4s-plan-tab.is-active { border-color: var(--c-dominant); color: var(--c-dominant); }

.b4s-plan-stage {
  position: relative;
  display: inline-block; /* la boîte s'ajuste à la taille réelle de l'image (ou de l'image réduite, voir nav.js) */
  max-width: 100%;
  transform-origin: top left;
}
.b4s-plan-frame img {
  max-width: none;   /* override volontaire du reset global (img{max-width:100%}) */
  width: auto;
  height: auto;
  display: block;
}

.b4s-seats-col {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px;
}
.b4s-seats-col h2 { color: var(--c-ink-card); }

.b4s-seat-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.b4s-seat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-left: 3px solid var(--c-dominant);
  background: var(--c-bg-card-tint);
  color: var(--c-ink-card);
  font-size: .92rem;
}
.b4s-seat-row i { color: var(--c-dominant); }
.b4s-seat-row .b4s-seat-remove {
  margin-left: auto;
  color: var(--c-ink-card-soft);
  font-size: .85rem;
}
.b4s-seat-row .b4s-seat-remove:hover { color: var(--c-danger); }

.b4s-seats-empty { color: var(--c-ink-card-soft); font-size: .88rem; text-align: center; padding: 18px 0; }

/* Bouton flottant mobile : dès qu'une place est choisie, permet de sauter
   directement à la liste + au bouton "étape suivante", sans avoir à
   chercher où ça se trouve une fois le plan très long. Desktop n'en a pas
   besoin (les deux colonnes sont déjà côte à côte, rien à chercher). */
.b4s-plan-float-cta {
  display: none;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 80;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--c-dominant);
  color: var(--c-dominant-contrast);
  font-weight: 600;
  font-size: .82rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
  max-width: calc(100vw - 24px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.b4s-plan-float-cta.is-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 880px) {
  .b4s-plan-layout { grid-template-columns: 1fr; }
  .b4s-plan-float-cta { display: flex; }

  /* Spécifique à cette page : le header + la barre de progression ne
     restent PAS affichés en scrollant en mobile, pour maximiser l'espace
     dédié au plan (vrai problème en paysage).

     Volontairement, on ne force PLUS aucune largeur sur le header/la
     barre de progression ni sur la page (deux tentatives différentes,
     toutes les deux ont empêché le zoom automatique du navigateur sur le
     contenu qui dépasse — semble être une règle générale : toute largeur
     explicite quelque part sur la page désactive cette aide automatique,
     pas seulement celle posée au même endroit qu'avant). Conséquence
     acceptée : le fond du header peut sembler "s'arrêter" pendant un
     panoramique horizontal manuel, mais le zoom auto à l'arrivée sur la
     page — que tu avais identifié comme plus utile — est ainsi préservé. */
  .b4s-page--planview .b4s-header,
  .b4s-page--planview .b4s-progress {
    position: static;
  }
}

/* --- 11bis. Intégration réelle resa2pl.php (ajouts post-démo) --- */

/* Zone titre + onglets, au-dessus de la grille plan/choix */
.b4s-plan-intro h1 { font-size: 1.2rem; text-align: center; margin: 0 0 18px; color: var(--c-ink); }
.b4s-plan-intro .b4s-plan-tabs { justify-content: center; }
.b4s-plan-intro .b4s-alert { max-width: 640px; margin: 0 auto 18px; }
.b4s-plan-tab { cursor: pointer; background-color: transparent; } /* désormais de vrais <button> */
.b4s-plan-tab.is-active { cursor: default; } /* onglet actif (ou unique) : non cliquable -- un re-clic rechargerait le gabarit et viderait la sélection de places */

/* Légende des couleurs — les carrés viennent de carrelegende_png.php
   (couleurs configurées PAR CLIENT en base, on ne les remplace pas). */
.b4s-plan-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  margin-bottom: 12px;
  font-size: .85rem;
  color: var(--c-ink-card-soft);
}
.b4s-plan-legend span { display: inline-flex; align-items: center; gap: 6px; }
.b4s-plan-legend img { display: inline-block; border-radius: 3px; }

/* Les carrés de légende générés par carrelegende_png.php doivent rester
   DANS le texte, où qu'ils apparaissent — y compris dans le HTML legacy
   injecté tel quel par resa_plan_img_ax.php (aperçu modal du mode
   meilleures places, non modifiable) : sans cette règle, le reset global
   img{display:block} met chaque carré seul sur sa ligne. */
img[src*="carrelegende_png"] {
  display: inline-block;
  width: auto;
  max-width: none;
  vertical-align: middle;
  border-radius: 3px;
}

/* Contenu de la colonne "Votre choix" (#liste_places).
   ATTENTION : après chaque clic sur le plan, resa_plan_img_ax.php REMPLACE
   tout ce contenu par du HTML legacy (<i>/<b>/<br>, <hr>, deux
   <input class="bouton">). Ce fichier ne doit pas être modifié (décision
   actée) : on rhabille donc ce HTML-là tel quel, par CSS ciblé ici. */
#liste_places { font-size: .92rem; color: var(--c-ink-card); line-height: 1.7; }
#liste_places h3 { font-size: .95rem; margin: 0 0 6px; color: var(--c-ink-card); }
#liste_places p { margin: 0 0 16px; color: var(--c-ink-card-soft); }
#liste_places i { color: var(--c-ink-card-soft); }
#liste_places .b4s-btn i { color: inherit; } /* la flèche des boutons hérite de la couleur du bouton (blanc sur fond dominant), sans quoi la règle générique ci-dessus la peint en gris ardoise */
#liste_places b { color: var(--c-dominant); }
#liste_places hr {
  border: 0;
  border-top: 1px solid var(--c-border-card, #E1E5E4);
  margin: 14px 0;
}
/* Lignes de places choisies (markup .b4s-seat-row émis par le bloc $lib de
   resa_plan_img_ax.php) : surcharges nécessaires car les règles
   #liste_places i/b ci-dessus (spécificité d'id) l'emporteraient sur les
   règles génériques .b4s-seat-row de la section 11. */
#liste_places .b4s-seat-row > i { color: var(--c-dominant); }
#liste_places .b4s-seat-lbl { min-width: 0; }
#liste_places .b4s-seat-lbl i { color: var(--c-ink-card-soft); }
#liste_places .b4s-seat-lbl b { color: var(--c-ink-card); font-family: var(--font-mono); }
#liste_places .b4s-seat-remove { margin-left: auto; color: var(--c-ink-card-soft); cursor: pointer; }
#liste_places .b4s-seat-remove:hover { color: var(--c-danger); }
/* Réplique de .b4s-btn pour les <input class="bouton"> injectés (un input
   ne peut pas recevoir d'icône, sinon identique). */
#liste_places .bouton {
  appearance: none; -webkit-appearance: none;
  display: inline-block;
  padding: 10px 18px;
  margin: 4px 6px 0 0;
  border-radius: 999px;
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  background-color: var(--c-dominant) !important;
  background-image: none !important;
  color: var(--c-dominant-contrast) !important;
  transition: filter .15s ease, transform .15s ease;
}
#liste_places .bouton:hover { filter: brightness(1.08); transform: translateY(-1px); }
#liste_places .bouton[value="Annuler"] {
  background-color: transparent !important;
  color: var(--c-ink-card) !important;
  border: 1px solid var(--c-border-card, #E1E5E4);
}
#liste_places .bouton[value="Annuler"]:hover { border-color: var(--c-dominant); color: var(--c-dominant) !important; }

/* Mode "meilleures places" (resa_mplace.php) — rarement utilisé */
.b4s-mplace-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px;
}
.b4s-mplace-card h2 { font-size: 1.05rem; margin: 0 0 6px; color: var(--c-ink-card); }
.b4s-mplace-hint { font-size: .85rem; color: var(--c-ink-card-soft); margin: 0 0 14px; }
.b4s-mplace-hint i { color: var(--c-dominant); }
.b4s-mplace-list { display: flex; flex-direction: column; gap: 10px; }
.b4s-mplace-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--c-border-card, #E1E5E4);
  background: var(--c-bg-card-tint);
  color: var(--c-ink-card);
  font-size: .92rem;
  cursor: pointer;
}
.b4s-mplace-row:has(input:checked) { border-color: var(--c-dominant); }
.b4s-mplace-row input[type="radio"] { accent-color: var(--c-dominant); flex-shrink: 0; }
.b4s-mplace-text { min-width: 0; }
.b4s-mplace-text b { color: var(--c-dominant); }
.b4s-mplace-loupe {
  margin-left: auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--c-border-card, #E1E5E4);
  background: var(--c-bg-card);
  color: var(--c-ink-card-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.b4s-mplace-loupe:hover { color: var(--c-dominant); border-color: var(--c-dominant); }

/* Variante large de la modale pour l'aperçu du plan (ex-overlib) :
   s'ajuste au plan, sans jamais dépasser l'écran. */
.b4s-modal--plan { max-width: calc(100vw - 32px); width: auto; }
#b4s_plan_modal_body { text-align: center; font-size: .85rem; color: var(--c-ink-card-soft); line-height: 1.9; }
.b4s-modal--plan img { max-width: 100%; height: auto; pointer-events: none; /* l'img injectée porte toujours l'onclick de sélection (resa_plan_img_ax.php, non modifiable) : dans cet aperçu, un clic déclencherait changeimage() alors que #imgsalle n'existe pas en mode meilleures places -- bug préexistant de l'ancien popup overlib, neutralisé ici */ }
.b4s-modal--plan img[src^="data:image"] { margin: 10px auto 0; display: block; } /* le plan lui-même sous la légende, centré */

/* -------------------------------------------------------------------------
   12. Page mode de paiement (C.6)
   ------------------------------------------------------------------------- */
.b4s-pay-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--c-bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.b4s-pay-card h1 { font-size: 1.2rem; text-align: center; margin-bottom: 22px; color: var(--c-ink-card); }

.b4s-pay-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }

.b4s-pay-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-left: 3px solid var(--c-dominant);
  background: var(--c-bg-card-tint);
}
.b4s-pay-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-card, #E1E5E4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--c-dominant);
  flex-shrink: 0;
}
.b4s-pay-info { flex: 1; min-width: 0; }
.b4s-pay-info h3 { margin: 0 0 2px; font-size: .98rem; color: var(--c-ink-card); }
.b4s-pay-info p { margin: 0; font-size: .82rem; color: var(--c-ink-card-soft); }
.b4s-pay-row .b4s-btn { flex-shrink: 0; }


@media (max-width: 600px) {
  .b4s-pay-card { padding: 18px 14px; }
  .b4s-pay-row { flex-wrap: wrap; }
  .b4s-pay-row .b4s-btn { flex: 1 0 100%; justify-content: center; margin-top: 4px; }
  /* Modale : sur écran étroit (portrait), les deux boutons empilés
     verticalement pour laisser le libellé d'action respirer sur une ligne.
     Le bouton d'action passe en premier (plus proche du pouce), Annuler en dessous. */
  .b4s-modal { padding: 20px 16px; }
  .b4s-modal-actions { flex-direction: column-reverse; }
  .b4s-modal-actions .b4s-btn,
  .b4s-modal-actions .b4s-btn--ghost { flex: 1 1 auto; width: 100%; }
}

/* Barre de progression cliquable (à partir de cette étape) — ouvre le
   récapitulatif de réservation, voir .b4s-modal plus bas. */
.b4s-progress-inner.is-clickable { cursor: pointer; }
.b4s-progress-inner.is-clickable:hover { opacity: .85; }

/* -------------------------------------------------------------------------
   13. Page coordonnées (C.7) — formulaire + fenêtre de confirmation
   ------------------------------------------------------------------------- */
.b4s-coord-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--c-bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.b4s-coord-card h1 { font-size: 1.2rem; text-align: center; margin-bottom: 22px; color: var(--c-ink-card); }

.b4s-coord-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
}
.b4s-coord-grid .b4s-field--full { grid-column: 1 / -1; }
.b4s-coord-npa { display: flex; gap: 10px; }
.b4s-coord-npa .b4s-field:first-child { flex: 0 0 90px; }
.b4s-coord-npa .b4s-field:last-child { flex: 1; }

/* Autocomplete NPA/Localité — remplace l'ancien composant (pas de
   navigation clavier). Liste positionnée sous la paire NPA + Localité. */
.b4s-npa-wrap { position: relative; }
.b4s-npa-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-radius: 10px;
  box-shadow: var(--shadow-card-hover);
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 50;
}
.b4s-npa-suggest[hidden] { display: none; }
.b4s-npa-suggest li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--c-ink-card);
  font-size: .9rem;
}
.b4s-npa-suggest li .flag {
  width: 22px;
  height: 16px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.b4s-npa-suggest li .flag svg { display: block; width: 100%; height: 100%; }
.b4s-npa-suggest li .npa { font-family: var(--font-mono); font-weight: 600; width: 50px; flex-shrink: 0; }
.b4s-npa-suggest li .loc { color: var(--c-ink-card-soft); }
.b4s-npa-suggest li:hover,
.b4s-npa-suggest li.is-active {
  background: var(--c-bg-card-tint);
}
.b4s-npa-suggest li.is-active { outline: 2px solid var(--c-dominant); outline-offset: -2px; }
.b4s-npa-empty { padding: 10px; font-size: .85rem; color: var(--c-ink-card-soft); text-align: center; }

.b4s-coord-radio { display: flex; gap: 22px; padding-top: 6px; }
.b4s-coord-radio label { display: flex; align-items: center; gap: 6px; font-size: .92rem; color: var(--c-ink-card); font-weight: 500; }

.b4s-coord-note {
  font-size: .82rem;
  color: var(--c-danger);
  margin: 4px 0 18px;
}

@media (max-width: 600px) {
  .b4s-coord-card { padding: 18px 14px; }
  .b4s-coord-grid { grid-template-columns: 1fr; }
}

/* Cartouche d'erreur — affichée seulement après une tentative de
   validation invalide, au-dessus du champ concerné. Indépendante de la
   bordure rouge "obligatoire" déjà présente d'emblée (.b4s-field--required) :
   celle-ci dit "il faut remplir", la cartouche dit "ce qui cloche". */
.b4s-field-error {
  display: none;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--c-danger-soft) 10%, var(--c-bg-card));
  border: 1px solid var(--c-danger-soft);
  color: var(--c-danger-soft);
  font-size: .76rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  margin-bottom: 6px;
}
.b4s-field.has-error .b4s-field-error { display: flex; }
.b4s-field.has-error input,
.b4s-field.has-error select,
.b4s-field.has-error textarea {
  border-color: var(--c-danger-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-danger-soft) 14%, transparent);
}

.b4s-alert-list { margin: 6px 0 0; padding-left: 18px; }
.b4s-alert-list li { margin-bottom: 2px; font-size: .85rem; }
.b4s-coord-required-mark { color: var(--c-danger-soft); font-weight: 700; }
/* La barre de progression cliquable de resa3.php enveloppe
   .b4s-progress--bleed autour d'un .b4s-progress-inner.is-clickable;
   le curseur pointer doit s'appliquer sur l'ensemble de la bande. */
.b4s-progress-inner-clickable { cursor: pointer; }

/* -------------------------------------------------------------------------
   14. Fenêtre de confirmation (popup CSS, pas une nouvelle fenêtre/prompt)
   ------------------------------------------------------------------------- */
.b4s-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 16, .55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
}
.b4s-modal-overlay.is-open { display: flex; }

.b4s-modal {
  background: var(--c-bg-card);
  color: var(--c-ink-card);
  border-radius: var(--radius-card);
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 26px;
  box-shadow: 0 28px 60px rgba(0,0,0,.4);
}
.b4s-modal h2 { font-size: 1.1rem; margin: 0 0 18px; color: var(--c-ink-card); text-align: center; }

.b4s-modal-show {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-border-card, #E1E5E4);
  margin-bottom: 14px;
}
.b4s-modal-poster {
  width: 52px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.b4s-modal-poster img, .b4s-modal-poster svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.b4s-modal-show-info h3 { margin: 0 0 4px; font-size: 1rem; color: var(--c-ink-card); }
.b4s-modal-show-info p { margin: 0; font-size: .82rem; color: var(--c-ink-card-soft); }
.b4s-modal-show-info p i { width: 14px; text-align: center; margin-right: 4px; color: var(--c-dominant); }

.b4s-modal-section-title {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-ink-card-soft);
  margin: 14px 0 6px;
}
.b4s-modal-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--c-border-card, #E1E5E4);
  font-size: .9rem;
  color: var(--c-ink-card);
}
.b4s-modal-line .seats { color: var(--c-ink-card-soft); font-size: .8rem; }
.b4s-modal-totals { margin-top: 4px; }
.b4s-modal-totals .b4s-modal-line:last-child { border-bottom: none; font-weight: 700; font-size: 1rem; padding-top: 10px; }
.b4s-modal-pay {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border-card, #E1E5E4);
  font-size: .9rem;
  color: var(--c-ink-card);
}
.b4s-modal-pay i { color: var(--c-dominant); }

/* Places regroupées par rang — séparé des lignes de tarif, pour ne pas
   risquer de déborder sur une ligne si beaucoup de places partagent le
   même tarif (ex. 4 places "Adulte"). */
.b4s-confirm-seats { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; }
.b4s-confirm-seats-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--c-bg-card-tint);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: .9rem;
}
.b4s-confirm-seats-row i { color: var(--c-dominant); align-self: center; }
.b4s-confirm-seats-row .row-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .78rem;
  color: var(--c-dominant);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-radius: 6px;
  padding: 2px 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.b4s-confirm-seats-row .row-seats { color: var(--c-ink-card); }

.b4s-modal-actions { display: flex; gap: 10px; margin-top: 22px; }
/* Le libellé du bouton d'action ("Passer à l'étape du paiement") ne doit jamais
   se couper sur deux lignes. On empêche le retour à la ligne et on laisse ce
   bouton prendre la largeur nécessaire, l'"Annuler" restant compact. */
.b4s-modal-actions .b4s-btn { justify-content: center; white-space: nowrap; }
.b4s-modal-actions .b4s-btn--ghost { flex: 0 0 auto; }        /* Annuler : largeur naturelle */
.b4s-modal-actions .b4s-btn:not(.b4s-btn--ghost) { flex: 1 1 auto; } /* action : prend le reste */

/* -------------------------------------------------------------------------
   16. Page de confirmation finale (C.8)
   Réutilise volontairement les classes .b4s-modal-show / .b4s-modal-line /
   .b4s-modal-totals / .b4s-modal-pay déjà créées pour la popup de la page
   précédente — c'est exactement le même contenu, juste affiché en ligne
   sur la page plutôt qu'en fenêtre superposée. */
.b4s-confirm-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--c-bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
}

/* Bandeau "RESERVATION CONFIRMEE" — doit se comprendre sans lire, juste
   avec la couleur/icône/forme. */
.b4s-confirm-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: color-mix(in srgb, var(--c-success) 12%, var(--c-bg-card));
  border: 1.5px solid var(--c-success);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.b4s-confirm-banner .icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.b4s-confirm-banner h1 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--c-success);
}
.b4s-confirm-banner p { margin: 3px 0 0; font-size: .85rem; color: var(--c-ink-card-soft); }

/* Spectacle + spectateur côte à côte */
.b4s-confirm-top { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.b4s-confirm-top .b4s-modal-show {
  flex: 1 1 220px;
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 0;
}

.b4s-confirm-visitor {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--c-bg-card-tint);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: .85rem;
  color: var(--c-ink-card);
  flex: 1 1 260px;
}
.b4s-confirm-visitor i { color: var(--c-dominant); margin-top: 2px; flex-shrink: 0; }
.b4s-confirm-visitor > div { min-width: 0; } /* sans ça, un nom long force la boîte à déborder en mobile portrait (piège flex classique) */
.b4s-confirm-visitor strong { display: block; overflow-wrap: anywhere; margin-bottom: 3px; }
.b4s-confirm-visitor span { display: block; color: var(--c-ink-card-soft); overflow-wrap: anywhere; line-height: 1.5; }

.b4s-confirm-pdf {
  /* display:flex (et non inline-flex) : chaque lien de document occupe sa
     propre ligne -- le PDF de confirmation, puis le fichier calendrier.
     width:fit-content garde le soulignement de survol sur le seul texte au
     lieu de l'etendre a toute la largeur. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--c-dominant);
  font-weight: 600;
  font-size: .9rem;
}
/* Liens suivants : espacement resserre, le grand ecart n'est du qu'au
   premier lien qui se detache du bloc precedent. */
.b4s-confirm-pdf + .b4s-confirm-pdf { margin-top: 8px; }
.b4s-confirm-pdf:hover { text-decoration: underline; }

/* Tuile d'info personnalisable par client (ex. "portes ouvertes 30 min
   avant") — correspond à la table front_end_content (page="confirm")
   déjà utilisée dans resa_confirm.php, juste restylée. */
.b4s-confirm-info {
  margin-top: 22px;
  background: var(--c-bg-card-tint);
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: .82rem;
  color: var(--c-ink-card);
}
.b4s-confirm-info h4 {
  margin: 0 0 8px;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-ink-card-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.b4s-confirm-info ul { margin: 0; padding-left: 18px; font-size: .82rem; color: var(--c-ink-card); }
.b4s-confirm-info li { margin-bottom: 4px; }

.b4s-confirm-end { text-align: center; margin-top: 26px; }

/* Message de confirmation selon le mode de paiement (texte + liens) */
.b4s-confirm-message {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--c-border-card, #E1E5E4);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--c-ink-card);
}
.b4s-confirm-message a { color: var(--c-dominant); font-weight: 600; }

/* -------------------------------------------------------------------------
   16. Pages d'info (Distribution, Résumé, Tarifs, Accès)
   Pas de barre de progression (hors du tunnel de réservation), pas de
   colonne affiche — juste le contenu, dans la structure complète du site.
   ------------------------------------------------------------------------- */
.b4s-info-card {
  max-width: 920px;
  margin: 0 auto;
  background: var(--c-bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.b4s-info-card h1 { font-size: 1.2rem; margin-bottom: 20px; color: var(--c-ink-card); }

/* Distribution : grille de cartes, une par catégorie, qui s'adapte
   naturellement au nombre de catégories — plus simple et plus robuste que
   la logique de répartition en colonnes du script existant. */
.b4s-cast-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.b4s-cast-card {
  background: var(--c-bg-card-tint);
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-radius: 12px;
  padding: 16px 18px;
}
.b4s-cast-card h2 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-dominant);
  margin: 0 0 10px;
}
.b4s-cast-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--c-border-card, #E1E5E4);
  font-size: .9rem;
  color: var(--c-ink-card);
}
.b4s-cast-row:last-child { border-bottom: none; }
.b4s-cast-row .role { color: var(--c-ink-card-soft); }
.b4s-cast-row .name { font-weight: 600; text-align: right; }
.b4s-cast-row.is-single .name { text-align: left; }

/* Résumé / synopsis */
.b4s-synopsis { font-size: .95rem; line-height: 1.7; color: var(--c-ink-card); text-align: justify; }
.b4s-synopsis p { margin: 0 0 1em; }
.b4s-synopsis .duree { font-style: italic; color: var(--c-ink-card-soft); text-align: left; }

/* Tarifs : deux boîtes côte à côte (liste des prix / conditions spéciales) */
.b4s-tarif-present-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.b4s-tarif-present-grid h2 { font-size: .95rem; margin: 0 0 12px; color: var(--c-ink-card); }
.b4s-tarif-simple-list { display: flex; flex-direction: column; gap: 0; }
.b4s-tarif-simple-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border-card, #E1E5E4);
  font-size: .92rem;
  color: var(--c-ink-card);
}
.b4s-tarif-simple-row:last-child { border-bottom: none; }
.b4s-tarif-simple-row .price { font-weight: 700; }

/* Variante "tarifs regroupés" (tarif_cat.is_tarif_regroupement=1) — un
   sous-titre par groupe (ex. catégorie de salle), au-dessus de ses lignes. */
.b4s-tarif-group-title {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-dominant);
  margin: 18px 0 6px;
}
.b4s-tarif-group-title:first-child { margin-top: 0; }
.b4s-condition-card {
  background: var(--c-bg-card-tint);
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  font-size: .86rem;
}
.b4s-condition-card:last-child { margin-bottom: 0; }
.b4s-condition-card h3 { margin: 0 0 6px; font-size: .86rem; color: var(--c-dominant); }
.b4s-condition-card p { margin: 0; color: var(--c-ink-card-soft); line-height: 1.5; }

/* Accès : adresse + cartes (dimensions fixes imposées par l'API Google
   Maps — on ne les redimensionne pas, on scrolle le cadre au besoin,
   même logique que pour le plan de salle, mais ici un débordement
   horizontal localisé est normal pour ce type d'intégration). */
.b4s-access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.b4s-access-address {
  background: var(--c-bg-card-tint);
  border-radius: 12px;
  padding: 18px 20px;
}
.b4s-access-address h2 {
  font-size: 1.15rem;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-ink-card);
}
.b4s-access-address h2 i { color: var(--c-dominant); font-size: 1rem; }
.b4s-access-address p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: .92rem;
  color: var(--c-ink-card-soft);
  line-height: 1.6;
}
.b4s-access-address p i { color: var(--c-dominant); margin-top: 4px; flex-shrink: 0; width: 14px; text-align: center; }
.b4s-map-wrap { overflow-x: auto; margin-bottom: 16px; }
.b4s-map-wrap:last-child { margin-bottom: 0; }
.b4s-map-frame {
  width: 600px;
  height: 450px;
  border-radius: 12px;
  border: 1px solid var(--c-border-card, #E1E5E4);
  background: var(--c-bg-card-tint);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--c-ink-card-soft);
  font-size: .85rem;
  text-align: center;
}
.b4s-map-frame i { font-size: 2rem; color: var(--c-dominant); }

@media (max-width: 880px) {
  .b4s-tarif-present-grid,
  .b4s-access-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .b4s-info-card { padding: 18px 14px; }
  /* Sur mobile portrait : les deux blocs du haut (spectacle + visiteur)
     passent en pleine largeur pour que le nom du détenteur ait toute la place. */
  .b4s-confirm-top .b4s-modal-show,
  .b4s-confirm-visitor { flex: 1 1 100%; }
}

/* Variante rouge du bandeau (réutilise .b4s-confirm-banner) -- erreur de
   navigation (sessid.php). */
.b4s-confirm-banner.is-danger {
  background: color-mix(in srgb, var(--c-danger) 12%, var(--c-bg-card));
  border-color: var(--c-danger);
}
.b4s-confirm-banner.is-danger .icon { background: var(--c-danger); }
.b4s-confirm-banner.is-danger h1 { color: var(--c-danger); }

/* Variante orange -- confirmation d'annulation (action irréversible) */
.b4s-confirm-banner.is-warning {
  background: color-mix(in srgb, var(--c-warning) 12%, var(--c-bg-card));
  border-color: var(--c-warning);
}
.b4s-confirm-banner.is-warning .icon { background: var(--c-warning); }
.b4s-confirm-banner.is-warning h1 { color: var(--c-warning); }

/* Écran de code d'accès / authentification centre de réservation
   (accesscode_client.php) -- s'affiche AVANT le header (die() immédiat),
   donc un bloc autonome qui se centre lui-même plutôt que de dépendre de
   .b4s-page. */
.b4s-gate-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--c-bg);
}
.b4s-gate-card { max-width: 420px; width: 100%; text-align: center; }
.b4s-gate-card img { max-width: 160px; margin: 0 auto 18px; display: block; }
.b4s-gate-card h1 { font-size: 1.1rem; margin: 0 0 8px; color: var(--c-ink-card); }
.b4s-gate-card .desc { color: var(--c-ink-card-soft); font-size: .9rem; margin-bottom: 18px; line-height: 1.5; }
.b4s-gate-card .b4s-field { text-align: left; margin-bottom: 16px; }
.b4s-gate-card .b4s-btn { width: 100%; justify-content: center; }
.b4s-gate-card .footer-text { margin-top: 20px; font-size: .8rem; color: var(--c-ink-card-soft); }

/* Bandeau "vous êtes connecté comme..." (centre de réservation) -- s'affiche
   lui aussi hors de .b4s-page, juste avant le header normal. */
.b4s-resacenter-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--c-bg-card-tint);
  color: var(--c-ink);
  padding: 10px 20px;
  font-size: .85rem;
  border-bottom: 1px solid var(--c-border);
}

/* -------------------------------------------------------------------------
   18. Footer
   ------------------------------------------------------------------------- */
/* Le pied de page a SES PROPRES variables (--c-footer-bg / --c-footer-ink),
   definies dans style.css et style-dark.css. Il utilisait auparavant
   --c-ink comme FOND : en thema clair --c-ink est sombre et le rendu etait
   juste, mais en theme sombre --c-ink est presque blanc -- fond blanc et
   texte blanc, pied de page illisible. Une couleur de texte ne peut pas
   servir de couleur de fond dans un systeme a deux themes. */
.b4s-footer {
  background: var(--c-footer-bg, #14181C);
  color: var(--c-footer-ink, #FFFFFF);
  padding: 22px 24px;
  text-align: center;
  font-size: .85rem;
}
.b4s-footer a { color: var(--c-footer-ink, #FFFFFF); text-decoration: underline; text-decoration-color: var(--c-dominant); }
.b4s-footer .b4s-footer-links { margin-top: 6px; opacity: .7; }

/* ==========================================================================
   RESERVATION DE MASSE (resa_masse_list.php -- ETAPE 1)
   Liste multi-spectacles selectionnable + panneau de selection lateral.
   Reprend les tokens et les briques existantes (rep-tile, date-stamp, btn).
   ========================================================================== */

.b4s-masse-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}

/* --- Bande de date selectionnable (variante de .b4s-rep-tile) --- */
.b4s-masse-tile {
  grid-template-columns: 64px 46px 1fr 28px;
  gap: 14px;
  cursor: pointer;
  user-select: none;
}
.b4s-masse-tile:focus-visible { outline: 2px solid var(--c-dominant); outline-offset: 2px; }
.b4s-masse-tile.is-selected {
  border-color: var(--c-dominant);
  background: color-mix(in srgb, var(--c-dominant) 8%, var(--c-bg-card));
  box-shadow: var(--shadow-card-hover);
}

/* Vignette d'affiche dans la bande */
.b4s-masse-thumb {
  width: 46px;
  height: 62px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--c-bg-card-tint);
  border: 1px solid var(--c-border-card, #E1E5E4);
  flex: none;
}
.b4s-masse-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pastille de coche a droite de la bande */
.b4s-masse-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1.5px solid var(--c-border-card, #E1E5E4);
  color: transparent;
  background: transparent;
  font-size: .7rem;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.b4s-masse-tile.is-selected .b4s-masse-check {
  background: var(--c-dominant);
  border-color: var(--c-dominant);
  color: var(--c-dominant-contrast);
}

/* --- Panneau de selection --- */
.b4s-masse-panel {
  background: var(--c-bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px;
  position: sticky;
  top: 96px;
}
.b4s-masse-panel h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  margin: 0 0 14px;
  color: var(--c-ink-card);
}
.b4s-masse-panel h2 i { color: var(--c-dominant); }
.b4s-masse-count {
  margin-left: auto;
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-dominant);
  color: var(--c-dominant-contrast);
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
}

.b4s-masse-sel-list { display: flex; flex-direction: column; gap: 10px; }
.b4s-masse-empty { color: var(--c-ink-card-soft); font-size: .88rem; text-align: center; padding: 18px 4px; }

.b4s-masse-sel-row {
  display: grid;
  grid-template-columns: auto 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-radius: 10px;
  background: var(--c-bg-card-tint);
}
.b4s-masse-sel-row .b4s-masse-thumb { width: 34px; height: 46px; }
.b4s-masse-sel-title { font-size: .85rem; font-weight: 600; color: var(--c-ink-card); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b4s-masse-remove {
  border: none;
  background: transparent;
  color: var(--c-ink-card-soft);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color .15s ease;
}
.b4s-masse-remove:hover { color: var(--c-danger); }

.b4s-masse-error {
  display: none;
  margin: 12px 0 0;
  font-size: .82rem;
  color: var(--c-danger);
}
.b4s-masse-error.is-shown { display: block; }
.b4s-masse-error i { margin-right: 6px; }

.b4s-masse-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.b4s-masse-actions .b4s-btn { justify-content: center; }

/* --- Bouton flottant mobile (meme principe que .b4s-plan-float-cta) --- */
.b4s-masse-float {
  display: none;
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  border: none;
  background: var(--c-dominant);
  color: var(--c-dominant-contrast);
  font-weight: 600;
  font-size: .84rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  cursor: pointer;
}
.b4s-masse-float.is-visible { opacity: 1; pointer-events: auto; }
.b4s-masse-float-count {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  font-size: .78rem;
  font-weight: 700;
}

/* --- Responsive --- */
@media (max-width: 880px) {
  .b4s-masse-layout { grid-template-columns: 1fr; }
  .b4s-masse-panel { position: static; top: auto; }
  .b4s-masse-float { display: flex; }
}
@media (max-width: 520px) {
  .b4s-masse-tile { grid-template-columns: 52px 38px 1fr 24px; gap: 10px; padding: 12px 14px; }
  .b4s-masse-thumb { width: 38px; height: 52px; }
}

/* Reservation de masse : indicateur de dispo + date non selectionnable (COMPLET / hors fenetre) */
.b4s-masse-avail { margin-top: 6px; }
/* Date non selectionnable. L'opacite seule ne fonctionne pas dans les deux
   themes : en clair elle delave vers le blanc et se lit comme "eteint", en
   sombre elle fond la tuile dans le fond de page et la rend presque
   indiscernable d'une tuile active. On garde donc un CONTRASTE de fond et de
   bordure explicite (--c-bg-card-muted / --c-border-muted, definis par
   client), une bordure en tirets qui se voit quel que soit le theme, et une
   desaturation de la vignette. */
.b4s-masse-tile.is-disabled {
  cursor: not-allowed;
  opacity: 1;
  background: var(--c-bg-card-muted, #EDEFEE);
  border-style: dashed;
  border-color: var(--c-border-muted, #C9D1CF);
  box-shadow: none;
  color: var(--c-ink-card-soft);
}
.b4s-masse-tile.is-disabled .b4s-masse-thumb { filter: grayscale(1); opacity: .65; }
.b4s-masse-tile.is-disabled h3,
.b4s-masse-tile.is-disabled .b4s-masse-sel-title { color: var(--c-ink-card-soft); }
.b4s-masse-tile.is-disabled:hover {
  transform: none;
  box-shadow: var(--shadow-card);
  border-color: var(--c-border-card, #E1E5E4);
}
.b4s-masse-tile.is-disabled .b4s-masse-check { display: none; }

/* ==========================================================================
   RESERVATION DE MASSE -- ETAPE 2 (resa_masse_seq.php) : cartes de sequence
   ========================================================================== */
.b4s-masse-seq { display: flex; flex-direction: column; gap: 14px; }

.b4s-seqcard {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-left: 4px solid var(--c-border-card, #E1E5E4);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 18px;
}
.b4s-seqcard--ok   { border-left-color: var(--c-success); }
.b4s-seqcard--warn { border-left-color: var(--c-orange); }
.b4s-seqcard--ko   { border-left-color: var(--c-danger); }

.b4s-seqcard-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.b4s-seqcard-head > .b4s-date-stamp,
.b4s-seqcard-head > .b4s-masse-thumb { flex: none; }
.b4s-seqcard-head > .b4s-rep-info { flex: 1 1 150px; min-width: 0; }
.b4s-seqcard-statuses {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  margin-left: auto;
}
.b4s-seqcard-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 600;
}
.b4s-seqcard .b4s-seqcard-status--ok   { color: var(--c-success); }
.b4s-seqcard .b4s-seqcard-status--warn { color: var(--c-orange); }
.b4s-seqcard .b4s-seqcard-status--ko   { color: var(--c-danger); }
.b4s-seqcard .b4s-seqcard-status--info { color: var(--c-ink-card-soft); }
.b4s-seqcard--info { border-left-color: var(--c-ink-card-soft); }
.b4s-seqcard-trash {
  flex: none;
  border: none;
  background: transparent;
  color: var(--c-ink-card-soft);
  font-size: 1rem;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.b4s-seqcard-trash:hover { color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 10%, transparent); }
/* Date bloquee (quantite indisponible) : barree + eteinte.
   Meme raisonnement que .b4s-masse-tile.is-disabled ci-dessus -- on ne compte
   pas sur l'opacite, qui ne distingue rien en theme sombre. */
.b4s-seqcard--blocked .b4s-rep-venue,
.b4s-seqcard--blocked .b4s-date-stamp .b4s-date-day { text-decoration: line-through; }
.b4s-seqcard--blocked {
  background: var(--c-bg-card-muted, #EDEFEE);
  border-style: dashed;
  border-color: var(--c-border-muted, #C9D1CF);
  box-shadow: none;
}
.b4s-seqcard--blocked .b4s-masse-thumb { filter: grayscale(1); opacity: .65; }
.b4s-seqcard--blocked .b4s-date-stamp,
.b4s-seqcard--blocked .b4s-rep-info { color: var(--c-ink-card-soft); }

.b4s-seqcard-lines {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--c-border-card, #E1E5E4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.b4s-seqcard-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: .86rem;
  color: var(--c-ink-card);
}
.b4s-seqcard-line i { color: var(--c-dominant); margin-right: 4px; }
.b4s-seqcard-flag {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-orange);
}

@media (max-width: 520px) {
  .b4s-seqcard-statuses { align-items: flex-start; margin-left: 0; flex-basis: 100%; order: 5; }
  .b4s-seqcard .b4s-masse-thumb { width: 38px; height: 52px; }
}

/* Reservation de masse -- ETAPE 2 : bulle coordonnees spectateur (cadre visible
   hors carte, contrairement a .b4s-confirm-visitor qui n'a qu'une teinte) */
.b4s-seq-visitor {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 12px 16px;
  font-size: .88rem;
  color: var(--c-ink-card);
}
.b4s-seq-visitor > i { color: var(--c-dominant); margin-top: 2px; flex-shrink: 0; }
.b4s-seq-visitor > div { min-width: 0; }
.b4s-seq-visitor strong { display: block; overflow-wrap: anywhere; margin-bottom: 3px; }
.b4s-seq-visitor span { display: block; color: var(--c-ink-card-soft); line-height: 1.5; overflow-wrap: anywhere; }
.b4s-seq-visitor span i { color: var(--c-dominant); margin-right: 4px; }

/* Reservation de masse -- ETAPE 2 (2b) : liste deroulante de correction de tarif */
.b4s-tarif-select {
  font-family: inherit;
  font-size: .85rem;
  padding: 4px 8px;
  border: 1px solid var(--c-orange);
  border-radius: 8px;
  background: var(--c-bg-card);
  color: var(--c-ink-card);
  max-width: 100%;
}
.b4s-tarif-select:disabled { opacity: .6; }
.b4s-seqcard-ok-inline { color: var(--c-success); margin-left: 2px; }

/* Reservation de masse -- ETAPE 2 (2b) : choix des places (bouton + overlay) */
.b4s-seqcard-statuses .b4s-seq-choose {
  margin-top: 6px;
  font-size: .8rem;
  padding: 7px 14px;
  white-space: nowrap;
}

.b4s-seat-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.55);
}
.b4s-seat-overlay[hidden] { display: none; }
.b4s-seat-dialog {
  background: var(--c-bg-card);
  color: var(--c-ink-card);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  width: 100%;
  max-width: 440px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 18px;
}
.b4s-seat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.b4s-seat-head h3 { margin: 0; font-size: 1.1rem; }
.b4s-seat-close {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--c-ink-card-soft);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.b4s-seat-close:hover { color: var(--c-ink-card); }
.b4s-seat-hint { font-size: .85rem; color: var(--c-ink-card-soft); margin: 0 0 12px; }
.b4s-seat-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.b4s-seat-loading, .b4s-seat-empty { font-size: .88rem; color: var(--c-ink-card-soft); text-align: center; padding: 16px 4px; }
.b4s-seat-prop {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-radius: 10px;
  font-size: .9rem;
  transition: border-color .15s ease, background .15s ease;
}
.b4s-seat-prop:hover { border-color: var(--c-dominant); }
.b4s-seat-prop-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 12px 4px 12px 14px;
  cursor: pointer;
}
.b4s-seat-prop input { accent-color: var(--c-dominant); flex: none; }
.b4s-seat-prop:has(input:checked) { border-color: var(--c-dominant); background: color-mix(in srgb, var(--c-dominant) 8%, var(--c-bg-card)); }
.b4s-seat-loupe {
  flex: none;
  border: none;
  background: transparent;
  color: var(--c-dominant);
  font-size: 1rem;
  cursor: pointer;
  padding: 10px 14px;
  line-height: 1;
  border-left: 1px solid var(--c-border-card, #E1E5E4);
  align-self: stretch;
}
.b4s-seat-loupe:hover { background: color-mix(in srgb, var(--c-dominant) 10%, transparent); }
.b4s-seat-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.b4s-seat-actions .b4s-btn { justify-content: center; }

/* Reservation de masse : la modale d'apercu du plan doit passer au-dessus de l'overlay de propositions */
#b4s_plan_modal { z-index: 210; }

/* Reservation de masse -- ETAPE 2 : mise en evidence des dates non resolues au clic "Etape suivante" */
.b4s-seqcard.is-flagged { outline: 2px solid var(--c-danger); outline-offset: 2px; }
.b4s-seqcard-redflag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-danger);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* =========================================================================
   COMPTE A REBOURS DE LA RESERVATION (base2/b4s_resa_timer.php)
   Le bloc est un enfant direct de .b4s-progress-inner, place entre le
   recapitulatif et les etapes -- donc au milieu de la barre.
   ========================================================================= */
.b4s-progress-timer { display: flex; align-items: center; flex-shrink: 0; }
.b4s-progress-chip--timer {
  font-family: var(--font-mono);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.b4s-progress-chip--timer i { font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands"; }
/* Cinq dernieres minutes : passage a l'orange, sans clignotement (le
   compteur n'est pas une alarme, juste un reperage). */
.b4s-progress-chip--timer.is-warn {
  color: var(--c-warning);
  border-color: var(--c-warning);
}
.b4s-progress-chip--timer.is-over {
  color: #fff;
  background: var(--c-danger);
  border-color: var(--c-danger);
}

/* Ecran de fin de session : recouvre toute la page et bloque l'interaction
   une fois les 30 minutes ecoulees, jusqu'au retour a l'accueil. */
.b4s-timeout-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,.72);
  /* Neutralise toute opacite heritee : l'overlay est deplace sur <body> par
     b4s_resa_timer.php, cette regle est la ceinture en plus des bretelles. */
  opacity: 1 !important;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.b4s-timeout-overlay.is-open { display: flex; }
.b4s-timeout-box {
  /* Blanc opaque en dur, volontairement hors variables de theme : cet ecran
     doit rester lisible quel que soit le client (clair ou sombre) et ne
     jamais laisser transparaitre la page qu'il bloque. */
  background: #ffffff;
  color: #1c1f1e;
  border-radius: 14px;
  padding: 28px 26px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 18px 46px rgba(0,0,0,.3);
}
.b4s-timeout-box .icon {
  width: 54px; height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fdeaea;
  color: #c0392b;
  font-size: 1.35rem;
}
.b4s-timeout-box h2 { font-size: 1.15rem; margin: 0 0 12px; color: #1c1f1e; }
.b4s-timeout-box p { font-size: .9rem; line-height: 1.55; color: #4a5250; margin: 0 0 10px; }
.b4s-timeout-box .b4s-form-actions { justify-content: center; margin-top: 18px; }

@media (max-width: 700px) {
  /* Le compteur reste visible en mobile : c'est l'information la plus
     sensible de la barre. Il passe simplement en fin de ligne du recap. */
  .b4s-progress-timer { order: 3; margin-left: auto; }
}

/* =========================================================================
   COMPOSANTS DE PLACE : NIVEAU / SECTEUR / ZONE
   Rendu produit par b4s_seats_html() (fonction.php), utilise par la modale
   de recapitulatif et par la page de confirmation.
   Le composant actif le plus englobant (niveau, ou a defaut secteur, ou a
   defaut zone) forme un cadre autour des lignes rang/place. Les composants
   restants deviennent des bulles blanches separees d'un point median,
   exactement comme la bulle de rang existante.
   ========================================================================= */
.b4s-seats-group {
  border: 1px solid var(--c-border-card, #E1E5E4);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.b4s-seats-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-ink-card-soft);
  padding: 0 2px 2px;
}
.b4s-seats-group-head i { color: var(--c-dominant); font-size: .9rem; }
/* Le point de separation entre deux bulles d'une meme ligne. */
.b4s-confirm-seats-row .row-dot {
  color: var(--c-ink-card-soft);
  font-weight: 700;
  flex-shrink: 0;
  align-self: center;
}

/* Ligne de promotion dans les recapitulatifs (modale de la barre de
   progression, modale de confirmation de resa3.php, page de confirmation).
   Meme ligne que celle ajoutee par resa2.php sous un tarif promotionnel :
   montant negatif, deduit du total. */
.b4s-modal-line--promo {
  color: var(--c-success, #1E7A54);
}
.b4s-modal-line--promo i {
  margin-right: 2px;
  font-size: .9em;
}

/* Liens inseres dans la bulle "Bon a savoir" via les jetons
   [lien_annulation] et [email:...] (voir base2/b4s_tips_format.php).
   Le texte de la bulle est volontairement discret : le lien doit s'en
   detacher sans devenir criard. */
.b4s-confirm-info .b4s-tips-link {
  color: var(--c-dominant);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.b4s-confirm-info .b4s-tips-link:hover { filter: brightness(1.15); }