@import url("https://fonts.googleapis.com/css2?family=Gabarito:wght@400;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-strong: #1f2937;
  --text: #111827;
  --muted: #6b7280;
  --accent: mediumseagreen;
  --accent-soft: rgba(37, 99, 235, 0.12);
  --border: #d1d5db;
  --header-bg: #060608;
  --header-text: #d9dcef;
  --header-muted: #a8adca;
  --header-border: #252836;
  --cat-histoire: #6c3322;
  --cat-geographie: #5a9cc8;
  --cat-emc: #475569;
  --cat-activite-seul: #5291ff;
  --cat-activite-en-groupe: hsl(31, 100%, 69%);
  --cat-evaluation: #c05a5a;
  --cat-cours: #ffffff;
  --cat-vocabulaire: yellow;
  --cat-pour-aller-plus-loin: #9ca3af;
  --cat-important: #000000;
}

* {
  box-sizing: border-box;
  vertical-align: top;
}

html {
  scroll-behavior: smooth;
}

/* Session slideshow ("mode diapo"): every text size in the app is defined in
   rem, so bumping the root font-size while the diaporama overlay is open
   scales all of its text (titles, badges, rich-text content...) uniformly
   to 1.25x the normal size, without touching anything outside it. Toggled
   via documentElement.classList in session-diaporama.js's open/close. */
html.session-diaporama-active {
  font-size: 140%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Roboto', sans-serif;
  background: var(--bg);
  color: var(--text);
  text-wrap: balance;
}

h1 {
  font-family: "Gabarito", "Segoe UI", system-ui, sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 0.9; margin: 0 0 1rem;
}

h2,
h3,
.breadcrumb,
.item-title {
  font-family: "Gabarito", "Segoe UI", system-ui, sans-serif; line-height: 0.8;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 1.2rem 2rem;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  transition: transform 220ms ease;
}

.topbar.topbar-hidden {
  transform: translateY(calc(-100% - 4px));
}

.search-group {
  position: relative;
  min-width: min(620px, 56vw);
  max-width: 720px;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  pointer-events: none;
  opacity: 0.9;
}

#search-input {
  width: 100%;
  border: 1px solid #2b3147;
  border-radius: 0;
  padding: 0.88rem 2.4rem 0.88rem 3.8rem;
  font-weight: 500;
  background: transparent;
  color: var(--header-text);
}

#search-input::placeholder {
  color: #6f7698;
}

#search-input:focus {
  outline: none;
  border-color: #7680b7;
  box-shadow: 0 0 0 3px rgba(118, 128, 183, 0.22);
}

/* Bouton "✕" pour vider la recherche en un clic, sans repasser par le backspace. */
.search-clear-btn {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.7rem;
  height: 1.7rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--header-text);
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
}

.search-clear-btn:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-clear-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Menu de suggestions instantanées, affiché sous la barre dès la 1ère lettre. */
.search-suggestions {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: var(--surface);
  color: var(--text);
  border-radius: 0.75rem;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
  max-height: min(60vh, 420px);
  overflow-y: auto;
  z-index: 20;
}

.search-suggestion-item,
.search-suggestion-more,
.search-suggestion-empty {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
}

.search-suggestion-empty {
  color: var(--muted);
  cursor: default;
}

.search-suggestion-item + .search-suggestion-item,
.search-suggestion-more {
  border-top: 1px solid var(--bg);
}

.search-suggestion-item.is-active,
.search-suggestion-more.is-active {
  background: var(--accent-soft);
}

.search-suggestion-type {
  flex: none;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  width: 4rem;
}

