/* ── BETRAILO Event Sales – Public CSS ── */

/* Jeu de valeurs commun a tous les blocs du plugin. Les couleurs etaient
   auparavant recopiees en dur dans chaque regle et dans le HTML : une seule
   retouche de charte demandait alors de passer partout. */
.bes-event-wrapper,
.bes-modal-overlay,
.bes-standalone {
  --bes-ink:    #142440;
  --bes-accent: #1a3a6b;
  --bes-muted:  #66707f;
  --bes-line:   #e4e7ec;
  --bes-soft:   #f6f8fb;
  --bes-danger: #b42318;
  --bes-ok:     #146c43;
  --bes-radius: 10px;
}

/* Le crochet woocommerce_after_add_to_cart_button place ce bloc dans le
   <form class="cart">, que la plupart des themes mettent en flex pour aligner la
   quantite et le bouton d'ajout. Sans ces trois declarations, le bloc devient un
   element de cette rangee, se dimensionne sur son contenu et n'occupe jamais toute
   la largeur, quel que soit le width:100% pose sur le bouton. */
.bes-event-wrapper {
  margin: 14px 0;
  width: 100%;
  flex: 1 0 100%;
  clear: both;
}

/* Le bouton prend la place restante, l'icone d'info garde sa largeur et sa hauteur
   se cale sur celle du bouton grace a align-items: stretch. */
