/* Applet calendrier scolaire. Ce fichier est volontairement isolé : toutes
   les règles visuelles restent scellées sous .calendar-applet.
   Discipline de vue : l'applet vise le mois complet sans défilement sur un
   poste de travail · barre haute mince, grille dense, rail d'agenda. */
/* Plein viewport (poste de travail) : la colonne de défilement devient une
   colonne flexible et la grille du mois absorbe la hauteur restante. Sur
   mobile le flux reste naturel : la page défile, rien n'est comprimé. */
@media (min-width: 861px) {
  .main__scroll:has(.calendar-applet) { display: flex; flex-direction: column; }
  .main__scroll:has(.calendar-applet) .student-shell {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .calendar-applet {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .calendar-applet .calendar-workspace { flex: 1 1 auto; min-height: 0; }
  .calendar-applet .calendar-panel { min-height: 0; }
  .calendar-applet .calendar-grid { flex: 1 1 auto; grid-auto-rows: minmax(44px, 1fr); min-height: 0; }
}

.calendar-applet {
  --calendar-blue: var(--bs-color-source-menfp);
  --calendar-blue-dark: var(--bs-color-brand-900);
  --calendar-blue-soft: var(--bs-color-source-menfp-soft);
  --calendar-green: var(--bs-color-source-boussole);
  --calendar-green-soft: var(--bs-color-source-boussole-soft);
  --calendar-orange: var(--bs-color-source-school);
  --calendar-orange-soft: var(--bs-color-source-school-soft);
  --calendar-purple: var(--bs-color-data-4);
  --calendar-purple-soft: var(--bs-color-data-4-soft);
  --calendar-gold: var(--bs-color-warning);
  --calendar-gold-soft: var(--bs-color-warning-soft);
  width: 100%;
  color: var(--bs-color-text-primary);
}

.calendar-applet button,
.calendar-applet select,
.calendar-applet summary { touch-action: manipulation; }

/* ---------- Barre haute · titre, statut, repères annuels, année ---------- */
.calendar-topbar {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bs-space-6);
  overflow: hidden;
  margin-bottom: var(--bs-space-4);
  padding: var(--bs-space-4) var(--bs-space-6);
  border-radius: var(--bs-radius-panel);
  background:
    radial-gradient(circle at 88% 16%, var(--bs-color-glint) 0 3px, transparent 4px),
    radial-gradient(circle at 94% 62%, var(--bs-color-glint-faint) 0 2px, transparent 3px),
    linear-gradient(122deg, var(--bs-color-brand-900) 0%, var(--bs-color-brand-700) 62%, var(--bs-color-brand-500) 100%);
  box-shadow: 0 10px 26px var(--bs-shadow-hero-color);
  color: var(--bs-color-text-on-brand);
}

.calendar-topbar::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 210px;
  height: 210px;
  top: -128px;
  right: 132px;
  border: 1px solid var(--bs-color-glint-faint);
  border-radius: 50%;
}

.calendar-topbar__title { min-width: 0; display: grid; gap: 6px; }

.calendar-topbar h1 {
  margin: 0;
  color: var(--bs-color-text-on-brand);
  font-size: 22px;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.calendar-status {
  width: fit-content;
  display: inline-flex;
  align-items: baseline;
  gap: var(--bs-space-2);
  margin: 0;
  padding: 5px 11px;
  border: 1px solid var(--bs-color-glint);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-color-scrim);
}

.calendar-status > span {
  width: 7px;
  height: 7px;
  align-self: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--bs-color-warning-line);
  box-shadow: 0 0 0 3px var(--bs-color-glint-warning);
}

.calendar-status.is-official > span {
  background: var(--bs-color-success-line);
  box-shadow: 0 0 0 3px var(--bs-color-glint-success);
}

