/* ==========================================================================
   Dón — Thème Bootstrap 5.3
   Surcharge de variables + composants. Charger APRÈS bootstrap.min.css.
   Modes : [data-bs-theme="dark"] (défaut produit) et "light".

   Les VALEURS de marque ne sont pas ici : elles vivent dans `don-tokens.css`,
   relevées pixel par pixel dans le logotype. Ce fichier n'en fait que des
   RÔLES. Recopier un hexadécimal ici ferait deux sources pour une seule
   couleur, et l'une des deux finirait par mentir.
   ========================================================================== */

@import url('don-tokens.css');
/* Les polices sont SERVIES PAR L'INSTANCE (`static/vendor/fonts/`), pas par
   Google : une école sans internet garde sa typographie. */
@import url('../vendor/fonts/space-grotesk.css');
@import url('../vendor/fonts/ibm-plex-sans.css');
@import url('../vendor/fonts/ibm-plex-mono.css');

/* --- Rôles de couleur ----------------------------------------------------
   Le kit Dón nomme le violet « accent » et la menthe « accent calme ».
   Dans un back-office, la couleur PRIMAIRE n'est pas un accent : elle porte
   chaque bouton, chaque lien, chaque état actif de la barre latérale. C'est
   donc le violet qui la tient, et la menthe reste ce qu'elle est dans le
   logo — ce qui attire l'œil, en petite quantité.

   L'autre raison est lisible à l'écran : avec un primaire orange, l'ambre
   d'alerte et le rouge de danger deviennent trois teintes voisines pour trois
   rôles différents. Un impayé ne doit pas ressembler à un bouton.
   ------------------------------------------------------------------------- */
:root {
  --sk-primaire:      var(--don-violet);
  --sk-primaire-600:  var(--don-violet-800);
  --sk-primaire-400:  var(--don-violet-400);
  --sk-primaire-100:  var(--don-violet-100);
  --sk-accent:        var(--don-menthe);
  --sk-prune:         var(--don-violet-fonce);

  /* Alias historiques. Les noms disent une teinte, ils désignent un rôle :
     le reste de la feuille et quelques gabarits les citent (`sk-badge--violet`).
     Ils suivent le primaire, y compris quand une école le repeint. */
  --sk-violet:        var(--sk-primaire);
  --sk-violet-600:    var(--sk-primaire-600);
  --sk-violet-400:    var(--sk-primaire-400);
  --sk-violet-100:    var(--sk-primaire-100);

  /* AJOUTS au kit, et il faut le savoir : la palette Dón ne porte ni vert ni
     rouge, alors que le produit doit dire payé/impayé et admis/redouble.
     Ces trois-là sont dérivés — désaturés pour tenir à côté de l'orange sans
     le concurrencer, et assez éloignés en teinte pour ne pas se confondre
     entre eux. */
  --sk-mint:          #4E9070;
  --sk-amber:         #D9A441;
  --sk-coral:         #C0453C;
  --sk-sky:           var(--don-violet-fonce);

  --sk-font-display: 'Space Grotesk', system-ui, sans-serif;
  --sk-font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --sk-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --sk-radius-sm: 8px;
  --sk-radius:    12px;
  --sk-radius-lg: 16px;

  --sk-sidebar-w:  248px;
  --sk-topbar-h:   60px;

  /* Bootstrap */
  /* Bootstrap veut des triplets RVB séparés pour ses opacités : ils ne
     peuvent pas être un `var()`. Ce sont les seuls hexadécimaux recopiés du
     fichier de jetons, et ils doivent le suivre. */
  --bs-primary: var(--sk-primaire);
  --bs-primary-rgb: 108, 92, 231;      /* --don-violet #6C5CE7 */
  --bs-success: var(--sk-mint);
  --bs-success-rgb: 78, 144, 112;     /* --sk-mint    #4E9070 */
  --bs-warning: var(--sk-amber);
  --bs-warning-rgb: 217, 164, 65;     /* --sk-amber   #D9A441 */
  --bs-danger: var(--sk-coral);
  --bs-danger-rgb: 192, 69, 60;       /* --sk-coral   #C0453C */
  --bs-info: var(--sk-prune);
  --bs-info-rgb: 87, 71, 196;       /* --don-violet-fonce #5747C4 */
  --bs-body-font-family: var(--sk-font-body);
  --bs-body-font-size: 0.9375rem;
  --bs-border-radius: var(--sk-radius);
  --bs-border-radius-sm: var(--sk-radius-sm);
  --bs-border-radius-lg: var(--sk-radius-lg);
  --bs-link-color: var(--sk-primaire);
  --bs-link-hover-color: var(--sk-primaire-600);
}

/* --- Sombre (défaut) ----------------------------------------------------- */
[data-bs-theme="dark"] {
  --sk-bg:        var(--don-fond-nuit);
  --sk-surface:   var(--don-surface-nuit);
  --sk-surface-2: #2C2F3F;
  --sk-border:    #33364A;
  --sk-border-2:  #414560;
  --sk-text:      var(--don-texte-nuit);
  --sk-text-dim:  #9A9CAB;
  --sk-text-mute: #74768A;
  --sk-violet-soft: rgba(64, 92, 114, .28);
  --sk-mint-soft:   rgba(78, 144, 112, .20);
  --sk-amber-soft:  rgba(217, 164, 65, .18);
  --sk-coral-soft:  rgba(192, 69, 60, .20);
  --sk-shadow: 0 8px 24px rgba(0, 0, 0, .35);

  /* Le PRIMAIRE ne change pas la nuit : un bouton plein en bleu clair reçoit
     du texte clair de Bootstrap, et ne se lit plus. C'est le LIEN seul qui
     s'éclaircit, parce que lui est du texte sur le fond de la page. */
  --bs-link-color: var(--don-violet-300);
  --bs-link-hover-color: var(--don-violet-200);

  --bs-body-bg: var(--don-fond-nuit);
  --bs-body-color: var(--don-texte-nuit);
  --bs-secondary-color: #9A9CAB;
  --bs-tertiary-color: #74768A;
  --bs-border-color: #33364A;
  --bs-emphasis-color: #FFFFFF;
  color-scheme: dark;
}

/* --- Clair --------------------------------------------------------------- */
[data-bs-theme="light"] {
  --sk-bg:        var(--don-fond);
  --sk-surface:   var(--don-surface);
  --sk-surface-2: #F1F1F3;
  --sk-border:    var(--don-bord);
  --sk-border-2:  #D2D2D6;
  --sk-text:      var(--don-texte);
  --sk-text-dim:  var(--don-texte-faible);
  --sk-text-mute: #8A8A8A;
  --sk-violet-soft: #E3EAF0;
  --sk-mint-soft:   #E4F0EA;
  --sk-amber-soft:  #FAF0DC;
  --sk-coral-soft:  #F8E5E3;
  --sk-shadow: 0 6px 18px rgba(26, 26, 26, .08);

  --bs-body-bg: var(--don-fond);
  --bs-body-color: var(--don-texte);
  --bs-secondary-color: var(--don-texte-faible);
  --bs-tertiary-color: #8A8A8A;
  --bs-border-color: var(--don-bord);
  --bs-emphasis-color: #000000;
  color-scheme: light;
}