.bes-btn-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.bes-btn-row .bes-btn-event {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Masque a l'ecran, lu par les lecteurs d'ecran. */
.bes-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* BUTTON */
/* Les !important tiennent tete aux themes WooCommerce, qui stylent tous les
   <button> de la fiche produit : sans eux le theme imposait sa couleur et une
   hauteur fixe, qui tronquait la deuxieme ligne du libelle. La couleur choisie
   dans les parametres passe par une variable CSS pour rester prioritaire. */
.bes-btn-event {
  display: block;
  width: 100%;
  padding: 13px 20px;
  background: var(--bes-btn-color, #d97706) !important;
  color: #fff !important;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: filter .15s, transform .1s;
  /* Le libelle est saisi par l'administrateur : il peut tenir sur deux lignes. */
  height: auto !important;
  min-height: 0;
  line-height: 1.35;
  white-space: normal;
  text-align: center;
  box-sizing: border-box;
}
.bes-btn-event:hover { filter: brightness(1.07); transform: translateY(-1px); }
.bes-btn-event:active { transform: translateY(0); }
.bes-btn-event:focus-visible { outline: 2px solid var(--bes-accent); outline-offset: 2px; }
.bes-btn-event:disabled, .bes-btn-disabled { opacity: .55; cursor: not-allowed; background: #8a8f98 !important; transform: none; }
.bes-btn-full { background: #6b1a1a !important; }
.bes-disabled-hint { display: block; font-size: 12px; color: var(--bes-muted); margin-top: 6px; }

/* DETAILS REPLIABLES */
/* Les !important sont indispensables ici : les themes WooCommerce imposent une
   largeur minimale a tous les <button> du formulaire du panier. Sans eux, l'icone
   s'etirait jusqu'a prendre la moitie de la rangee et comprimait le bouton
   principal, dont le libelle retombait sur trois lignes. */
.bes-info-toggle {
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  background: #fff;
  border: 1px solid #ccd2da;
  border-radius: 6px;
  color: var(--bes-accent);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.bes-info-toggle:hover { background: var(--bes-soft); border-color: var(--bes-accent); }
.bes-info-toggle[aria-expanded="true"] { background: var(--bes-accent); border-color: var(--bes-accent); color: #fff; }
.bes-info-toggle:focus-visible { outline: 2px solid var(--bes-accent); outline-offset: 2px; }
.bes-info-popup {
  background: var(--bes-soft);
  clear: both;
  border: 1px solid var(--bes-line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 10px;
  font-size: 13px;
  color: #3c4656;
  line-height: 1.55;
}
.bes-info-popup > p { margin: 0 0 10px; }
.bes-info-popup > p:only-child { margin-bottom: 0; }
.bes-info-more {
  display: inline-block;
  margin-top: 10px;
  color: var(--bes-accent);
  font-weight: 600;
  text-decoration: underline;
}
.bes-info-more:hover { text-decoration: none; }

/* BADGE DATE + COMPTE A REBOURS */
.bes-event-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
}
.bes-badge-date { color: var(--bes-ink); font-weight: 600; }
.bes-badge-timer {
  background: var(--bes-soft);
  border: 1px solid var(--bes-line);
  color: var(--bes-muted);
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
}
.bes-badge-timer strong { color: var(--bes-ink); }

/* JAUGE DES PLACES */
.bes-places-bar { margin-top: 10px; }
.bes-places-label { font-size: 12px; margin-bottom: 5px; color: var(--bes-muted); }
.bes-places-alert { color: var(--bes-danger); font-weight: 600; }
.bes-places-ok { color: var(--bes-muted); }
.bes-places-track {
  width: 100%;
  height: 4px;
  background: var(--bes-line);
  border-radius: 2px;
  overflow: hidden;
}
.bes-places-fill { height: 100%; border-radius: 2px; transition: width .4s ease; }

/* ── MODALES ──────────────────────────────────────────────────────────────── */
.bes-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 18, 30, .6);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.5;
  color: var(--bes-ink);
}
.bes-modal-overlay * { box-sizing: border-box; }

/* L'en-tete ne defile pas : le corps est le seul element scrollable, ce qui
   garde les onglets et la fermeture atteignables sur un ecran court. */
.bes-modal {
  background: #fff;
  border-radius: var(--bes-radius);
  max-width: 620px;
  width: 100%;
  max-height: min(92vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 60px rgba(12, 18, 30, .28);
  animation: besSlideIn .22s ease;
}
.bes-modal-narrow { max-width: 480px; }
@keyframes besSlideIn {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bes-modal { animation: none; }
}

.bes-modal-head {
  flex: 0 0 auto;
  padding: 20px 24px 0;
  border-bottom: 1px solid var(--bes-line);
  position: relative;
}
.bes-modal-eyebrow {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bes-muted);
}
.bes-modal-heading {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bes-ink);
  padding-right: 36px;
}
.bes-modal-head-success .bes-modal-heading { color: var(--bes-ok); }

.bes-modal-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--bes-muted);
  transition: background .15s, color .15s;
}
.bes-modal-close:hover { background: var(--bes-soft); color: var(--bes-ink); }
.bes-modal-close:focus-visible { outline: 2px solid var(--bes-accent); outline-offset: 1px; }

/* ONGLETS */
.bes-modal-tabs { display: flex; gap: 22px; margin-bottom: -1px; }
.bes-tab {
  padding: 0 0 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--bes-muted);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.bes-tab:hover { color: var(--bes-ink); }
.bes-tab.active { color: var(--bes-accent); border-bottom-color: var(--bes-accent); }
.bes-tab:focus-visible { outline: 2px solid var(--bes-accent); outline-offset: 2px; }
.bes-tab-content { display: none; }
.bes-tab-content.active { display: block; }

/* CORPS DEFILANT */
/* scrollbar-gutter reserve la place de la barre en permanence : sans elle, son
   apparition decalait le contenu de quelques pixels a l'ouverture. La barre est
   aussi amincie et depouillee de sa piste, pour ne pas trancher avec la modale. */
.bes-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 24px 24px;
  scrollbar-width: thin;
  scrollbar-color: #cbd2dc transparent;
  scrollbar-gutter: stable;
}
.bes-modal-body::-webkit-scrollbar { width: 10px; }
.bes-modal-body::-webkit-scrollbar-track { background: transparent; }
.bes-modal-body::-webkit-scrollbar-thumb {
  background: #cbd2dc;
  border: 3px solid #fff;
  border-radius: 99px;
}
.bes-modal-body::-webkit-scrollbar-thumb:hover { background: #aab3c0; }

.bes-lead { margin: 0 0 16px; color: #3c4656; }

/* ── LISTES LIBELLE / VALEUR ──────────────────────────────────────────────── */
.bes-summary-list { margin: 0; padding: 0; }
.bes-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
  gap: 2px 16px;
  padding: 6px 0;
  border-top: 1px solid var(--bes-line);
}
.bes-summary-row:first-child { border-top: none; padding-top: 0; }
.bes-summary-row dt { margin: 0; color: var(--bes-muted); font-size: 13px; }
.bes-summary-row dd { margin: 0; color: var(--bes-ink); font-weight: 500; overflow-wrap: anywhere; }
.bes-summary-row-accent dd { color: var(--bes-accent); font-weight: 700; font-size: 16px; }
.bes-summary-row dd .woocommerce-Price-amount { font-weight: inherit; color: inherit; }
.bes-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; letter-spacing: .02em; }
.bes-pending { color: var(--bes-muted); font-style: italic; font-weight: 400; }

/* RECAPITULATIF PRODUIT */
.bes-product-summary {
  background: var(--bes-soft);
  border: 1px solid var(--bes-line);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.bes-summary-name {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bes-ink);
}
.bes-summary-alert { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--bes-danger); }

/* FORMULAIRE */
.bes-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.bes-full-width { grid-column: 1 / -1; }
.bes-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #3c4656;
  margin-bottom: 5px;
}
.bes-form-group abbr { color: var(--bes-muted); text-decoration: none; border: none; }
.bes-form-group input,
.bes-form-group textarea,
.bes-form-group select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #ccd2da;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  color: var(--bes-ink);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.bes-form-group input::placeholder { color: #9aa3b0; }
.bes-form-group input:focus,
.bes-form-group textarea:focus,
.bes-form-group select:focus {
  border-color: var(--bes-accent);
  box-shadow: 0 0 0 3px rgba(26, 58, 107, .12);
  outline: none;
}
.bes-form-group input.error { border-color: var(--bes-danger); }

/* PANNEAU BANCAIRE */
.bes-panel {
  border: 1px solid var(--bes-line);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.bes-panel-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bes-muted);
}

