/* ------------------------------------------------------------------
   Surcharges applicatives de TacTac.
   Le socle visuel vient de design-kit (packages/design-kit, chargé
   AVANT ce fichier dans index.html). Ici : accent de l'app, classes
   exigées par notification-kit (absentes du design-kit), et quelques
   éléments spécifiques (échéances, cascade d'urgence).
   ------------------------------------------------------------------ */
:root {
  --accent: #0d7377;
  --accent-hover: #0a5d60;
  --accent-dim: rgba(13, 115, 119, 0.08);
  --accent-mid: rgba(13, 115, 119, 0.35);
}

/* ── notification-kit : classes requises par NotificationBell ─────── */
.notification-bell { position: relative; }
.notification-bell-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--r1);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.notification-bell-btn:hover { background: var(--bg-inset); color: var(--ink-1); }
.notification-badge {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: var(--r-full); background: var(--err); color: #fff;
  font-size: 10px; line-height: 16px; text-align: center; font-weight: 600;
}
.notification-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px); width: 340px; max-height: 420px;
  overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); z-index: 60;
}
.notification-dropdown-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s8) var(--s12); border-bottom: 1px solid var(--line); font-weight: 600;
}
.notification-item {
  display: block; width: 100%; text-align: left; padding: var(--s8) var(--s12);
  border: 0; border-bottom: 1px solid var(--line); background: transparent;
  color: var(--ink-1); cursor: pointer;
}
.notification-item:hover { background: var(--bg-inset); }
.notification-item.unread { background: var(--accent-dim); }
.notification-item-title { font-weight: 600; font-size: var(--t-13, 13px); }
.notification-item-body { color: var(--ink-2); font-size: var(--t-12, 12px); }
.notification-item-time { color: var(--ink-3); font-size: var(--t-11, 11px); }
.notification-empty { padding: var(--s24); text-align: center; color: var(--ink-3); }

/* ── Échéances / retards ───────────────────────────────────────────── */
.echeance-ok      { color: var(--ink-2); }
.echeance-proche  { color: var(--warn); font-weight: 600; }
.echeance-ratee   { color: var(--err);  font-weight: 600; }

/* La cellule « orange » de l'Excel, réincarnée : demande sans remplaçant. */
.demande-non-resolue { background: var(--warn-dim); }

/* ── Cascade d'urgence ─────────────────────────────────────────────── */
.cascade-liste { display: flex; flex-direction: column; gap: var(--s8); }
.cascade-etape {
  display: flex; align-items: center; gap: var(--s12);
  padding: var(--s8) var(--s12); border: 1px solid var(--line); border-radius: var(--r1);
  background: var(--surface);
}
.cascade-etape.en_cours { border-color: var(--accent); background: var(--accent-dim); }
.cascade-etape.reussi   { border-color: var(--ok);  background: var(--ok-dim); }
.cascade-etape.echec    { opacity: 0.75; }
.cascade-etape.saute    { opacity: 0.45; }

/* Pastille de pôle (couleur dynamique via style inline) */
.pole-dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-full); }

/* Logo (haut à gauche / bas à gauche) : .brand-logo, .sidebar-footer et
   .sidebar-logo viennent du design-kit ; le choix de l'emplacement se fait via
   [data-logo] sur <html> (ThemeContext). Rien à surcharger ici. */

/* Bandeau dev (env-kit, DEPLOY_ENV=dev) : le kit le place en bas et expose sa
   hauteur dans --dev-env-banner-h ; la sidebar fixe (et son logo bas à gauche)
   et l'assistant flottant restent au-dessus de lui. */
html.has-dev-env-banner .sidebar { bottom: var(--dev-env-banner-h); }
html.has-dev-env-banner .chatbubble-wrap { bottom: calc(var(--s24) + var(--dev-env-banner-h)); }

/* ── Assistant flottant (chatbox) ───────────────────────────────────── */
.chatbubble-wrap { position: fixed; right: var(--s24); bottom: var(--s24); z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s12); }
.chatbubble-toggle {
  width: 52px; height: 52px; border-radius: var(--r-full); border: none;
  background: var(--accent); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); transition: all var(--dt-fast);
}
.chatbubble-toggle:hover { background: var(--accent-hover); transform: scale(1.05); }
.chatbubble-panel {
  width: 360px; max-width: calc(100vw - var(--s32)); height: 480px; max-height: calc(100vh - 120px);
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.chatbubble-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s12) var(--s16); border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: var(--t-13); color: var(--ink-1);
}
.chatbubble-messages {
  flex: 1; overflow-y: auto; padding: var(--s16);
  display: flex; flex-direction: column; gap: var(--s12);
}
.chatbubble-msg { max-width: 85%; padding: var(--s8) var(--s12); border-radius: var(--r2); font-size: var(--t-13); line-height: 1.4; white-space: pre-wrap; }
.chatbubble-msg-assistant { align-self: flex-start; background: var(--bg-inset); color: var(--ink-1); }
.chatbubble-msg-user { align-self: flex-end; background: var(--accent); color: #fff; }
.chatbubble-msg-erreur { align-self: flex-start; background: var(--err-dim); color: var(--err); }
/* Trois points animés pendant que l'assistant réfléchit. */
.chatbubble-dots { display: inline-flex; align-items: center; gap: 5px; height: 1.4em; }
.chatbubble-dots span { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--ink-3); animation: chatbubble-point 1.2s ease-in-out infinite; }
.chatbubble-dots span:nth-child(2) { animation-delay: 0.15s; }
.chatbubble-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatbubble-point { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .chatbubble-dots span { animation: none; opacity: 0.6; } }

/* Menu de gauche replié à la main (bande de 48 px du design-kit) : les filets entre rubriques n'ont plus rien à séparer. */
.shell--collapsed .sidebar .sidebar-rule { display: none; }
.sidebar-toggle { gap: var(--s8); }
.chatbubble-input-row { display: flex; gap: var(--s8); padding: var(--s12); border-top: 1px solid var(--line); }
.chatbubble-input-row .form-input { flex: 1; }

/* ── Fiche demande : frise de progression + carte « Prochaine étape » ──── */
/* Couleur dédiée au/à la remplaçant·e (pas de token design-kit) — mêmes
   teintes claires/sombres que le reste via color-mix côté fonds. Relevée en
   mode sombre (comme --accent l'est par le design-kit) pour rester lisible
   sur fond foncé. */
:root { --parcours-remp: #9333ea; }
[data-theme="dark"] { --parcours-remp: #c084fc; }

.frise { display: flex; margin: var(--s16) 0 var(--s8); }
.frise-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.frise-step::before { content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: var(--line-strong); }
.frise-step:first-child::before { display: none; }
.frise-circle {
  width: 26px; height: 26px; border-radius: var(--r-full); background: var(--bg);
  border: 2px solid var(--line-strong); color: var(--ink-3);
  display: flex; align-items: center; justify-content: center; font-size: var(--t-11); font-weight: 700; z-index: 1;
}
.frise-lbl { font-size: 10.5px; margin-top: 5px; color: var(--ink-3); line-height: 1.2; max-width: 84px; }
.frise-step.done .frise-circle { background: var(--ok); border-color: var(--ok); color: #fff; }
.frise-step.done::before { background: var(--ok); }
.frise-step.done .frise-lbl { color: var(--ink-2); }
.frise-step.current::before { background: var(--ok); }
.frise-step.current .frise-circle {
  background: var(--fs-accent, var(--accent)); border-color: var(--fs-accent, var(--accent)); color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fs-accent, var(--accent)) 22%, transparent);
}
.frise-step.current .frise-lbl { color: var(--fs-accent, var(--accent)); font-weight: 700; }

/* Carte « Prochaine étape » : réunit AU MÊME ENDROIT « où en est-on » (statut
   en clair) ET « quoi faire » (les vrais boutons d'action de la personne). La
   couleur de la barre de gauche + l'icône reprennent l'acteur qui tient la
   balle (--pe-c posée en inline). Remplace l'ancien bandeau + la carte Actions
   séparée, qui décrochaient visuellement et pouvaient promettre un bouton
   absent. */
.prochaine-etape {
  border: 1px solid var(--line); border-left: 4px solid var(--pe-c, var(--accent));
  border-radius: var(--r2); background: var(--surface);
  padding: var(--s20); margin-bottom: var(--s16);
}
.pe-head { display: flex; align-items: flex-start; gap: var(--s12); }
.pe-ic {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--pe-c, var(--accent)) 14%, transparent);
  color: var(--pe-c, var(--accent));
  display: flex; align-items: center; justify-content: center;
}
.pe-txt { flex: 1; min-width: 0; }
.pe-eyebrow { font-size: var(--t-11); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--pe-c, var(--accent)); }
.pe-titre { font-size: var(--t-17); font-weight: 700; margin-top: 1px; color: var(--ink-1); }
.pe-sub { font-size: var(--t-13); color: var(--ink-2); margin-top: 3px; }
.pe-actions { display: flex; flex-wrap: wrap; gap: var(--s8); margin-top: var(--s16); }

/* ── Nouvelle demande, étape 1 : distinguer un atelier prévu (détecté par le
   planning, coché par défaut) d'un atelier exceptionnel (pas de séance
   connue ce jour-là, à cocher seulement si besoin) — même typographie avant
   ce changement, seule une légende facile à manquer les différenciait. ── */
.seance-groupe-prevu {
  background: var(--ok-dim); border-left: 4px solid var(--ok);
  border-radius: var(--r2); padding: var(--s12) var(--s16); margin-bottom: var(--s12);
}
.seance-groupe-prevu-head { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--t-13); color: var(--ok); margin-bottom: 6px; }
.seance-groupe-prevu label { font-weight: 600; color: var(--ink-1); }

.seance-groupe-exceptionnel {
  background: var(--bg-inset); border: 1.5px dashed var(--line-strong);
  border-radius: var(--r2); padding: var(--s12) var(--s16); margin: 0 0 var(--s12) var(--s8);
}
.seance-groupe-exceptionnel-head { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-13); color: var(--ink-3); margin-bottom: 6px; }
.seance-groupe-exceptionnel label { color: var(--ink-2); font-weight: 400; }

