/* assets/css/skin-glass.css — v4.9
   - Planning transparent (glass)
   - Légende au-dessus du header (haut droit)
   - Flèches mois en haut gauche/droite
   - Boutons originaux "Continuer/Retour" flottants (viewport)
   - Popup stylée (Midi/Soir) — texte des boutons en blanc
   - Masquage PERMANENT de la rangée native Midi/Soir
   - Police cohérente avec tunnel.css
*/

/* ===== POLICE COHÉRENTE POUR LE THÈME GLASS ===== */
.angemont-planning,
.angemont-planning *,
.angemont-planning *::before,
.angemont-planning *::after {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

:root {
  --at-glass-alpha: .22;
  --at-glass-blur: 10px;
  --at-glass-border: rgba(212, 175, 55, .35);
  --at-text-strong: rgba(255, 255, 255, .92);
  --at-text-dim: rgba(255, 255, 255, .70);
  --legend-gap: 10px;
  --fab-bottom: 18px;
  --fab-right: 22px;
  --fab-left: 22px;

  --at-midi: #6c3aff;
  --at-soir: #d4af37;
  --at-pill-bg: rgba(255, 255, 255, .06);
  --at-pill-bg-hover: rgba(255, 255, 255, .12);
  --at-pill-ring: rgba(255, 255, 255, .32);
}

/* Base transparent */
.angemont-planning {
  position: relative;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--at-text-strong);
}

.angemont-planning .at-panel,
.angemont-planning .at-calendar,
.angemont-planning .at-calendar-header,
.angemont-planning .at-month-grid,
.angemont-planning [class*="container"],
.angemont-planning [class*="wrapper"],
.angemont-planning [class*="content"],
.angemont-planning [class*="box"],
.angemont-planning [class*="inner"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Flèches header */
.angemont-planning .at-calendar-header,
.angemont-planning [class*="calendar-header"] {
  position: relative;
  z-index: 60;
  padding: 8px 0;
  min-height: 48px;
}

.angemont-planning .at-calendar-header [class*="prev"],
.angemont-planning .at-calendar-header .at-nav-prev,
.angemont-planning .at-calendar-header .fc-prev-button,
.angemont-planning [class*="calendar-header"] [class*="prev"] {
  position: absolute !important;
  top: 8px;
  left: 8px;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.angemont-planning .at-calendar-header [class*="next"],
.angemont-planning .at-calendar-header .at-nav-next,
.angemont-planning .at-calendar-header .fc-next-button,
.angemont-planning [class*="calendar-header"] [class*="next"] {
  position: absolute !important;
  top: 8px;
  right: 8px;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Légende au-dessus */
.angemont-planning .at-legend,
.angemont-planning .legend,
.angemont-planning [class*="legend"] {
  position: absolute;
  top: 0;
  right: 12px;
  transform: translateY(calc(-100% - 10px));
  display: flex;
  gap: var(--legend-gap);
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  z-index: 70;
  background: rgba(10, 10, 10, calc(var(--at-glass-alpha)+.10));
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border: 1px solid var(--at-glass-border);
  color: var(--at-text-strong);
}

/* Boutons originaux flottants viewport (ne pas cloner, on déplace les vrais) */
.at-fixed-next {
  position: fixed !important;
  bottom: calc(var(--fab-bottom) + env(safe-area-inset-bottom)) !important;
  right: calc(var(--fab-right) + env(safe-area-inset-right)) !important;
  z-index: 10060 !important;
}

.at-fixed-prev {
  position: fixed !important;
  bottom: calc(var(--fab-bottom) + env(safe-area-inset-bottom)) !important;
  left: calc(var(--fab-left) + env(safe-area-inset-left)) !important;
  z-index: 10060 !important;
}

/* Popup */
#at-session-overlay {
  position: fixed;
  inset: 0;
  z-index: 10070;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
}

#at-session-overlay.is-open {
  display: flex;
}

#at-session-modal {
  min-width: 240px;
  max-width: 300px;
  width: calc(100% - 80px);
  background: rgba(20, 20, 20, .86);
  border: 1px solid var(--at-glass-border);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  color: #fff;
  /* <-- texte du modal en blanc */
  padding: 22px;
}

/* Styles mobiles RADICAUX pour skin-glass */
@media (max-width: 768px) {
  #at-session-modal {
    width: calc(100% - 100px) !important;
    max-width: 280px !important;
    min-width: 220px !important;
  }
}

@media (max-width: 640px) {
  #at-session-modal {
    width: calc(100% - 120px) !important;
    max-width: 260px !important;
    min-width: 200px !important;
  }
}

@media (max-width: 480px) {
  #at-session-modal {
    width: calc(100% - 140px) !important;
    max-width: 240px !important;
    min-width: 180px !important;
  }
}

#at-session-modal h3 {
  margin: 0 0 16px;
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: .3px;
}

/* Boutons "Midi" / "Soir" */
#at-session-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 8px;
  flex-wrap: wrap;
}

.at-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  background: var(--at-pill-bg);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
  font-weight: 700;
  color: #fff !important;
  /* <-- texte des boutons en blanc */
}

.at-pill:focus,
.at-pill:hover {
  background: var(--at-pill-bg-hover);
  outline: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45), 0 0 0 2px var(--at-pill-ring) inset;
  color: #fff !important;
  /* <-- conserve blanc au survol/focus */
}

.at-pill:active {
  transform: translateY(1px);
}

.at-pill .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.at-pill-midi .dot {
  background: var(--at-midi);
  box-shadow: 0 0 0 3px rgba(108, 58, 255, .25);
}

.at-pill-soir .dot {
  background: var(--at-soir);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .25);
}

#at-session-cancel {
  margin-top: 14px;
  text-align: center;
  font-size: .92rem;
  opacity: .85;
  cursor: pointer;
  color: #fff;
}

#at-session-cancel:hover {
  text-decoration: underline;
}

/* Masquage PERMANENT de la rangée native sous le calendrier (on la garde cachée pour la logique) */
.angemont-planning [data-at-sessions-row] {
  display: none !important;
  visibility: hidden !important;
}

.angemont-planning .at-sessions {
  display: none !important;
  visibility: hidden !important;
}

.angemont-planning [class*="sessions"]:not([id*="session-overlay"]):not([id*="session-modal"]):not(.legend) {
  display: none !important;
  visibility: hidden !important;
}

/* éléments explicitement cachés côté JS/PHP */
.angemont-planning .at-force-hide {
  display: none !important;
  visibility: hidden !important;
}