/* CONDITIONS */
.bes-terms {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: #3c4656;
  line-height: 1.5;
  margin-bottom: 18px;
}
.bes-terms input { margin: 2px 0 0; flex: 0 0 auto; }
.bes-terms label { margin: 0; font-weight: 400; }
.bes-terms a { color: var(--bes-accent); }

/* MESSAGES */
.bes-error {
  background: #fef3f2;
  border: 1px solid #f5c6c0;
  color: var(--bes-danger);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 14px;
}
.bes-notice-success {
  background: #ecfdf3;
  border: 1px solid #b9e6c8;
  color: var(--bes-ok);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin: 0 0 14px;
}

/* BOUTON D'ENVOI */
.bes-submit-btn {
  width: 100%;
  padding: 13px;
  background: var(--bes-accent);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: filter .15s;
}
.bes-submit-btn:hover { filter: brightness(1.12); }
.bes-submit-btn:focus-visible { outline: 2px solid var(--bes-accent); outline-offset: 2px; }
.bes-submit-btn:disabled { opacity: .6; cursor: wait; filter: none; }

/* CONFIRMATION */
#bes-success-content { margin-bottom: 18px; }
.bes-success-intro { margin: 16px 0 10px; color: #3c4656; }
.bes-success-note { margin: 14px 0 0; font-size: 13px; color: var(--bes-muted); }

/* LIEU / CARTE */
.bes-venue-info { margin-bottom: 16px; }
.bes-venue-info h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--bes-ink); }
.bes-venue-info p { margin: 0; color: var(--bes-muted); font-size: 14px; }
.bes-map { height: 260px; border-radius: 8px; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--bes-line); }
.bes-map-link {
  display: inline-block;
  border: 1px solid var(--bes-accent);
  color: var(--bes-accent);
  padding: 9px 18px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.bes-map-link:hover { background: var(--bes-accent); color: #fff; }

/* GALERIE */
.bes-gallery { margin-top: 20px; }
.bes-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bes-gallery-item {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: block;
}
.bes-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; display: block; }
.bes-gallery-item:hover img { transform: scale(1.05); }
.bes-gallery-item:focus-visible { outline: 2px solid var(--bes-accent); outline-offset: 2px; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
/* Sous 640 px la modale occupe le bas de l'ecran comme une feuille : sur un
   telephone, une boite centree laissait ses bords hors champ des que le clavier
   virtuel s'ouvrait, et la fermeture partait avec. */
@media (max-width: 640px) {
  .bes-modal-overlay { padding: 0; align-items: flex-end; }
  .bes-modal {
    max-width: none;
    max-height: 92dvh;
    border-radius: 14px 14px 0 0;
    animation: besSlideUp .22s ease;
  }
  @keyframes besSlideUp {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  .bes-modal-head { padding: 16px 18px 0; }
  .bes-modal-heading { font-size: 18px; margin-bottom: 12px; }
  .bes-modal-body { padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
  .bes-form-grid { grid-template-columns: 1fr; gap: 12px; }
  .bes-gallery-grid { grid-template-columns: 1fr 1fr; }
  /* Libelle au-dessus de la valeur : a cette largeur, deux colonnes coupaient
     les IBAN et les noms de produit au milieu d'un mot. */
  .bes-summary-row { grid-template-columns: 1fr; gap: 1px; }
  .bes-summary-row dt { font-size: 12px; }
  .bes-modal-tabs { gap: 18px; }
}

/* ── PAGE DE RESERVATION AUTONOME [bes_reservation_form] ── */
.bes-standalone { margin: 28px 0; }
.bes-standalone-title { font-size: 22px; font-weight: 600; color: var(--bes-ink); margin: 0 0 20px; }
.bes-standalone-empty { color: var(--bes-muted); font-style: italic; }
.bes-standalone-grid { display: grid; gap: 20px; }
.bes-standalone-card {
  border: 1px solid var(--bes-line);
  border-radius: var(--bes-radius);
  padding: 16px;
  background: #fff;
  transition: box-shadow .2s;
}
.bes-standalone-card:hover { box-shadow: 0 6px 20px rgba(12, 18, 30, .08); }
.bes-standalone-thumb { display: block; margin-bottom: 12px; }
.bes-standalone-thumb img { width: 100%; height: auto; border-radius: 6px; display: block; }
.bes-standalone-name { font-size: 15px; font-weight: 600; margin: 0 0 4px; line-height: 1.35; }
.bes-standalone-name a { color: var(--bes-ink); text-decoration: none; }
.bes-standalone-name a:hover { color: var(--bes-accent); }
.bes-standalone-price { font-size: 14px; color: var(--bes-muted); margin-bottom: 10px; }

@media (max-width: 782px) {
  .bes-standalone-grid { grid-template-columns: 1fr !important; }
}

/* La lightbox est masquee par defaut ; besOpenLightbox() la passe en flex.
   Ces regles etaient inline, apres un second "display" qui annulait le
   "display:none" et laissait un voile noir en permanence sur la page. */
#bes-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 20, .92);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  cursor: zoom-out;
}