.seance-dot-check {
  width: 16px; height: 16px; border-radius: var(--r-full); background: var(--ok); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.seance-dot-outline { width: 16px; height: 16px; border-radius: var(--r-full); border: 1.5px solid var(--line-strong); flex-shrink: 0; }

/* ── « Je me propose » : confirmation à la place (panneau du jour) ──────
   Remplace l'ancien comportement (l'item disparaissait du panneau sans
   explication dès que son statut sortait du périmètre « collègues »). La
   confirmation reste là où la personne vient de cliquer — jamais un bandeau
   ailleurs qu'elle risque de ne pas voir. */
.proposition-confirmee { background: var(--ok-dim); border: 1px solid var(--ok); border-radius: var(--r2); padding: var(--s8) var(--s12); margin-bottom: var(--s8); }
.proposition-confirmee-titre { color: var(--ok); font-weight: 700; font-size: var(--t-13); }
.proposition-confirmee-sub { color: var(--ink-2); font-size: var(--t-12); margin-top: 2px; }

/* ── « Mes propositions en cours » (Tableau de bord, onglet collègues) ──
   Trace durable après la fermeture du panneau — répond à « où en est ma
   proposition ? » sans avoir à la retrouver soi-même. N'existe dans le DOM
   que s'il y a au moins une proposition (jamais de bloc vide). */
.mes-propositions { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r2); background: var(--surface); padding: var(--s12) var(--s16); margin-bottom: var(--s16); }
.mes-propositions-head { font-size: var(--t-11); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--accent); margin-bottom: var(--s8); }
.mes-propositions-ligne { display: flex; align-items: center; gap: var(--s12); padding: var(--s8) 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.mes-propositions-ligne:first-of-type { border-top: none; }

/* ── Bibliothèque FRA (FakPage) ──────────────────────────────────────────
   Cartes de fiches : liseré haut à la couleur du pôle (--pole posée inline),
   thématiques en pastilles, pied compact (difficulté, retours, fraîcheur).
   Les ateliers sans fiche restent visibles mais atténués : un rappel, pas
   un trou. */
.fak-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s12); }
.fak-card { border: 1px solid var(--line); border-top: 3px solid var(--pole, var(--line-strong)); border-radius: var(--r2); background: var(--surface); padding: var(--s12) var(--s16); cursor: pointer; transition: box-shadow .1s; }
.fak-card:hover, .fak-card:focus-visible { box-shadow: var(--shadow-2, 0 2px 8px rgba(0,0,0,.08)); outline: none; }
.fak-card-manquant { opacity: .65; }
.fak-card-nom { font-weight: 700; font-size: var(--t-15); color: var(--ink-1); }
.fak-card-sous { color: var(--ink-3); font-size: var(--t-12); margin: 1px 0 var(--s8); }
.fak-card-themes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--s8); }
.fak-theme { font-size: var(--t-11); padding: 2px 8px; border-radius: var(--r-full); background: var(--bg-inset); color: var(--ink-2); }
.fak-card-foot { display: flex; align-items: center; gap: var(--s12); font-size: var(--t-11); color: var(--ink-3); flex-wrap: wrap; }

/* « Vos fiches à soigner » — même langage visuel que .ma-fiche de la maquette :
   un rappel doux, jamais un reproche. */
.fak-section-head { font-size: var(--t-11); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--ink-3); margin: 0 0 var(--s8); display: flex; align-items: center; gap: var(--s8); }
.fak-section-head-note { font-weight: 400; text-transform: none; letter-spacing: 0; }
.fak-ma-fiche { display: flex; align-items: center; gap: var(--s12); border: 1px solid var(--warn); background: var(--warn-dim); border-radius: var(--r2); padding: var(--s8) var(--s12); margin-bottom: var(--s8); flex-wrap: wrap; }

/* Couverture par pôle (vue gestion) : où sont les trous de transmission. */
.fak-couverture { border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); padding: var(--s12) var(--s16); }
.fak-couverture-ligne { display: flex; align-items: center; gap: var(--s12); font-size: var(--t-12); margin: 4px 0; }
.fak-couverture-pole { width: 110px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); flex-shrink: 0; }
.fak-couverture-dot { width: 8px; height: 8px; border-radius: var(--r-full); display: inline-block; }
.fak-couverture-barre { flex: 1; max-width: 300px; height: 6px; background: var(--bg-inset); border-radius: var(--r-full); overflow: hidden; }
.fak-couverture-barre i { display: block; height: 100%; border-radius: var(--r-full); }

/* Encart « FRA disponible » dans la cascade d'urgence : rappel discret
   pendant les appels, la fiche complète s'ouvre par-dessus. */
.fak-encart { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r2); background: var(--surface); padding: var(--s8) var(--s12); }
.fak-encart-titre { font-size: var(--t-11); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--accent); }

/* Nudge « rédiger la fiche » après création d'un atelier (AteliersPage) —
   la fiche naît avec l'atelier (BPMN), jamais bloquant. */
.fak-nudge { display: flex; align-items: center; gap: var(--s12); border: 1px solid var(--ok); background: var(--ok-dim); border-radius: var(--r2); padding: var(--s8) var(--s12); flex-wrap: wrap; }

/* FRA en aperçu (FicheFakOverlay) — sections internes de la modale. */
.fak-fiche-h { font-size: var(--t-11); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin: var(--s16) 0 var(--s4); font-weight: 700; }
.fak-fiche-themes { margin: 0; padding-left: 18px; font-size: var(--t-13); color: var(--ink-2); }
.fak-fiche-themes li { margin-bottom: 3px; }
.fak-fiche-retour { border-top: 1px solid var(--line); padding: var(--s8) 0; }
.fak-fiche-retour:first-of-type { border-top: none; }

/* Chaque date sélectionnée = une carte distincte (bordure + fond), pour que la
   frontière entre deux dates soit nette (les blocs prévu/exceptionnel internes
   brouillaient l'ancien titre flottant). En-tête de date bien marqué. */
.date-card {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r2);
  padding: var(--s16); margin-bottom: var(--s16);
}
.date-card:last-child { margin-bottom: 0; }
.date-card-title { font-size: var(--t-15); font-weight: 700; text-transform: capitalize; margin-bottom: var(--s12); padding-bottom: var(--s8); border-bottom: 1px solid var(--line); }

/* ── Onglet Recherche : bannière « où en est la recherche » + stepper canaux ──
   Réutilise le langage visuel de « Prochaine étape », mais VIT DANS l'onglet
   (bas de page) : il ne pilote que la recherche (y a-t-il un·e candidat·e ?
   échéance dépassée ?). Couleur posée en inline via --rb-c. */
/* --ok-hover : même logique que --accent-hover (plus foncé en clair, plus
   clair en sombre — pas de token --ok-hover dans le design-kit). */
:root { --ok-hover: #2f6b4e; }
[data-theme="dark"] { --ok-hover: #7ad4a8; }
.btn-ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn-ok:hover { background: var(--ok-hover); border-color: var(--ok-hover); color: #fff; }

.rech-banniere {
  display: flex; align-items: center; gap: var(--s16);
  border: 1px solid var(--line); border-left: 4px solid var(--rb-c, var(--ok));
  border-radius: var(--r2); background: var(--surface);
  padding: var(--s12) var(--s16); margin-bottom: var(--s16);
}
.rech-banniere-ic {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--rb-c, var(--ok)) 14%, transparent);
  color: var(--rb-c, var(--ok));
  display: flex; align-items: center; justify-content: center;
}
.rech-banniere-txt { flex: 1; min-width: 0; }
.rech-banniere-eyebrow { font-size: var(--t-11); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--rb-c, var(--ok)); }
.rech-banniere-titre { font-size: var(--t-15); font-weight: 700; margin-top: 1px; color: var(--ink-1); }
.rech-banniere-sub { font-size: var(--t-13); color: var(--ink-2); margin-top: 1px; }
.rech-banniere-actions { flex-shrink: 0; display: flex; gap: var(--s8); flex-wrap: wrap; }

