.wc-container {
  font-size: 14px;
  font-family: arial, helvetica;
}

/* --- ajouts anti-flicker / cohérence layout --- */
.wc-day-column-inner,
.wc-lane-rail,
.wc-cal-event,
.wc-cal-event .wc-time {
  box-sizing: border-box;
}
.wc-lane-rail { 
  position: relative; 
  height: 100%; 
  width: 100%;
  overflow: hidden;          /* évite tout débordement horizontal transient */
}
.wc-cal-event {
  transition: none;          /* pas d’animation sur left/width */
  will-change: top, height, left, width;
  contain: layout paint;     /* isolement du layout pendant les maj */
  transform: translateZ(0);  /* aide perf (compositing) */
}
/* En mode lanes, le JS pilote la largeur → pas de width:100% ici */
.wc-lane-rail > .wc-cal-event { width: auto; }

/* (optionnel) styles des chips propriétaires si utilisés */
.wc-owner-heads{display:flex;gap:6px;margin-top:2px}
.wc-owner-head{
  flex:1 1 0;min-width:0;font-size:11px;line-height:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border:1px solid #e5e7eb;border-radius:6px;padding:1px 6px;background:#fff
}

/* --- calques / z-index (overlay < grid < lanes < events < drag) --- */
.wc-opening-layer { z-index: 0 !important; pointer-events:none; }
.wc-time-slots     { position:absolute; width:100%; z-index: 1; }
.wc-owner-lanes    { z-index: 1; pointer-events:none; }  /* décor de lanes */
.wc-cal-event      { z-index: 2; }                       /* cases au-dessus */
.wc-container .ui-draggable-dragging { z-index: 1000; }  /* helper au top */

/* ------------------------------------------------ */

.wc-toolbar { padding: 1em; font-size:0.8em; }
.wc-toolbar .wc-nav { float:left; }
.wc-toolbar .wc-display { float: right; }
.wc-toolbar button { margin-top: 0; margin-bottom: 0; }
.wc-toolbar .wc-title { text-align: center; padding:0; margin:0; }

.wc-container table { border-collapse: collapse; border-spacing: 0; }
.wc-container table td { margin: 0; padding: 0; }

