/* Console RAG — habillage propre.
 *
 * `style.css`, partagé avec la console de veille, est sombre par défaut. Cette
 * interface-ci est claire par choix : elle est montrée en clientèle, souvent
 * sur vidéoprojecteur, où un fond sombre passe mal. On redéfinit donc les
 * variables plutôt que de toucher au fichier commun.
 */
:root {
  /* Trois niveaux, et pas un de plus. Le SOL est gris : c'est la fenêtre et
     les colonnes. Les SURFACES sont blanches : cartes, champs, sections — ce
     sur quoi on lit et on écrit. Le REMPLISSAGE gris clair sert aux fonds
     secondaires (entêtes de table, jetons, week-ends du Gantt).
     La feuille partagée peint déjà cartes et champs avec `--bg` ; on garde
     donc `--bg` blanc et on introduit le sol à part, plutôt que de réécrire
     une trentaine de règles communes. */
  --fond: #f4f5f7; --bg: #ffffff; --panel: #eef0f4;
  --line: #e4e7ec; --text: #101828;
  --muted: #667085; --accent: #1d4ed8; --ok: #067647; --warn: #b54708;
  --err: #b42318;
  --rail: #101828; --rail-texte: #cdd3de; --rail-actif: #1d2939;
  --radius: 10px; --barre: 56px;
  /* Largeur minimale d'une carte. En dessous, l'intitulé d'une tâche ne tient
     plus sur deux lignes. À 1240 px de contenu, six cartes entrent pile. */
  --carte-min: 190px;
}

body { background: var(--fond); color: var(--text); }

/* --- Coquille en colonnes ------------------------------------------------ */
#app { display: flex; min-height: 100vh; }

/* La feuille partagée impose `main { max-width: 1200px; margin: 0 auto }` —
   bon pour une page de lecture, désastreux ici : au-delà de 1200 px, tout se
   centrait et laissait deux bandes vides. Cette interface occupe la largeur.
   `display: grid` est également neutralisé au profit du flux en colonnes. */
/* Le corps tient la barre haute puis la vue : la barre doit rester au-dessus
   de TOUTES les rubriques, pas seulement de celles qui pensent à la dessiner. */
#corps { flex: 1; min-width: 0; display: flex; flex-direction: column; }

#barre {
  height: var(--barre); flex: 0 0 var(--barre); display: flex;
  align-items: center; gap: 12px; padding: 0 18px; background: var(--bg);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
#fil { font-size: 13px; font-weight: 600; letter-spacing: .3px;
       text-transform: uppercase; color: var(--muted); }
#barre .grow { flex: 1; }

.vue-comme { display: flex; align-items: center; gap: 7px; font-size: 12px;
             color: var(--muted); }
.vue-comme select { width: auto; min-width: 165px; padding: 5px 8px;
                    font-size: 13px; }

/* Le compte : initiales colorées, nom, rôle. Le menu tient les deux actions
   qui vivaient en pied de rail. */
.menu-compte { position: relative; }
.menu-compte summary { display: flex; align-items: center; gap: 9px;
                       cursor: pointer; list-style: none; padding: 4px 6px;
                       border-radius: 8px; }
.menu-compte summary::-webkit-details-marker { display: none; }
.menu-compte summary:hover { background: var(--panel); }
.initiales { width: 30px; height: 30px; border-radius: 50%; color: #fff;
             display: inline-flex; align-items: center; justify-content: center;
             font-size: 12px; font-weight: 700; flex: 0 0 30px; }
#barre .avatar { font-size: 13px; color: var(--text); font-weight: 600;
                 line-height: 1.15; padding: 0; }
#barre .avatar small { display: block; color: var(--muted); font-weight: 400;
                       font-size: 11px; }
.menu-panneau { position: absolute; right: 0; top: calc(100% + 6px);
                background: var(--bg); border: 1px solid var(--line);
                border-radius: 10px; padding: 6px; min-width: 210px;
                box-shadow: 0 8px 24px rgba(16, 24, 40, .12); z-index: 30; }
.menu-panneau button { display: block; width: 100%; text-align: left;
                       background: none; border: 0; padding: 8px 10px;
                       border-radius: 7px; font-size: 13px; }
.menu-panneau button:hover { background: var(--panel); }

.bandeau-demo { background: #fffaeb; border-bottom: 1px solid #fedf89;
                color: #93370d; font-size: 13px; padding: 9px 18px;
                display: flex; align-items: center; gap: 10px; }
.bandeau-demo.vide { display: none; }
.bandeau-demo button { padding: 4px 10px; font-size: 12px; }

#vue {
  flex: 1; min-width: 0; padding: 0; margin: 0; max-width: none;
  display: flex; align-items: stretch; background: var(--fond);
}

#rail {
  width: 200px; flex: 0 0 200px; position: sticky; top: 0; height: 100vh; background: var(--rail); color: var(--rail-texte);
  display: flex; flex-direction: column; padding: 16px 12px; gap: 4px;
}
.marque { padding: 8px 8px 16px; display: flex; align-items: center; gap: 8px; }
/* Le lettrage est un SVG : il se met à l'échelle par sa largeur, la hauteur
   suit son rapport de 1020/138. Aucune taille fixe en pixels à maintenir. */
