/* Module Planning — agenda semaine/jour du staff + fiche séance. Palette autonome, claire. */
.planning {
  --pl-bg: #f6f7fb;
  --pl-surface: #ffffff;
  --pl-surface-2: #f3f5fa;
  --pl-border: #e6e9f2;
  --pl-border-2: #d6dae6;
  --pl-text: #161a26;
  --pl-muted: #626b7d;
  --pl-soft: #99a1b2;
  --pl-accent: #5b5bf0;
  --pl-accent-soft: #eef0ff;
  /* couleurs par type de séance : fond clair + texte foncé de la même famille */
  --pl-conduite-bg: #e9f1fe; --pl-conduite-tx: #1655a8; --pl-conduite-bd: #c2d9f7;
  --pl-code-bg: #fff3e0;     --pl-code-tx: #9a5a06;     --pl-code-bd: #f7dcae;
  --pl-plateau-bg: #e7f8ef;  --pl-plateau-tx: #0f7a45;  --pl-plateau-bd: #bce9d1;
  --pl-examen-bg: #fdeaec;   --pl-examen-tx: #b41d33;   --pl-examen-bd: #f4c4cc;
  --pl-eval-bg: #f2edfd;     --pl-eval-tx: #6b34c9;     --pl-eval-bd: #ddccf6;
  color: var(--pl-text);
  -webkit-font-smoothing: antialiased;
}
.planning * { box-sizing: border-box; }

/* Toolbar */
.pl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pl-weeknav { display: flex; align-items: center; gap: 8px; }
.pl-weeklabel { font-size: 15px; font-weight: 650; min-width: 168px; text-align: center; }
.pl-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; max-width: 100%; }

.pl-btn { appearance: none; cursor: pointer; border: 1px solid var(--pl-border-2); background: var(--pl-surface); color: var(--pl-text);
  border-radius: 10px; padding: 8px 13px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: 0.14s; white-space: nowrap; }