.wc-header { background: #eee; border-width:1px 0; border-style:solid; }
.wc-header table{ width: 100%; table-layout:fixed; }

.wc-grid-timeslot-header,
.wc-header .wc-time-column-header { width: 45px; }
.wc-header .wc-scrollbar-shim { width: 16px; }
.wc-header .wc-day-column-header { text-align: center; padding: 0.4em; }
.wc-header .wc-user-header{ text-align: center; padding: 0.4em 0; overflow:hidden; }

.wc-grid-timeslot-header { background: #eee; }

.wc-scrollable-grid {
  overflow: auto;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  position: relative;
  background-color: #fff;
  width: 100%;
}

table.wc-time-slots {
  width: 100%;
  table-layout: fixed;
  cursor: default;
  overflow:hidden;
}

.wc-day-column {
  width: 13.5%;
  overflow: visible;
  vertical-align: top;
}
.wc-day-column-header{border-width: 0 0 1px 3px; border-style: solid;border-color:transparent;}
.wc-scrollable-grid .wc-day-column-last,
.wc-scrollable-grid .wc-day-column-middle{border-width: 0 0 0 1px; border-style: dashed;}
.wc-scrollable-grid .wc-day-column-first{border-width: 0 0 0 3px; border-style: double;}

.wc-day-column-inner {
  width: 100%;
  position:relative;
  overflow-x: hidden; /* pas de scroll horizontal parasite en lanes */
}

.wc-no-height-wrapper{
  position:relative;
  overflow: visible;
  height: 0px;
}

/*.wc-time-slot-wrapper {  top: 3px;  }*/

.wc-oddeven-wrapper .wc-full-height-column{
  opacity: 0.4; /* Modern browsers */
}
.wc-freebusy-wrapper .wc-freebusy{
  opacity: 0.4; /* Modern browsers */
}

/* (z-index déplacé plus haut) */
.wc-time-slots { position: absolute; width: 100%; }

.wc-column-odd,
.wc-column-even.ui-state-hover{background-image:none;border:none;}

.wc-header .wc-today.ui-state-active{background-image:none;}
.wc-header .wc-today.wc-day-column-header{border-width:0 3px; border-style: solid;}
.wc-header .wc-user-header{border-width:0;}

.wc-time-slots .wc-day-column.ui-state-default{background:transparent;}
.wc-time-slots .wc-today.ui-state-active{background-image:none;}
.wc-header .wc-today.ui-state-active.wc-day-column-middle{border-width:0;}
.wc-header .wc-today.ui-state-active.wc-day-column-first{border-left-width:3px;}
.wc-header .wc-today.ui-state-active.wc-day-column-last{border-right-width:3px;}

.wc-full-height-column{ display:block; /* width:100%; */ }

.wc-time-header-cell { padding: 5px; height: 80px; /* reference height */ }
.wc-time-slot { border-bottom: 1px dotted #ddd; }

.wc-hour-header { text-align: right; }
.wc-hour-header.ui-state-active,
.wc-hour-header.ui-state-default{ border-width:0 0 1px 0; }

.wc-hour-end, .wc-hour-header { border-bottom: 1px solid #ccc; color: #555; }

.wc-business-hours {
  background-color: #E6EEF1;
  border-bottom: 1px solid #ccc;
  color: #333;
  font-size: 1.4em;
}
.wc-business-hours .wc-am-pm { font-size: 0.6em; }

.wc-day-header-cell { text-align: center; vertical-align: middle; padding: 5px; }
.wc-time-slot-header .wc-header-cell { text-align: right; padding-right: 10px; }

.wc-cal-event {
  background-color: #68a1e5;
  opacity: 1;                  /* Modern browsers */
  position: absolute;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  width: 100%;                 /* par défaut (mode non-lanes) */
  display: block !important;   /* ← corrige l’ancien display:none */
}

.wc-cal-event-delete { float: right; cursor: pointer; width: 16px; height: 16px; }
.wc-cal-event.ui-resizable-resizing { cursor: s-resize; }

.wc-cal-event .wc-time {
  background-color: #2b72d0;
  border: 1px solid #1b62c0;
  color: #fff;
  padding: 0;
  font-weight: bold;
  /* Ne pas afficher l'horaire texte et réduire la zone de prise en main */
  height: 10px;           /* ≈ 15 minutes avec timeslotsPerHour=4 et timeslotHeight=10 */
  line-height: 10px;
  font-size: 0 !important; /* masque le texte tout en gardant la barre de drag */
  overflow: hidden;
}
.wc-container .ui-draggable .wc-time { cursor: move; }
.wc-cal-event .wc-title { position: relative; }

.wc-container .ui-resizable-s {
  height: 10px;
  line-height: 10px;
  bottom: -2px;
  font-size: .75em;
}

/* helper de drag au-dessus de tout */
.wc-container .ui-draggable-dragging { z-index: 1000; }

.free-busy-busy{
  background:url("./libs/css/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png") repeat scroll 50% 50% #666666;
}

/** hourLine */
.wc-hourline {
  height: 0pt;
  border-top: 2px solid #FF7F6E;
  overflow: hidden;
  position: absolute;
  width: inherit;
}

/* IE6/IE7 hacks historiques (inchangés) */
* html .wc-no-height-wrapper{position:absolute;}
* html .wc-time-slot-wrapper{top:3px;}
* html .wc-grid-row-oddeven{top:2px;}
* html .wc-grid-row-freebusy{top:1px;}
*:first-child+html .wc-no-height-wrapper{position:relative;}
*:first-child+html .wc-time-slot-wrapper{top:3px;}
*:first-child+html .wc-grid-row-oddeven{top:2px;}
*:first-child+html .wc-grid-row-freebusy{top:1px;}
*:first-child+html .wc-time-slots .wc-today{background:none;}
/* ⇩⇩ Kill tout scroll dans les colonnes jours ⇩⇩ */
.wc-day-column,
.wc-day-column-inner,
.wc-lane-rail {
  overflow: visible !important;       /* aucune barre interne */
  -ms-overflow-style: none;           /* IE/Edge legacy */
  scrollbar-width: none;              /* Firefox */
}
.wc-day-column-inner::-webkit-scrollbar { /* Chrome/Safari */
  width: 0 !important;
  height: 0 !important;
}

/* Le SEUL endroit qui scrolle verticalement */
.wc-scrollable-grid {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Sécurité : pas de hauteur figée qui fabriquerait un scroll local */
.wc-day-column,
.wc-day-column-inner {
  max-height: none !important;
}

/* Les overlays décoratifs ne déclenchent pas de scroll */
.wc-owner-lanes,
.wc-opening-layer {
  pointer-events: none;
  overflow: visible !important;
}
/* === Multi-user: séparateurs de colonnes (au-dessus des events) === */
.wc-day-column-inner { position: relative; }

.wc-owner-lanes {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 0 !important;            /* pas d'espace: délimitation nette */
  pointer-events: none;         /* ne bloque pas les clics sur les events */
  z-index: 20 !important;       /* au-dessus des events (sauf pendant drag) */
}

.wc-owner-lane { position: relative; }

/* Trait vertical à gauche de chaque lane sauf la première */
.wc-owner-lane + .wc-owner-lane::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #cbd5e1;         /* gris doux ; passe en #94a3b8 si tu veux plus marqué */
  opacity: .95;
}

/* Pendant un drag, l’event a un z-index élevé, on veut quand même voir le trait */
/* (les traits restent visibles car overlay a z-index:20 et pointer-events:none) */

/* En-têtes multi-user: même principe visuel */
.wc-header .wc-day-column-header .wc-owner-heads { gap: 0 !important; }
.wc-header .wc-day-column-header .wc-owner-head + .wc-owner-head {
  border-left: 1px solid #cbd5e1;
}
#calendar .wc-day-column-inner{ position:relative; z-index:0; }
#calendar .wc-time-slots{ position:relative; z-index:1; }

/* Les events au-dessus des traits d’heures */
#calendar .wc-cal-event{ position:relative; z-index:2; }
#calendar .wc-cal-event .ui-resizable-handle{ z-index:3; }

/* Overlays décoratifs toujours derrière et non cliquables */
#calendar .wc-opening-layer,
#calendar .wc-owner-lanes{ pointer-events:none !important; z-index:0 !important; }

/* Rail des lanes du plugin : jamais interactif et toujours derrière */
#calendar .wc-lane-rail{ pointer-events:none !important; z-index:0 !important; }  

/* Grille d'heures (traits) derrière */
#calendar .wc-time-slots,
#calendar .wc-time-row,
#calendar .wc-time-slot {
  position: relative;
  z-index: 0 !important;
}

/* Événements devant la grille */
#calendar .wc-cal-event {
  position: relative;
  z-index: 1 !important;
}
/* Poignées de resize au-dessus de l'event */
#calendar .wc-cal-event .ui-resizable-handle {
  z-index: 2 !important;
}

/* Overlays décoratifs & rail de lanes : toujours derrière et non cliquables */
#calendar .wc-lane-rail,
#calendar .wc-opening-layer,
#calendar .wc-owner-lanes {
  pointer-events: none !important;
  z-index: 0 !important;
}

