/* Sans Appel — console.
   Charte ClimPossible version 5. Les valeurs viennent de `web/src/theme.js` :
   toute divergence ici serait une seconde source de verite, et la premiere
   cause de « ma modification n'apparait pas ».

   Une console de travail n'est pas une page de contenu : elle reste dense,
   sans respiration decorative. Mais elle emprunte le meme papier, la meme
   encre, le meme accent — on passe d'une console a l'autre sans changer de
   monde. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Public+Sans:wght@400;600&family=Newsreader:opsz,wght@6..72,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --papier: #FBF9F5; --pierre: #EEEBE4; --encre: #131E2E; --zinc: #55697A;
  --trame: #DBD4C8; --graphite: #6E7681; --blanc: #FFFFFF;
  --fraicheur: #F97316; --fraicheurVive: #FFA94D; --acte: #2C4A63;

  /*
   * Etats de ligne.
   *
   * La charte reserve vert, or et rouge aux verdicts : « jamais un etat
   * d'interface ». Or le panneau de droite affiche le verdict du dossier a
   * cote de ces temoins — reprendre les memes couleurs les viderait de leur
   * sens la ou il compte.
   *
   * Le vocabulaire retenu est celui de l'attention : ce qui va bien reste
   * discret, seul ce qui appelle une action prend l'accent. Un plateau ou tout
   * clignote en vert est un plateau ou l'on ne voit plus rien.
   */
  /*
   * Vert et rouge pour la connexion, sur demande explicite.
   *
   * La charte les reserve aux verdicts. L'ecart est assume ici parce qu'un
   * etat de liaison se lit d'un coup d'oeil et que ces deux couleurs sont
   * comprises sans apprentissage. Les verdicts gardent leurs valeurs exactes
   * (#1E9E63, #DC2626) ; les temoins de ligne utilisent des tons voisins mais
   * distincts, de sorte que les deux ne se confondent pas dans la meme colonne.
   */
  --etat-repos: #B9B3A6;
  --etat-actif: #22A06B;
  --etat-attente: #F97316;
  --etat-souci: #D93A2B;

  --r: 6px; --r-petit: 4px;
  --filet: 1px solid var(--trame);
  --ombre: 0 1px 2px rgba(27,39,50,.06), 0 4px 16px rgba(27,39,50,.05);

  --titre: 'Bricolage Grotesque', system-ui, sans-serif;
  --sans: 'Public Sans', system-ui, sans-serif;
  --lettre: 'Newsreader', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --espace: 16px; --rail: 300px; --rail-replie: 62px;
}

* { box-sizing: border-box; }

body {
  margin: 0; font-family: var(--sans); background: var(--papier);
  color: var(--encre); font-size: 14.5px; line-height: 1.6;
  height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--fraicheur); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titre); letter-spacing: -0.02em; }

.temoin {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--etat-repos); display: inline-block; flex-shrink: 0;
}
.temoin[data-etat="active"] { background: var(--etat-actif); }
.temoin[data-etat="sonne"] { background: var(--etat-attente); animation: pulse 1.4s infinite; }
.temoin[data-etat="alerte"] { background: var(--etat-souci); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .temoin { animation: none !important; } }

/*
 * Chaque element occupe une colonne NOMMEE explicitement.
 *
 * Sans cela, masquer une colonne par `display: none` la retire du flux mais
 * pas sa piste de grille : tous les elements suivants glissent d'un cran, et
 * la poignee de droite se retrouve a occuper la colonne centrale — une bande
 * de la largeur de la conversation, qui vire a l'orange au survol.
 *
 * Avec des zones nommees, un element masque laisse sa piste vide et rien ne
 * bouge.
 */
/*
 * Trois colonnes : le rail qui porte navigation et file, l'echange, le
 * panneau. La file avait sa propre colonne, qu'il fallait ouvrir pour agir —
 * une alerte qui demande un geste de plus avant de pouvoir repondre.
 *
 * Chaque element occupe une colonne NOMMEE. Sans cela, masquer une colonne par
 * `display: none` la retire du flux mais pas sa piste, et tous les elements
 * suivants glissent d'un cran.
 */
.plateau {
  display: grid;
  grid-template-columns:
    [rail] var(--l-rail, var(--rail))
    [poig-g] var(--l-poig-g, 5px)
    [echange] minmax(0, 1fr)
    [poig-d] var(--l-poig-d, 5px)
    [contexte] var(--l-contexte, 300px);
  height: 100vh;
}
.plateau > .rail            { grid-column: rail; }
.plateau > #poigneeGauche   { grid-column: poig-g; }
.plateau > .colonne.echange { grid-column: echange; }
.plateau > #poigneeDroite   { grid-column: poig-d; }
.plateau > .colonne.contexte{ grid-column: contexte; }

