/**
 * ==============================================================================
 * OKLR VR - STYLES DU MODULE DE RÉSERVATION NATIVE & DÉCORATIONS SAISONNIÈRES
 * ==============================================================================
 */

/* --- DÉCORATIONS SAISONNIÈRES : HALLOWEEN & NOËL --- */
.halloween-decoration-corner {
  position: fixed;
  font-size: 2.8rem;
  z-index: 9999;
  pointer-events: none;
  filter: drop-shadow(0 0 16px rgba(255, 110, 20, 0.8));
  animation: pumpkinFloat 3.5s ease-in-out infinite;
}
.halloween-decoration-corner.top-left {
  top: 18px;
  left: 18px;
}
.halloween-decoration-corner.top-right {
  top: 18px;
  right: 18px;
  animation-delay: 1.5s;
}
@keyframes pumpkinFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

/* Flocons de neige CSS pour Noël - Chute Organique & Aléatoire */
.christmas-snowflakes {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 9998 !important;
  overflow: hidden !important;
}
.snowflake {
  position: absolute !important;
  top: -12% !important;
  color: #ffffff !important;
  pointer-events: none !important;
  user-select: none !important;
  will-change: transform, opacity !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9) !important;
}

.snowflake:nth-child(1)  { left: 4%;  font-size: 1.4rem; opacity: 0.9;  animation: snowSway1 8.5s ease-in-out infinite 0s; }
.snowflake:nth-child(2)  { left: 11%; font-size: 0.75rem; opacity: 0.6; animation: snowSway2 13s ease-in-out infinite 2.2s; filter: blur(0.5px); }
.snowflake:nth-child(3)  { left: 19%; font-size: 1.6rem; opacity: 0.85; animation: snowSway3 9.8s ease-in-out infinite 4.1s; }
.snowflake:nth-child(4)  { left: 27%; font-size: 1.0rem; opacity: 0.7;  animation: snowSway4 11.2s ease-in-out infinite 1.4s; }
.snowflake:nth-child(5)  { left: 34%; font-size: 1.5rem; opacity: 0.95; animation: snowSway1 7.8s ease-in-out infinite 3.5s; }
.snowflake:nth-child(6)  { left: 42%; font-size: 0.8rem; opacity: 0.55; animation: snowSway3 14s ease-in-out infinite 0.8s; filter: blur(0.8px); }
.snowflake:nth-child(7)  { left: 49%; font-size: 1.25rem; opacity: 0.8; animation: snowSway2 10.5s ease-in-out infinite 5.3s; }
.snowflake:nth-child(8)  { left: 57%; font-size: 0.9rem; opacity: 0.7;  animation: snowSway4 12.4s ease-in-out infinite 2.9s; }
.snowflake:nth-child(9)  { left: 64%; font-size: 1.7rem; opacity: 0.9;  animation: snowSway1 9.0s ease-in-out infinite 4.6s; }
.snowflake:nth-child(10) { left: 72%; font-size: 0.7rem; opacity: 0.5;  animation: snowSway2 15s ease-in-out infinite 1.1s; filter: blur(1px); }
.snowflake:nth-child(11) { left: 79%; font-size: 1.35rem; opacity: 0.85; animation: snowSway3 8.2s ease-in-out infinite 3.7s; }
.snowflake:nth-child(12) { left: 86%; font-size: 1.05rem; opacity: 0.75; animation: snowSway4 10.8s ease-in-out infinite 0.3s; }
.snowflake:nth-child(13) { left: 93%; font-size: 1.55rem; opacity: 0.9;  animation: snowSway1 9.4s ease-in-out infinite 5.8s; }
.snowflake:nth-child(14) { left: 8%;  font-size: 0.85rem; opacity: 0.65; animation: snowSway3 11.7s ease-in-out infinite 6.5s; }
.snowflake:nth-child(15) { left: 38%; font-size: 1.15rem; opacity: 0.8;  animation: snowSway2 10.1s ease-in-out infinite 4.9s; }
.snowflake:nth-child(16) { left: 68%; font-size: 0.95rem; opacity: 0.7;  animation: snowSway4 13.5s ease-in-out infinite 7.2s; }
.snowflake:nth-child(17) { left: 83%; font-size: 1.45rem; opacity: 0.85; animation: snowSway1 8.9s ease-in-out infinite 2.5s; }
.snowflake:nth-child(18) { left: 97%; font-size: 0.75rem; opacity: 0.6;  animation: snowSway3 14.5s ease-in-out infinite 3.9s; }