/* (optionnel) ligne “maintenant” du plugin sous les events si elle existe */
#calendar .wc-hourline,
#calendar .wc-current-time {
  z-index: 0 !important;
}
#calendar .wc-day-column-inner { 
  overflow: visible !important; 
}
#calendar .wc-cal-event.ui-draggable-dragging { 
  z-index: 9999 !important; 
}

/* Quick wins perf */
.wc-scrollable-grid { contain: size layout style paint; }
.wc-day-column-inner,
.wc-time-slots        { contain: layout paint; }

.wc-day-column-inner,
.wc-time-slots,
.wc-cal-event         { box-sizing: border-box; will-change: top,height,left,width; }

.ui-resizable-handle.ui-resizable-s{
  cursor: s-resize !important;
  pointer-events: auto !important;
}

/* Empêche tout overlay plein blanc de masquer la grille */
.wc-day-column-inner > * { background: transparent; }
.wc-lane-rail { background: transparent !important; }

/* En dernier recours, renforce les lignes */
.wc-grid-row-events .wc-day-column-inner::before,
.wc-time-slot-wrapper .wc-time-slots::before {
  --wc-grid-slot-color: rgba(0,0,0,.2);
  --wc-grid-hour-color: rgba(0,0,0,.5);
}
.dark .wc-grid-row-events .wc-day-column-inner::before,
.dark .wc-time-slot-wrapper .wc-time-slots::before,
[data-theme="dark"] .wc-grid-row-events .wc-day-column-inner::before,
[data-theme="dark"] .wc-time-slot-wrapper .wc-time-slots::before {
  --wc-grid-slot-color: rgba(255,255,255,.25);
  --wc-grid-hour-color: rgba(255,255,255,.6);
}
.wc-grid-row-events .wc-day-column-inner::before{content:none !important;}