.plateau.rail-replie { --l-rail: var(--rail-replie); --l-poig-g: 0px; }
.plateau.rail-replie > #poigneeGauche { display: none; }
.plateau.sans-contexte { --l-contexte: 0px; --l-poig-d: 0px; }
.plateau.sans-contexte > .colonne.contexte,
.plateau.sans-contexte > #poigneeDroite { display: none; }

.colonne { display: flex; flex-direction: column; min-width: 0; background: var(--papier); }
.colonne.demandes { background: var(--blanc); border-right: var(--filet); }
.colonne.contexte { background: var(--blanc); border-left: var(--filet); }

/* ---------- rail de gauche ----------
   Trois blocs, du plus stable au plus contextuel : la marque, la navigation,
   puis les actions de l'echange ouvert. Ces dernieres n'apparaissent que
   lorsqu'il y a un echange : six boutons inertes n'aident personne. */
.rail {
  background: var(--encre); color: var(--pierre);
  display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.rail-marque {
  display: flex; align-items: center; gap: 11px; padding: 18px 16px;
  color: var(--papier); font-family: var(--titre); font-weight: 700;
  font-size: 18px; letter-spacing: -.025em; white-space: nowrap;
}
.rail-marque .signe { width: 28px; height: 28px; color: var(--fraicheur); flex-shrink: 0; }
.rail-section {
  padding: 12px 12px 5px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: #7C8B99; white-space: nowrap;
}
.rail-item {
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 16px); margin: 1px 8px; padding: 10px;
  background: none; border: none; border-radius: var(--r);
  color: var(--pierre); font-size: 14px; text-align: left;
  text-decoration: none; white-space: nowrap; transition: background .12s;
}
.rail-item:hover:not(:disabled) { background: rgba(255,255,255,.07); }
.rail-item:disabled { opacity: .32; cursor: not-allowed; }
.rail-item.actif { background: rgba(249,115,22,.16); color: var(--fraicheurVive); }
.rail-item.principal { background: var(--fraicheur); color: var(--blanc); font-weight: 600; }
.rail-item.principal:hover:not(:disabled) { background: #EA6A0C; }
.ico {
  width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor;
  fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.rail-item .libelle { overflow: hidden; text-overflow: ellipsis; flex: 1; }

/* Pastille de compte : visible meme rail replie, c'etait le manque signale.
   Le clignotement distingue « il y a du travail » de « il y en avait ». */
.pastille-compte {
  background: var(--fraicheur); color: var(--blanc);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rail-item.alerte .pastille-compte { animation: pulse-pastille 1.6s infinite; }
@keyframes pulse-pastille {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249,115,22,.5); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(249,115,22,0); }
}
/* Rail replie : la pastille se pose sur l'icone, seul repere restant. */
.rail-replie .pastille-compte {
  position: absolute; top: 4px; right: 8px;
  min-width: 17px; height: 17px; font-size: 10px; padding: 0 4px;
}
.rail-replie .rail-item { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .pastille-compte { animation: none !important; }
}
/* ---------- file d'attente dans le rail ---------- */
.rail-section-file {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; padding-top: 14px;
}
.rail-section-file .compte-file {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0;
  text-transform: none; color: #8FA0AE; white-space: nowrap;
}

.rail .filtres {
  display: flex; margin: 6px 10px 4px;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r);
  overflow: hidden; background: rgba(255,255,255,.04);
}
.rail .filtre {
  flex: 1; background: none; border: none;
  border-right: 1px solid rgba(255,255,255,.12);
  color: #8FA0AE; padding: 7px 4px;
  font-family: var(--titre); font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.rail .filtre:last-child { border-right: none; }
.rail .filtre:hover { background: rgba(255,255,255,.07); color: var(--pierre); }
.rail .filtre.actif { background: var(--fraicheur); color: var(--blanc); }

/* La file occupe la hauteur restante et defile seule : le bas du rail —
   affichage, identite, compte — doit rester atteignable quelle que soit la
   longueur de la liste. */
.rail-file {
  flex: 1 1 auto; min-height: 80px; overflow-y: auto;
  padding: 2px 0 6px;
}
.rail-file::-webkit-scrollbar { width: 7px; }
.rail-file::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 4px; }