.rech-step { display: flex; gap: var(--s12); }
.rech-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.rech-dot {
  width: 24px; height: 24px; border-radius: var(--r-full); flex-shrink: 0;
  background: var(--bg); border: 2px solid var(--line-strong); color: var(--ink-3);
  display: flex; align-items: center; justify-content: center; font-size: var(--t-12); font-weight: 700;
}
.rech-dot.done { background: var(--ok); border-color: var(--ok); color: #fff; }
/* done-empty : pas de remplissage (contraste blanc-sur-gris insuffisant en
   clair) — reprend le style neutre par défaut de .rech-dot, juste le glyphe
   ✓ en plus pour dire « round clos, terminé sans candidat ». */
.rech-dot.done-empty { background: var(--bg); border-color: var(--line-strong); color: var(--ink-3); }
.rech-dot.late { background: var(--err); border-color: var(--err); color: #fff; }
.rech-dot.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.rech-line { flex: 1; width: 2px; background: var(--line); margin: 3px 0; min-height: 8px; }
.rech-step-body { flex: 1; min-width: 0; padding-bottom: var(--s16); }
.rech-step-head { display: flex; align-items: center; gap: var(--s8); cursor: pointer; padding: 2px 0; }
.rech-step-title { font-weight: 700; }
.rech-step-meta { margin-left: auto; font-size: var(--t-12); color: var(--ink-3); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.rech-chevron { color: var(--ink-3); font-size: 10px; width: 12px; text-align: center; }
.rech-detail { margin-top: var(--s8); }
.rech-reponse { display: flex; align-items: center; gap: var(--s8); font-size: var(--t-13); margin: 5px 0; flex-wrap: wrap; }
.rech-reponse .assigne-ok { font-size: var(--t-12); color: var(--ok); font-weight: 600; }
.rech-toggle-link { background: none; border: none; color: var(--accent); padding: 4px 0; font-size: var(--t-13); font-weight: 600; cursor: pointer; font-family: var(--font); }

/* ── Lisibilité : le gris tertiaire du design-kit (#9a9a96) n'offre que 2,7:1 sur
   fond clair (4,5:1 requis pour du petit texte). On le fonce pour le thème clair ;
   le thème sombre garde sa valeur (déjà ~4,5:1). Dates, aides, statuts secondaires. */
:root { --ink-3: #6e6e6a; }
[data-theme="dark"] { --ink-3: #8a8a86; }

/* ── « Demandes des collègues » : liste groupée, vos pôles en premier ─────────── */
.collegues { display: grid; gap: 12px; }
.collegues-groupe { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 8px;
  font-size: var(--t-13); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.collegues-groupe small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-3); font-size: var(--t-13); }
.collegue-ligne { display: grid; grid-template-columns: 62px minmax(0, 1fr) 132px; gap: 12px; align-items: start;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r1); }
.collegue-ligne.masquee { opacity: .55; }
.collegue-date { width: 62px; border: 1.5px solid var(--ink-3); border-radius: var(--r1); text-align: center; padding-block: 4px; line-height: 1.1; }
.collegue-date small { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ink-3); }
.collegue-date b { font-size: 19px; }
.collegue-infos { display: grid; gap: 3px; min-width: 0; }
.collegue-l1 { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: var(--t-14); }
.collegue-l2 { font-size: var(--t-13); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.collegue-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.etat-chip { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 3px;
  background: var(--accent-dim); color: var(--accent); max-width: 100%; }
.etat-chip.relance { background: var(--warn-dim); color: var(--warn); }
.etat-chip.urg { background: var(--err-dim); color: var(--err); }
.etat-chip.gest { background: var(--bg-inset); color: var(--ink-2); border: 1px solid var(--line); }
.collegue-alerte { font-size: var(--t-13); color: var(--warn); display: flex; gap: 6px; align-items: baseline; }
.collegue-epingle { border: 2px solid var(--accent); background: var(--accent-dim); border-radius: var(--r2); padding: 10px 12px; display: grid; gap: 8px; }
.collegue-epingle .haut { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.collegue-epingle .collegue-ligne { border-color: transparent; }
.proposer-alerte { background: var(--warn-dim); border-radius: var(--r1); padding: 9px 12px; font-size: var(--t-13); margin-bottom: 10px; }
@media (max-width: 760px) {
  .collegue-ligne { grid-template-columns: 54px minmax(0, 1fr); }
  .collegue-date { width: 54px; }
  .collegue-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}

.collegue-nom { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: var(--t-14); color: var(--ink-1); text-align: left; cursor: pointer; }
.collegue-nom:hover { text-decoration: underline; }

/* Calendrier : « ‹ MOIS ANNÉE › Aujourd'hui » (le mois est le titre de la grille) et la légende, sur la même ligne, juste au-dessus de la grille. */
/* wrap-reverse : quand la légende ne tient pas à côté du sélecteur de mois, elle passe AU-DESSUS de lui — le sélecteur reste toujours juste au-dessus de la grille (règle du 21/10). */
.calendrier-entete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap-reverse; gap: var(--s8) var(--s16); margin-bottom: var(--s8); }
.calendrier-nav { display: flex; align-items: center; gap: var(--s8); }
.calendrier-mois { min-width: 150px; text-align: center; font-size: var(--t-15); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-1); }
.calendrier-legende { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s16); }

/* Calendrier « Mes demandes » en cartes (DECISIONS §25) : chaque demande se lit dans sa case — atelier, heure, état, progression, une phrase.
   Le point = le pôle. Bord gauche : rouge = urgent, orange = pas encore réglé, neutre = le reste (toujours doublé de mots). Espacements sur la grille de 4 px. */
.cal-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.calendrier-legende svg { width: 12px; height: 12px; vertical-align: -1px; }
.cal-leg { display: inline-flex; align-items: center; gap: var(--s4); }
.cal-leg-bord { display: inline-block; width: 4px; height: 16px; }
.cal-leg-bord--urgent { background: var(--err); }
.cal-leg-bord--areg { background: var(--warn); }
.cal-absent-legende { color: var(--err-ink); font-weight: 500; }
.toggle-input:focus-visible + .toggle-slider { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.cal-jour { min-height: 112px; padding: var(--s8); border-top: 1px solid var(--line); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s4); min-width: 0; container-type: inline-size; }
.cal-jour--passe, .cal-jour--hors { background: var(--bg); }
.cal-jour--compact { min-height: 56px; }
.cal-num { align-self: flex-start; min-width: 20px; font-size: var(--t-12); font-weight: 600; line-height: 20px; color: var(--ink-1); }
.cal-jour--hors .cal-num { color: var(--ink-3); }
.cal-num--auj { background: var(--accent); color: #fff; border-radius: var(--r-full); padding: 0 var(--s8); text-align: center; }
.cal-absent { font-size: var(--t-12); font-weight: 500; color: var(--err-ink); }
.cal-pile { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.cal-carte { display: grid; gap: var(--s4); width: 100%; min-width: 0; text-align: left; font: inherit; color: var(--ink-1); background: var(--surface); border: 1px solid var(--line-strong); border-left: 4px solid var(--line-strong); border-radius: var(--r1); padding: var(--s4) var(--s8); cursor: pointer; }
.cal-carte:hover { border-color: var(--accent); }   /* le fond ne change pas : les contrastes restent justes au survol */
.cal-carte--urgent, .cal-carte--urgent:hover { border-left-color: var(--err); }
.cal-carte--areg, .cal-carte--areg:hover { border-left-color: var(--warn); }
.cal-carte:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.cal-l1 { display: flex; align-items: flex-start; gap: var(--s4); min-width: 0; font-size: var(--t-12); font-weight: 600; line-height: 1.35; }
.cal-dot { margin-top: 3px; flex-shrink: 0; }
.cal-nom { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cal-h { flex-shrink: 0; color: var(--ink-2); font-size: var(--t-11); font-weight: 400; font-variant-numeric: tabular-nums; }
/* Gestion : la personne absente et son/sa remplaçant·e (« Alexia S. → David V. »), sous l'atelier. */
.cal-qui { font-size: var(--t-11); line-height: 1.3; color: var(--ink-2); overflow-wrap: anywhere; }
.cal-l2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); min-width: 0; }
.cal-l2 .badge, .cal-pdet-badges .badge { display: inline-flex; align-items: center; gap: var(--s4); padding-block: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.cal-icone { width: 12px; height: 12px; flex-shrink: 0; }
.cal-l3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s8); min-width: 0; }
/* Les traits de la carte sont plus courts que ceux de la liste : `.frise-mini-points` est défini plus bas dans ce fichier, d'où la double classe. */
.frise-mini-points.cal-frise { gap: 2px; }
.frise-mini-points.cal-frise i { width: 12px; }
.cal-phase { min-width: 0; font-size: var(--t-12); color: var(--ink-2); overflow-wrap: anywhere; }
.cal-avous { font-weight: 600; color: var(--ink-1); }
.cal-phrase { font-size: var(--t-12); color: var(--ink-2); line-height: 1.35; }
.cal-phrase .cal-icone { display: inline-block; margin-left: 2px; vertical-align: -2px; color: var(--ink-3); }
.cal-cta { font-weight: 600; color: var(--accent-ink); }
.cal-cta .cal-icone { color: inherit; }
/* Case étroite (≈ 1 024 px avec le menu ouvert) : traits plus courts, l'étape passe à la ligne — jamais coupée */
@container (max-width: 190px) {
  .frise-mini-points.cal-frise i { width: 8px; }
  .cal-l3 { flex-direction: column; align-items: flex-start; gap: 2px; }
}
/* Les badges orange, teal et rouge du kit sont sous 4,5:1 en petit texte : dans les cartes, leur texte prend l'encre lisible de la même teinte. */
.cal-carte .badge-warn, .cal-pdet .badge-warn { color: var(--warn-ink); }
.cal-carte .badge-accent, .cal-pdet .badge-accent { color: var(--accent-ink); }
.cal-carte .badge-err, .cal-pdet .badge-err { color: var(--err-ink); }
/* Détail du jour */
.panel-slide { max-width: 100vw; }   /* à 360 px (téléphone, zoom 400 %), le panneau de 400 px était coupé à gauche */
.cal-pt { margin: 0; }
.cal-pdets { display: flex; flex-direction: column; gap: var(--s12); }
.cal-pdet { display: grid; gap: var(--s8); padding: var(--s12); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--r1); }
.cal-pdet--focus { border-color: var(--accent); border-left-color: var(--accent); }
.cal-pdet-t { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4) var(--s8); margin: 0; font-size: var(--t-14); font-weight: 600; color: var(--ink-1); }
.cal-pdet-t:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.cal-pdet-t .cal-dot { margin-top: 0; }
.cal-pdet-meta { font-size: var(--t-13); font-weight: 400; color: var(--ink-2); }
.cal-pdet-badges { display: flex; flex-wrap: wrap; gap: var(--s4); }
.cal-pdet-p { margin: 0; font-size: var(--t-13); color: var(--ink-2); line-height: 1.45; }
.cal-pdet-p b { font-weight: 600; color: var(--ink-1); }
.cal-pdet-actions { display: flex; flex-wrap: wrap; gap: var(--s8); }