@keyframes snowSway1 {
  0%   { transform: translate3d(0, -5vh, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.9; transform: translate3d(-18px, 10vh, 0) rotate(25deg); }
  35%  { transform: translate3d(32px, 35vh, 0) rotate(70deg); }
  65%  { transform: translate3d(-24px, 68vh, 0) rotate(130deg); }
  85%  { opacity: 0.9; }
  100% { transform: translate3d(40px, 115vh, 0) rotate(190deg); opacity: 0; }
}

@keyframes snowSway2 {
  0%   { transform: translate3d(0, -5vh, 0) rotate(0deg); opacity: 0; }
  15%  { opacity: 0.8; transform: translate3d(26px, 15vh, 0) rotate(-35deg); }
  45%  { transform: translate3d(-38px, 48vh, 0) rotate(-90deg); }
  75%  { transform: translate3d(20px, 80vh, 0) rotate(-150deg); }
  90%  { opacity: 0.8; }
  100% { transform: translate3d(-15px, 115vh, 0) rotate(-220deg); opacity: 0; }
}

@keyframes snowSway3 {
  0%   { transform: translate3d(0, -5vh, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: 0.95; transform: translate3d(-12px, 12vh, 0) rotate(15deg); }
  40%  { transform: translate3d(18px, 42vh, 0) rotate(45deg); }
  70%  { transform: translate3d(-16px, 75vh, 0) rotate(80deg); }
  88%  { opacity: 0.95; }
  100% { transform: translate3d(25px, 115vh, 0) rotate(120deg); opacity: 0; }
}

@keyframes snowSway4 {
  0%   { transform: translate3d(0, -5vh, 0) rotate(0deg); opacity: 0; }
  18%  { opacity: 0.85; transform: translate3d(35px, 20vh, 0) rotate(-20deg); }
  50%  { transform: translate3d(-22px, 55vh, 0) rotate(-60deg); }
  80%  { transform: translate3d(28px, 88vh, 0) rotate(-110deg); }
  92%  { opacity: 0.85; }
  100% { transform: translate3d(-30px, 115vh, 0) rotate(-160deg); opacity: 0; }
}

.christmas-decoration-corner {
  position: fixed;
  font-size: 2.8rem;
  z-index: 9999;
  pointer-events: none;
  filter: drop-shadow(0 0 16px rgba(42, 157, 143, 0.8));
  animation: treeGlow 3s ease-in-out infinite alternate;
}
.christmas-decoration-corner.top-left {
  top: 18px;
  left: 18px;
}
.christmas-decoration-corner.top-right {
  top: 18px;
  right: 18px;
  filter: drop-shadow(0 0 16px rgba(255, 209, 102, 0.8));
}
@keyframes treeGlow {
  0% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(230, 57, 70, 0.6)); }
  100% { transform: scale(1.08); filter: drop-shadow(0 0 22px rgba(255, 209, 102, 0.9)); }
}

/* --- BANNIÈRES THÉMATIQUES AVEC SAPIN & CITROUILLE DÉCORÉS --- */
.seasonal-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  position: relative;
  z-index: 1000;
}
.halloween-banner {
  background: linear-gradient(90deg, #ff6e14, #9d4edd);
  color: #fff;
  box-shadow: 0 4px 20px rgba(255, 110, 20, 0.35);
}
.christmas-banner {
  background: linear-gradient(90deg, #e63946, #2a9d8f);
  color: #fff;
  box-shadow: 0 4px 20px rgba(230, 57, 70, 0.35);
}
.seasonal-banner-icon {
  font-size: 1.4rem;
  display: inline-block;
  animation: bounceSlow 2s infinite ease-in-out;
}
@keyframes bounceSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* --- PAGE RÉSERVATION DÉDIÉE (STRUCTURE) --- */
.booking-page-body {
  background-color: #08090d;
  color: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.is-embedded .booking-top-bar,
body.is-embedded .booking-footer,
body.is-embedded .halloween-decoration-corner,
body.is-embedded .christmas-decoration-corner {
  display: none !important;
}
body.is-embedded .booking-main-container {
  padding: 10px 0 20px !important;
}
body.is-embedded .booking-flow-card {
  box-shadow: none !important;
  border-color: transparent !important;
  padding: 15px !important;
  background: transparent !important;
}
body.is-embedded .booking-hero-header {
  margin-bottom: 16px !important;
}

.booking-top-bar {
  background: rgba(14, 16, 24, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.booking-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.booking-top-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn-top-back {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  transition: all 0.2s;
}
.btn-top-back:hover {
  color: #fff;
  border-color: var(--pink);
}
.btn-top-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 7px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-top-phone:hover {
  background: var(--pink);
  border-color: var(--pink);
  box-shadow: 0 0 20px var(--pink-subtle);
}

.booking-main-container {
  flex: 1;
  padding: 40px 0 60px;
}

.booking-hero-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 30px;
}
.booking-pill-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(0, 242, 254, 0.12);
  border: 1px solid rgba(0, 242, 254, 0.35);
  color: #00f2fe;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.booking-page-title {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 10px;
  color: #ffffff;
}
.booking-page-subtitle {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* Réassurance Row */
.booking-reassurance-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: 860px;
  margin: 0 auto 32px;
}
.reassurance-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.reassurance-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.reassurance-item strong {
  display: block;
  font-size: 0.9rem;
  color: #fff;
}
.reassurance-item span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* CARD CONTENEUR PRINCIPAL */
.booking-flow-card {
  max-width: 960px;
  margin: 0 auto;
  background: #10121a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 34px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 42, 133, 0.08);
  position: relative;
}

/* INDICATEUR D'ÉTAPES (STEPPER) */
.booking-steps-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 34px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.step-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.45;
  transition: all 0.3s;
}
.step-indicator.active {
  opacity: 1;
}
.step-indicator.completed {
  opacity: 0.85;
}
.step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}
.step-indicator.active .step-num {
  background: var(--pink);
  border-color: var(--pink);
  box-shadow: 0 0 16px var(--pink-subtle);
}
.step-indicator.completed .step-num {
  background: #10b981;
  border-color: #10b981;
}
.step-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}
.step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 16px;
}