/* Miniature affichée à la place du badge de type quand l'item a une photo. */
.search-suggestion-media {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* Rappel du dossier (classe/chapitre) dans lequel la recherche est limitée. */
.search-suggestion-scope {
  padding: 0.5rem 1rem 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
}

.search-suggestion-main {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.search-suggestion-main strong {
  font-family: "Gabarito", "Segoe UI", system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-suggestion-breadcrumb {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-suggestion-more {
  justify-content: center;
  font-weight: 600;
  color: var(--accent);
}

/* Surlignage des correspondances dans les résultats/suggestions. */
mark {
  background: var(--accent-soft);
  color: inherit;
  border-radius: 0.2rem;
  padding: 0 0.1rem;
}

.header-actions {
  display: none;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 30;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

body.is-admin .header-actions {
  display: flex;
}

.header-actions .btn {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}

.header-actions .btn:hover {
  transform: scale(1.1);
}

#admin-logout-btn {
  width: auto;
  height: auto;
  border-radius: 1.5rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
}

.save-status {
  margin: 0;
  padding: 0.35rem 0.75rem;
  border-radius: 1.5rem;
  font-size: 0.8rem;
  white-space: nowrap;
  background: var(--surface, #fff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.save-status--ok {
  color: #1a7f37;
}

.save-status--error {
  color: #c62828;
}

.breadcrumb {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  width: 50%;
  line-height: 1;
  color: var(--header-muted);
  text-transform: uppercase;
}

.breadcrumb a,
.breadcrumb span {
  text-decoration: none;
}

.breadcrumb-item {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--header-muted); text-align: end !important;
}

.breadcrumb-item a {
  color: var(--header-muted);
}

.breadcrumb-item--active {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
}

.breadcrumb-item--home {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--header-muted);
}

.main-card {
  margin: 1.5rem auto;
  max-width: 1100px;
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
  position: relative;
  transition: opacity 220ms ease, transform 220ms ease;
}

.page-hero + .main-card {
  margin-top: -3rem;
}

.page-hero {
  width: 100%;
  height: 280px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin-bottom: -5rem;
}

/* .card-banner removed — replaced by .page-hero */

.grid-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: 1rem;
}

.chapter-section__title {
  margin: 0;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.chapter-section--competence .chapter-section__title {
  color: var(--cat-important);
}

.chapter-section.category-chapter--geographie .chapter-section__title {
  color: var(--cat-geographie);
}

.chapter-section.category-chapter--histoire .chapter-section__title {
  color: var(--cat-histoire);
}

.chapter-section.category-chapter--emc .chapter-section__title {
  color: var(--cat-emc);
}

/* Une ligne de défilement horizontal par matière (Histoire, Géo, EMC…) au
   lieu d'une grille : chaque chapitre garde une largeur fixe et la ligne
   scrolle horizontalement si elle déborde. Chaque matière est sa propre
   chapter-section, séparée des autres par la bordure ci-dessus. */
.chapter-matiere-row__scroll {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1rem 1rem 1rem;
  overflow-x: scroll;
  overflow-y: clip;
  margin: 0 0 1rem -1rem;
}

.chapter-matiere-row__scroll > .card {
  flex: 0 0 240px;
  width: 240px;
  scroll-snap-align: start;
}

.chapter-matiere-row__scroll > .chapter-link-group {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.chapter-link-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.chapter-link-group__desc {
padding-bottom: 6px;
  font-size: 0.85rem;
  color: var(--muted);
  border-bottom: solid 1px var(--border);
  margin-bottom: -2px;
  align-self: stretch;
  width: 0;
  min-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chapter-link-group__desc img,
.chapter-link-group__desc table {
  max-width: 100%;
}

.chapter-link-group__desc table {
  display: block;
  overflow-x: auto;
}

/* Les chapitres liés (même description) restent eux aussi en ligne
   horizontale, à l'intérieur de leur groupe. */
.chapter-link-group__cards {
  display: flex;
  flex-direction: row;
  gap: 0.8rem;
}

.chapter-link-group__cards > .card {
  flex: 0 0 220px;
  width: 220px;
}

.card {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: white;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.8rem;
  margin-bottom: 0.7rem;
  border: 1px solid rgba(17, 24, 39, 0.06);
  transition: 1s cubic-bezier(.77,0,.18,1);
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.12);
  transform: rotate(-2deg);
  scale:105%;
}

.card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.card p {
  margin: 0;
  color: var(--muted);
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.list-group {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
  cursor: pointer;
  position: relative;
  scroll-margin-top: 6rem;
  transition: 0.5s cubic-bezier(.77,0,.18,1);
}

/* Brief pulse played when a list item is scrolled to via a copied anchor
   link, so its new position on screen is obvious at a glance. */
.list-item.is-highlighted {
  animation: item-highlight-pulse 1.8s ease;
}

@keyframes item-highlight-pulse {
  0% { box-shadow: inset 0 0 0 2px var(--accent); }
  70% { box-shadow: inset 0 0 0 2px var(--accent); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}

/* Per-item "copy anchor link" button — sits quietly in the corner until
   hovered/focused, so it doesn't compete with the item's own content. */
.item-anchor-btn {
  position: absolute;
  right: -0.8rem;
  z-index: 2;
  background: white;
  border-radius: 5rem;
  border: 1px solid transparent;
  color: var(--muted);
  border-radius: 5rem;
  width: 1.8rem;
  height: 1.8rem;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 160ms ease, transform 160ms ease, color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.item-diapo-btn {
  position: absolute;
  right: -0.8rem;
  top: 0.5rem;
  background: white;
  border: 1px solid transparent;
  color: var(--muted);
  border-radius: 5rem;
  width: 1.8rem;
  height: 1.8rem;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 160ms ease, transform 160ms ease, color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.item-print-btn {
  position: absolute;
  right: -0.8rem;
  top: 2.6rem;
  z-index: 2;
  background: white;
  border-radius: 5rem;
  border: 1px solid transparent;
  color: var(--muted);
  width: 1.8rem;
  height: 1.8rem;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 160ms ease, transform 160ms ease, color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.list-item:hover .item-anchor-btn,
.list-item:focus-within .item-anchor-btn,
.list-item:hover .item-diapo-btn,
.list-item:focus-within .item-diapo-btn,
.list-item:hover .item-print-btn,
.list-item:focus-within .item-print-btn,
.item-diapo-btn:focus-visible,
.item-anchor-btn:focus-visible,
.item-print-btn:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.item-anchor-btn:hover,
.item-diapo-btn:hover,
.item-print-btn:hover {
  border-color: var(--border);
  background: white;
}

.item-diapo-btn:focus-visible,
.item-anchor-btn:focus-visible,
.item-print-btn:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
}

.item-anchor-btn.is-copied {
  opacity: 1;
  transform: translateY(0);
  border-color: white;
  background: black;
}

.item-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-left: auto;
}

.item-detail-layout {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.item-detail-layout .main-card {
  max-width: none;
  margin: 0;
}

.item-detail-actions--outside {
  position: absolute;
  top: 0.8rem;
  right: -3.1rem;
  margin: 0;
  padding: 0;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.45rem;
  z-index: 5;
}

.inline-rich-toolbar {
  margin: 0rem 0 -3px;
  position: sticky;
  top: 0.35rem;
  z-index: 4;
  background: var(--bg);
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
}

.inline-rich-toolbar[hidden] {
  display: none !important;
}

.rich-text.is-inline-editing {
  outline: 2px solid var(--accent-soft);
  border-radius: 0.65rem;
  padding: 0.55rem 0.65rem;
  background: #fff;
}

.item-course-nav {
  margin: 0.6rem auto 0;
  max-width: 1100px;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  font-size: 0.83rem;
}

.item-course-nav > :first-child { justify-self: start; }
.item-course-nav > :nth-child(2) { justify-self: center; }
.item-course-nav > :last-child { justify-self: end; }

.item-course-nav__link {
  color: var(--muted);
  text-decoration: none;
}

.item-course-nav__link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.main-card--flashcard {
  perspective: 1100px;
  overflow: visible;
}

.flashcard {
  position: relative;
  min-height: 360px;
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
}

.flashcard.is-flipped {
  transform: rotateY(180deg);
}

.flashcard__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 0.9rem;
  padding: 1.1rem;
}

.flashcard__face--front {
  background: var(--cat-vocabulaire);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  text-align: center;
}

.flashcard__face--back {
  transform: rotateY(180deg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: auto;
}

.item-diapo-btn--inline,
.item-anchor-btn--inline,
.item-print-btn--inline {
  position: static;
  right: auto;
  top: auto;
  opacity: 0;
  transform: translateY(-2px);
}

.main-card:hover .item-diapo-btn--inline,
.main-card:hover .item-anchor-btn--inline,
.main-card:hover .item-print-btn--inline,
.main-card:focus-within .item-diapo-btn--inline,
.main-card:focus-within .item-anchor-btn--inline,
.main-card:focus-within .item-print-btn--inline,
.item-diapo-btn--inline:focus-visible,
.item-anchor-btn--inline:focus-visible,
.item-print-btn--inline:focus-visible,
.item-anchor-btn--inline.is-copied {
  opacity: 1;
  transform: translateY(0);
}

.item-detail-actions--outside .item-diapo-btn--inline,
.item-detail-actions--outside .item-anchor-btn--inline,
.item-detail-actions--outside .item-print-btn--inline,
.item-detail-actions--outside .item-anchor-btn--inline.is-copied {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1260px) {
  .item-detail-actions--outside {
    right: 0.65rem;
  }
}

@media (max-width: 720px) {
  .item-detail-actions--outside {
    display: none;
  }
}

.list-main {
  width: 100%;
}

.list-media {
  width: 86px;
  height: 56px;
  object-fit: cover;
  border-radius: 0.6rem;
  flex: 0 0 auto; float: left;
  margin-right: 1rem;
}

.detail-media {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 0.9rem;
  margin-bottom: 1rem;
}


.list-item strong {
  font-weight: 600;
}

.list-item[draggable="true"] {
  cursor: grab;
}

.list-item.is-dragging {
  opacity: 0.4;
}

.list-item.drop-before {
  box-shadow: inset 0 2px 0 var(--accent);
}

.list-item.drop-after {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.content-header__title-block {
  min-width: 0;
  flex: 1 1 auto;
}

.content-header__switcher {
  margin-left: auto;
  flex: 0 0 auto;
}

.card-title {
  font-size: 3rem;
}
.item-title--vocab-inline {
  font-weight: 400;
}

/* Titre au format "N. Titre" (un chiffre unique) : affiché en majuscule,
   que ce soit dans la liste du chapitre, la page d'un item ou le mode diapo. */
.item-title--numbered {
  text-transform: uppercase;
}

.card-title-chap {
color: red; text-transform: uppercase;}

.slide-vocab-def {
    background: yellow;
  border-radius: 0.35rem;
  padding: 0 0.28rem;
  text-decoration-line: none;
}

.content-header h2 {
  margin: 0;
}

.small-note {
  margin-top: 0.75rem;
  color: var(--muted);
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 40;
}

.modal.open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(3px);
}

@keyframes modal-panel-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 2rem));
  max-height: min(85vh, 720px);
  border-radius: 1rem;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  animation: modal-panel-in 0.16s ease-out;
}

.modal-panel-small {
  width: min(420px, calc(100vw - 2rem));
  max-height: none;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-panel h2 {
  margin: 0;
  font-size: 1.25rem;
}

.modal-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 0.6rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.modal-close-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.modal-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.modal-body {
  display: grid;
  gap: 0.95rem;
  padding: 1.4rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.modal-intro-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.95rem;
}

.modal-row--compact {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.7rem;
  padding-bottom: 0.1rem;
}

.modal-row--compact .modal-field {
  flex: 1 1 0;
}

.modal-row--compact .modal-field--image {
  min-width: 18rem;
  flex: 2 1 0;
}

.modal-field {
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.modal-field span {
  font-weight: 600;
  font-size: 0.92rem;
}

.modal-field--checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.modal-field--checkbox input {
  width: auto;
}

.modal-field input,
.modal-field textarea,
.modal-field select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.4rem 0.5rem;
  color: var(--text);
  background: #fff;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.field-hint {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 400;
}

.time-slot-list {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.time-slot-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.time-slot-row select,
.time-slot-row input[type="time"] {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.35rem 0.5rem;
  font: inherit;
}

.time-slot-row select {
  flex: 1;
}

.time-slot-remove {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0.25rem;
}

.time-slot-remove:hover {
  color: #dc2626;
}

.editor-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  overflow-y: visible;
  white-space: nowrap;
  gap: 0.35rem;
}

/* Autocomplete popover opened by the "Lien" toolbar button. Lets the user
   either paste a raw URL or search for a classe/chapitre/élément by title
   and link straight to its place in the course. Anchored under the
   toolbar so it doesn't shift the rest of the form's layout. */
.link-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.4rem);
  left: 0;
  width: min(340px, 100%);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  padding: 0.6rem;
}

/* Printing a single item's main-card (see printMainCard in app.js): the
   printable clone(s) live in #print-root, a direct child of <body> that
   stays hidden on-screen; while printing, everything else under <body> is
   hidden and only #print-root is shown, so window.print() targets the real
   top document — real selectable text (no iframe rasterization) and a
   correctly-registered print-job title (the filename dialogs read from). */
#print-root {
  display: none;
}

@media print {
  body.is-printing-item > *:not(#print-root) {
    display: none !important;
  }

  body.is-printing-item #print-root {
    display: block !important;
  }

  #print-root .item-detail-layout {
    max-width: none;
    width: 100%;
    margin: 0;
  }

  #print-root .print-tile {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  @page {
    size: 297mm 210mm;
    margin: 0;
  }
}

