/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./fuji-tokens.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   FUJI — tokens de thème
   v0.1 · dérivé des valeurs réelles de la maquette Mission Control

   Règles
   1. Aucun composant n'écrit une couleur en dur. Jamais.
   2. Les noms sont SÉMANTIQUES (surface, texte, état), pas
      chromatiques. On ne dit pas --teal, on dit --accent.
   3. Le thème clair n'est pas une inversion du sombre. En sombre
      la hiérarchie repose sur la lueur ; en clair elle repose sur
      l'ombre et le poids. Mêmes noms, valeurs redéfinies.
   4. UNE SEULE lueur, réservée à ce qui demande une attention.
      Si tout brille, rien ne ressort.

   Usage : <html data-theme="dark"> ou data-theme="light"
   ============================================================ */

/* ------------------------------------------------------------
   INVARIANTS — identiques dans les deux thèmes
   ------------------------------------------------------------ */
:root {
  /* Typographie */
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Space Grotesk", var(--font-body);
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.5rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Formes */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --radius-pill: 999px;

  /* Rythme — échelle de 4 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* Gabarit */
  --rail-width: 64px;
  --sidebar-width: 280px;
  --aside-width: 340px;
  --topbar-height: 56px;

  /* Mouvement */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration: 200ms;

  /* Panneau de la maquette Élèves : rayon 13px, entre carte et contrôle */
  --radius-panneau: 13px;
}

/* ------------------------------------------------------------
   THÈME SOMBRE
   Base Fable, corrigée : teal désaturé de 66% à 46%,
   dégradés d'ambiance divisés par trois.
   ------------------------------------------------------------ */
[data-theme="dark"] {
  /* Surfaces, du plus profond au plus proche */
  --surface-0: #070c15;   /* fond de page */
  --surface-1: #0c1322;   /* zone, bande */
  --surface-2: #0e1626;   /* carte */
  --surface-3: #101a2e;   /* carte survolée, champ */

  --line: rgba(148, 163, 184, 0.12);
  --line-strong: rgba(148, 163, 184, 0.22);

  --text: #e6edf7;
  --text-dim: #93a4bd;
  --text-faint: #5c6b84;
  --text-on-accent: #04140f;

  /* Accent — désaturé, il ne porte plus l'ambiance à lui seul */
  --accent: #49bfaf;
  --accent-hover: #5ccdbd;
  --accent-soft: rgba(73, 191, 175, 0.12);
  --accent-line: rgba(73, 191, 175, 0.38);

  /* États — sobres, jamais fluo */
  --state-ok: #34d399;
  --state-warn: #fbbf24;
  --state-danger: #f87171;
  --state-info: #38bdf8;
  --state-idle: #64748b;
  --state-ok-soft: rgba(52, 211, 153, 0.12);
  --state-warn-soft: rgba(251, 191, 36, 0.12);
  --state-danger-soft: rgba(248, 113, 113, 0.12);

  /* Profondeur */
  --shadow-card: 0 10px 30px rgba(2, 6, 15, 0.45);
  --shadow-pop: 0 16px 48px rgba(2, 6, 15, 0.6);

  /* LA lueur — réservée à « demande ton attention ». Rien d'autre. */
  --attention-ring:
    0 0 0 1px rgba(73, 191, 175, 0.55),
    0 0 16px rgba(73, 191, 175, 0.28);

  --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--accent);

  /* Ambiance de fond — trois dégradés ramenés de 0.07/0.06/0.05 à 0.025 */
  --ambience:
    radial-gradient(900px 600px at 12% -5%, rgba(73, 191, 175, 0.025), transparent 60%),
    radial-gradient(800px 500px at 88% 0%, rgba(56, 189, 248, 0.02), transparent 60%);
}

/* ------------------------------------------------------------
   THÈME CLAIR
   Redéfini, pas inversé. La lueur disparaît, l'ombre et le poids
   typographique prennent le relais. Fond blanc cassé chaud.
   ------------------------------------------------------------ */
/* Dérivé de docs/design/dashboard-chatgpt-light.png (8 août 2026) :
   fond FROID presque blanc, cartes et barre latérale blanches, bordures
   gris froid discrètes — l'ancienne base chaude (#f8f7f4) est remplacée. */
