/* ========================================
   COMPONENTS/CALENDAR.CSS
   Calendrier de disponibilité des salles municipales + formulaire de pré-réservation
   ======================================== */

/* ── Espacement resserré entre le contenu de page et les sections du template ── */
.sc-salles-intro {
  padding-bottom: var(--space-6);
}
.sc-salles-reservation {
  padding-top: var(--space-6);
}

/* ── Titres des colonnes (calendrier / formulaire) ── */
.sc-salles-reservation__col > .sc-section__titre {
  margin-bottom: var(--space-6);
}

/* ── Texte d'introduction de la colonne calendrier/formulaire ── */
.sc-salles-reservation__intro {
  color: var(--color-texte-discret);
  margin-bottom: var(--space-5);
}

/* ── Compensation header sticky pour l'ancre #reservation-disponibilites ── */
#reservation-disponibilites {
  scroll-margin-top: 90px;
}

@media (min-width: 1025px) {
  #reservation-disponibilites {
    scroll-margin-top: 110px;
  }
}

/* ── Onglets de sélection de salle ── */
.sc-salle-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.sc-salle-tab {
  font-family: var(--font-corps);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-bordure);
  color: var(--color-texte);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.sc-salle-tab:hover { border-color: var(--color-bleu-nuit); text-decoration: none; }
.sc-salle-tab.is-active {
  background: var(--color-bleu-nuit);
  border-color: var(--color-bleu-nuit);
  color: var(--color-fond-base);
}
.sc-salle-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 42, 74, 0.25);
}

/* ── Navigation mois ── */
.sc-cal__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.sc-cal__nav-lien {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-bleu-nuit);
  text-decoration: none;
}
.sc-cal__nav-lien:hover { text-decoration: underline; }
.sc-cal__nav-lien:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 42, 74, 0.25);
  border-radius: var(--radius-sm);
}

/* ── Table calendrier ── */
.sc-cal__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sc-cal-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
}

@media (min-width: 601px) {
  .sc-cal-table {
    min-width: 480px;
  }
}
.sc-cal-table caption {
  font-family: var(--font-titre);
  font-size: var(--text-lg);
  color: var(--color-bleu-nuit);
  text-align: left;
  margin-bottom: var(--space-3);
  caption-side: top;
}
.sc-cal-table th {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-texte-discret);
  padding: var(--space-2);
  text-align: center;
}
.sc-cal__jour {
  min-width: 0;
  text-align: center;
  padding: var(--space-2);
  border: 1px solid var(--color-bordure);
  border-radius: var(--radius-sm);
  vertical-align: top;
  overflow-wrap: break-word;
}
.sc-cal__jour--vide { border: none; }
.sc-cal__num {
  display: block;
  font-weight: 600;
  color: var(--color-texte);
}
.sc-cal__etiquette {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: var(--space-1);
}
.sc-cal__jour--libre   { background: rgba(46, 125, 50, 0.08); }
.sc-cal__jour--attente { background: rgba(255, 209, 18, 0.18); }
.sc-cal__jour--attente .sc-cal__etiquette { color: #7a5000; }
.sc-cal__jour--indisponible { background: rgba(26, 42, 74, 0.14); }
.sc-cal__jour--indisponible .sc-cal__etiquette { color: var(--color-bleu-nuit); }
.sc-cal__jour--reserve { background: rgba(204, 0, 0, 0.10); }
.sc-cal__jour--reserve .sc-cal__etiquette { color: var(--color-rouge); }

/* ── Légende ── */
.sc-cal__legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-texte-discret);
}
.sc-cal__legende-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.sc-cal__pastille {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sc-cal__pastille--libre        { background: var(--color-succes); }
.sc-cal__pastille--attente      { background: var(--color-or); }
.sc-cal__pastille--indisponible { background: var(--color-bleu-nuit); }
.sc-cal__pastille--reserve      { background: var(--color-rouge); }

/* ── Messages de confirmation / erreur (PRG) ── */
.sc-message {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
}
.sc-message--succes {
  background: rgba(46, 125, 50, 0.10);
  color: #1e5e26;
  border: 1.5px solid rgba(46, 125, 50, 0.3);
}
.sc-message--erreur {
  background: rgba(204, 0, 0, 0.08);
  color: var(--color-rouge);
  border: 1.5px solid rgba(204, 0, 0, 0.3);
}

/* ── Layout deux colonnes : calendrier + formulaire ── */
.sc-salles-reservation__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: start;
}
.sc-salles-reservation__col {
  min-width: 0;
}

/* ── Formulaire de pré-réservation ── */
.sc-form__champ {
  min-width: 0;
  margin-bottom: var(--space-4);
}
.sc-form__ligne {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.sc-form__mention {
  font-size: var(--text-sm);
  color: var(--color-texte-discret);
  margin-bottom: var(--space-4);
}
.sc-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .sc-salles-reservation__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .sc-form__ligne { grid-template-columns: 1fr; }
  .sc-cal-table th, .sc-cal__jour { padding: var(--space-1); font-size: var(--text-xs); }
}