/* PANNEAUX D'ÉTAPES */
.booking-step-panel {
  display: none;
}
.booking-step-panel.active {
  display: block;
  animation: panelFadeIn 0.35s ease-out;
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.step-heading {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.step-subheading {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

/* FORMULES GRID */
.formulas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.formula-card {
  background: rgba(255, 255, 255, 0.02);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  cursor: pointer;
  position: relative;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
}
.formula-card input[type="radio"] {
  display: none;
}
.formula-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.formula-card.selected {
  border-color: var(--pink);
  background: rgba(255, 42, 133, 0.05);
  box-shadow: 0 0 25px rgba(255, 42, 133, 0.2);
}
.formula-card-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--pink);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.formula-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.formula-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}
.formula-duration {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}
.formula-price {
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.price-old {
  font-size: 0.9rem;
  text-decoration: line-through;
  color: var(--text-dim);
}
.price-val {
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--pink-light);
}
.price-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.formula-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
  flex: 1;
}
.formula-players-hint {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cyan);
}

/* JEU SPÉCIFIQUE DROPDOWN */
.specific-game-select-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.field-label-small {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  display: block;
  margin-bottom: 8px;
}
.booking-select {
  width: 100%;
  padding: 12px 14px;
  background: #090a10;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #fff;
  font-size: 0.95rem;
  outline: none;
}
.booking-select:focus {
  border-color: var(--pink);
}

/* COMPTEUR DE JOUEURS */
.players-counter-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.field-label-bold {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}
.counter-control-wrap {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #090a10;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
}
.btn-counter {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.btn-counter:hover {
  background: var(--pink);
}
.counter-display {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 80px;
  justify-content: center;
}
#player-count-display {
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
}
.counter-unit {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.counter-note {
  font-size: 0.82rem;
  color: var(--text-dim);
  width: 100%;
}

/* NAVIGATION DES ÉTAPES */
.step-nav-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.btn-prev-step {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-prev-step:hover {
  border-color: #fff;
  color: #fff;
}
.btn-next-step {
  background: var(--pink);
  border: none;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 20px var(--pink-subtle);
  transition: all 0.25s;
}
.btn-next-step:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 42, 133, 0.4);
}
.btn-next-step:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* DATE & CRÉNEAUX GRID */
.datetime-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 24px;
  margin-bottom: 28px;
}
@media (max-width: 768px) {
  .datetime-grid {
    grid-template-columns: 1fr;
  }
}
.booking-date-input {
  width: 100%;
  padding: 14px 18px;
  background: #090a10;
  border: 2px solid var(--border);
  border-radius: 10px;
  color: #fff;
  font-size: 1.05rem;
  font-family: inherit;
  outline: none;
  margin-top: 8px;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}
.booking-date-input:focus {
  border-color: var(--pink);
}
.opening-hours-recap {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.opening-hours-recap strong {
  color: #fff;
  display: block;
  margin-bottom: 6px;
}
.opening-hours-recap ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.opening-hours-recap li {
  margin-bottom: 4px;
}
.day-highlight {
  color: #fff;
  font-weight: 600;
}
.day-closed {
  color: var(--text-dim);
}

.slots-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.slots-date-highlight {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cyan);
}

/* ÉTATS DES CRÉNEAUX */
.slots-state-box {
  text-align: center;
  padding: 30px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border);
}
.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 12px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.slots-state-box.closed {
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.slots-state-box.empty {
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}
.state-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
}

/* GRILLE DES CRÉNEAUX */
.slots-buttons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}
.btn-slot-time {
  padding: 10px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.btn-slot-time:hover {
  border-color: var(--cyan);
  background: rgba(0, 242, 254, 0.1);
}
.btn-slot-time.selected {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  box-shadow: 0 0 16px rgba(255, 42, 133, 0.4);
  font-weight: 700;
}

/* ÉTAPE 3 : COORDONNÉES & RÉCAP */
.step-3-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 26px;
  margin-bottom: 24px;
}
@media (max-width: 820px) {
  .step-3-layout {
    grid-template-columns: 1fr;
  }
}
.form-row-2 {
  display: flex;
  gap: 16px;
}
@media (max-width: 560px) {
  .form-row-2 {
    flex-direction: column;
  }
}
.form-group {
  margin-bottom: 16px;
}
.booking-text-input,
.booking-textarea {
  width: 100%;
  padding: 12px 16px;
  background: #090a10;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #fff;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  margin-top: 6px;
  transition: border-color 0.2s;
}
.booking-text-input:focus,
.booking-textarea:focus {
  border-color: var(--pink);
}