body { font-family: var(--sk-font-body); background: var(--sk-bg); color: var(--sk-text); }

/* --- Typographie --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .sk-display {
  font-family: var(--sk-font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--sk-text);
}
/* Le crénage serré des chiffres d'affichage avale l'espace des milliers :
   on la rétablit au mot, sans toucher au crénage des lettres. */
.sk-page-title  { font-size: 1.5rem; margin: 0; word-spacing: .06em; }
.sk-section-title { font-family: var(--sk-font-display); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; margin: 0; }
.sk-eyebrow {
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sk-text-mute);
}
.sk-num { font-family: var(--sk-font-display); font-weight: 700; letter-spacing: -.02em; word-spacing: .18em; font-variant-numeric: tabular-nums; }
.sk-mono { font-family: var(--sk-font-mono); font-variant-numeric: tabular-nums; }
.sk-muted { color: var(--sk-text-mute); }
.sk-dim   { color: var(--sk-text-dim); }

/* --- Coquille applicative ------------------------------------------------ */
.sk-shell { display: flex; min-height: 100vh; }

.sk-sidebar {
  width: var(--sk-sidebar-w); flex: 0 0 var(--sk-sidebar-w);
  background: var(--sk-surface); border-right: 1px solid var(--sk-border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sk-sidebar__brand {
  height: var(--sk-topbar-h); display: flex; align-items: center; gap: 10px;
  padding: 0 18px; border-bottom: 1px solid var(--sk-border); flex: 0 0 auto;
}
/* Le signe du produit. C'était un carré dessiné en CSS, faute de logo ; il y
   en a un maintenant, et un signe redessiné à la main finirait par ne plus
   ressembler à celui des magasins et des documents. */
.sk-logo {
  width: 28px; height: 28px; flex: 0 0 28px;
  background: url('../img/don-mark-dark-ui.svg') center / contain no-repeat;
}
[data-bs-theme="light"] .sk-logo { background-image: url('../img/don-mark-mono-dark.svg'); }
.sk-logo--lg { width: 44px; height: 44px; flex-basis: 44px; }
.sk-wordmark { font-family: var(--sk-font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.03em; color: var(--sk-text); }

.sk-nav { flex: 1 1 auto; overflow-y: auto; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.sk-nav__group { padding: 16px 10px 6px; }
.sk-nav__link {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px;
  border-radius: var(--sk-radius-sm); color: var(--sk-text-mute);
  font-size: .875rem; font-weight: 500; text-decoration: none; line-height: 1.3;
  transition: background .13s ease, color .13s ease;
}
.sk-nav__link i { font-size: 1.0625rem; line-height: 1; flex: 0 0 auto; }
.sk-nav__link:hover { background: var(--sk-surface-2); color: var(--sk-text); }
.sk-nav__link.active { background: var(--sk-violet-soft); color: var(--sk-violet-400); font-weight: 600; }
[data-bs-theme="light"] .sk-nav__link.active { color: var(--sk-violet-600); }
.sk-nav__badge {
  margin-left: auto; background: var(--sk-coral-soft); color: var(--sk-coral);
  font-size: .6875rem; font-weight: 600; padding: 1px 7px; border-radius: 999px;
}
.sk-sidebar__foot { flex: 0 0 auto; border-top: 1px solid var(--sk-border); padding: 12px; }

.sk-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sk-topbar {
  height: var(--sk-topbar-h); flex: 0 0 auto; position: sticky; top: 0; z-index: 1020;
  background: var(--sk-surface); border-bottom: 1px solid var(--sk-border);
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
}
.sk-content { flex: 1 1 auto; padding: 26px 22px 48px; }
.sk-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }

.sk-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  background: var(--sk-violet-soft); color: var(--sk-violet-400);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sk-font-display); font-weight: 700; font-size: .75rem;
}
[data-bs-theme="light"] .sk-avatar { color: var(--sk-violet-600); }
.sk-avatar--sm { width: 28px; height: 28px; flex-basis: 28px; font-size: .6875rem; }
.sk-avatar--lg { width: 56px; height: 56px; flex-basis: 56px; font-size: 1.1875rem; }
/* La vignette d'une photo : même rond, l'image recadrée dedans. */
img.sk-avatar { object-fit: cover; display: block; border: 1px solid var(--sk-border); }

/* --- Cartes -------------------------------------------------------------- */
.sk-card {
  background: var(--sk-surface); border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius); overflow: hidden;
}
.sk-card__head {
  padding: 14px 18px; border-bottom: 1px solid var(--sk-border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sk-card__body { padding: 18px; }
.sk-card__foot { padding: 12px 18px; border-top: 1px solid var(--sk-border); background: var(--sk-surface-2); }

.sk-stat { background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); padding: 16px 18px; height: 100%; }
.sk-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sk-stat__icon {
  width: 32px; height: 32px; border-radius: var(--sk-radius-sm); flex: 0 0 32px;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  background: var(--sk-violet-soft); color: var(--sk-violet-400);
}
[data-bs-theme="light"] .sk-stat__icon { color: var(--sk-violet-600); }
.sk-stat__icon--mint  { background: var(--sk-mint-soft);  color: var(--sk-mint); }
.sk-stat__icon--amber { background: var(--sk-amber-soft); color: var(--sk-amber); }
.sk-stat__icon--coral { background: var(--sk-coral-soft); color: var(--sk-coral); }
.sk-stat__icon--prune { background: color-mix(in srgb, var(--sk-prune) 22%, transparent); color: var(--sk-prune); }
[data-bs-theme="dark"] .sk-stat__icon--prune { color: color-mix(in srgb, var(--sk-prune) 45%, #fff); }
/* Une rangée de cinq cartes : le chiffre se resserre avec la colonne plutôt
   que de déborder (« 12 345 678 F » dans un cinquième d'écran). */
/* Le chiffre se règle sur la LARGEUR DE LA CARTE, pas sur celle de l'écran :
   cinq cartes sur une ligne, « 14 235 000 F » doit tenir entier, sans points
   de suspension qui cacheraient justement le montant. */
.sk-stats-rang .sk-stat { container-type: inline-size; }
.sk-stats-rang .sk-stat__value { font-size: clamp(1rem, 11.5cqi, 1.75rem); white-space: nowrap; }
/* L'icône d'un chiffre posé dans une carte (et non d'une carte à elle seule). */
.sk-stat__icon--petite { width: 24px; height: 24px; flex-basis: 24px; font-size: .8rem; }
/* Le libellé passe à la ligne plutôt que d'être coupé : « Taux de recouvrement »
   se lit en entier. */
.sk-stats-rang .sk-eyebrow { min-width: 0; white-space: normal; line-height: 1.35; }
.sk-stat__value { font-family: var(--sk-font-display); font-weight: 700; font-size: 1.75rem; letter-spacing: -.03em; word-spacing: .2em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sk-stat__delta { font-size: .8125rem; font-weight: 500; display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.sk-stat__delta--up   { color: var(--sk-mint); }
.sk-stat__delta--down { color: var(--sk-coral); }

/* --- Boutons ------------------------------------------------------------- */
.btn { font-weight: 600; font-size: .875rem; border-radius: var(--sk-radius-sm); padding: .5rem .95rem; }
.btn-sm { font-size: .8125rem; padding: .35rem .7rem; }
.btn-lg { font-size: .9375rem; padding: .7rem 1.2rem; }
.btn-primary { --bs-btn-bg: var(--sk-violet); --bs-btn-border-color: var(--sk-violet); --bs-btn-hover-bg: var(--sk-violet-600); --bs-btn-hover-border-color: var(--sk-violet-600); --bs-btn-active-bg: var(--sk-violet-600); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-disabled-bg: var(--sk-violet); --bs-btn-disabled-border-color: var(--sk-violet); }
.btn-outline-primary { --bs-btn-color: var(--sk-violet-400); --bs-btn-border-color: var(--sk-border-2); --bs-btn-hover-bg: var(--sk-violet-soft); --bs-btn-hover-border-color: var(--sk-violet); --bs-btn-hover-color: var(--sk-violet-400); }
[data-bs-theme="light"] .btn-outline-primary { --bs-btn-color: var(--sk-violet-600); --bs-btn-hover-color: var(--sk-violet-600); }
.sk-btn-ghost {
  background: transparent; border: 1px solid transparent; color: var(--sk-text-mute);
  font-weight: 500; border-radius: var(--sk-radius-sm);
}
.sk-btn-ghost:hover { background: var(--sk-surface-2); color: var(--sk-text); }
.sk-btn-icon {
  width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--sk-radius-sm); border: 1px solid var(--sk-border);
  background: transparent; color: var(--sk-text-dim); font-size: 1.0625rem;
}
.sk-btn-icon:hover { background: var(--sk-surface-2); color: var(--sk-text); }

/* --- Formulaires --------------------------------------------------------- */
.form-label { font-size: .8125rem; font-weight: 600; color: var(--sk-text-dim); margin-bottom: .375rem; }
.form-control, .form-select {
  background: var(--sk-surface-2); border: 1px solid var(--sk-border-2); color: var(--sk-text);
  border-radius: var(--sk-radius-sm); padding: .5rem .75rem; font-size: .875rem;
}
.form-control::placeholder { color: var(--sk-text-mute); }
.form-control:focus, .form-select:focus {
  background: var(--sk-surface-2); color: var(--sk-text);
  border-color: var(--sk-violet); box-shadow: 0 0 0 3px var(--sk-violet-soft);
}
.form-text { color: var(--sk-text-mute); font-size: .8125rem; }
.input-group-text { background: var(--sk-surface-2); border-color: var(--sk-border-2); color: var(--sk-text-mute); border-radius: var(--sk-radius-sm); }
.form-check-input { background-color: var(--sk-surface-2); border-color: var(--sk-border-2); }
.form-check-input:checked { background-color: var(--sk-violet); border-color: var(--sk-violet); }
.form-check-input:focus { border-color: var(--sk-violet); box-shadow: 0 0 0 3px var(--sk-violet-soft); }
.form-check-label { font-size: .875rem; color: var(--sk-text-dim); }
.form-control.is-invalid { border-color: var(--sk-coral); }
.invalid-feedback { color: var(--sk-coral); font-size: .8125rem; }

/* --- Badges & pastilles -------------------------------------------------- */
.sk-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.5;
  background: var(--sk-surface-2); color: var(--sk-text-dim);
}
.sk-badge--mint   { background: var(--sk-mint-soft);   color: var(--sk-mint); }
.sk-badge--coral  { background: var(--sk-coral-soft);  color: var(--sk-coral); }
.sk-badge--violet { background: var(--sk-violet-soft); color: var(--sk-violet-400); }
[data-bs-theme="light"] .sk-badge--violet { color: var(--sk-violet-600); }
.sk-badge--amber  { background: var(--sk-amber-soft);  color: #A9762A; }
[data-bs-theme="dark"] .sk-badge--amber { color: var(--sk-amber); }
.sk-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: currentColor; }

/* --- Tables -------------------------------------------------------------- */
.sk-table-wrap { border: 1px solid var(--sk-border); border-radius: var(--sk-radius); overflow: hidden; background: var(--sk-surface); }
.sk-table { width: 100%; margin: 0; border-collapse: collapse; }
.sk-table thead th {
  background: var(--sk-surface-2); border-bottom: 1px solid var(--sk-border);
  padding: 10px 16px; text-align: left; white-space: nowrap;
  font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--sk-text-mute);
}
.sk-table tbody td { padding: 12px 16px; border-top: 1px solid var(--sk-border); font-size: .875rem; color: var(--sk-text-dim); vertical-align: middle; }
.sk-table tbody tr:hover td { background: var(--sk-surface-2); }
.sk-table__strong { color: var(--sk-text); font-weight: 600; }
.sk-table__num { font-family: var(--sk-font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sk-table-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--sk-border); }

/* --- Onglets ------------------------------------------------------------- */
.sk-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sk-border); margin-bottom: 20px; }
.sk-tabs__item {
  padding: 9px 14px; font-size: .875rem; font-weight: 500; color: var(--sk-text-mute);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sk-tabs__item:hover { color: var(--sk-text); }
.sk-tabs__item.active { color: var(--sk-violet-400); border-bottom-color: var(--sk-violet); font-weight: 600; }
[data-bs-theme="light"] .sk-tabs__item.active { color: var(--sk-violet-600); }

/* --- Modals, dropdowns, alertes ----------------------------------------- */
.modal-content { background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); }
.modal-header, .modal-footer { border-color: var(--sk-border); padding: 16px 20px; }
.modal-body { padding: 20px; }
.modal-title { font-family: var(--sk-font-display); font-weight: 600; font-size: 1.0625rem; }
.dropdown-menu {
  background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius);
  box-shadow: var(--sk-shadow); padding: 6px; font-size: .875rem;
}
.dropdown-item { border-radius: var(--sk-radius-sm); color: var(--sk-text-dim); padding: 7px 10px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--sk-surface-2); color: var(--sk-text); }
.dropdown-divider { border-color: var(--sk-border); }
/* Le menu « Créer » : un groupe par colonne, trois colonnes de front sur un
   écran de bureau, deux sur une tablette, une seule — qui défile — sur un
   téléphone. Une seule colonne de vingt entrées dépasse l'écran. */
