@import url("/frontend/css/theme-b-tokens.css");

/*
 * Tableau de bord admin — feuille principale (référence bureau).
 * Composants + mise en page deux colonnes / hauteur fixe.
 * Vue téléphone : dashboardAdmin.mobile.css (lien media max-width: 768px).
 */

/*
 * Scroll : porté par main.dashboardAdminContainer (voir dashboardAdmin-da-test.css).
 * html/body ne défilent pas — pas de zone vide sous le contenu admin.
 */
body.dashboard-admin-page {
  box-sizing: border-box;
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f4f5f7;
  color: #202124;
  padding-left: calc(var(--shell-rail-w, 64px) + 1.25rem);
  padding-right: 0;
}

/* Dashboard admin: centrage strict de l'avatar user dans la control bar */
body.dashboard-admin-page .railUser__avatar {
  display: grid;
  place-items: center;
  line-height: 1;
  text-align: center;
}

.dashboardAdminContainer {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.dashboardAdminScrollInner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1680px;
  min-width: 0;
  margin: 0 auto;
  padding: 1rem 18px 28px;
}

.dashboardAdminScrollInner > * {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1200px) {
  body.dashboard-admin-page {
    padding-left: calc(var(--shell-rail-w, 64px) + 0.75rem);
    padding-right: 0;
  }

  .dashboardAdminScrollInner {
    padding: 0.85rem 12px 24px;
  }
}

.dashboardHeader h1 {
  margin: 2px 0 0;
  font-size: 26px;
}

.dashboardHeader p {
  margin: 8px 0 0;
  color: #5f6368;
}

/*
 * Barre d’actions admin — variables --pt-* comme le lobby.
 * <nav.trainingTabsNav> : flux sous le titre, sticky comme programmsTrainning.css ; défilement horizontal des boutons.
 */
.dashboard-admin-page .adminDashboardTabsSkin {
  --pt-user: #e9d5ff;
  --pt-user-soft: rgba(255, 255, 255, 0.12);
  --pt-glass: rgba(255, 255, 255, 0.14);
  --pt-glass-strong: rgba(255, 255, 255, 0.22);
  --pt-surface: var(--pt-glass-strong);
  --pt-text: #141210;
  --pt-muted: rgba(255, 255, 255, 0.88);
  --pt-accent: #fde68a;
  --pt-accent2: #f9a8d4;
  --pt-border: rgba(255, 255, 255, 0.28);
  --pt-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  --pt-card-shadow-hover: 0 14px 40px rgba(0, 0, 0, 0.22);
  --pt-elev: 0 4px 24px rgba(0, 0, 0, 0.12);
  --pt-line: 1px solid rgba(255, 255, 255, 0.28);
  --pt-line-inset: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --pt-radius: 18px;
  --pt-radius-sm: 18px;
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dashboard-admin-page .adminDashboardTabsSkin .trainingTabsNav {
  position: sticky;
  top: max(0.25rem, env(safe-area-inset-top));
  left: auto;
  right: auto;
  z-index: 50;
  margin: 0 0 1rem;
  padding: 0.42rem 0.5rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--pt-radius-sm);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: var(--pt-elev), var(--pt-line-inset);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  /* Pas de -webkit-overflow-scrolling ici : évite un 2e porteur d’inertie avec le scroll du body */
  scrollbar-width: thin;
}

.dashboard-admin-page .adminDashboardTabsSkin .trainingTabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  width: max-content;
  max-width: none;
  min-width: min(100%, max-content);
}

.dashboard-admin-page .adminDashboardTabsSkin .trainingTabs--adminBar {
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
}

.dashboard-admin-page .adminDashboardTabsSkin .trainingTabs__lead {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.dashboard-admin-page .adminDashboardTabsSkin .trainingTabs__lead .trainingTabs__btn {
  flex: 0 0 auto;
  flex-shrink: 0;
  white-space: nowrap;
}

.dashboard-admin-page .adminDashboardTabsSkin .trainingTabs__btn {
  appearance: none;
  border: 1px solid var(--pt-border);
  background: var(--pt-glass);
  color: var(--pt-text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--pt-line-inset);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.dashboard-admin-page .adminDashboardTabsSkin .trainingTabs__btn:not(#assignBtn.assignBtn--success):not(#assignBtn.assignBtn--blocked) {
  color: #141210;
}

.dashboard-admin-page .adminDashboardTabsSkin .trainingTabs__btn:hover {
  background: var(--pt-glass-strong);
  border-color: rgba(255, 255, 255, 0.38);
}

.dashboard-admin-page .adminDashboardTabsSkin .trainingTabs__btn:focus-visible {
  outline: 2px solid var(--pt-accent);
  outline-offset: 2px;
}

.dashboard-admin-page .adminDashboardTabsSkin .trainingTabs__btn.is-active {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: var(--pt-line-inset), 0 4px 14px rgba(0, 0, 0, 0.12);
}

.dashboard-admin-page .adminDashboardTabsSkin .trainingTabs__btn--iconTrash {
  padding: 0.5rem 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
}

.dashboard-admin-page .adminDashboardTabsSkin .trainingTabs__btn--iconTrash .bulkDeleteTrashIcon {
  display: block;
}

.dashboard-admin-page .adminDashboardTabsSkin #assignBtn.assignBtn--success {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  border-color: rgba(74, 222, 128, 0.45) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 2px rgba(22, 163, 74, 0.25),
    var(--pt-line-inset) !important;
  animation: assignBtnSuccessAura 1.45s cubic-bezier(0.45, 0, 0.2, 1) both;
}

/* Attribution sans nouveauté : tout le monde a déjà le(s) module(s) sélectionné(s) */
.dashboard-admin-page .adminDashboardTabsSkin #assignBtn.assignBtn--blocked {
  background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
  border-color: rgba(252, 165, 165, 0.55) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 2px rgba(220, 38, 38, 0.28),
    var(--pt-line-inset) !important;
}

.dashboard-admin-page .adminDashboardTabsSkin #assignBtn.assignBtn--blocked:hover {
  filter: brightness(1.05);
}