/* TICKET NÉON RÉCAPITULATIF */
.neon-ticket-card {
  background: rgba(14, 16, 24, 0.95);
  border: 1px solid var(--pink-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 42, 133, 0.12);
}
.ticket-header {
  background: rgba(255, 42, 133, 0.12);
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 42, 133, 0.25);
}
.ticket-brand {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
}
.ticket-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--pink);
}
.ticket-body {
  padding: 18px;
}
.ticket-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 0.88rem;
}
.ticket-label {
  color: var(--text-muted);
}
.ticket-val {
  color: #fff;
  text-align: right;
}
.ticket-divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}
.ticket-row.total {
  font-size: 1rem;
}
.ticket-price {
  font-family: var(--font-title);
  font-size: 1.4rem;
  color: var(--pink-light);
}
.ticket-payment-badge {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  margin-top: 14px;
}
.ticket-payment-badge span {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  color: #34d399;
}
.ticket-payment-badge small {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.booking-alert-error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #fca5a5;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.btn-submit-booking {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--pink);
  border: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  padding: 15px 32px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 25px rgba(255, 42, 133, 0.45);
  transition: all 0.25s;
}
.btn-submit-booking:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 35px rgba(255, 42, 133, 0.6);
}

/* ÉCRAN DE SUCCÈS */
.success-screen-box {
  text-align: center;
  padding: 20px 10px;
  max-width: 680px;
  margin: 0 auto;
}
.success-checkmark-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0, 242, 254, 0.1);
  border: 2px solid #00f2fe;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 0 35px rgba(0, 242, 254, 0.35);
}
.success-badge-top {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.success-title {
  font-family: var(--font-title);
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}
.success-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 24px;
}

.confirmed-booking-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  text-align: left;
  margin-bottom: 28px;
}
.confirmed-id-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  font-size: 0.95rem;
}
.confirmed-id-row strong {
  color: #00f2fe;
  font-family: var(--font-title);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}
.confirmed-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.confirmed-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.confirmed-details-grid strong {
  font-size: 0.95rem;
  color: #fff;
}
.confirmed-instructions {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.confirmed-instructions strong {
  color: #fff;
}

.success-actions-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.btn-action-calendar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(0, 242, 254, 0.12);
  border: 1px solid #00f2fe;
  color: #00f2fe;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  transition: all 0.2s;
}
.btn-action-calendar:hover {
  background: #00f2fe;
  color: #000;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.4);
}
.btn-action-home {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s;
}
.btn-action-home:hover {
  background: rgba(255, 255, 255, 0.15);
}

.booking-footer {
  padding: 24px 0;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-dim);
}
.booking-footer a {
  color: var(--text-muted);
  text-decoration: none;
}

/* ==============================================================================
   AMÉLIORATION DU DESIGN DES BOUTONS RÉSERVER SUR LE SITE PUBLIC
   (POUR ÉVITER TOUT EFFET "BROUILLON")
   ============================================================================== */

/* 1. Bouton Réserver du Header (Navbar) */
.btn-nav-book {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(255, 42, 133, 0.2), rgba(0, 242, 254, 0.15));
  border: 1px solid rgba(255, 42, 133, 0.55);
  box-shadow: 0 2px 14px rgba(255, 42, 133, 0.2);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.btn-nav-book:hover {
  background: var(--pink);
  border-color: var(--pink);
  box-shadow: 0 4px 22px rgba(255, 42, 133, 0.5);
  transform: translateY(-1px);
}
.btn-nav-book svg {
  color: var(--cyan);
  transition: color 0.2s;
}
.btn-nav-book:hover svg {
  color: #fff;
}

/* 2. Boutons d'Action sur les Cartes Tarifs */
.pricing-actions-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.btn-pricing-book {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  background: var(--pink);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(255, 42, 133, 0.35);
  transition: all 0.25s;
  text-decoration: none;
}
.btn-pricing-book:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255, 42, 133, 0.55);
}
.pricing-card:not(.highlight) .btn-pricing-book {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
}
.pricing-card:not(.highlight) .btn-pricing-book:hover {
  background: var(--pink);
  border-color: var(--pink);
  box-shadow: 0 4px 20px rgba(255, 42, 133, 0.4);
}
.pricing-phone-link {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: underline;
  transition: color 0.2s;
}
.pricing-phone-link:hover {
  color: #ffffff;
}

/* 3. Bande-annonce élégante et discrète sur les Fiches Jeux (Trailer uniquement) */
.game-trailer-wrap {
  margin-top: 14px;
}
.btn-game-trailer {
  width: 100%;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}