/* Tipee a SA couleur (bleu), toujours la même : pastille « Repérée dans Tipee », carte d'absence, bandeau d'urgences. */
:root { --tipee: #3b5bdb; --tipee-dim: #e8ecfd; }
[data-theme="dark"] { --tipee: #9db0ff; --tipee-dim: #1d2440; }
.badge-tipee { color: var(--tipee); border-color: var(--tipee); background: var(--tipee-dim); }
.pastille { display: inline-block; font-size: var(--t-11); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 7px; border-radius: var(--r2); white-space: nowrap; background: var(--bg-inset); color: var(--ink-2); }
.pastille-tipee { background: var(--tipee-dim); color: var(--tipee); }
.pastille-recherche { background: var(--accent-dim); color: var(--accent); }
.pastille-brouillon { background: var(--warn-dim); color: var(--warn); }
.pastille-urgence { background: var(--err-dim); color: var(--err); }

/* Gestion : séances à couvrir d'urgence, en tête du tableau de bord (rouge) ; vert quand il n'y en a pas. */
.bandeau-urgence { border: 2px solid var(--err); background: var(--err-dim); border-radius: var(--r1); padding: var(--s12) var(--s16); display: grid; gap: var(--s8); }
.bandeau-urgence-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s4) var(--s12); }
.bandeau-urgence-gros { font-size: 30px; font-weight: 800; line-height: 1; color: var(--err); font-variant-numeric: tabular-nums; }
.bandeau-urgence-titre { margin: 0; font-size: var(--t-17); font-weight: 800; color: var(--ink-1); }
.bandeau-urgence-sous { font-size: var(--t-13); color: var(--ink-2); }
.bandeau-urgence-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.bandeau-urgence-ligne { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--s12); align-items: center; background: var(--surface); border-radius: var(--r1); padding: var(--s8) var(--s12); font-size: var(--t-13); }
.bandeau-urgence-quand { font-weight: 800; color: var(--err); font-variant-numeric: tabular-nums; }
.bandeau-calme { border: 1px solid var(--ok); background: var(--ok-dim); color: var(--ok); border-radius: var(--r1); padding: var(--s8) var(--s16); font-weight: 700; font-size: var(--t-14); }
@media (max-width: 640px) { .bandeau-urgence-ligne { grid-template-columns: 1fr; } }

/* Intervenant·e : une absence trouvée dans Tipee — ce qui est fait (dans Tipee) et ce qui reste à faire (ici). */
.carte-tipee { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--tipee); border-radius: var(--r1); padding: var(--s12) var(--s16); display: grid; gap: var(--s12); }
.carte-tipee-qui { font-size: var(--t-11); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tipee); }
.carte-tipee-titre { margin: 0; font-size: var(--t-17); font-weight: 700; text-wrap: balance; color: var(--ink-1); }
.carte-tipee-etapes { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s8); align-items: center; }
.carte-tipee-etape { border-radius: var(--r1); padding: var(--s8) var(--s12); display: grid; gap: 2px; font-size: var(--t-13); }
.carte-tipee-etape b { font-size: var(--t-13); }
.carte-tipee-etape small { font-size: var(--t-12); color: var(--ink-2); }
.carte-tipee-etape-faite { background: var(--ok-dim); color: var(--ok); }
.carte-tipee-etape-afaire { background: var(--warn-dim); color: var(--warn); }
.carte-tipee-fleche { color: var(--ink-3); font-weight: 800; }
.carte-tipee-seances { list-style: none; margin: 0; padding: 0; display: grid; font-size: var(--t-13); }
.carte-tipee-seances li { padding: var(--s4) 0; border-top: 1px solid var(--line); }
.carte-tipee-seances li:first-child { border-top: 0; }
.carte-tipee-lien { background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-13); font-weight: 600; color: var(--tipee); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) { .carte-tipee-etapes { grid-template-columns: 1fr; } .carte-tipee-fleche { display: none; } }

/* Liste « Mes demandes » : où en est la demande — les étapes de la fiche en petits traits, et une phrase. */
.frise-mini { display: grid; gap: var(--s4); }
.frise-mini-points { display: flex; gap: 3px; align-items: center; }
.frise-mini-points i { display: block; box-sizing: border-box; width: 22px; height: 6px; border-radius: var(--r1); background: transparent; border: 1px solid var(--ink-3); }
.frise-mini-points i.fait { background: var(--accent-ink); border-color: var(--accent-ink); }
.frise-mini-points i.encours { height: 10px; background: var(--warn); border-color: var(--ink-1); }
.frise-mini-phrase { font-size: var(--t-12); color: var(--ink-2); line-height: 1.35; }
.frise-mini-phrase b { color: var(--ink-1); }

/* En-tête de fiche : les badges (type, origine, état) s'alignent par le HAUT — le libellé précis de l'état reste sous le sien
   (centrés, le badge « Repérée dans Tipee » paraissait décalé d'une demi-ligne). */
.header-controls-haut { align-items: flex-start; margin-left: auto; }
.page-header:has(.header-controls-haut) { flex-wrap: wrap; }

/* Étape 7 « Retour » : la carte (à écrire, à lire, en attente) et l'édition de la FRA avec le retour à côté. */
.retour-carte { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r1); padding: var(--s12) var(--s16); display: grid; gap: var(--s12); margin-bottom: var(--s16); }
.retour-carte-attente { border-left-color: var(--warn); }
.retour-qui { font-size: var(--t-11); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.retour-carte-attente .retour-qui { color: var(--warn); }
.retour-titre { margin: 0; font-size: var(--t-17); font-weight: 700; text-wrap: balance; color: var(--ink-1); }
.retour-sous { margin: 0; font-size: var(--t-13); color: var(--ink-2); }
.retour-confirmation { display: grid; gap: var(--s8); background: var(--warn-dim); border: 1px solid var(--warn); border-radius: var(--r1); padding: var(--s8) var(--s12); }
.retour-lien { background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-13); font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.retour-h { margin: var(--s12) 0 var(--s4); font-size: var(--t-13); font-weight: 700; color: var(--ink-1); }
.retour-h2 { font-size: var(--t-11); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); margin-top: var(--s8); }
.retour-texte { margin: var(--s4) 0 0; font-size: var(--t-13); color: var(--ink-1); white-space: pre-wrap; }
.fra-edition { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s24); align-items: start; }
.fra-edition-retour { background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r1); padding: var(--s12) var(--s16); position: sticky; top: 0; }
@media (max-width: 760px) { .fra-edition { grid-template-columns: 1fr; } }

/* ── Nouvelle demande en calendrier (docs/DECISIONS.md §26) : calendrier du mois + panneau « Ma demande » ─────────────────────────────────
   Tokens du kit uniquement. Les textes d'état prennent les encres lisibles (--accent-ink, --warn-ink, --ok-hover) : l'accent et l'ambre du kit sont des
   couleurs de bordure, pas de texte (sous 4,5:1). Couleur de pôle passée par --pole. */
/* La marge haute de .shell (sous la barre fixe) ne doit pas remonter jusqu'à la page : sinon la page entière défile de 48 px alors que tout y tient. */
#root:has(.nd) { display: flow-root; }
html.has-dev-env-banner #root:has(.nd) .shell, html.has-dev-env-banner #root:has(.nd) .content { min-height: calc(100vh - var(--topbar-h) - var(--dev-env-banner-h, 0px)); }
.nd { display: grid; grid-template-columns: minmax(0, 1fr) 384px; height: calc(100dvh - var(--nd-decalage, var(--topbar-h))); min-height: 0; position: relative; }
/* L'environnement DEV réserve une bande fixe en bas de l'écran : la page ne passe pas dessous (sinon « Envoyer » est caché). */
html.has-dev-env-banner .nd { height: calc(100dvh - var(--nd-decalage, var(--topbar-h)) - var(--dev-env-banner-h, 0px)); }
.nd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nd-micro { font-size: var(--t-10); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s4); }
.nd-aide { margin: var(--s4) 0 0; font-size: var(--t-12); color: var(--ink-2); line-height: 1.45; }
.nd-alerte { margin: 0; padding: var(--s8) var(--s12); font-size: var(--t-12); color: var(--ink-1); border: 1px solid var(--warn); background: var(--warn-dim); display: flex; flex-wrap: wrap; gap: var(--s8); align-items: center; }
.nd-alerte p { margin: 0; }
.nd-lien { display: inline-flex; align-items: center; gap: var(--s4); background: none; border: 0; padding: 2px 0; font: inherit; font-size: var(--t-12); color: var(--accent-ink); cursor: pointer; text-align: left; }
.nd-lien:hover { text-decoration: underline; }
.nd-lien:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.nd-lien--ligne { display: inline; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
/* « Autre activité ce jour-là » revient sous chaque jour : discret (encre secondaire), en couleur au survol et au focus */
.nd-jour-panneau .nd-lien[data-fid^="on"] { color: var(--ink-2); }
.nd-jour-panneau .nd-lien[data-fid^="on"]:hover, .nd-jour-panneau .nd-lien[data-fid^="on"]:focus-visible { color: var(--accent-ink); }
.nd-av { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-inset); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-10); font-weight: 600; color: var(--ink-2); flex-shrink: 0; }
.nd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pole, var(--ink-3)); flex-shrink: 0; }

/* ── Colonne calendrier ── */
.nd-cal { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: var(--s16) var(--s20) var(--s12); gap: var(--s8); }
.nd-cal-tete { position: relative; }
.nd-cal-tete .page-meta { font-size: var(--t-12); color: var(--ink-2); margin: 2px 0 0; }
/* Le sélecteur de mois est TOUJOURS juste au-dessus de la grille (BarreMois, rendue par le calendrier lui-même). Quand la phrase « Aussi choisis (gardés) » ne tient pas
   à côté, elle passe AU-DESSUS (wrap-reverse) : jamais entre le sélecteur et les jours. */