.rail-file .demande {
  margin: 6px 10px; padding: 11px 12px; border-radius: var(--r);
  background: rgba(255,255,255,.05); border: 1px solid transparent;
  cursor: pointer; display: grid; grid-template-columns: 9px 1fr;
  gap: 9px; align-items: start; transition: background .12s, border-color .12s;
}
.rail-file .demande:hover { background: rgba(255,255,255,.09); }
.rail-file .demande[aria-selected="true"] {
  background: rgba(249,115,22,.14); border-color: var(--fraicheur);
}
.rail-file .demande .nom { color: var(--papier); font-weight: 600; font-size: 13.5px; }
.rail-file .demande .objet {
  color: #8FA0AE; font-size: 12px; margin-top: 2px;
  /* Deux lignes puis coupure : un objet tronque a mi-mot ne dit rien, et un
     objet complet pousse la demande suivante hors de vue. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4;
}
.rail-file .demande .bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 7px;
}
.rail-file .demande .etiquette {
  margin: 0; padding: 2px 7px; font-size: 9.5px;
  border-color: rgba(255,255,255,.2); color: #8FA0AE;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-file .demande .chrono { color: #7C8B99; font-size: 11px; flex-shrink: 0; }
.rail-file .vide { padding: 22px 14px; color: #7C8B99; font-size: 12.5px; }
.rail-file .vide b { color: var(--pierre); font-size: 13.5px; }
.rail-file .vide .signe-vide { width: 30px; height: 30px; color: rgba(255,255,255,.14); }

/* Rail replie : la file se reduit a ses temoins, empiles. On voit qu'il y a
   du travail et de quelle nature, sans lire. */
.rail-replie .rail-section-file, .rail-replie .filtres { display: none; }
.rail-replie .rail-file .demande {
  grid-template-columns: 1fr; justify-items: center; padding: 9px 0; margin: 4px 8px;
}
.rail-replie .rail-file .demande .nom,
.rail-replie .rail-file .demande .objet,
.rail-replie .rail-file .demande .bas,
.rail-replie .rail-file .vide { display: none; }

.rail-bas { margin-top: auto; padding-bottom: 8px; flex-shrink: 0; }
.rail-identite {
  padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.09);
  font-size: 13px; white-space: nowrap; overflow: hidden;
}
.rail-identite b { color: var(--papier); font-weight: 600; display: block; }
/* L'etat de la liaison est ce qu'un conseiller verifie en premier quand plus
   rien n'arrive : il doit se lire sans etre cherche. */