.btn-game-trailer:hover {
  background: rgba(0, 242, 254, 0.1);
  border-color: rgba(0, 242, 254, 0.5);
  color: #00f2fe;
  box-shadow: 0 4px 18px rgba(0, 242, 254, 0.2);
  transform: translateY(-1px);
}
.btn-game-trailer svg {
  color: var(--pink);
  transition: transform 0.2s, color 0.2s;
}
.btn-game-trailer:hover svg {
  color: #00f2fe;
  transform: scale(1.15);
}

/* Bannière d'appel à l'action sous le catalogue des jeux */
.catalog-book-cta-banner {
  margin-top: 35px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 42, 133, 0.08) 0%, rgba(14, 16, 25, 0.8) 100%);
  border: 1px solid rgba(255, 42, 133, 0.25);
  border-radius: 14px;
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.catalog-book-cta-text strong {
  display: block;
  font-size: 1.15rem;
  color: #ffffff;
  margin-bottom: 4px;
}
.catalog-book-cta-text p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}
@media (max-width: 640px) {
  .catalog-book-cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
}

/* --- BOUTONS RÉSERVER SOUS LES JEUX & TRAILER --- */
.game-card-actions-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 14px !important;
}
.game-card-actions-row.single-btn {
  grid-template-columns: 1fr !important;
}
.btn-game-book {
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: var(--radius-sm, 8px) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(255, 42, 133, 0.85), rgba(157, 78, 221, 0.85)) !important;
  border: 1px solid rgba(255, 42, 133, 0.6) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(255, 42, 133, 0.25) !important;
}
.btn-game-book:hover {
  background: linear-gradient(135deg, #ff2a85, #9d4edd) !important;
  border-color: #ff2a85 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 22px rgba(255, 42, 133, 0.55) !important;
  transform: translateY(-1px) !important;
}

/* --- SÉLECTEUR DE DURÉE AVANCÉ (30m, 1h, 1h30, 2h) --- */
.booking-duration-box {
  margin: 22px 0 26px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(0, 242, 254, 0.25) !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}
.duration-box-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.duration-box-desc {
  font-size: 0.85rem !important;
  color: #a0aec0 !important;
  margin: 3px 0 0 !important;
}
.duration-badge-indicator {
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #00f2fe !important;
  background: rgba(0, 242, 254, 0.12) !important;
  border: 1px solid rgba(0, 242, 254, 0.4) !important;
  letter-spacing: 0.02em !important;
}

/* Alerte explicative Escape Game 1h min */
.escape-notice-box {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  border-radius: 10px !important;
  background: rgba(157, 78, 221, 0.14) !important;
  border: 1px solid rgba(157, 78, 221, 0.5) !important;
  margin-bottom: 16px !important;
}
.notice-icon-wrap {
  font-size: 1.6rem !important;
  line-height: 1 !important;
}
.notice-text strong {
  display: block !important;
  font-size: 0.92rem !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
}
.notice-text p {
  margin: 0 !important;
  font-size: 0.83rem !important;
  color: #e0d4f7 !important;
  line-height: 1.45 !important;
}

/* Piles de durée */
.duration-pills-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
}
.duration-pill {
  position: relative !important;
  background: rgba(15, 20, 32, 0.7) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.duration-pill:hover:not(.disabled) {
  border-color: rgba(0, 242, 254, 0.5) !important;
  background: rgba(0, 242, 254, 0.05) !important;
  transform: translateY(-2px) !important;
}
.duration-pill.active {
  border-color: #00f2fe !important;
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.15) 0%, rgba(157, 78, 221, 0.15) 100%) !important;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.35) !important;
}
.duration-pill.disabled {
  opacity: 0.32 !important;
  cursor: not-allowed !important;
  filter: grayscale(1) !important;
}
.pill-badge {
  display: inline-block !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: rgba(0, 242, 254, 0.15) !important;
  color: #00f2fe !important;
  border: 1px solid rgba(0, 242, 254, 0.3) !important;
  margin-bottom: 8px !important;
  align-self: flex-start !important;
}
.pill-badge.disabled {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #888 !important;
  border-color: #555 !important;
}
.pill-main {
  margin-bottom: 8px !important;
}
.pill-title {
  display: block !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', sans-serif !important;
}
.pill-sub {
  display: block !important;
  font-size: 0.76rem !important;
  color: #a0aec0 !important;
  margin-top: 2px !important;
}
.pill-price {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #ff2a85 !important;
}
.duration-pill.active .pill-price {
  color: #00f2fe !important;
  text-shadow: 0 0 10px rgba(0, 242, 254, 0.5) !important;
}

