/* ============================================================
   Mairie Réservation – Calendrier Public
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap');


:root {
  --mr-bleu:      #1a3a5c;
  --mr-bleu-cl:   #2563a8;
  --mr-or:        #c8a951;
  --mr-libre:     #e8f5e9;
  --mr-libre-brd: #81c784;
  --mr-occupe:    #ffebee;
  --mr-occupe-brd:#e57373;
  --mr-partiel:   #fff8e1;
  --mr-partiel-brd:#ffd54f;
  --mr-selected:  #e3f2fd;
  --mr-sel-brd:   #1a3a5c;
  --mr-passe:     #f5f5f5;
  --mr-radius:    10px;
  --mr-shadow:    0 4px 20px rgba(26,58,92,.12);
  --mr-font:      'Source Sans 3', system-ui, sans-serif;
}

.mr-cal-app {
  font-family: var(--mr-font);
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  user-select: none;
}

/* ── Salle tabs ── */
.mr-cal-salle-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.mr-cal-tab {
  flex: 1;
  min-width: 140px;
  padding: 12px 16px;
  border: 2px solid var(--mr-bleu-cl);
  border-radius: var(--mr-radius);
  background: #fff;
  color: var(--mr-bleu);
  font-family: var(--mr-font);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.mr-cal-tab:hover   { background: #e8f0f9; }
.mr-cal-tab.active  { background: var(--mr-bleu); color: #fff; border-color: var(--mr-bleu); }

/* ── Salle info bar ── */
.mr-cal-salle-info {
  background: #f0f4f8;
  border-left: 4px solid var(--mr-or);
  border-radius: 0 8px 8px 0;
  padding: 10px 16px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .88rem;
  color: var(--mr-bleu);
}
.mr-cal-salle-info strong { font-size: 1rem; }
.mr-cal-info-chip {
  background: #fff;
  border: 1px solid var(--mr-bleu-cl);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: .82rem;
  font-weight: 600;
}

/* ── Month navigation ── */
.mr-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}
.mr-cal-nav-btn {
  width: 40px; height: 40px;
  border: 2px solid var(--mr-bleu);
  border-radius: 50%;
  background: #fff;
  color: var(--mr-bleu);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  display: flex; align-items: center; justify-content: center;
}
.mr-cal-nav-btn:hover { background: var(--mr-bleu); color: #fff; }
.mr-cal-month-label {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mr-bleu);
  text-transform: capitalize;
  letter-spacing: .3px;
}

/* ── Day of week header ── */
.mr-cal-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 3px;
}
.mr-cal-dow {
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  color: var(--mr-bleu);
  padding: 6px 0;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── Calendar grid ── */
.mr-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 16px;
}

/* ── Day cell ── */
.mr-cal-day {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
  position: relative;
  background: var(--mr-libre);
  color: #1a1a2e;
  padding: 4px;
  min-height: 48px;
}
.mr-cal-day:hover:not(.mr-day-passe):not(.mr-day-occupe-full):not(.mr-day-empty) {
  transform: scale(1.07);
  box-shadow: 0 2px 10px rgba(26,58,92,.2);
  z-index: 1;
}
.mr-cal-day-num { font-size: .88rem; font-weight: 700; line-height: 1; }
.mr-cal-day-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 3px; }