/* Small "CNR-edu.fr" origin mark stamped on each printed item (see
   buildPrintOriginMarkHtml in app.js): invisible on-screen, and only ever
   shown once cloned into #print-root for printing — including inside each
   stacked copy of an "Impression double/quadruple" job, so a cut-out sheet
   still carries a trace of where it came from. */
.print-item-origin {
  display: none;
}

@media print {
  #print-root .print-item-origin {
    display: block !important;
    margin-bottom: 0.75rem;
    text-align: right;
    font-family: 'Gabarito', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #94a3b8;
  }
}

/* Right-click menu on item-print-btn ("Impression double / en quadruple") */
.print-context-menu {
  position: fixed;
  z-index: 60;
  margin: 0;
  padding: 0.35rem;
  min-width: 200px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.print-context-menu li + li {
  margin-top: 0.15rem;
}

.print-context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

.print-context-menu button:hover,
.print-context-menu button:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

/* Right-click menu on a calendrier général entry (Annuler / Réactiver /
   Ouvrir le diaporama) — see openCalendarContextMenu(). */
.cal-context-menu {
  position: fixed;
  z-index: 60;
  margin: 0;
  padding: 0.35rem;
  min-width: 220px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.cal-context-menu li + li {
  margin-top: 0.15rem;
}

.cal-context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

.cal-context-menu button:hover,
.cal-context-menu button:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.link-popover-inputrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.link-popover-inputrow input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  padding: 0.5rem 0.65rem;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  background: #fff;
}

.link-popover-inputrow input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.link-popover-close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 0.4rem;
}

.link-popover-close:hover {
  color: var(--text);
  background: var(--bg-soft, #f1f5f9);
}

.link-popover-results {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  gap: 0.2rem;
}

.link-popover-result {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.link-popover-result:hover,
.link-popover-result.is-active {
  background: var(--accent-soft);
}

.link-popover-result-type {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
}

.link-popover-result-label {
  font-size: 0.88rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-popover-empty {
  padding: 0.5rem 0.55rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Table popover opened by the "Insérer un tableau" toolbar button (and by
   right-clicking an existing table). Same floating-panel look as
   .link-popover, but wider and scrollable since it carries a lot more
   controls (table tab, cell tab, creation form). */
.table-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.4rem);
  left: 0;
  width: min(360px, 100%);
  max-height: min(480px, 70vh);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  padding: 0.55rem;
}

.table-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  cursor: grab;
  user-select: none;
}

/* Groups related fields under a small heading (Apparence/Texte/Bordure/…)
   so the cell tab — by far the most field-dense — reads as a few short
   sections instead of one long undifferentiated list. */
.table-popover-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0.55rem 0 0.3rem;
}

.table-popover.is-dragging {
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.24);
}

.table-popover.is-dragging .table-popover-header {
  cursor: grabbing;
}

.table-popover-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.table-popover-tabs {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}

.table-popover-tab {
  flex: 1;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  border-radius: 0.55rem;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.table-popover-tab.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Secondary navigation within the "Tableau"/"Cellule" tab (see
   TABLE_PAGES/CELL_PAGES) — smaller and lighter than the mode tabs above,
   wraps onto a second line rather than squeezing every page label thin. */
.table-popover-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.table-popover-page-btn {
  flex: 0 0 auto;
  border: 1px solid transparent;
  background: var(--bg-soft, #f1f5f9);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.table-popover-page-btn:hover {
  color: var(--text);
}

.table-popover-page-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.table-popover-border-sides {
  margin-bottom: 0.45rem;
}

.table-popover-side-toggle {
  display: flex;
  gap: 0.3rem;
}

.table-popover-side-btn {
  flex: 1;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  border-radius: 0.5rem;
  padding: 0.3rem 0.4rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.table-popover-side-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.table-popover-hint {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.table-popover-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 0.5rem;
  margin-bottom: 0.45rem;
}

.table-popover-field {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  font-size: 0.76rem;
  color: var(--text);
}

.table-popover-field span {
  font-weight: 600;
  color: var(--muted);
}

.table-popover-field input[type="number"],
.table-popover-field input[type="text"],
.table-popover-field select {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.28rem 0.4rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text);
  background: #fff;
  width: 100%;
}

.table-popover-field input[type="color"] {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.15rem;
  height: 2rem;
  width: 100%;
  background: #fff;
  cursor: pointer;
}

.table-popover-field--checkbox {
  flex-direction: row;
  align-items: center;
  grid-column: 1 / -1;
}

.table-popover-field--checkbox input {
  margin: 0;
}

.table-popover-inline {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.table-popover-inline input[type="number"] {
  flex: 1;
  min-width: 0;
}

.table-popover-inline select {
  flex: none;
  width: auto;
}

.table-popover-clear {
  flex: none;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  border-radius: 0.5rem;
  padding: 0.3rem 0.45rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.table-popover-clear:hover {
  color: var(--text);
  border-color: var(--accent);
}

.table-popover-row-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}

.table-popover-row-actions span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  flex: none;
  width: 3.6rem;
}

.table-popover-primary {
  width: 100%;
  text-align: center;
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.table-popover-danger {
  border-color: #dc2626;
  color: #dc2626;
}

.table-popover-danger:hover {
  background: #dc2626;
  color: #fff;
}

.table-popover-field input:disabled,
.table-popover-field select:disabled,
.table-popover-row-actions .editor-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.table-popover-row-actions .editor-btn:disabled:hover {
  border-color: var(--border);
  color: var(--muted);
  background: #fff;
}

.editor-btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 0.55rem;
  padding: 0.35rem 0.55rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.editor-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.editor-color-select {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 0.55rem;
  padding: 0.24rem 0.42rem;
  font: inherit;
  font-size: 0.73rem;
  font-weight: 600;
}

.editor-color-select:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}

.rich-editor {
  position: relative;
  min-height: 150px;
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 0.85rem;
  background: #fff;
  line-height: 1.5;
}

.rich-editor:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}

.rich-editor:empty::before {
  content: "Tapez votre texte ici...";
  color: var(--muted);
}

.rich-editor.is-hidden,
.rich-text.is-hidden {
  display: none;
}

/* Raw-HTML source textarea for inline (non-modal) rich text editors — the
   detail page and the diaporama each create one of these on demand next to
   their ".rich-text" content when the </> toolbar button is used. Same look
   as the modal's #edit-secondary source view. */
.rich-editor-html-source {
  display: block;
  min-height: 150px;
  height: fit-content;
  width: 100%;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 0.85rem;
  background: #fff;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
}

.rich-editor-html-source:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}