.nd-barre { display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: space-between; gap: var(--s4) var(--s16); flex: 0 0 auto; }
.nd-barre .calendrier-nav { flex-shrink: 0; }
.nd-garde { margin: 0; flex: 1 1 16rem; min-width: 0; font-size: var(--t-11); line-height: 1.4; color: var(--ink-2); text-align: right; }
.nd-legende { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s16); font-size: var(--t-11); color: var(--ink-2); }
.nd-leg { display: inline-flex; align-items: center; gap: var(--s4); }
.nd-leg svg { flex-shrink: 0; }
/* Lien d'évitement : invisible tant qu'il n'a pas le focus (le calendrier compte des dizaines d'arrêts Tab avant le panneau). */
.nd-saut:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nd-saut:focus { position: absolute; top: 0; right: 0; z-index: 3; }   /* par-dessus l'en-tête : il ne pousse pas le calendrier vers le bas quand il apparaît */
/* Une seule ligne, hauteur fixe : un texte trop long est coupé par « … » (en entier dans l'info-bulle) et la grille ne bouge jamais sous la souris. */
/* « contain: inline-size » : la ligne d'aide ne dicte pas sa largeur à la colonne (sans cela, son texte d'une seule ligne élargissait toute la page sous ~790 px, menu ouvert). */
.nd-hint { height: 18px; margin: 0; font-size: var(--t-12); line-height: 18px; color: var(--ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; contain: inline-size; }
.nd-grille { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--surface); user-select: none; touch-action: pan-y; }
.nd-ligne { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); flex: 1 1 0; min-height: 0; border-top: 1px solid var(--line); }
.nd-ligne--tete { flex: 0 0 auto; border-top: 0; }
/* Semaine entièrement passée : rien à choisir, ligne basse (rend la hauteur aux semaines utiles) */
.nd-passee { flex: 0 0 30px; }
.nd-passee .nd-jour { padding-top: 2px; padding-bottom: 0; }
.nd-colh { padding: var(--s8); font-size: var(--t-10); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.nd-jour { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid var(--line); padding: 2px var(--s4) var(--s4) var(--s8); display: flex; flex-direction: column; gap: 2px; cursor: pointer; outline: none; }
.nd-jour:first-child { border-left: 0; }
.nd-jour:hover { background: var(--bg-inset); }
.nd-jour:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-ink); }
.nd-jour.is-hors .nd-num { color: var(--ink-3); }
/* Jours du mois voisin : fond un peu différent pour ne pas les confondre avec le mois affiché */
.nd-jour.is-hors:not(.is-choisi):not(.is-passe) { background: var(--bg); }
.nd-jour.is-passe { cursor: not-allowed; background: var(--bg); }
.nd-jour.is-passe .nd-num { color: var(--ink-3); text-decoration: line-through; }
.nd-jour.is-choisi { background: color-mix(in srgb, var(--accent-ink) 12%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent-ink); }
.nd-jour.is-choisi:focus-visible { box-shadow: inset 3px 0 0 var(--accent-ink), inset 0 0 0 2px var(--accent-ink); }
.nd-jour.is-apercu-ajout { background: color-mix(in srgb, var(--accent-ink) 12%, var(--surface)); outline: 1px dashed var(--accent-ink); outline-offset: -2px; }
.nd-jour.is-apercu-retrait { background: var(--bg-inset); outline: 1px dashed var(--ink-3); outline-offset: -2px; }
.nd-jour-haut { display: flex; align-items: center; gap: var(--s8); min-height: 18px; }
.nd-num { font-size: var(--t-12); font-weight: 600; color: var(--ink-1); }
.nd-coche { display: inline-flex; align-items: center; gap: 2px; font-size: var(--t-10); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.nd-auj { font-size: var(--t-10); color: var(--accent-ink); border: 1px solid var(--accent-ink); padding: 0 4px; border-radius: var(--r2); }
.nd-fantome { display: flex; align-items: center; gap: var(--s4); font-size: var(--t-11); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-vide { font-size: var(--t-11); color: var(--ink-2); font-style: italic; }
.nd-note-j { display: flex; gap: var(--s4); align-items: center; font-size: var(--t-11); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-plus { align-self: flex-start; padding: 0 var(--s8); height: 18px; min-height: 24px; font: inherit; font-size: var(--t-11); font-weight: 600; color: var(--ink-1); background: var(--bg-inset); border: 1px solid var(--line-strong); border-radius: var(--r2); cursor: pointer; }
.nd-plus:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }

/* ── Pastille de séance (calendrier ET panneau : même composant) ── */
.nd-pastille { display: flex; flex-direction: column; gap: 0; width: 100%; min-width: 0; text-align: left; font: inherit; color: var(--ink-1); background: var(--surface); border: 1px solid var(--line-strong); border-left: 3px solid var(--pole, var(--ink-3)); border-radius: var(--r2); padding: 1px var(--s4) 1px var(--s8); cursor: pointer; }
.nd-pastille:hover { border-color: var(--accent-ink); border-left-color: var(--pole, var(--ink-3)); background: var(--bg-inset); }
.nd-pastille:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.nd-pastille[aria-expanded="true"] { border-color: var(--accent-ink); border-left-color: var(--pole, var(--ink-3)); box-shadow: 0 0 0 1px var(--accent-ink); }
.nd-pastille-l1, .nd-pastille-l2 { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.nd-pastille-l1 { font-size: var(--t-11); font-weight: 500; }
.nd-pastille-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.nd-pastille-h { color: var(--ink-2); font-size: var(--t-11); flex-shrink: 0; }
.nd-pastille-ico { display: none; flex-shrink: 0; }
.nd-pastille-l2 { font-size: var(--t-10); color: var(--ink-2); }
.nd-pastille-l2 > span:not(.nd-msg) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-pastille-l2 svg { flex-shrink: 0; }
.nd-msg { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; color: var(--accent-ink); flex-shrink: 0; }
.nd-st-rech .nd-pastille-l2, .nd-leg.nd-st-rech { color: var(--ink-2); }
.nd-pastille.nd-st-rech { border-style: dashed; border-left-style: solid; }
.nd-st-trouve .nd-pastille-l2, .nd-leg.nd-st-trouve { color: var(--ok-hover); font-weight: 500; }
.nd-pastille.nd-st-trouve { background: var(--ok-dim); }
.nd-st-deja .nd-pastille-l2, .nd-leg.nd-st-deja { color: var(--warn-ink); font-weight: 500; }
.nd-pastille.nd-st-deja { background: var(--warn-dim); }
.nd-pastille.nd-st-off { background: var(--bg); border-style: dotted; border-left-style: solid; }
.nd-pastille.nd-st-off .nd-pastille-nom { text-decoration: line-through; color: var(--ink-3); }
.nd-st-off .nd-pastille-l2, .nd-leg.nd-st-off { color: var(--ink-3); }
.nd-pastille.nd-manque { border-color: var(--err); border-left-color: var(--pole, var(--ink-3)); }
/* Case basse : la pastille tient sur une ligne (icône de statut à côté du nom ; texte du statut en info-bulle et pour les lecteurs d'écran) */
.nd-pastille--compacte .nd-pastille-l2 { display: none; }
.nd-pastille--compacte .nd-pastille-ico { display: inline-flex; color: var(--ink-2); }
.nd-pastille--compacte.nd-st-trouve .nd-pastille-ico { color: var(--ok-hover); }
.nd-pastille--compacte.nd-st-deja .nd-pastille-ico { color: var(--warn-ink); }

/* ── Panneau « Ma demande » ── */
.nd-panneau { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--surface); }
.nd-panneau-corps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s16) var(--s20); position: relative; }
.nd-panneau-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s8); }
.nd-panneau-titre { margin: 0; font-size: var(--t-17); font-weight: 600; }
.nd-reste { border: 1px solid var(--line); padding: var(--s8) var(--s12); margin-bottom: var(--s12); background: var(--bg); }
.nd-reste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nd-reste-it { display: flex; align-items: center; gap: var(--s8); width: 100%; background: none; border: 0; padding: 3px 0; font: inherit; font-size: var(--t-13); color: var(--ink-1); text-align: left; cursor: pointer; }
.nd-reste-it:hover span:nth-of-type(2) { text-decoration: underline; }
.nd-reste-it:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.nd-reste-it.is-ok { color: var(--ink-2); }
.nd-rond { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--ink-3); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nd-reste-it.is-ok .nd-rond { background: var(--ok-hover); border-color: var(--ok-hover); color: var(--surface); }
.nd-sec { padding: var(--s12) 0; border-top: 1px solid var(--line); }
.nd-sec.is-flash { box-shadow: inset 3px 0 0 var(--accent-ink); padding-left: var(--s8); }
.nd-h { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s8); margin: 0 0 var(--s8); font-size: var(--t-13); font-weight: 600; }
.nd-requis { font-size: var(--t-10); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.nd-garant .nd-requis { color: var(--ink-2); }
.nd-cpts { display: inline-flex; gap: var(--s4); flex-wrap: wrap; margin-left: auto; }
.nd-cpts .badge-warn { color: var(--warn-ink); }
.nd-cpts .badge-ok { color: var(--ok-hover); }
.nd-verrou { display: flex; align-items: center; gap: var(--s8); padding: var(--s8); border: 1px solid var(--line); background: var(--bg); color: var(--ink-1); }
.nd-ligne-boutons { display: flex; flex-wrap: wrap; gap: var(--s8); align-items: center; margin-top: var(--s8); }

/* « Quand ? » : une ligne Du / Au par période, synchronisée avec le calendrier */
.nd-periodes { display: grid; gap: var(--s8); padding: var(--s8) var(--s12) var(--s12); border: 1px solid var(--line); background: var(--bg); }
.nd-per-tete, .nd-per { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px; gap: var(--s4) var(--s8); align-items: center; }
.nd-per-tete { font-size: var(--t-11); color: var(--ink-2); margin-bottom: calc(-1 * var(--s4)); }
.nd-per .form-input { width: 100%; min-width: 0; }
.nd-per .btn-icon { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.nd-per-info { grid-column: 1 / -1; font-size: var(--t-11); color: var(--ink-2); }
.nd-per + .nd-per { padding-top: var(--s8); border-top: 1px solid var(--line); }
.nd-periodes > .nd-lien { justify-self: start; }
.nd-per-msg { display: flex; gap: var(--s8); align-items: flex-start; margin: 0; padding: var(--s8); font-size: var(--t-12); color: var(--ink-1); border: 1px solid var(--warn); background: var(--warn-dim); }
.nd-periodes .nd-aide { margin: 0; }
.nd-case { display: flex; gap: var(--s8); align-items: flex-start; margin-top: var(--s8); font-size: var(--t-12); color: var(--ink-2); line-height: 1.4; cursor: pointer; }
.nd-case strong { color: var(--ink-1); font-weight: 600; }
.nd-case input { margin-top: 2px; accent-color: var(--accent-ink); }

/* Séances, jour par jour */
.nd-jour-panneau { display: grid; gap: var(--s4); margin-top: var(--s12); outline: none; }
.nd-jour-panneau:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.nd-jour-t { font-size: var(--t-11); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.nd-jour-ligne { display: flex; gap: var(--s4); align-items: center; }
.nd-jour-panneau .nd-pastille { padding: var(--s4) var(--s8); }
.nd-jour-panneau .nd-pastille-l1 { font-size: var(--t-12); }
.nd-jour-panneau .nd-pastille-l2 { font-size: var(--t-11); }
.nd-nj { font-size: var(--t-12); }
.nd-nj-aide { margin: 0; font-size: var(--t-11); }
.nd-ajout-atelier .form-select { width: 100%; font-size: var(--t-12); }

/* Motif, solde, Tipee, précisions */
.nd-motif { display: grid; gap: var(--s4); }
.nd-motif .selectable.active { color: var(--accent-ink); }
.nd-recap .badge-warn { color: var(--warn-ink); }
.nd-recap .badge-accent { color: var(--accent-ink); }
.nd-recap .badge-ok { color: var(--ok-hover); }
.nd-motif .selectable { display: flex; align-items: center; gap: var(--s8); text-align: left; font: inherit; font-size: var(--t-13); width: 100%; }
.nd-solde { display: flex; gap: var(--s8); align-items: flex-start; margin: var(--s8) 0 0; padding: var(--s8); font-size: var(--t-12); border: 1px solid var(--line); color: var(--ink-1); }
.nd-solde.is-warn { border-color: var(--warn); background: var(--warn-dim); }
.nd-tipee { border: 1px solid var(--warn); background: var(--warn-dim); padding: var(--s8) var(--s12); }
.nd-tipee p { margin: 0 0 var(--s8); font-size: var(--t-13); }
.nd-tipee p.nd-aide { font-size: var(--t-12); margin: var(--s8) 0 0; }
.nd-tipee.is-ok { border-color: var(--ok); background: var(--ok-dim); }
.nd-tipee .btn svg { margin-left: 4px; }
.nd-ok { display: flex; align-items: center; gap: var(--s8); color: var(--ok-hover); font-weight: 500; margin: 0 !important; }
.nd-ok .nd-lien { margin-left: auto; }
.nd-notes { width: 100%; resize: vertical; font-size: var(--t-13); }
.nd-panneau-pied { display: flex; flex-direction: column; gap: var(--s8); padding: var(--s12) 88px var(--s12) var(--s20); border-top: 1px solid var(--line); background: var(--surface); }
.nd-pied-txt { display: flex; gap: var(--s8); align-items: flex-start; font-size: var(--t-12); color: var(--ink-2); line-height: 1.4; }
.nd-erreur { color: var(--err-ink); }
.nd-envoyer { justify-content: center; gap: var(--s8); }
.nd-envoyer[aria-disabled="true"] { opacity: 1; background: var(--bg-inset); border-color: var(--line-strong); color: var(--ink-1); cursor: not-allowed; }

/* ── Fenêtre d'une séance (ancrée à côté d'elle, par-dessus la page) ── */
.nd-fenetre { position: fixed; z-index: 120; width: 340px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 72px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r1); box-shadow: 0 8px 28px rgba(0, 0, 0, .18); padding: var(--s12); display: grid; gap: var(--s8); }
html.has-dev-env-banner .nd-fenetre { max-height: calc(100dvh - 72px - var(--dev-env-banner-h, 0px)); }
.nd-fenetre-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s8); }
.nd-fenetre-t { display: flex; align-items: center; gap: var(--s8); font-weight: 600; font-size: var(--t-14); }
.nd-fenetre-pied { display: flex; justify-content: space-between; align-items: center; padding-top: var(--s8); border-top: 1px solid var(--line); }
.nd-modes { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s4); }
.nd-modes legend { padding: 0; }
.nd-mode { display: flex; gap: var(--s8); align-items: flex-start; padding: var(--s8); border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.nd-mode:hover { background: var(--bg-inset); }
.nd-mode.is-on { border-color: var(--accent-ink); background: color-mix(in srgb, var(--accent-ink) 12%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent-ink); }
.nd-mode input { margin: 2px 0 0; accent-color: var(--accent-ink); flex-shrink: 0; }
.nd-mode:focus-within { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.nd-mode-txt { display: grid; gap: 2px; min-width: 0; }
.nd-mode-t { display: flex; align-items: center; gap: var(--s4); font-size: var(--t-13); font-weight: 600; color: var(--ink-1); }
.nd-mode-t svg { flex-shrink: 0; }
.nd-mode-d { font-size: var(--t-11); color: var(--ink-2); line-height: 1.35; }
/* La personne choisie : « Retirer » à côté du nom, la case « Aussi pour… » juste dessous */
.nd-choisi { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s4) var(--s8); align-items: center; padding: var(--s8); border: 1px solid var(--ok); background: var(--ok-dim); }
.nd-choisi-txt { display: grid; min-width: 0; }
.nd-nom-choisi { font-size: var(--t-14); font-weight: 600; color: var(--ink-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.nd-retirer { display: inline-flex; align-items: center; gap: var(--s4); align-self: start; background: var(--surface); }
.nd-choisi .nd-aussi { grid-column: 2 / -1; margin: var(--s4) 0 0; color: var(--ink-1); }
/* Juste après « Retirer » : ce qui s'est passé, avec « Annuler » */
.nd-note { display: flex; gap: var(--s8); align-items: flex-start; padding: var(--s8); border: 1px solid var(--line-strong); background: var(--bg); font-size: var(--t-12); color: var(--ink-1); line-height: 1.4; }
.nd-note svg { flex-shrink: 0; margin-top: 1px; }
.nd-note p { margin: 0; }
.nd-note p + p { margin-top: var(--s4); }
.nd-prevenir .nd-aide { margin-top: 0; margin-bottom: var(--s8); }
.nd-puces { display: flex; flex-wrap: wrap; gap: var(--s8); }
.nd-puces .chip { display: inline-flex; align-items: center; gap: var(--s4); }
.nd-cb-l { margin: var(--s4) 0 0; }
.nd-lb { list-style: none; margin: 0; padding: 0; max-height: 236px; overflow-y: auto; border: 1px solid var(--line); }
.nd-grp { padding: var(--s4) var(--s8); font-size: var(--t-10); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--bg); position: sticky; top: 0; }
.nd-opt { display: flex; gap: var(--s8); align-items: flex-start; padding: var(--s4) var(--s8); cursor: pointer; border-top: 1px solid var(--line); }
.nd-opt:hover, .nd-opt.is-actif { background: var(--bg-inset); box-shadow: inset 2px 0 0 var(--accent-ink); }
/* Mode contraste élevé (Windows) : les ombres disparaissent, le focus des cases, l'option active de la liste et le motif choisi passent par des contours. */
.nd-jour:focus-visible, .nd-opt.is-actif { outline: 2px solid transparent; outline-offset: -2px; }
@media (forced-colors: active) {
  .nd-jour:focus-visible, .nd-opt.is-actif { outline-color: Highlight; }
  .nd-motif .selectable.active { border-width: 3px; }
}
.nd-opt.is-sel { background: color-mix(in srgb, var(--accent-ink) 12%, var(--surface)); }
.nd-opt-txt { display: grid; min-width: 0; }
.nd-opt-nom { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); font-size: var(--t-13); font-weight: 500; color: var(--ink-1); }
.nd-opt-xp { font-size: var(--t-11); color: var(--ink-2); }
.nd-opt-dispo { display: flex; align-items: center; gap: var(--s4); font-size: var(--t-11); color: var(--ok-hover); }
.nd-opt-dispo.is-non { color: var(--warn-ink); }
.nd-garant { display: grid; gap: var(--s4); padding: var(--s8); border: 1px solid var(--warn); background: var(--warn-dim); }
.nd-garant .form-label { margin: 0; }

/* ── Fenêtres de fin (confirmation, aperçu) ── */
.nd-recap { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); }
.nd-recap li { display: flex; align-items: center; gap: var(--s8); padding: var(--s8) var(--s12); border-top: 1px solid var(--line); font-size: var(--t-13); }
.nd-recap li:first-child { border-top: 0; }
.nd-recap .nd-r-nom { flex: 1; min-width: 0; }
.nd-recap .nd-r-nom small { display: block; color: var(--ink-2); font-size: var(--t-12); }
.nd-r-actions { display: inline-flex; gap: var(--s4); }
.nd-recap-deja { margin-top: var(--s12); }
.nd-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s4) var(--s16); margin: 0; font-size: var(--t-13); }
.nd-dl dt { color: var(--ink-3); }
.nd-dl dd { margin: 0; }
.nd-apercu-etat { display: grid; gap: var(--s8); margin-bottom: var(--s12); }