[data-theme="light"] {
  --surface-0: #f7f7fa;   /* fond de page, froid */
  --surface-1: #ffffff;   /* barre latérale, bandes — blanches comme la capture */
  --surface-2: #ffffff;   /* carte */
  --surface-3: #f2f3f7;   /* carte survolée, champ, avatar */

  --line: rgba(33, 39, 58, 0.10);
  --line-strong: rgba(33, 39, 58, 0.17);

  --text: #1a1f2b;
  --text-dim: #5a6274;
  --text-faint: #8a91a2;
  --text-on-accent: #ffffff;

  /* Accent assombri pour tenir le contraste sur blanc (AA sur --surface-2) */
  --accent: #1f7f70;
  --accent-hover: #196b5e;
  --accent-soft: rgba(31, 127, 112, 0.09);
  --accent-line: rgba(31, 127, 112, 0.32);

  --state-ok: #15803d;
  --state-warn: #b45309;
  --state-danger: #b91c1c;
  --state-info: #0369a1;
  --state-idle: #6b7280;
  --state-ok-soft: rgba(21, 128, 61, 0.10);
  --state-warn-soft: rgba(180, 83, 9, 0.10);
  --state-danger-soft: rgba(185, 28, 28, 0.10);

  /* En clair, la profondeur EST la hiérarchie — ombres froides, très douces
     (les cartes de la capture flottent à peine sur le fond). */
  --shadow-card: 0 1px 2px rgba(24, 30, 50, 0.04), 0 4px 14px rgba(24, 30, 50, 0.05);
  --shadow-pop: 0 8px 32px rgba(24, 30, 50, 0.12);

  /* Pas de lueur en clair : un anneau franc + un fond teinté */
  --attention-ring:
    0 0 0 1px var(--accent-line),
    0 2px 12px rgba(31, 127, 112, 0.14);

  --focus-ring: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--accent);

  --ambience: none;
}

/* ------------------------------------------------------------
   ACCENTS DE PÔLE — Fuji
   Un pôle = une couleur, utilisée UNIQUEMENT sur les icônes,
   les titres de section et les micro-indicateurs. Jamais en fond
   de carte, jamais en aplat large.
   ------------------------------------------------------------ */
[data-theme="dark"] {
  --pole-argent: #d9a441;
  --pole-clients: #4a9eff;
  --pole-communication: #a78bfa;
  --pole-documents: #7d8da8;
  --pole-temps: #34d399;
  --pole-perso: #f0806c;
  --pole-pilotage: #7b7bea;
}

[data-theme="light"] {
  --pole-argent: #a9741a;
  --pole-clients: #1f6bc4;
  --pole-communication: #6d4bc7;
  --pole-documents: #4f5d75;
  --pole-temps: #15803d;
  --pole-perso: #c2543c;
  --pole-pilotage: #4a4ac0;
}

/* ------------------------------------------------------------
   APPLICATION DE BASE
   ------------------------------------------------------------ */
html {
  color-scheme: dark;
}
html[data-theme="light"] {
  color-scheme: light;
}

body {
  background-color: var(--surface-0);
  background-image: var(--ambience);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
}

/* Bascule de thème sans clignotement ni transition sur les images */
body,
[data-theme] * {
  transition:
    background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  body,
  [data-theme] * {
    transition: none;
  }
}

/* ------------------------------------------------------------
   PRIMITIVES — les seules classes autorisées à toucher un token
   ------------------------------------------------------------ */
.card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.card--attention {
  box-shadow: var(--shadow-card), var(--attention-ring);
}

.band {
  background: var(--surface-1);
  border-radius: var(--radius);
}