.assignDuplicateHint {
  display: none;
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #f87171 55%, var(--admin-border, #d7dbe3));
  background: color-mix(in srgb, #fef2f2 88%, var(--admin-surface-soft, #fafbfc));
  color: var(--admin-text, #202124);
  font-size: 0.9rem;
  line-height: 1.45;
  outline: none;
}

.assignDuplicateHint:not([hidden]) {
  display: block;
}

.assignDuplicateHint__title {
  display: block;
  font-size: 0.95rem;
  color: #991b1b;
  margin: 0 0 8px;
}

.assignDuplicateHint__text {
  margin: 0 0 10px;
  color: var(--admin-muted, #5f6368);
}

.assignDuplicateHint__emailHelp {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--admin-border, #d7dbe3) 80%, #fecaca);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--admin-muted, #5f6368);
}

.assignDuplicateHint__emailHelp code {
  font-size: 0.8em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--admin-surface-soft, #f7f8fa) 70%, #fee2e2);
  color: #7f1d1d;
}

@keyframes assignBtnSuccessAura {
  0% {
    filter: brightness(1);
    box-shadow:
      0 0 0 0 rgba(22, 163, 74, 0),
      var(--pt-line-inset) !important;
  }
  40% {
    filter: brightness(1.1);
    box-shadow:
      0 0 22px 5px rgba(34, 197, 94, 0.42),
      0 0 0 3px rgba(74, 222, 128, 0.38),
      var(--pt-line-inset) !important;
  }
  65% {
    filter: brightness(1.05);
    box-shadow:
      0 0 12px 2px rgba(34, 197, 94, 0.28),
      0 0 0 2px rgba(22, 163, 74, 0.32),
      var(--pt-line-inset) !important;
  }
  100% {
    filter: brightness(1);
    box-shadow:
      0 0 0 2px rgba(22, 163, 74, 0.25),
      var(--pt-line-inset) !important;
  }
}

/* Même recalage --pt-* qu’en mode carnet (body porte .dashboard-admin-page, pas un enfant) */
body.theme-carnet-lumineux.dashboard-admin-page .adminDashboardTabsSkin {
  --pt-text: #0f0d0c;
  --pt-muted: var(--da-text-muted);
  --pt-glass: color-mix(in srgb, var(--da-surface-elevated) 95%, var(--da-bg-page-mid));
  --pt-glass-strong: var(--da-surface-elevated);
  --pt-border: color-mix(in srgb, var(--da-border) 92%, #3a322b 8%);
  --pt-line: 1px solid var(--da-border);
  --pt-line-inset: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --pt-card-shadow: var(--da-shadow-card);
  --pt-card-shadow-hover: 0 8px 28px rgba(90, 72, 54, 0.1);
  --pt-elev: var(--da-shadow-card);
  background: transparent;
}

body.theme-carnet-lumineux.dashboard-admin-page .adminDashboardTabsSkin .trainingTabs__btn:not(#assignBtn.assignBtn--success):not(#assignBtn.assignBtn--blocked) {
  color: #0c0a09;
}

body.theme-carnet-lumineux.dashboard-admin-page .adminDashboardTabsSkin #assignBtn.assignBtn--blocked {
  color: #fff !important;
}

body.theme-carnet-lumineux.dashboard-admin-page .adminDashboardTabsSkin .trainingTabs__btn--iconTrash {
  color: #0c0a09;
}

.visuallyHiddenAdmin {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.assignToolbarMsg {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.primaryBtn,
.ghostBtn,
.smallBtn {
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.primaryBtn {
  background: linear-gradient(135deg, #2b7cff, #6f42ff);
  color: #fff;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 700;
  min-width: 170px;
}


.ghostBtn {
  background: #fff;
  color: #2f3134;
  border: 1px solid #d6d8dc;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
}

.smallBtn {
  background: #eceff3;
  color: #2f3134;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
}

.iconActionBtn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f4f7fb;
  color: #5e6773;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.iconActionBtnGlyph {
  display: inline-flex;
  font-size: 17px;
  line-height: 1;
  transition: transform 0.24s ease, color 0.2s ease;
}

.iconActionBtn:hover .iconActionBtnGlyph {
  color: #2f4fa8;
  transform: rotate(45deg);
}

.panelTitleRow:hover .iconActionBtn,
.panelTitleRow:focus-within .iconActionBtn,
.iconActionBtn:focus-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.primaryBtn:hover,
.ghostBtn:hover,
.smallBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.dashboardGrid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  align-items: start;
  /* Pas d'overflow-x: auto ici : créait un 2e axe de scroll et absorbait le 1er geste. */
  overflow-x: visible;
}

.panel {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(31, 36, 42, 0.08);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panelTitleRow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  margin-bottom: 8px;
}

/* Titre à gauche, boutons accolés à droite avec léger espacement entre eux */
.panelTitleRow h2 {
  flex: 1 1 auto;
  min-width: 0;
}

.panelTitleRow .iconActionBtn + .iconActionBtn {
  margin-inline-start: 6px;
}

.panel h2 {
  margin: 0;
  font-size: 19px;
}

/* <details> (HTML commun) — comportement mobile dans dashboardAdmin.mobile.css */
.adminDashboardDetails__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

details.adminDashboardDetails[open] .adminDashboardDetails__summary {
  margin-bottom: 0.85rem;
}

.adminDashboardDetails__summary::-webkit-details-marker {
  display: none;
}

.adminDashboardDetails__summary .panelTitleRow {
  width: 100%;
  margin-bottom: 0;
}

.adminDashboardDetails__summaryMain {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
  text-align: left;
  width: 100%;
}

.adminDashboardDetails__hint {
  display: block;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #5f6368;
  max-width: 52ch;
}

.adminDashboardDetails__panel {
  margin-top: 0;
  min-height: 0;
}

@media (min-width: 769px) {
  .adminDashboardDetails__summary {
    cursor: default;
  }

  .adminDashboardDetails__hint {
    display: none;
  }

  /*
   * Chaîne flex jusqu’aux listes : ne pas utiliser height:auto sur ::details-content
   * (sinon la zone grandit avec le contenu et overflow-y des listes ne s’active jamais).
   * Limité aux colonnes Programmes / Utilisateurs : pas le compositeur promesse ni #promesses.
   */
  .dashboardGrid .panelLeft.adminDashboardDetails,
  .dashboardGrid .panelRight.adminDashboardDetails {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .dashboardGrid .panelLeft.adminDashboardDetails::details-content,
  .dashboardGrid .panelRight.adminDashboardDetails::details-content {
    transition: none !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Fermé : pas de réserve de hauteur pour le contenu — évite 64vh « vide » sous le titre. */
  .dashboardGrid .panelLeft.adminDashboardDetails:not([open])::details-content,
  .dashboardGrid .panelRight.adminDashboardDetails:not([open])::details-content {
    flex: 0 0 0 !important;
    flex-basis: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  .dashboardGrid .panelLeft.adminDashboardDetails .adminDashboardDetails__panel,
  .dashboardGrid .panelRight.adminDashboardDetails .adminDashboardDetails__panel {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .dashboardGrid .panelLeft.adminDashboardDetails:not([open]) .adminDashboardDetails__panel,
  .dashboardGrid .panelRight.adminDashboardDetails:not([open]) .adminDashboardDetails__panel {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

/*
 * Grille ≥981px : colonnes Programmes / Users en 64vh seulement quand le <details> est [open].
 * Fermé → seule la hauteur du bandeau titre (plus de triple bande 64vh vide).
 */
@media (min-width: 981px) {
  .dashboardAdminScrollInner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 10px;
    align-items: start;
  }

  .dashboardHeader {
    grid-column: 1 / -1;
  }

  .adminDashboardTabsSkin {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
    margin-bottom: 0;
  }

  .dashboardGrid {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-right: 0;
  }

  .dashboardGrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    justify-content: stretch;
    align-items: start;
  }

  .dashboardGrid .panelLeft.adminDashboardDetails,
  .dashboardGrid .panelRight.adminDashboardDetails {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  /* Fermé : hauteur = résumé seulement. Ouvert : zone liste bornée (scroll interne modules / users). */
  .dashboardGrid .panelLeft.adminDashboardDetails:not([open]),
  .dashboardGrid .panelRight.adminDashboardDetails:not([open]) {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .dashboardGrid .panelLeft.adminDashboardDetails[open],
  .dashboardGrid .panelRight.adminDashboardDetails[open] {
    height: 64vh;
    min-height: 64vh;
    max-height: 64vh;
  }

  .dashboardGrid > .adminPromisesCarnetBlock--dashboardCol {
    min-width: 0;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    align-self: start;
    box-sizing: border-box;
  }

  /*
   * Panneaux listes bornés (scroll interne) : colonnes gauche/droite uniquement.
   * Compositeur + Promesses : contenu peut déborder en hauteur sur la grille (pas de plafond 64vh générique details).
   */
  .dashboardGrid .panelLeft.adminDashboardDetails .adminDashboardDetails__panel,
  .dashboardGrid .panelRight.adminDashboardDetails .adminDashboardDetails__panel {
    overflow: hidden;
  }

  .dashboardGrid > .adminPromisesCarnetBlock--dashboardCol .adminDashboardDetails__panel,
  .dashboardGrid #promesses .adminDashboardDetails__panel {
    overflow: visible;
  }

  /* Pleine largeur, flux naturel (pas de grid-row: 4/5 — laissait 2 rangées vides + scroll inutile). */
  #promesses,
  .dashboardGrid > .adminTrackingPanel {
    grid-column: 1 / -1;
    grid-row: auto;
    align-self: start;
  }

  #promesses {
    overflow: visible;
  }
}

/*
 * Tablette / fenêtre ≤980px : une colonne + page qui défile.
 * On ne touche PAS à .panel ni .modulesList (sinon conflit avec le scroll interne du bureau).
 */
@media (max-width: 980px) {
  body.dashboard-admin-page {
    padding-left: calc(var(--shell-rail-w, 64px) + 0.75rem);
    padding-right: 0;
  }

  .dashboardAdminScrollInner {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0.85rem 12px 18px;
    height: auto;
  }

  .dashboardGrid {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    max-width: 100%;
    min-width: 0;
  }

  .dashboardGrid > .adminPromisesCarnetBlock--dashboardCol,
  .dashboardGrid #promesses {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .adminTrackingPanel.panel {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .adminTrackingView {
    flex: none;
    min-height: 0;
    overflow: visible;
  }

  .modulesList,
  .usersList {
    flex: none;
    min-height: 0;
    overflow: visible;
    padding-bottom: 12px;
  }

  /* Document scroll au lieu du scroll imbriqué (tablette / fenêtre étroite sans feuille mobile dédiée). */
  .dashboardGrid .panelLeft.adminDashboardDetails::details-content,
  .dashboardGrid .panelRight.adminDashboardDetails::details-content {
    overflow: visible !important;
    flex: none !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .dashboardGrid .panelLeft.adminDashboardDetails .adminDashboardDetails__panel,
  .dashboardGrid .panelRight.adminDashboardDetails .adminDashboardDetails__panel {
    overflow: visible !important;
    flex: none !important;
    min-height: 0 !important;
  }

  .moduleObjectiveDurationRow .moduleObjectiveDurationInput,
  .moduleObjectiveDifficultyRow .moduleObjectiveDifficultyInput {
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
  }

  .moduleObjectiveDurationPresets,
  .moduleObjectiveDifficultyPresets {
    flex: 1 1 100%;
  }

  .moduleObjectiveDurationPresetBtn,
  .moduleObjectiveDifficultyPresetBtn {
    padding: 0.45rem 0.75rem;
    min-width: 2.6rem;
    font-size: 11px;
  }
}

.searchInput {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d7dbe3;
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 14px;
  margin-bottom: 10px;
  outline: none;
}

.searchInput:focus {
  border-color: #4d7cff;
  box-shadow: 0 0 0 3px rgba(77, 124, 255, 0.15);
}

.modulesList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Room so hover scale/lift does not clip against the scroll viewport */
  padding: 8px 10px 10px 8px;
  box-sizing: border-box;
}

.moduleCard {
  position: relative;
  border: 1px solid #e7e9ee;
  border-radius: 12px;
  padding: 8px 10px;
  background: #fafbfc;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.moduleCard h3 {
  margin: 0 0 2px;
  font-size: 15px;
}

.moduleCardTitleWrap {
  flex: 1;
  min-width: 0;
}

.moduleCard:not(.programEditMode) .moduleCardTitleInput {
  display: none;
}

.moduleCard.programEditMode .moduleCardTitleView {
  display: none;
}

.moduleCard.programEditMode .moduleCardTitleInput {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid #d7dbe3;
  color: #2f3134;
  background: #fff;
}

.moduleCard.programEditMode .moduleCardTitleInput:focus {
  outline: none;
  border-color: #4d7cff;
  box-shadow: 0 0 0 3px rgba(77, 124, 255, 0.15);
}

.moduleTopRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.moduleExpandBtn {
  border: none;
  background: transparent;
  color: #5e6773;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition:
    opacity 0.22s ease,
    transform 0.22s cubic-bezier(0.33, 1, 0.68, 1),
    color 0.2s ease,
    background 0.2s ease;
}

.moduleExpandBtn:active {
  transform: translateY(0) scale(0.9);
}

.moduleExpandBtn:hover {
  background: rgba(67, 118, 255, 0.12);
  color: #2f4fa8;
}

.moduleCard:hover .moduleExpandBtn,
.moduleCard.detailsOpen .moduleExpandBtn {
  opacity: 1;
  transform: translateY(0);
}

.moduleCard:hover .moduleExpandBtn:active,
.moduleCard.detailsOpen .moduleExpandBtn:active {
  transform: scale(0.9);
}

.moduleChevron {
  font-size: 15px;
  line-height: 1;
  transition: transform 0.24s ease;
}

.moduleCard.detailsOpen .moduleChevron {
  transform: rotate(180deg);
}

.moduleMeta {
  margin: 0 0 1px;
  color: #4f5660;
  font-size: 11px;
  line-height: 1.25;
}

.moduleMeta--categories,
.moduleMeta--secondaryFacts {
  margin-top: 3px;
  line-height: 1.3;
}

.moduleMeta--categories {
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.moduleMeta--secondaryFacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  margin: 0;
}

.moduleMetaRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
  min-width: 0;
}

.moduleCategoryPills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.moduleCategoryPill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  border: 2px solid transparent;
  background: #f1f5f9;
  color: #475569;
}

.moduleCategoryPill--technique_main_droite,
.moduleCategoryPill--technique_main_gauche {
  background: linear-gradient(180deg, #ccfbf1 0%, #99f6e4 100%);
  color: #0f766e;
  border-color: #5eead4;
}

.moduleCategoryPill--technique_main_gauche {
  background: linear-gradient(180deg, #cffafe 0%, #a5f3fc 100%);
  color: #0c4a6e;
  border-color: #38bdf8;
}

.moduleCategoryPill--accords {
  background: linear-gradient(180deg, #fce7f3 0%, #fbcfe8 100%);
  color: #9d174d;
  border-color: #f472b6;
}

.moduleCategoryPill--gammes {
  background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e3a8a;
  border-color: #60a5fa;
}

.moduleCategoryPill--oreille {
  background: linear-gradient(180deg, #ede9fe 0%, #ddd6fe 100%);
  color: #5b21b6;
  border-color: #a78bfa;
}

.moduleCategoryPill--theorie {
  background: linear-gradient(180deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #3730a3;
  border-color: #a5b4fc;
}

.moduleCategoryPill--entrainement {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  border-color: #fbbf24;
}

.moduleCategoryPill--morceau {
  background: linear-gradient(180deg, #d1fae5 0%, #a7f3d0 100%);
  color: #065f46;
  border-color: #34d399;
}

.moduleCategoryPill--memoire {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #334155;
  border-color: #94a3b8;
}

.moduleCategoryPill--impro {
  background: linear-gradient(180deg, #ffedd5 0%, #fed7aa 100%);
  color: #9a3412;
  border-color: #fb923c;
}

.moduleCategoryPill--technique {
  background: linear-gradient(180deg, #ccfbf1 0%, #99f6e4 100%);
  color: #0f766e;
  border-color: #5eead4;
}

.moduleCategoryPill--details {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #334155;
  border-color: #94a3b8;
}

.moduleCategoryPill--portraits {
  background: linear-gradient(180deg, #fce7f3 0%, #fbcfe8 100%);
  color: #9d174d;
  border-color: #f472b6;
}

.moduleCategoryPill--gloire {
  background: linear-gradient(180deg, #ecfccb 0%, #d9f99d 100%);
  color: #3f6212;
  border-color: #84cc16;
}

.moduleCategoryPill--more,
.moduleCategoryPill--empty {
  background: #f3f4f6;
  border-color: #dee2e8;
  color: #5f6672;
}

.moduleDetails {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  padding-top: 0;
  border-top: 1px dashed transparent;
  opacity: 0;
  pointer-events: none;
  transition:
    grid-template-rows 0.48s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.32s ease,
    margin-top 0.36s ease,
    padding-top 0.36s ease,
    border-top-color 0.28s ease;
}

.moduleDetailsReveal {
  overflow: hidden;
  min-height: 0;
}

.moduleCard.detailsOpen .moduleDetails {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 8px;
  padding-top: 8px;
  border-top-color: #d8dde6;
  pointer-events: auto;
}

.moduleDetailsReveal > * {
  transition:
    transform 0.4s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.35s ease;
}

.moduleCard:not(.detailsOpen) .moduleDetailsReveal > * {
  transform: translateY(-6px);
  opacity: 0.85;
}

.moduleCard.detailsOpen .moduleDetailsReveal > * {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .moduleDetails,
  .moduleObjectiveDetails,
  .moduleDetailsReveal > *,
  .moduleObjectiveDetailsReveal > .moduleObjectiveDetailsGrid {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .moduleCard:not(.detailsOpen) .moduleDetailsReveal > *,
  .moduleObjectiveItem:not(.detailsOpen) .moduleObjectiveDetailsReveal > .moduleObjectiveDetailsGrid {
    transform: none;
    opacity: 1;
  }
}

.moduleDetailsTitle {
  margin: 0 0 6px;
  font-size: 12px;
  color: #4f5660;
  font-weight: 700;
}

.moduleObjectiveItem {
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px solid #e7e9ee;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  display: block;
}

.moduleObjectiveHeaderRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.moduleObjectiveDeleteBtn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8dce3;
  border-radius: 8px;
  background: #eef0f4;
  color: #6b7280;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.moduleCard.programEditMode .moduleObjectiveDeleteBtn {
  opacity: 1;
  pointer-events: auto;
}

.moduleCard:not(.programEditMode) .moduleAddExoFromLibraryWrap {
  display: none;
}

.moduleAddExoFromLibraryWrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e6e9ef;
}

.moduleAddExoFromLibraryBtn {
  width: 100%;
  justify-content: center;
}

.dashboardModuleAddExoRow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin: 0 0 8px;
  border: 1px solid #d8dce3;
  border-radius: 10px;
  background: #f8f9fc;
  color: #2f3134;
  font: inherit;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.dashboardModuleAddExoRow:hover {
  background: #eef2ff;
  border-color: #b6c3ff;
}

.dashboardModuleAddExoRowTitle {
  font-weight: 700;
  flex: 1;
  min-width: 0;
}

.dashboardModuleAddExoRowMeta {
  font-size: 12px;
  font-weight: 600;
  color: #5c6570;
  font-variant-numeric: tabular-nums;
}

.moduleObjectiveDeleteBtn:hover {
  color: #c62828;
  background: #fdeaea;
  border-color: #e57373;
}

.moduleObjectiveDeleteBtn:active {
  transform: scale(0.96);
}

.moduleObjectiveMain {
  flex: 1;
  font-weight: 700;
  color: #2f3134;
  min-width: 0;
}

.moduleObjectiveExtra {
  margin-top: 6px;
  color: #4f5660;
  line-height: 1.45;
}

.moduleObjectiveTextCol {
  min-width: 0;
  padding-right: 8px;
}

.moduleObjectiveDetailMetaRow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 20px;
  line-height: 1.35;
}

.moduleObjectiveDetailMetaItem {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  min-width: 0;
}

.moduleObjectiveDetailMetaLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6c7582;
}

.moduleObjectiveDetailDifficulty,
.moduleObjectiveDetailCoef,
.moduleObjectiveDetailCategory,
.moduleObjectiveDetailAudience,
.moduleObjectiveDetailEstMin {
  font-weight: 700;
  color: #2f3134;
}

.moduleObjectiveDetailCoef {
  font-variant-numeric: tabular-nums;
}

.moduleObjectiveMediaRow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

/* Vignettes : vidéo Mux vs image exercice (noms / rôles distincts) */
.moduleObjectiveMediaRow .moduleObjectiveMuxThumb,
.moduleObjectiveMediaRow .moduleObjectiveExerciseImageThumb {
  width: 152px;
  height: 88px;
  flex-shrink: 0;
}

.moduleObjectiveMediaRow .moduleObjectiveNoMedia {
  width: 152px;
  height: 88px;
}

.moduleObjectiveMuxThumb,
.moduleObjectiveExerciseImageThumb {
  position: relative;
  border-radius: 10px;
  border: 1px solid #e3e6ed;
  cursor: zoom-in;
  overflow: hidden;
  padding: 0;
  display: block;
}

.moduleObjectiveMuxThumb {
  background: #0f1116;
}

.moduleObjectiveExerciseImageThumb {
  background: #f8fafc;
  border-color: #e3e6ed;
}

.moduleObjectiveMuxThumb img,
.moduleObjectiveExerciseImageThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.moduleObjectiveExpandBtn {
  border: none;
  background: #f4f7fb;
  color: #5e6773;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.22s cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 0.22s ease,
    background 0.2s ease,
    color 0.2s ease;
  flex-shrink: 0;
}

.moduleObjectiveExpandBtn:hover {
  background: #e8eef6;
  color: #2f4fa8;
  box-shadow: 0 2px 8px rgba(31, 36, 42, 0.08);
}

.moduleObjectiveExpandBtn:active {
  transform: scale(0.92);
  box-shadow: none;
}

.moduleObjectiveItem.detailsOpen .moduleObjectiveExpandBtn .moduleChevron {
  transform: rotate(180deg);
}

.moduleObjectiveExpandBtn .moduleChevron {
  display: inline-flex;
  transition: transform 0.22s ease;
}

.moduleObjectiveDetails {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  padding-top: 0;
  border-top: 1px dashed transparent;
  opacity: 0;
  pointer-events: none;
  transition:
    grid-template-rows 0.42s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.3s ease,
    margin-top 0.34s ease,
    padding-top 0.34s ease,
    border-top-color 0.26s ease;
}

.moduleObjectiveDetailsReveal {
  overflow: hidden;
  min-height: 0;
}

.moduleObjectiveItem.detailsOpen .moduleObjectiveDetails {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 6px;
  padding-top: 6px;
  border-top-color: #e7e9ee;
  pointer-events: auto;
}

.moduleObjectiveDetailsReveal > .moduleObjectiveDetailsGrid {
  transition:
    transform 0.38s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.32s ease;
}

.moduleObjectiveItem:not(.detailsOpen) .moduleObjectiveDetailsReveal > .moduleObjectiveDetailsGrid {
  transform: translateY(-5px);
  opacity: 0.88;
}

.moduleObjectiveItem.detailsOpen .moduleObjectiveDetailsReveal > .moduleObjectiveDetailsGrid {
  transform: translateY(0);
  opacity: 1;
}

/* Détails objectif : texte | médias | bouton (15px du bord droit) */
.moduleObjectiveDetailsGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px 18px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.moduleObjectiveMedia {
  min-width: 0;
}

.moduleObjectiveActionsCol {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
  padding: 4px 15px 4px 8px;
  box-sizing: border-box;
}

.moduleObjectiveEditBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #d8dce3;
  border-radius: 8px;
  background: #eef0f4;
  color: #6b7280;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.96);
  transition:
    opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Crayon « programme » : discret, sans cadre ; invisible sauf survol zone bas-droite */
.moduleObjectiveEditBtn.moduleCardEditBtn {
  border: none;
  background: transparent;
  box-shadow: none;
  color: #a8b0ba;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  display: inline-flex;
  margin-top: 0;
  margin-left: auto;
  transition:
    opacity 0.26s ease,
    transform 0.26s ease,
    color 0.2s ease,
    background 0.2s ease;
}

.moduleObjectiveEditBtnGlyph {
  display: block;
  transform-origin: 50% 88%;
  transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes moduleObjectiveEditPencilWiggle {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  20% {
    transform: rotate(-14deg) translateY(-1px);
  }
  40% {
    transform: rotate(12deg) translateY(0);
  }
  60% {
    transform: rotate(-8deg) translateY(-1px);
  }
  80% {
    transform: rotate(6deg) translateY(0);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}

.moduleObjectiveItem:hover .moduleObjectiveEditBtn,
.moduleObjectiveItem.detailsOpen .moduleObjectiveEditBtn,
.moduleObjectiveItem.editPanelOpen .moduleObjectiveEditBtn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.moduleCard:hover .moduleCardEditBtn,
.moduleCard.programEditMode .moduleCardEditBtn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.moduleObjectiveActionsCol .moduleObjectiveEditBtn:hover {
  color: #2f4fa8;
  background: #e8eef6;
  border-color: #b8c5d9;
  box-shadow: 0 0 0 1px rgba(47, 79, 168, 0.1);
}

.moduleCard .moduleCardEditBtn:hover {
  color: #3d5a9e;
  background: rgba(67, 118, 255, 0.09);
  border: none;
  box-shadow: none;
}

.moduleObjectiveActionsCol .moduleObjectiveEditBtn:hover .moduleObjectiveEditBtnGlyph {
  animation: moduleObjectiveEditPencilWiggle 0.55s cubic-bezier(0.34, 1.15, 0.64, 1);
}

.moduleCard .moduleCardEditBtn:hover .moduleObjectiveEditBtnGlyph {
  animation: moduleObjectiveEditPencilWiggle 0.55s cubic-bezier(0.34, 1.15, 0.64, 1);
}

.moduleObjectiveActionsCol .moduleObjectiveEditBtn:focus-visible {
  outline: 2px solid rgba(43, 124, 255, 0.55);
  outline-offset: 2px;
}

.moduleCard .moduleCardEditBtn:focus-visible {
  outline: 2px solid rgba(43, 124, 255, 0.45);
  outline-offset: 2px;
}

.moduleObjectiveActionsCol .moduleObjectiveEditBtn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.08s;
}

.moduleCard .moduleCardEditBtn:active {
  transform: translateY(0) scale(0.96);
  transition-duration: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
  .moduleObjectiveEditBtn {
    transition: opacity 0.15s ease;
    transform: none;
  }

  .moduleObjectiveEditBtn.moduleCardEditBtn {
    transition: opacity 0.15s ease;
    transform: none;
  }

  .moduleObjectiveItem:hover .moduleObjectiveEditBtn,
  .moduleObjectiveItem.detailsOpen .moduleObjectiveEditBtn,
  .moduleObjectiveItem.editPanelOpen .moduleObjectiveEditBtn {
    transform: none;
  }

  .moduleCard:hover .moduleCardEditBtn,
  .moduleCard.programEditMode .moduleCardEditBtn {
    transform: none;
  }

  .moduleObjectiveActionsCol .moduleObjectiveEditBtn:hover,
  .moduleObjectiveActionsCol .moduleObjectiveEditBtn:active,
  .moduleCard .moduleCardEditBtn:hover,
  .moduleCard .moduleCardEditBtn:active {
    transform: none;
  }

  .moduleObjectiveActionsCol .moduleObjectiveEditBtn:hover .moduleObjectiveEditBtnGlyph,
  .moduleCard .moduleCardEditBtn:hover .moduleObjectiveEditBtnGlyph {
    animation: none;
  }
}

.moduleObjectiveEditPanel {
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px dashed #e7e9ee;
}

.moduleObjectiveEditGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.moduleObjectiveEditField {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.moduleObjectiveEditField label {
  font-size: 11px;
  color: #4f5660;
  font-weight: 700;
}

.moduleObjectiveEditField--full {
  grid-column: 1 / -1;
}

.moduleObjectiveInput {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #e7e9ee;
  background: #fff;
}

textarea.moduleObjectiveTextarea {
  min-height: 3.25rem;
  resize: vertical;
  font-family: inherit;
  line-height: 1.4;
}

.moduleObjectiveDurationRow,
.moduleObjectiveDifficultyRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
}

.moduleObjectiveDurationRow .moduleObjectiveDurationInput,
.moduleObjectiveDifficultyRow .moduleObjectiveDifficultyInput {
  flex: 0 0 25%;
  width: 25%;
  max-width: 10rem;
  min-width: 4.75rem;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.moduleObjectiveDurationPresets,
.moduleObjectiveDifficultyPresets {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-start;
}

.moduleObjectiveDurationPresetBtn,
.moduleObjectiveDifficultyPresetBtn {
  margin: 0;
  padding: 0.5rem 0.9rem;
  min-width: 2.85rem;
  flex: 0 0 auto;
  border: 1px solid #d7dbe3;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #f4f6f9 100%);
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.moduleObjectiveDurationPresetBtn:hover,
.moduleObjectiveDifficultyPresetBtn:hover {
  border-color: #6366f1;
  color: #4338ca;
  background: #fff;
  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.2);
}

.moduleObjectiveDurationPresetBtn:focus-visible,
.moduleObjectiveDifficultyPresetBtn:focus-visible {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}

.moduleObjectiveDurationPresetBtn:active,
.moduleObjectiveDifficultyPresetBtn:active {
  transform: scale(0.97);
}

.moduleObjectiveEditActionsRow {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.moduleObjectiveImage {
  width: 100%;
  height: 78px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e3e6ed;
}


.moduleObjectiveNoMedia {
  width: 100%;
  height: 78px;
  border-radius: 6px;
  border: 1px dashed #d4d9e2;
  color: #6c7582;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6px;
  box-sizing: border-box;
}

/* Note: we intentionally keep the dashboard fixed-height.
   Module details and lists are scrollable, the page layout should not grow. */

.adminConfirmModal {
  position: fixed;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.adminConfirmModal.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Au-dessus de l’éditeur exo iframe (z-index 12000) pour la double confirmation « Appliquer l’exo » */
#adminModifyConfirmModal {
  z-index: 13000;
}

.adminConfirmBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}

.adminConfirmCard {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 14px;
  padding: 20px 22px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 16px 40px rgba(31, 36, 42, 0.18);
}

.adminConfirmTitle {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #202124;
}

.adminConfirmText {
  margin: 0 0 18px;
  color: #4f5660;
  font-size: 14px;
  line-height: 1.45;
}

.adminConfirmActions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.videoModal {
  position: fixed;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 2000;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.videoModal.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.videoModalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(2px);
}

.videoModalContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(0.98);
  width: min(1120px, 94vw);
  background: #0f1116;
  border-radius: 12px;
  padding: 30px 14px 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  transition: transform 0.24s ease, opacity 0.22s ease;
  opacity: 0;
  overflow: hidden;
}

.videoModal.open .videoModalContent {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.closeVideoModalBtn {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

#videoModalMediaHost {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 82vh;
}

#videoModalMediaHost iframe,
#videoModalMediaHost video,
#videoModalMediaHost img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: #000;
  border: none;
  object-fit: contain;
}

.videoLoadingOverlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at 50% 30%,
      rgba(70, 84, 114, 0.25),
      rgba(12, 14, 20, 0.05) 45%
    ),
    linear-gradient(180deg, rgba(8, 10, 14, 0.96), rgba(20, 24, 33, 0.92));
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 3;
}

.videoModalContent.loading .videoLoadingOverlay {
  opacity: 1;
}

.videoLoadingGlow {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 28vh auto 0;
  background: radial-gradient(
    circle,
    rgba(138, 165, 255, 0.25) 0%,
    rgba(110, 131, 212, 0.05) 45%,
    rgba(0, 0, 0, 0) 70%
  );
  animation: videoPulse 1.4s ease-in-out infinite;
}

@keyframes videoPulse {
  0% {
    transform: scale(0.92);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.78;
  }
  100% {
    transform: scale(0.92);
    opacity: 0.45;
  }
}

.moduleCard:hover {
  transform: translateY(-2px) scale(1.006);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.09);
}

.moduleCard.active {
  border-color: var(--admin-list-sel-border, #4a6b54);
  box-shadow: var(--admin-list-sel-shadow, 0 0 0 2px rgba(74, 107, 84, 0.26));
  background: var(--admin-list-sel-bg, #e8f2eb);
}

.selectedModuleInline {
  margin-top: 8px;
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: #7a8494;
  font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--admin-list-sel-border, #4a6b54) 16%, #e8edf2);
  background: linear-gradient(
    180deg,
    var(--admin-list-sel-inline-from, #fcfdfc) 0%,
    var(--admin-list-sel-inline-to, #f2f7f4) 100%
  );
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(74, 107, 84, 0.07);
}

.selectedModuleInline strong {
  color: #5c6575;
  font-weight: 700;
}

.searchInputUsers {
  margin-top: 6px;
  margin-bottom: 0;
}

.usersList {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px 10px 8px;
  box-sizing: border-box;
}

.userCard {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid #e7e9ee;
  border-radius: 12px;
  padding: 10px;
  background: #fafbfc;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.userCard:hover {
  transform: translateY(-2px) scale(1.006);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.09);
}

.userCard.active {
  border-color: var(--admin-list-sel-border, #4a6b54);
  box-shadow: var(--admin-list-sel-shadow, 0 0 0 2px rgba(74, 107, 84, 0.26));
  background: var(--admin-list-sel-bg, #e8f2eb);
}

.userCard input {
  display: none;
}

.userAvatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff6e5, #ffe4b5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.18s ease, background 0.18s ease;
}

.userCard.active .userAvatar {
  background: linear-gradient(
    145deg,
    var(--admin-list-sel-avatar-from, #dfece3),
    var(--admin-list-sel-avatar-to, #bdd4c8)
  );
  transform: scale(1.06);
}

.userMain {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.userName {
  font-weight: 700;
  font-size: 14px;
}

.userEmail {
  font-size: 12px;
  color: #5f6368;
}

.userModulesCount {
  font-size: 11px;
  color: #3e4654;
  font-weight: 700;
}

.userDetailsToggleBtn {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  color: #5e6773;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease,
    background 0.2s ease;
}

.userDetailsToggleBtn:hover {
  background: color-mix(in srgb, var(--admin-list-sel-border, #4a6b54) 14%, transparent);
  color: var(--admin-list-sel-border, #3d5a46);
}

.userCard:hover .userDetailsToggleBtn,
.userCard.userDetailsOpen .userDetailsToggleBtn {
  opacity: 1;
  transform: translateY(0);
}

.userDetailsChevron {
  font-size: 14px;
  line-height: 1;
  transition: transform 0.24s ease;
}

.userCard.userDetailsOpen .userDetailsChevron {
  transform: rotate(180deg);
}

.userFutureDetails {
  margin-top: 2px;
  border-top: 1px dashed #d5dbe7;
  padding-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.18s ease, opacity 0.16s ease, padding-top 0.16s ease;
}

.userCard.userDetailsOpen .userFutureDetails {
  max-height: 280px;
  opacity: 1;
  padding-top: 6px;
}

.userFutureDetails {
  padding: 6px 8px;
  border-radius: 6px;
  background: #f8fafd;
  color: #4f5660;
  font-size: 11px;
}

.userModulesTableWrap {
  overflow-x: auto;
}

.userModulesTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}

.userModulesTable th,
.userModulesTable td {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid #e5eaf3;
  white-space: nowrap;
}

.userModulesTable th:nth-child(1),
.userModulesTable td:nth-child(1) {
  width: 19%;
}

.userModulesTable th:nth-child(2),
.userModulesTable td:nth-child(2) {
  width: 22%;
}

.userModulesTable th:nth-child(3),
.userModulesTable td:nth-child(3) {
  width: 9%;
}

.userModulesTable .userModulesColEtat {
  text-align: center;
  vertical-align: middle;
  padding-left: 4px;
  padding-right: 4px;
  overflow: visible;
  position: relative;
}

.userModulesStateHit {
  margin: 0;
  padding: 2px 0 0;
  border: none;
  background: transparent;
  cursor: default;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  line-height: 1;
  color: inherit;
  font: inherit;
  vertical-align: middle;
}

.userModulesStateHit:focus {
  outline: none;
}

.userModulesStateHit:focus-visible {
  outline: 2px solid rgba(77, 124, 255, 0.55);
  outline-offset: 2px;
  border-radius: 6px;
}

.userModulesStateDot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.userModulesStateFlyout {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) scale(0.88);
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #3e4654;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e3e8f0;
  box-shadow: 0 4px 14px rgba(31, 38, 48, 0.1);
  z-index: 3;
  transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1),
    visibility 0.18s ease;
}

.userModulesStateHit:hover .userModulesStateDot,
.userModulesStateHit:focus-visible .userModulesStateDot {
  transform: scale(1.18);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.userModulesStateHit:hover .userModulesStateFlyout,
.userModulesStateHit:focus-visible .userModulesStateFlyout {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1.04);
}

.userModulesStateDot--assigned_pending {
  background: #80868b;
}

.userModulesStateDot--not_started {
  background: #f5a623;
}

.userModulesStateDot--in_progress {
  background: #4d7cff;
}

.userModulesStateDot--finished {
  background: #34a853;
}

.userModulesStateDot--created {
  background: #9b59b6;
}

.userModulesStateDot--unknown {
  background: #9aa0a6;
}

.userModulesTable th:nth-child(4),
.userModulesTable td:nth-child(4) {
  width: 32%;
}

.userModulesTable th:nth-child(5),
.userModulesTable td:nth-child(5) {
  width: 8%;
  min-width: 32px;
}

.userModulesTable .userModulesColAction {
  text-align: center;
  vertical-align: middle;
  padding: 2px 4px;
  position: relative;
}

.userModulesDataRow {
  position: relative;
}

.userModuleRowDeleteBtn {
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
  color: #8a9099;
}

.userModulesDataRow:hover .userModuleRowDeleteBtn,
.userModuleRowDeleteBtn:focus-visible {
  opacity: 1;
}

.userModuleRowDeleteBtn:hover {
  background: rgba(220, 80, 80, 0.12);
  color: #c5221f;
}

.userModuleRowDeleteBtn:focus-visible {
  outline: 2px solid rgba(77, 124, 255, 0.55);
  outline-offset: 1px;
}

.userModuleRowDeleteBtnGlyph {
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.userModulesTable .userModulesColModule {
  width: 22%;
  max-width: 8.5rem;
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
  vertical-align: top;
}

.userModulesTable th {
  color: #3e4654;
  font-weight: 700;
  background: #eef3fb;
}

.userModulesEmpty {
  margin: 0;
  color: #5f6368;
}

.userModulesCompact {
  padding: 4px 2px;
}

.userModulesCompactCount {
  margin: 0 0 6px;
  font-size: 11px;
  color: #4a5565;
}

.userModulesCompactList {
  margin: 0;
  padding-left: 16px;
  font-size: 11px;
  color: #2f3134;
  max-height: 106px;
  overflow-y: auto;
}

.userModulesCompactList li {
  margin-bottom: 4px;
  line-height: 1.3;
}

.bulkDeleteTrashBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #c5c9d0;
  border-radius: 8px;
  background: #e8eaef;
  color: #6b7280;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.bulkDeleteTrashBtn:hover {
  color: #c62828;
  background: #fdeaea;
  border-color: #e57373;
  box-shadow: 0 0 0 1px rgba(198, 40, 40, 0.12);
}

.bulkDeleteTrashBtn:active {
  transform: scale(0.96);
}

.bulkDeleteTrashIcon {
  display: block;
  transform-origin: 50% 85%;
  transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes bulkDeleteTrashWiggle {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  20% {
    transform: rotate(-14deg) translateY(-1px);
  }
  40% {
    transform: rotate(12deg) translateY(0);
  }
  60% {
    transform: rotate(-8deg) translateY(-1px);
  }
  80% {
    transform: rotate(6deg) translateY(0);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}

.bulkDeleteTrashBtn:hover .bulkDeleteTrashIcon {
  animation: bulkDeleteTrashWiggle 0.55s cubic-bezier(0.34, 1.15, 0.64, 1);
}

.adminBulkDeleteCard {
  max-width: 440px;
}

.adminBulkDeleteIntro {
  margin: 0 0 10px;
  color: #4f5660;
  font-size: 14px;
  line-height: 1.45;
}

.adminBulkDeleteList {
  margin: 0 0 18px;
  padding: 10px 12px 10px 28px;
  max-height: 220px;
  overflow-y: auto;
  border-radius: 8px;
  background: #f4f6f9;
  border: 1px solid #e2e6ec;
  font-size: 13px;
  line-height: 1.45;
  color: #3e4654;
}

.adminBulkDeleteList li {
  margin-bottom: 6px;
}

.adminBulkDeleteList li:last-child {
  margin-bottom: 0;
}

.adminBulkDeleteWarning {
  margin-top: 0;
}

.adminBulkDeleteStep[hidden] {
  display: none !important;
}

.placeholderCard {
  margin-top: 14px;
  border: 1px dashed #cfd3da;
  border-radius: 12px;
  padding: 14px;
  background: #fafbfc;
}

.placeholderCard h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.placeholderCard p {
  margin: 0;
  color: #4f5660;
  line-height: 1.45;
}

.stateMsg {
  margin-top: 8px;
  color: #5f6368;
  font-size: 14px;
}

.adminTrackingPanel {
  margin-top: 12px;
  border-left: 4px solid #2b7cff;
  /* Hauteur = contenu (table suivi) ; max-height borne le scroll interne si besoin. */
  height: auto;
  max-height: min(460px, 52vh);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-self: start;
}

.adminTrackingPanel__head {
  margin-bottom: 10px;
}

.adminTrackingHint {
  margin: 0 0 8px;
  font-size: 13px;
  color: #5f6368;
}

.adminTrackingToolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.adminTrackingToolbar__modes {
  display: inline-flex;
  gap: 8px;
}

.adminTrackingModeBtn.active {
  background: linear-gradient(135deg, #2b7cff, #6f42ff);
  color: #fff;
}

.adminTrackingStudentFilter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #4f5660;
  font-weight: 700;
}

.adminTrackingSelect {
  min-width: 240px;
  border: 1px solid #d7dbe3;
  border-radius: 9px;
  padding: 7px 10px;
  font-size: 14px;
  color: #2f3134;
  background: #fff;
}

.adminTrackingEditToggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #3e4654;
  font-weight: 600;
}

.trackingStatusMsg {
  margin: 6px 0 10px;
}

.adminTrackingSearchRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 10px;
}

.adminTrackingSearchRow .adminTrackingSearchInput {
  flex: 1 1 220px;
  margin: 0;
  width: auto;
  min-width: 0;
  max-width: none;
}

.adminTrackingBulkActions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  flex: 0 0 auto;
}

.adminTrackingBulkActions .iconActionBtn {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.trackingProgramSelect {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #97a2b3;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.trackingProgramSelect:checked {
  border-color: #2b7cff;
  background: #2b7cff;
  box-shadow: inset 0 0 0 3px #fff;
}

.adminTrackingSearchInput {
  margin: 0 0 10px;
  width: min(100%, 420px);
}

.adminTrackingTableWrap {
  border: 1px solid #e5eaf3;
  border-radius: 10px;
  overflow: auto;
}

.adminTrackingView {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Faux rail vertical (modèle workshopSequenceFakeTrack, orienté colonne) */
.adminFakeScrollWrap {
  position: relative;
  z-index: 0;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  /* Ne pas clipser le thumb ; les ancêtres .adminDashboardDetails__panel ont overflow:hidden */
  overflow: visible;
  isolation: isolate;
}

.adminFakeScrollViewport {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.adminFakeScrollViewport::-webkit-scrollbar,
.adminFakeScrollViewport::-webkit-scrollbar-corner,
.adminFakeScrollViewport::-webkit-scrollbar-track,
.adminFakeScrollViewport::-webkit-scrollbar-thumb,
.adminFakeScrollViewport::-webkit-scrollbar-button {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

.adminFakeScrollTrack {
  position: absolute;
  z-index: 3;
  top: 10px;
  /* Positif : reste dans le wrap (réserve dans .adminFakeScrollViewport padding-right).
     Ancêtres ont overflow:hidden — unright négatif sortait du wrap et était clipé ⇒ rail invisible */
  right: var(--admin-fake-rail-inset-from-wrap, 8px);
  bottom: 10px;
  width: var(--admin-scrollbar-rail-width, 5px);
  border-radius: 999px;
  overflow: hidden;
  background: var(--admin-scrollbar-track);
  /* tactile / pointer coarse : visible par défaut quand défilable ([hidden] levé par JS) */
  opacity: 1;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

/* Masqué jusqu’au survol : uniquement souris/trackpad précis (sinon tactile/hybride reste visible ci-dessus) */
@media (hover: hover) and (pointer: fine) {
  .adminFakeScrollWrap .adminFakeScrollTrack:not([hidden]) {
    opacity: 0;
  }

  .adminFakeScrollWrap:hover .adminFakeScrollTrack:not([hidden]),
  .adminFakeScrollWrap:focus-within .adminFakeScrollTrack:not([hidden]) {
    opacity: 1;
  }
}

/* Réserve une bande pour le rail dans le gutter des panels — évite de recouvrir le contenu */
.adminTrackingPanel .adminFakeScrollViewport,
details.panel.adminDashboardDetails .adminFakeScrollViewport {
  padding-right: calc(
    var(--panel-inline-pad-admin, 14px) + 10px + var(--admin-scrollbar-rail-width, 5px)
  );
  box-sizing: border-box;
}

.adminFakeScrollThumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  min-height: 18px;
  border-radius: inherit;
  background: var(--admin-scrollbar-thumb);
  transform: translateY(0);
  transition: transform 0.16s ease;
}

.adminTrackingTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 720px;
}

.adminTrackingMemoCell {
  width: 1%;
  white-space: nowrap;
}

.adminTrackingMemoBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.adminTrackingMemoBtn:hover {
  box-shadow: 0 4px 12px rgba(31, 41, 55, 0.12);
}

.adminTrackingMemoDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #94a3b8;
}

.adminTrackingMemoBtn--empty .adminTrackingMemoDot {
  background: #cbd5e1;
}

.adminTrackingMemoBtn--empty {
  color: #64748b;
  border-style: dashed;
}

.adminTrackingMemoBtn--open {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #b45309;
}

.adminTrackingMemoBtn--open .adminTrackingMemoDot {
  background: #f59e0b;
}

.adminTrackingMemoBtn--busy {
  border-color: #ea580c;
  background: #ffedd5;
  color: #9a3412;
  box-shadow: 0 0 0 1px rgba(234, 88, 12, 0.25);
}

.adminTrackingMemoBtn--busy .adminTrackingMemoDot {
  background: #ea580c;
}

.adminTrackingMemoBtn--settled {
  border-color: #22c55e;
  background: #ecfdf5;
  color: #15803d;
}

.adminTrackingMemoBtn--settled .adminTrackingMemoDot {
  background: #22c55e;
}

.adminTrackingMemoCount {
  min-width: 1.25em;
  text-align: center;
}

.adminTrackingTable th,
.adminTrackingTable td {
  border-bottom: 1px solid #e5eaf3;
  text-align: left;
  padding: 8px 10px;
  vertical-align: middle;
}

.adminTrackingTable th {
  background: #eef3fb;
  color: #3e4654;
  font-size: 12px;
  font-weight: 700;
}

.adminTrackingTable tbody tr:last-child td {
  border-bottom: none;
}

.adminTrackingStudentHeader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #4f5660;
}

.adminTrackingStudentName {
  font-size: 20px;
  line-height: 1.2;
  color: #1f2937;
}

.adminTrackingStudentSummary {
  font-size: 14px;
  color: #3f4b5a;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 28px;
  row-gap: 10px;
}

.adminTrackingStudentSummaryItem {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.adminTrackingStudentSummarySep {
  opacity: 0.65;
}

.adminTrackingStudentSummaryItem--progress strong {
  font-size: 17px;
  color: #2f4fa8;
}

.adminTrackingBackBtn {
  margin-right: 6px;
}

.adminTrackingRowClickable {
  cursor: pointer;
  transition: background 0.16s ease;
}

.adminTrackingRowClickable:hover {
  background: #f6f9ff;
}

.adminTrackingProgramRow {
  cursor: pointer;
  transition: background 0.16s ease;
}

.adminTrackingProgramRow:hover {
  background: #f7faff;
}

.adminTrackingTable--edit .adminTrackingProgramRow {
  cursor: default;
}

.adminTrackingTable--edit .adminTrackingProgramRow:hover {
  background: inherit;
}

.adminTrackingProgramRow.is-open {
  background: #eaf1ff;
}

.adminTrackingProgramRow.is-open td {
  border-bottom-color: #c9dafb;
}

.adminTrackingStateBadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
}

.adminTrackingProgramDetailsRow td {
  background: #f3f7ff;
}

.adminTrackingProgramDetails {
  padding: 8px 2px 10px;
}

.adminTrackingProgramDetailsTitle {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: #4a5565;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.adminTrackingProgramDetailsTableWrap {
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  overflow: auto;
  background: #fff;
}

.adminTrackingProgramDetailsTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 660px;
  font-size: 12px;
}

.adminTrackingProgramDetailsTable th,
.adminTrackingProgramDetailsTable td {
  border-bottom: 1px solid #edf0f5;
  padding: 7px 9px;
  text-align: left;
  vertical-align: middle;
}

.adminTrackingProgramDetailsTable th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #4a5565;
  background: #f6f8fc;
}

.adminTrackingProgramDetailsTable tbody tr:last-child td {
  border-bottom: none;
}

.adminTrackingInlineBtn {
  padding: 6px 8px;
  font-size: 11px;
  margin-right: 6px;
}

#assignStatusMsg {
  transition: opacity 0.28s ease;
}

@media (prefers-reduced-motion: reduce) {
  #assignStatusMsg {
    transition: none;
  }
}

/* ------------------------------------------------------------------
   Nouvelle DA — harmonisation dashboard admin
   ------------------------------------------------------------------ */
body.dashboard-admin-page {
  --panel-inline-pad-admin: 14px;
  --admin-scrollbar-rail-width: 5px;
  /* Décal du rail depuis le bord droit du wrap (positif = reste dans clip overflow:hidden des panels) */
  --admin-fake-rail-inset-from-wrap: 8px;
  --admin-bg: #f0f2f5;
  --admin-surface: #ffffff;
  --admin-surface-soft: #fafbfc;
  --admin-text: #202124;
  --admin-muted: #5f6368;
  --admin-border: #d7dbe3;
  --admin-border-strong: #c8d0dc;
  --admin-accent: #6f42ff;
  --admin-accent-2: #2b7cff;
  --admin-accent-soft: #f3f0ff;
  --admin-shadow: 0 6px 18px rgba(31, 36, 42, 0.07);
  --admin-shadow-hover: 0 10px 22px rgba(31, 36, 42, 0.1);
  --admin-list-sel-border: #4a6b54;
  --admin-list-sel-bg: #e8f2eb;
  --admin-list-sel-shadow: 0 0 0 2px rgba(74, 107, 84, 0.26);
  --admin-list-sel-inline-from: #f4faf6;
  --admin-list-sel-inline-to: #e5efe8;
  --admin-list-sel-avatar-from: #dfece3;
  --admin-list-sel-avatar-to: #bdd4c8;
  --admin-scrollbar-track: color-mix(in srgb, #f6f7f9 82%, #e9eaee);
  --admin-scrollbar-thumb: color-mix(
    in srgb,
    #fff 42%,
    color-mix(in srgb, var(--admin-muted, #5f6368) 38%, #cfd1d8)
  );
  --admin-scrollbar-thumb-hover: color-mix(
    in srgb,
    var(--admin-scrollbar-thumb) 74%,
    var(--admin-muted, #5f6368)
  );
}

body.dashboard-admin-page {
  background: var(--admin-bg);
  color: var(--admin-text);
}

body.theme-carnet-lumineux.dashboard-admin-page {
  background:
    radial-gradient(
      120% 80% at 82% 0%,
      var(--da-halo-sun, rgba(255, 236, 212, 0.45)),
      transparent 56%
    ),
    linear-gradient(
      180deg,
      var(--da-bg-page, #f7f4ee) 0%,
      var(--da-bg-page-mid, #f2ede5) 100%
    );
  color: var(--da-text, #4a3f35);
}

body.theme-carnet-lumineux.dashboard-admin-page .dashboardAdminContainer {
  --admin-bg: transparent;
  --admin-surface: color-mix(in srgb, var(--da-surface-elevated) 96%, var(--da-bg-page-mid));
  --admin-surface-soft: color-mix(in srgb, var(--da-surface-elevated) 90%, var(--da-bg-page-mid));
  --admin-text: var(--da-text, #4a3f35);
  --admin-muted: var(--da-text-muted, #75685c);
  --admin-border: var(--da-border, rgba(123, 97, 73, 0.22));
  --admin-border-strong: color-mix(in srgb, var(--da-border, rgba(123, 97, 73, 0.22)) 88%, #d5c5b1);
  --admin-accent: color-mix(in srgb, var(--da-accent-warm, #f59e0b) 62%, #7c3aed);
  --admin-accent-2: var(--da-accent-sage, #6a8f75);
  --admin-accent-soft: color-mix(in srgb, var(--da-accent-sage, #6a8f75) 14%, var(--da-surface-elevated));
  --admin-shadow: var(--da-shadow-card, 0 10px 28px rgba(90, 72, 54, 0.1));
  --admin-shadow-hover: 0 14px 30px rgba(90, 72, 54, 0.14);
  --admin-list-sel-border: color-mix(in srgb, var(--da-accent-sage, #6a8f75) 72%, #3a322b);
  --admin-list-sel-bg: color-mix(in srgb, var(--da-accent-sage, #6a8f75) 11%, var(--da-surface-elevated));
  --admin-list-sel-shadow: 0 0 0 2px color-mix(in srgb, var(--da-accent-sage, #6a8f75) 28%, transparent);
  --admin-list-sel-inline-from: color-mix(in srgb, var(--da-accent-sage, #6a8f75) 8%, var(--da-surface-elevated));
  --admin-list-sel-inline-to: color-mix(in srgb, var(--da-accent-sage, #6a8f75) 16%, var(--da-bg-page-mid));
  --admin-list-sel-avatar-from: color-mix(in srgb, var(--da-accent-sage, #6a8f75) 14%, var(--da-surface-elevated));
  --admin-list-sel-avatar-to: color-mix(in srgb, var(--da-accent-sage, #6a8f75) 38%, var(--da-bg-page-mid));
}

body.theme-carnet-lumineux.dashboard-admin-page .dashboardHeader h1 {
  font-family: "DM Sans", "Instrument Sans", "Outfit", sans-serif;
  color: var(--admin-text);
}

body.theme-carnet-lumineux.dashboard-admin-page .primaryBtn {
  background: linear-gradient(135deg, var(--admin-accent-2), var(--admin-accent));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--admin-accent-2) 28%, transparent);
}

body.theme-carnet-lumineux.dashboard-admin-page .panel {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  box-shadow: var(--admin-shadow);
}

body.theme-carnet-lumineux.dashboard-admin-page
  .dashboardGrid
  > details.adminPromisesCarnetBlock--dashboardCol {
  background: var(--admin-surface);
  border-color: var(--admin-border);
  box-shadow: var(--admin-shadow);
}

body.theme-carnet-lumineux.dashboard-admin-page .moduleCard,
body.theme-carnet-lumineux.dashboard-admin-page .userCard {
  border-color: color-mix(in srgb, var(--admin-border) 76%, #fff);
  background: color-mix(in srgb, var(--admin-surface-soft) 92%, #fff);
}

.dashboardHeader h1 {
  font-family: "Outfit", "Nunito", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--admin-text);
}

.primaryBtn {
  background: linear-gradient(135deg, var(--admin-accent-2), var(--admin-accent));
  box-shadow: 0 7px 16px rgba(67, 118, 255, 0.24);
}

.ghostBtn {
  background: var(--admin-surface);
  color: #2f3134;
  border: 1px solid var(--admin-border);
}

.smallBtn {
  background: #eef2f8;
  color: #3e4654;
}

.iconActionBtn {
  background: #f4f7fb;
  color: #5e6773;
}

.panel {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  box-shadow: var(--admin-shadow);
}

.panelLeft {
  border-left: 4px solid var(--admin-accent);
}

.panelRight {
  border-left: 2px solid var(--admin-accent-2);
}

.adminDashboardDetails__hint,
.stateMsg,
.assignToolbarMsg,
.userEmail,
.moduleMeta,
.adminConfirmText {
  color: var(--admin-muted);
}

.searchInput {
  border: 1px solid var(--admin-border);
  background: #fff;
}

.searchInput:focus {
  border-color: var(--admin-accent-2);
  box-shadow: 0 0 0 3px rgba(77, 124, 255, 0.14);
}

.moduleCard,
.userCard {
  border: 1px solid #e7e9ee;
  background: #f7f8fa;
}

.moduleCard:hover,
.userCard:hover {
  box-shadow: var(--admin-shadow-hover);
}

.moduleCard.active,
.userCard.active {
  border-color: var(--admin-list-sel-border, #4a6b54);
  background: var(--admin-list-sel-bg, #e8f2eb);
  box-shadow: var(--admin-list-sel-shadow, 0 0 0 2px rgba(74, 107, 84, 0.22));
}

.selectedModuleInline {
  border: 1px solid color-mix(in srgb, var(--admin-list-sel-border, #4a6b54) 16%, #e8edf2);
  background: linear-gradient(
    180deg,
    var(--admin-list-sel-inline-from, #fcfdfc) 0%,
    var(--admin-list-sel-inline-to, #f2f7f4) 100%
  );
}

.userModulesTable th {
  background: #eef3fb;
  color: #3e4654;
}

.adminConfirmCard {
  border: 1px solid var(--admin-border);
  box-shadow: 0 18px 42px rgba(31, 36, 42, 0.18);
}

/* Éditeur « Créer un exo » intégré (iframe) */
.dashboardExoEditorModal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.dashboardExoEditorModal.open {
  display: flex;
}

.dashboardExoEditorBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(116, 103, 91, 0.45);
}

.dashboardExoEditorShell {
  --exo-editor-close-inset: 15px;
  /* ~largeur barre de défilement : le × reste dans le coin sans chevaucher l’iframe */
  --exo-editor-scrollbar-reserve: 12px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  height: min(92vh, 100%);
  margin: auto;
  background: var(--theme-b-surface, #fff);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(31, 36, 42, 0.28);
}

.dashboardExoEditorCloseX {
  position: absolute;
  top: var(--exo-editor-close-inset);
  right: calc(var(--exo-editor-close-inset) + var(--exo-editor-scrollbar-reserve));
  z-index: 2;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.92);
  color: #80868b;
  font-size: 1.38rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
  transition:
    background 0.22s ease,
    color 0.22s ease,
    transform 0.22s cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 0.22s ease;
}

.dashboardExoEditorCloseX:hover {
  background: #e8eef6;
  color: #2f4fa8;
  transform: scale(1.07);
  box-shadow: 0 4px 14px rgba(60, 64, 67, 0.16);
}

.dashboardExoEditorCloseX:active {
  transform: scale(0.94);
  box-shadow: 0 1px 4px rgba(60, 64, 67, 0.12);
}

.dashboardExoEditorCloseX:focus-visible {
  outline: 2px solid var(--admin-accent-2, #4d7cff);
  outline-offset: 2px;
}

.dashboardExoEditorIframe {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}

.moduleObjectiveFullExoBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
}

/* Grille détail objectif : formulaire complet = icône crayon seule */
.moduleObjectiveDetailsGrid .moduleObjectiveFullExoBtn {
  justify-content: center;
  gap: 0;
  padding: 0;
  min-width: 42px;
  width: 42px;
  height: 42px;
  box-sizing: border-box;
}

.moduleObjectiveDetailsGrid .moduleObjectiveFullExoBtnGlyph {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}