.pl-btn:hover { background: var(--pl-surface-2); border-color: var(--pl-soft); }
.pl-btn:disabled { opacity: 0.5; cursor: default; }
.pl-btn.is-primary { background: var(--pl-accent); border-color: var(--pl-accent); color: #fff; }
.pl-btn.is-primary:hover { filter: brightness(1.06); background: var(--pl-accent); }
.pl-btn.is-icon { padding: 8px 10px; }
.pl-btn.is-sm { padding: 6px 11px; font-size: 12.5px; }
.pl-btn.is-success { color: #0f7a45; border-color: var(--pl-plateau-bd); }
.pl-btn.is-success:hover { background: var(--pl-plateau-bg); }
.pl-btn.is-danger { color: var(--pl-examen-tx); border-color: var(--pl-examen-bd); }
.pl-btn.is-danger:hover { background: var(--pl-examen-bg); }

/* Segmented filter moniteur */
.pl-seg { display: flex; border: 1px solid var(--pl-border-2); border-radius: 10px; overflow-x: auto; overflow-y: hidden; background: var(--pl-surface); max-width: 100%; min-width: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pl-seg::-webkit-scrollbar { display: none; }
.pl-seg button { flex: 0 0 auto; }
.pl-seg button { appearance: none; border: 0; background: transparent; padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--pl-muted); white-space: nowrap; border-left: 1px solid var(--pl-border); }
.pl-seg button:first-child { border-left: 0; }
.pl-seg button.is-on { background: var(--pl-accent-soft); color: var(--pl-accent); }

/* Segment bascule Semaine | Par moniteur */
.pl-viewseg { display: inline-flex; border: 1px solid var(--pl-border-2); border-radius: 10px; overflow: hidden; background: var(--pl-surface); flex: 0 0 auto; }
.pl-viewseg button { appearance: none; border: 0; background: transparent; padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--pl-muted); white-space: nowrap; border-left: 1px solid var(--pl-border); }
.pl-viewseg button:first-child { border-left: 0; }
.pl-viewseg button.is-on { background: var(--pl-accent-soft); color: var(--pl-accent); }

/* Barre de filtres (chips moniteurs neutres + selects véhicule/type + Mes séances) */
.pl-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; max-width: 100%; }
.pl-monchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pl-monchip { appearance: none; cursor: pointer; border: 1px solid var(--pl-border-2); background: var(--pl-surface); color: var(--pl-muted);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: 0.12s; }
.pl-monchip:hover { background: var(--pl-surface-2); border-color: var(--pl-soft); }
.pl-monchip.is-on { background: #e6f1fb; border-color: #b6d4f0; color: #0c447c; }
.pl-mine.is-on { background: #e6f1fb; border-color: #b6d4f0; color: #0c447c; }
.pl-fselect { appearance: none; cursor: pointer; border: 1px solid var(--pl-border-2); background: var(--pl-surface); color: var(--pl-text);
  border-radius: 10px; padding: 7px 11px; font-size: 12.5px; font-weight: 600; }
.pl-fselect:focus { outline: none; border-color: var(--pl-accent); box-shadow: 0 0 0 4px rgba(91, 91, 240, 0.14); }

/* Vue « Par moniteur » : nav jour + en-têtes de colonnes moniteur */
.pl-mondaynav { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.pl-mondaylabel { font-size: 14px; font-weight: 650; min-width: 180px; text-align: center; text-transform: capitalize; }
.pl-moncol-h { padding: 8px 6px; text-align: center; font-size: 12px; font-weight: 700; color: var(--pl-text); border-left: 1px solid var(--pl-border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-moncol-h:first-of-type { border-left: 0; }

.pl-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12.5px; color: var(--pl-muted); }
.pl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pl-dot { width: 9px; height: 9px; border-radius: 3px; }
/* Légende moniteurs (pastille = couleur attribuée) ; légende types conservée plus discrète. */
.pl-legend-mon { font-weight: 600; color: var(--pl-text); margin-bottom: 6px; }
.pl-legend-mon .pl-dot { width: 10px; height: 10px; border-radius: 999px; }
.pl-legend-types { font-size: 11.5px; gap: 11px; opacity: 0.78; }

/* Agenda */
.pl-agenda { border: 1px solid var(--pl-border); border-radius: 16px; overflow: hidden; background: var(--pl-surface); }
.pl-agenda-head { display: grid; border-bottom: 1px solid var(--pl-border); background: var(--pl-surface-2); }
.pl-agenda-head .pl-daycol-h { padding: 8px 4px; text-align: center; font-size: 12px; border-left: 1px solid var(--pl-border); }
.pl-agenda-head .pl-daycol-h:first-child { border-left: 0; }
.pl-daycol-h .pl-dow { color: var(--pl-muted); text-transform: capitalize; }
.pl-daycol-h .pl-dom { font-weight: 700; font-size: 14px; }
.pl-daycol-h.is-today .pl-dom { color: var(--pl-accent); }

.pl-agenda-body { display: grid; }
.pl-gutter { position: relative; }
.pl-gutter .pl-hour { position: absolute; right: 7px; font-size: 12.5px; font-weight: 600; color: var(--pl-muted); transform: translateY(-50%); white-space: nowrap; }
.pl-daycol { position: relative; border-left: 1px solid var(--pl-border); }
.pl-daycol.is-today { background: rgba(91, 91, 240, 0.03); }

/* Lessons */
.pl-lesson { position: absolute; left: 3px; right: 3px; border-radius: 8px; padding: 4px 7px; overflow: hidden; cursor: pointer;
  font-size: 12.5px; line-height: 1.3; border: 1px solid transparent; transition: filter 0.12s, box-shadow 0.12s; }
.pl-lesson:hover { filter: brightness(0.97); box-shadow: 0 4px 12px rgba(20, 28, 56, 0.14); z-index: 5; }
.pl-lesson b { font-weight: 700; }
.pl-lesson .pl-sub { opacity: 0.78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-lesson.is-conduite { background: var(--pl-conduite-bg); color: var(--pl-conduite-tx); border-color: var(--pl-conduite-bd); }
.pl-lesson.is-code { background: var(--pl-code-bg); color: var(--pl-code-tx); border-color: var(--pl-code-bd); }
.pl-lesson.is-plateau { background: var(--pl-plateau-bg); color: var(--pl-plateau-tx); border-color: var(--pl-plateau-bd); }
.pl-lesson.is-examen { background: var(--pl-examen-bg); color: var(--pl-examen-tx); border-color: var(--pl-examen-bd); }
.pl-lesson.is-evaluation { background: var(--pl-eval-bg); color: var(--pl-eval-tx); border-color: var(--pl-eval-bd); }
.pl-lesson.is-cancelled { opacity: 0.5; text-decoration: line-through; }
/* Séance réalisée : coche verte nette (indicateur visuel, non cliquable) en coin. */
.pl-done-tick { position: absolute; top: 3px; right: 3px; width: 15px; height: 15px; border-radius: 4px; background: #16a34a; color: #fff; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.pl-lesson.is-done { padding-right: 22px; }
.pl-lesson.is-dragging { opacity: 0.4; }
.pl-daycol.is-droptarget { background: var(--pl-accent-soft); }

/* Nom du moniteur (prénom) dans le bloc séance, sous le nom de l'élève. */
.pl-mon-name { display: block; font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.78; }

/* Flèche d'accès rapide (fiche / débrief) — TOUJOURS visible (utilisateurs tablette, pas de survol requis). */
.pl-quick { position: absolute; right: 3px; bottom: 3px; width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; line-height: 1; color: #1d3a6b; text-decoration: none; background: rgba(255, 255, 255, 0.85); box-shadow: 0 1px 2px rgba(20, 28, 56, 0.16);
  opacity: 1; transition: transform 0.12s, background 0.12s; }
.pl-quick:hover, .pl-quick:active { transform: translateX(1px); background: #fff; }

/* F4 — séance en conflit (moniteur ou véhicule). Badge ⚠ en haut-droite ; décale le tick « réalisée » s'il coexiste. */
.pl-lesson.is-conflict { box-shadow: inset 0 0 0 2px #e53e3e; }
.pl-conflict { position: absolute; top: 2px; right: 3px; font-size: 11px; line-height: 1; color: #e53e3e; pointer-events: none; z-index: 1; }
.pl-lesson.is-conflict.is-done .pl-done-tick { right: 19px; }
/* Jour passé : planification interdite (grisé hachuré, curseur barré). Les séances existantes restent affichées. */
.pl-daycol.is-past { background-color: rgba(120, 130, 150, 0.07); cursor: not-allowed; }
.pl-daycol.is-past::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 7px, rgba(120, 130, 150, 0.06) 7px, rgba(120, 130, 150, 0.06) 14px); pointer-events: none; }

.pl-empty { padding: 24px; text-align: center; color: var(--pl-muted); font-size: 13px; }

/* Modale séance */
.pl-modal-overlay { position: fixed; inset: 0; background: rgba(16, 20, 34, 0.42); display: grid; place-items: center; padding: 16px; z-index: 100; }
.pl-modal { width: min(480px, 100%); max-height: 90vh; overflow: auto; background: var(--pl-surface); border-radius: 18px; box-shadow: 0 24px 60px rgba(16, 20, 34, 0.3); padding: 20px; }
.pl-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.pl-modal-head h3 { margin: 0; font-size: 17px; }
.pl-modal-x { appearance: none; border: 0; background: var(--pl-surface-2); width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 16px; color: var(--pl-muted); }
.pl-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--pl-muted); margin-bottom: 12px; }
.pl-field input, .pl-field select, .pl-field textarea { font: inherit; font-size: 14px; font-weight: 400; color: var(--pl-text); background: var(--pl-surface); border: 1px solid var(--pl-border-2); border-radius: 10px; padding: 10px 11px; outline: none; }
.pl-field input:focus, .pl-field select:focus, .pl-field textarea:focus { border-color: var(--pl-accent); box-shadow: 0 0 0 4px rgba(91, 91, 240, 0.16); }
.pl-field-hint { font-size: 11px; font-weight: 500; color: var(--pl-soft); margin-top: -1px; }
.pl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.pl-types { display: flex; gap: 7px; flex-wrap: wrap; }
.pl-type-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--pl-border-2); font-size: 12.5px; font-weight: 600; cursor: pointer; background: var(--pl-surface); }
.pl-type-chip.is-on { background: var(--pl-accent-soft); border-color: var(--pl-accent); color: var(--pl-accent); }
.pl-modal-error { color: var(--pl-examen-tx); font-size: 13px; margin: 4px 0 10px; }
.pl-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pl-modal-note { margin-top: 12px; font-size: 11.5px; color: var(--pl-soft); display: flex; align-items: center; gap: 6px; }

/* Mode lecture seule (moniteur) : étiquette + détail de séance en liste de définition. */
.pl-readonly-tag { font-size: 12.5px; font-weight: 700; color: var(--pl-accent); background: var(--pl-accent-soft); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.pl-view { display: grid; gap: 0; margin: 4px 0 0; }
.pl-view > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--pl-border); align-items: baseline; }
.pl-view > div:last-child { border-bottom: 0; }
.pl-view dt { margin: 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pl-soft); }
.pl-view dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--pl-text); }