/* --- MENU DÉROULANT CYBERPUNK & APERÇU JEU --- */
.specific-game-select-box {
  margin: 22px 0 16px !important;
}
.select-cyber-wrapper {
  position: relative !important;
  width: 100% !important;
}
.booking-select-cyber {
  width: 100% !important;
  padding: 14px 44px 14px 18px !important;
  background: rgba(14, 18, 32, 0.95) !important;
  border: 1.5px solid rgba(0, 242, 254, 0.35) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
}
.booking-select-cyber:hover,
.booking-select-cyber:focus {
  outline: none !important;
  border-color: #00f2fe !important;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.4) !important;
  background: rgba(18, 24, 42, 0.98) !important;
}
.booking-select-cyber optgroup {
  background: #0d1120 !important;
  color: #00f2fe !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  padding: 8px 0 !important;
}
.booking-select-cyber option {
  background: #141828 !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
}
.select-chevron-icon {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #00f2fe !important;
  font-size: 0.75rem !important;
  pointer-events: none !important;
}
.game-preview-card {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 14px !important;
  padding: 14px 18px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
}
.preview-game-img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 242, 254, 0.4) !important;
  flex-shrink: 0 !important;
}
.preview-game-info {
  flex: 1 !important;
}
.preview-header {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  margin-bottom: 4px !important;
}
.preview-cat-badge {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #ff2a85 !important;
  background: rgba(255, 42, 133, 0.15) !important;
  border: 1px solid rgba(255, 42, 133, 0.3) !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
}
.preview-players-badge {
  font-size: 0.74rem !important;
  color: #a0aec0 !important;
}
.preview-game-title {
  margin: 0 0 4px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}
.preview-game-note {
  font-size: 0.78rem !important;
  color: #d1c4e9 !important;
  line-height: 1.35 !important;
}

/* ==========================================================================
   NOUVEAU TUNNEL DE RÉSERVATION : DESIGN SOMBRE ÉPURÉ, MODERNE & SOBRE
   (EFFET NÉON ATTÉNUÉ & CARTE RÉCAPITULATIVE HAUT DE GAMME SANS NÉON)
   ========================================================================== */

/* 1. Stepper 6 étapes responsive et épuré */
.booking-steps-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 28px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow-x: auto !important;
  gap: 6px !important;
}
.step-indicator {
  cursor: pointer !important;
  user-select: none !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.step-num {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #111827 !important;
  border: 1.5px solid #374151 !important;
  color: #9ca3af !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}
.step-label {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #9ca3af !important;
  transition: all 0.2s ease !important;
}
.step-indicator:hover .step-num {
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}
.step-indicator:hover .step-label {
  color: #ffffff !important;
}
.step-indicator.active .step-num {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}
.step-indicator.active .step-label {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.step-indicator.completed .step-num {
  background: #1f2937 !important;
  border-color: #0284c7 !important;
  color: #38bdf8 !important;
}
.step-indicator.completed .step-label {
  color: #d1d5db !important;
}
.step-line {
  flex: 1 !important;
  min-width: 14px !important;
  height: 2px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  margin: 0 4px !important;
}

@media (max-width: 768px) {
  .step-label {
    display: none !important;
  }
  .step-num {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.78rem !important;
  }
}

/* 2. Formules Étape 1 */
.formulas-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 18px !important;
}
.formula-card {
  position: relative !important;
  background: #111827 !important;
  border: 1px solid #1f2937 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
}
.formula-card input[type="radio"] {
  display: none !important;
}
.formula-card:hover {
  background: #162033 !important;
  border-color: #334155 !important;
  transform: translateY(-2px) !important;
}
.formula-card.selected {
  background: #0f233a !important;
  border-color: #0284c7 !important;
}
.formula-card-badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
}
.formula-title {
  font-size: 1.05rem !important;
  color: #ffffff !important;
  margin: 0 0 4px 0 !important;
}
.formula-duration {
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
  margin-bottom: 12px !important;
}
.formula-price {
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}
.price-val {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}
.price-sub {
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
}
.price-old {
  font-size: 0.95rem !important;
  text-decoration: line-through !important;
  color: #64748b !important;
}
.formula-desc {
  font-size: 0.84rem !important;
  color: #94a3b8 !important;
  line-height: 1.45 !important;
  margin: 0 0 14px 0 !important;
  flex: 1 !important;
}
.formula-players-hint {
  font-size: 0.78rem !important;
  color: #cbd5e1 !important;
  font-weight: 600 !important;
}

/* 3. Bloc de Configuration Étape 1 (Durée & Participants) */
.step-config-box {
  background: #111827 !important;
  border: 1px solid #1f2937 !important;
  border-radius: 12px !important;
  padding: 20px !important;
}
.field-label-bold {
  display: block !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  margin-bottom: 10px !important;
}

.duration-pills-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 10px !important;
}
.duration-pill {
  background: #162033 !important;
  border: 1px solid #334155 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  color: #e2e8f0 !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 3px !important;
  transition: all 0.2s ease !important;
}
.duration-pill:hover {
  background: #1e293b !important;
  border-color: #38bdf8 !important;
}
.duration-pill.selected {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}
.pill-time {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
}
.pill-badge {
  font-size: 0.72rem !important;
  opacity: 0.85 !important;
}