/* === PATCH – remettre le scroll horizontal et la grille visibles === */

/* 1) Le corps doit pouvoir défiler horizontalement si le colgroup dépasse */
.wc-scrollable-grid {
  overflow-x: auto !important;   /* ← remplace le hidden !important */
  overflow-y: auto !important;
}

/* 2) La table des créneaux NE DOIT PAS être en position:absolute */
table.wc-time-slots {
  position: relative !important;  /* au lieu d'absolute */
  width: 100%;
  table-layout: fixed;
  z-index: 1;
}

/* 3) Ne pas forcer les jours en pourcentage : laisser le <colgroup> décider */
.wc-day-column,
.wc-header .wc-day-column-header {
  width: auto !important;         /* neutralise le 13.5% */
}

/* 4) Assurer la cliquabilité (aucun parent ne doit bloquer les events) */
.wc-day-column-inner,
.wc-day-column-inner > .wc-lane-rail,
.wc-day-column-inner .wc-cal-event,
.wc-day-column-inner .wc-cal-event * {
  pointer-events: auto !important;
}

/* 5) Z-index simple et cohérent : grille < events */
.wc-time-slots { z-index: 0 !important; }
.wc-cal-event  { z-index: 2 !important; }

/* 6) (facultatif) Renforcer la visibilité des lignes horaires */
.wc-time-slot { border-bottom: 1px dotted #ddd !important; }
.wc-hour-end, .wc-hour-header { border-bottom: 1px solid #ccc !important; }
/* Laisser le header suivre les <col> */
.wc-header table { table-layout: fixed; }
.wc-header .wc-day-column-header { width: auto !important; } /* ok : "auto" n'écrase pas les <col> */

/* Le body doit rester en flux normal pour que sticky fonctionne */
table.wc-time-slots { position: relative !important; width: auto !important; }

/* Colonne des heures (header + corps) sticky à gauche */
.wc-header .wc-time-column-header,
.wc-grid-row-timeslot > .wc-grid-timeslot-header,
.wc-grid-row-oddeven > .wc-grid-timeslot-header,
.wc-grid-row-freebusy > .wc-grid-timeslot-header,
.wc-grid-row-events  > .wc-grid-timeslot-header{
  position: sticky;
  left: 0;
  z-index: 4;                   /* au-dessus des cellules jour et des events */           /* header */
}

/* Fond du time header dans le corps (harmonisé) */
.wc-grid-timeslot-header { background: #f8f8f8; }

/* Les cellules jour n'imposent plus de % (le <colgroup> décide) */
.wc-grid-row-events .wc-day-column { width: auto !important; }

.wc-header table,
table.wc-time-slots {
  table-layout: fixed !important;
  width: 100% !important;
}
/* ===== Mode multi-user : scroller partagé + headers sticky ===== */
.wc-multi-user .wc-scroller {
  overflow-x: auto;          /* jours suivent le scroll horizontal */
  overflow-y: visible;       /* le scroll vertical reste dans .wc-scrollable-grid */
}

/* Le header reste collé en haut quand on scrolle verticalement */
.wc-multi-user .wc-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
}

/* La barre des utilisateurs reste au tout premier plan du header */
.wc-multi-user .wc-header .wc-user-strip {
  position: sticky;
  top: 0;           /* toujours au tout début du header */
  z-index: 60;      /* au-dessus du reste du header */
  background: inherit;
}

/* Le tableau de header s’étire pour couvrir la largeur des lanes */
.wc-multi-user .wc-header table {
  width: max-content;         /* suit la largeur cumulée des lanes */
  table-layout: fixed;
}

/* IMPORTANT : la table de la grille garde 100% (vertical scrolling normal) */
.wc-multi-user table.wc-time-slots {
  table-layout: fixed;
  width: 100%;
}

/* La colonne des heures (header + grille) reste figée à gauche */
.wc-multi-user .wc-header .wc-time-column-header,
.wc-multi-user .wc-grid-timeslot-header {
  position: sticky;
  left: 0;
  z-index: 4!important;
}

/* Verrouille la largeur de la colonne heures pour l’alignement (ajuste si besoin) */
.wc-multi-user .wc-header .wc-time-column-header,
.wc-multi-user .wc-grid-timeslot-header {
  min-width: 60px;
  width: 60px;
  max-width: 60px;
}

/* Quand la vue n’est PAS multi-user : comportement inchangé (plein écran) */
.wc-container:not(.wc-multi-user) .wc-header table,
.wc-container:not(.wc-multi-user) table.wc-time-slots {
  table-layout: fixed;
  width: 100%;
}

.wc-scrollable-grid .wc-header{ position: sticky; top:0; z-index:4; }
.wc-grid-timeslot-header, .wc-time-column-header{
  position: sticky; left:0; z-index:3; background:#fff; /* ou ta couleur */
}

#calendar .wc-time-slot,
#calendar .wc-time-slot.wc-hour-end {
  height: 10px !important;        /* = options.timeslotHeight */
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  box-sizing: content-box !important;
}

/* pas de “réinjection” de styles via enfants/pseudo-éléments */
#calendar .wc-time-slot *,
#calendar .wc-time-slot::before,
#calendar .wc-time-slot::after {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* l’étiquette d’heure ne doit pas gonfler la colonne */
#calendar .wc-time-header-cell {
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: content-box !important;
}