/* ── Écran étroit ou zoom (le menu ouvert compris) : le panneau passe sous le calendrier, la page défile.
   (Pas de « container query » : elle ferait de la page le repère des fenêtres fixes, qui ne tiendraient plus dans l'écran.) */
.nd--etroit { display: block; height: auto; }
html.has-dev-env-banner .nd--etroit { height: auto; }   /* le bandeau DEV imposait une hauteur d'écran : en une colonne la page défile et le pied collant cachait la fin du panneau */
html:has(.nd--etroit) { scroll-padding-top: 64px; }   /* en une colonne, la barre du haut (fixe, 48 px) ne masque plus l'élément qui reçoit le focus ni le titre « Ma demande » */
.nd--etroit .nd-cal { min-height: 0; }
.nd--etroit .nd-grille { flex: none; }
.nd--etroit .nd-ligne { flex: none; min-height: 120px; }
.nd--etroit .nd-ligne--tete { min-height: 0; }
.nd--etroit .nd-passee { min-height: 30px; flex: none; }
.nd--etroit .nd-panneau { border-left: 0; border-top: 1px solid var(--line); }
.nd--etroit .nd-panneau-corps { overflow: visible; }
.nd--etroit .nd-panneau-pied { position: sticky; bottom: 0; padding-right: 88px; z-index: 5; }
html.has-dev-env-banner .nd--etroit .nd-panneau-pied { bottom: var(--dev-env-banner-h, 0px); }
html:has(.nd--etroit) { scroll-padding-bottom: 112px; }
html.has-dev-env-banner:has(.nd--etroit) { scroll-padding-bottom: calc(112px + var(--dev-env-banner-h, 0px)); }
@media (prefers-reduced-motion: reduce) { .nd, .nd * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ── Messages à envoyer (Slack / e-mail / SMS) : états en clair, docs/DECISIONS.md §24 ───────────────────────────────────── */
/* Textes d'état : le jaune et le teal du kit sont des couleurs de bordure ; en texte ils restent sous 4,5:1 (clair pour l'ambre,
   sombre pour le teal). On prend ici une teinte de texte plus foncée en clair, plus claire en sombre. */
:root { --warn-ink: #7a5200; --accent-ink: #0b6366; --err-ink: #c0282a; --msg-warn-ink: var(--warn-ink); --msg-accent-ink: var(--accent-ink); }
[data-theme="dark"] { --warn-ink: #f0b860; --accent-ink: #5cc3c8; --err-ink: var(--err); }
.msg-badge--a_envoyer { border-color: var(--warn); color: var(--msg-warn-ink); background: var(--warn-dim); }
.msg-badge--envoi_en_cours { border-color: var(--msg-accent-ink); color: var(--msg-accent-ink); }
.nav-link .nav-compte { margin-left: var(--s8); min-width: 18px; padding: 0 var(--s4); border-radius: 999px; background: var(--warn-dim); border: 1px solid var(--warn); color: var(--msg-warn-ink); font-size: var(--t-11); font-weight: 700; text-align: center; line-height: 16px; display: inline-block; font-variant-numeric: tabular-nums; }
.shell--collapsed .nav-link .nav-compte { display: none; }
.msg-pile { display: grid; gap: var(--s12); }
.msg-section { display: grid; gap: var(--s8); margin-bottom: var(--s16); }
.msg-groupe { margin: 0; font-size: var(--t-12); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s8); }
.msg-groupe small { font-size: var(--t-13); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.msg { border: 1px solid var(--line); border-left: 4px solid var(--line-strong, var(--line)); border-radius: var(--r1); background: var(--surface); padding: var(--s12) var(--s16); display: grid; gap: var(--s8); min-width: 0; }
.msg:focus { outline: none; }
.msg:focus-visible { outline: 2px solid var(--msg-accent-ink); outline-offset: 2px; }
.msg[data-etat="a_envoyer"] { border-left-color: var(--warn); }
.msg[data-etat="erreur"] { border-left-color: var(--err); }
.msg[data-etat="envoye"] { border-left-color: var(--ok); }
.msg[data-etat="envoi_en_cours"] { border-left-color: var(--msg-accent-ink); }
.msg[data-etat="plus_utile"] { background: var(--bg-inset); }   /* distingué par le fond et le badge gris, jamais par une opacité qui rendrait le texte illisible */
.msg-haut { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4) var(--s8); }
.msg-canal { font-size: var(--t-11); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
.msg-canal--slack { color: var(--msg-accent-ink); }
.msg-meta { font-size: var(--t-12); color: var(--ink-3); line-height: 1.4; }
.msg-apercu { background: var(--bg-inset); border-radius: var(--r1); padding: var(--s8) var(--s12); font-size: var(--t-13); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-apercu--court { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.msg-lien { justify-self: start; background: none; border: 0; padding: 2px 0; font: inherit; font-size: var(--t-12); font-weight: 600; color: var(--msg-accent-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.msg-lien:focus-visible { outline: 2px solid var(--msg-accent-ink); outline-offset: 2px; }
.msg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s8); }
.msg-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.msg-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s12); padding: var(--s8) 0; border-top: 1px solid var(--line); font-size: var(--t-13); }
.msg-ligne:first-child { border-top: 0; }
.msg-ligne-qui { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }

/* ── Prévenir personnellement / dates flexibles (DECISIONS §26) ── */
.badge-flex { gap: var(--s4); color: var(--accent-ink); border-color: var(--accent-ink); }
.collegue-pense { display: flex; align-items: flex-start; gap: var(--s8); font-size: var(--t-13); font-weight: 600; color: var(--accent-ink); line-height: 1.4; }
.collegue-pense svg { flex-shrink: 0; margin-top: 2px; }
.prevenus-perso { display: flex; align-items: flex-start; gap: var(--s8); padding: var(--s8) var(--s12); border: 1px solid var(--line); border-radius: var(--r1); background: var(--bg-inset); font-size: var(--t-13); color: var(--ink-1); line-height: 1.45; margin-bottom: var(--s12); }
.prevenus-perso svg { flex-shrink: 0; margin-top: 2px; color: var(--accent-ink); }
.prevenus-perso-t { font-weight: 600; }
.prevenus-perso .text-ink-3 { color: var(--ink-2); }
/* L'intitulé de la demande épinglée porte maintenant « … pense à vous » : encre d'accent lisible en clair ET en sombre (AA). */
.collegue-epingle .haut { color: var(--accent-ink); }

/* ── Console Urgence (DECISIONS §29) : déclarer à gauche, travailler UNE urgence à droite ───────────────────────────────────────
   Tokens du kit seulement ; espacements sur la grille de 4 px. Jamais la couleur seule : chaque état a un mot ou une icône. */
.u-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s8) var(--s16); }
.u-maj { display: inline-flex; align-items: center; gap: var(--s8); font-size: var(--t-12); color: var(--ink-3); }
.u-layout { display: grid; grid-template-columns: minmax(330px, 400px) minmax(0, 1fr); gap: var(--s16); align-items: start; }
@media (max-width: 1180px) { .u-layout { grid-template-columns: minmax(0, 1fr); } }
.u-col { display: grid; gap: var(--s16); min-width: 0; }
.u-titre { margin: 0 0 var(--s4); font-size: var(--t-14); font-weight: 600; color: var(--ink-1); display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; }
.u-aide { margin: 0 0 var(--s8); font-size: var(--t-12); color: var(--ink-2); }

/* Déclarer : une seule entrée, par nom */
.u-recherche .search-input { font-size: var(--t-15, 15px); padding-block: var(--s8); }
.u-fenetre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s8); margin-block: var(--s8); }
.u-seances { list-style: none; margin: 0; padding: 0; }
.u-seance { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s8); padding: var(--s8) 0; border-top: 1px solid var(--line); align-items: center; }
.u-seance:first-child { border-top: 0; }
.u-seance-t { font-size: var(--t-13); font-weight: 600; color: var(--ink-1); display: flex; align-items: baseline; gap: var(--s8); flex-wrap: wrap; min-width: 0; }
.u-seance-h { font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: var(--t-12); }
.u-seance-s { grid-column: 1; font-size: var(--t-12); color: var(--ink-2); display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; }
.u-seance-a { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.u-vide { font-size: var(--t-13); color: var(--ink-2); margin: var(--s8) 0 0; }
.u-lien { background: none; border: 0; padding: 2px 0; font: inherit; font-size: var(--t-12); font-weight: 600; color: var(--msg-accent-ink, var(--accent)); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.u-lien:focus-visible, .u-tuile:focus-visible { outline: 2px solid var(--msg-accent-ink, var(--accent)); outline-offset: 2px; }

/* Urgences en cours : une tuile par urgence, la plus proche d'abord */
.u-tuiles { display: grid; gap: var(--s8); }
.u-tuile { width: 100%; text-align: left; font: inherit; color: var(--ink-1); background: var(--surface); border: 1px solid var(--line-strong); border-left: 4px solid var(--err); border-radius: var(--r1); padding: var(--s8) var(--s12); display: grid; gap: var(--s4); cursor: pointer; }
.u-tuile:hover { border-color: var(--accent); border-left-color: var(--err); }
.u-tuile[aria-current="true"] { background: var(--accent-dim); border-color: var(--accent); border-left-color: var(--err); }
.u-tuile--ok { border-left-color: var(--ok); }
.u-tuile--fin { border-left-color: var(--line-strong); }
.u-tuile-t { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s8); font-weight: 600; font-size: var(--t-13); }
.u-tuile-s { font-size: var(--t-12); color: var(--ink-2); }
.u-tuile-etape { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; font-size: var(--t-12); }
.u-pas { display: inline-flex; gap: 2px; }
.u-pas i { display: block; width: 14px; height: 6px; border-radius: 1px; box-sizing: border-box; border: 1px solid var(--ink-3); }
.u-pas i.fait { background: var(--msg-accent-ink, var(--accent)); border-color: var(--msg-accent-ink, var(--accent)); }
.u-pas i.echec { background: var(--ink-3); }
.u-pas i.encours { height: 10px; background: var(--warn); border-color: var(--ink-1); }

/* Le tableau de bord de l'urgence sélectionnée */
.u-board { display: grid; gap: var(--s12); min-width: 0; }
.u-conf { display: flex; gap: var(--s8); align-items: flex-start; border: 1px solid var(--ok); background: var(--ok-dim); border-radius: var(--r1); padding: var(--s8) var(--s12); font-size: var(--t-13); }
.u-conf svg { flex-shrink: 0; margin-top: 2px; color: var(--ok); }
.u-conf b { color: var(--ink-1); }
.u-conc { display: flex; flex-wrap: wrap; gap: var(--s8) var(--s12); align-items: center; border: 1px solid var(--warn); background: var(--warn-dim); border-radius: var(--r1); padding: var(--s8) var(--s12); font-size: var(--t-13); }
.u-retard { display: flex; gap: var(--s8); align-items: flex-start; border: 1px solid var(--err); background: var(--err-dim); border-radius: var(--r1); padding: var(--s8) var(--s12); font-size: var(--t-13); color: var(--ink-1); }
.u-retard svg { flex-shrink: 0; margin-top: 2px; color: var(--err-ink, var(--err)); }
.u-qui { margin: 0; font-size: var(--t-13); color: var(--ink-1); }
.u-qui small { display: block; margin-top: 2px; font-size: var(--t-12); color: var(--ink-2); }
.u-prochain { border: 2px solid var(--accent); background: var(--accent-dim); border-radius: var(--r1); padding: var(--s12) var(--s16); display: flex; flex-wrap: wrap; gap: var(--s8) var(--s16); align-items: center; justify-content: space-between; }
.u-prochain-t { font-size: var(--t-10); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.u-prochain-n { font-size: var(--t-16, 16px); font-weight: 700; color: var(--ink-1); }
.u-prochain-d { font-size: var(--t-12); color: var(--ink-2); }
.u-prochain-a { display: flex; flex-wrap: wrap; gap: var(--s8); align-items: center; }
.u-grille { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: var(--s16); align-items: start; }
@media (max-width: 1320px) { .u-grille { grid-template-columns: minmax(0, 1fr); } }
.u-groupes { display: grid; gap: var(--s12); min-width: 0; }
.u-groupe { border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface); }
.u-groupe[data-statut="en_cours"] { border-color: var(--accent); }
.u-groupe-t { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; padding: var(--s8) var(--s12); border-bottom: 1px solid var(--line); font-size: var(--t-12); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); }
.u-groupe-t .badge { text-transform: none; letter-spacing: 0; font-weight: 500; }
.u-groupe-t .u-groupe-a { margin-left: auto; display: flex; gap: var(--s4); }
.u-note { margin: 0; padding: var(--s8) var(--s12); font-size: var(--t-12); color: var(--ink-2); border: 1px dashed var(--line-strong); border-radius: var(--r1); margin: var(--s8) var(--s12); }
.u-cands { list-style: none; margin: 0; padding: 0; }
.u-cand { display: grid; gap: var(--s4); padding: var(--s8) var(--s12); border-top: 1px solid var(--line); }
.u-cand:first-child { border-top: 0; }
.u-cand-l1 { display: flex; align-items: baseline; gap: var(--s8); flex-wrap: wrap; font-size: var(--t-13); }
.u-cand-l1 b { color: var(--ink-1); }
.u-cand-l1 small { font-size: var(--t-12); color: var(--ink-2); }
.u-cand-l2 { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; font-size: var(--t-12); color: var(--ink-2); }
.u-cand-l3 { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; font-size: var(--t-13); }
.u-cand-l3 a { font-weight: 600; font-variant-numeric: tabular-nums; }
.u-cand-res { display: flex; flex-wrap: wrap; gap: var(--s8); align-items: center; }
.u-dispo { display: inline-flex; align-items: center; gap: var(--s4); font-size: var(--t-12); font-weight: 600; }
.u-dispo--ok { color: var(--ok); }
.u-dispo--conflit { color: var(--msg-warn-ink, var(--warn)); }
.u-dispo--absent { color: var(--err-ink, var(--err)); }
.u-dispo svg { width: 12px; height: 12px; }
.u-fait { display: inline-flex; align-items: center; gap: var(--s4); flex-wrap: wrap; font-size: var(--t-12); color: var(--ink-1); }
.u-indispos > summary { padding: var(--s8) var(--s12); font-size: var(--t-12); font-weight: 600; color: var(--ink-2); cursor: pointer; border-top: 1px solid var(--line); }
.u-indispos > summary:focus-visible { outline: 2px solid var(--msg-accent-ink, var(--accent)); outline-offset: -2px; }
.u-indispos .u-cand { opacity: 1; }
.u-passer { display: flex; flex-wrap: wrap; gap: var(--s8) var(--s12); align-items: center; padding: var(--s8) var(--s12); border-top: 1px solid var(--line); background: var(--bg-inset); font-size: var(--t-13); }

