/* =========================
   PLANNING.CSS (clean, sans conflits)
   ========================= */

body.page-planning .fc-scroller.fc-time-grid-container{
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* On neutralise l'ancien fond image du main.css */
body.page-planning .bg_calUser{
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(135deg, #0f172a 0%, #111827 45%, #0b1220 100%) !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* Tout doit passer au-dessus du fond */
body.page-planning .calUserWrap{
  position: relative;
  z-index: 2;
  padding: 12px 18px 18px;
  margin-left: 72px; /* ton menu actuel est un menu étroit */
}

/* Badge carnet */
body.page-planning .calCredits{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 14px;
  margin: 6px 0 12px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-weight: 900;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Important : wrapper ne doit pas limiter */
body.page-planning #wrapper{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Calendrier : prend la largeur dispo */
body.page-planning #calendar{
  width: calc(100vw - 100px) !important;  /* 72px + marge */
  max-width: none !important;
  margin: 0 !important;

  padding: 14px !important;
  border-radius: 18px !important;

  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow: 0 20px 65px rgba(0,0,0,0.45) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Fond interne FullCalendar */
body.page-planning .fc-view-container{
  background: rgba(255,255,255,0.94) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Toolbar */
body.page-planning .fc-toolbar.fc-header-toolbar{
  margin: 0 0 12px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}

body.page-planning .fc-center h2{
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 15px !important;
}

/* Boutons */
body.page-planning .fc button{
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  font-weight: 900 !important;
  padding: 6px 10px !important;
}

/* Lisibilité events : ne pas couper texte */
body.page-planning .fc-time-grid-event,
body.page-planning .fc-time-grid-event .fc-content{
  overflow: visible !important;
}

body.page-planning .fc-time-grid-event .fc-time,
body.page-planning .fc-time-grid-event .fc-title{
  white-space: normal !important;
  overflow: visible !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  font-size: 12px !important;
}

/* Compteur X/Y dans le coin (toujours visible) */
body.page-planning .fc-time-grid-event .att{
  position: absolute !important;
  top: 2px !important;
  right: 6px !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,0.65) !important;
  color: #fff !important;
  font-weight: 900 !important;
  z-index: 5 !important;
}

/* Bandeau "Réservation OK" */
body.page-planning .fc-time-grid-event .info{
  position: absolute !important;
  top: -12px !important;
  left: 0 !important;
  right: 0 !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  background: rgba(255,0,0,0.35) !important;
  color: #fff !important;
}
/* ===== FIX STABILITÉ FULLCALENDAR v3 ===== */

/* Évite les largeurs foireuses quand le conteneur change */
body.page-planning #calendar,
body.page-planning .fc,
body.page-planning .fc-view,
body.page-planning .fc-view-container{
  min-width: 0 !important;
}

/* Les events : on évite les overflow "hors case" qui provoquent des décalages */
body.page-planning .fc-time-grid-event{
  overflow: hidden !important;        /* IMPORTANT : stabilise la grille */
  border-radius: 10px !important;
}

/* On garde le texte lisible sans casser la hauteur */
body.page-planning .fc-time-grid-event .fc-content{
  position: relative !important;
  height: 100% !important;
  overflow: hidden !important;        /* pas de débordement */
  padding: 4px 34px 4px 6px !important; /* laisse la place au badge X/Y à droite */
  line-height: 1.15 !important;
}

/* Heure + titre : pas coupés */
body.page-planning .fc-time-grid-event .fc-time,
body.page-planning .fc-time-grid-event .fc-title{
  display: block !important;
  white-space: nowrap !important;     /* plus stable que normal/wrap sur v3 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Badge Réservation OK : on le met DANS le créneau (pas au dessus) */
body.page-planning .fc-time-grid-event .info{
  position: absolute !important;
  top: 2px !important;
  left: 6px !important;
  right: 34px !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  background: rgba(255,0,0,0.35) !important;
  color: #fff !important;
  pointer-events: none !important;
}

/* Badge X/Y : toujours visible, mais dans le créneau */
body.page-planning .fc-time-grid-event .att{
  position: absolute !important;
  top: 2px !important;
  right: 6px !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,0.65) !important;
  color: #fff !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
/* === FIX: lisibilité events jaunes === */
body.page-planning .fc-event,
body.page-planning .fc-event .fc-title,
body.page-planning .fc-event .fc-time{
  color: #0f172a !important;      /* texte foncé */
  text-shadow: none !important;
  font-weight: 900 !important;
}
/* =========================
   PLANNING – FINITIONS
   ========================= */

/* 1) Fond : moins sombre (bleu + clair + léger dégradé) */
body.page-planning{
  background: linear-gradient(135deg, #334155 0%, #0f172a 100%) !important;
}

/* Si tu utilises encore un overlay .bg_calUser, on le rend plus léger */
body.page-planning .bg_calUser{
  opacity: 0.18 !important;         /* baisse l’effet “sombre” */
  filter: saturate(0.9) brightness(1.15) !important;
}

/* 2) Heures à gauche : plus lisibles */
body.page-planning .fc-axis,
body.page-planning .fc-time-grid .fc-axis{
  background: rgba(255,255,255,0.75) !important;
}

body.page-planning .fc-axis span,
body.page-planning .fc-time-grid .fc-axis span{
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 12px !important;
}

/* Lignes + texte des heures (selon version FullCalendar) */
body.page-planning .fc-slats .fc-time{
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  opacity: 1 !important;
}

/* Un poil plus de contraste sur la grille */
body.page-planning .fc-slats td{
  border-color: rgba(15,23,42,0.14) !important;
}

/* ============ MOBILE (portrait) : toolbar FullCalendar propre ============ */
@media (max-width: 767px) {

  /* Conteneur toolbar */
  .fc-toolbar.fc-header-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:10px;
    background: rgba(255,255,255,0.06);
    border-radius:14px;
  }

  /* Les 3 zones prennent toute la largeur */
  .fc-toolbar .fc-left,
  .fc-toolbar .fc-center,
  .fc-toolbar .fc-right{
    float:none !important;
    width:100% !important;
    text-align:center !important;
  }

  /* Ligne 1 = aujourd'hui (seul) */
  .fc-toolbar .fc-left{
    order:1;
  }

  /* Ligne 2 = titre + prev/next (collés) */
  .fc-toolbar .fc-center{
    order:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
  }

  .fc-toolbar .fc-center h2{
    margin:0;
    font-size:16px;
    line-height:1.2;
    flex: 0 1 auto;
  }

  /* Ligne 3 = vues (Semaine/Jour) */
  .fc-toolbar .fc-right{
    order:3;
  }

  /* Boutons plus compacts */
  .fc-toolbar .fc-button{
    border-radius:18px;
    padding:6px 12px;
    font-size:13px;
  }

  /* Réduit l’espace interne des groupes */
  .fc-toolbar .fc-button-group{
    display:inline-flex;
    gap:8px;
  }
}
/* iPhone: autoriser le scroll dans la grille horaire */
@media (max-width: 767px) {

  /* Important: le wrapper ne doit pas bloquer */
  #wrapper,
  #calendar,
  .fc-view-container {
    overflow: visible !important;
  }

  /* Le vrai conteneur scrollable FullCalendar v3 */
  .fc-scroller.fc-time-grid-container,
  .fc-time-grid-container {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch; /* scroll iOS fluide */
    max-height: 70vh;                  /* ajuste si tu veux + ou - */
    touch-action: pan-y;
  }

  /* Evite qu’un overlay capte le doigt */
  #loadingCal,
  .offcanvas-menu-overlay,
  .search-model {
    pointer-events: none !important;
  }
}
@media (max-width: 767px) {
  .fc-scroller.fc-time-grid-container{
    height: 70vh !important; /* ou 75vh */
    max-height: none !important;
  }
}
body.page-planning .fc-state-active {
  background-color: #2b6cff !important;
  border-color: #2b6cff !important;
  color: #fff !important;
}

body.page-planning .fc-button {
  color: #3b3b3b !important;
}