/* =========================================================
   OnYvon — Calendrier / Agenda
   ========================================================= */

/* ——— Status colors (tokens locaux) ——— */
:root {
  --cal-available: #34D399;
  --cal-available-bg: rgba(52, 211, 153, 0.12);
  --cal-partial: #F5C451;
  --cal-partial-bg: rgba(245, 196, 81, 0.14);
  --cal-unavailable: #6B6B75;
  --cal-unavailable-bg: rgba(255, 255, 255, 0.03);
  --cal-course: #B9A9FF;
  --cal-course-bg: rgba(124, 92, 255, 0.14);
  --cal-mission: #7DD3FC;
  --cal-mission-bg: rgba(34, 211, 238, 0.12);
  --cal-travel: #FCA5A5;
  --cal-travel-bg: rgba(248, 113, 113, 0.10);
  --cal-conference: #FDBA74;
  --cal-conference-bg: rgba(253, 186, 116, 0.12);
  --cal-office: #C4B5FD;
  --cal-office-bg: rgba(196, 181, 253, 0.10);
}

/* ============ Status badge (hero) ============ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-full);
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: #A7F3D0;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.status-badge[data-mood="partial"] {
  background: rgba(245, 196, 81, 0.08);
  border-color: rgba(245, 196, 81, 0.25);
  color: var(--c-gold-bright);
}
.status-badge[data-mood="busy"] {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.25);
  color: #FCA5A5;
}
.status-badge .pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
  animation: pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* Localisation (France · mobile international) */
.status-loc {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--c-border);
  color: var(--c-text-dim);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.status-loc svg { color: var(--c-gold); flex-shrink: 0; }

/* ============ Toolbar ============ */
.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}
.cal-toolbar__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  min-width: 220px;
  text-transform: capitalize;
}
.cal-toolbar__nav {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
}
.cal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 40px;
  min-width: 40px;
  padding: 0 var(--s-4);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--c-border);
  color: var(--c-text-dim);
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  transition: all var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.cal-btn:hover {
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--c-border-strong);
}
.cal-btn svg { width: 16px; height: 16px; }
.cal-btn--icon { padding: 0; width: 40px; }

.cal-views {
  display: inline-flex;
  padding: 3px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
}
.cal-views button {
  padding: 7px 14px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  font-family: var(--font-body);
  transition: all var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.cal-views button.is-active {
  background: var(--c-gold);
  color: var(--c-black);
  font-weight: 600;
}

/* ============ Grid ============ */
.cal-grid-wrap {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--c-border);
  background: rgba(255, 255, 255, 0.02);
}
.cal-weekdays span {
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-mute);
  text-align: left;
  font-weight: 500;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(96px, 1fr);
}

.cal-day {
  position: relative;
  padding: 10px;
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-1);
  cursor: pointer;
  text-align: left;
  color: var(--c-text-dim);
  transition: background var(--dur-fast) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-body);
  min-height: 96px;
}
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day:hover {
  background: rgba(255, 255, 255, 0.03);
}
.cal-day:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: -2px;
  z-index: 2;
}

.cal-day__num {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.cal-day--muted .cal-day__num { color: var(--c-text-faint); }
.cal-day--today .cal-day__num {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-gold);
  color: var(--c-black);
  font-weight: 700;
  margin-top: -2px;
  margin-left: -2px;
}
.cal-day--weekend { background: rgba(0, 0, 0, 0.15); }

.cal-day--selected {
  background: rgba(245, 196, 81, 0.08) !important;
  box-shadow: inset 0 0 0 2px var(--c-gold);
}

/* Status pill dans la cellule */
.cal-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--c-text);
  background: var(--cal-unavailable-bg);
  border: 1px solid transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.cal-pill__dot {
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.cal-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* Couleurs des pills par statut */
.cal-pill[data-status="available"] { color: var(--cal-available); background: var(--cal-available-bg); }
.cal-pill[data-status="partial"]   { color: var(--cal-partial);   background: var(--cal-partial-bg); }
.cal-pill[data-status="unavailable"]{ color: var(--cal-unavailable); background: var(--cal-unavailable-bg); }
.cal-pill[data-status="course"]    { color: var(--cal-course);    background: var(--cal-course-bg); }
.cal-pill[data-status="mission"]   { color: var(--cal-mission);   background: var(--cal-mission-bg); }
.cal-pill[data-status="travel"]    { color: var(--cal-travel);    background: var(--cal-travel-bg); }
.cal-pill[data-status="conference"]{ color: var(--cal-conference);background: var(--cal-conference-bg); }
.cal-pill[data-status="office"]    { color: var(--cal-office);    background: var(--cal-office-bg); }

/* Indicateur de statut en barre latérale gauche de la cellule */
.cal-day[data-status]::before {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px; left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--stripe, transparent);
}
.cal-day[data-status="available"]   { --stripe: var(--cal-available); }
.cal-day[data-status="partial"]     { --stripe: var(--cal-partial); }
.cal-day[data-status="unavailable"] { --stripe: var(--cal-unavailable); }
.cal-day[data-status="course"]      { --stripe: var(--cal-course); }
.cal-day[data-status="mission"]     { --stripe: var(--cal-mission); }
.cal-day[data-status="travel"]      { --stripe: var(--cal-travel); }
.cal-day[data-status="conference"]  { --stripe: var(--cal-conference); }
.cal-day[data-status="office"]      { --stripe: var(--cal-office); }