.marque-texte { flex: 1; min-width: 0; max-width: 134px; height: auto;
                display: block; }
/* Le rail replié fait 62 px : « HKSvolta RAG » n'y tient pas. Le monogramme
   prend le relais — la marque reste présente dans les deux états, elle ne
   disparaît jamais. */
.marque-court { display: none; width: 40px; height: auto; }
#btnRail { background: none; border: 0; color: #98a2b3; font-size: 15px;
           padding: 2px 6px; border-radius: 6px; cursor: pointer; line-height: 1; }
#btnRail:hover { background: var(--rail-actif); color: #fff; }
#rail nav { display: flex; flex-direction: column; gap: 2px; }
#rail nav button {
  background: transparent; border: none; color: var(--rail-texte);
  text-align: left; padding: 8px 10px; border-radius: 8px; font: inherit;
  font-size: 14px; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 10px;
}
/* `stroke: currentColor` : l'icône suit la couleur du libellé, y compris à
   l'état actif et au survol. Aucune variante à maintenir. */
.ico { width: 18px; height: 18px; flex: 0 0 18px; fill: none;
       stroke: currentColor; stroke-width: 1.5; stroke-linecap: round;
       stroke-linejoin: round; }
.lib { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Rail replié : les icônes seules ------------------------------------- */
#rail.replie { width: 62px; flex: 0 0 62px; padding: 16px 8px; }
#rail.replie .marque-court { display: block; margin: 0 auto; }
#rail.replie .lib,
#rail.replie .marque-texte,
#rail.replie #pied select,
#rail.replie .avatar { display: none; }
#rail.replie .marque { flex-direction: column; gap: 6px; align-items: center;
                       padding: 4px 0 14px; }
#rail.replie nav button { justify-content: center; padding: 10px 0; gap: 0; }
#rail.replie nav.tech button { font-size: 14px; }
#rail.replie #pied { align-items: center; }
#rail nav button:hover { background: var(--rail-actif); color: #fff; }
#rail nav button.actif { background: var(--rail-actif); color: #fff; font-weight: 600; }
#rail nav.tech { border-top: 1px solid #1d2939; padding-top: 8px; margin-top: 8px; }
#rail nav.tech button { font-size: 13px; color: #98a2b3; }
#pied { border-top: 1px solid #1d2939; margin-top: 8px; padding-top: 10px;
        display: flex; flex-direction: column; gap: 6px; }
#pied select { background: var(--rail-actif); color: var(--rail-texte);
               border-color: #1d2939; font-size: 13px; }