/* Colonne de droite du tableau : les étapes, puis le journal */
.u-cote { display: grid; gap: var(--s16); min-width: 0; }
.u-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.u-etape { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s8); padding: var(--s4) var(--s8); border-left: 3px solid var(--line); font-size: var(--t-12); }
.u-etape[data-statut="en_cours"] { border-left-color: var(--accent); background: var(--accent-dim); }
.u-etape[data-statut="reussi"] { border-left-color: var(--ok); }
.u-etape[data-statut="echec"], .u-etape[data-statut="saute"] { border-left-color: var(--line-strong); color: var(--ink-2); }
.u-etape-n { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.u-etape-l { color: var(--ink-1); font-weight: 500; }
.u-etape-m { display: block; color: var(--ink-2); font-size: var(--t-11); margin-top: 1px; }
.u-etape-m b { color: var(--err-ink, var(--err)); }
.u-journal { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s8); }
.u-journal li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: var(--s8); font-size: var(--t-12); color: var(--ink-1); }
.u-journal time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.u-journal span { color: var(--ink-2); }
.u-issues { display: flex; flex-wrap: wrap; gap: var(--s8); align-items: center; padding-top: var(--s12); border-top: 1px solid var(--line); }
.u-issues-t { font-size: var(--t-12); color: var(--ink-2); margin-right: var(--s4); }
.u-issues-note { flex-basis: 100%; margin: 0; font-size: var(--t-12); color: var(--ink-2); }
.u-confirme { display: grid; gap: var(--s8); border: 2px solid var(--accent); background: var(--surface); border-radius: var(--r1); padding: var(--s12) var(--s16); }
.u-confirme h4 { margin: 0; font-size: var(--t-14); }
.u-confirme p { margin: 0; font-size: var(--t-13); color: var(--ink-2); }
.u-confirme .u-confirme-dispo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s8); }
.u-confirme-a { display: flex; flex-wrap: wrap; gap: var(--s8); }
.u-fin { display: flex; gap: var(--s8); align-items: flex-start; border: 1px solid var(--line-strong); border-left: 4px solid var(--ok); background: var(--surface); padding: var(--s12) var(--s16); font-size: var(--t-13); }
.u-fin h4 { margin: 0 0 2px; font-size: var(--t-14); }
.u-fin p { margin: 0; color: var(--ink-2); font-size: var(--t-13); }
.u-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.u-modal-seance { background: var(--accent-dim); border-radius: var(--r1); padding: var(--s8) var(--s12); margin-bottom: var(--s12); }
.u-modal-seance b { color: var(--ink-1); }
.u-hint { margin: var(--s4) 0 0; font-size: var(--t-12); color: var(--ink-2); }