.rich-editor-html-source[hidden] {
  display: none;
}

.editor-btn--html {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  margin-left: auto;
}

.editor-btn--html.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.editor-toolbar.is-html-mode .editor-btn:not(.editor-btn--html) {
  opacity: 0.4;
  pointer-events: none;
}

.editor-toolbar.is-html-mode .editor-color-select {
  opacity: 0.4;
  pointer-events: none;
}

/* The hidden textarea doubles as the raw-HTML source view when toggled on:
   same box as the rich editor, monospace so tags are easy to read/edit. */
#edit-secondary:not([hidden]) {
  display: block;
  min-height: 150px;
  max-height: 280px;
  width: 100%;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 0.85rem;
  background: #fff;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
}

#edit-secondary:not([hidden]):focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}


.rich-text {
  position: relative;
}

.rich-text p {
  margin: 0.35rem 0;
  font-family: 'Roboto', sans-serif;
}

.rich-text h1, .rich-editor h1,
.rich-text h2, .rich-editor h2,
.rich-text h3, .rich-editor h3,
.rich-text h4, .rich-editor h4 {
  font-family: "Gabarito", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  margin: 0rem 0 0.3rem;
}

.rich-text h1, .rich-editor h1 { font-size: 1.75rem; }
.rich-text h2, .rich-editor h2 { font-size: 1.45rem; }
.rich-text h3, .rich-editor h3 { font-size: 1.2rem; }
.rich-text h4, .rich-editor h4 { font-size: 1.05rem; }

.rich-text ul,
.rich-text ol {
  padding-left: 1.1rem;
}

.rich-text a {
  color: var(--accent);
  text-decoration: underline;
}

.rich-text a.vocab {
  background: yellow;
  border-radius: 0.35rem;
  padding: 0 0.28rem;
  text-decoration-line: none;
}

.rich-text img {
  cursor: zoom-in;
}

/* Chapter title + photo shown at the top of a chapter-dashboard élément's
   card — see the isChapterDashboard block in renderElementDetail(). */
.dashboard-chapter-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  position: absolute;
  background: white;
  z-index: 1;
}

.dashboard-chapter-header__img {
  width: 7rem;
  height: 5rem;
  border-radius: 0 20px 20px 0;
  object-fit: cover;
  flex: 0 0 auto;
  margin-left: -1.5rem;
}

.dashboard-chapter-header__title {
  margin: 0;
  font-family: "Gabarito", "Segoe UI", system-ui, sans-serif;
  font-size: 2rem; max-width: 80%;
  text-transform: uppercase;
}

/* Auto-generated recap (plan / vocabulaire / compétences) appended after a
   chapter-dashboard élément's own text — see buildChapterDashboardHtml(). */
.dashboard-recap {
  margin-top: 1.25rem;
  display: flex;
  gap: 1rem;
}

.dashboard-section {
  border: solid 1px;
  border-radius: 13px;
  width: 30%;
  height: fit-content;
  padding: 1rem 1rem;
}

.dashboard-section__title {
  font-family: "Gabarito", "Segoe UI", system-ui, sans-serif;
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

.dashboard-plan {
  list-style: decimal;
  margin: 0;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.35rem;
}

.dashboard-plan__item {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  border-radius: 0.4rem;
  padding: 0.15rem 0.4rem;
  margin-left: -0.4rem;
  width: fit-content;
}

.dashboard-plan__item:hover {
  background: var(--accent-soft);
}

.dashboard-plan__title {
  flex: 1;
}

.dashboard-vocab {
  margin: 0;
  line-height: 1.4;
}

.dashboard-vocab__item {
  cursor: pointer;
  border-radius: 0.3rem;
  padding: 0.05rem 0.3rem;
}

.dashboard-vocab__item:hover {
  background: var(--accent-soft);
}

.dashboard-competences {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.image-lightbox-open {
  overflow: hidden;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
}

.image-lightbox[hidden] {
  display: none;
}

.image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.image-lightbox__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  user-select: none;
}

.image-lightbox__img {
 max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  transition: transform 120ms ease;
  right: 0;
  position: absolute;
  height: 100%;
}

.image-lightbox__topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0.6rem 1.5rem 0.6rem 0.9rem;
  background: #00000070;
  pointer-events: none;
  width: 18%;
  border-radius: 24px;
}

.image-lightbox__caption {
  margin: 0;
  color: #f9fafb;
  font-size: 1.5rem;
  text-align: end;
  font-family: 'Roboto', sans-serif;
}

.image-lightbox__controls {
  position: absolute;
  z-index: 2;
  top: 0.9rem;
  right: 0.9rem;
  display: flex;
  gap: 0.45rem;
  opacity: 0;
}

.image-lightbox__controls:hover {
  opacity: 1 !important;
  transition: opacity 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.image-lightbox__btn {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(17, 24, 39, 0.75);
  color: #f9fafb;
  border-radius: 0.6rem;
  min-width: 2.1rem;
  height: 2.1rem;
  font: inherit;
  cursor: pointer;
}

.image-lightbox__btn:hover {
  background: rgba(31, 41, 55, 0.95);
}

.modal-field input:focus,
.modal-field textarea:focus,
.modal-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--border);
  background: #fff;
  flex-shrink: 0;
}

.modal-actions-left,
.modal-actions-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

@media (max-width: 560px) {
  .modal-row {
    grid-template-columns: 1fr;
  }
  .modal-actions {
    flex-wrap: wrap;
  }
  .modal-actions-left,
  .modal-actions-right {
    width: 100%;
  }
  .modal-actions-left .btn,
  .modal-actions-right .btn {
    flex: 1;
  }
}

.btn {
  border: 1px solid transparent;
  border-radius: 0.7rem;
  padding: 0.65rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.btn-light {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  filter: brightness(1.04);
}

.btn-danger {
  background: #b91c1c;
  color: #fff;
}

.btn-danger:hover {
  filter: brightness(1.06);
}

.btn-small {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.filters-section {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 2rem;
  margin-top: 0.5rem;
}

.filters-container {
  max-width: 1200px;
  margin: 0 auto;
}

.filters-title {
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  font-family: "Gabarito", "Segoe UI", system-ui, sans-serif;
}

.filters-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.filter-checkbox input[type="checkbox"] {
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.filter-checkbox span {
  font-size: 0.95rem;
  color: var(--text);
}

.filter-checkbox input[type="checkbox"]:checked + span {
  font-weight: 600;
  color: var(--accent);
}

/* ── Page de résultats de recherche ── */
.search-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
}

.search-sort-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.search-sort-field select {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.4rem 0.6rem;
  font: inherit;
  color: var(--text);
  background: #fff;
}

.search-filters-panel[hidden] {
  display: none;
}

.search-filters-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  background: var(--bg);
  border-radius: 0.75rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}

.search-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.search-filter-group-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
}

.search-filter-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.search-filter-count {
  color: var(--muted);
  font-weight: 400;
}

