/* =============================================================
   Flex Theater - Structure & Composants
============================================================= */

/* Grille d'agenda */
.spectacles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

.section {
  padding-block: 0;
  position: relative;
}

#blog-hero, .modular-hero, .hero {
  position: relative;
  padding-block: clamp(5rem, 12vw, 9rem);
  background-color: var(--q2-bg);
}

/* Formulaires */
.form-group {
  margin-bottom: 0;
}
.form-columns {
    display: flex;
    gap: 15px;
}

.form-column {
    flex: 1;
    min-width: 0;
}

@media (max-width: 640px) {
    .form-columns {
        flex-direction: column;
        gap: 0;
    }
}

@media (min-width: 480px) {
  .spectacles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .spectacles-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================
   Statut de connexion - Mode icône seule + volet au survol
============================================================= */

/* Cible automatiquement n'importe quel conteneur parent de la zone login */
*:has(> .login-status),
nav li,
.navbar-item {
  position: relative;
  display: inline-block;
}

/* Icône cliquable avec zone de survol élargie */
i.fa-user {
  cursor: pointer;
  padding: 0.5rem;
  display: inline-block;
}

/* Bulle d'information */
.login-status {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: -4px; /* Chevauchement pour éviter tout trou d'un pixel */
  background-color: var(--pico-card-background-color, #ffffff);
  color: var(--pico-color, #222222);
  border: 1px solid var(--pico-muted-border-color, #e0e0e0);
  padding: 0.75rem 1rem;
  border-radius: var(--pico-border-radius, 6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  z-index: 1000;

  /* Masque la virgule en texte brut */
  font-size: 0;
}

/* Pont invisible élargi autour de la bulle */
.login-status::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -10px;
  right: -10px;
  height: 15px;
  background: transparent;
}

/* Restauration de la taille pour le nom et le lien */
.login-status strong,
.login-status a {
  font-size: 0.85rem;
  line-height: 1.3;
}

/* Maintien de l'affichage au survol du parent, de l'icône ou du volet */
*:has(> .login-status):hover > .login-status,
li:hover > .login-status,
span:hover > .login-status,
div:hover > .login-status,
.login-status:hover {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
/* ==========================
   Fin Statut de connexion 
============================= */

/* Carte de spectacle */
.card-spectacle {
  position: relative;
  height: 300px;
  border-radius: var(--pico-border-radius, 8px);
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #1a1a1a;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-spectacle:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
}

.card-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.card-main-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Badge Date & Heure */
.card-header-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  pointer-events: none;
}

/* Positionnement absolu UNIQUEMENT dans les cartes de grille */
.card-spectacle .card-header-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
}

.card-date-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  background-color: #ffffff;
  border-radius: var(--pico-border-radius, 6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  text-align: center;
  line-height: 1;
  transition: background-color 0.2s ease;
}

.card-date-box .date-day-name {
  width: 100%;
  background-color: var(--q2-accent, var(--pico-primary, #0076ff));
  color: var(--pico-primary-inverse, #ffffff);
  font-size: 0.7rem;
  font-weight: bold;
  padding: 0.3rem 0;
  letter-spacing: 0.5px;
}

.card-date-box .date-day-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: #111111;
  padding: 0.3rem 0 0.1rem 0;
}

.card-date-box .date-month {
  font-size: 0.7rem;
  font-weight: 700;
  color: #555555;
  padding-bottom: 0.35rem;
}

.card-time-badge {
  width: 100%;
  text-align: center;
  background-color: var(--q2-accent, var(--pico-primary, #0076ff));
  color: var(--pico-primary-inverse, #ffffff);
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0.25rem 0;
  border-radius: var(--pico-border-radius, 4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

@media (prefers-color-scheme: dark) {
  .card-date-box { background-color: #242424; }
  .card-date-box .date-day-number { color: #ffffff; }
  .card-date-box .date-month { color: #cccccc; }
}

html[data-theme="dark"] .card-date-box { background-color: #242424; }
html[data-theme="dark"] .card-date-box .date-day-number { color: #ffffff; }
html[data-theme="dark"] .card-date-box .date-month { color: #cccccc; }

/* Overlay et textes */
.card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.card-spectacle .card-title {
  color: #ffffff;
  margin: 0 0 0.15rem 0;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: bold;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.card-spectacle .card-compagnie {
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 0.5rem 0;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.card-spectacle .card-location {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.card-footer-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.card-btn-ticket {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  display: inline-block;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  font-weight: bold;
  text-decoration: none;
  background-color: var(--q2-accent, var(--pico-primary, #0076ff));
  color: var(--pico-primary-inverse, #ffffff);
  border-radius: var(--pico-border-radius, 4px);
  transition: filter 0.2s ease, transform 0.2s ease;
  border: none;
}

/* Espace au-dessus du deuxième bouton quand deux boutons se suivent */
.card-btn-ticket + .card-btn-ticket {
    margin-top: 4px;
}

.card-btn-ticket:hover {
  filter: brightness(1.15);
  transform: scale(1.03);
}

.card-tags {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.card-tags .badge {
  background-color: var(--q2-accent, var(--pico-primary, #0076ff));
  color: var(--pico-primary-inverse, #ffffff);
  padding: 0.15rem 0.45rem;
  border-radius: var(--pico-border-radius, 4px);
  font-size: 0.5rem;
  text-transform: uppercase;
  font-weight: 600;
}

/* Page Spectacle & Sidebar */
.spectacle-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 1.5rem;
}

.spectacle-main { width: 100%; }

.spectacle-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
  border-radius: var(--pico-border-radius, 8px);
  display: block;
}

.spectacle-sidebar {
  width: 100%;
  padding: 1.25rem;
  border-radius: var(--pico-border-radius, 8px);
  background-color: var(--pico-card-background-color, #f8f9fa);
  border: 1px solid var(--pico-muted-border-color, #e0e0e0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.spectacle-sidebar h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .spectacle-container {
    flex-direction: row;
    align-items: flex-start;
  }
  .spectacle-main {
    flex: 1;
    min-width: 0;
  }
  .spectacle-sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 2rem;
  }
}

.sidebar-repr-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sidebar-repr-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--pico-muted-border-color, #e5e5e5);
}

.sidebar-repr-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-repr-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  width: 60px;
}

.sidebar-repr-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.sidebar-repr-lieu {
  font-weight: bold;
  font-size: 0.95rem;
}

.sidebar-repr-adresse {
  font-size: 0.8rem;
  opacity: 0.8;
  line-height: 1.3;
}

.sidebar-repr-ticket {
  align-self: flex-start;
  margin-top: 0.4rem;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .spectacle-sidebar {
    background-color: #1a1a1a;
    border-color: #333333;
  }
  html:not([data-theme="light"]) .sidebar-repr-item {
    border-bottom-color: #333333;
  }
} 

html[data-theme="dark"] .spectacle-sidebar {
  background-color: #1a1a1a;
  border-color: #333333;
}

html[data-theme="dark"] .sidebar-repr-item {
  border-bottom-color: #333333;
}

/* =============================================================
   Impression & Gestion des Réservations
============================================================= */

/* Barre d'outils écran */
.reservation-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--pico-card-background-color, #f4f5f7);
  padding: 1rem 1.25rem;
  border-radius: var(--pico-border-radius, 8px);
  margin-bottom: 1.5rem;
  border: 1px solid var(--pico-muted-border-color, #e0e0e0);
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.toolbar-group label {
  white-space: nowrap;
}

.toolbar-group select {
  padding: 0.5rem 0.75rem;
  border-radius: var(--pico-border-radius, 4px);
  border: 1px solid var(--pico-muted-border-color, #ccc);
  font-size: 1.15rem;
  font-weight: 700;
  width: 100%;
}

/* Zone d'affichage et Tableau */
.print-header h1 {
  margin-bottom: 0.25rem;
  font-size: 1.3rem;
}

.print-header h2 {
  margin-top: 0;
  font-size: 1.75rem;
}

.print-header h3 {
  margin-bottom: 0.25rem;
  font-size: 1.5rem;
}

.print-meta {
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

/* Alerte et badge Abonnement */
.alert-abonne-box {
  background-color: #f8f9fa;
  color: #000000;
  border: 2px solid #000000;
  padding: 0.75rem 1rem;
  border-radius: var(--pico-border-radius, 6px);
  margin-bottom: 1rem;
  font-weight: 600;
}

.badge-abonne {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 800;
  background-color: #000000;
  color: #ffffff;
  border-radius: 3px;
}

.reservations-table .is-abonne td {
  background-color: #f0f0f0;
}

.reservations-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.reservations-table th,
.reservations-table td {
  border: 1px solid var(--pico-muted-border-color, #ddd);
  padding: 0.6rem 0.8rem;
  text-align: left;
}

.reservations-table th {
  background-color: var(--pico-card-background-color, #f8f9fa);
  font-weight: bold;
}

.reservations-table .text-center { text-align: center; }
.reservations-table .text-right { text-align: right; }
.reservations-table .text-muted { font-size: 0.85em; opacity: 0.8; }

/* Largeurs des colonnes */
.reservations-table .col-num { width: 4%; }
.reservations-table .col-name { width: 26%; }
.reservations-table .col-phone { width: 14%; }
.reservations-table .col-email { width: 21%; }
.reservations-table .col-abonne { width: 13%; }
.reservations-table .col-places { width: 12%; }
.reservations-table .col-check { width: 10%; }

/* Lignes de séparation de section, sous-totaux et total général */
.reservations-table .section-header-row td {
  background-color: var(--pico-card-background-color, #e9ecef);
  font-weight: bold;
  border-top: 2px solid var(--pico-muted-border-color, #333);
  border-bottom: 2px solid var(--pico-muted-border-color, #333);
  padding: 0.6rem 0.8rem;
}

.reservations-table .subtotal-row td {
  background-color: var(--pico-card-background-color, #f8f9fa);
  font-weight: bold;
  border-top: 1px solid var(--pico-muted-border-color, #666);
}

.reservations-table .grand-total-row td {
  background-color: var(--pico-card-background-color, #e2e8f0);
  font-weight: bold;
  font-size: 1.05rem;
  border-top: 3px double var(--pico-muted-border-color, #000);
}

/* =============================================================
   Mise en page d'impression A4 (Noir & Blanc strict)
============================================================= */

@media print {
  @page {
    size: A4 portrait;
    margin: 0.8cm;
  }

  /* Masquage des éléments hors impression par sur-spécificité */
  html body header,
  html body footer,
  html body nav,
  html body .header,
  html body .footer,
  html body .navbar,
  html body .sidebar,
  html body #header,
  html body #footer,
  html body #sidebar,
  html body #header-nav,
  html body .no-print,
  html body .reservation-toolbar {
    display: none;
  }

  html body {
    background: #ffffff;
    color: #000000;
    font-size: 9pt;
  }

  html body .container,
  html body .print-reservations-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }

  /* Boîte d'alerte Noir & Blanc */
  html body .alert-abonne-box {
    background-color: #ffffff;
    color: #000000;
    border: 2pt solid #000000;
    padding: 5pt 8pt;
    margin-bottom: 8pt;
    font-size: 9pt;
  }

  html body .badge-abonne {
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #000000;
    padding: 1pt 3pt;
    font-size: 7.5pt;
  }

  html body .reservations-table .is-abonne td {
    background-color: #f0f0f0;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Entête compacté */
  html body .print-header {
    border-bottom: 1pt solid #000000;
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
  }

  html body #page-wrapper .print-header h1,
  html body .print-header h1 {
    font-size: 11pt;
    margin: 0 0 2pt 0;
    color: #000000;
  }

  html body #page-wrapper .print-header h2,
  html body .print-header h2 {
    font-size: 14pt;
    margin: 0 0 2pt 0;
    color: #000000;
  }

  html body #page-wrapper .print-header h3,
  html body .print-header h3 {
    font-size: 12pt;
    margin: 0 0 2pt 0;
    color: #000000;
  }

  html body .print-meta {
    font-size: 8.5pt;
    margin: 0;
    line-height: 1.2;
  }

  /* Tableau ultra-compact N&B */
  html body .reservations-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
  }

  html body .reservations-table th,
  html body .reservations-table td {
    border: 1px solid #000000;
    padding: 3pt 5pt;
    font-size: 8.5pt;
    line-height: 1.1;
    color: #000000;
  }

  html body .reservations-table th {
    background-color: #f0f0f0;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  html body .reservations-table .section-header-row td {
    background-color: #e0e0e0;
    border-top: 1.5pt solid #000000;
    border-bottom: 1.5pt solid #000000;
    font-weight: bold;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  html body .reservations-table .subtotal-row td {
    background-color: #f5f5f5;
    border-top: 1pt solid #000000;
    font-weight: bold;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  html body .reservations-table .grand-total-row td {
    background-color: #e5e5e5;
    border-top: 2pt double #000000;
    font-weight: bold;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}