.band__title {
  color: var(--text-faint);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  display: inline-block;
}
.dot--ok      { background: var(--state-ok); }
.dot--warn    { background: var(--state-warn); }
.dot--danger  { background: var(--state-danger); }
.dot--info    { background: var(--state-info); }
.dot--idle    { background: var(--state-idle); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ------------------------------------------------------------
   SÉMANTIQUE DES PASTILLES — maquette CEMA (addendum §2)
   positif / négatif / avertissement / neutre. Les composants ne
   posent JAMAIS ces couleurs en dur : ils utilisent .pastille--*.
   ------------------------------------------------------------ */
:root,
[data-theme="dark"] {
  --positif: #2bb5a0;
  --negatif: #e03838;
  --avertissement: #d89030;
  --neutre: rgba(255, 255, 255, 0.15);
  /* 5e ton, ajouté pour Projets (statut « Idée ») — générique, réutilisable
     par tout module qui a besoin d'un état « pas encore commencé ». */
  --info: #a78bfa;
  --texte-sur-pastille: #ffffff;
  --texte-sur-neutre: var(--text-faint);
}

[data-theme="light"] {
  --positif: #0e8a8f;
  --negatif: #e04040;
  --avertissement: #c87a1e;
  --neutre: rgba(80, 80, 90, 0.5);
  --info: #7c3aed;
  --texte-sur-pastille: #ffffff;
  --texte-sur-neutre: #ffffff;
}

/* Pill maquette : 10px, weight 600, texte blanc, coins 5px, padding 2px 7px */
.pastille {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--texte-sur-pastille);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}
.pastille--positif { background: var(--positif); }
.pastille--negatif { background: var(--negatif); }
.pastille--avertissement { background: var(--avertissement); }
.pastille--info { background: var(--info); }
.pastille--neutre { background: var(--neutre); color: var(--texte-sur-neutre); }

/* ------------------------------------------------------------
   POINT DE NAVIGATION DE MODULE — maquette CEMA (addendum §4)
   Chaque entrée du menu d'un module porte un point de 5px :
   actif = dégradé, inactif = atténué.
   ------------------------------------------------------------ */