/* Compteur de Joueurs Épuré */
.counter-control-wrap {
  display: inline-flex !important;
  align-items: center !important;
  background: #162033 !important;
  border: 1px solid #334155 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.btn-counter {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  width: 44px !important;
  height: 40px !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.btn-counter:hover {
  background: #1e293b !important;
}
.counter-display {
  padding: 0 16px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
}
#player-count-display-escape,
#player-count-display-arcade,
#player-count-display-priv {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}
.counter-unit {
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
}
.counter-note {
  display: block !important;
  margin-top: 6px !important;
  font-size: 0.78rem !important;
  color: #64748b !important;
}

/* Notice Escape Game Épurée */
.escape-notice-box {
  background: rgba(14, 165, 233, 0.08) !important;
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
.notice-icon-wrap {
  font-size: 1.4rem !important;
  line-height: 1 !important;
}
.notice-text strong {
  display: block !important;
  font-size: 0.88rem !important;
  color: #ffffff !important;
  margin-bottom: 2px !important;
}
.notice-text p {
  margin: 0 !important;
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
  line-height: 1.4 !important;
}

/* 4. Grille de Choix des Jeux Étape 2 (Pure & Épurée) */
.game-choice-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 14px !important;
  margin-top: 18px !important;
}
.game-select-card {
  position: relative !important;
  background: #111827 !important;
  border: 1px solid #1f2937 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.game-select-card input[type="radio"] {
  display: none !important;
}
.game-select-card:hover {
  background: #162033 !important;
  border-color: #334155 !important;
  transform: translateY(-2px) !important;
}
.game-select-card.selected {
  background: #0f233a !important;
  border-color: #0284c7 !important;
}

/* Carte Choix par Défaut "Je n'ai pas encore choisi" */
.game-select-card.not-chosen-card {
  border-color: #0284c7 !important;
  background: #162033 !important;
  grid-column: 1 / -1 !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
}
.game-select-card.not-chosen-card.selected {
  border-color: #38bdf8 !important;
  background: #0f233a !important;
}
.game-card-icon-lead {
  font-size: 2.2rem !important;
  flex-shrink: 0 !important;
}
.game-card-rec-badge {
  display: inline-block !important;
  margin-top: 6px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
  background: rgba(2, 132, 199, 0.15) !important;
  border: 1px solid rgba(2, 132, 199, 0.3) !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
}

.game-card-check {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 1.5px solid #4b5563 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: transparent !important;
  transition: all 0.2s ease !important;
  z-index: 2 !important;
}
.game-select-card.selected .game-card-check {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}
.game-card-thumb {
  width: 100% !important;
  height: 120px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
}
.game-card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.game-card-title {
  color: #ffffff !important;
  font-size: 0.95rem !important;
  margin-bottom: 4px !important;
}
.game-card-text {
  color: #94a3b8 !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
  flex: 1 !important;
}
.game-card-meta {
  display: flex !important;
  gap: 10px !important;
  font-size: 0.75rem !important;
  color: #64748b !important;
}

/* 5. Calendrier Interactif Étape 3 (SANS Effet Néon Baveux) */
.calendar-layout-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  gap: 20px !important;
  margin-top: 18px !important;
}
@media (max-width: 820px) {
  .calendar-layout-wrapper {
    grid-template-columns: 1fr !important;
  }
}
.calendar-card {
  background: #111827 !important;
  border: 1px solid #1f2937 !important;
  border-radius: 14px !important;
  padding: 20px !important;
}
.calendar-header-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}
.calendar-month-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}
.btn-cal-nav {
  background: #162033 !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
.btn-cal-nav:hover {
  background: #1e293b !important;
  border-color: #38bdf8 !important;
}

.calendar-weekdays-row {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  text-align: center !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}
.calendar-days-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 6px !important;
}
.cal-day {
  aspect-ratio: 1 / 1 !important;
  min-height: 48px !important;
  background: #162033 !important;
  border: 1px solid #1e293b !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  color: #e2e8f0 !important;
  padding: 3px !important;
}
.cal-day.empty {
  background: transparent !important;
  border: none !important;
  cursor: default !important;
}
.cal-day-num {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}
.cal-day-tag {
  font-size: 0.6rem !important;
  color: #64748b !important;
  margin-top: 1px !important;
}
.cal-day.open:hover {
  border-color: #0284c7 !important;
  background: #1e293b !important;
}
.cal-day.open .cal-day-tag {
  color: #38bdf8 !important;
}
.cal-day.selected {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}
.cal-day.selected .cal-day-num,
.cal-day.selected .cal-day-tag {
  color: #ffffff !important;
  font-weight: 800 !important;
}
.cal-day.closed {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  background: rgba(0, 0, 0, 0.2) !important;
}
.cal-day.closed .cal-day-tag {
  color: #ef4444 !important;
}
.cal-day.past {
  opacity: 0.2 !important;
  cursor: not-allowed !important;
}