/* States */
.mr-day-empty    { background: transparent !important; cursor: default; border: none; }
.mr-day-passe    { background: var(--mr-passe) !important; color: #bbb !important; cursor: not-allowed; }
.mr-day-libre    { background: var(--mr-libre); border-color: var(--mr-libre-brd); }
.mr-day-partiel  { background: var(--mr-partiel); border-color: var(--mr-partiel-brd); }
.mr-day-occupe-full { background: var(--mr-occupe); border-color: var(--mr-occupe-brd); color: #c62828; cursor: not-allowed; }
.mr-day-selected { background: var(--mr-selected) !important; border-color: var(--mr-bleu) !important; box-shadow: 0 0 0 2px rgba(26,58,92,.25); color: var(--mr-bleu) !important; }
.mr-day-today    { box-shadow: 0 0 0 3px var(--mr-or); }

/* Booking details tooltip */
.mr-day-slots { font-size: .62rem; color: #555; margin-top: 2px; line-height: 1.2; text-align:center; max-width: 100%; overflow: hidden; }

/* ── Legend ── */
.mr-cal-legende {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 16px;
  font-size: .82rem;
  color: #555;
}
.mr-cal-leg-item { display: flex; align-items: center; gap: 5px; }
.mr-cal-dot { width: 14px; height: 14px; border-radius: 3px; border: 2px solid transparent; flex-shrink: 0; }
.mr-cal-dot-libre    { background: var(--mr-libre);   border-color: var(--mr-libre-brd); }
.mr-cal-dot-partiel  { background: var(--mr-partiel); border-color: var(--mr-partiel-brd); }
.mr-cal-dot-occupe   { background: var(--mr-occupe);  border-color: var(--mr-occupe-brd); }
.mr-cal-dot-selected { background: var(--mr-selected);border-color: var(--mr-bleu); }

/* ── Selection panel ── */
.mr-cal-selection-panel {
  background: #fff;
  border: 2px solid var(--mr-bleu);
  border-radius: var(--mr-radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: var(--mr-shadow);
  animation: mr-fadein .25s ease;
}
@keyframes mr-fadein { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.mr-cal-sel-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .92rem; color: var(--mr-bleu); }
.mr-cal-sel-count { font-size: 1.6rem; font-weight: 800; color: var(--mr-bleu); line-height: 1; }
.mr-cal-sel-dates { font-size: .8rem; color: #555; }

.mr-cal-sel-actions { display: flex; gap: 8px; }
.mr-cal-btn-clear {
  padding: 9px 16px;
  border: 2px solid var(--mr-bleu);
  border-radius: 7px;
  background: #fff;
  color: var(--mr-bleu);
  font-family: var(--mr-font);
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: all .2s;
}
.mr-cal-btn-clear:hover { background: #f0f4f8; }
.mr-cal-btn-go {
  padding: 9px 20px;
  border: none;
  border-radius: 7px;
  background: var(--mr-bleu);
  color: #fff;
  font-family: var(--mr-font);
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(26,58,92,.3);
  transition: all .2s;
}
.mr-cal-btn-go:hover { background: var(--mr-bleu-cl); transform: translateY(-1px); }

/* ── Loading ── */
.mr-cal-loading {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.7);
  border-radius: var(--mr-radius);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}
.mr-cal-spinner {
  width: 36px; height: 36px;
  border: 4px solid var(--mr-bleu);
  border-top-color: transparent;
  border-radius: 50%;
  animation: mr-spin .7s linear infinite;
}
@keyframes mr-spin { to { transform: rotate(360deg); } }

/* ── Responsive ── */
@media (max-width: 480px) {
  .mr-cal-day { min-height: 38px; font-size: .78rem; }
  .mr-cal-dow { font-size: .68rem; }
  .mr-cal-salle-tabs { flex-direction: column; }
  .mr-cal-selection-panel { flex-direction: column; align-items: flex-start; }
}

/* Jours trop proches (délai) : visible mais non sélectionnable */
.mr-day-trop-tot {
  background: #f5f5f5 !important;
  color: #aaa !important;
  cursor: not-allowed !important;
  border-color: transparent !important;
}
.mr-day-trop-tot .mr-cal-day-num { color: #bbb; }

/* ── Responsive calendrier ── */
.mr-cal-app { width: 100%; box-sizing: border-box; }

/* Cartes salle */
.mr-cal-salles-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.mr-cal-salles-cards .mr-salle-card-v2 {
  display: flex;
  height: 100%;
}
.mr-cal-salles-cards .mr-salle-card-v2 .mr-salle-card-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 14px;
}
@media (max-width: 540px) {
  .mr-cal-salles-cards { grid-template-columns: 1fr; grid-auto-rows: auto; }
}

/* Sur grand écran, calendrier plus grand */
@media (min-width: 900px) {
  .mr-cal-day { min-height: 70px; }
}
@media (max-width: 500px) {
  .mr-cal-day { min-height: 36px; font-size: .72rem; }
  .mr-cal-dow { font-size: .65rem; padding: 4px 2px; }
  .mr-cal-salles-cards { grid-template-columns: 1fr; }
  .mr-cal-selection-panel { flex-direction: column; }
  .mr-cal-sel-actions { width: 100%; }
  .mr-cal-btn-go { width: 100%; }
}

/* Carte salle active dans le calendrier */
.mr-cal-salles-cards .mr-salle-card-display .mr-salle-card-inner {
  transition: all .2s;
  cursor: pointer;
}
.mr-cal-salles-cards .mr-salle-card-display:hover .mr-salle-card-inner {
  border-color: var(--mr-bleu-cl, #2563a8);
  box-shadow: 0 2px 12px rgba(26,58,92,.15);
}
.mr-cal-salles-cards .mr-salle-card-display.mr-card-active .mr-salle-card-inner {
  border-color: var(--mr-bleu, #1a3a5c) !important;
  background: var(--mr-bleu-pale, #e8f0f9) !important;
  box-shadow: 0 0 0 3px rgba(26,58,92,.2) !important;
}

/* ── Barre détail salle sélectionnée ── */
.mr-cal-salle-detail {
  background: var(--mr-bleu, #1a3a5c);
  border-radius: var(--mr-radius, 10px);
  padding: 10px 18px;
  margin-bottom: 16px;
}
.mr-cal-detail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.mr-cal-detail-nom {
  color: #fff;
  font-size: .95rem;
  margin-right: 4px;
}
.mr-cal-salle-detail .mr-cal-info-chip {
  background: rgba(255,255,255,.15);
  color: #fff;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .78rem;
  font-weight: 600;
}
.mr-cal-salle-detail .mr-chip-caution {
  background: rgba(200,169,81,.25);
  border: 1px solid var(--mr-or, #c8a951);
  color: #ffeaa7;
}

/* ── Hauteur fixe forcée sur toutes les cartes du sélecteur ── */
.mr-cal-salles-cards .mr-salle-card-v2 .mr-salle-card-inner {
  min-height: 220px !important;
}

/* ── Bandeau info salle pour [calendrier_simple] ── */
.mr-cal-salle-bandeau {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #eaf0f8 0%, #ffffff 100%);
  border: 1px solid #c0d9f0;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 0.95rem;
}
.mr-cal-salle-bandeau-icon { font-size: 1.4rem; }
.mr-cal-salle-bandeau-label { color: #555; }
.mr-cal-salle-bandeau-nom {
  color: #1a3a5c;
  font-size: 1.05rem;
  font-weight: 700;
}
@media (max-width: 480px) {
  .mr-cal-salle-bandeau { font-size: 0.85rem; padding: 10px 14px; }
}