.calendar-status strong { font-size: 11px; font-weight: var(--bs-font-weight-semibold); white-space: nowrap; }
.calendar-status small { overflow: hidden; color: var(--bs-color-brand-200); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.calendar-stats {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  gap: clamp(var(--bs-space-4), 3vw, var(--bs-space-8));
  min-width: 0;
}

.calendar-stats p {
  margin: 0;
  display: grid;
  justify-items: start;
  color: var(--bs-color-brand-200);
  font-size: 10px;
  font-weight: var(--bs-font-weight-medium);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.calendar-stats strong {
  color: var(--bs-color-text-on-brand);
  font-size: 20px;
  font-weight: var(--bs-font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.15;
  text-transform: none;
}

.calendar-year-picker {
  flex: 0 0 auto;
  display: grid;
  gap: 3px;
}

.calendar-year-picker > span {
  color: var(--bs-color-info-line);
  font-size: 9px;
  font-weight: var(--bs-font-weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.calendar-year-picker select {
  min-height: 38px;
  padding: 0 32px 0 11px;
  border-color: var(--bs-color-glint-strong);
  background-color: var(--bs-color-frost-opaque);
  color: var(--calendar-blue-dark);
  font-size: 12px;
  font-weight: var(--bs-font-weight-semibold);
}

/* ---------- Filtres ---------- */
.calendar-toolbar { margin: 0 0 var(--bs-space-3); }

.calendar-filters {
  display: flex;
  gap: var(--bs-space-2);
  overflow: auto hidden;
  padding: 3px;
  scrollbar-width: none;
}

.calendar-filters::-webkit-scrollbar { display: none; }

.calendar-filter {
  min-height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--bs-color-border-default);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-color-surface-panel);
  color: var(--bs-color-text-secondary);
  font-size: 12px;
  font-weight: var(--bs-font-weight-semibold);
  cursor: pointer;
  transition: border-color var(--bs-motion-fast) var(--bs-motion-ease), background var(--bs-motion-fast) var(--bs-motion-ease), color var(--bs-motion-fast) var(--bs-motion-ease);
}

.calendar-filter:hover { border-color: var(--bs-color-border-hover); }
.calendar-filter.is-active { border-color: var(--calendar-blue-dark); background: var(--calendar-blue-dark); color: var(--bs-color-text-on-brand); }

.calendar-filter__dot,
.calendar-event-dot,
.calendar-legend i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--bs-color-border-strong);
}

.calendar-filter__dot.is-all { background: linear-gradient(135deg, var(--calendar-blue) 0 50%, var(--calendar-green) 50%); }
.calendar-filter__dot.is-milestone,
.calendar-event-dot.is-milestone,
.calendar-legend i.is-milestone { background: var(--calendar-blue); }
.calendar-filter__dot.is-holiday,
.calendar-event-dot.is-holiday,
.calendar-legend i.is-holiday { background: var(--calendar-green); }
.calendar-filter__dot.is-control,
.calendar-event-dot.is-control,
.calendar-legend i.is-control { background: var(--calendar-orange); }
.calendar-filter__dot.is-exam,
.calendar-event-dot.is-exam,
.calendar-legend i.is-exam { background: var(--calendar-purple); }
.calendar-filter__dot.is-break,
.calendar-event-dot.is-break,
.calendar-legend i.is-break { background: var(--calendar-gold); }
.calendar-filter__dot.is-admin,
.calendar-event-dot.is-admin,
.calendar-legend i.is-admin { background: var(--bs-color-text-secondary); }

/* ---------- Espace de travail · grille + rail ---------- */
.calendar-topbar,
.calendar-toolbar { flex: 0 0 auto; }

.calendar-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(265px, 32%);
  align-items: stretch;
  overflow: hidden;
  border: var(--bs-border-hairline);
  border-radius: var(--bs-radius-panel);
  background: var(--bs-color-surface-panel);
  box-shadow: 0 8px 26px var(--bs-shadow-soft-color);
}

.calendar-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2.2vw, 22px);
}

.calendar-month-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bs-space-4);
  margin-bottom: var(--bs-space-4);
}

.calendar-month-nav__kicker,
.calendar-agenda__kicker {
  margin: 0 0 2px;
  color: var(--calendar-blue);
  font-size: 10px;
  font-weight: var(--bs-font-weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.calendar-month-nav h2 {
  margin: 0;
  color: var(--calendar-blue-dark);
  font-size: 20px;
  text-transform: capitalize;
}

.calendar-month-chips {
  margin: 3px 0 0;
  color: var(--bs-color-text-secondary);
  font-size: 11px;
  font-weight: var(--bs-font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.calendar-month-nav__actions { display: flex; align-items: center; gap: 6px; }

.calendar-icon-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--bs-color-border-default);
  border-radius: var(--bs-radius-control);
  background: var(--bs-color-surface-panel);
  color: var(--calendar-blue-dark);
  font-size: 11px;
  font-weight: var(--bs-font-weight-semibold);
  cursor: pointer;
}

.calendar-icon-button:hover:not(:disabled) { border-color: var(--calendar-blue); background: var(--calendar-blue-soft); }
.calendar-icon-button--square { width: 36px; padding: 0; font-size: 21px; font-weight: var(--bs-font-weight-regular); }
.calendar-icon-button:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- Grille mensuelle dense · chaque jour porte son statut ---------- */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto;
  grid-auto-rows: minmax(44px, auto);
  gap: 4px;
}

.calendar-weekday {
  min-width: 0;
  padding: 0 4px 7px;
  color: var(--bs-color-text-muted);
  font-size: 10px;
  font-weight: var(--bs-font-weight-bold);
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
}

.calendar-weekday.is-weekend { color: var(--bs-color-border-hover); }

.calendar-day {
  position: relative;
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  overflow: hidden;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--bs-color-surface-tonal);
  color: var(--bs-color-text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--bs-motion-fast) var(--bs-motion-ease), background var(--bs-motion-fast) var(--bs-motion-ease), transform var(--bs-motion-fast) var(--bs-motion-ease);
}