.u-note svg { display: inline; vertical-align: -2px; margin-right: var(--s4); }

.u-erreur { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s8); color: var(--err-ink); font-weight: 500; font-size: var(--t-13); }
.u-commentaire { padding: var(--s4) var(--s12) var(--s8); }
.u-commentaire input { width: 100%; }
.u-resume { padding: var(--s8) var(--s12); font-size: var(--t-12); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.u-resume:focus-visible, .u-indispos > summary:focus-visible { outline: 2px solid var(--msg-accent-ink, var(--accent)); outline-offset: -2px; }
.u-fin--annule { border-left-color: var(--err); }

/* Thème sombre : le pictogramme natif du champ date (noir sur fond sombre : ~1,2:1) et le lien actif du menu / les badges de rôle (#0d7377 sur fond sombre : 2,85:1) */
[data-theme="dark"] input[type="date"] { color-scheme: dark; }
[data-theme="dark"] .nav-link.active, [data-theme="dark"] .badge-accent { color: var(--accent-ink); }

/* ── « Votre avis » : fenêtre, pointeur d'élément (DECISIONS §32) ── */
.avis-modal { max-width: 580px; }
.avis-intro { margin: 0 0 var(--s16); line-height: 1.5; }
.avis-repris { margin: 0 0 var(--s8); font-size: var(--t-12); color: var(--ok); }
.avis-chip { display: flex; align-items: center; gap: var(--s8); padding: var(--s8) 10px; margin-bottom: var(--s8); border: 1px solid var(--line); background: var(--bg-inset); font-size: var(--t-13); border-radius: var(--r1); min-width: 0; }
.avis-chip > span { min-width: 0; overflow-wrap: anywhere; }
.avis-chip .icon-sm { flex-shrink: 0; color: var(--ink-3); }
.avis-chip-el { border-color: var(--accent-mid); background: var(--accent-dim); }
.avis-chip-el .icon-sm { color: var(--accent); }
.avis-chip-x { margin-left: auto; width: 22px; height: 22px; flex-shrink: 0; border: 1px solid transparent; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 11px; border-radius: var(--r1); }
.avis-chip-x:hover { border-color: var(--line-strong); color: var(--ink-1); }
.avis-actions { display: flex; gap: var(--s8); flex-wrap: wrap; margin-bottom: var(--s8); }
.avis-aide { margin: 0; font-size: var(--t-12); color: var(--ink-3); }
.avis-opt { font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.avis-erreur { margin: 4px 0 0; font-size: var(--t-12); color: var(--err); }
.avis-check { display: flex; align-items: center; gap: var(--s8); font-size: var(--t-13); margin: var(--s12) 0; cursor: pointer; }
.avis-contexte { border-top: 1px solid var(--line); padding-top: var(--s12); font-size: var(--t-12); color: var(--ink-2); display: grid; gap: 6px; }
.avis-contexte strong { color: var(--ink-1); font-weight: 600; }
.avis-contexte ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.avis-contexte code { font-family: var(--font-mono); font-size: var(--t-11); overflow-wrap: anywhere; }
.avis-contexte p { margin: 0; color: var(--ink-3); }
.avis-modal .form-textarea { resize: vertical; min-height: 110px; }
body.avis-pointage, body.avis-pointage * { cursor: crosshair !important; }
.avis-barre { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 400; background: var(--ink-1); color: var(--bg); padding: 10px 14px; border-radius: var(--r2); display: flex; align-items: center; gap: 14px; font-size: var(--t-13); box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: calc(100% - 32px); }
.avis-surligne { position: fixed; pointer-events: none; z-index: 399; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 2px; }
.avis-surligne-lbl { position: absolute; left: -2px; bottom: 100%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 6px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; border-radius: 2px 2px 0 0; }
.avis-nav { width: 100%; border: 0; border-left: 2px solid transparent; background: transparent; font: inherit; text-align: left; gap: var(--s8); }
.avis-nav .icon-sm { flex-shrink: 0; }
.shell--collapsed .avis-nav span { display: none; }
@media (prefers-reduced-motion: reduce) { .avis-barre, .avis-surligne { transition: none; } }
.avis-bloc { margin-top: auto; padding-bottom: var(--s8); }
.avis-bloc ~ .sidebar-footer { margin-top: 0; }