/* ==========================================================================
   ArtTracker - Main Month Grid Overview (Responsive Auto-Wrapping Grid)
   ========================================================================== */

/* Remove Legacy Headers */
.timeline-column-headers, .timeline {
  display: none !important;
}

/* Month Navigation Bar - Compact Fixed Sizing */
.month-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: var(--app-header-height);
  z-index: 90;
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  box-sizing: border-box;
  flex-shrink: 0;
}

.month-nav-title {
  border: 0;
  padding: 0.25rem 0.4rem;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: -0.01em;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.month-nav-title:hover,
.month-nav-title:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

#btnToggleCalendar {
  gap: 0.32rem;
  min-width: 0;
  padding-inline: .62rem;
}

#btnToggleCalendar[hidden] { display: none !important; }

#btnToggleCalendar > i { font-size: .9em; }
#btnToggleCalendar #btnStreakCount { white-space: nowrap; }

.calendar-button-separator {
  margin-inline: 0.08rem;
  color: var(--text-dim);
}

.month-nav-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-width: 0;
}

.month-picker-popover {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 50%;
  z-index: 100;
  display: none;
  align-items: end;
  gap: 0.5rem;
  padding: 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
}

.month-picker-popover.active {
  display: flex;
}

.month-picker-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.month-picker-field select {
  min-width: 7.4rem;
  padding: 0.42rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-main);
  font: inherit;
}

.calendar-zoom-dock {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 180;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: rgba(20, 20, 26, 0.92);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateX(-50%);
}