.calendar-day:hover { z-index: 1; border-color: var(--bs-color-border-strong); transform: translateY(-1px); }
.calendar-day.is-empty { background: transparent; cursor: default; }

/* Statut du jour : classe (fond tonal plein), hors classe et week-end
   (fondu dans le panneau), puis teinte de la catégorie prioritaire.
   Lecture : une case pleine = un jour d'école. */
.calendar-day.is-off,
.calendar-day.is-weekend { background: transparent; box-shadow: inset 0 0 0 1px var(--bs-color-border-default); color: var(--bs-color-text-muted); }
.calendar-day.is-off:hover,
.calendar-day.is-weekend:hover { background: var(--bs-color-surface-page); }
.calendar-day.is-tint-milestone { background: var(--calendar-blue-soft); color: var(--bs-color-text-primary); }
.calendar-day.is-tint-holiday { background: var(--calendar-green-soft); color: var(--bs-color-text-primary); }
.calendar-day.is-tint-control { background: var(--calendar-orange-soft); color: var(--bs-color-text-primary); }
.calendar-day.is-tint-exam { background: var(--calendar-purple-soft); color: var(--bs-color-text-primary); }
.calendar-day.is-tint-break { background: var(--calendar-gold-soft); color: var(--bs-color-text-primary); }
.calendar-day.is-tint-admin { background: var(--bs-color-surface-tonal); box-shadow: inset 0 0 0 1px var(--bs-color-border-default); color: var(--bs-color-text-primary); }

.calendar-day.is-today { border-color: var(--calendar-blue); }
.calendar-day.is-selected { border-color: var(--calendar-blue-dark); box-shadow: inset 0 0 0 1px var(--calendar-blue-dark); }

.calendar-day__number {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: 11px;
  font-weight: var(--bs-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.calendar-day.is-today .calendar-day__number { background: var(--calendar-blue-dark); color: var(--bs-color-text-on-brand); }

.calendar-day__dots { display: flex; gap: 3px; margin-top: auto; padding-left: 4px; }
.calendar-event-dot { width: 5px; height: 5px; }

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: var(--bs-space-4);
  padding-top: var(--bs-space-3);
  border-top: var(--bs-border-hairline);
}

.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bs-color-text-muted);
  font-size: 10px;
  font-weight: var(--bs-font-weight-medium);
}

.calendar-legend i { display: inline-block; }
.calendar-legend i.is-classe { border: 1px solid var(--bs-color-border-strong); border-radius: 3px; background: var(--bs-color-surface-tonal); }

/* ---------- Rail · agenda du mois ou du jour sélectionné ----------
   Le rail ne dicte jamais la hauteur de la page : sur un poste de travail
   il défile en interne, la grille du mois fixe la hauteur. */
.calendar-agenda {
  position: relative;
  min-width: 0;
  min-height: 100%;
  border-left: var(--bs-border-hairline);
  background: var(--bs-color-surface-tonal);
}

.calendar-agenda__inner {
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2vw, 20px);
}

@media (min-width: 761px) {
  .calendar-agenda__inner {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.calendar-agenda__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bs-space-3);
  margin-bottom: var(--bs-space-3);
}

.calendar-agenda__heading h2 { margin: 0; color: var(--calendar-blue-dark); font-size: 16px; }

.calendar-clear-date {
  min-height: 30px;
  flex: 0 0 auto;
  padding: 0 9px;
  border: 0;
  border-radius: var(--bs-radius-control);
  background: var(--calendar-blue-soft);
  color: var(--calendar-blue-dark);
  font-size: 10px;
  font-weight: var(--bs-font-weight-semibold);
  cursor: pointer;
}

.calendar-agenda__list { display: grid; gap: 8px; }

.calendar-agenda__empty {
  margin: 0;
  padding: 20px 14px;
  border: 1px dashed var(--bs-color-border-strong);
  border-radius: var(--bs-radius-card);
  color: var(--bs-color-text-muted);
  font-size: 12px;
  line-height: var(--bs-line-height-body);
  text-align: center;
}

.calendar-agenda-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 9px;
  padding: 11px 12px;
  border: var(--bs-border-hairline);
  border-radius: 11px;
  background: var(--bs-color-text-on-brand);
  box-shadow: 0 2px 7px var(--bs-shadow-faint-color);
}