#etatLiaison { font-weight: 600; font-size: 13.5px; }
#etatLiaison .temoin { width: 10px; height: 10px; box-shadow: 0 0 0 3px rgba(34,160,107,.2); }
#etatLiaison[data-etat="alerte"] { color: #FF8A7A; }
#etatLiaison[data-etat="alerte"] .temoin { box-shadow: 0 0 0 3px rgba(217,58,43,.22); }
#etatLiaison[data-etat="libre"] { color: #8FA0AE; }
#etatLiaison[data-etat="libre"] .temoin { box-shadow: none; }
.rail-identite span { color: #8FA0AE; font-size: 11.5px; }
/* Repli du menu : une commande de confort, pas une action de travail. Elle se
   place en retrait, au meme corps que les intitules de section. */
.rail-bascule {
  background: none; border: none; color: #7C8B99;
  padding: 7px 10px; margin: 2px 8px 4px; border-radius: var(--r);
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; width: calc(100% - 16px);
}
.rail-bascule .ico { width: 15px; height: 15px; }
.rail-bascule:hover { background: rgba(255,255,255,.07); color: var(--pierre); }
.rail-replie .rail-marque { padding: 18px 0; justify-content: center; }
.rail-replie .rail-marque .nom, .rail-replie .rail-section,
.rail-replie .rail-item .libelle, .rail-replie .rail-identite span,
.rail-replie .rail-bascule .libelle { display: none; }
.rail-replie .rail-item, .rail-replie .rail-bascule { justify-content: center; padding: 11px 0; }
.rail-replie .rail-identite { padding: 12px 0; text-align: center; }

.entete {
  padding: 14px var(--espace); border-bottom: var(--filet);
  font-family: var(--titre); font-size: 15px; font-weight: 600; color: var(--encre);
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-shrink: 0;
}
.entete .discret {
  font-family: var(--sans); font-weight: 400; color: var(--graphite);
  font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.defilant { overflow-y: auto; flex: 1; }
.defilant::-webkit-scrollbar { width: 9px; }
.defilant::-webkit-scrollbar-thumb { background: var(--trame); border-radius: 5px; }

/* Filtres de la file : segments jointifs. Trois boutons separes dans une
   colonne de 300 pixels debordaient sur deux lignes. */
.filtres {
  display: flex; margin: 10px 10px 4px;
  border: var(--filet); border-radius: var(--r); overflow: hidden;
  background: var(--blanc);
}
.filtre {
  flex: 1; background: none; border: none; border-right: var(--filet);
  color: var(--graphite); padding: 8px 6px;
  font-family: var(--titre); font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.filtre:last-child { border-right: none; }
.filtre:hover { background: var(--pierre); color: var(--encre); }
.filtre.actif { background: var(--encre); color: var(--papier); }

.demande {
  margin: 7px 10px; padding: 12px 13px; border-radius: var(--r);
  background: var(--papier); border: var(--filet); cursor: pointer;
  display: grid; grid-template-columns: 8px 1fr auto; gap: 10px;
  align-items: start; transition: border-color .12s, background .12s;
}
.demande:hover { border-color: var(--zinc); }
.demande[aria-selected="true"] {
  background: var(--blanc); border-color: var(--fraicheur);
  box-shadow: inset 3px 0 0 var(--fraicheur);
}
.demande .nom { font-weight: 600; font-size: 14px; }
.demande .objet {
  color: var(--graphite); font-size: 13px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demande .chrono {
  font-family: var(--mono); font-size: 11.5px; color: var(--graphite);
  font-variant-numeric: tabular-nums;
}
.demande .etiquette {
  display: inline-block; margin: 7px 4px 0 0; padding: 2px 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  border: var(--filet); border-radius: 999px; color: var(--graphite);
}
.pastille-projet {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px; vertical-align: middle;
}

.vide { padding: 40px 24px; color: var(--graphite); font-size: 13.5px; line-height: 1.6; text-align: center; }
.vide b {
  color: var(--encre); display: block; margin-bottom: 6px;
  font-family: var(--titre); font-weight: 600; font-size: 15px;
}
.vide .signe-vide { width: 40px; height: 40px; color: var(--trame); margin: 0 auto 16px; display: block; }
.accueil-vide {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; color: var(--graphite);
  text-align: center; padding: 40px;
}
.accueil-vide svg { width: 62px; height: 62px; color: var(--trame); }
.accueil-vide h2 { margin: 0; font-size: 19px; font-weight: 600; color: var(--encre); }
.accueil-vide p { margin: 0; font-size: 14px; max-width: 360px; line-height: 1.6; }

.fil { padding: var(--espace); display: flex; flex-direction: column; gap: 10px; }
.bulle { max-width: 76%; padding: 10px 14px; border-radius: 12px; line-height: 1.55; font-size: 14px; }
/* Le client s'adresse a nous : sa parole est en Newsreader, comme les verdicts
   et les messages personnels de la charte. */
.bulle.client {
  background: var(--pierre); align-self: flex-start;
  border-bottom-left-radius: 3px; font-family: var(--lettre); font-size: 15px;
}
.bulle.agent {
  background: var(--acte); color: var(--papier); align-self: flex-end;
  border-bottom-right-radius: 3px;
}
.bulle.ia {
  background: var(--pierre); align-self: flex-start; border-bottom-left-radius: 3px;
  box-shadow: inset 3px 0 0 var(--fraicheur); font-family: var(--lettre); font-size: 15px;
}
.bulle.systeme {
  align-self: center; background: none; border: 1px dashed var(--trame);
  color: var(--graphite); font-size: 12.5px; max-width: 90%; text-align: center; line-height: 1.5;
}
.bulle .qui { font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: var(--graphite); margin-bottom: 3px; }
.bulle.agent .qui { color: rgba(251,249,245,.7); }

.saisie {
  border-top: var(--filet); background: var(--blanc);
  padding: 14px var(--espace); display: flex; gap: 10px; flex-shrink: 0;
}
.saisie textarea {
  flex: 1; background: var(--papier); border: var(--filet); color: var(--encre);
  border-radius: var(--r); padding: 11px 14px; font-family: inherit;
  font-size: 14.5px; resize: none; height: 44px; line-height: 1.5;
}
.saisie textarea:focus { border-color: var(--zinc); outline: none; }

.bouton {
  background: var(--blanc); border: var(--filet); color: var(--encre);
  padding: 9px 15px; border-radius: var(--r); font-family: var(--titre);
  font-size: 14px; font-weight: 600; transition: background .12s, border-color .12s;
}
.bouton:hover:not(:disabled) { background: var(--pierre); }
.bouton:disabled { opacity: .4; cursor: not-allowed; }
.bouton.principal { background: var(--fraicheur); border-color: var(--fraicheur); color: var(--blanc); }
.bouton.principal:hover:not(:disabled) { background: #EA6A0C; border-color: #EA6A0C; }
/* Le rouge est reserve aux verdicts, sauf pour les actions destructrices de la
   console : c'est l'exception que la charte admet, et la seule ici. */
.bouton.danger { border-color: #DC2626; color: #DC2626; background: var(--blanc); }
.bouton.danger:hover:not(:disabled) { background: #FEF2F2; }
.bouton.petit { padding: 6px 11px; font-size: 12.5px; }

.scene { position: relative; background: var(--encre); flex: 1 1 auto; min-height: 240px; }
.scene video.distant { width: 100%; height: 100%; object-fit: contain; display: block; }
.scene video.local {
  position: absolute; right: 12px; bottom: 12px; width: 132px;
  border: 2px solid rgba(251,249,245,.5); border-radius: var(--r);
  background: #000; transform: scaleX(-1);
}
.scene .attente {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; color: var(--pierre); font-size: 14px;
}
.scene .repere-format {
  position: absolute; left: 12px; bottom: 12px; font-family: var(--mono);
  font-size: 10px; color: rgba(251,249,245,.65); background: rgba(19,30,46,.7);
  padding: 4px 8px; border-radius: var(--r-petit);
}
.scene:fullscreen { background: #000; }
.scene:fullscreen video.distant { width: 100vw; height: 100vh; }

.commandes {
  display: flex; gap: 8px; padding: 12px var(--espace);
  border-bottom: var(--filet); background: var(--blanc); flex-wrap: wrap;
}

/* Pendant un appel : image a gauche, conversation a droite. Empiler obligeait
   a arbitrer entre voir et lire. */
.colonne.echange.en-appel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--poignee, 5px) var(--largeur-chat, 340px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "entete entete entete" "scene poig fil" "cmd poig saisie";
  min-height: 0;
}
.colonne.echange.en-appel > .entete { grid-area: entete; }
.colonne.echange.en-appel > .scene { grid-area: scene; }
.colonne.echange.en-appel > .commandes { grid-area: cmd; }
.colonne.echange.en-appel > .poignee { grid-area: poig; }
.colonne.echange.en-appel > .defilant { grid-area: fil; border-left: var(--filet); min-height: 0; }
.colonne.echange.en-appel > .saisie { grid-area: saisie; border-left: var(--filet); }
.colonne.echange.en-appel .bulle { max-width: 94%; font-size: 13.5px; }
.colonne.echange:not(.en-appel) > .poignee { display: none; }
.colonne.echange.sans-chat { --largeur-chat: 0px; }
.colonne.echange.sans-chat > .defilant,
.colonne.echange.sans-chat > .saisie,
.colonne.echange.sans-chat > .poignee { display: none; }

.onglets { display: flex; border-bottom: var(--filet); padding: 0 8px; gap: 2px; flex-shrink: 0; }
.onglet {
  flex: 1; background: none; border: none; color: var(--graphite);
  padding: 14px 6px 12px; font-size: 13.5px; font-weight: 600;
  font-family: var(--titre); cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.onglet:hover { color: var(--encre); }
.onglet.actif { color: var(--encre); border-bottom-color: var(--fraicheur); }

.volet { padding: var(--espace); }
.volet-vide { color: var(--graphite); font-size: 13.5px; line-height: 1.6; padding: 24px 4px; text-align: center; }
.volet-bloc { margin-bottom: 20px; }
.volet-bloc:last-child { margin-bottom: 0; }
.volet-titre {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--graphite);
  margin-bottom: 9px; padding-bottom: 7px; border-bottom: var(--filet);
}
.champ { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: 13.5px; }
.champ dt { color: var(--graphite); text-transform: capitalize; }
.champ dd { margin: 0; font-family: var(--mono); font-size: 12.5px; text-align: right; word-break: break-word; }
.verdict-ligne {
  display: flex; align-items: center; gap: 9px; font-family: var(--titre);
  font-size: 15px; font-weight: 600; margin-bottom: 16px;
}
.agent-ligne {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 10px;
  align-items: center; padding: 11px 0; border-bottom: var(--filet);
}
.agent-ligne:last-child { border-bottom: none; }
.agent-nom { font-size: 13.5px; }
.agent-chiffres { font-size: 12px; color: var(--graphite); text-align: right; }
.agent-chiffres b { color: var(--encre); font-variant-numeric: tabular-nums; }
.agent-traitees { display: block; font-size: 11px; }

.mes-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mes-chiffre { background: var(--papier); border: var(--filet); border-radius: var(--r); padding: 13px; }
.mes-chiffre .intitule {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--graphite); margin-bottom: 5px;
}
.mes-chiffre .valeur {
  font-family: var(--titre); font-size: 26px; font-weight: 700;
  line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.mes-chiffre .valeur.petit { font-size: 18px; }
.mes-chiffre.accent { border-top: 2px solid var(--fraicheur); }
.mes-chiffre.accent .valeur { color: var(--fraicheur); }
.bord-intitule {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--graphite); margin-bottom: 8px;
}
.bord-graphe { width: 100%; height: 70px; display: block; }
.bord-graphe .barre { fill: var(--fraicheur); }
.bord-graphe .barre.creuse { fill: var(--trame); }
.bord-graphe text { fill: var(--graphite); font-size: 9px; font-family: var(--mono); }

.poignee { position: relative; cursor: col-resize; background: var(--trame); transition: background .12s; }
.poignee::after { content: ''; position: absolute; inset: 0 -4px; }
.poignee:hover, .poignee.tire { background: var(--fraicheur); }
.poignee:focus-visible { background: var(--fraicheur); outline: none; }

.connexion {
  height: 100vh; display: grid; place-content: center; gap: 14px;
  width: min(360px, 90vw); margin: 0 auto;
}
.connexion.compte {
  width: min(470px, 92vw); max-height: 94vh; overflow-y: auto;
  place-content: start center; padding: 32px 0;
}
.connexion h1 { font-size: 28px; font-weight: 700; margin: 0; letter-spacing: -.03em; }
.connexion p { color: var(--graphite); font-size: 14px; margin: 0 0 8px; }
.connexion .marque-grande { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.connexion .marque-grande svg { width: 40px; height: 40px; color: var(--fraicheur); flex-shrink: 0; }
.connexion input {
  width: 100%; background: var(--blanc); border: var(--filet); color: var(--encre);
  padding: 11px 13px; border-radius: var(--r); font-family: inherit; font-size: 15px;
}
.connexion input:focus { border-color: var(--fraicheur); outline: none; }
.erreur {
  color: #B91C1C; font-size: 13px; background: #FEF2F2;
  border-left: 3px solid #DC2626; padding: 10px 12px; border-radius: 0 var(--r) var(--r) 0;
}

.section-compte { margin-bottom: 18px; }
.section-compte label { display: block; font-size: 13px; color: var(--graphite); margin-bottom: 6px; }
.section-compte textarea {
  width: 100%; background: var(--blanc); border: var(--filet); color: var(--encre);
  padding: 11px 13px; border-radius: var(--r); font-family: inherit;
  font-size: 14.5px; resize: vertical; line-height: 1.55;
}
.section-compte .aide { color: var(--graphite); font-size: 12px; line-height: 1.55; margin: 6px 0 0; }
.section-compte .aide code { font-family: var(--mono); color: var(--fraicheur); font-size: 11.5px; }
.section-compte .case { display: flex; align-items: center; gap: 9px; margin-top: 11px; font-size: 13.5px; cursor: pointer; }
.section-compte .case input { width: auto; accent-color: var(--fraicheur); }

.champ-secret { position: relative; display: block; }
.champ-secret input { padding-right: 86px !important; }
.bascule-secret {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  background: var(--pierre); border: var(--filet); color: var(--graphite);
  border-radius: var(--r-petit); padding: 5px 10px; font-family: var(--mono);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  cursor: pointer; min-height: 30px;
}
.bascule-secret:hover { background: var(--trame); color: var(--encre); }
.bascule-secret[aria-pressed="true"] { color: var(--fraicheur); border-color: var(--fraicheur); }

.admin { max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; }
.admin > h1 { font-size: 30px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.03em; }
.admin > p { color: var(--graphite); font-size: 14px; margin: 0 0 26px; }
.panneau {
  border: var(--filet); border-radius: var(--r); background: var(--blanc);
  margin-bottom: 22px; overflow: hidden; box-shadow: var(--ombre);
}
.panneau > .entete { background: var(--papier); }
.panneau > .corps { padding: 18px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; padding: 10px 14px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--graphite);
  border-bottom: var(--filet); white-space: nowrap;
}
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td { padding: 12px 14px; border-bottom: var(--filet); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr.inactif { opacity: .5; }
td.actions { text-align: right; white-space: nowrap; }
td.actions .bouton { margin-left: 5px; }
tr.selectionnable { cursor: pointer; }
tr.selectionnable:hover { background: var(--papier); }
tr[aria-selected="true"] { background: #FFF7ED; }

.role {
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 999px; border: var(--filet);
  text-transform: uppercase; color: var(--graphite);
}
.role[data-r="admin"] { border-color: var(--fraicheur); color: var(--fraicheur); }
.role[data-r="manager"] { border-color: var(--acte); color: var(--acte); }

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
label { display: block; font-size: 12.5px; color: var(--graphite); margin-bottom: 5px; }
input, select {
  width: 100%; background: var(--blanc); border: var(--filet); color: var(--encre);
  padding: 10px 12px; border-radius: var(--r); font-family: inherit; font-size: 14px;
}
input:focus, select:focus { border-color: var(--fraicheur); outline: none; }

.avis { margin: 14px 0 0; padding: 13px 15px; border-radius: var(--r); font-size: 14px; border-left: 3px solid var(--acte); background: #F0F5F9; }
.avis.rouge { border-color: #DC2626; background: #FEF2F2; color: #7F1D1D; }
.avis.vert { border-color: #1E9E63; background: #F0FBF5; }
.secret {
  font-family: var(--mono); font-size: 16px; letter-spacing: .04em;
  background: var(--pierre); border: 1px dashed var(--fraicheur);
  padding: 13px 15px; border-radius: var(--r); margin: 10px 0;
  word-break: break-all; user-select: all;
}
.journal { font-size: 13px; color: var(--graphite); }
.journal b { color: var(--encre); font-weight: 600; }
.journal-jour {
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--graphite);
  margin: 18px 0 6px; padding-bottom: 6px; border-bottom: var(--filet);
}
.journal-jour:first-child { margin-top: 0; }
.journal-ligne { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 4px 0; }
.journal-heure { font-family: var(--mono); font-size: 11.5px; color: var(--graphite); }

/* Panneau depliable : la fleche native suffit, encore faut-il qu'elle ne
   flotte pas au milieu d'un en-tete en drapeau. */
/* Panneau depliable. La fleche native est remplacee : celle de Safari se
   place a gauche du contenu et decale tout l'en-tete a l'ouverture. */
summary.resume {
  cursor: pointer; list-style: none;
  gap: 12px; user-select: none;
}
summary.resume::-webkit-details-marker { display: none; }
summary.resume::before {
  content: '▸'; color: var(--graphite); font-size: 13px;
  transition: transform .15s; display: inline-block; margin-right: 4px;
}
details[open] > summary.resume::before { transform: rotate(90deg); }
summary.resume:hover { background: var(--pierre); }
summary.resume > span:first-of-type { flex: 1; }

/* Un panneau ferme n'a pas de filet inferieur : il ne separe plus rien. */
details.panneau:not([open]) > summary.resume { border-bottom: none; }

/* Barre d'actions du panneau. Les boutons ont quitte l'en-tete : dans un
   <summary>, un clic dessus declencherait aussi le repli, et l'on ne saurait
   pas si l'on a agi ou referme. */
.barre-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 14px var(--espace) 0;
}

.periode-journal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-bottom: 16px; margin-bottom: 4px; border-bottom: var(--filet);
}
.periode-journal input[type="date"] { width: auto; min-width: 148px; }
.periode-journal input[type="search"] { width: auto; min-width: 170px; }
.periode-journal select { width: auto; min-width: 190px; }
.entete .discret {
  font-family: var(--sans); font-weight: 400; color: var(--graphite);
  font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.parametre {
  display: grid; grid-template-columns: 1fr auto; gap: 20px;
  align-items: start; padding: 15px 0; border-bottom: var(--filet);
}
.parametre:last-child { border-bottom: none; }
.parametre-texte label { font-size: 14px; font-weight: 600; color: var(--encre); margin: 0; }
.parametre-texte p { margin: 4px 0 0; font-size: 12.5px; color: var(--graphite); line-height: 1.55; }
.parametre-champ { display: flex; align-items: center; gap: 8px; }
.parametre-champ input { width: 88px; text-align: right; font-variant-numeric: tabular-nums; }
.parametre-champ span { font-size: 12.5px; color: var(--graphite); }

/* Droits : la provenance de chaque capacite doit se lire, sinon on ne sait pas
   ce qu'on modifie. */
.droit { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: var(--filet); }
.droit:last-child { border-bottom: none; }
.droit input { width: auto; accent-color: var(--fraicheur); }
.droit-libelle { font-size: 13.5px; }
.droit-source {
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--graphite); border: var(--filet);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.droit-source.ecart { color: var(--fraicheur); border-color: var(--fraicheur); }
.droit-groupe {
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--graphite); margin: 20px 0 4px;
  padding-bottom: 6px; border-bottom: var(--filet);
}
.droit-groupe:first-child { margin-top: 0; }

.apercu-qr { background: var(--blanc); padding: 10px; border-radius: var(--r); display: grid; place-items: center; border: var(--filet); }
.apercu-qr svg { width: 100%; height: auto; max-width: 180px; display: block; }
.url-reprise {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.6; color: var(--graphite);
  word-break: break-all; user-select: all; background: var(--papier);
  border: var(--filet); border-radius: var(--r-petit); padding: 8px 10px; margin: 10px 0;
}

.vide-stats { padding: 32px; text-align: center; color: var(--graphite); font-size: 13.5px; }
.jauge { height: 6px; background: var(--pierre); border-radius: 3px; overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--fraicheur); }

/* ---------- bandeau des ecrans pleine page ----------
   Le rail vertical n'a pas de sens ici : ces pages se lisent, elles ne
   pilotent pas un echange en cours. La structure existante est conservee,
   seule l'habillage change. */
.bandeau {
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px; height: 62px;
  background: var(--encre); color: var(--pierre); flex-shrink: 0;
}
.bandeau .marque {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--papier); font-family: var(--titre); font-weight: 700;
  font-size: 18px; letter-spacing: -.025em; flex-shrink: 0;
}
.bandeau .marque .signe { width: 28px; height: 28px; color: var(--fraicheur); flex-shrink: 0; }
.bandeau .separateur { width: 1px; height: 26px; background: rgba(255,255,255,.16); flex-shrink: 0; }
.bandeau .titre-section { color: #8FA0AE; font-size: 14px; }

.actions-bandeau { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.actions-bandeau .lien-bandeau {
  color: var(--pierre); text-decoration: none; font-size: 13.5px;
  padding: 7px 12px; border-radius: var(--r); white-space: nowrap;
}
.actions-bandeau .lien-bandeau:hover { background: rgba(255,255,255,.09); }
.actions-bandeau .restant {
  font-size: 12px; color: #8FA0AE; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.actions-bandeau .identite { font-size: 13.5px; white-space: nowrap; }
.actions-bandeau .identite b { color: var(--papier); font-weight: 600; }

body.page { height: auto; overflow: auto; }

/* ---------- infobulle ----------
   Posee sur le document, hors de tout debordement : le rail porte
   `overflow: hidden`, une bulle ancree a l'interieur y serait rognee des qu'il
   est replie — c'est-a-dire au moment ou elle sert le plus. */
.infobulle {
  position: fixed; z-index: 2000; pointer-events: none;
  max-width: 280px; padding: 9px 12px;
  background: var(--encre); color: var(--papier);
  border-radius: var(--r); font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 4px 18px rgba(19,30,46,.28);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .12s, transform .12s;
  visibility: hidden;
}
.infobulle.visible { opacity: 1; transform: none; visibility: visible; }
/* Pointe vers l'element decrit : sans elle, la bulle flotte sans lien visible
   avec ce qu'elle explique. */
.infobulle::before {
  content: ''; position: absolute; left: -5px; top: 50%;
  width: 10px; height: 10px; margin-top: -5px;
  background: var(--encre); transform: rotate(45deg); border-radius: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .infobulle { transition: none; }
}
/* Sur ecran tactile il n'y a pas de survol : la bulle n'apparaitrait qu'au
   toucher, en masquant ce qu'on vient de toucher. */
@media (hover: none) {
  .infobulle { display: none; }
}

.masque { display: none !important; }

@media (max-width: 1400px) {
  .plateau { grid-template-columns: var(--l-rail, var(--rail)) var(--l-demandes, 280px) var(--poignee, 5px) minmax(0, 1fr) var(--poignee, 5px) var(--l-contexte, 280px); }
}
@media (max-width: 1180px) {
  .plateau { grid-template-columns: var(--l-rail, var(--rail-replie)) var(--l-demandes, 260px) var(--poignee, 5px) minmax(0, 1fr); }
  .colonne.contexte, .plateau > .poignee:last-of-type { display: none; }
  .rail .rail-marque .nom, .rail-section, .rail-item .libelle,
  .rail-identite span, .rail-bascule .libelle { display: none; }
  .rail-item, .rail-bascule { justify-content: center; padding: 11px 0; }
  .rail-marque { justify-content: center; padding: 18px 0; }
}
@media (max-width: 760px) {
  body { overflow: auto; height: auto; }
  .plateau { display: flex; flex-direction: column; height: auto; min-height: 100vh; }
  .poignee { display: none; }
  .rail { flex-direction: row; overflow-x: auto; align-items: center; padding: 0 6px; }
  .rail-section, .rail-identite, .rail-bascule, .rail-bas { display: none; }
  .rail-item { width: auto; margin: 6px 2px; padding: 9px 12px; }
  .rail-item .libelle { display: none; }
  .rail-marque { padding: 12px; }
  .colonne.demandes { max-height: 38vh; }
  .colonne.echange { min-height: 60vh; }
  .saisie textarea, .connexion input { font-size: 16px; }
  .admin { padding: 16px 12px 40px; }
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tr { border-bottom: var(--filet); padding: 10px 0; }
  td { border: none; padding: 4px 12px; }
  td::before { content: attr(data-col) " : "; color: var(--graphite); font-size: 11.5px; }
  td.actions { text-align: left; padding-top: 10px; }
  td.actions::before { content: none; }
}