#pied .lien { color: #98a2b3; font-size: 12px; }
.avatar { font-size: 13px; color: #fff; padding: 0 4px; }
.avatar small { display: block; color: #98a2b3; font-weight: 400; }

/* --- Trois colonnes de la recherche -------------------------------------- */
/* `flex: 0 1` et non `0 0` : les colonnes doivent pouvoir rétrécir. Figées,
   elles débordaient la fenêtre et le dossier se retrouvait coupé à droite sur
   un écran d'ordinateur portable. */
.colonne-liste {
  flex: 0 1 300px; min-width: 230px; border-right: 1px solid var(--line);
  padding: 16px; overflow-y: auto;
  max-height: calc(100vh - var(--barre));
  background: var(--bg);
}
.colonne-centre { flex: 1; min-width: 0; padding: 20px 28px; overflow-y: auto;
                  max-height: calc(100vh - var(--barre));
                  display: flex; flex-direction: column;
                  background: var(--fond); }
/* Un élément flex a `min-width: auto` par défaut, ce qui l'empêche de
   rétrécir sous la largeur de son contenu : le titre débordait sa colonne
   malgré la césure. C'est le piège flexbox le plus courant. */
.colonne-centre > * { min-width: 0; }
/* Le dossier n'existe qu'une fois une réponse obtenue : afficher une colonne
   vide en permanence occupe le tiers de l'écran pour ne rien dire. */
.colonne-dossier.vide { display: none; }
.colonne-dossier {
  flex: 0 1 360px; min-width: 280px; border-left: 1px solid var(--line);
  padding: 16px; overflow-y: auto; max-height: calc(100vh - var(--barre));
  background: var(--fond);
}

/* Sous 1150 px, trois colonnes deviennent illisibles : le dossier passe sous
   la réponse plutôt que de tout comprimer. */
@media (max-width: 1150px) {
  #vue { flex-wrap: wrap; }
  .colonne-centre { flex: 1 1 100%; }
  .colonne-dossier { flex: 1 1 100%; border-left: none;
                     border-top: 1px solid var(--line); max-height: none; }
}
.colonne-pleine { flex: 1; min-width: 0; padding: 20px 28px; overflow-y: auto;
                  max-height: calc(100vh - var(--barre));
                  background: var(--fond); }
.colonne-pleine section { max-width: none; }

/* Un tableau est une SECTION : il se pose sur une surface blanche, jamais à nu
   sur le sol gris. La règle est portée par la feuille plutôt que par chaque
   module — sept appels de `<table>` auraient sinon sept traitements différents,
   et le huitième aurait été oublié.
   Dans une carte, la surface existe déjà : on ne la redouble pas. */
#vue table { background: var(--bg); border: 1px solid var(--line); }
#vue td, #vue th { padding: 8px 12px; }
/* Un en-tête centré au-dessus d'une colonne alignée à gauche donne deux axes
   de lecture pour une seule colonne. */
#vue th { text-align: left; font-size: 11px; text-transform: uppercase;
          letter-spacing: .04em; color: var(--muted); font-weight: 600;
          background: var(--panel); }
#vue .carte table, #vue .defilable table { border: 0; background: none; }
#vue tr:last-child td { border-bottom: 0; }
.defilable { background: var(--bg); border: 1px solid var(--line);
             border-radius: var(--radius); overflow: hidden auto; }
.carte .defilable { background: none; border: 0; border-radius: 0; }

/* Repartir de zéro se fait en haut de la liste, là où l'œil cherche « la
   suite » : au-dessus des questions passées, pas noyé sous elles. */
.nouveau { width: 100%; margin-bottom: 8px; text-align: left;
           font-size: 13px; font-weight: 600; padding: 9px 12px; }
.nouveau:hover:not(:disabled) { background: var(--panel); }

/* Fiche du dossier : étiquette à gauche sur une colonne fixe, valeur en
   regard. Les étiquettes alignées se parcourent verticalement d'un coup
   d'œil ; centrées ou variables, il faut les relire une à une. */
.fiche { display: grid; grid-template-columns: 118px 1fr; gap: 7px 12px;
         margin: 0; font-size: 13px; align-items: baseline; }
.fiche dt { color: var(--muted); font-size: 12px; }
.fiche dd { margin: 0; }
.na { color: var(--muted); font-style: italic; }
.fiche-vide { margin: 0; font-size: 13px; }
.ligne-histo { display: grid; grid-template-columns: 82px 1fr; gap: 10px;
               font-size: 12.5px; padding: 5px 0;
               border-bottom: 1px solid var(--line); }
.ligne-histo:last-child { border-bottom: 0; }
.note-terrain { font-size: 12.5px; padding: 6px 0;
                border-bottom: 1px solid var(--line); }
.note-terrain:last-child { border-bottom: 0; }
.note-terrain .muted { font-size: 11px; margin-top: 3px; }

.interprete { display: flex; gap: 9px; align-items: flex-start;
              background: #eff8ff; border: 1px solid #b2ddff; color: #175cd3;
              border-radius: 8px; padding: 9px 12px; font-size: 12.5px;
              margin-top: 14px; }
.interprete span { font-size: 14px; line-height: 1.2; }

.titre-colonne { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
                 color: var(--muted); font-weight: 600; margin-bottom: 10px; }

/* --- Liste des questions ------------------------------------------------- */
.jour { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
        color: var(--muted); margin: 14px 0 6px; }
.q-item { padding: 10px; border-radius: 8px; cursor: pointer;
          border: 1px solid transparent; }
.q-item:hover { background: var(--panel); }
.q-item.actif { background: var(--panel); border-color: var(--line);
                box-shadow: inset 3px 0 0 var(--accent); }
.q-item b { font-size: 13px; font-weight: 600; display: block; line-height: 1.4; }
.q-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* --- Réponse ------------------------------------------------------------- */
/* Une question de technicien est une phrase, pas un titre court : elle doit
   revenir à la ligne. Sans ces règles, elle sortait de sa colonne. */
/* `white-space: normal` explicite : la feuille partagée impose `nowrap` aux h1,
   parce que l'en-tête de la console de veille doit tenir sur une ligne. Ici un
   h1 porte la QUESTION d'un technicien, c'est-à-dire une phrase entière. */
.titre-question { font-size: 22px; font-weight: 700; line-height: 1.35;
                  margin: 0 0 6px; white-space: normal;
                  overflow-wrap: anywhere; hyphens: auto; }
.carte-reponse { border: 1px solid var(--line); border-radius: 12px;
                 padding: 18px 20px; background: var(--bg); }
.bandeau-source { display: flex; justify-content: space-between; align-items: center;
                  gap: 12px; padding-bottom: 12px; margin-bottom: 14px;
                  border-bottom: 1px solid var(--line); font-size: 13px; }
.bandeau-source .ok { font-weight: 600; }
.corps-reponse { font-size: 15px; line-height: 1.65; }
.corps-reponse p { margin: 10px 0; }

/* Pastille de citation : un numéro, pas un nom de fichier. Cliquable, elle
   met en avant la source correspondante dans le dossier de droite. */
.cite { display: inline-block; min-width: 20px; text-align: center;
        font-size: 11px; font-weight: 600; padding: 1px 5px; margin: 0 2px;
        border: 1px solid var(--line); border-radius: 5px; background: var(--panel);
        color: var(--muted); cursor: pointer; vertical-align: 1px; }
.cite:hover { border-color: var(--accent); color: var(--accent); }

.etape { display: flex; gap: 12px; margin: 12px 0; align-items: flex-start; }
.etape .num { flex: 0 0 24px; height: 24px; border-radius: 50%;
              border: 1px solid var(--line); display: flex; align-items: center;
              justify-content: center; font-size: 12px; color: var(--muted); }

.lacune { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px;
          padding: 12px 14px; background: var(--panel); border-radius: 8px;
          font-size: 13px; color: var(--muted); }

/* --- Dossier de la réponse ----------------------------------------------- */
.bloc-dossier { background: var(--bg); border: 1px solid var(--line);
                border-radius: 10px; margin-bottom: 12px; }
.bloc-dossier > summary { padding: 12px 14px; cursor: pointer; font-weight: 600;
                          font-size: 14px; list-style: none; display: flex;
                          justify-content: space-between; align-items: center; }
.bloc-dossier > summary::-webkit-details-marker { display: none; }
.bloc-dossier .contenu { padding: 0 14px 14px; }
.source-item { padding: 12px 0; border-top: 1px solid var(--line); }
.source-item:first-child { border-top: none; }
.source-num { font-size: 12px; color: var(--muted); }
.source-titre { font-weight: 600; font-size: 13px; line-height: 1.4;
                margin: 2px 0 6px; overflow-wrap: anywhere; }
.source-extrait { font-size: 12px; line-height: 1.5; color: var(--muted);
                  background: var(--panel); border-radius: 6px; padding: 8px 10px; }
.source-meta { font-size: 11px; color: var(--muted); margin-top: 6px; }
.source-item.vise { outline: 2px solid var(--accent); outline-offset: 4px;
                    border-radius: 6px; }

/* --- Saisie -------------------------------------------------------------- */
.saisie { border: 1px solid var(--line); border-radius: 12px; padding: 6px 6px 6px 16px;
          display: flex; align-items: center; gap: 8px; background: var(--bg); }
.saisie textarea { border: none; background: none; resize: none; flex: 1;
                   font: inherit; font-size: 14px; padding: 8px 0; outline: none; }
.saisie button { border-radius: 50%; width: 34px; height: 34px; padding: 0;
                 display: flex; align-items: center; justify-content: center; }

/* --- Portail ------------------------------------------------------------- */
#portail section { max-width: 400px; margin: 14vh auto; border: 1px solid var(--line);
                   border-radius: 12px; padding: 28px; }