.sk-menu-creation.show {
  display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 6px 14px;
  width: max-content; max-width: calc(100vw - 32px);
  padding: 10px; max-height: calc(100vh - var(--sk-topbar-h) - 16px); overflow-y: auto;
}
.sk-menu-creation__groupe { min-width: 0; }
.sk-menu-creation .dropdown-header { padding: 6px 10px 4px; }
.sk-menu-creation .dropdown-item { white-space: nowrap; }
@media (max-width: 991.98px) { .sk-menu-creation { grid-template-columns: repeat(2, minmax(170px, 1fr)); } }
@media (max-width: 575.98px) { .sk-menu-creation { grid-template-columns: 1fr; } }
.sk-alert {
  display: flex; gap: 11px; padding: 13px 15px; border-radius: var(--sk-radius);
  font-size: .875rem; border: 1px solid transparent; align-items: flex-start;
}
.sk-alert i { font-size: 1.0625rem; line-height: 1.3; flex: 0 0 auto; }
.sk-alert--mint  { background: var(--sk-mint-soft);   border-color: rgba(63,191,160,.3);  color: var(--sk-mint); }
.sk-alert--amber { background: var(--sk-amber-soft);  border-color: rgba(232,176,75,.3);  color: #A9762A; }
[data-bs-theme="dark"] .sk-alert--amber { color: var(--sk-amber); }
.sk-alert--coral { background: var(--sk-coral-soft);  border-color: rgba(231,111,81,.3);  color: var(--sk-coral); }
.sk-alert--violet{ background: var(--sk-violet-soft); border-color: rgba(108,92,231,.3);  color: var(--sk-violet-400); }
[data-bs-theme="light"] .sk-alert--violet { color: var(--sk-violet-600); }

/* --- Divers -------------------------------------------------------------- */
.sk-empty { text-align: center; padding: 56px 24px; color: var(--sk-text-mute); }
.sk-empty__icon { font-size: 2rem; color: var(--sk-border-2); margin-bottom: 12px; }
.sk-progress { height: 6px; background: var(--sk-surface-2); border-radius: 999px; overflow: hidden; }
.sk-progress__bar { height: 100%; border-radius: 999px; background: var(--sk-violet); }
.sk-progress__bar--mint { background: var(--sk-mint); }
.sk-divider { height: 1px; background: var(--sk-border); border: 0; margin: 20px 0; }
.sk-skeleton { background: var(--sk-surface-2); border-radius: var(--sk-radius-sm); animation: sk-pulse 1.4s ease-in-out infinite; }
@keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* --- Authentification --------------------------------------------------- */
.sk-auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.sk-auth__aside { background: var(--sk-surface); border-right: 1px solid var(--sk-border); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.sk-auth__form { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.sk-auth__inner { width: 100%; max-width: 380px; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 991.98px) {
  .sk-auth { grid-template-columns: 1fr; }
  .sk-auth__aside { display: none; }
  .sk-sidebar { position: fixed; z-index: 1045; transform: translateX(-100%); transition: transform .2s ease; }
  .sk-sidebar.is-open { transform: none; }
  .sk-content { padding: 20px 16px 40px; }
}


/* --- Livraison 2 : composants de listes et de fiches --------------------- */
.sk-breadcrumb {
  display: flex; align-items: center; gap: 7px; margin-bottom: 12px;
  font-size: .8125rem; color: var(--sk-text-mute);
}
.sk-breadcrumb a { color: var(--sk-text-mute); text-decoration: none; }
.sk-breadcrumb a:hover { color: var(--sk-text); }
.sk-breadcrumb i { font-size: .625rem; }

.sk-search { position: relative; display: flex; align-items: center; }
.sk-search > i {
  position: absolute; left: 10px; font-size: .8125rem; color: var(--sk-text-mute); pointer-events: none;
}
.sk-search .form-control { padding-left: 30px; }

.sk-pills { display: flex; gap: 4px; }
.sk-pill {
  padding: 5px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 500;
  color: var(--sk-text-mute); text-decoration: none;
}
.sk-pill:hover { background: var(--sk-surface-2); color: var(--sk-text); }
.sk-pill.active { background: var(--sk-violet-soft); color: var(--sk-violet-400); font-weight: 600; }
[data-bs-theme="light"] .sk-pill.active { color: var(--sk-violet-600); }

.sk-card--active { border-color: var(--sk-violet); }
.sk-card a.sk-card, a.sk-card { color: inherit; }
a.sk-card:hover { border-color: var(--sk-border-2); }

.sk-progress__bar--amber { background: var(--sk-amber); }
.sk-progress__bar--coral { background: var(--sk-coral); }

.sk-field-error { font-size: .8125rem; color: var(--sk-coral); margin-top: 4px; }

/* Registre d'appel */
.sk-roll-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--sk-border); border-radius: 10px;
}
.sk-roll-row--absent { border-color: rgba(231,111,81,.3); background: rgba(231,111,81,.07); }
.sk-seg { display: flex; gap: 4px; }
.sk-seg__opt {
  padding: 4px 12px; border-radius: var(--sk-radius-sm); cursor: pointer;
  font-size: .8125rem; font-weight: 500; color: var(--sk-text-mute);
}
.sk-seg__opt:hover { background: var(--sk-surface-2); color: var(--sk-text); }
.sk-seg__opt.active { font-weight: 600; }
.sk-seg__opt.active--mint  { background: var(--sk-mint-soft);  color: var(--sk-mint); }
.sk-seg__opt.active--amber { background: var(--sk-amber-soft); color: var(--sk-amber); }
.sk-seg__opt.active--coral { background: var(--sk-coral-soft); color: var(--sk-coral); }

/* Puce de date des devoirs */
.sk-datechip {
  width: 38px; flex: 0 0 38px; text-align: center; padding: 5px 0;
  border-radius: 9px; background: var(--sk-surface-2);
}
.sk-datechip__m { display: block; font-size: .6875rem; color: var(--sk-text-mute); }
.sk-datechip__d { display: block; font-family: var(--sk-font-display); font-weight: 700; font-size: .9375rem; color: var(--sk-text); }

.sk-label { display: block; font-size: .8125rem; font-weight: 600; color: var(--sk-text-dim); margin-bottom: 6px; }

/* --- Livraison 3 : emploi du temps --------------------------------------- */
/* Une colonne par jour, les cours empilés dans l'ordre. Une vraie grille
   horaire (lignes = heures) supposerait des créneaux réguliers ; ils ne le
   sont pas d'un établissement à l'autre. */
.sk-semaine {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
}
.sk-jour {
  background: var(--sk-surface); border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius); overflow: hidden; display: flex; flex-direction: column;
}
.sk-jour__tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  padding: 9px 10px; border-bottom: 1px solid var(--sk-border);
  background: var(--sk-surface-2);
  font-size: .6875rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--sk-text-dim);
  white-space: nowrap; overflow: hidden;
}
.sk-jour__tete > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.sk-jour__corps { padding: 8px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.sk-jour__vide { text-align: center; color: var(--sk-border-2); padding: 14px 0; }

.sk-creneau {
  position: relative; padding: 9px 10px; border-radius: var(--sk-radius-sm);
  background: var(--sk-violet-soft); border: 1px solid transparent;
}
.sk-creneau:hover { border-color: var(--sk-violet); }
.sk-creneau__heure { font-size: .6875rem; color: var(--sk-violet-400); font-weight: 600; }
[data-bs-theme="light"] .sk-creneau__heure { color: var(--sk-violet-600); }
.sk-creneau__matiere { font-size: .8125rem; font-weight: 600; color: var(--sk-text); margin-top: 2px; }
.sk-creneau__prof { font-size: .6875rem; color: var(--sk-text-mute); margin-top: 1px; }
.sk-creneau__salle { font-size: .6875rem; color: var(--sk-text-mute); }
.sk-creneau__suppr { position: absolute; top: 4px; right: 4px; opacity: 0; transition: opacity .12s; }
.sk-creneau:hover .sk-creneau__suppr { opacity: 1; }
.sk-creneau__suppr .sk-btn-icon { width: 22px; height: 22px; font-size: .75rem; }

@media (max-width: 1199.98px) {
  .sk-semaine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .sk-semaine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Syllabus : sections et sous-sections d'un chapitre. */
.sk-section-bloc {
  border: 1px solid var(--sk-border); border-radius: var(--sk-radius-sm);
  padding: 12px 14px; background: var(--sk-surface-2);
}
.sk-sous-sections { list-style: none; margin: 10px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--sk-border-2); }
.sk-sous-sections li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .8125rem; color: var(--sk-text-dim); padding: 3px 0;
}
.sk-sous-sections li .sk-btn-icon { width: 22px; height: 22px; font-size: .75rem; }