/* si tu as des traits d’heure, fais-les en background plutôt qu’en border */
#calendar .wc-day-column-inner {
  background-image: linear-gradient(to bottom, rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 100% var(--wc-slot); /* --wc-slot est déjà posé dans ton code */
}

/* — Rendre les scrollbars horizontales plus visibles — */
#calendar .wc-scrollable-grid::-webkit-scrollbar,
#calendar .wc-scrollbar-top::-webkit-scrollbar{
  height: 12px; /* épaisseur */
}
#calendar .wc-scrollable-grid::-webkit-scrollbar-track,
#calendar .wc-scrollbar-top::-webkit-scrollbar-track{
  background: rgba(0,0,0,.08);
}
#calendar .wc-scrollable-grid::-webkit-scrollbar-thumb,
#calendar .wc-scrollbar-top::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.35);
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,.4);
}
/* Firefox */
#calendar .wc-scrollable-grid,
#calendar .wc-scrollbar-top{
  scrollbar-width: thin;               /* firefox */
  scrollbar-color: rgba(0,0,0,.45) rgba(0,0,0,.08);
}

/* — Barre de scroll horizontale du haut — */
#calendar .wc-scrollbar-top{
  height: 16px;            /* laisse uniquement le "rail" */
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(0,0,0,.03);
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin: 6px 0 8px 0;     /* au-dessus du grid */
}
#calendar .wc-scrollbar-top .wc-scrollbar-inner{
  height: 1px;             /* minime: sert juste de largeur */
}
#calendar .wc-scrollbar-top{
  height:16px; overflow-x:auto; overflow-y:hidden;
  background: rgba(0,0,0,.03); border:1px solid #e5e7eb;
  border-radius:6px; margin:6px 0 8px 0;
}
#calendar .wc-scrollbar-top .wc-scrollbar-inner{ height:1px; }

/* Scrollbars plus visibles (Chrome/Edge/Safari) */
#calendar .wc-scrollbar-top::-webkit-scrollbar{ height:12px; }
#calendar .wc-scrollbar-top::-webkit-scrollbar-track{ background:rgba(0,0,0,.08); }
#calendar .wc-scrollbar-top::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.35); border-radius:8px; border:2px solid rgba(255,255,255,.4);
}
/* Firefox */
#calendar .wc-scrollbar-top{ scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.45) rgba(0,0,0,.08); }


.wc-cal-event.wc-new{
  z-index: 3;
  background: rgba(0, 136, 255, .15);
  border: 1px dashed #08f;
}
.wc-lane-rail{ z-index: 0; }

.wc-day-column-inner, .wc-lane-rail { padding:0; }
.wc-cal-event { box-sizing:border-box; }
.wc-cal-event.wc-new { border-left-width:0; border-right-width:0; }
#calendar .wc-day-column-inner {
  background-image:
    /* ligne MAJEURE toutes les heures (plus foncée/épaisse) */
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--wc-hour) - 1px),
      rgba(0,0,0,.35) calc(var(--wc-hour) - 1px),
      rgba(0,0,0,.35) var(--wc-hour)
    ),
    /* lignes MINEURES toutes les 15 min */
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.08) 0,
      rgba(0,0,0,.08) 1px,
      transparent 1px,
      transparent var(--wc-slot)
    ) !important;
  background-size: 100% var(--wc-hour), 100% var(--wc-slot) !important;
  background-repeat: repeat, repeat !important;
  background-attachment: local, local !important; /* suit le scroll */
}
.ui-widget-content {
  width: fit-content;
}