.marque-portail { margin-bottom: 20px; }
/* Sur le portail, fond clair : le lettrage blanc y serait invisible. On le
   pose sur une pastille sombre, comme le favicon. */
.marque-portail img { display: block; width: 208px; height: auto;
  background: var(--rail); padding: 12px 16px; border-radius: 10px; }
#portail input { width: 100%; }

/* --- Grille des droits (onglet Admin) ------------------------------------ */
.grille td { padding: 3px 8px 3px 0; font-size: 13px; }
.grille input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }
.trois { display: inline-flex; border: 1px solid var(--line); border-radius: 6px;
         overflow: hidden; }
.trois button { border: none; border-radius: 0; padding: 1px 7px; font-size: 13px;
                background: transparent; color: var(--muted); cursor: pointer; }
.trois button:hover:not(:disabled) { background: var(--panel); }
.trois button:disabled { cursor: default; opacity: .5; }
.trois .actif-non { background: var(--err); color: #fff; }
.trois .actif-neutre { background: var(--line); color: var(--text); }
.trois .actif-oui { background: var(--ok); color: #fff; }
label.pill { display: inline-flex; align-items: center; gap: 6px;
             padding: 3px 10px; white-space: nowrap; }
label.pill input { margin: 0; }

.vignettes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
             min-width: 0; }
/* La carte fait maintenant moins de 200 px : une vignette bornée en pixels
   absolus en débordait. Elle se borne désormais à la place disponible. */
.vignettes img { max-height: 130px; max-width: 100%; border: 1px solid var(--line);
                 border-radius: 6px; background: #fff; }

/* --- Planning ------------------------------------------------------------ */
.calendrier td { border: 1px solid var(--line); padding: 6px; vertical-align: top;
                 font-size: 12px; }
.calendrier tr.groupe td { background: var(--panel); text-align: center;
                           font-weight: 600; }
.cell-poste { min-width: 84px; }
.legende-nature { display: inline-flex; align-items: center; gap: 6px;
                  font-size: 12px; color: var(--muted); }
.legende-nature i { width: 10px; height: 10px; border-radius: 3px;
                    display: inline-block; }

.jeton { background: var(--panel); border-radius: 6px; padding: 3px 6px;
         margin-bottom: 3px; white-space: nowrap; }

/* Gantt : des barres posées sur une piste large de N pixels par jour. Pas de
   bibliothèque — il n'y a qu'un décalage et une largeur à calculer. La piste
   déborde et défile plutôt que de se comprimer : c'est la compression qui
   faisait disparaître le détail. */
.gantt-outils { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                margin: 4px 0 12px; }
/* La feuille commune impose width:100% à tout select — ici il pousserait
   le reste de la barre d'outils à la ligne suivante. */
.gantt-outils select { width: auto; min-width: 150px; padding: 5px 8px; }
.gantt-outils label { flex: 0 0 auto; }
.gantt-outils label input { width: auto; }
.gantt-cadre { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px;
               background: var(--bg); }
.gantt-corps { display: inline-block; min-width: 100%; }
.gantt-ligne { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.gantt-ligne:last-child { border-bottom: 0; }

/* La colonne des intitulés reste visible quand la piste défile : lire une
   barre sans savoir de quelle tâche il s'agit n'apprend rien. */
.gantt-nom { flex: 0 0 260px; position: sticky; left: 0; z-index: 2;
             background: var(--bg); border-right: 1px solid var(--line);
             padding: 6px 10px; overflow: hidden; }
.gantt-titre { display: flex; align-items: center; gap: 2px; background: none;
               border: 0; padding: 0; font: inherit; color: inherit;
               cursor: pointer; text-align: left; width: 100%; }
.gantt-titre:hover .gantt-intitule { text-decoration: underline; }
.gantt-intitule { font-size: 13px; font-weight: 600; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }
.gantt-meta { display: flex; gap: 8px; font-size: 11px; color: var(--muted);
              margin-top: 2px; overflow: hidden; white-space: nowrap; }
.gantt-meta span { overflow: hidden; text-overflow: ellipsis; }
/* La relève tient sur une ligne qui déborde volontiers la colonne : elle se
   lit au survol quand elle est longue, plutôt que d'élargir toutes les autres. */
.gantt-releve { font-size: 11px; color: var(--accent); margin-top: 2px;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Deux fonds superposés : le grisé des samedis-dimanches, décalé pour tomber
   sur les bons jours quelle que soit la date de départ, puis le filet
   quotidien. */
.gantt-piste { position: relative; min-height: 42px; flex: 0 0 auto;
               background-image:
                 repeating-linear-gradient(to right,
                   transparent 0 calc(var(--j) * 5),
                   var(--panel) calc(var(--j) * 5) calc(var(--j) * 7)),
                 repeating-linear-gradient(to right,
                   var(--line) 0 1px, transparent 1px var(--j));
               background-position: calc(-1 * var(--decalage)) 0, 0 0; }
.gantt-piste.heures { background-image:
    repeating-linear-gradient(to right, transparent 0 calc(var(--j) / 8),
      rgba(0,0,0,.035) calc(var(--j) / 8) calc(var(--j) / 4)),
    repeating-linear-gradient(to right,
      transparent 0 calc(var(--j) * 5),
      var(--panel) calc(var(--j) * 5) calc(var(--j) * 7)),
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px var(--j));
  background-position: 0 0, calc(-1 * var(--decalage)) 0, 0 0; }
.gantt-entete { position: sticky; top: 0; z-index: 3; background: var(--bg); }
.gantt-entete .gantt-nom { font-size: 12px; color: var(--muted);
                           display: flex; align-items: flex-end; }
.gantt-regle { height: 44px; }
.gantt-bande { display: flex; height: 20px; }
.gantt-bande div { font-size: 11px; font-weight: 600; color: var(--muted);
                   padding-left: 6px; border-right: 1px solid var(--line);
                   overflow: hidden; white-space: nowrap; box-sizing: border-box; }
.gantt-jours { display: flex; height: 24px; }
.gantt-jours div { font-size: 11px; color: var(--muted); text-align: center;
                   line-height: 24px; overflow: hidden; box-sizing: border-box; }
.gantt-jours .fds { background: var(--panel); }
.gantt-jours .cejour { color: var(--accent); font-weight: 700; }

/* Le bandeau des membres ferme le bloc de son équipe : il se lit comme un
   pied de section, pas comme une ligne de tâche de plus. */
.gantt-sous-groupe { position: sticky; left: 0; width: 260px;
                     box-sizing: border-box; padding: 4px 10px 4px 22px;
                     font-size: 11px; font-weight: 600; color: var(--muted);
                     text-transform: uppercase; letter-spacing: .04em;
                     border-bottom: 1px solid var(--line); }
.gantt-membres { background: var(--panel); }
.gantt-membres .gantt-nom { background: var(--panel); display: flex;
                            flex-direction: column; justify-content: center;
                            gap: 2px; }
.gantt-equipiers { position: absolute; left: 10px; top: 8px; display: flex;
                   gap: 6px; flex-wrap: wrap; align-items: center; }
.gantt-equipiers .pill { background: var(--bg); font-size: 11px; }
.gantt-rien .gantt-nom { font-size: 12px; font-style: italic; }

.gantt-groupe { display: flex; justify-content: space-between; position: sticky;
                left: 0; width: 260px; box-sizing: border-box;
                background: var(--panel); padding: 5px 10px; font-size: 12px;
                font-weight: 600; border-bottom: 1px solid var(--line); }

.gantt-barre { position: absolute; top: 9px; height: 22px; border-radius: 4px;
               background: var(--accent); min-width: 9px; cursor: pointer;
               display: flex; align-items: center; overflow: hidden; }
.gantt-barre.err { background: var(--err); }
.gantt-barre.warn { background: var(--warn); }
/* Une fin déduite d'une durée absente n'est pas une planification : la hachure
   dit que la longueur de la barre est une convention d'affichage. */
.gantt-barre.presumee { background-image: repeating-linear-gradient(45deg,
                          rgba(255,255,255,.45) 0 4px, transparent 4px 8px); }
.gantt-barre.faite { opacity: .45; }
.gantt-barre.en_cours { box-shadow: 0 0 0 2px var(--accent); }
.gantt-suite { position: absolute; top: 14px; font-size: 11px;
               color: var(--muted); white-space: nowrap; pointer-events: none; }
.gantt-aujourdhui { position: absolute; top: 0; bottom: 0; width: 2px;
                    background: var(--accent); opacity: .55; }

.gantt-detail { padding: 8px 10px 10px 270px; background: var(--panel);
                border-bottom: 1px solid var(--line); font-size: 13px; }
.gantt-detail p { margin: 5px 0 0; }
.gantt-legende { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px;
                 margin-top: 8px; }
.gantt-legende span { display: flex; align-items: center; gap: 5px; }
.gantt-legende .ex { width: 16px; height: 9px; border-radius: 2px;
                     background: var(--accent); display: inline-block; }
.gantt-legende .ex.err { background: var(--err); }
.gantt-legende .ex.warn { background: var(--warn); }
.gantt-legende .ex.faite { opacity: .45; }
.gantt-legende .ex.presumee { background-image: repeating-linear-gradient(45deg,
                                rgba(255,255,255,.45) 0 4px, transparent 4px 8px); }
.gantt-legende .ex.trait { width: 2px; height: 12px; border-radius: 0; }
.gantt-orphelines { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.gantt-orphelines li { padding: 3px 0; }
.gantt-orphelines .muted { margin-left: 6px; font-size: 11px; }
.pastille.vide { background: none; }

/* Pastille d'importance : un point, rouge ou orange. Une tâche non classée
   n'en porte aucune — une pastille grise laisserait croire à un classement. */
.pastille { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
            margin-right: 7px; vertical-align: 1px; }
.pastille.err { background: var(--err); }
.pastille.warn { background: var(--warn); }
.pastille.neutre { background: var(--muted); opacity: .45; }
.pill.neutre { color: var(--muted); }
/* Une note est du texte : au-delà d'une soixantaine de caractères par ligne,
   l'œil perd le début de la ligne suivante. La liste tient donc dans la même
   colonne que le formulaire, un peu plus large. */

/* --- Panneaux : fenêtre centrale et volet latéral -------------------------- */
.panneau-fond { position: fixed; inset: 0; z-index: 60; display: flex;
                background: rgba(16, 24, 40, 0); transition: background .18s ease; }
.panneau-fond.ouvert { background: rgba(16, 24, 40, .45); }
.panneau-fond[data-position="centre"] { align-items: center; justify-content: center;
                                        padding: 24px; }
.panneau-fond[data-position="droite"] { justify-content: flex-end; }

.panneau { background: var(--bg); display: flex; flex-direction: column;
           box-shadow: 0 20px 50px rgba(16, 24, 40, .22);
           transition: transform .2s ease, opacity .2s ease; }
[data-position="centre"] .panneau { width: min(620px, 100%); max-height: 88vh;
  border-radius: 14px; transform: translateY(10px) scale(.99); opacity: 0; }
[data-position="droite"] .panneau { width: min(520px, 100%); height: 100vh;
  border-left: 1px solid var(--line); transform: translateX(24px); opacity: 0; }
.ouvert .panneau { transform: none; opacity: 1; }

.panneau-tete { display: flex; align-items: center; justify-content: space-between;
                gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.panneau-tete b { font-size: 15px; }
.panneau-fermer { background: none; border: 0; font-size: 22px; line-height: 1;
                  padding: 0 6px; color: var(--muted); cursor: pointer; }
.panneau-fermer:hover { color: var(--text); }
.panneau-corps { padding: 20px; overflow-y: auto; }
/* Dans un panneau, le formulaire occupe toute la largeur disponible : la
   contrainte de 560 px servait à ne pas s'étaler sur une page entière. */
.panneau-corps .formulaire-colonne { max-width: none; margin-top: 0; }
.panneau-corps .carte { border: 0; padding: 0; background: none; }
.panneau-corps textarea { min-height: 96px; max-height: 46vh; }

/* --- Bouton d'action en contour -------------------------------------------
 * Le bleu plein est déjà pris par la vue active du sélecteur : deux aplats de
 * la même couleur mettent la navigation et l'action à égalité, et l'œil ne sait
 * plus laquelle est laquelle. Le contour garde l'identité de l'action sans lui
 * disputer le poids.
 *
 * La règle vaut là où un bouton COHABITE avec la navigation bleue. Dans un
 * panneau, rien ne le concurrence : le bouton de validation y reste plein.
 */
.contour { background: var(--bg); border-color: var(--accent);
           color: var(--accent); font-weight: 600; }
.contour:hover:not(:disabled) { background: #eff4ff; }
.contour:disabled { border-color: var(--line); color: var(--muted); }

/* --- Barre de tri ---------------------------------------------------------- */
/* Les onglets de vue et les commandes de la vue tiennent la même ligne : deux
   rangées superposées donnaient deux alignements pour un seul niveau. Sur une
   fenêtre étroite, les commandes passent dessous plutôt que de comprimer les
   onglets. */
.rangee-vues { align-items: center; gap: 10px; margin-bottom: 14px; }
.rangee-vues #pln-vues { gap: 8px; }
.rangee-vues #pln-actions { gap: 10px; }
.barre-liste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
               margin-bottom: 12px; }
.barre-liste .grow { flex: 1; }
.tri { display: inline-flex; border: 1px solid var(--line); border-radius: 8px;
       overflow: hidden; }
.tri button { border: 0; border-radius: 0; background: var(--bg); font-size: 13px;
              padding: 6px 12px; }
.tri button.actif { background: var(--accent); color: #fff; }

/* --- Cartes de tâche ------------------------------------------------------ */
/* Une grille qui se remplit d'elle-même : six cartes sur un écran large, moins
   quand la fenêtre rétrécit. Aucun nombre de colonnes écrit en dur — c'est la
   largeur disponible qui décide, et le compte suit le redimensionnement. */
.taches-lot, #listeNotes, .grille-cartes { display: grid; gap: 10px;
  margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(var(--carte-min), 1fr)); }
.carte.tache { padding: 12px 14px; }
/* Une carte qui s'ouvre doit le montrer avant le clic, sans quoi on ne l'essaie
   pas. Le relief au survol et l'anneau au focus disent la même chose, à la
   souris et au clavier. */
.cliquable { cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.cliquable:hover { border-color: var(--accent);
                   box-shadow: 0 2px 10px rgba(16, 24, 40, .08); }
.cliquable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Les commandes du volet, séparées du formulaire par un filet : corriger un
   champ et supprimer l'objet ne sont pas le même geste. */
.panneau-actions { margin-top: 20px; padding-top: 18px;
                   border-top: 1px solid var(--line);
                   display: flex; flex-direction: column; gap: 12px; }
.danger { border-color: var(--err); color: var(--err); background: var(--bg);
          font-weight: 600; align-self: flex-start; }
.danger:hover:not(:disabled) { background: #fef3f2; border-color: var(--err); }
.carte.tache.en-edition { border-color: var(--accent);
                          box-shadow: inset 3px 0 0 var(--accent); }
.carte.tache, .carte.note { display: flex; flex-direction: column;
                            margin-bottom: 0; min-width: 0; overflow: hidden; }
.carte.tache > *, .carte.note > * { min-width: 0; }
.tache-tete { display: flex; flex-direction: column; gap: 8px; }
.tache-tete > .row { width: 100%; }
.tache-tete select { width: 100%; }
.tache-tete b { font-size: 14px; }
.tache-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px;
              color: var(--muted); margin-top: 3px; }
.tache-annot, .tache-desc { margin: 8px 0 0; font-size: 13px; }
.tache-desc { white-space: pre-wrap; }
.tache-pied { display: flex; flex-direction: column; align-items: flex-start;
              gap: 8px; margin-top: auto; padding-top: 10px;
              border-top: 1px solid var(--line); }
/* Aperçu de quatre lignes sur la carte, texte entier dans le volet. Sans cette
   coupe, une carte de la grille prend la hauteur de son plus long paragraphe et
   décale toute la rangée. */
.tache-desc, .note-message {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; white-space: pre-wrap; }
.note-message { margin-top: 6px; font-size: 13px; }

.carte.note { margin-bottom: 10px; }
.note-objet { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* --- Formulaire de note -------------------------------------------------- */
/* Un formulaire pleine largeur oblige l'œil à traverser l'écran entre
   l'étiquette et le champ. Celui-ci est borné à la largeur d'une colonne de
   lecture, et chaque champ porte son intitulé au-dessus plutôt qu'un texte
   d'exemple qui disparaît à la saisie. */
.formulaire-colonne { margin-top: 8px; max-width: 560px;
  display: flex; flex-direction: column; gap: 12px; }
.champ { display: flex; flex-direction: column; gap: 5px; }
.champ > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.champ > span em { font-weight: 400; font-style: normal; opacity: .8; }
.champ-double { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fige { border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px;
        background: var(--panel); color: var(--muted); font-size: 13px; }
.epingle { align-self: flex-start; }
.cibles { display: flex; flex-wrap: wrap; gap: 6px; min-height: 4px; }
.cibles:empty { display: none; }
.pill.cible { display: inline-flex; align-items: center; gap: 4px;
              background: var(--panel); }
.pill.cible .rang { color: var(--accent); }
.pill.cible button { background: none; border: 0; padding: 0 2px; cursor: pointer;
                     color: var(--muted); font-size: 14px; line-height: 1; }
.pill.cible button:hover { color: var(--err); }

/* --- Champs natifs, remis au goût du reste -------------------------------- */
/* Le navigateur dessine `select`, `date` et `file` à sa façon — chevrons gris,
   bouton « Sélect. fichiers » d'un autre âge. On reprend la main sur ce qui
   se style, sans remplacer les contrôles : un faux menu perdrait le clavier,
   la saisie au doigt et la validation. */
select { appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' \
    viewBox='0 0 16 16' fill='none' stroke='%23667085' stroke-width='1.6' \
    stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  background-size: 16px; cursor: pointer; }
select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

input[type="date"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .55; cursor: pointer; padding: 2px; border-radius: 4px; }
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1; background: var(--panel); }

input[type="file"] { padding: 6px; cursor: pointer; }
input[type="file"]::file-selector-button {
  font: inherit; font-size: 13px; font-weight: 600; margin-right: 10px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--text); cursor: pointer; }
input[type="file"]::file-selector-button:hover { border-color: var(--accent);
  color: var(--accent); }

/* --- Journal des actions --------------------------------------------------
 * Une entrée, puis le détail champ par champ. La valeur d'avant est barrée et
 * grise, celle d'après en clair : on doit voir ce qui a changé sans lire les
 * en-têtes de colonnes à chaque ligne.
 */
.entree-journal { background: var(--bg); border: 1px solid var(--line);
                  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.entree-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
               font-size: 13px; }
.entree-tete .grow { flex: 1; }
table.diff { margin-top: 8px; width: auto; background: none; border: 0; }
table.diff td { border: 0; padding: 2px 10px 2px 0; font-size: 12.5px;
                vertical-align: baseline; }
.diff-champ { color: var(--muted); white-space: nowrap; }
.diff-avant { color: var(--muted); text-decoration: line-through; }
.diff-fleche { color: var(--muted); }
.diff-apres { font-weight: 600; }

/* --- Bandeau de niveau d'importance ---------------------------------------
 * Remplace la pilule bordée qui précédait : elle avait la forme d'un bouton
 * sans en avoir le comportement, et l'œil l'essayait. Ici, un aplat très pâle
 * annonce la section, un liseré gauche porte la couleur du niveau, le compte
 * se lit à droite — aligné d'un niveau à l'autre.
 *
 * Les niveaux non classés, normale et basse restent gris : réserver la couleur
 * aux deux niveaux qui exigent une décision, c'est ce qui la rend lisible.
 */
.bande-niveau { display: flex; align-items: center; gap: 10px;
                margin: 20px 0 10px; padding-bottom: 5px;
                border-bottom: 1px solid var(--line); }
.bande-niveau:first-child { margin-top: 0; }
.bande-niveau .t { font-size: 11px; font-weight: 700; letter-spacing: .08em;
                   text-transform: uppercase; color: var(--muted); }
.bande-niveau .n { margin-left: auto; font-size: 12px; color: var(--muted);
                   font-variant-numeric: tabular-nums; }

/* Le liseré de la carte, comme sur les notes : c'est LUI qui porte la couleur
   du niveau. Il suit l'arrondi du cadre — un `border-left` sur un bloc à coins
   ronds épouse la courbe sans qu'on ait rien à dessiner. Les niveaux sans
   urgence n'en portent pas : une couleur sur tout laisse voir une couleur sur
   rien. */
.carte.tache.bord-err { border-left: 4px solid var(--err); }
.carte.tache.bord-warn { border-left: 4px solid var(--warn); }
.carte.tache.bord-neutre { border-left: 4px solid var(--line); }

/* --- Bandeau d'annulation --------------------------------------------------
 * En bas au centre, sombre, au-dessus de tout — y compris d'un volet ouvert.
 * Le compte à rebours est écrit : « Annuler » sans durée laisse ignorer
 * combien de temps il reste, et on clique par précaution.
 */
.annulable { position: fixed; left: 50%; bottom: 24px; z-index: 80;
             transform: translate(-50%, 12px); opacity: 0;
             transition: transform .16s ease, opacity .16s ease;
             display: flex; align-items: center; gap: 16px;
             background: var(--rail); color: #fff; font-size: 13px;
             padding: 10px 12px 10px 18px; border-radius: 10px;
             box-shadow: 0 10px 30px rgba(16, 24, 40, .28); max-width: 92vw; }
.annulable.ouvert { transform: translate(-50%, 0); opacity: 1; }
.annulable button { background: transparent; border: 1px solid #475467;
                    color: #fff; font-weight: 600; font-size: 12.5px;
                    padding: 6px 12px; border-radius: 7px; white-space: nowrap; }
.annulable button:hover { background: var(--rail-actif); border-color: #667085; }
.annulable .compte { font-weight: 400; opacity: .65; margin-left: 4px;
                     font-variant-numeric: tabular-nums; }

/* La machine choisie avant la question. Une pastille, pas un bandeau : elle
   rappelle le contexte sans prendre la place de la saisie. */
.etiquette { display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--accent); color: var(--accent);
  font-size: 12px; font-weight: 600; }