/* Fil de notifications. */
.sk-notif {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--sk-border);
}
.sk-notif:last-child { border-bottom: 0; }
.sk-notif--nonlue { position: relative; padding-left: 12px; }
.sk-notif--nonlue::before {
  content: ""; position: absolute; left: 0; top: 22px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sk-violet);
}

/* --- Pages d'erreur ------------------------------------------------------ */
.sk-erreur {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 32px 20px; background: var(--sk-bg);
}
.sk-erreur__carte {
  width: 100%; max-width: 460px; padding: 32px;
  background: var(--sk-surface); border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-lg);
}
.sk-erreur__code {
  font-family: var(--sk-font-display); font-weight: 700; font-size: 2.75rem;
  letter-spacing: -.04em; color: var(--sk-violet-400); line-height: 1;
}
[data-bs-theme="light"] .sk-erreur__code { color: var(--sk-violet-600); }

/* --- Tableau de configuration -------------------------------------------- */
.sk-etape {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--sk-border);
}
.sk-etape:last-child { border-bottom: 0; }
.sk-etape__puce {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .8125rem;
  background: var(--sk-surface-2); color: var(--sk-text-mute);
  border: 1px solid var(--sk-border-2);
}
.sk-etape--faite .sk-etape__puce {
  background: var(--sk-mint-soft); color: var(--sk-mint); border-color: transparent;
}
.sk-etape--bloquee { opacity: .6; }