.calendar-agenda-item__marker { width: 8px; height: 8px; margin-top: 4px; border-radius: 3px; background: var(--calendar-blue); }
.calendar-agenda-item.is-holiday .calendar-agenda-item__marker { background: var(--calendar-green); border-radius: 50%; }
.calendar-agenda-item.is-control .calendar-agenda-item__marker { background: var(--calendar-orange); }
.calendar-agenda-item.is-exam .calendar-agenda-item__marker { background: var(--calendar-purple); }
.calendar-agenda-item.is-break .calendar-agenda-item__marker { background: var(--calendar-gold); border-radius: 50%; }
.calendar-agenda-item.is-admin .calendar-agenda-item__marker { background: var(--bs-color-text-secondary); }

.calendar-agenda-item__meta {
  margin: 0 0 2px;
  color: var(--bs-color-text-muted);
  font-size: 9px;
  font-weight: var(--bs-font-weight-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.calendar-agenda-item h3 { overflow-wrap: anywhere; margin: 0 0 2px; font-size: 13px; line-height: 1.3; }
.calendar-agenda-item p:last-child { margin: 0; color: var(--bs-color-text-secondary); font-size: 10px; line-height: 1.45; }

.calendar-pending {
  display: grid;
  gap: 8px;
  margin-top: var(--bs-space-5);
  padding-top: var(--bs-space-4);
  border-top: var(--bs-border-hairline);
}

.calendar-pending__eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--bs-color-warning-strong);
  font-size: 10px;
  font-weight: var(--bs-font-weight-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.calendar-pending__eyebrow span {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bs-color-warning-soft);
  font-family: Georgia, serif;
  font-size: 11px;
  text-transform: lowercase;
}

.calendar-agenda-item.is-pending { border-color: var(--bs-color-warning-line); background: var(--bs-color-surface-panel); box-shadow: none; }
.calendar-agenda-item.is-pending .calendar-agenda-item__marker { background: var(--bs-color-warning); }
.calendar-pending__note { margin: 2px 0 0; color: var(--bs-color-text-muted); font-size: 10px; line-height: 1.5; }

.calendar-source {
  margin-top: auto;
  padding-top: var(--bs-space-4);
}

.calendar-source summary {
  display: flex;
  align-items: center;
  min-height: 30px;
  color: var(--bs-color-text-muted);
  font-size: 10px;
  font-weight: var(--bs-font-weight-semibold);
  cursor: pointer;
}

.calendar-source p { margin: var(--bs-space-2) 0 0; color: var(--bs-color-text-muted); font-size: 10px; line-height: 1.55; }
.calendar-source strong { color: var(--bs-color-text-secondary); }

/* ---------- Adaptations ---------- */
@media (max-width: 1180px) {
  .calendar-applet .calendar-stats p:nth-child(n + 3) { display: none; }
}

@media (max-width: 1040px) {
  .calendar-applet .calendar-workspace { grid-template-columns: minmax(0, 1fr) 275px; }
}

@media (max-width: 860px) {
  .calendar-applet .calendar-topbar { flex-wrap: wrap; }
  .calendar-applet .calendar-stats { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .calendar-applet .calendar-stats p:nth-child(n + 3) { display: grid; }
}

@media (max-width: 760px) {
  .calendar-applet .calendar-topbar { align-items: stretch; flex-direction: column; gap: var(--bs-space-4); padding: var(--bs-space-5); }
  .calendar-applet .calendar-stats { order: 0; flex-wrap: wrap; gap: var(--bs-space-4) var(--bs-space-6); }
  .calendar-applet .calendar-year-picker { width: 100%; }
  .calendar-applet .calendar-workspace { grid-template-columns: 1fr; }
  .calendar-applet .calendar-agenda { border-top: var(--bs-border-hairline); border-left: 0; }
}

@media (max-width: 520px) {
  .calendar-applet .calendar-topbar { margin-inline: -4px; border-radius: 17px; }
  .calendar-applet .calendar-topbar h1 { font-size: 20px; white-space: normal; }
  .calendar-applet .calendar-status small { white-space: normal; }
  .calendar-applet .calendar-panel,
  .calendar-applet .calendar-agenda { padding: 14px 10px; }
  .calendar-applet .calendar-month-nav { align-items: flex-start; flex-direction: column; }
  .calendar-applet .calendar-month-nav__actions { width: 100%; }
  .calendar-applet .calendar-month-nav__actions .calendar-icon-button:first-child { margin-right: auto; }
  .calendar-applet .calendar-grid { gap: 2px; }
  .calendar-applet .calendar-weekday { padding-inline: 0; font-size: 9px; }
  .calendar-applet .calendar-day { min-height: 42px; align-items: center; padding: 4px 2px; border-radius: 7px; }
  .calendar-applet .calendar-day__number { width: 21px; height: 21px; font-size: 10px; }
  .calendar-applet .calendar-day__dots { justify-content: center; margin-top: 0; padding-left: 0; }
  .calendar-applet .calendar-event-dot { width: 4px; height: 4px; }
  .calendar-applet .calendar-legend { gap: 8px 12px; }
}