.calendar-legend-bar {
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 14px !important;
  font-size: 0.76rem !important;
  color: #94a3b8 !important;
}
.legend-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.legend-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
}
.legend-dot.open { background: #38bdf8; }
.legend-dot.selected { background: #0284c7; }
.legend-dot.closed { background: #ef4444; }

.selected-date-display-box {
  background: #111827 !important;
  border: 1px solid #1f2937 !important;
  border-radius: 12px !important;
  padding: 16px !important;
}
.selected-date-label {
  display: block !important;
  font-size: 0.75rem !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}
.selected-date-val {
  font-size: 1rem !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.opening-hours-recap-box {
  background: #111827 !important;
  border: 1px solid #1f2937 !important;
  border-radius: 12px !important;
  padding: 16px !important;
}
.hours-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.8rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  color: #94a3b8 !important;
}
.badge-open {
  color: #38bdf8 !important;
  font-weight: 700 !important;
}
.badge-closed {
  color: #ef4444 !important;
  font-weight: 700 !important;
}

/* 6. Plages Horaires Étape 4 (SANS Lueur Néon) */
.slots-info-banner {
  background: #111827 !important;
  border: 1px solid #1f2937 !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}
.banner-icon {
  font-size: 1.5rem !important;
}
.slots-info-banner strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
}
.slots-info-banner p {
  margin: 2px 0 0 !important;
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
}

.slots-buttons-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 10px !important;
  max-height: 340px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}
.btn-slot-time {
  padding: 12px 14px !important;
  background: #162033 !important;
  border: 1px solid #1e293b !important;
  border-radius: 8px !important;
  color: #f1f5f9 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}
.btn-slot-time:hover {
  border-color: #0284c7 !important;
  background: #1e293b !important;
}
.btn-slot-time.selected {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}
.btn-slot-time.disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  background: #0b0f17 !important;
}
.slot-time-range {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}
.slot-badge {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: #38bdf8 !important;
  background: rgba(2, 132, 199, 0.15) !important;
  border: 1px solid rgba(2, 132, 199, 0.3) !important;
  border-radius: 999px !important;
  padding: 1px 8px !important;
}
.btn-slot-time.selected .slot-badge {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.slot-badge.booked {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

.slot-selected-feedback {
  margin-top: 14px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  background: rgba(2, 132, 199, 0.1) !important;
  border: 1px solid #0284c7 !important;
  font-size: 0.85rem !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.feedback-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  font-weight: 800 !important;
  font-size: 0.75rem !important;
}

/* 7. Formulaire Coordonnées Étape 5 */
.contact-form-card {
  background: #111827 !important;
  border: 1px solid #1f2937 !important;
  border-radius: 12px !important;
  padding: 22px !important;
}
.booking-text-input,
.booking-textarea,
.booking-select-cyber {
  background: #162033 !important;
  border: 1px solid #334155 !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  padding: 10px 14px !important;
  font-size: 0.92rem !important;
  width: 100% !important;
  transition: border-color 0.2s ease !important;
}
.booking-text-input:focus,
.booking-textarea:focus,
.booking-select-cyber:focus {
  outline: none !important;
  border-color: #38bdf8 !important;
}

/* 8. Carte Récapitulative Sobre Étape 6 (SANS NÉON NI FLASH) */
.step-6-recap-layout {
  max-width: 580px !important;
  margin: 0 auto !important;
}
.sober-summary-card {
  background: #111827 !important;
  border: 1px solid #1f2937 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
.summary-card-header {
  background: #162033 !important;
  padding: 14px 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid #1f2937 !important;
}
.summary-card-brand {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.05em !important;
}
.summary-card-badge-status {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
  background: rgba(2, 132, 199, 0.15) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 0.04em !important;
}
.summary-card-body {
  padding: 20px !important;
}
.summary-item-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 10px !important;
  font-size: 0.88rem !important;
}
.summary-item-label {
  color: #94a3b8 !important;
}
.summary-item-val {
  color: #ffffff !important;
  text-align: right !important;
  font-weight: 600 !important;
}
.summary-item-val.highlight-val {
  color: #38bdf8 !important;
}
.summary-card-divider {
  height: 1px !important;
  background: #1f2937 !important;
  margin: 14px 0 !important;
}
.summary-item-row.total-row {
  font-size: 1.05rem !important;
  margin-bottom: 16px !important;
}
.summary-price-total {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

.summary-payment-callout {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
}
.callout-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #10b981 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}
.callout-desc {
  margin: 0 !important;
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  line-height: 1.35 !important;
}

/* Boutons de Navigation & Confirmation */
.step-nav-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.btn-prev-step {
  background: #162033 !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.btn-prev-step:hover {
  background: #1e293b !important;
  border-color: #475569 !important;
}
.btn-next-step {
  background: #0284c7 !important;
  border: 1px solid #38bdf8 !important;
  color: #ffffff !important;
  padding: 11px 22px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.btn-next-step:hover {
  background: #0369a1 !important;
}
.btn-next-step:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  background: #1e293b !important;
  border-color: #334155 !important;
}

.btn-submit-booking {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #38bdf8 !important;
  padding: 13px 26px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.btn-submit-booking:hover {
  background: #0369a1 !important;
}
.btn-submit-booking:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}