.cal-day__more {
  font-size: 10.5px;
  color: var(--c-text-mute);
  margin-top: auto;
}

/* ============ Legend ============ */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.cal-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}
.cal-legend__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}

/* ============ Detail panel (responsive) ============ */
.cal-detail {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
  min-height: 320px;
}
.cal-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-border);
}
.cal-detail__date {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  text-transform: capitalize;
}
.cal-detail__day {
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  margin-top: 2px;
  text-transform: capitalize;
}
.cal-detail__status-line {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.cal-detail__events {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.cal-event {
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--stripe, var(--c-border-strong));
}
.cal-event[data-status="available"] { --stripe: var(--cal-available); }
.cal-event[data-status="partial"] { --stripe: var(--cal-partial); }
.cal-event[data-status="unavailable"] { --stripe: var(--cal-unavailable); }
.cal-event[data-status="course"] { --stripe: var(--cal-course); }
.cal-event[data-status="mission"] { --stripe: var(--cal-mission); }
.cal-event[data-status="travel"] { --stripe: var(--cal-travel); }
.cal-event[data-status="conference"] { --stripe: var(--cal-conference); }
.cal-event[data-status="office"] { --stripe: var(--cal-office); }

.cal-event__title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 6px;
}
.cal-event__meta {
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.cal-event__note {
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  line-height: var(--lh-normal);
  margin-top: var(--s-2);
}
.cal-slots {
  margin-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-slot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  background: rgba(0, 0, 0, 0.2);
}
.cal-slot[data-status="free"] {
  background: var(--cal-available-bg);
  color: #A7F3D0;
}
.cal-slot[data-status="busy"] {
  background: rgba(255,255,255,0.03);
  color: var(--c-text-mute);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.2);
}
.cal-slot__time {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.cal-detail__cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.cal-detail__cta .btn { width: 100%; }
.cal-detail__cta .hint {
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  text-align: center;
  margin-top: 4px;
}

/* ============ Layout page agenda ============ */
.cal-layout {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: var(--s-6);
  align-items: start;
}

/* ============ Vue liste ============ */
.cal-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.cal-list__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5);
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--stripe, var(--c-border-strong));
  border-radius: var(--r-md);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.cal-list__item[data-status="available"] { --stripe: var(--cal-available); }
.cal-list__item[data-status="partial"] { --stripe: var(--cal-partial); }
.cal-list__item[data-status="unavailable"] { --stripe: var(--cal-unavailable); }
.cal-list__item[data-status="course"] { --stripe: var(--cal-course); }
.cal-list__item[data-status="mission"] { --stripe: var(--cal-mission); }
.cal-list__item[data-status="travel"] { --stripe: var(--cal-travel); }
.cal-list__item[data-status="conference"] { --stripe: var(--cal-conference); }
.cal-list__item[data-status="office"] { --stripe: var(--cal-office); }
.cal-list__item:hover {
  transform: translateX(2px);
  border-color: var(--c-border-strong);
}
.cal-list__date {
  text-align: center;
  min-width: 68px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(0,0,0,0.25);
  font-variant-numeric: tabular-nums;
}
.cal-list__day {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-mute);
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}
.cal-list__num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1;
  color: var(--c-text);
}
.cal-list__month {
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.cal-list__body { min-width: 0; }
.cal-list__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 4px;
}
.cal-list__meta {
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  align-items: center;
}
.cal-list__status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.cal-list__cta {
  flex-shrink: 0;
}
.cal-list__cta .btn { white-space: nowrap; }

/* ============ Prochaines dispos (encart hero) ============ */
.next-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.next-slot {
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: rgba(52, 211, 153, 0.06);
  border: 1px solid rgba(52, 211, 153, 0.2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform var(--dur-fast) var(--ease-out);
  text-decoration: none;
  color: inherit;
}
.next-slot:hover {
  transform: translateY(-2px);
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.10);
}
.next-slot__date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: #A7F3D0;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.next-slot__label {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-text);
}

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .cal-layout { grid-template-columns: 1fr; }
  .cal-detail { position: static; min-height: auto; }
}