/* Logo téléversé par l'établissement (marque blanche). Le `.sk-logo` par
   défaut porte le signe du produit en image de fond ; quand une image le
   remplace, il faut annuler ce fond, sinon les deux se superposent. */
.sk-logo--image { background: none; object-fit: contain; padding: 0; }

/* --- Sélecteur de position sur carte ------------------------------------- */
.sk-carte {
  height: 320px; width: 100%;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  background: var(--sk-surface-2);
  margin-bottom: .5rem;
  z-index: 0;               /* sous les dropdowns de la barre supérieure */
}
.sk-carte--absente {
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--sk-text-mute); font-size: .8125rem; line-height: 1.5;
}
/* Les fonds DESSINÉS (plan, relief) sont clairs par nature : en thème sombre,
   les inverser évite un rectangle éblouissant au milieu d'un formulaire. Le
   satellite ne porte pas cette classe — inverser une photo aérienne en ferait
   un négatif où plus personne ne reconnaît sa cour. */
[data-bs-theme="dark"] .sk-carte .sk-carte__fond--clair {
  filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9);
}

/* Agrandie : le cadre de 320 px suffit pour viser, pas pour juger d'un rayon
   de cinquante mètres. En CSS et non via `requestFullscreen()`, qui est sous
   permission et se fait refuser. */
/* `!important` sur la seule position, et il est mérité : Leaflet écrit
   `position: relative` en style INLINE sur le conteneur de carte. Aucun
   sélecteur ne bat un style inline — sans ça la carte reste dans le flux et
   sa hauteur retombe à zéro, ce qui la fait purement disparaître. Les autres
   propriétés n'en ont pas besoin, Leaflet n'y touche pas. */
.sk-carte--plein {
  position: fixed !important; inset: 0; height: auto; width: auto; margin: 0;
  z-index: 2000; border: 0; border-radius: 0;
}
/* La page dessous ne défile plus : la molette appartient à la carte. */
body.sk-carte-ouverte { overflow: hidden; }
.sk-carte__agrandir a i { font-size: .8125rem; line-height: 30px; }

/* Sélecteur de fond et boutons de zoom : Leaflet les dessine en clair. */
.sk-carte .leaflet-bar a,
.sk-carte .leaflet-control-layers {
  background: var(--sk-surface); color: var(--sk-text);
  border-color: var(--sk-border-2);
}
.sk-carte .leaflet-bar a:hover { background: var(--sk-surface-2); color: var(--sk-text); }
.sk-carte .leaflet-control-layers-expanded { padding: 8px 12px 8px 8px; font-size: .8125rem; }
.sk-carte .leaflet-control-layers label { margin: 0; display: flex; align-items: center; gap: 6px; }
.sk-carte .leaflet-control-attribution {
  background: rgba(0,0,0,.45); color: var(--sk-text-mute); font-size: 10px;
}
.sk-carte .leaflet-control-attribution a { color: var(--sk-text-mute); }

.sk-carte__epingle span {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: var(--sk-violet); border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.5); cursor: grab;
}
.sk-carte__zone {
  stroke: var(--sk-violet); stroke-width: 2; stroke-opacity: .9;
  fill: var(--sk-violet); fill-opacity: .15;
}
.sk-carte__note--amber { color: var(--sk-amber) !important; }

/* La carte des séances : où l'on a pointé. Plein à l'ouverture, creux à la
   clôture ; menthe dans l'enceinte, corail dehors. */
.sk-carte__point--mint { stroke: var(--sk-mint); fill: var(--sk-mint); fill-opacity: .9; }
.sk-carte__point--coral { stroke: var(--sk-coral); fill: var(--sk-coral); fill-opacity: .9; }
.sk-carte__point--creux { fill-opacity: .15; }
.sk-carte__trajet { stroke: var(--sk-text-mute); stroke-width: 2; stroke-dasharray: 4 4; }
.sk-table__cliquable { cursor: pointer; }

