@charset "UTF-8";


/* ========== PALETTES ==========
   Tu peux changer la palette en ajoutant une classe au widget :
   .esth-cal           -> palette rose (défaut)
   .esth-cal.esth-ocean -> palette bleue
   .esth-cal.esth-sunset-> palette sunset
   .esth-cal.esth-dark  -> mode sombre (ajoute juste la classe) */

/* Base (rose) */
.esth-cal{
  --esth-primary: #E50053;
  --esth-primary-600:#c40047;
  --esth-accent:  #2563eb;
  --esth-good:    #10b981;
  --esth-warn:    #f59e0b;
  --esth-bad:     #ef4444;

  --esth-surface: #ffffff;
  --esth-bg:      #f7f8fb;
  --esth-border:  #e8eaf0;
  --esth-text:    #111318;

  --esth-radius:  18px;
  --esth-shadow:  0 12px 30px rgba(17,19,24,.08);
}

/* Océan */
.esth-cal.esth-ocean{
  --esth-primary:#2563eb; --esth-primary-600:#1e4fd2;
  --esth-accent:#14b8a6;
}

/* Sunset */
.esth-cal.esth-sunset{
  --esth-primary:#ff7a00; --esth-primary-600:#e06600;
  --esth-accent:#e11d48;
}

/* Dark mode (tu peux la combiner à n'importe quelle palette) */
.esth-cal.esth-dark{
  --esth-surface:#0f172a; --esth-bg:#0b1324; --esth-border:#1e293b; --esth-text:#e5e7eb;
}

/* ======= Conteneur carte + header dégradé ======= */
.esth-cal{
  background:var(--esth-surface);
  border:1px solid var(--esth-border);
  border-radius:22px; overflow:hidden;
  box-shadow:var(--esth-shadow);
}
.esth-cal .fc-header-toolbar{
  padding:14px 16px;
  background:linear-gradient(135deg, var(--esth-primary) 0%, var(--esth-accent) 100%);
  color:#fff;
}
.esth-cal .fc .fc-toolbar-title{color:#fff;font-weight:900;letter-spacing:.2px}
.esth-cal .fc .fc-button{
  background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:12px; padding:.45rem .8rem; backdrop-filter:saturate(120%) blur(0px)
}
.esth-cal .fc .fc-button:hover,
.esth-cal .fc .fc-button-primary.fc-button-active{
  background:#fff; color:var(--esth-primary); border-color:#fff;
}

/* ======= Grille (mois/semaine) jolie & interactive ======= */
.esth-cal .fc-theme-standard td, .esth-cal .fc-theme-standard th{border-color:var(--esth-border)}
.esth-cal .fc .fc-col-header-cell-cushion{font-weight:800;color:#334155}
.esth-cal.esth-dark .fc .fc-col-header-cell-cushion{color:#cbd5e1}

.esth-cal .fc .fc-daygrid-day{
  background:linear-gradient(180deg, var(--esth-bg), #fff 18%);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.esth-cal.esth-dark .fc .fc-daygrid-day{background:linear-gradient(180deg, #0b1324, #0f172a 22%)}
.esth-cal .fc .fc-daygrid-day:hover{
  background:#fff; transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(17,19,24,.10); z-index:2
}
.esth-cal.esth-dark .fc .fc-daygrid-day:hover{background:#111827}

.esth-cal .fc .fc-day-today{
  background:linear-gradient(180deg, rgba(37,99,235,.10), rgba(255,255,255,.65));
  outline:2px solid rgba(37,99,235,.25); outline-offset:-2px;
}
.esth-cal.esth-sunset .fc .fc-day-today{outline-color:rgba(255,122,0,.28)}
.esth-cal.esth-ocean  .fc .fc-day-today{outline-color:rgba(37,99,235,.28)}
.esth-cal .fc .fc-day-sat, .esth-cal .fc .fc-day-sun{background:rgba(17,19,24,.02)}
.esth-cal.esth-dark .fc .fc-day-sat, .esth-cal.esth-dark .fc .fc-day-sun{background:#0b1220}

/* date en gras + couleur douce */
.esth-cal .fc-daygrid-day-number{font-weight:700;color:#475569;padding:6px}
.esth-cal.esth-dark .fc-daygrid-day-number{color:#cbd5e1}

/* ======= Événements = chips/capsules avec statut ======= */
.esth-cal .fc-daygrid-event{
  background:#fff; color:var(--esth-text);
  border:1px solid var(--esth-border); border-radius:14px;
  padding:5px 9px; margin:2px 0;
  box-shadow:0 8px 22px rgba(17,19,24,.08);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.esth-cal .fc-daygrid-event:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(17,19,24,.12)}
.esth-cal.esth-dark .fc-daygrid-event{background:#0f172a;border-color:#1f2937}

/* Heure/titre plus lisibles */
.esth-cal .fc-daygrid-event .fc-event-time{font-weight:800;margin-right:6px}
.esth-cal .fc-daygrid-event .fc-event-title{font-weight:700}

/* Petits états si tes évts ont ces classes */
.esth-cal .fc-event.confirmed{border-left:5px solid var(--esth-good)}
.esth-cal .fc-event.pending  {border-left:5px solid var(--esth-warn)}
.esth-cal .fc-event.canceled {border-left:5px solid var(--esth-bad); opacity:.75}
.esth-cal .fc-event.owned    {box-shadow:0 0 0 2px rgba(229,0,83,.15) inset}

/* Dot couleur par défaut = "confirmé" (vert) */
.esth-cal .fc .fc-daygrid-event-dot,
.esth-cal .fc .fc-list-event-dot{border-color:var(--esth-good);background:var(--esth-good)}

/* ======= Vue LISTE premium ======= */
.esth-cal .fc-list{border:1px solid var(--esth-border);border-radius:20px;overflow:hidden;background:#fff;box-shadow:var(--esth-shadow)}
.esth-cal.esth-dark .fc-list{background:#0f172a;border-color:#1f2937}
.esth-cal .fc-list-day{background:linear-gradient(90deg, rgba(0,0,0,.03), rgba(0,0,0,0));font-weight:900}
.esth-cal .fc-list-event{border-bottom:1px solid var(--esth-border)}
.esth-cal .fc-list-event:hover{background:rgba(229,0,83,.04)}
.esth-cal.esth-dark .fc-list-event:hover{background:#101826}
.esth-cal .fc-list-event-time{font-weight:800}
.esth-cal .fc-list-event-title{font-weight:800}

/* ======= Popover joli ======= */
.esth-cal .fc-popover{border:1px solid var(--esth-border);border-radius:16px;box-shadow:var(--esth-shadow);overflow:hidden}
.esth-cal .fc-popover .fc-popover-header{background:var(--esth-bg);font-weight:800}

/* ======= Responsive ======= */
@media (max-width: 768px){
  .esth-cal .fc-header-toolbar{padding:12px}
  .esth-cal .fc .fc-button{padding:.35rem .6rem;border-radius:10px}
  .esth-cal .fc-daygrid-event{padding:4px 7px;border-radius:12px}
}