@media (max-width: 768px) {
  .cal-toolbar { gap: var(--s-3); }
  .cal-toolbar__title { font-size: var(--fs-xl); min-width: 0; flex: 1; }
  .cal-views { display: none; } /* remplacé par dropdown sur mobile si besoin */

  .cal-weekdays span {
    padding: var(--s-2);
    font-size: 10px;
    text-align: center;
  }
  /* Abréger les jours sur mobile : masquer le libellé complet, garder l'abréviation */
  .cal-weekdays > span > span { display: none; }
  .cal-weekdays > span::before { content: attr(data-short); }
  .cal-weekdays span { overflow: hidden; }

  .cal-grid { grid-auto-rows: minmax(64px, 1fr); min-width: 0; }
  .cal-day {
    padding: 6px 4px;
    min-height: 64px;
    gap: 2px;
    min-width: 0;
  }
  .cal-day__num { font-size: 12px; }
  .cal-day--today .cal-day__num { width: 22px; height: 22px; font-size: 11px; }
  .cal-pill {
    padding: 2px 4px;
    font-size: 10px;
  }
  .cal-pill span {
    /* Sur mobile on cache le texte, on garde juste le dot coloré */
    display: none;
  }
  .cal-pill { justify-content: center; }
  .cal-day__more { font-size: 9px; }

  .cal-list__item {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .cal-list__cta {
    grid-column: 1 / -1;
  }
  .cal-list__cta .btn { width: 100%; }

  .cal-legend { gap: var(--s-3); padding: var(--s-4); }
}

@media (max-width: 480px) {
  .cal-weekdays span { font-size: 9px; padding: var(--s-2) 2px; }
  .cal-day { padding: 4px 3px; }
  .cal-day__num { font-size: 11px; }
}

/* =========================================================
   Refonte UI/UX — vue publique confidentielle
   ========================================================= */

/* Pastille "Ouvert au public" */
.cal-chip-public {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: var(--s-2);
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--cal-conference);
  background: var(--cal-conference-bg);
  border: 1px solid rgba(253, 186, 116, 0.3);
}

/* Icône de statut dans le panel */
.cal-detail__status-ico { width: 16px; height: 16px; flex-shrink: 0; }

/* — Cellules teintées par statut (plus lisible / plus beau) — */
.cal-day { transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.cal-day[data-status="available"]:not(.cal-day--muted)   { background: linear-gradient(180deg, rgba(52,211,153,0.05), transparent 70%); }
.cal-day[data-status="partial"]:not(.cal-day--muted)     { background: linear-gradient(180deg, rgba(245,196,81,0.06), transparent 70%); }
.cal-day[data-status="conference"]:not(.cal-day--muted)  { background: linear-gradient(180deg, rgba(253,186,116,0.08), transparent 72%); }
.cal-day[data-status="available"]:not(.cal-day--muted):hover  { background: rgba(52,211,153,0.10); }
.cal-day[data-status="partial"]:not(.cal-day--muted):hover    { background: rgba(245,196,81,0.10); }
.cal-day[data-status="conference"]:not(.cal-day--muted):hover { background: rgba(253,186,116,0.13); }

/* Conférence : léger halo pour attirer l'œil */
.cal-day[data-status="conference"]:not(.cal-day--muted) {
  box-shadow: inset 0 0 0 1px rgba(253,186,116,0.25);
}

/* Stripe latérale : masquée pour "indisponible" sans événement (jours fermés) */
.cal-day[data-status="unavailable"] { --stripe: transparent; }

/* Pills : seules les 4 catégories publiques sont utilisées */
.cal-pill[data-status="conference"] { color: var(--cal-conference); background: var(--cal-conference-bg); font-weight: 600; }

/* Indicateur stripe pour les 4 statuts publics */
.cal-day[data-status="conference"] { --stripe: var(--cal-conference); }

/* Boutons du panel : conférence avec lien → 2 boutons empilés */
.cal-detail__cta .btn + .btn { margin-top: 2px; }

/* Slots demi-journée — affichage neutre (pas de libellé privé) */
.cal-slot[data-status="free"] { background: var(--cal-available-bg); color: #A7F3D0; font-weight: 500; }
.cal-slot[data-status="busy"] {
  background: rgba(255,255,255,0.03);
  color: var(--c-text-mute);
  text-decoration: none;
}

/* Today : accent renforcé */
.cal-day--today { box-shadow: inset 0 0 0 1px rgba(245,196,81,0.4); }
.cal-day--today.cal-day--selected { box-shadow: inset 0 0 0 2px var(--c-gold); }

/* Légende : un peu plus aérée */
.cal-legend { gap: var(--s-3) var(--s-6); }
.cal-legend__item { font-weight: 500; }