:root,
[data-theme="dark"] {
  --point-nav-actif: linear-gradient(135deg, #b8d4e8, #8bc4f0);
  --point-nav-inactif: var(--text-faint);
}

[data-theme="light"] {
  --point-nav-actif: linear-gradient(135deg, #5aaad8, #3888c0);
  --point-nav-inactif: rgba(30, 26, 40, 0.3);
}

.point-nav {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  display: inline-block;
  flex-shrink: 0;
  background: var(--point-nav-inactif);
}
.point-nav--actif {
  background: var(--point-nav-actif);
}

/* ------------------------------------------------------------
   MAQUETTE ÉLÈVES (eleves-v9.html) — accent froid, dégradés
   d'action, contours de carte. Les valeurs viennent de la
   maquette ; les composants ne les posent JAMAIS en dur.
   ------------------------------------------------------------ */
:root,
[data-theme="dark"] {
  /* L'accent froid : sélection, onglets, compteurs, chevrons */
  --accent-froid: #8bc4f0;
  --accent-froid-fond: rgba(184, 212, 232, 0.12);
  --accent-froid-selection: rgba(184, 212, 232, 0.09);
  --accent-froid-bord: rgba(184, 212, 232, 0.3);
  --accent-froid-compteur: rgba(184, 212, 232, 0.15);
  --degrade-froid: linear-gradient(180deg, #b8d4e8, #8bc4f0);

  /* L'action principale : le dégradé soleil de la maquette */
  --degrade-chaud: linear-gradient(100deg, #f26b4d, #d62e5e);
  --ombre-chaude: 0 3px 12px rgba(242, 107, 77, 0.28);
  --texte-sur-chaud: #ffffff;

  /* Le dégradé perle : cases cochées, numéros d'étapes */
  --degrade-perle: linear-gradient(100deg, #b8d4e8, #c8b8e0, #e8c4a8);
  --texte-sur-perle: #1a1b22;

  /* Déclinaisons douces des états (boutons et étiquettes teintés) */
  --negatif-vif: #f04848;
  --negatif-fond: rgba(240, 72, 72, 0.13);
  --negatif-bord: rgba(240, 72, 72, 0.22);
  --negatif-bord-doux: rgba(240, 72, 72, 0.35);
  --positif-fond: rgba(43, 181, 160, 0.15);
  --positif-bord: rgba(43, 181, 160, 0.3);
  --positif-bord-doux: rgba(43, 181, 160, 0.35);
  --avertissement-bord-doux: rgba(216, 144, 48, 0.35);
  --froid-bord-doux: rgba(139, 196, 240, 0.35);

  /* La carte d'un élève dans la fiche : contour froid appuyé */
  --contour-eleve: rgba(100, 180, 240, 0.45);
  --contour-eleve-leger: rgba(100, 180, 240, 0.3);
  --contour-eleve-fond: rgba(100, 180, 240, 0.08);
  --contour-eleve-separation: rgba(100, 180, 240, 0.15);
}

[data-theme="light"] {
  --accent-froid: #3888c0;
  --accent-froid-fond: rgba(56, 136, 192, 0.1);
  --accent-froid-selection: rgba(56, 136, 192, 0.08);
  --accent-froid-bord: rgba(56, 136, 192, 0.4);
  --accent-froid-compteur: rgba(56, 136, 192, 0.15);
  --degrade-froid: linear-gradient(180deg, #5aaad8, #3888c0);

  --negatif-vif: #e04040;
  --negatif-fond: rgba(224, 64, 64, 0.12);
  --negatif-bord: rgba(224, 64, 64, 0.28);
  --negatif-bord-doux: rgba(224, 64, 64, 0.4);
  --positif-fond: rgba(14, 138, 143, 0.12);
  --positif-bord: rgba(14, 138, 143, 0.3);
  --positif-bord-doux: rgba(14, 138, 143, 0.4);
  --avertissement-bord-doux: rgba(200, 122, 30, 0.4);
  --froid-bord-doux: rgba(56, 136, 192, 0.4);

  --contour-eleve: rgba(56, 136, 192, 0.45);
  --contour-eleve-leger: rgba(56, 136, 192, 0.3);
  --contour-eleve-fond: rgba(56, 136, 192, 0.08);
  --contour-eleve-separation: rgba(56, 136, 192, 0.15);
}

/* Étiquette de fiche (dtag maquette) : 10px, contour teinté */
.etiquette {
  display: inline-block;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  white-space: nowrap;
}
.etiquette--positif { border-color: var(--positif-bord-doux); color: var(--positif); }
.etiquette--negatif { border-color: var(--negatif-bord-doux); color: var(--negatif-vif); }
.etiquette--avertissement { border-color: var(--avertissement-bord-doux); color: var(--avertissement); }
.etiquette--froid { border-color: var(--froid-bord-doux); color: var(--accent-froid); }

/* Insigne discret (badges de cours, de professeur, d'effectif) */
.insigne {
  display: inline-block;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--line);
  color: var(--text-faint);
  white-space: nowrap;
}
.insigne--petit {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
}

/* Boutons de la maquette : chaud (action), contour, négatif, reprise */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: opacity var(--duration-fast) var(--ease);
}
.bouton--chaud {
  background: var(--degrade-chaud);
  color: var(--texte-sur-chaud);
  box-shadow: var(--ombre-chaude);
}
.bouton--contour {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
.bouton--contour:hover { color: var(--text); border-color: var(--line-strong); }
.bouton--negatif {
  background: var(--negatif-fond);
  color: var(--negatif-vif);
  border: 1px solid var(--negatif-bord);
}
.bouton--reprise {
  background: var(--positif-fond);
  color: var(--positif);
  border: 1px solid var(--positif-bord);
}
.bouton--petit {
  padding: 5px 11px;
  border-radius: 7px;
  font-size: 12px;
  gap: 5px;
}
.bouton--mini {
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 11px;
  gap: 4px;
}

/* Case à cocher d'un mois de paiement : perle quand cochée */
.case-mois {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--accent-froid-bord);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.case-mois:hover { border-color: var(--accent-froid); }
.case-mois:checked {
  background: var(--degrade-perle);
  border-color: var(--accent-froid-bord);
}
.case-mois:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--texte-sur-perle);
}

/* Voile derrière une fenêtre modale */
.voile-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------
   LA GRILLE — 12 colonnes, gouttière 16 px (maquette finale du
   Tableau de bord). Gravée ici pour TOUS les écrans à venir :
   aucune card hors grille. `.grille--kpi` est l'exception
   documentée du dashboard : 5 cartes KPI égales pleine largeur.
   ------------------------------------------------------------ */
:root {
  --grille-gouttiere: 16px;
}

.grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grille-gouttiere);
  align-items: stretch;
}
.grille__c3 { grid-column: span 3; min-width: 0; }
.grille__c4 { grid-column: span 4; min-width: 0; }
.grille__c5 { grid-column: span 5; min-width: 0; }
.grille__c7 { grid-column: span 7; min-width: 0; }
.grille__c12 { grid-column: span 12; min-width: 0; }

/* Exception documentée : la rangée KPI du dashboard, 5 cartes égales. */
.grille--kpi {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--grille-gouttiere);
  align-items: stretch;
}