.calendar-zoom-label,
.calendar-zoom-value {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.calendar-zoom-label { padding-left: 0.3rem; }
.calendar-zoom-value { min-width: 2.5rem; text-align: center; }

.calendar-zoom-btn {
  width: 25px;
  height: 25px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
  font-size: 0.68rem;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.calendar-zoom-btn:focus {
  outline: none;
  background: transparent;
  color: var(--text-main);
}

.calendar-zoom-btn:focus-visible {
  outline: 2px solid rgba(242, 242, 242, 0.72);
  outline-offset: 2px;
}

.calendar-zoom-btn:active:not(:disabled) {
  background: transparent;
  color: var(--text-main);
}

@media (hover: hover) and (pointer: fine) {
  .calendar-zoom-btn:hover:not(:disabled) {
    background: #ffffff;
    color: #000000;
  }
}

.calendar-zoom-btn:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

/* Main Grid Layout - Auto-fill wrapping on Zoom & Resize */
.month-overview-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.month-carousel-viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.month-carousel-track {
  display: flex;
  align-items: flex-start;
  width: 300%;
  transform: translate3d(-33.333333%, 0, 0);
  will-change: transform;
}

.month-carousel-track.is-animating {
  transition: transform 280ms cubic-bezier(.22, .78, .26, 1);
}

.month-overview-grid {
  display: grid;
  flex: 0 0 33.333333%;
  --day-card-min-width: 350px;
  grid-template-columns: repeat(auto-fill, minmax(var(--day-card-min-width), 1fr));
  gap: 0.85rem;
  width: 33.333333%;
  padding: 0.85rem 1.25rem 5rem;
}

.month-carousel-panel[aria-hidden="true"] {
  user-select: none;
  pointer-events: none;
}

/* Les mois latéraux gardent exactement le gabarit des cartes centrales :
   seule l'interaction est désactivée. Ainsi, les cases restent alignées et
   proportionnées pendant le balayage, sans charger les médias voisins. */
.month-carousel-preview .day-grid-card {
  opacity: 0.62;
}

.grid-preview-content {
  display: block;
}

.month-carousel-preview .grid-preview-content .grid-dropzone {
  color: rgba(255, 255, 255, 0.28);
}

/* The minimum level is an overview of one complete week. The maximum level
   deliberately gives one day the full available width. */
.month-overview-grid.week-overview {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.month-overview-grid.six-day-overview {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.month-overview-grid.five-day-overview {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.month-overview-grid.four-day-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.month-overview-grid.three-day-overview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.month-overview-grid.two-day-overview {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.month-overview-grid.single-day-overview {
  grid-template-columns: 1fr;
}

.day-grid-placeholder {
  display: none;
}

.month-overview-grid.week-overview .day-grid-placeholder {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.025);
  filter: grayscale(1);
  opacity: 0.28;
  pointer-events: none;
  cursor: default;
}

/* Les jours voisins servent uniquement à compléter la grille lundi → dimanche. */
.month-overview-grid:not(.week-overview) .day-grid-placeholder {
  display: none;
}

.month-overview-grid.week-overview .day-grid-placeholder .day-grid-body {
  flex: 1;
}

.ghost-media-preview {
  cursor: default;
  border-color: rgba(255, 255, 255, 0.12);
}

/* Day Card Item - Full Frame Border Highlight per Status */
.day-grid-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: none;
  cursor: pointer;
}

/* Status Frame Colors */
.day-grid-card.status-completed {
  border: 2px solid var(--color-success);
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.15);
}

.day-grid-card.status-partial {
  border: 2px solid var(--color-partial);
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.15);
}

.day-grid-card.status-failed {
  border: 2px solid var(--color-failed);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.15);
}

.day-grid-card.status-future {
  border: 1px solid var(--border-color);
  opacity: 0.85;
}

.day-grid-card.status-today {
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

/* Day Header - Compact & Sleek */
.day-grid-header {
  padding: 0.4rem 0.65rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.day-grid-date {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--text-main);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-date-mobile { display: none; }
.month-label-year { margin-left: 0.12rem; color: var(--text-muted); font-size: 0.82em; }

.day-header-tags {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.day-tag-today {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.day-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.4rem;
  border-radius: var(--radius-full);
  font-size: 0.62rem;
  font-weight: 600;
  white-space: nowrap;
}
.day-status-badge > i {
  display: block;
  width: 1em;
  line-height: 1;
  text-align: center;
  color: inherit;
}

.badge-completed {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}
.badge-partial {
  background: var(--color-partial-bg);
  color: var(--color-partial);
  border: 1px solid var(--color-partial-border);
}
.badge-failed {
  background: var(--color-failed-bg);
  color: var(--color-failed);
  border: 1px solid var(--color-failed-border);
}
.badge-future {
  background: var(--color-future-bg);
  color: var(--color-future);
  border: 1px solid var(--color-future-border);
}

/* 2 Columns Inside Each Day Card - Maximize Inner Area */
.day-grid-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  width: 100%;
  flex: 1;
}

/* La grille principale présente un seul type de création à la fois : les deux
   contenus restent liés à la même journée, mais ne partagent plus sa largeur. */
.month-overview-grid.show-painting .grid-col[data-task-type="project3d"],
.month-overview-grid.show-project3d .grid-col[data-task-type="painting"] {
  display: none;
}

.month-overview-grid.show-painting .day-grid-body,
.month-overview-grid.show-project3d .day-grid-body {
  display: block;
}

.month-overview-grid.show-painting .grid-col[data-task-type="painting"],
.month-overview-grid.show-project3d .grid-col[data-task-type="project3d"] {
  padding: 0.25rem;
}

/* Le statut de validation est superposé au média, sans libellé au-dessus. */
.month-overview-grid.show-painting .grid-col-header,
.month-overview-grid.show-project3d .grid-col-header {
  position: absolute;
  z-index: 4;
  top: 0.6rem;
  right: 0.6rem;
  padding: 0;
  border: 0;
}

.month-overview-grid.show-painting .grid-col-header > span,
.month-overview-grid.show-project3d .grid-col-header > span {
  display: none;
}

.month-overview-grid.show-painting .task-check-btn,
.month-overview-grid.show-project3d .task-check-btn {
  display: none;
}

.month-overview-grid.show-painting .task-check-btn.checked,
.month-overview-grid.show-project3d .task-check-btn.checked {
  background: var(--color-success);
}

/* Le badge complet remplace le check isolé et se place sur le média. */
.month-overview-grid .day-header-tags {
  display: flex;
  align-items: center;
}

.task-view-switch {
  display: inline-flex;
  gap: 0.25rem;
  margin-top: 0;
  padding: 0.22rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.035);
}

.task-view-btn {
  border: 0;
  border-radius: var(--radius-full);
  padding: 0.38rem 0.7rem;
  background: #202027;
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Les onglets personnels sont retirés du flux dès que JavaScript leur ajoute
   l'attribut hidden. Cette règle prime sur les règles de mise en page qui
   transforment les boutons en flex sur les écrans compacts. */
.task-view-btn[hidden] { display: none !important; }

.task-view-btn > i,
.english-tab-icon,
.task-check-btn > i {
  display: grid;
  width: 1em;
  height: 1em;
  place-items: center;
  line-height: 1;
}

/* Pictogramme de langue volontairement réduit à un seul signe : il reste
   lisible à la même petite taille que les autres applications. */
.english-tab-icon {
  color: currentColor;
  font-family: "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  font-weight: 800;
  font-size: 1em;
}

.task-view-btn.active {
  color: #ffffff;
  animation: task-view-selection 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.task-view-btn[data-calendar-view="painting"].active {
  background: #7c3aed;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.38);
}

.task-view-btn[data-calendar-view="project3d"].active {
  background: #ff4d1f;
  box-shadow: 0 4px 14px rgba(255, 77, 31, 0.4);
}

.task-view-btn[data-calendar-view="painting"] { --task-view-accent: #8b3dff; --task-view-ink: #ffffff; }
.task-view-btn[data-calendar-view="tasks"] { --task-view-accent: #f5b700; --task-view-ink: #251a00; }
.task-view-btn[data-calendar-view="tasks"].active { background: #f5b700; color: #251a00; }
.task-view-btn[data-calendar-view="project3d"] { --task-view-accent: #ff4d1f; --task-view-ink: #ffffff; }
.task-view-btn[data-calendar-view="anglais"] { --task-view-accent: #32a8ff; --task-view-ink: #071725; }
.task-view-btn[data-calendar-view="sport"] { --task-view-accent: #6245ff; --task-view-ink: #ffffff; }
.task-view-btn[data-calendar-view="plantes"] { --task-view-accent: #40ca4c; --task-view-ink: #07120a; }
.task-view-btn[data-calendar-view="reveil"] { --task-view-accent: #ffc918; --task-view-ink: #241703; }
.task-view-btn[data-calendar-view="piano"] { --task-view-accent: #e000ff; --task-view-ink: #ffffff; }
.task-view-btn[data-calendar-view="sport"].active { background: #461bef; box-shadow: 0 4px 14px rgba(70,27,239,.4); }
.task-view-btn[data-calendar-view="anglais"].active { background: #32a8ff; color: #061725; box-shadow: 0 4px 14px rgba(50,168,255,.4); }
.task-view-btn[data-calendar-view="plantes"].active { background: #40ca4c; color: #07120a; box-shadow: 0 4px 14px rgba(64,202,76,.34); }
.task-view-btn[data-calendar-view="reveil"].active { background: #ffc918; color: #241703; box-shadow: 0 4px 14px rgba(255,201,24,.34); }
.task-view-btn[data-calendar-view="piano"].active { background: #e000ff; box-shadow: 0 4px 14px rgba(224,0,255,.4); }
.task-view-btn.active > i { color: inherit; }

.task-view-btn:hover:not(.active) {
  background: color-mix(in srgb, var(--task-view-accent) 28%, #202027);
  color: #ffffff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--task-view-accent) 52%, transparent);
  transform: translateY(-1px);
}
.task-view-btn:hover:not(.active) > i { color: inherit; }

.task-view-btn:active {
  transform: scale(0.96);
}

/* La navigation principale passe en mode icônes sous 1650 px. Le calendrier
   suit le même seuil afin que ses onglets et ses statuts restent cohérents. */
@media (max-width: 1650px) {
  .task-view-switch {
    gap: .12rem;
    padding: .16rem;
  }

  .task-view-btn {
    width: 2.2rem;
    min-width: 2.2rem;
    padding-inline: 0;
    gap: 0;
    text-align: center;
  }

  .task-view-btn:not(.active) > i {
    color: #ffffff !important;
  }

  .task-view-btn:not(.active) .english-tab-icon {
    color: #ffffff !important;
  }

  .task-view-btn.active > i {
    color: #ffffff !important;
  }

  .task-view-btn.active .english-tab-icon {
    color: inherit;
  }

  .task-view-label {
    display: none;
  }

  .day-header-tags {
    gap: .2rem;
  }

  .day-status-badge {
    width: 1.22rem;
    height: 1.22rem;
    justify-content: center;
    gap: 0;
    padding: 0;
    border-radius: 50%;
    font-size: .6rem;
  }
}

@keyframes task-view-selection {
  from { transform: scale(0.92); opacity: 0.45; }
  to { transform: scale(1); opacity: 1; }
}

.task-view-btn.active {
  color: #ffffff;
}

/* Les onglets du Calendrier ne doivent jamais sortir de leur dock. Leur état
   actif est uniquement une couleur de fond : aucun zoom, ombre floue ou saut
   vertical ne peut être coupé par le bas de l'écran. */
.calendar-app-dock .task-view-btn,
.calendar-app-dock .task-view-btn:hover,
.calendar-app-dock .task-view-btn:focus-visible,
.calendar-app-dock .task-view-btn:active,
.calendar-app-dock .task-view-btn.active {
  transform: none;
  animation: none;
  box-shadow: none;
}
.calendar-app-dock .task-view-btn:hover:not(.active),
.calendar-app-dock .task-view-btn:focus-visible:not(.active) {
  color: var(--task-view-ink, #ffffff);
  background: var(--task-view-accent);
}
.calendar-app-dock .task-view-btn:not(.active) {
  background: #202027;
}
/* Même comportement que la navigation principale : la sélection n'ajoute
   aucun effet terne ou flou, elle conserve simplement la couleur pleine. */
.calendar-app-dock .task-view-btn.active {
  color: var(--task-view-ink, #ffffff);
  background: var(--task-view-accent);
}

.grid-col {
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: var(--bg-card);
  position: relative;
  width: 100%;
  min-width: 0;
}

.grid-col[data-task-type="painting"] {
  border-right: 1px solid var(--border-color);
}

.calendar-domain-card .day-grid-body { display: block; }
.calendar-domain-card .calendar-domain-col { height: 100%; min-height: 0; border: 0; }
.calendar-domain-card .grid-col-header { border-bottom-color: color-mix(in srgb, var(--calendar-domain-accent, #888) 38%, transparent); }
.calendar-domain-content {
  display: grid;
  min-height: 5.6rem;
  height: 100%;
  place-content: center;
  justify-items: center;
  gap: .45rem;
  padding: .65rem;
  border: 1px dashed color-mix(in srgb, var(--calendar-domain-accent, #888) 48%, transparent);
  border-radius: .42rem;
  background: color-mix(in srgb, var(--calendar-domain-accent, #888) 7%, transparent);
  color: var(--text-muted);
  text-align: center;
  font-size: .68rem;
  font-weight: 700;
}
.calendar-domain-content > i { color: var(--calendar-domain-accent, var(--text-muted)); font-size: 1.35rem; }
.month-overview-grid[data-calendar-view="sport"] { --calendar-domain-accent: #461bef; }
.month-overview-grid[data-calendar-view="anglais"] { --calendar-domain-accent: #32a8ff; }
.month-overview-grid[data-calendar-view="plantes"] { --calendar-domain-accent: #40ca4c; }
.month-overview-grid[data-calendar-view="reveil"] { --calendar-domain-accent: #ffc918; }
.month-overview-grid[data-calendar-view="piano"] { --calendar-domain-accent: #e000ff; }

.grid-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 0.18rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  letter-spacing: 0.01em;
}

.grid-col-content {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

/* Task Check Button - Compact & Crisp */
.task-check-btn {
  background: transparent;
  border: 2px solid var(--text-dim);
  color: transparent;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.72rem;
  line-height: 1;
  box-sizing: border-box;
  flex-shrink: 0;
}

.task-check-btn:hover {
  border-color: var(--color-success);
  color: rgba(34, 197, 94, 0.4);
}

.task-check-btn.checked {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}

/* Dropzone Button in Grid Card - 4:3 preview frame */
.grid-dropzone {
  position: relative;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  text-align: center;
  background: rgba(255, 255, 255, 0.01);
  cursor: pointer;
  transition: border-color var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  box-sizing: border-box;
  overflow: hidden;
}

.grid-dropzone:hover, .grid-dropzone.drag-over {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.03);
}

.grid-dropzone-icon {
  font-size: 1.3rem;
  color: var(--text-dim);
}

.grid-dropzone-text {
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* Carousel Container */
.grid-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000000;
  border: none;
}

.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.carousel-slide.active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

.carousel-slide .grid-media-wrap,
.carousel-slide .viewer-3d-wrap {
  border-radius: 0;
  border: none;
  width: 100%;
  height: 100%;
}

/* Image and 3D previews must fill the fixed carousel frame.  Without these
   rules, an imported image keeps its native pixel size and only its top-left
   corner is visible through the carousel mask. */
.grid-project-card {
  width: 100%;
  min-width: 0;
}

.grid-media-wrap,
.viewer-3d-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #000000;
}

.grid-media-img,
.grid-media-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  background: #000000;
  cursor: zoom-in;
}

.grid-media-video {
  cursor: zoom-in;
  object-fit: cover;
}

.grid-video-play-icon {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 2rem;
  filter: drop-shadow(0 2px 5px #000);
  pointer-events: none;
}

.grid-audio-wrap,
.day-detail-audio,
.grid-document-wrap,
.day-detail-document {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1rem;
  background: radial-gradient(circle at center, #242033, #0a0a0d 70%);
  color: var(--text-main);
}

.grid-audio-wrap i,
.day-detail-audio i,
.grid-document-wrap i {
  color: var(--primary);
  font-size: 2rem;
}

.grid-audio-wrap audio,
.day-detail-audio audio {
  width: min(100%, 28rem);
}

.grid-document-wrap {
  text-decoration: none;
  padding: 0;
  background: #ffffff;
}

.grid-document-wrap,
.day-detail-document { position: relative; }

.pdf-preview-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  background: #ffffff;
}

/* Badge constant, y compris lorsque l'aperçu PDF est une image rendue. */
.media-pdf-badge {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.opening-feedback {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.opening-feedback.active {
  opacity: 1;
  pointer-events: auto;
}

.opening-feedback-panel {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 700;
}

.opening-feedback-panel i { color: var(--primary); }

.server-required {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 1.5rem;
  text-align: center;
}

.server-required > div {
  max-width: 34rem;
  padding: 2rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.server-required i { color: var(--primary); font-size: 2rem; }
.server-required h1 { margin: 0.8rem 0 0.45rem; font-size: 1.25rem; }
.server-required p { margin: 0; color: var(--text-muted); line-height: 1.55; }

.day-detail-document {
  padding: 0;
  gap: 0;
  background: #1a1a1d;
}

.day-detail-document .pdf-preview-canvas {
  width: auto;
  height: auto;
}

.media-actions-overlay {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: flex;
  gap: 0.35rem;
  z-index: 30;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.grid-media-wrap:focus-within .media-actions-overlay,
.viewer-3d-wrap:focus-within .media-actions-overlay {
  opacity: 1;
}

.viewer-3d-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.viewer-3d-toolbar {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: flex;
  gap: 0.3rem;
  z-index: 25;
}

.v3d-btn {
  width: 27px;
  height: 27px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: rgba(8, 8, 10, 0.85);
  color: var(--text-main);
  cursor: pointer;
}

.v3d-btn:hover {
  background: #ffffff;
  color: #000000;
}

.viewer-3d-controls-hint {
  position: absolute;
  right: 0.45rem;
  bottom: 0.35rem;
  z-index: 25;
  color: var(--text-muted);
  font-size: 0.62rem;
  pointer-events: none;
}

/* La grille mensuelle reste une vue d’aperçu : seuls le rendu et les flèches
   du carrousel y sont visibles. Les contrôles 3D complets sont réservés à la
   fiche détaillée de la journée. */
.grid-carousel .viewer-3d-toolbar,
.grid-carousel .viewer-3d-controls-hint {
  display: none;
}

.project-details {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.45rem;
}

/* Full-day detail modal */
.modal-container.day-detail-container {
  width: calc(100vw - 2px);
  max-width: calc(100vw - 2px);
  max-height: calc(100vh - 2px);
}

/* La fiche de journée utilise presque tout l'écran : la marge verticale est
   volontairement réduite pour que l'œuvre reste entière et lisible. */
#dayDetailModal { padding: 1px; }

.modal-container.day-detail-container.portrait-media {
  width: calc(100vw - 2px);
  max-width: calc(100vw - 2px);
}

/* Galerie générale */
.modal-container.gallery-container {
  width: min(1240px, 96vw);
  max-width: min(1240px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.gallery-toolbar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.gallery-toolbar label { display: inline-flex; align-items: center; gap: 0.45rem; }
.gallery-toolbar select { background: var(--bg-surface); color: var(--text-main); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.36rem 0.5rem; font: inherit; }
.gallery-score-filter { cursor: pointer; }
.gallery-score-filter input { accent-color: var(--color-success); }
.gallery-count { margin-left: auto; color: var(--text-dim); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 0.85rem;
  overflow: auto;
  padding: 1.25rem;
}

.gallery-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.gallery-card:hover { transform: translateY(-3px); border-color: var(--color-success); }
.gallery-preview { position: relative; display: grid; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; background: #050506; }
.gallery-preview img, .gallery-preview video { width: 100%; height: 100%; object-fit: cover; }
.gallery-kind-icon { color: var(--text-main); font-size: 2rem; filter: drop-shadow(0 2px 5px #000); }
.gallery-preview .gallery-kind-icon { position: absolute; }
.gallery-info { display: grid; gap: 0.18rem; padding: 0.55rem 0.65rem; font-size: 0.7rem; }
.gallery-info span, .gallery-info em { color: var(--text-muted); font-style: normal; }
.gallery-info strong { font-size: 0.76rem; }
.gallery-info b { color: var(--color-success); }
.gallery-loading, .gallery-empty { grid-column: 1 / -1; padding: 2rem; color: var(--text-muted); text-align: center; }

.day-detail-subtitle {
  display: none;
}

.day-detail-body {
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  /* Espace volontaire entre le média et les deux boutons de choix. */
  gap: 0.65rem;
}

.modal-container.day-detail-container .modal-header {
  min-height: 2.5rem;
  padding: 0.28rem 0.6rem;
}

.day-detail-media-section {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
}

.day-detail-media-section.active {
  display: flex;
}

.day-detail-media-section-title {
  display: none;
}

.day-detail-section-empty {
  min-height: 7rem;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.day-detail-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
}

.day-detail-project {
  min-width: 0;
  padding: 0.42rem 0.55rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.day-detail-project:hover:not(:disabled),
.day-detail-project.active {
  border-color: var(--primary);
  background: rgba(124, 92, 252, 0.12);
}

.day-detail-project:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.day-detail-project-title {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.day-detail-project-media-count {
  margin-top: 0.12rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
  word-break: break-word;
}

.day-detail-carousel {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: #000000;
}

/* Les balayages horizontaux sont gérés par le calendrier et la fenêtre
   galerie. On conserve le défilement vertical naturel sur écran tactile. */
@media (pointer: coarse) {
  .month-carousel-viewport,
  .day-detail-container,
  .day-detail-carousel {
    touch-action: pan-y;
  }
}

.day-detail-carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.day-detail-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000000;
  isolation: isolate;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.day-detail-slide.active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

.day-detail-image,
.day-detail-video,
.day-detail-viewer {
  display: block;
  width: 100%;
  height: 100%;
}

.day-detail-image,
.day-detail-video {
  object-fit: contain;
}

.day-detail-media-label,
.day-detail-counter {
  position: absolute;
  z-index: 30;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: rgba(8, 8, 10, 0.85);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.day-detail-media-label {
  top: 0.6rem;
  left: 0.6rem;
}

.day-detail-category-badge {
  margin-left: 0.35rem;
  padding-left: 0.35rem;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.65rem;
  font-weight: 600;
}

details.day-detail-category-badge {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

details.day-detail-category-badge summary { list-style: none; }
details.day-detail-category-badge summary::-webkit-details-marker { display: none; }

.day-detail-category-control {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  z-index: 34;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: rgba(8, 8, 10, 0.88);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.day-detail-category-control summary {
  min-width: 7.4rem;
  padding: 0.42rem 0.7rem;
  cursor: pointer;
  list-style: none;
}

.day-detail-category-control summary::-webkit-details-marker { display: none; }

.day-detail-category-options {
  position: absolute;
  left: 0;
  top: calc(100% + 0.35rem);
  width: max-content;
  min-width: 10.5rem;
  padding: 0.35rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: #111115;
  box-shadow: var(--shadow-lg);
}

.day-detail-category-options label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.45rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
}

.day-detail-category-options label:hover { background: rgba(255,255,255,.06); color: #fff; }
.day-detail-category-options input { position: absolute; opacity: 0; pointer-events: none; }
.day-detail-category-options label > span {
  width: 0.78rem;
  height: 0.78rem;
  border: 2px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
}
.day-detail-category-options input:checked + span { background: #fff; box-shadow: inset 0 0 0 0.15rem #111115; }

.day-detail-category-apply {
  width: calc(100% - 0.9rem);
  margin: 0.3rem 0.45rem 0.1rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius-sm);
  background: #f2f2f2;
  color: #111115;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.day-detail-category-apply:hover { background: #fff; }
.day-detail-category-apply:disabled { opacity: .55; cursor: wait; }

.day-detail-category-control.category-video {
  top: 2.55rem;
  bottom: auto;
}

.day-detail-media-actions {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 34;
  display: flex;
  gap: 0.35rem;
}

/* Sécurité d'affichage : une règle display:flex ne doit jamais rendre visible
   un bloc d'actions marqué hidden par le navigateur. */
.day-detail-media-actions[hidden] { display: none !important; }

.day-detail-rating {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 34;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.45rem 0.32rem 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: rgba(8, 8, 10, 0.88);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.day-detail-rating select {
  min-width: 6.1rem;
  padding: 0.2rem 0.35rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-main);
  font: inherit;
}

.day-detail-score-select { position: relative; display: inline-block; min-width: 6.1rem; }
.day-detail-score-trigger { display: flex; align-items: center; justify-content: space-between; gap: .45rem; width: 100%; min-height: 1.65rem; padding: .22rem .42rem; border: 0; border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-main); font: inherit; font-size: .72rem; cursor: pointer; }
.day-detail-score-trigger i { color: var(--text-muted); font-size: .58rem; }
.day-detail-score-menu { position: absolute; z-index: 300; top: calc(100% + .3rem); right: 0; display: none; min-width: 7rem; max-height: 14rem; overflow-y: auto; padding: .25rem; border: 1px solid rgba(242,242,242,.35); border-radius: var(--radius-sm); background: #111115; box-shadow: var(--shadow-lg); }
.day-detail-score-menu.active { display: grid; }
.day-detail-score-menu button { padding: .35rem .45rem; border: 0; border-radius: .25rem; background: transparent; color: rgba(242,242,242,.78); font: inherit; font-size: .7rem; text-align: left; cursor: pointer; }
.day-detail-score-menu button:hover, .day-detail-score-menu button.selected { background: #f2f2f2; color: #111115; }

/* La note est normalement placée en bas : son menu remonte dans l'image.
   Sur une vidéo, la note est placée en haut pour libérer les contrôles : le
   menu repart alors vers le bas. */
.day-detail-rating:not(.rating-video) .day-detail-score-menu { top: auto; bottom: calc(100% + .3rem); }
.day-detail-rating.rating-video .day-detail-score-menu { top: calc(100% + .3rem); bottom: auto; }

/* Le menu de note doit passer au-dessus des boutons et du bas de la fiche,
   jamais rester découpé par le cadre du média. */
.day-detail-carousel:has(.day-detail-score-menu.active),
.day-detail-slide:has(.day-detail-score-menu.active) { overflow: visible; }
.day-detail-slide:has(.day-detail-score-menu.active) { z-index: 90; }

/* Les invités peuvent consulter les journées, mais aucune commande d'état
   ou de validation ne doit être interactive. */
body:not(.is-calendar-authenticated) .task-check-btn {
  display: none !important;
}

body:not(.is-calendar-authenticated) .grid-dropzone {
  cursor: default;
}

/* Les commandes natives d'une vidéo occupent le bas : la note reste donc
   toujours lisible au-dessus du lecteur, sans empêcher le plein écran. */
.day-detail-rating.rating-video {
  top: 0.6rem;
  right: 5.2rem;
  bottom: auto;
}

.day-detail-slide.has-video-rating .day-detail-media-actions {
  right: 0.6rem;
}

/* Commande locale intégrée au cartouche du média : elle ne gêne pas les
   commandes natives de la vidéo et agit seulement sur la vidéo ouverte. */
.day-detail-media-label.has-video-loop {
  display: flex;
  align-items: center;
  gap: 0.18rem;
  padding-right: 0.25rem;
}

.day-detail-media-label .day-detail-video-loop {
  position: static;
  width: 1.25rem;
  height: 1.25rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(242,242,242,.68);
  font-size: 0.67rem;
}

.day-detail-media-label .day-detail-video-loop:hover {
  background: rgba(242,242,242,.16);
  color: #fff;
}

.day-detail-media-label .day-detail-video-loop.active {
  background: #f2f2f2;
  color: #101011;
}

/* In the detailed 3D view, model controls use the lower edge so they never
   overlap the counter or the replace/delete buttons. */
.day-detail-viewer .viewer-3d-toolbar {
  top: auto;
  right: 0.6rem;
  bottom: 0.6rem;
}

.day-detail-viewer .viewer-3d-controls-hint {
  right: auto;
  bottom: 0.7rem;
  left: 0.6rem;
}

.day-detail-counter {
  top: 0.6rem;
  right: 5rem;
}

/* Sans crayon ni corbeille, le compteur de carrousel utilise directement le
   coin supérieur droit au lieu de laisser un espace vide. */
.day-detail-carousel.is-read-only .day-detail-counter {
  right: 0.6rem;
}

.day-detail-nav {
  position: absolute;
  top: 50%;
  z-index: 35;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: rgba(8, 8, 10, 0.85);
  color: var(--text-main);
  cursor: pointer;
}

.day-detail-nav:hover {
  background: #ffffff;
  color: #000000;
}

.day-detail-nav.prev { left: 0.75rem; }
.day-detail-nav.next { right: 0.75rem; }

.day-detail-dots {
  position: absolute;
  z-index: 35;
  bottom: 0.65rem;
  left: 50%;
  display: flex;
  gap: 0.4rem;
  transform: translateX(-50%);
}

.day-detail-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.day-detail-dot.active {
  background: #ffffff;
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.9);
}

.media-import-progress {
  position: fixed;
  z-index: 2000;
  right: 1.25rem;
  bottom: 5.25rem;
  width: min(22rem, calc(100vw - 2.5rem));
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: rgba(16, 16, 20, 0.96);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.75rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.media-import-progress.active {
  opacity: 1;
  transform: translateY(0);
}

.media-import-progress-title { font-size: 0.8rem; font-weight: 700; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-import-progress-label { margin-top: 0.3rem; font-size: 0.74rem; color: var(--text-muted); }
.media-import-progress-track { height: 0.42rem; margin-top: 0.65rem; overflow: hidden; border-radius: var(--radius-full); background: var(--bg-surface); }
.media-import-progress-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width 0.18s ease; }
.media-import-progress.is-processing .media-import-progress-fill { width: 90% !important; animation: import-processing 1.1s ease-in-out infinite; }
@keyframes import-processing { 50% { filter: brightness(1.55); transform: translateX(7%); } }

.day-detail-empty {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 150px;
  place-items: center;
  padding: 1rem;
  color: var(--text-muted);
  text-align: center;
  font-size: 0.85rem;
}

.missing-media-message {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0.75rem;
  color: var(--text-muted);
  background: rgba(239, 68, 68, 0.08);
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: center;
}

/* Carousel Nav Buttons */
.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(8, 8, 10, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition-fast);
  font-size: 0.72rem;
}

.grid-carousel:hover .carousel-nav-btn {
  opacity: 1;
}

.carousel-nav-btn:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.carousel-nav-btn.prev-btn {
  left: 0.4rem;
}

.carousel-nav-btn.next-btn {
  right: 0.4rem;
}

/* Carousel Indicators Dots */
.carousel-indicators {
  position: absolute;
  bottom: 0.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.3rem;
  z-index: 20;
  pointer-events: auto;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.carousel-dot.active, .carousel-dot:hover {
  background: #ffffff;
  transform: scale(1.25);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

/* Carousel Counter Badge */
.carousel-counter {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  background: rgba(8, 8, 10, 0.8);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-color);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  z-index: 20;
  pointer-events: none;
}

.grid-media-wrap:hover .media-actions-overlay,
.viewer-3d-wrap:hover .media-actions-overlay {
  opacity: 1;
}

.action-icon-btn {
  background: rgba(8, 8, 10, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.78rem;
}

.action-icon-btn:hover {
  background: #ffffff;
  color: #000000;
}

.action-icon-btn.danger:hover {
  background: var(--color-failed);
  color: #ffffff;
}

.grid-project-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  word-break: break-word;
  line-height: 1.2;
}

.grid-project-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.25;
  word-break: break-word;
}

/* Modals & Drawers */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 550px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px) scale(0.95);
  transition: transform var(--transition-normal);
}

.modal-backdrop.active .modal-container {
  transform: translateY(0) scale(1);
}

.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-input, .form-textarea {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition-fast);
}

.form-input:focus, .form-textarea:focus {
  border-color: #ffffff;
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Lightbox */
.image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(12px);
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.image-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
}

/* Media Query Breakdown */
@media (max-width: 768px) {
  .month-overview-grid {
    grid-template-columns: repeat(var(--calendar-columns, 5), minmax(0, 1fr));
    gap: 0.28rem;
    padding: 0.45rem 0.35rem 4.75rem;
  }

  .month-overview-grid.week-overview,
  .month-overview-grid.six-day-overview,
  .month-overview-grid.five-day-overview,
  .month-overview-grid.four-day-overview,
  .month-overview-grid.three-day-overview,
  .month-overview-grid.two-day-overview,
  .month-overview-grid.single-day-overview {
    grid-template-columns: repeat(var(--calendar-columns, 1), minmax(0, 1fr));
  }

  .month-label-year { display: inline; }

  .day-grid-card {
    min-width: 0;
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-radius: 0.28rem;
  }

  .day-grid-header {
    min-height: 1.7rem;
    padding: 0.2rem 0.24rem;
    gap: 0.12rem;
  }

  .day-grid-date {
    min-width: 0;
    font-size: 0.62rem;
  }

  .day-date-full { display: none; }
  .day-date-mobile {
    display: flex;
    align-items: baseline;
    gap: 0.16rem;
    text-transform: capitalize;
  }
  .day-date-mobile b { font-size: 0.72rem; color: #fff; }

  .day-status-badge {
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.56rem;
  }

  .day-status-label { display: none; }

  .grid-col,
  .month-overview-grid.show-painting .grid-col[data-task-type="painting"],
  .month-overview-grid.show-project3d .grid-col[data-task-type="project3d"] {
    padding: 0.12rem;
  }

  .grid-dropzone-icon { font-size: 0.82rem; }
  .carousel-nav { transform: scale(0.72); }
  .carousel-counter { transform: scale(0.72); transform-origin: top left; }

  .month-overview-grid.week-overview,
  .month-overview-grid.six-day-overview {
    gap: 0.14rem;
    padding-inline: 0.14rem;
  }

  .month-overview-grid.week-overview .day-grid-header,
  .month-overview-grid.six-day-overview .day-grid-header {
    align-items: center;
    flex-direction: row;
    min-height: 1.7rem;
  }

  .month-overview-grid.week-overview .day-status-badge,
  .month-overview-grid.six-day-overview .day-status-badge {
    width: 0.9rem;
    height: 0.9rem;
    font-size: 0.48rem;
  }

  .calendar-legend .legend-label { display: none; }
  .calendar-legend { justify-content: center; gap: 1.1rem; }

  .month-nav-bar {
    padding: 0 0.35rem;
  }

  .month-nav-center {
    gap: 0.28rem;
  }

  .month-nav-step-label { display: none; }
  .month-nav-bar > .btn { padding-inline: 0.52rem; }
  .month-nav-title { gap: 0.3rem; padding-inline: 0.25rem; font-size: 0.82rem; }
  .task-view-switch { gap: 0.1rem; padding: 0.14rem; }
  .task-view-btn { padding: 0.3rem 0.42rem; font-size: 0.68rem; }

  .month-picker-popover {
    width: min(calc(100vw - 1rem), 24rem);
    flex-wrap: wrap;
    justify-content: center;
  }

  .month-picker-field {
    flex: 1 1 7rem;
  }

  .month-picker-field select {
    width: 100%;
  }

  .calendar-zoom-dock {
    /* On a phone this is the main way to change the density of the grid.
       Keep every control comfortably usable with a thumb. */
    bottom: max(0.8rem, env(safe-area-inset-bottom));
    min-height: 3.35rem;
    gap: 0.8rem;
    padding: 0.48rem 0.7rem;
  }

  /* Sur téléphone les deux symboles suffisent : l'espace entre eux rend la
     commande immédiatement lisible sans prendre de place sur la galerie. */
  .calendar-zoom-label,
  .calendar-zoom-value {
    display: none;
  }

  .calendar-zoom-btn {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    font-size: 1.12rem;
  }

  .day-detail-body {
    padding: 0.35rem;
  }

  .day-detail-category-options { max-width: calc(100vw - 1rem); }
  .day-detail-rating { right: 0.35rem; bottom: 0.35rem; transform: scale(0.9); transform-origin: bottom right; }
  .day-detail-rating.rating-video { top: 0.35rem; right: 4.7rem; bottom: auto; transform-origin: top right; }

  .day-detail-summary {
    grid-template-columns: 1fr;
  }
}

/* Les sept domaines restent immédiatement accessibles sur tablette et mobile.
   Le mois occupe la première rangée ; les onglets ont leur propre rangée
   horizontale et peuvent défiler sur les écrans les plus étroits. */
@media (max-width: 1100px) {
  .month-nav-bar {
    height: 5.9rem;
    min-height: 5.9rem;
    max-height: none;
    padding: .3rem .45rem;
  }

  .month-nav-center {
    width: 100%;
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    gap: .28rem;
  }

  .month-nav-title { min-height: 2.25rem; }

  .month-nav-bar > .btn {
    position: absolute;
    top: .35rem;
    z-index: 2;
    min-width: 2.25rem;
    min-height: 2.25rem;
  }
  .month-nav-bar > #mainPrevMonth { left: .45rem; }
  .month-nav-bar > #mainNextMonth { right: .45rem; }

  .task-view-switch {
    width: min(100%, 36rem);
    max-width: calc(100vw - .9rem);
    min-height: 2.55rem;
    margin-inline: auto;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: safe center;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .task-view-switch::-webkit-scrollbar { display: none; }
  .task-view-btn { flex: 0 0 auto; min-height: 2.05rem; scroll-snap-align: center; }
}

@media (max-width: 520px) {
  /* Les sept applications tiennent sur la plupart des téléphones : elles
     restent donc centrées. « safe » les aligne au début uniquement si un
     écran exceptionnellement étroit impose un défilement horizontal. */
  .task-view-switch { justify-content: safe center; }
  .task-view-btn { padding-inline: .52rem; }
  .task-view-label { font-size: .64rem; }
  .day-date-mobile { gap: .2rem; }
  .day-date-mobile > span { display: block; line-height: 1; }
  .day-date-mobile b { display: block; line-height: 1; }
  .calendar-domain-content { min-height: 3.4rem; padding: .35rem; font-size: .58rem; }
  .calendar-domain-content > i { font-size: 1rem; }
}

/* Dock des applications du Calendrier : même construction que le dock React
   de Notes (pastille flottante, bord fin et boutons sans mouvement vertical).
   Le Calendrier reste pour l'instant une page JavaScript classique, mais son
   interface utilise désormais les mêmes règles visuelles partagées. */
.calendar-app-dock {
  position: fixed;
  z-index: 190;
  bottom: max(.8rem, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  width: max-content;
  max-width: calc(100vw - 1.5rem);
  justify-content: center;
  padding: .32rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: rgba(13,13,16,.94);
  box-shadow: 0 0 0 1px rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.20);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateX(-50%);
}

.calendar-app-dock .task-view-switch {
  width: auto;
  max-width: calc(100vw - 2.15rem);
  min-height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  gap: .22rem;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: safe center;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.calendar-app-dock .task-view-switch::-webkit-scrollbar { display: none; }
.calendar-app-dock .task-view-btn {
  min-height: 2.38rem;
  height: 2.38rem;
  padding: 0 1.08rem;
  border-radius: 999px;
  scroll-snap-align: center;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.calendar-app-dock .task-view-btn:hover:not(.active) { transform: none; }
.calendar-app-dock .task-view-btn:active { transform: none; }
.calendar-app-dock .task-view-btn.active { animation: none; }

/* Sous ce seuil, les libellés se replient déjà en icônes. Chaque application
   garde néanmoins une cible large, clairement en pilule et bien séparée. */
@media (max-width: 1650px) {
  .calendar-app-dock .task-view-btn {
    width: 2.55rem;
    min-width: 2.55rem;
    height: 2.45rem;
    min-height: 2.45rem;
    padding: 0;
    border-radius: 999px;
  }
}

/* Le zoom du calendrier reste volontairement plus petit et se place juste
   au-dessus des applications afin de ne jamais recouvrir les derniers jours. */
.calendar-app-dock ~ .calendar-zoom-dock {
  z-index: 189;
  bottom: calc(max(.8rem, env(safe-area-inset-bottom)) + 3.35rem);
  min-height: 2rem;
  padding: .22rem .35rem;
  gap: .2rem;
}
.calendar-app-dock ~ .calendar-zoom-dock .calendar-zoom-label,
.calendar-app-dock ~ .calendar-zoom-dock .calendar-zoom-value { font-size: .62rem; }
.calendar-app-dock ~ .calendar-zoom-dock .calendar-zoom-btn {
  width: 22px;
  height: 22px;
  font-size: .62rem;
}

.month-overview-grid { padding-bottom: 8.25rem; }

@media (max-width: 1100px) {
  .calendar-app-dock {
    width: max-content;
    max-width: calc(100vw - 1.5rem);
    padding: .32rem;
  }
  .calendar-app-dock .task-view-switch {
    width: auto;
    max-width: calc(100vw - 2.15rem);
    min-height: auto;
    gap: .22rem;
  }
  .calendar-app-dock .task-view-btn {
    width: 2.55rem;
    min-width: 2.55rem;
    height: 2.45rem;
    min-height: 2.45rem;
    border-radius: 999px;
  }
  .calendar-app-dock ~ .calendar-zoom-dock {
    bottom: calc(max(.8rem, env(safe-area-inset-bottom)) + 3.35rem);
    min-height: 1.9rem;
  }
  .calendar-app-dock ~ .calendar-zoom-dock .calendar-zoom-btn {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: .42rem;
    font-size: .76rem;
  }
  .month-overview-grid { padding-bottom: 7.8rem; }
}

/* Les cartes gardent un badge rond et compact à toutes les largeurs. Le texte
   complet est fourni par aria-label et par la légende du calendrier : il ne
   peut donc jamais chevaucher la date dans une grille de sept jours. */
.day-status-label {
  display: none;
}

.day-header-tags {
  gap: .2rem;
}

.day-status-badge {
  width: 1.34rem;
  height: 1.34rem;
  min-width: 1.34rem;
  justify-content: center;
  gap: 0;
  padding: 0;
  border-radius: 50%;
  font-size: .68rem;
  line-height: 1;
}

.day-status-badge.badge-completed {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #ffffff;
}

.day-status-badge.badge-partial {
  background: var(--color-partial);
  border-color: var(--color-partial);
  color: #ffffff;
}

.day-status-badge.badge-failed {
  background: var(--color-failed);
  border-color: var(--color-failed);
  color: #ffffff;
}

.day-status-badge.badge-future {
  background: var(--color-future);
  border-color: var(--color-future);
  color: #ffffff;
}

.month-overview-grid.week-overview .day-status-badge,
.month-overview-grid.six-day-overview .day-status-badge {
  width: 1.34rem;
  height: 1.34rem;
  min-width: 1.34rem;
  font-size: .68rem;
}

/* Les badges restent ronds en mode compact, avec une taille légèrement
   renforcée pour que les pictogrammes restent immédiatement lisibles. */
@media (max-width: 1650px) {
  .day-status-badge {
    width: 1.34rem;
    height: 1.34rem;
    font-size: .68rem;
  }

  /* En mode compact, la pastille porte directement la couleur du statut. */
  .day-status-badge.badge-completed {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #ffffff;
  }

  .day-status-badge.badge-partial {
    background: var(--color-partial);
    border-color: var(--color-partial);
    color: #ffffff;
  }

  .day-status-badge.badge-failed {
    background: var(--color-failed);
    border-color: var(--color-failed);
    color: #ffffff;
  }

  .day-status-badge.badge-future {
    background: var(--color-future);
    border-color: var(--color-future);
    color: #ffffff;
  }
}

/* À partir d'une largeur de téléphone ou de petite tablette, les cartes ne
   gardent que l'icône. Le libellé reste présent pour les lecteurs d'écran et
   l'attribut aria-label de la pastille décrit toujours l'état. */
@media (max-width: 900px) {
  .day-status-label { display: none; }
  .day-status-badge {
    width: 1.2rem;
    height: 1.2rem;
    min-width: 1.2rem;
    font-size: .6rem;
  }
}

@media (max-width: 520px) {
  .day-status-badge {
    width: 1.08rem;
    height: 1.08rem;
    min-width: 1.08rem;
    font-size: .54rem;
  }

  .month-overview-grid.week-overview .day-status-badge,
  .month-overview-grid.six-day-overview .day-status-badge {
    width: .9rem;
    height: .9rem;
    min-width: .9rem;
    font-size: .48rem;
  }
}