/* Scroll horizontal de la semaine sur petit écran — CONTENU dans l'agenda, pas la page. */
.pl-agenda-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pl-agenda-inner { min-width: max-content; }

@media (max-width: 720px) {
  .pl-weeklabel { min-width: 0; font-size: 13.5px; }
  .pl-toolbar { gap: 8px; }
  .pl-toolbar-right { width: 100%; justify-content: space-between; }
  .pl-seg { overflow-x: auto; }
  /* Filtres mobile : les chips MONITEUR sur leur propre ligne (scroll horizontal INTERNE), les sélecteurs
     véhicule/type en dessous (50/50). Avant, .pl-monchips se réduisait à 0px dans le filter-row nowrap →
     ses chips débordaient SOUS le select véhicule. */
  .pl-filter-row { flex-wrap: wrap; }
  .pl-monchips { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; min-width: 0; padding-bottom: 2px; }
  .pl-monchips::-webkit-scrollbar { display: none; }
  .pl-monchip { flex: 0 0 auto; }
  .pl-fselect { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .pl-monchip.pl-mine { flex: 0 0 auto; }
  .pl-mondaylabel { min-width: 0; font-size: 13px; }
  .pl-modal-overlay { place-items: end center; padding: 0; }
  .pl-modal { border-radius: 16px 16px 0 0; max-height: 92vh; }
}

/* Espace élève — section « Mes rendez-vous » (lecture seule). Styles autonomes. */
.eleve-rdv { margin: 0 0 18px; }
.eleve-rdv h2 { font-size: 16px; margin: 0 0 10px; }
.eleve-rdv-list { display: flex; flex-direction: column; gap: 9px; }
.eleve-rdv-card { display: flex; align-items: center; gap: 12px; background: #ffffff; border: 1px solid #e6e9f2; border-radius: 14px; padding: 11px 13px; }
.eleve-rdv-date { text-align: center; min-width: 44px; line-height: 1.05; flex: none; }
.eleve-rdv-date b { display: block; font-size: 20px; }
.eleve-rdv-date span { font-size: 10.5px; color: #7a8294; text-transform: uppercase; letter-spacing: 0.03em; }
.eleve-rdv-main { flex: 1; min-width: 0; }
.eleve-rdv-main strong { font-size: 14px; }
.eleve-rdv-main p { margin: 2px 0 0; font-size: 12.5px; color: #5b6473; }
.eleve-rdv-badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex: none; }
.eleve-rdv-empty { color: #7a8294; font-size: 13px; }

/* Recherche intelligente du planning */
.pl-search { position: relative; }
.pl-search-box { display: flex; align-items: center; gap: 7px; border: 1px solid var(--pl-border-2); background: var(--pl-surface); border-radius: 10px; padding: 0 10px; min-width: 230px; }
.pl-search-box:focus-within { border-color: var(--pl-accent); box-shadow: 0 0 0 4px rgba(91, 91, 240, 0.14); }
.pl-search-box svg { color: var(--pl-soft); flex: none; }
.pl-search-box input { border: 0; outline: none; background: transparent; font-size: 13.5px; padding: 9px 0; width: 100%; color: var(--pl-text); }
.pl-search-box button { border: 0; background: transparent; cursor: pointer; color: var(--pl-soft); padding: 2px; display: inline-flex; }
.pl-search-results { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: min(360px, 86vw); background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: 13px; box-shadow: var(--sh-lg, 0 16px 40px rgba(20, 28, 56, 0.16)); max-height: 380px; overflow: auto; padding: 6px; }
.pl-result { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.pl-result:hover { background: var(--pl-surface-2); }
.pl-result-chip { width: 7px; align-self: stretch; min-height: 34px; border-radius: 4px; flex: none; }
.pl-result-date { text-align: center; min-width: 40px; line-height: 1.05; flex: none; }
.pl-result-date b { display: block; font-size: 16px; }
.pl-result-date span { font-size: 10px; color: var(--pl-soft); text-transform: uppercase; }
.pl-result-main { flex: 1; min-width: 0; }
.pl-result-main strong { font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-result-main span { font-size: 12px; color: var(--pl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.pl-search-empty { padding: 16px; text-align: center; color: var(--pl-muted); font-size: 13px; }

@media (max-width: 720px) {
  .pl-search, .pl-search-box { width: 100%; }
  .pl-search-results { width: 100%; }
}

/* ── Bilan de séance (modale planning) : compte-rendu + validation des compétences ── */
.pl-bilan { margin-top: 6px; border-top: 1px dashed var(--pl-border); padding-top: 13px; }
.pl-bilan-head { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; margin-bottom: 10px; color: var(--pl-text); }
.pl-bilan-head svg { color: var(--pl-accent); }
.pl-bilan-textarea { font: inherit; font-size: 14px; font-weight: 400; color: var(--pl-text); background: var(--pl-surface); border: 1px solid var(--pl-border-2); border-radius: 10px; padding: 10px 11px; outline: none; resize: vertical; min-height: 64px; }
.pl-bilan-textarea:focus { border-color: var(--pl-accent); box-shadow: 0 0 0 4px rgba(91, 91, 240, 0.16); }
.pl-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--pl-muted); margin: 8px 0 4px; cursor: pointer; }
.pl-check input { width: 16px; height: 16px; accent-color: var(--pl-accent); }
.pl-bilan-skills { margin-top: 10px; }
.pl-bilan-sublabel { font-size: 12px; font-weight: 700; color: var(--pl-muted); margin-bottom: 7px; }
.pl-bilan-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.pl-bilan-tab { appearance: none; border: 1px solid var(--pl-border-2); background: var(--pl-surface); border-radius: 8px; padding: 5px 12px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--pl-muted); }
.pl-bilan-tab.is-on { background: var(--pl-accent-soft); color: var(--pl-accent); border-color: var(--pl-accent); }
.pl-bilan-list { display: flex; flex-direction: column; gap: 7px; max-height: 280px; overflow-y: auto; padding-right: 3px; }
.pl-bilan-skill { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pl-bilan-skill-label { font-size: 12.5px; color: var(--pl-text); flex: 1; min-width: 0; line-height: 1.3; }
.pl-bilan-levels { display: inline-flex; gap: 3px; flex: none; }
.pl-bilan-lvl { appearance: none; border: 1px solid var(--pl-border-2); background: var(--pl-surface); width: 30px; height: 30px; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--pl-muted); display: inline-flex; align-items: center; justify-content: center; }
.pl-bilan-lvl.is-on { background: var(--pl-accent); color: #fff; border-color: var(--pl-accent); }
.pl-bilan-lvl.lvl-aborde.is-on { background: #d98a1f; border-color: #d98a1f; }
.pl-bilan-lvl.lvl-traite.is-on { background: #2f7fd1; border-color: #2f7fd1; }
.pl-bilan-lvl.lvl-assimile.is-on { background: #1f9d57; border-color: #1f9d57; }
.pl-bilan-lock { font-size: 12.5px; color: var(--pl-examen-tx); margin: 8px 0; }
.pl-bilan-msg { font-size: 12.5px; color: var(--pl-accent); margin: 9px 0 0; font-weight: 600; }

/* ── Fiche REMC (staff) : bandeau lecture seule + niveaux non éditables ── */
.remc-readonly-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #4a4f63; background: #f1f2ff; border: 1px solid #e0e3f5; border-radius: 11px; padding: 9px 12px; margin: 0 0 14px; }
.remc-readonly-note svg { flex: none; color: #5b5bf0; }
.remc-levels.is-readonly .remc-level { cursor: default; }
/* Lecture seule : palier atteint en plein (règle .active existante), les autres en gris net et lisible (plus de délavé). */
.remc-levels.is-readonly .remc-level:not(.active) { background: #f1f2f6; color: #98a0af; }

/* ── Espace élève : séances passées (historique + bilan visible) ── */
.eleve-past { margin-top: 4px; }
.eleve-rdv-card.eleve-past-card { display: block; }
.eleve-rdv-row { display: flex; align-items: center; gap: 12px; }
.eleve-past-report { margin: 10px 0 0; font-size: 13.5px; color: #2a3142; background: #f6f7fb; border: 1px solid #eceef5; border-radius: 10px; padding: 9px 11px; line-height: 1.45; white-space: pre-wrap; }
.eleve-past-report span { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8a93a6; margin-bottom: 3px; }
.eleve-level-date em { font-style: normal; color: #6b7280; }
.eleve-past-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.eleve-past-tags { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.eleve-emarge-on { font-size: 12.5px; color: #1f9d57; font-weight: 700; }
.eleve-emarge-btn { appearance: none; border: 1px solid #4a45e0; background: #4a45e0; color: #fff; border-radius: 9px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.eleve-emarge-btn:disabled { opacity: 0.6; }

/* ── Livret de formation (fiche REMC façon Klaxo) ── */
.livret { display: flex; flex-direction: column; gap: 18px; }
.livret-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.livret-head h2 { margin: 0; font-size: 18px; }
.livret-level { font-size: 12.5px; color: #6b7280; font-weight: 600; }
.livret-phone { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 13.5px; font-weight: 800; color: #2563eb; text-decoration: none; }
.livret-phone:hover { text-decoration: underline; }
/* Téléphone de l'élève, bien visible sur la carte de séance (joindre l'élève absent en un tap). */
.livret-seance-phone { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 11px 36px; padding: 5px 11px; font-size: 13px; font-weight: 800; color: #1d4fd0; background: #eaf1ff; border: 1px solid #cfe0ff; border-radius: 999px; text-decoration: none; width: fit-content; }
.livret-seance-phone:hover { background: #dde9ff; }
.livret-global { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.05; flex: none; }
.livret-global .gauge { width: 140px; }
.livret-global span { display: block; margin-top: -6px; font-size: 11px; color: #8a93a6; text-transform: uppercase; letter-spacing: 0.04em; }

.livret-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.livret-bar { background: #fff; border: 1px solid #e6e9f2; border-radius: 12px; padding: 10px 12px; }
.livret-bar-top { display: flex; align-items: baseline; gap: 5px; font-size: 13px; font-weight: 600; color: #2a3142; }
.livret-bar-top strong { font-weight: 800; }
.livret-bar-top em { margin-left: auto; font-style: normal; font-weight: 800; }
.livret-bar-track { margin-top: 8px; height: 8px; border-radius: 6px; background: #eef0f6; overflow: hidden; }
.livret-bar-track i { display: block; height: 100%; border-radius: 6px; }

.livret-overview { background: #fff; border: 1px solid #e6e9f2; border-radius: 14px; padding: 2px 14px; }
.livret-overview > summary { cursor: pointer; padding: 12px 2px; font-weight: 700; font-size: 14px; color: #2a3142; list-style: none; display: flex; align-items: center; gap: 8px; }
.livret-overview > summary::-webkit-details-marker { display: none; }
.livret-overview > summary::before { content: "▸"; color: #8a93a6; }
.livret-overview[open] > summary::before { content: "▾"; }
.livret-overview[open] > summary { border-bottom: 1px solid #eef0f6; margin-bottom: 10px; }

.livret-seances h3 { font-size: 16px; margin: 0 0 10px; }
.livret-empty { color: #7a8294; font-size: 13.5px; background: #f6f7fb; border-radius: 12px; padding: 16px; }
.livret-seance { background: #fff; border: 1px solid #e6e9f2; border-radius: 13px; margin-bottom: 9px; overflow: hidden; }
.livret-seance.is-open { border-color: #c9cdf3; box-shadow: 0 6px 20px rgba(20, 28, 56, 0.08); }
/* Séance TERMINÉE (heure de fin dépassée) : grisée pour voir d'un coup d'œil où on en est. La 1re séance à venir
   reste donc en clair. Le contenu déplié (bilan) garde son opacité pleine pour rester lisible/utilisable. */
.livret-seance.is-ended { background: #f3f4f7; border-color: #e4e6ec; }
.livret-seance.is-ended .livret-seance-head { opacity: 0.66; }
.livret-seance.is-ended.is-open .livret-seance-head { opacity: 0.85; }
.livret-seance-head { width: 100%; display: flex; align-items: center; gap: 11px; padding: 13px 14px; background: none; border: 0; cursor: pointer; text-align: left; }
.livret-status { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #c3c9d6; }
.livret-status.st-done { background: #1f9d57; }
.livret-status.st-planned { background: #3f7fd0; }
.livret-status.st-absent { background: #e0a32e; }
.livret-seance-main { flex: 1; min-width: 0; }
.livret-seance-main strong { display: block; font-size: 13.5px; color: #1b2230; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.livret-seance-main span { font-size: 12px; color: #6b7280; }
.livret-seance-tags { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.livret-tag { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 6px; color: #fff; }
.tag-c1 { background: #5bb3d0; }
.tag-c2 { background: #ef8e8e; }
.tag-c3 { background: #79c79a; }
.tag-c4 { background: #e0b94f; }
.livret-sign-dot { width: 18px; height: 18px; border-radius: 50%; background: #eaf6ef; color: #1f9d57; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.livret-chev { color: #9aa1b2; flex: none; transition: transform 0.15s; }
.livret-seance.is-open .livret-chev { transform: rotate(180deg); }

.livret-seance-body { padding: 4px 14px 15px; border-top: 1px solid #eef0f6; }
.livret-cancelled { color: #7a8294; font-size: 13px; padding: 10px 0; }
.livret-notstarted { background: #fff7e6; border: 1px solid #f3d99a; color: #9a6a06; font-size: 12.8px; font-weight: 600; border-radius: 10px; padding: 9px 12px; margin: 0 0 12px; }

/* Popup de validation d'un point (élève débutant) : commentaire obligatoire + checklist 5 essais (assimilé). */
.mc-popup-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: grid; place-items: center; padding: 20px; z-index: 1000; }
.mc-popup { width: min(480px, 100%); background: #fff; border-radius: 18px; padding: 20px 22px 22px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25); }
.mc-popup-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.mc-popup-head h3 { margin: 0; font-size: 18px; color: #11203a; }
.mc-popup-x { border: 0; background: #f1f3f7; border-radius: 10px; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; color: #475569; }
.mc-popup-skill { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: #475569; line-height: 1.35; }
.mc-popup-essais { background: #f7f9fc; border: 1px solid #e6e9f2; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.mc-popup-essais-label { display: block; font-size: 12.5px; font-weight: 800; color: #11203a; margin-bottom: 10px; }
.mc-essais-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mc-essai { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #6b7280; cursor: pointer; user-select: none; padding: 9px 4px; border: 1px solid #e6e9f2; border-radius: 10px; background: #fff; }
.mc-essai.is-on { border-color: #16a34a; background: #e9f9ef; color: #119447; }
.app-shell .mc-essai input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; flex: 0 0 auto; accent-color: #16a34a; }
.mc-popup-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: #475569; }
.app-shell .mc-popup-field textarea { font: inherit; font-weight: 400; font-size: 14px; min-height: 76px; padding: 10px 12px; border: 1px solid #d2d6e2; border-radius: 12px; box-shadow: none; background: #fff; resize: vertical; }
.mc-popup-actions { display: flex; gap: 10px; margin-top: 16px; }
@media (max-width: 520px) { .mc-essais-row { grid-template-columns: repeat(3, 1fr); } }
.livret-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: #6b7280; margin: 12px 0 0; }
.livret-field textarea { font: inherit; font-size: 14px; font-weight: 400; color: #1b2230; background: #fff; border: 1px solid #d2d6e2; border-radius: 10px; padding: 10px 11px; outline: none; resize: vertical; min-height: 150px; line-height: 1.5; }
.livret-field textarea:focus { border-color: #5b5bf0; box-shadow: 0 0 0 4px rgba(91, 91, 240, 0.14); }
.livret-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #6b7280; margin: 9px 0 2px; cursor: pointer; }
/* Protection contre `.app-shell input:not([type=file])` (globals.css) qui force width:100% + min-height:58px
   sur tous les inputs — sinon la case « Visible par l'élève » devient une énorme coche pleine largeur. */
.app-shell .livret-check input[type="checkbox"] {
  width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex: 0 0 auto;
  border-radius: 5px; box-shadow: none; background: #fff; accent-color: #5b5bf0;
}

.livret-skills { margin-top: 13px; }
.livret-skills-label { font-size: 12px; font-weight: 700; color: #6b7280; margin-bottom: 7px; }
.livret-skills-tabs { display: flex; gap: 6px; margin-bottom: 9px; }
.livret-skills-tab { appearance: none; border: 1px solid #d2d6e2; background: #fff; border-radius: 8px; padding: 5px 13px; font-size: 13px; font-weight: 800; cursor: pointer; color: #6b7280; }
.livret-skills-tab.is-on { color: #fff; border-color: transparent; }
.livret-skills-tab.remc-blue.is-on { background: #5bb3d0; }
.livret-skills-tab.remc-red.is-on { background: #ef8e8e; }
.livret-skills-tab.remc-green.is-on { background: #79c79a; }
.livret-skills-tab.remc-yellow.is-on { background: #e0b94f; }
.livret-skills-list { display: flex; flex-direction: column; gap: 7px; max-height: 340px; overflow-y: auto; padding-right: 3px; }
.livret-skill { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.livret-skill-label { font-size: 12.5px; color: #2a3142; flex: 1; min-width: 0; line-height: 1.3; }
.livret-lvls { display: inline-flex; gap: 3px; flex: none; }
.livret-lvls button { appearance: none; border: 1px solid #d2d6e2; background: #fff; width: 30px; height: 30px; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer; color: #6b7280; }
.livret-lvls button.is-on { background: #4a45e0; color: #fff; border-color: #4a45e0; }
.livret-lvls button.lvl-aborde.is-on { background: #d98a1f; border-color: #d98a1f; }
.livret-lvls button.lvl-traite.is-on { background: #2f7fd1; border-color: #2f7fd1; }
.livret-lvls button.lvl-assimile.is-on { background: #1f9d57; border-color: #1f9d57; }

.livret-emarge { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 13px; font-size: 12px; color: #8a93a6; }
.livret-emarge .is-on { color: #1f9d57; font-weight: 600; }
.livret-msg { font-size: 12.5px; color: #4a45e0; font-weight: 600; margin: 10px 0 0; }
.livret-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 720px) {
  .livret-bars { grid-template-columns: repeat(2, 1fr); }
  .livret-skill { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ── Espace élève : livret façon Klaxo (barres + heures + groupes + drill + émargement) ── */
.eleve-bars { margin-bottom: 2px; }
.eleve-hours { background: #fff; border: 1px solid #e6e9f2; border-radius: 14px; padding: 12px 15px; font-size: 14px; color: #2a3142; margin-bottom: 4px; }
.eleve-hours-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8a93a6; margin-bottom: 3px; }
.eleve-hours strong { font-size: 18px; color: #4a45e0; }
.eleve-hours em { font-style: normal; color: #6b7280; }

.eleve-group { margin-bottom: 14px; }
.eleve-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 9px; }
.eleve-group-head h2 { font-size: 15px; margin: 0; }
.eleve-group-sub { font-size: 12px; color: #8a93a6; font-weight: 600; white-space: nowrap; }

.eleve-sign-pill { width: 19px; height: 19px; border-radius: 50%; background: #eef0f6; color: #aab0bd; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.eleve-sign-pill.is-on { background: #1f9d57; color: #fff; }

.eleve-drill-tabs { margin-top: 12px; }
.eleve-drill { background: #f8f9fc; border: 1px solid #eceef5; border-radius: 11px; padding: 11px 13px; }
.eleve-drill-title { font-size: 13px; font-weight: 700; color: #2a3142; margin: 0 0 8px; }
.eleve-drill-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.eleve-drill-skill { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #3a4252; }
.eleve-drill-skill > span:first-child { flex: 1; min-width: 0; line-height: 1.3; }

.eleve-emarge-row { align-items: center; flex-wrap: wrap; }
.eleve-emarge-ok { color: #1f9d57; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.eleve-emarge-btn { display: inline-flex; align-items: center; gap: 5px; }
/* Barres C1-C4 = ACCORDÉON cliquable (la section « Mon livret » à grille a été retirée). Reset du bouton pour
   conserver l'aspect des barres. Un clic déroule la compétence en dessous (un point par ligne, pleine largeur). */
.eleve-app .eleve-bar { appearance: none; border: 0; cursor: pointer; text-align: left; font: inherit; width: 100%; transition: box-shadow 120ms ease, transform 120ms ease; }
.eleve-app .eleve-bar.is-open { box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.18) inset; }

/* Compétence dépliée : break-out maîtrisé (plus de largeur), UN point de compétence PAR LIGNE. */
.eleve-comp-panel {
  position: relative; left: 50%; transform: translateX(-50%); width: min(1320px, 96vw); box-sizing: border-box;
  margin-top: 12px; background: #fff; border: 1px solid #e6e9f2; border-radius: 16px; padding: 18px 20px 22px;
}
.eleve-comp-title { margin: 0 0 14px; font-size: 16px; font-weight: 800; color: #1b2230; }
.eleve-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.eleve-point { border: 1px solid #eef0f4; border-radius: 14px; padding: 14px 16px; background: #fcfdfe; }
.eleve-point-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.eleve-point-head { flex: 1; min-width: 240px; }
.eleve-point-comment { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: #1f2937; background: #eef4ff; border: 1px solid rgba(39, 135, 255, 0.25); border-radius: 8px; padding: 8px 11px; }
.eleve-point-comment span { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #2787ff; margin-bottom: 2px; }
.eleve-point-label { margin: 0; font-size: 15px; font-weight: 650; color: #1f2937; line-height: 1.35; }
.eleve-point-label span { color: #9aa1ab; font-weight: 800; margin-right: 3px; }
.eleve-point-bottom { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 12px; }
/* Le segment de niveau reste compact à droite du libellé (et non pleine largeur comme l'override eleve générique). */
.eleve-point .remc-levels.is-readonly { width: auto; flex: 0 0 auto; margin-top: 0; min-width: 280px; }
@media (max-width: 720px) {
  .eleve-comp-panel { left: 0; transform: none; width: 100%; padding: 14px 14px 16px; }
  .eleve-point .remc-levels.is-readonly { width: 100%; min-width: 0; }
}

/* Niveaux Abordé/Traité/Assimilé (lecture seule) côté élève : segment pleine largeur, compact, comme la fiche REMC. */
.eleve-app .remc-levels.is-readonly { display: flex; width: 100%; margin-top: 8px; }
.eleve-app .remc-levels.is-readonly .remc-level { flex: 1 1 0; min-width: 0; padding: 0 6px; min-height: 36px; font-size: 12px; font-weight: 800; }

/* Drill des séances : libellé puis le segment de niveau en dessous. */
.eleve-drill-skill { flex-direction: column; align-items: stretch; gap: 4px; }
.eleve-drill-skill-label { line-height: 1.3; }
.eleve-drill-skill .remc-levels.is-readonly { margin-top: 2px; }

/* Émojis du ressenti : plus petits. */
.eleve-selfeval-btns { max-width: 210px; gap: 6px; }
.eleve-se { min-height: 38px; border-radius: 10px; padding: 4px 4px; }
.eleve-se-emoji { font-size: 19px; }
.eleve-se.active .eleve-se-emoji { transform: scale(1.08); }

/* Largeur plus resserrée pour des lignes lisibles. */
.eleve-app { max-width: 900px; }

/* Barres de compétences en blocs colorés pleins (façon Klaxo). */
.eleve-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 2px; }
.eleve-bar { border-radius: 14px; padding: 11px 13px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.eleve-bar-head { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.eleve-bar-head strong { font-size: 13px; font-weight: 800; text-align: center; }
.eleve-bar .gauge { width: 58px; }

/* Groupes : titres plus affirmés. */
.eleve-group-head h2 { font-weight: 800; color: #1b2230; }

/* Ligne de séance : durée + badge de statut sous le titre. */
.eleve-seance-meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eleve-st-badge { font-size: 10.5px; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.eleve-st-badge.st-done { background: #eaf6ef; color: #1f7a45; }
.eleve-st-badge.st-planned { background: #e9f1fe; color: #1655a8; }
.eleve-st-badge.st-absent { background: #fdeaec; color: #b41d33; }
.eleve-st-badge.st-cancelled { background: #f1f2f5; color: #8a93a6; }

/* « Vue d'ensemble » : onglets compétences en pilules compactes sur une ligne (la synthèse est déjà dans les blocs du haut). */
.eleve-sheet .remc-tabs { gap: 7px; margin-bottom: 10px; }
.eleve-sheet .remc-tab { flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 12px; border-radius: 10px; }
.eleve-sheet .remc-tab strong { font-size: 12px; }
.eleve-sheet .remc-tab em { font-size: 11.5px; }

@media (max-width: 720px) {
  .eleve-bars { grid-template-columns: repeat(2, 1fr); }
}

/* ============ Planification rapide « élève d'abord » (style Klaxo, couleurs maison) ============ */
/* Barre au-dessus des filtres : on choisit un élève → il est « armé » et chaque créneau cliqué le pré-remplit. */
.pl-armbar { margin: 0 0 12px; }
.pl-arm-pick { position: relative; max-width: 460px; }
.pl-arm-search { display: flex; align-items: center; gap: 8px; border: 1.5px dashed var(--pl-border-2); background: var(--pl-surface);
  border-radius: 12px; padding: 0 12px; transition: border-color .14s ease, box-shadow .14s ease; }
.pl-arm-search:focus-within { border-style: solid; border-color: var(--pl-accent); box-shadow: 0 0 0 4px rgba(91, 91, 240, 0.14); }
.pl-arm-search svg { color: var(--pl-accent); flex: none; }
.pl-arm-search input { border: 0; outline: none; background: transparent; font-size: 14px; font-weight: 500; padding: 11px 0; width: 100%; color: var(--pl-text); }
.pl-arm-search > button { border: 0; background: transparent; cursor: pointer; color: var(--pl-soft); padding: 3px; display: inline-flex; }
.pl-arm-list { list-style: none; margin: 6px 0 0; padding: 6px; position: absolute; z-index: 45; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: 14px; box-shadow: var(--sh-lg, 0 16px 40px rgba(20, 28, 56, 0.16)); max-height: 340px; overflow: auto; }
.pl-arm-list li button { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: 0; background: transparent;
  border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.pl-arm-list li button:hover { background: var(--pl-accent-soft); }
.pl-arm-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pl-arm-info strong { font-size: 13.5px; color: var(--pl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-arm-info small { font-size: 11.5px; color: var(--pl-muted); font-weight: 600; }
.pl-arm-ava { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800;
  color: #fff; background: linear-gradient(135deg, #6d6df5, #4f46e5); letter-spacing: 0.02em; }
.pl-arm-ava.is-sm { width: 30px; height: 30px; font-size: 11.5px; }
/* Élève armé : bandeau accent, message d'invite, bouton changer. */
.pl-arm-chip { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 9px 12px;
  background: linear-gradient(100deg, var(--pl-accent-soft), #fff 78%); border: 1px solid var(--pl-conduite-bd); }
.pl-arm-hint { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--pl-accent); white-space: nowrap; }
.pl-arm-x { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--pl-border-2);
  background: var(--pl-surface); color: var(--pl-muted); border-radius: 9px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.pl-arm-x:hover { border-color: var(--pl-accent); color: var(--pl-accent); }

/* Onglets Type dans le popup (Leçon / Examen / Autre) — couleur dédiée par type quand actif. */
.pl-type-tabs { display: flex; gap: 6px; margin-top: 6px; }
.pl-type-tab { flex: 1; appearance: none; cursor: pointer; border: 1px solid var(--pl-border-2); background: var(--pl-surface); color: var(--pl-muted);
  border-radius: 11px; padding: 9px 8px; font-size: 13px; font-weight: 700; transition: all .13s ease; }
.pl-type-tab:hover { border-color: var(--pl-soft); }
.pl-type-tab.is-lecon.is-on { background: var(--pl-conduite-bg); color: var(--pl-conduite-tx); border-color: var(--pl-conduite-bd); }
.pl-type-tab.is-examen.is-on { background: var(--pl-examen-bg); color: var(--pl-examen-tx); border-color: var(--pl-examen-bd); }
.pl-type-tab.is-autre.is-on { background: var(--pl-eval-bg); color: var(--pl-eval-tx); border-color: var(--pl-eval-bd); }
.pl-type-sub { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }

/* Carte progression de l'élève sélectionné dans le popup. */
.pl-stud-prog { display: flex; align-items: center; gap: 10px; margin: -2px 0 2px; padding: 8px 11px; border-radius: 11px;
  background: var(--pl-surface-2); border: 1px solid var(--pl-border); font-size: 12.5px; font-weight: 600; color: var(--pl-muted); }

@media (max-width: 720px) {
  .pl-arm-pick { max-width: 100%; }
  .pl-arm-hint { display: none; }
}

/* ============================================================================
   Refonte « vue claire & épurée » de la grille (inspirée Klaxo, style maison).
   Plus d'air, lignes douces, en-têtes nets, blocs propres, filtres compacts.
   ========================================================================== */
.planning {
  --pl-grid-line: #eef1f7;   /* lignes horaires : plus douces que les bordures structurelles */
  --pl-line-strong: #e3e7f0;
}

/* — Rangée unique : recherche élève À CÔTÉ des filtres (au lieu d'au-dessus) — */
.planning .pl-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 13px; }
.planning .pl-controls > .pl-armbar { margin: 0; flex: 1 1 300px; min-width: 240px; max-width: 480px; }
.planning .pl-controls > .pl-filter-row { margin: 0; flex: 1 1 auto; }
.planning .pl-arm-chip { min-width: 0; }
.planning .pl-arm-hint { overflow: hidden; text-overflow: ellipsis; }

/* — Filtres compacts : selects qui ne s'étirent plus en bandeaux pleine largeur — */
.planning .pl-filter-row { gap: 8px 9px; margin-bottom: 14px; }
.planning .pl-fselect {
  width: auto; flex: 0 0 auto; min-width: 150px; padding: 8px 32px 8px 12px; border-radius: 11px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2399a1b2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
}
.planning .pl-monchip { padding: 6px 13px; }

/* — Légende discrète (épuré : on ne veut pas qu'elle pèse) — */
.planning .pl-legend { font-size: 11.5px; gap: 13px; margin-bottom: 13px; opacity: 0.9; }
.planning .pl-legend .pl-dot { width: 8px; height: 8px; }

/* — Carte agenda : plus douce, légère ombre, coins ronds — */
.planning .pl-agenda { border-radius: 18px; border-color: var(--pl-line-strong); box-shadow: 0 1px 3px rgba(20, 28, 56, 0.05), 0 10px 30px -22px rgba(20, 28, 56, 0.25); }

/* — En-têtes de jours : fond blanc, jour aéré, numéro fort, pastille accent pour aujourd'hui — */
.planning .pl-agenda-head { background: #fff; border-bottom: 1px solid var(--pl-line-strong); }
.planning .pl-agenda-head .pl-daycol-h { padding: 13px 4px 11px; border-left: 1px solid var(--pl-grid-line); }
.planning .pl-daycol-h .pl-dow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pl-soft); }
.planning .pl-daycol-h .pl-dom { display: inline-grid; place-items: center; min-width: 30px; height: 30px; margin-top: 4px; font-size: 18px; font-weight: 800; color: var(--pl-text); line-height: 1; }
.planning .pl-daycol-h.is-today { background: linear-gradient(180deg, rgba(91, 91, 240, 0.06), transparent); }
.planning .pl-daycol-h.is-today .pl-dow { color: var(--pl-accent); }
.planning .pl-daycol-h.is-today .pl-dom { background: var(--pl-accent); color: #fff; border-radius: 50%; box-shadow: 0 3px 8px -2px rgba(91, 91, 240, 0.55); }

/* — Grille : colonnes & gouttière plus claires — */
.planning .pl-daycol { border-left: 1px solid var(--pl-grid-line); }
.planning .pl-daycol.is-today { background: rgba(91, 91, 240, 0.022); }
.planning .pl-gutter .pl-hour { font-size: 11px; font-weight: 600; color: var(--pl-soft); right: 9px; }

/* — Blocs séance : nets, liseré de couleur à gauche, typo claire — */
.planning .pl-lesson { border-radius: 10px; padding: 5px 8px; border: 1px solid transparent; border-left-width: 3px; box-shadow: 0 1px 2px rgba(20, 28, 56, 0.05); }
.planning .pl-lesson b { font-weight: 800; }
.planning .pl-lesson:hover { box-shadow: 0 6px 16px -4px rgba(20, 28, 56, 0.22); }
.planning .pl-lesson.is-conduite { border-left-color: var(--pl-conduite-tx); }
.planning .pl-lesson.is-code { border-left-color: var(--pl-code-tx); }
.planning .pl-lesson.is-plateau { border-left-color: var(--pl-plateau-tx); }
.planning .pl-lesson.is-examen { border-left-color: var(--pl-examen-tx); }
.planning .pl-lesson.is-evaluation { border-left-color: var(--pl-eval-tx); }

/* — Haut plus compact + jours passés à plat (sans hachures = plus propre) — */
.planning .pl-toolbar { margin-bottom: 12px; }
.planning .pl-armbar { margin-bottom: 12px; }
.planning .pl-search-box { min-width: 200px; }
.planning .pl-daycol.is-past { background-color: rgba(123, 133, 153, 0.05); }
.planning .pl-daycol.is-past::before { display: none; }

/* — Filtre moniteurs en menu compact (remplace la rangée de ~20 pastilles) — */
.planning .pl-monfilter { position: relative; }
.planning .pl-fbtn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid var(--pl-border-2); background: var(--pl-surface);
  color: var(--pl-text); border-radius: 11px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.planning .pl-fbtn svg { color: var(--pl-soft); }
.planning .pl-fbtn:hover { border-color: var(--pl-soft); }
.planning .pl-fbtn.is-active { background: #e6f1fb; border-color: #b6d4f0; color: #0c447c; }
.planning .pl-fbtn.is-active svg { color: #0c447c; }
.planning .pl-fmenu-backdrop { position: fixed; inset: 0; z-index: 40; }
.planning .pl-fmenu { position: absolute; z-index: 41; top: calc(100% + 6px); left: 0; width: min(360px, 86vw); padding: 12px;
  background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: 14px; box-shadow: var(--sh-lg, 0 16px 40px rgba(20, 28, 56, 0.16)); }
.planning .pl-fmenu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--pl-soft); }
.planning .pl-fmenu-head button { border: 0; background: transparent; color: var(--pl-accent); font-size: 11.5px; font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: 0; }
.planning .pl-fmenu-chips { display: flex; flex-wrap: wrap; gap: 7px; max-height: 260px; overflow: auto; }

/* Recherche de séance : repliée derrière une loupe (1 seule recherche visible = la barre « planifier un élève ») */
.planning .pl-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--pl-border-2); background: var(--pl-surface); color: var(--pl-muted); cursor: pointer; transition: 0.13s; }
.planning .pl-search-toggle:hover { border-color: var(--pl-soft); color: var(--pl-text); background: var(--pl-surface-2); }
.planning .pl-search.is-open .pl-search-box { min-width: 240px; }

/* — Popover de séance ancré au créneau (façon Klaxo) : pas d'assombrissement, compact, à côté du clic — */
.pl-modal-overlay.is-pop { background: transparent; display: block; padding: 0; }
.pl-modal.pl-pop { position: fixed; width: 372px; max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); margin: 0;
  border-radius: 16px; box-shadow: 0 16px 48px -12px rgba(16, 20, 34, 0.34), 0 0 0 1px rgba(16, 20, 34, 0.08);
  animation: pl-pop-in 0.12s ease-out; }
@keyframes pl-pop-in { from { opacity: 0; transform: translateY(-5px) scale(0.985); } to { opacity: 1; transform: none; } }
/* Bloc « fantôme » du créneau en cours de création + contour de la séance en cours d'édition */
.planning .pl-ghost { position: absolute; left: 3px; right: 3px; border-radius: 10px; background: rgba(91, 91, 240, 0.13);
  border: 1.5px dashed var(--pl-accent); pointer-events: none; z-index: 4; }
.planning .pl-lesson.is-editing { box-shadow: 0 0 0 2px var(--pl-accent), 0 8px 22px -6px rgba(91, 91, 240, 0.5); z-index: 7; }

/* — Popover compact : tout le formulaire tient sans scroll (façon Klaxo) — */
.pl-grid-3 { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 0 9px; }
.pl-modal.pl-pop { padding: 13px 15px; }
.pl-modal.pl-pop .pl-modal-head { margin-bottom: 9px; }
.pl-modal.pl-pop .pl-modal-head h3 { font-size: 16px; }
.pl-modal.pl-pop .pl-field { margin-bottom: 8px; gap: 3px; font-size: 11px; }
.pl-modal.pl-pop .pl-field input { padding: 7px 10px; font-size: 13.5px; border-radius: 9px; }
.pl-modal.pl-pop .pl-field .combobox-input { padding: 7px 30px 7px 10px; font-size: 13.5px; border-radius: 9px; }
.pl-modal.pl-pop .pl-type-tabs { margin-top: 4px; }
.pl-modal.pl-pop .pl-type-tab { padding: 7px 8px; }
.pl-modal.pl-pop .pl-type-sub { margin-top: 6px; }
.pl-modal.pl-pop .pl-stud-prog { margin: -3px 0 6px; padding: 5px 9px; font-size: 12px; }
.pl-modal.pl-pop .pl-modal-actions { margin-top: 7px; gap: 7px; }