/* ------------------------------------------------------------
   LA GRILLE SE REPLIE — Samuel travaille souvent au téléphone,
   à la verticale. Douze colonnes sur 390 px ne donnent pas des
   cartes étroites : elles donnent des cartes ILLISIBLES, où un
   titre tient sur cinq lignes d'un mot. La règle est donc :

   - sous 640 px  : UNE colonne, tout s'empile ;
   - de 640 à 1024 : six colonnes, une carte occupe au moins la
     moitié — les paires tiennent côte à côte, le reste passe
     dessous ;
   - au-delà      : les douze colonnes de la maquette, intactes.

   Une seule règle ici couvre tous les écrans construits sur la
   grille — présents et à venir : aucun composant à retoucher.
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  .grille {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grille__c3,
  .grille__c4,
  .grille__c5,
  .grille__c7,
  .grille__c12 {
    grid-column: span 6;
  }
  .grille--kpi {
    /* Les KPI se rangent par deux : un chiffre reste un chiffre. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .grille {
    grid-template-columns: minmax(0, 1fr);
  }
  .grille__c3,
  .grille__c4,
  .grille__c5,
  .grille__c7,
  .grille__c12 {
    grid-column: span 1;
  }
  .grille--kpi {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Un montant ne passe JAMAIS à la ligne. */
.num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   SÉRIES — identités des structures dans les graphiques
   (courbe, donut, barres de la vue rapide). Ordre FIXE, jamais
   recyclé : une structure garde sa teinte quand une autre
   disparaît du filtre.
   ------------------------------------------------------------ */
:root,
[data-theme="dark"] {
  --serie-1: #f5b93c; /* Ohayo Studio */
  --serie-2: #6366f1; /* CEMA */
  --serie-3: #ec4899; /* Maze Records */
  --serie-4: #2dd4bf;
  --serie-5: #60a5fa;
}

[data-theme="light"] {
  --serie-1: #d97706;
  --serie-2: #4f46e5;
  --serie-3: #db2777;
  --serie-4: #0d9488;
  --serie-5: #2563eb;
}

/* ------------------------------------------------------------
   AGENDA — le planning hebdomadaire (maquette planning v4).
   Une couleur PAR PROFESSEUR, exactement celles de la maquette
   (l'atelier de groupe porte la couleur de son prof). Le fond
   des pistes : salle 2 éclaircie ; zones fermées hachurées.
   ------------------------------------------------------------ */
:root,
[data-theme="dark"] {
  --agenda-prof-1: #55b6f2; /* Pierre C. */
  --agenda-prof-2: #a08bf0; /* Mehdi M. */
  --agenda-prof-3: #e0709a; /* Fanny V. */
  --agenda-prof-4: #e3a53e; /* Julien F. */
  --agenda-prof-5: #ef8a6d; /* Éveil (en recrutement) */
  --agenda-prof-6: #7fcf9a; /* Anglais (en recrutement) */
  --agenda-texte-bloc: #0b0b12;
  --agenda-piste-1: rgba(255, 255, 255, 0.02);
  --agenda-piste-2: rgba(255, 255, 255, 0.06);
  --agenda-quart: rgba(255, 255, 255, 0.05);
  --agenda-heure: rgba(255, 255, 255, 0.11);
  --agenda-jour-sep: rgba(255, 255, 255, 0.38);
  --agenda-ferme-a: rgba(255, 255, 255, 0.015);
  --agenda-ferme-b: rgba(255, 255, 255, 0.055);
  --agenda-pause-fond: #2b2b39;
  --agenda-pause-texte: #c9cbd6;
}