.search-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.search-active-chip {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 99px;
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

.search-active-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.search-result-breadcrumb {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.search-result-snippet {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

.search-result-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
  flex: none;
}

/* Inline filter chips */
.inline-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem; margin-bottom: 1rem;
}

.inline-filters__toolbar {
  display: flex;
  gap: 0.5rem;
}

.inline-filters__accordion {
  display: none;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

.inline-filters__accordion.is-open {
  display: grid;
    transition: 0.5s cubic-bezier(.86,0,.07,1);

}

.inline-filters__group-label {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.62rem;
  border-radius: 0px;
  color: var(--surface-strong);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.inline-filters__group-label:hover {
  background: rgba(17, 24, 39, 0.14);
  border-radius: 99px 20px 15px 99px;
  transition: 0.5s cubic-bezier(.86,0,.07,1);
}

.inline-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.filter-chip {
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: 0.5s cubic-bezier(.86,0,.07,1);
  font-family: inherit;
}

.filter-chip[class*="filter-chip--cat-"] {
  border-color: rgba(17, 24, 39, 0.2);
}

.filter-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(4deg) scale(1.05);
}

.filter-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.filter-chip--moment-de-cours.is-active {
  background: #0f766e;
  border-color: #0f766e;
}

.filter-chip--ressources.is-active {
  background: #a21caf;
  border-color: #a21caf;
}

.filter-chip--cat-histoire {
  color: var(--cat-histoire);
}

.filter-chip--cat-histoire.is-active {
  background: var(--cat-histoire);
  border-color: var(--cat-histoire);
}

.filter-chip--cat-geographie {
  color: var(--cat-geographie);
}

.filter-chip--cat-geographie.is-active {
  background: var(--cat-geographie);
  border-color: var(--cat-geographie);
}

.filter-chip--cat-emc {
  color: var(--cat-emc);
}

.filter-chip--cat-emc.is-active {
  background: var(--cat-emc);
  border-color: var(--cat-emc);
}

.filter-chip--cat-activite-seul {
  color: var(--cat-activite-seul);
  border-color: color-mix(in srgb, var(--cat-activite-seul) 35%, #d1d5db);
}

.filter-chip--cat-activite-seul.is-active {
  background: var(--cat-activite-seul);
  border-color: var(--cat-activite-seul);
}

.filter-chip--cat-activite-en-groupe {
  color: var(--cat-activite-en-groupe);
  border-color: color-mix(in srgb, var(--cat-activite-en-groupe) 35%, #d1d5db);
}

.filter-chip--cat-activite-en-groupe.is-active {
  background: var(--cat-activite-en-groupe);
  border-color: var(--cat-activite-en-groupe);
}

.filter-chip--cat-evaluation {
  color: var(--cat-evaluation);
  border-color: color-mix(in srgb, var(--cat-evaluation) 35%, #d1d5db);
}

.filter-chip--cat-evaluation.is-active {
  background: var(--cat-evaluation);
  border-color: var(--cat-evaluation);
}

.filter-chip--cat-cours {
  color: var(--muted);
  border-color: color-mix(in srgb, var(--cat-cours) 35%, #d1d5db);
}

.filter-chip--cat-cours.is-active {
  background: var(--muted);
  border-color: var(--muted);
}

.filter-chip--cat-vocabulaire {
  color: var(var(--surface-strong));
  border-color: color-mix(in srgb, var(--cat-vocabulaire) 35%, #d1d5db);
}

.filter-chip--cat-vocabulaire.is-active {
  background: var(--cat-vocabulaire);
  border-color: var(--cat-vocabulaire);
  color:var(--surface-strong);
}

.filter-chip--cat-pour-aller-plus-loin {
  color: var(--cat-pour-aller-plus-loin);
  border-color: color-mix(in srgb, var(--cat-pour-aller-plus-loin) 35%, #d1d5db);
}

.filter-chip--cat-pour-aller-plus-loin.is-active {
  background: var(--cat-pour-aller-plus-loin);
  border-color: var(--cat-pour-aller-plus-loin);
}

.filter-chip--cat-important {
  color: var(--cat-important);
  border-color: color-mix(in srgb, var(--cat-important) 35%, #d1d5db);
}

.filter-chip--cat-important.is-active {
  background: var(--cat-important);
  border-color: var(--cat-important);
}

.cal-table__chapter.category-chapter--geographie {
  border-left: 4px solid var(--cat-geographie) !important;
  color: var(--cat-geographie) !important;
}
.cal-table__chapter.category-chapter--histoire {
  border-left: 4px solid var(--cat-histoire) !important;
  color: var(--cat-histoire) !important;
}
.cal-table__chapter.category-chapter--emc {
  border-left: 4px solid var(--cat-emc) !important;
  color: var(--cat-emc) !important;
}

.category-chapter--competence {
  border:none;
  background-color: transparent;
  padding: 0.2rem 1rem 0.3rem;
  height: fit-content;
}

.chapter-card--parcours {
  grid-column: 1 / -1;
  transform: rotate(0deg) !important;
  background-color: #f5f7fb;
}

.nature-badge {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  font-weight: 500;
  margin-right: 0;
  font-size: 0.8rem;
  width: fit-content;
  float: inline-end;
}

.duration-badge {
  padding: 0.25rem 0.75rem;
  color:#6b7280;
}

.duration-badge::before {
  content: "≈";
  margin-right: 0.2rem;
}

.item-inline-meta {
  font-size: 0.88rem;
  color: var(--muted);
}

.view-switcher {
  padding: 1rem 2rem 0;
}

.view-switcher__inner {
  gap: 0.35rem;
  border-radius: 999px;
}

.view-switcher__btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font: inherit;
  font-weight: initial;
  cursor: pointer;
  border:solid 1px white
}

.view-switcher__btn.is-active {
  background:black; color:white;
}

.view-switcher__btn:hover {
  border: 1px solid black; transition: 0.3s cubic-bezier(.86,0,.07,1); transform: rotate(4deg) scale(1.05);
}

.inline-filters__group {
  width: 100%;
  display: flex;
}

.card.category-chapter--histoire:hover {
  border-color : var(--cat-histoire);
  color : var(--cat-histoire)
}

.card.category-chapter--geographie:hover {
  border-color: var(--cat-geographie);
  color: var(--cat-geographie);
}

.card.category-chapter--emc:hover {
  border-color: var(--cat-emc);
  color : var(--cat-emc);
}

.category-element--activite-seul .item-title {
  
}

.category-element--activite-en-groupe .item-title {
  
}

.category-element--evaluation {
  background: var(--cat-evaluation);
  border-radius: 20px; color:white
}

.category-element--cours .item-title{
  color:red;
 font-size: 2rem;}

.category-element--vocabulaire {
  background: var(--cat-vocabulaire);
  border-radius: 20px;
}

.category-element--pour-aller-plus-loin {
  background: #f5f7fb;
    border-radius: 20px;
}

.category-element--important {
  background: var(--cat-important);
  color: white;
  border-radius: 20px;
}

.category-chapter--histoire .nature-badge {
  background: color-mix(in srgb, var(--cat-histoire) 16%, #ffffff);
  color: var(--cat-histoire);
}

.category-chapter--geographie .nature-badge {
  background: color-mix(in srgb, var(--cat-geographie) 16%, #ffffff);
  color: var(--cat-geographie);
}

.category-chapter--emc .nature-badge {
  background: color-mix(in srgb, var(--cat-emc) 16%, #ffffff);
  color: var(--cat-emc);
}

.category-element--activite-seul .nature-badge {
  background: color-mix(in srgb, var(--cat-activite-seul) 16%, #ffffff);
  color: var(--cat-activite-seul);
}

.category-element--activite-en-groupe .nature-badge {
  background: color-mix(in srgb, var(--cat-activite-en-groupe) 16%, #ffffff);
  color: var(--cat-activite-en-groupe);
}

.category-element--evaluation .nature-badge {
  background: color-mix(in srgb, var(--cat-evaluation) 16%, #ffffff);
  color: var(--cat-evaluation);
}

.category-element--cours .nature-badge {
  display: none;
}

.category-element--vocabulaire .nature-badge {
  background: color-mix(in srgb, var(--cat-vocabulaire) 16%, #ffffff);
  color: var(var(--surface-strong));
}

.category-element--pour-aller-plus-loin .nature-badge {
  background: color-mix(in srgb, var(--cat-pour-aller-plus-loin) 16%, #ffffff);
  color: var(--cat-pour-aller-plus-loin);
}

.category-element--important .nature-badge {
  background: color-mix(in srgb, var(--cat-important) 16%, #ffffff);
  color: var(--cat-important);
}

/* ── Calendar table ── */
.cal-table-wrap {
  overflow-x: auto;
  margin-top: 1.2rem;
}

.cal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  color: var(--text);
}

.cal-table thead tr {
  background: rgba(37, 99, 235, 0.07);
}

.cal-table th,
.cal-table td {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}

.cal-table th {
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  white-space: nowrap;
}

.cal-table__week {
  background: rgba(249, 250, 251, 0.7);
  width: 1rem;
}

.cal-table__slot {
  text-align: center;
  width: 1rem;
  color: var(--muted);
  font-weight: 700;
  padding: 10px 6px 0px 6px !important;
}

.cal-table__chapter {
  width: 10rem;
  font-weight: 600;
  cursor: pointer;
}

.cal-table__chapter:hover {
  text-decoration: underline;
}

.cal-table__session {
  min-width: 200px;
  max-width: 500px;
  overflow: scroll;
}

.cal-table__row.is-pending td {
  background: rgba(17, 24, 39, 0.03);
  color: var(--muted);
}

.cal-week-num {
  display: block;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--text);
}

.cal-week-dates {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.cal-session-title {
  margin-bottom: 0.3rem;
  cursor: pointer;
}

.cal-session-title:hover {
  text-decoration: underline;
}

.cal-session-title-group {
  margin: -4px 0px -6px -7px;
overflow: scroll;
scrollbar-width: none;
}

.cal-session-sep {
  font-weight: 400;
  color: var(--muted);
  cursor: default;
  margin: 0 0.1rem;
}

.cal-session-meta {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.cal-session-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

.cal-session-pending {
  color: var(--muted);
  font-style: italic;
  font-size: 0.88rem;
}

.cal-holiday-row td {
  background: black;
  color: white;
  padding: 10px 12px 14px 15px; vertical-align: middle;
  font-size: 1rem;
}

.cal-holiday-cell {
  font-weight: 500;
  color: var(--muted);
  font-size: 0.9rem;
}

.calendar-grid,
.sessions-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.calendar-card,
.session-card {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: rgba(249, 250, 251, 0.92);
  padding: 1rem;
}

.calendar-card {
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.calendar-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.12);
}

.calendar-card__header,
.session-card__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.calendar-card__header h3,
.session-card__header h3 {
  margin: 0.4rem 0 0;
}

.calendar-card__meta {
  display: grid;
  gap: 0.3rem;
  justify-items: end;
  font-size: 0.88rem;
  color: var(--muted);
}

.calendar-list {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  color: var(--text);
}

.calendar-list--weeks {
  list-style: none;
  padding-left: 0;
}

.calendar-week {
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  padding-top: 0.9rem;
}

.calendar-week + .calendar-week {
  margin-top: 0.9rem;
}

.calendar-week__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.6rem;
}

.calendar-week__body {
  display: grid;
  gap: 0.7rem;
}

.calendar-week__chapter {
  font-weight: 700;
  color: var(--text);
}

.calendar-session {
  border-radius: 0.9rem;
  padding: 0.9rem;
}

.calendar-session.is-available {
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.16);
}

.calendar-session.is-pending {
  background: rgba(17, 24, 39, 0.04);
  border: 1px dashed rgba(17, 24, 39, 0.16);
}

.calendar-session__title {
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.calendar-session__meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}

.calendar-session p {
  margin: 0;
  line-height: 1.55;
}

.calendar-list li + li {
  margin-top: 0.45rem;
}

.calendar-chip {
  color: var(--muted);
  font-size: 0.85rem;
}

.sessions-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.session-card p {
  margin: 0.9rem 0 0;
  color: var(--text);
  line-height: 1.6;
}

.session-card--pending {
  border-style: dashed;
  background: rgba(17, 24, 39, 0.04);
}

.session-items {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.9rem;
}

.session-item {
  padding-top: 0.85rem;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.session-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.session-item__title {
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.session-item__meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap; top: 0;
  position: absolute;
  right: 0;
  margin-bottom: 0.4rem;
}

.item-detail-heading {
  width: 100%;
  position: relative;
  padding-right: clamp(140px, 21vw, 260px);
}

.item-detail-heading .item-title {
  margin: 0 0 0.5rem;
  font-size: 2rem;
}

.item-detail-heading .session-item__meta {
  margin: 0;
  display: block;
}

.item-detail-heading .session-item__meta-main {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  position: absolute;
  right: 0;
  top: 0;
}

.item-detail-heading .session-item__meta-competences {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.2rem 0 0.5rem;
}

.item-detail-heading .session-item__meta-competences .competence-badge {
  margin-bottom: 0;
}

/* ── Séances table (chapitre) ── */
.session-table__num {
  white-space: nowrap;
  background: rgba(249, 250, 251, 0.7);
  width: 9rem;
  font-weight: 700;
  color: var(--text);
}

.session-table__num-main {
  display: block;
}

.session-diapo-btn {
  margin-top: 0.45rem;
}

.session-table__item {
  min-width: 220px;
}

.session-table__item .nature-badge {
  margin-right: 0.5rem;
}

.session-table__title {
  font-weight: 600;
  cursor: pointer;
}

.session-table__title:hover {
  text-decoration: underline;
}

.session-table__duration {
  white-space: nowrap;
  width: 7rem;
  color: var(--muted);
}

.session-table__empty {
  color: var(--muted);
  font-style: italic;
  font-size: 0.9rem;
}

.session-table__row.is-pending td {
  background: rgba(17, 24, 39, 0.03);
  color: var(--muted);
}

.session-table__competences,
.cal-table__competences {
  min-width: 160px;
}

/* ── Calendrier — colonne "Répartition" (couleur proportionnelle) ── */
.cal-table__repartition {
  width: 2.5rem;
  padding: 0 !important;
}

.cal-repartition-bar {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.cal-repartition-bar--empty {
  background-color: rgba(17, 24, 39, 0.035);
}

.cal-repartition-bar__seg {
  width: 100%;
  background: var(--muted);
}

.cal-repartition-bar__seg--moment-de-cours { background: transparent; }
.cal-repartition-bar__seg--activite-seul { background: var(--cat-activite-seul); }
.cal-repartition-bar__seg--activite-en-groupe { background: var(--cat-activite-en-groupe); }
.cal-repartition-bar__seg--evaluation { background: var(--cat-evaluation); }
.cal-repartition-bar__seg--cours { background: var(--cat-cours); }

/* ── Calendrier hebdomadaire — lignes de hauteur uniforme ── */
/* Chaque cellule est bornée à une hauteur fixe et n'autorise pas le retour
   à la ligne : un contenu trop large (titre de chapitre, séance, badges de
   compétences...) défile horizontalement dans sa propre cellule au lieu de
   faire grandir la ligne, ce qui garantit des lignes de hauteur identique
   sur tout le tableau. La colonne Répartition (height: 100%) se cale alors
   exactement sur cette hauteur, sans laisser d'espace sous la barre.
*/
.cal-table--weekly td.cal-table__slot,
.cal-table--weekly td.cal-table__session,
.cal-table--weekly td.cal-table__repartition,
.cal-table--weekly td.cal-table__competences,
.cal-table--weekly td.competence-col-cell,
.cal-table--weekly td.cal-holiday-cell {
  height: 2rem;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.cal-table--weekly td.cal-table__repartition {
  overflow: hidden;
}

/* ── Séances table (chapitre) — proportional time timeline ── */
.session-table--timeline .session-table__num {
  width: 9.5rem;
  vertical-align: middle;
}

.session-timeline-cell {
  padding: 0 !important;
  vertical-align: middle;
}

.session-timeline-ruler {
  display: flex;
  justify-content: space-between;
  padding: 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.session-timeline {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 3.1rem;
  margin: 0.5rem 0.9rem;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background-color: rgba(17, 24, 39, 0.035);
  /* Faint vertical rules every 10 min (1/5th of the 50-min séance axis). */
  background-image: repeating-linear-gradient(
    to right,
    rgba(17, 24, 39, 0.1) 0,
    rgba(17, 24, 39, 0.1) 1px,
    transparent 1px,
    transparent 20%
  );
}

.session-timeline__bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  border: none;
  border-right: 2px solid #fff;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: transparent;
  font: inherit;
  text-align: left;
  overflow: hidden;
  transition: filter 0.12s ease;
}

.session-timeline__bar:last-child {
  border-right: none;
}

.session-timeline__bar:hover {
  filter: brightness(1.08);
}

.session-timeline__bar.is-dimmed {
  opacity: 0.5;
}

.session-timeline__bar.is-dimmed:hover {
  opacity: 0.75;
}

.session-timeline__bar--activite-seul { background: var(--cat-activite-seul); }
.session-timeline__bar--activite-en-groupe { background: var(--cat-activite-en-groupe); }
.session-timeline__bar--evaluation { background: var(--cat-evaluation); }
.session-timeline__bar--cours { background: var(--cat-cours); }

.session-timeline__label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  max-width: calc(100% - 0.6rem);
  margin: 0 0.4rem;
  padding: 0.2rem 0.5rem;
  overflow: hidden;
}

.session-timeline__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 700;
  color: #111827;
}

.session-timeline__competence.competence-cell-badge {
  flex-shrink: 0;
  width: 1.3rem;
  height: 1.3rem;
  min-width: 1.3rem;
  font-size: 0.85rem;
  padding: 0;
  margin: 0;
}

.session-timeline__empty {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 0.9rem;
  color: var(--muted);
  font-style: italic;
  font-size: 0.85rem;
}

/* ── Compétences ── */
.competence-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: white;
  border-radius: 999px;
  border: solid 1px white;
  padding: 1px 5px;
  cursor: pointer;
  color: gray;
}

.competence-badge:hover {
  transition: 0.3s cubic-bezier(.86,0,.07,1);
  transform: rotate(-1deg) scale(1.05);
  border-color: black; color: black;
}

.competence-badge__count {
  font-weight: 700;
  opacity: 0.75;
}

/* Liste auto-générée des sous-compétences dans une carte « Compétence ». */
.subcompetence-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.subcompetence-item {
  display: inline-flex;
  align-items: center;
  background: white;
  border-radius: 999px;
  border: solid 1px var(--border, #e2e2e2);
  padding: 2px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  color: gray;
}

.subcompetence-item:hover {
  transition: 0.3s cubic-bezier(.86,0,.07,1);
  transform: rotate(-1deg) scale(1.05);
  border-color: var(--cat-important, black);
  color: var(--cat-important, black);
}

/* ── Compétences, split by category (one sub-column per « Compétence » chapitre) ── */
.competence-col-header {
  text-align: center !important;
  width: 2.2rem;
  font-size: 1.05rem !important;
  padding: 6px 0px !important;
  cursor: default;
}

.competence-col-cell {
  text-align: center;
  padding: 0rem !important;
}

.competence-cell-badge {
  display: inline-flex;
  justify-content: center;
  background: white;
  border-radius: 999px;
  border: solid 1px var(--border);
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.2rem;
  margin: 1px;
  cursor: pointer;
  color: gray;
  font-weight: 700;
  font-size: 0.8rem;
}

.competence-cell-badge:hover {
  transition: 0.3s cubic-bezier(.86,0,.07,1);
  transform: scale(1.1);
  border-color: black;
  color: black;
}

.competence-cell-occ {
  font-size: 0.65em;
  font-weight: 800;
  margin-left: 1px;
  opacity: 0.8;
}

/* Autocomplete tag-input (Compétences travaillées field) */
.competence-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  min-height: 1.6rem;
}

.competence-tags__empty {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

.competence-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: color-mix(in srgb, #7c3aed 14%, #ffffff);
  color: #7c3aed;
  border-radius: 999px;
  padding: 0.2rem 0.35rem 0.2rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.competence-tag__remove {
  border: none;
  background: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  border-radius: 999px;
}

.competence-tag__remove:hover {
  background: color-mix(in srgb, #7c3aed 25%, #ffffff);
}

.competence-input-wrap {
  position: relative;
}

.competence-search-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  font-size: 0.92rem;
  font-family: inherit;
  background: #fff;
}

.competence-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.competence-suggestions {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.12);
  max-height: 220px;
  overflow-y: auto;
}

.competence-suggestion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text);
}

.competence-suggestion:hover {
  background: rgba(124, 58, 237, 0.08);
}

.competence-suggestion__title {
  font-weight: 600;
}

.competence-suggestion__chapter {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.competence-suggestions__empty {
  padding: 0.6rem 0.75rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
}


.main-card.is-leaving {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 150ms ease, transform 150ms ease;
}

/* Entrance animation: JS adds .is-entering (snapping the card to its hidden
   state with no transition), then removes it a frame later so the card
   transitions back to opacity:1 / translateY(0) via the base .main-card
   transition above. */
.main-card.is-entering {
  opacity: 0;
  transform: translateY(8px);
  transition: none;
}

@media (max-width: 720px) {
  .topbar {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
  }

  .search-group {
    min-width: 100%;
    max-width: none;
    order: 1;
  }
}

/* --- Page de Gestion ------------------------------------------------- */

.gestion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.gestion-card {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.1rem 1.25rem;
}

.gestion-card--wide {
  grid-column: 1 / -1;
}

.gestion-card h2 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}

.gestion-card h3 {
  margin: 1rem 0 0.4rem;
  font-size: 0.9rem;
  color: var(--surface-strong);
  opacity: 0.75;
}

.gestion-stat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.gestion-stat-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.9rem;
}

.gestion-stat-list li:last-child {
  border-bottom: none;
}

.gestion-subsection {
  margin-top: 0.5rem;
}

.gestion-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.gestion-list__item {
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  background: var(--accent-soft);
  cursor: pointer;
}

.gestion-list__item:hover {
  filter: brightness(0.97);
}

.gestion-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  cursor: default;
}

.gestion-link-row__url {
  flex: 1 1 260px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

.gestion-link-row__status {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.gestion-link-row__status--ok {
  color: #1a7f37;
}

.gestion-link-row__status--broken {
  color: #c62828;
}

.gestion-link-row__status--unknown {
  color: #9a6b00;
}

.gestion-link-row__locations {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.gestion-link-row__loc {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  cursor: pointer;
}

.gestion-link-row__loc:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 720px) {
  #search-input {
    font-size: 1rem;
    padding-left: 2.5rem;
    border-radius: 0.45rem;
  }

  .search-icon {
    font-size: 1rem;
    left: 0.75rem;
  }

  .header-actions {
    right: 0.7rem;
    bottom: 0.7rem;
    width: auto;
    padding: 0.45rem;
  }

  .header-actions .btn {
    min-width: 136px;
  }

  .view-switcher {
    padding: 0.75rem 1rem 0;
  }

  .view-switcher__inner {
    display: flex;
    width: 100%;
  }

  .view-switcher__btn {
    flex: 1 1 0;
    text-align: center;
  }

  .breadcrumb {
    order: 3; 
    width: 100%;
    align-items: flex-start; text-align: end;
    font-size: 0.95rem;
    text-transform: none;
    line-height: 1.3;
    flex-direction: row; text-align: end;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .breadcrumb span {
    color: #8088ad;
  }

  .search-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-filters-panel {
    grid-template-columns: 1fr;
  }

  .search-result-badges {
    justify-content: flex-start;
  }
}

/* ── Calendrier général (toutes classes) — see renderGlobalCalendar() ── */
.global-cal-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}

/* Legend / isolate filter — see renderGlobalCalendarLegend(). Doubles as the
   classe name key now that pills/cartes only show color + n° séance. */
.global-cal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.global-cal-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.65rem 0.25rem 0.4rem;
  background: var(--surface);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: opacity 0.12s ease;
}

.global-cal-legend__item.is-dimmed {
  opacity: 0.4;
}

.global-cal-legend__swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.global-cal-legend__reset {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.25rem 0;
}

.global-cal-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.global-cal-label {
  font-weight: 600;
  min-width: 10rem;
  text-align: center;
}

.global-cal-month__headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.global-cal-month__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.global-cal-cell {
  background: var(--surface);
  min-height: 6rem;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.global-cal-cell.is-other-month {
  background: var(--bg);
  color: var(--muted);
}

.global-cal-cell.is-today .global-cal-cell__date {
  background: var(--accent);
  color: #fff;
}

.global-cal-cell__date {
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 600;
}

.global-cal-cell__entries {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.global-cal-cell.is-holiday {
  background: repeating-linear-gradient(
    135deg,
    rgba(17, 24, 39, 0.035),
    rgba(17, 24, 39, 0.035) 6px,
    transparent 6px,
    transparent 12px
  );
}

.global-cal-cell__holiday {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-cal-pill {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  border: none;
  border-radius: 0.4rem;
  padding: 0.15rem 0.4rem;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.global-cal-pill__seance {
  opacity: 0.85;
  font-weight: 400;
  flex: 0 0 auto;
}

.global-cal-pill.is-cancelled {
  opacity: 0.55;
  text-decoration: line-through;
}

.global-cal-pill.is-postponed {
  outline: 2px dashed rgba(255, 255, 255, 0.6);
  outline-offset: -2px;
}

/* Week view — see renderGlobalCalendarWeekEntry(): time/classe/chapitre
   header, then the séance's actual content (répartition bar + item list). */
.global-cal-entry {
  border: 2px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  background: var(--surface);
}

.global-cal-entry.is-cancelled {
  opacity: 0.6;
  cursor: default;
  background: var(--bg);
}

.global-cal-entry.is-cancelled .global-cal-entry__empty {
  text-decoration: line-through;
}

.global-cal-entry.is-postponed {
  border-left-style: dashed;
}

.global-cal-entry__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.global-cal-entry__time {
  color: var(--muted);
  flex: 0 0 auto;
}

.global-cal-entry__seance {
  font-weight: 700;
  flex: 0 0 auto;
}

.global-cal-entry__chapter {
  margin-top: 0.15rem;
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-cal-entry__chapter small {
  font-weight: 400;
  color: var(--muted);
}

.global-cal-entry__body {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.global-cal-entry__bar {
  width: 0.4rem;
  min-height: 2rem;
  border-radius: 0.2rem;
  overflow: hidden;
  flex: 0 0 auto;
}

.global-cal-entry__items {
  font-size: 0.78rem;
  line-height: 1.4;
}

.global-cal-entry__sep {
  color: var(--muted);
  margin: 0 0.15rem;
}

.global-cal-entry__empty {
  color: var(--muted);
  font-style: italic;
}

.global-cal-day-col {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.global-cal-day-col.is-today {
  border-color: var(--accent);
}

.global-cal-day-col.is-holiday {
  background: repeating-linear-gradient(
    135deg,
    rgba(17, 24, 39, 0.035),
    rgba(17, 24, 39, 0.035) 6px,
    transparent 6px,
    transparent 12px
  );
}

.global-cal-day-col__holiday {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.global-cal-day-col__header {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: capitalize;
}

/* Week view hourly grid (8h–18h) — see renderGlobalCalendarWeek() /
   computeEntryTimePosition(). .global-cal-day-col supplies the border/
   padding/is-today/is-holiday look; these add the fixed-height, positioned
   layout specific to the grid. */
.global-cal-timegrid {
  display: flex;
  gap: 0.5rem;
}

.global-cal-timegrid__axis {
  position: relative;
  width: 2.4rem;
  flex: 0 0 auto;
  height: 42rem;
  margin-top: 2.1rem; /* aligns with .global-cal-timegrid__day-body, below each day's header */
}

.global-cal-timegrid__hour {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-0.6em);
  font-size: 0.72rem;
  color: var(--muted);
  text-align: right;
  padding-right: 0.3rem;
}

.global-cal-timegrid__days {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.global-cal-timegrid__day {
  height: 42rem;
  padding: 0.5rem;
}

.global-cal-timegrid__day-body {
  position: relative;
  height: 40rem;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--border) 0,
    var(--border) 1px,
    transparent 1px,
    transparent calc(100% / 10)
  );
}

.global-cal-entry--timed {
  position: absolute;
  left: 0.15rem;
  right: 0.15rem;
  overflow: hidden;
  padding: 0.2rem 0.35rem;
  font-size: 0.68rem;
}

.global-cal-entry--timed .global-cal-entry__head {
  font-size: 0.68rem;
  gap: 0.3rem;
}

.global-cal-entry--timed .global-cal-entry__chapter {
  margin-top: 0.05rem;
  font-size: 0.72rem;
}

.global-cal-entry--timed .global-cal-entry__items {
  font-size: 0.68rem;
}

/* Hover expands a créneau's box to its full content instead of the clipped
   sliver its real duration would otherwise give it — height:auto overrides
   the inline top/height from computeEntryTimePosition (needs !important:
   inline style otherwise always wins over a class). Grows downward from the
   same top, overlaid above neighbours via z-index since nothing here has
   overflow:hidden on an ancestor to clip it. */
.global-cal-entry--timed:hover {
  height: auto !important;
  min-height: 100%;
  z-index: 30;
  overflow: visible;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
  font-size: 0.78rem;
}

.global-cal-entry--timed:hover .global-cal-entry__head {
  font-size: 0.78rem;
}

.global-cal-entry--timed:hover .global-cal-entry__chapter {
  font-size: 0.85rem;
  white-space: normal;
}

.global-cal-entry--timed:hover .global-cal-entry__items {
  font-size: 0.78rem;
}

@media (max-width: 700px) {
  .global-cal-timegrid__axis {
    display: none;
  }

  .global-cal-timegrid__days {
    grid-template-columns: 1fr;
  }
}

/* ── Pied de page ── */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 4rem;
  padding: 3rem 3rem 2rem;
  background: var(--header-bg);
  color: var(--header-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.site-footer__col {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.site-footer__col p {
  margin: 0;
}

.site-footer__col-title {
  font-family: "Gabarito", "Segoe UI", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--header-text);
}

.site-footer a {
  color: var(--header-muted);
  text-decoration: none;
  width: fit-content;
}

.site-footer a:hover {
  color: var(--header-text);
  text-decoration: underline;
}

.site-footer__back {
  font-weight: 600;
  color: var(--header-text) !important;
}

.site-footer__col--daily {
  gap: 0.5rem;
}

.site-footer__daily-title {
  font-weight: 600;
  color: var(--header-text) !important;
}

.site-footer__daily-def {
  margin: 0;
  color: var(--header-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.site-footer__daily-image-link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.site-footer__daily-image {
  height: 6rem;
  object-fit: cover;
  border-radius: 0.6rem;
  border: 1px solid var(--header-border);
}

.site-footer__col--license {
  flex: 1 1 280px;
  font-size: 0.78rem;
}

.site-footer__cc-logo {
  width: 125px;
  max-width: 100%;
}

@media (max-width: 640px) {
  .site-footer {
    padding: 2.25rem 1.5rem 1.75rem;
  }
}