/* --- Le filtre d'une colonne (js/tableau.js) : un clic sur le titre. -------- */
.sk-table thead th.sk-filtrable { cursor: pointer; user-select: none; }
.sk-table thead th.sk-filtrable:hover { color: var(--sk-text); }
.sk-table thead th.sk-filtre-actif::before { content: '● '; color: var(--sk-violet); }
.sk-table thead th.sk-tri-asc::after { content: ' ↑'; }
.sk-table thead th.sk-tri-desc::after { content: ' ↓'; }
.sk-filtre {
  position: fixed; z-index: 1050; min-width: 260px; max-width: 360px;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
  background: var(--sk-surface); border: 1px solid var(--sk-border-2); border-radius: var(--sk-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: .8125rem; color: var(--sk-text); cursor: default;
}
.sk-filtre__tris, .sk-filtre__pied { display: flex; gap: 6px; align-items: center; }
.sk-filtre__liste { max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.sk-filtre__valeur { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; margin: 0; }
.sk-filtre__valeur:hover { background: var(--sk-surface-2); }
.sk-filtre-note { font-size: .8125rem; padding: 6px 16px; min-height: 0; }
.sk-filtre-note:empty { display: none; }
.sk-table__eclairee > td { background: color-mix(in srgb, var(--sk-violet) 18%, transparent); }

/* --- L'emploi du temps en agenda (core/agenda.py, includes/agenda.html) ---
   Une grille horaire : les jours en colonnes, les heures en lignes, chaque
   créneau posé de son début à sa fin. La hauteur d'une heure est fixe ; le
   gabarit écrit `top` et `height` en pourcentage de la colonne. */
.sk-agenda { --sk-agenda-heure: 56px; }
.sk-agenda__barre {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.sk-agenda__vues { display: inline-flex; border: 1px solid var(--sk-border); border-radius: var(--sk-radius-sm); overflow: hidden; }
.sk-agenda__vue {
  padding: 5px 12px; font-size: .8125rem; font-weight: 600; color: var(--sk-text-dim);
  text-decoration: none; border-right: 1px solid var(--sk-border);
}
.sk-agenda__vue:last-child { border-right: 0; }
.sk-agenda__vue:hover { background: var(--sk-surface-2); color: var(--sk-text); }
.sk-agenda__vue.active { background: var(--sk-violet-soft); color: var(--sk-violet-400); }
[data-bs-theme="light"] .sk-agenda__vue.active { color: var(--sk-violet-600); }
.sk-agenda__periode { font-size: .875rem; font-weight: 600; color: var(--sk-text); }
.sk-agenda__nav { display: inline-flex; align-items: center; gap: 6px; }

.sk-agenda__grille {
  display: grid; grid-template-columns: 56px repeat(auto-fit, minmax(0, 1fr));
  border: 1px solid var(--sk-border); border-radius: var(--sk-radius); overflow: hidden;
  background: var(--sk-surface);
}
.sk-agenda__heures { display: flex; flex-direction: column; border-right: 1px solid var(--sk-border); }
.sk-agenda__coin { height: 38px; border-bottom: 1px solid var(--sk-border); }
.sk-agenda__heure {
  height: var(--sk-agenda-heure); font-size: .6875rem; color: var(--sk-text-mute);
  text-align: right; padding-right: 8px; transform: translateY(-.55em);
}
.sk-agenda__colonne { border-right: 1px solid var(--sk-border); min-width: 0; }
.sk-agenda__colonne:last-child { border-right: 0; }
.sk-agenda__colonne--aujourdhui .sk-agenda__corps { background: var(--sk-violet-soft); }
.sk-agenda__jour {
  height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 0 10px; border-bottom: 1px solid var(--sk-border); background: var(--sk-surface-2);
  font-size: .6875rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--sk-text-dim); white-space: nowrap; overflow: hidden;
}
.sk-agenda__colonne--aujourdhui .sk-agenda__jour { color: var(--sk-violet-400); }
.sk-agenda__corps { position: relative; height: calc(var(--sk-agenda-heure) * (var(--sk-agenda-lignes) - 1)); }
.sk-agenda__ligne { height: var(--sk-agenda-heure); border-bottom: 1px solid var(--sk-border); box-sizing: border-box; }
.sk-agenda__ligne:last-child { display: none; }
.sk-agenda__bloc {
  position: absolute; box-sizing: border-box; margin: 1px 0 0 2px; padding: 5px 7px;
  border-radius: var(--sk-radius-sm); border: 1px solid; overflow: hidden;
  font-size: .6875rem; line-height: 1.25; color: var(--sk-text);
}
.sk-agenda__bloc-heure { font-size: .625rem; opacity: .8; }
.sk-agenda__bloc-titre { font-weight: 600; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-agenda__bloc-sous { color: var(--sk-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-agenda__suppr { position: absolute; top: 2px; right: 2px; opacity: 0; transition: opacity .12s; }
.sk-agenda__bloc:hover .sk-agenda__suppr { opacity: 1; }
.sk-agenda__suppr .sk-btn-icon { width: 20px; height: 20px; font-size: .6875rem; }
/* Six teintes, une par matière — celles de la palette, jamais une de plus. */
.sk-agenda__bloc--0 { background: var(--sk-surface-2); border-color: var(--sk-border-2); }
.sk-agenda__bloc--1 { background: var(--sk-violet-soft); border-color: var(--sk-violet); }
.sk-agenda__bloc--2 { background: var(--sk-mint-soft); border-color: var(--sk-mint); }
.sk-agenda__bloc--3 { background: var(--sk-amber-soft); border-color: var(--sk-amber); }
.sk-agenda__bloc--4 { background: var(--sk-coral-soft); border-color: var(--sk-coral); }
.sk-agenda__bloc--5 { background: color-mix(in srgb, var(--sk-sky) 18%, transparent); border-color: var(--sk-sky); }
.sk-agenda__bloc--6 { background: color-mix(in srgb, var(--sk-prune) 22%, transparent); border-color: var(--sk-prune); }

.sk-agenda__mois { border: 1px solid var(--sk-border); border-radius: var(--sk-radius); overflow: hidden; background: var(--sk-surface); }
.sk-agenda__mois-tete, .sk-agenda__semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sk-agenda__mois-tete > span {
  padding: 9px 10px; border-bottom: 1px solid var(--sk-border); background: var(--sk-surface-2);
  font-size: .6875rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--sk-text-dim);
}
.sk-agenda__case { min-height: 96px; padding: 6px; border-right: 1px solid var(--sk-border); border-bottom: 1px solid var(--sk-border); }
.sk-agenda__case:last-child { border-right: 0; }
.sk-agenda__semaine:last-child .sk-agenda__case { border-bottom: 0; }
.sk-agenda__case--vide { background: var(--sk-surface-2); }
.sk-agenda__case--aujourdhui { background: var(--sk-violet-soft); }
/* Un jour de congé : grisé, hachuré, et il dit pourquoi — pas de cours ce jour-là. */
.sk-agenda__case--conge,
.sk-agenda__colonne--conge .sk-agenda__corps {
  background: repeating-linear-gradient(135deg, var(--sk-surface-2) 0 6px, transparent 6px 12px);
}
.sk-agenda__conge { font-size: .6875rem; color: var(--sk-text-mute); margin-top: 2px; }
.sk-agenda__conge-colonne {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: .8125rem; color: var(--sk-text-mute); letter-spacing: .04em;
}
.sk-agenda__numero { font-size: .75rem; font-weight: 700; color: var(--sk-text-dim); margin-bottom: 4px; }
.sk-agenda__case--aujourdhui .sk-agenda__numero { color: var(--sk-violet-400); }
.sk-agenda__puce {
  font-size: .625rem; padding: 1px 5px; margin-bottom: 2px; border-radius: 3px; border: 1px solid;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sk-text);
}
.sk-agenda__reste { font-size: .625rem; color: var(--sk-text-mute); }

/* Un cours CHANGÉ un jour donné (ecoles/occurrences.py) : il se voit sans
   qu'on ait à lire. Annulé : barré, hachuré, bord en tirets — il reste à sa
   place pour qu'on sache ce qui n'a pas lieu. Modifié : un filet ambre à
   gauche. Ajouté : un filet menthe et un bord en tirets. La pastille dit le
   geste ; l'infobulle (`title`), le détail et le motif. */
.sk-agenda__pastille { font-size: .5625rem; padding: 0 5px; margin-left: 3px; vertical-align: 1px; line-height: 1.45; }
.sk-agenda__motif { font-style: italic; }
.sk-agenda__bloc--annule {
  border-style: dashed; border-color: var(--sk-coral);
  background-image: repeating-linear-gradient(135deg, transparent 0 6px,
    color-mix(in srgb, var(--sk-coral) 10%, transparent) 6px 12px);
}
.sk-agenda__bloc--annule .sk-agenda__barrable { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.sk-agenda__bloc--annule .sk-agenda__bloc-titre,
.sk-agenda__bloc--annule .sk-agenda__bloc-heure > .sk-agenda__barrable { color: var(--sk-text-dim); }
.sk-agenda__bloc--modifie { box-shadow: inset 3px 0 0 var(--sk-amber); padding-left: 9px; }
.sk-agenda__bloc--ajoute { border-style: dashed; box-shadow: inset 3px 0 0 var(--sk-mint); padding-left: 9px; }
/* Tout le bloc est le lien ; la croix de suppression reste au-dessus. */
.sk-agenda__lien { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.sk-agenda__lien:hover { background: color-mix(in srgb, var(--sk-text) 6%, transparent); }
.sk-agenda__lien:focus-visible { outline: 2px solid var(--sk-violet); outline-offset: 1px; }
.sk-agenda__suppr { z-index: 2; }
.sk-agenda__puce--annule { text-decoration: line-through; color: var(--sk-text-dim); border-style: dashed; }
.sk-agenda__puce--ajoute { border-style: dashed; }
.sk-agenda__puce-point { width: 6px; height: 6px; vertical-align: 1px; }
.sk-agenda__puce-point--coral { color: var(--sk-coral); }
.sk-agenda__puce-point--amber { color: var(--sk-amber); }
.sk-agenda__puce-point--mint { color: var(--sk-mint); }

/* L'agenda EN CLAIR. Les jetons clairs sont pensés pour des cartes, pas pour
   une grille : les traits (#E2E2E2 sur blanc) disparaissaient, le jour
   courant se teintait du même bleu gris que les blocs de la teinte 1, et les
   heures en gris clair se lisaient mal. Traits un cran plus nets, entêtes et
   heures en texte faible plutôt qu'effacé, jour courant marqué par un filet
   sous sa date plutôt que par un fond qui avale les cours. */
[data-bs-theme="light"] .sk-agenda__grille,
[data-bs-theme="light"] .sk-agenda__mois { border-color: var(--sk-border-2); }
[data-bs-theme="light"] .sk-agenda__heures,
[data-bs-theme="light"] .sk-agenda__colonne,
[data-bs-theme="light"] .sk-agenda__case { border-color: #DADADE; }
[data-bs-theme="light"] .sk-agenda__jour,
[data-bs-theme="light"] .sk-agenda__coin,
[data-bs-theme="light"] .sk-agenda__mois-tete > span { border-bottom-color: var(--sk-border-2); color: var(--sk-text); }
[data-bs-theme="light"] .sk-agenda__ligne { border-bottom-color: #E6E6EA; }
[data-bs-theme="light"] .sk-agenda__heure { color: var(--sk-text-dim); }
[data-bs-theme="light"] .sk-agenda__colonne--aujourdhui .sk-agenda__corps,
[data-bs-theme="light"] .sk-agenda__case--aujourdhui { background: color-mix(in srgb, var(--sk-violet) 5%, transparent); }
[data-bs-theme="light"] .sk-agenda__colonne--aujourdhui .sk-agenda__jour,
[data-bs-theme="light"] .sk-agenda__case--aujourdhui .sk-agenda__numero { color: var(--sk-violet-600); }
[data-bs-theme="light"] .sk-agenda__bloc { box-shadow: 0 1px 2px rgba(26, 26, 26, .06); }
[data-bs-theme="light"] .sk-agenda__bloc--modifie { box-shadow: inset 3px 0 0 var(--sk-amber), 0 1px 2px rgba(26, 26, 26, .06); }
[data-bs-theme="light"] .sk-agenda__bloc--ajoute { box-shadow: inset 3px 0 0 var(--sk-mint), 0 1px 2px rgba(26, 26, 26, .06); }
[data-bs-theme="light"] .sk-agenda__bloc--0 { background: #F4F4F6; }
[data-bs-theme="light"] .sk-agenda__bloc-heure { opacity: 1; color: var(--sk-text-dim); }
[data-bs-theme="light"] .sk-badge--mint.sk-agenda__pastille { color: #3A6E55; }
[data-bs-theme="light"] .sk-badge--coral.sk-agenda__pastille { color: #A2382F; }
/* Le jour courant, dans les deux thèmes : un filet sous sa date. */
.sk-agenda__colonne--aujourdhui .sk-agenda__jour { box-shadow: inset 0 -2px 0 var(--sk-violet); }

/* --- L'aide d'occupation (js/occupations.js) ------------------------------
   Sous un formulaire de cours : la semaine de la classe, et ce que font
   l'enseignant et la salle choisis — pour voir ce qui est libre avant
   d'envoyer. Le cours proposé se dessine en tirets ; rouge s'il chevauche. */
.sk-occup { font-size: .75rem; }
.sk-occup__legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; color: var(--sk-text-dim); }
.sk-occup__legende span::before {
  content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; border: 1px solid;
}
.sk-occup__legende .sk-occup--classe::before { background: var(--sk-surface-2); border-color: var(--sk-border-2); }
.sk-occup__legende .sk-occup--enseignant::before { background: var(--sk-violet-soft); border-color: var(--sk-violet); }
.sk-occup__legende .sk-occup--salle::before { background: var(--sk-amber-soft); border-color: var(--sk-amber); }
.sk-occup__legende .sk-occup--propose::before { border-style: dashed; border-color: var(--sk-mint); }
.sk-occup__grille {
  display: grid; grid-template-columns: 40px repeat(var(--sk-occup-colonnes, 6), minmax(72px, 1fr));
  border: 1px solid var(--sk-border-2); border-radius: var(--sk-radius-sm); overflow-x: auto;
  background: var(--sk-surface);
}
.sk-occup__tete {
  height: 26px; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--sk-border-2); background: var(--sk-surface-2);
  font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--sk-text-dim);
}
.sk-occup__tete--actif { color: var(--sk-violet-400); box-shadow: inset 0 -2px 0 var(--sk-violet); }
[data-bs-theme="light"] .sk-occup__tete--actif { color: var(--sk-violet-600); }
.sk-occup__colonne { border-left: 1px solid var(--sk-border); min-width: 0; }
.sk-occup__corps { position: relative; }
.sk-occup__heure { font-size: .5625rem; color: var(--sk-text-dim); text-align: right; padding-right: 4px; transform: translateY(-.5em); }
.sk-occup__trait { border-bottom: 1px solid var(--sk-border); box-sizing: border-box; }
.sk-occup__bloc {
  position: absolute; left: 2px; right: 2px; box-sizing: border-box; overflow: hidden;
  padding: 1px 4px; border: 1px solid; border-radius: 4px; font-size: .5625rem; line-height: 1.25;
  color: var(--sk-text); white-space: nowrap; text-overflow: ellipsis;
}
.sk-occup__bloc.sk-occup--classe { background: var(--sk-surface-2); border-color: var(--sk-border-2); }
.sk-occup__bloc.sk-occup--enseignant { background: var(--sk-violet-soft); border-color: var(--sk-violet); }
.sk-occup__bloc.sk-occup--salle { background: var(--sk-amber-soft); border-color: var(--sk-amber); }
.sk-occup__bloc.sk-occup--propose {
  z-index: 1; border: 2px dashed var(--sk-mint); background: color-mix(in srgb, var(--sk-mint) 14%, transparent);
  font-weight: 600;
}
.sk-occup__bloc.sk-occup--conflit { border-color: var(--sk-coral); background: color-mix(in srgb, var(--sk-coral) 18%, transparent); }
.sk-occup__messages { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 3px; }
.sk-occup__messages li { font-size: .8125rem; }
.sk-occup__messages .sk-occup__conflit { color: var(--sk-coral); font-weight: 600; }
.sk-occup__messages .sk-occup__libre { color: var(--sk-mint); }
[data-bs-theme="light"] .sk-occup__messages .sk-occup__libre { color: #3A6E55; }
.sk-occup__note { color: var(--sk-text-dim); }

/* La page « Changer ce cours » : les gestes en tuiles. */
.sk-gestes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.sk-geste {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: var(--sk-radius-sm);
  border: 1px solid var(--sk-border); background: var(--sk-surface); color: var(--sk-text);
  text-decoration: none; font-size: .875rem; font-weight: 600;
}
.sk-geste i { font-size: 1rem; color: var(--sk-text-dim); }
.sk-geste:hover { border-color: var(--sk-border-2); background: var(--sk-surface-2); color: var(--sk-text); }
.sk-geste--actif { border-color: var(--sk-violet); background: var(--sk-violet-soft); }
.sk-geste--actif i { color: var(--sk-violet-400); }
[data-bs-theme="light"] .sk-geste--actif i { color: var(--sk-violet-600); }

@media (max-width: 991.98px) {
  .sk-agenda--semaine .sk-agenda__grille { overflow-x: auto; grid-template-columns: 48px repeat(6, minmax(140px, 1fr)); }
}

/* --- Graphiques ---------------------------------------------------------- */
.sk-graphique { position: relative; width: 100%; }
.sk-graphique svg { display: block; overflow: visible; }
.sk-graphique-vide {
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--sk-text-mute); font-size: .8125rem; text-align: center; padding: 0 16px;
}
/* L'infobulle : une seule pour la page, posée sous la souris. */
.sk-graphique-bulle {
  position: absolute; z-index: 1080; pointer-events: none;
  background: var(--sk-surface); color: var(--sk-text); border: 1px solid var(--sk-border-2);
  border-radius: var(--sk-radius-sm); box-shadow: var(--sk-shadow);
  padding: 6px 10px; font-size: .8125rem; line-height: 1.4; white-space: nowrap;
}

/* --- Le Markdown du syllabus ------------------------------------------ */
.sk-md { font-size: .9375rem; line-height: 1.55; color: var(--sk-text); }
.sk-md > :first-child { margin-top: 0; }
.sk-md > :last-child { margin-bottom: 0; }
.sk-md h1, .sk-md h2, .sk-md h3, .sk-md h4 { font-family: var(--sk-font-display); font-size: 1rem; margin: .75rem 0 .35rem; }
.sk-md p, .sk-md ul, .sk-md ol { margin: 0 0 .5rem; }
.sk-md ul, .sk-md ol { padding-left: 1.25rem; }
.sk-md code { font-family: var(--sk-font-mono); font-size: .875em; background: var(--sk-surface-2); padding: 0 .3em; border-radius: 4px; }
.sk-md pre { background: var(--sk-surface-2); padding: .6rem .8rem; border-radius: var(--sk-radius-sm); overflow-x: auto; }
.sk-md table { border-collapse: collapse; margin: .5rem 0; }
.sk-md th, .sk-md td { border: 1px solid var(--sk-border); padding: .25rem .5rem; }
.sk-md blockquote { border-left: 3px solid var(--sk-border-2); margin: .5rem 0; padding-left: .75rem; color: var(--sk-text-dim); }
.sk-md .katex-display { overflow-x: auto; }
/* L'aperçu vivant sous un champ de saisie. */
.sk-md-apercu { margin-top: .5rem; padding: .6rem .8rem; border: 1px dashed var(--sk-border-2); border-radius: var(--sk-radius-sm); background: var(--sk-surface); }
.sk-md-apercu[hidden] { display: none; }

/* --- La pastille d'une échéance : qui a payé quel mois ------------------------ */
.sk-pastille { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; background: var(--sk-border-2); }
.sk-pastille--soldee    { background: var(--sk-mint); }
.sk-pastille--partielle { background: var(--sk-amber); }
.sk-pastille--retard    { background: var(--sk-coral); }
.sk-pastille--a_venir   { background: transparent; border: 1.5px solid var(--sk-border-2); }
/* Une grille élève × mois : les cellules se resserrent, le nom reste lisible. */
.sk-table--grille thead th, .sk-table--grille tbody td { padding-left: 8px; padding-right: 8px; }
.sk-table--grille tbody td:first-child, .sk-table--grille thead th:first-child { padding-left: 16px; white-space: nowrap; }
.sk-table tfoot td { padding: 12px 16px; border-top: 1px solid var(--sk-border-2); font-size: .875rem; }

/* ------------------------------------------------------------ bascule
   Deux ou trois vues d'une même carte (« Par mois » / « Sur l'année ») :
   un contrôle segmenté aux couleurs du thème, pas les pilules bleues de
   Bootstrap. */
.sk-bascule { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--sk-border); border-radius: 9px; background: var(--sk-surface-2); flex-wrap: nowrap; }
.sk-bascule .nav-link { padding: 4px 12px; font-size: .8125rem; font-weight: 500; border-radius: 6px; color: var(--sk-text-dim); background: transparent; white-space: nowrap; }
.sk-bascule .nav-link:hover { color: var(--sk-text); }
.sk-bascule .nav-link.active { background: var(--sk-violet-soft); color: var(--sk-violet-400); font-weight: 600; }
[data-bs-theme="light"] .sk-bascule .nav-link.active { color: var(--sk-violet-600); background: var(--sk-surface); box-shadow: 0 1px 2px rgba(0,0,0,.08); }