/* ------------------------------------------------------------------
   Surcharges applicatives du Portail Remplacements.
   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. */

/* ── 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); }
.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); }