[data-theme="light"] {
  --agenda-prof-1: #55b6f2;
  --agenda-prof-2: #a08bf0;
  --agenda-prof-3: #e0709a;
  --agenda-prof-4: #e3a53e;
  --agenda-prof-5: #ef8a6d;
  --agenda-prof-6: #7fcf9a;
  --agenda-texte-bloc: #0b0b12;
  --agenda-piste-1: rgba(30, 26, 40, 0.03);
  --agenda-piste-2: rgba(30, 26, 40, 0.07);
  --agenda-quart: rgba(30, 26, 40, 0.06);
  --agenda-heure: rgba(30, 26, 40, 0.14);
  --agenda-jour-sep: rgba(30, 26, 40, 0.45);
  --agenda-ferme-a: rgba(30, 26, 40, 0.03);
  --agenda-ferme-b: rgba(30, 26, 40, 0.08);
  --agenda-pause-fond: #e6e6ee;
  --agenda-pause-texte: #55555f;
}

/* La piste d'une salle : un trait à chaque quart d'heure, appuyé à
   l'heure pleine — 1 slot = 15 min (hauteur pilotée par --slot). */
.agenda-piste {
  background:
    repeating-linear-gradient(
      to bottom,
      var(--agenda-heure) 0 1px,
      transparent 1px calc(var(--slot) * 4)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--agenda-quart) 0 1px,
      transparent 1px var(--slot)
    ),
    var(--agenda-piste-fond, var(--agenda-piste-1));
}
.agenda-piste--s2 { --agenda-piste-fond: var(--agenda-piste-2); }

/* Zone fermée : hachures à 45°. */
.agenda-ferme {
  background: repeating-linear-gradient(
    45deg,
    var(--agenda-ferme-a) 0 7px,
    var(--agenda-ferme-b) 7px 14px
  );
}

/* ------------------------------------------------------------
   PROJETS — maquette Projets (v2). Bandeaux Professionnel /
   Personnel en vrais dégradés à deux couleurs (impossibles à
   rater) ; une couleur d'identité par carte, cyclique sur 8
   teintes (jamais pour un projet TERMINÉ, qui reste neutre).
   ------------------------------------------------------------ */
:root,
[data-theme="dark"] {
  --bande-pro: linear-gradient(
    100deg,
    rgba(99, 102, 241, 0.34) 0%,
    rgba(96, 165, 250, 0.2) 45%,
    rgba(45, 212, 191, 0.06) 100%
  );
  --bande-pro-bord: #6366f1;
  --bande-pro-icone: linear-gradient(135deg, #6366f1, #4aa8f0);
  --texte-sur-bande-pro: #0a0a12;

  --bande-perso: linear-gradient(
    100deg,
    rgba(236, 72, 153, 0.3) 0%,
    rgba(167, 139, 250, 0.22) 48%,
    rgba(99, 102, 241, 0.05) 100%
  );
  --bande-perso-bord: #ec4899;
  --bande-perso-icone: linear-gradient(135deg, #ec4899, #a78bfa);
  --texte-sur-bande-perso: #12060f;

  --projet-accent-1: #f5b93c; /* jaune */
  --projet-accent-2: #60a5fa; /* bleu */
  --projet-accent-3: #a78bfa; /* violet */
  --projet-accent-4: #2dd4bf; /* sarcelle */
  --projet-accent-5: #fb923c; /* orange */
  --projet-accent-6: #fb7185; /* rouge */
  --projet-accent-7: #818cf8; /* indigo clair */
  --projet-accent-8: #4ade80; /* vert */
}

[data-theme="light"] {
  --bande-pro: linear-gradient(
    100deg,
    rgba(99, 102, 241, 0.14) 0%,
    rgba(37, 99, 235, 0.09) 45%,
    rgba(13, 148, 136, 0.04) 100%
  );
  --bande-pro-bord: #4338ca;
  --bande-pro-icone: linear-gradient(135deg, #4338ca, #2563eb);
  --texte-sur-bande-pro: #ffffff;

  --bande-perso: linear-gradient(
    100deg,
    rgba(219, 39, 119, 0.12) 0%,
    rgba(124, 58, 237, 0.1) 48%,
    rgba(79, 70, 229, 0.04) 100%
  );
  --bande-perso-bord: #be185d;
  --bande-perso-icone: linear-gradient(135deg, #be185d, #7c3aed);
  --texte-sur-bande-perso: #ffffff;

  --projet-accent-1: #d97706;
  --projet-accent-2: #2563eb;
  --projet-accent-3: #7c3aed;
  --projet-accent-4: #0d9488;
  --projet-accent-5: #c2410c;
  --projet-accent-6: #be123c;
  --projet-accent-7: #4338ca;
  --projet-accent-8: #15803d;
}