/* Palette d'origine du tracker, conservee telle quelle : seul le logo reprend
   l'identite du dashboard fxtious.local (police Syne, cyan). --muted et
   --head sont ajoutes parce que les blocs plus recents s'en servent. */
:root{
  --fond:#141619; --panneau:#1c1f24; --panneau2:#22262c; --bord:#2c313a;
  --texte:#dfe3e8; --pale:#8b939e; --accent:#4aa3df;
  --vert:#4caf6d; --bleu:#3da9e0; --violet:#9b7bd4;
  --rouge:#e05252; --ambre:#e0a03d; --gris:#6b7280;
  --muted:#6b7280;
  --cyan:#38bdf8;                        /* cyan du dashboard, pour le logo */
  --head:'Syne','Segoe UI',sans-serif;
}
*{box-sizing:border-box}

/* L'attribut `hidden` ne vaut `display:none` que par la feuille du navigateur,
   et TOUTE regle d'auteur posant un `display` le neutralise sans prevenir.
   C'est ce qui laissait le message « aucune version jouable » affiche en
   permanence par-dessus le lecteur, `.lecteur-vide` etant en `display:flex`.
   On tranche une fois pour toutes. */
[hidden]{display:none !important}

body{
  margin:0; background:var(--fond); color:var(--texte);
  font:14px/1.5 -apple-system,"Segoe UI",Roboto,sans-serif;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

header{
  display:flex; align-items:center; gap:18px;
  padding:12px 22px; background:var(--panneau); border-bottom:1px solid var(--bord);
  position:sticky; top:0; z-index:10;
}
header .logo{
  font-family:var(--head); font-weight:800; font-size:16px;
  color:var(--cyan); letter-spacing:.2px;
}
header .logo:hover{text-decoration:none}
header .logo span{color:var(--muted); font-weight:400; margin-left:.35em}
header .fil{color:var(--pale); font-size:13px}
header .droite{margin-left:auto; display:flex; gap:14px; align-items:center}

main{padding:22px; max-width:1500px; margin:0 auto}
h1{font-size:20px; margin:0 0 4px}
h2{font-size:15px; margin:26px 0 10px; color:var(--pale);
   text-transform:uppercase; letter-spacing:.6px; font-weight:600}
.sous{color:var(--pale); font-size:13px; margin-bottom:18px}

.grille{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.carte{
  background:var(--panneau); border:1px solid var(--bord);
  border-radius:8px; padding:16px; transition:border-color .15s;
}
.carte:hover{border-color:#3d4450}
.carte h3{margin:0 0 6px; font-size:16px}
.carte .meta{color:var(--pale); font-size:12px}

table{width:100%; border-collapse:collapse; background:var(--panneau);
      border:1px solid var(--bord); border-radius:8px; overflow:hidden}
th{
  text-align:left; padding:9px 12px; font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; color:var(--pale); background:var(--panneau2);
  border-bottom:1px solid var(--bord); font-weight:600;
}
td{padding:9px 12px; border-bottom:1px solid #23272e; vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#1f232a}
td.num{text-align:right; font-variant-numeric:tabular-nums; color:var(--pale)}

.pastille{
  display:inline-block; padding:2px 9px; border-radius:11px;
  font-size:11px; font-weight:600; letter-spacing:.3px; white-space:nowrap;
}
.s-a_faire{background:#33383f; color:#b8bfc8}
.s-en_cours{background:#1d3d52; color:#7ec8f0}
.s-en_review{background:#3a2f52; color:#c3aef0}
.s-retake{background:#4d2626; color:#f0a0a0}
.s-approuve{background:#1f3f2c; color:#8ee0a8}
.s-en_attente{background:#33383f; color:#8b939e}
.s-omis{background:#2a2a2a; color:#6b7280; text-decoration:line-through}

.barre{height:6px; background:#2a2f36; border-radius:3px; overflow:hidden; min-width:80px}
.barre span{display:block; height:100%; background:var(--vert)}

/* `.vign` sert a la fois d'image seule et de conteneur de vignette animee :
   les deux doivent occuper exactement la meme case. */
.vign{width:96px; height:54px; object-fit:cover; border-radius:4px;
      background:#0e1013; border:1px solid var(--bord); display:block;
      overflow:hidden; flex:none}
a.vign:hover{border-color:var(--accent)}
.vign-vide{width:96px; height:54px; border-radius:4px; background:#0e1013;
      border:1px dashed var(--bord); display:flex; align-items:center;
      justify-content:center; color:#3d4450; font-size:10px}

.badge{background:#4d2626; color:#f0a0a0; border-radius:9px;
       padding:1px 7px; font-size:11px; font-weight:600}

.filtres{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.filtres a{
  padding:4px 11px; border-radius:14px; font-size:12px;
  background:var(--panneau); border:1px solid var(--bord); color:var(--pale);
}
.filtres a.on{background:#25405a; border-color:#356a94; color:#cfe6f7}
.filtres a:hover{text-decoration:none; border-color:#3d4450}

form.enligne{display:inline-flex; gap:6px; align-items:center}
select,input[type=text],input[type=password],input[type=number],textarea{
  background:#16191d; color:var(--texte); border:1px solid var(--bord);
  border-radius:5px; padding:6px 9px; font:inherit;
}
select:focus,input:focus,textarea:focus{outline:none; border-color:var(--accent)}
textarea{width:100%; resize:vertical; min-height:70px}
button{
  background:#2f353d; color:var(--texte);
  border:1px solid var(--bord); border-radius:5px; padding:6px 13px;
  font:inherit; cursor:pointer;
}
button:hover{background:#3a414a}
button.primaire{background:#25557e; border-color:#356a94}
button.primaire:hover{background:#2d6796}

.deux{display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start}
@media (max-width:1000px){.deux{grid-template-columns:1fr}}

/* Trois natures de note, trois lisets. Une liste de vingt notes doit se
   lire sans lire : ce qui vient du client d'abord, mes pense-betes apres. */
.note{border-left:3px solid var(--bord); background:var(--panneau);
      border-radius:0 6px 6px 0; padding:10px 13px; margin-bottom:9px}
/* une demande du client : c'est ce qui reste a faire */
.note.client{border-left-color:var(--ambre); background:rgba(224,160,61,.07)}
/* ma reponse dans son fil : il la lit, le rappel est utile avant d'ecrire */
.note.reponse{border-left-color:var(--cyan); background:rgba(56,189,248,.05)}
/* resolu passe devant tout le reste : la question est close */
.note.ok{border-left-color:var(--vert); opacity:.55; background:var(--panneau)}
.note .qui{font-size:12px; color:var(--pale); margin-bottom:3px}
.note .frame{color:var(--ambre); font-weight:600}
.note-marque{
  display:inline-block; margin-right:7px; padding:1px 6px; border-radius:3px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  vertical-align:1px;
}
.note-marque.cli{background:var(--ambre); color:#181109}
.note-marque.rep{background:var(--cyan); color:#08131b}

.chemin{font-family:ui-monospace,Consolas,monospace; font-size:12px;
        color:var(--pale); word-break:break-all}

.vide{color:var(--pale); padding:26px; text-align:center;
      border:1px dashed var(--bord); border-radius:8px}

/* ---- lecteur de review, en haut de la fiche de plan --------------------- */
/* Montre la derniere version au chargement ; cliquer une version plus bas y
   charge la sienne. C'est la seule video jouable dans la page : le master
   reste sur le TrueNAS, hors de portee du navigateur. */
.lecteur{
  background:#000; border:1px solid var(--bord); border-radius:8px;
  overflow:hidden; position:relative; max-width:720px;
}
.lecteur video{width:100%; display:block; aspect-ratio:16/9; background:#000}
/* version d'une seule image : la vignette prend la place de la video */
#lecteur-image{width:100%; display:block; aspect-ratio:16/9;
  object-fit:contain; background:#000}
.lecteur-vide{
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px; text-align:center; padding:20px;
  color:var(--muted); font-size:12px; background:#0b0e12;
  border-bottom:1px solid var(--bord);
}
.lecteur-vide strong{color:var(--pale); font-weight:500; font-size:13px}
.lecteur-barre{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 12px; background:var(--panneau); border-top:1px solid var(--bord);
}
.lecteur-num{font-family:var(--head); font-weight:700; font-size:14px}
.lecteur-meta{color:var(--muted); font-size:11px}
.lecteur-barre .droite{margin-left:auto; display:flex; gap:8px}

/* ---- habillage de lecteur (static/player.js) --------------------------- */
/* Les controles natifs changent d'aspect a chaque navigateur et ignorent la
   notion d'image. Ceux-ci parlent en images, ce qui est la seule unite qui
   compte en review. */
.fxp{position:relative; background:#000; line-height:0; overflow:hidden}
.fxp video{display:block; width:100%; height:auto; background:#000}
.fxp:fullscreen{display:flex; align-items:center; justify-content:center}
.fxp:fullscreen video{max-height:100vh; width:auto}

/* Bouton central, visible tant que la video est a l'arret : c'est lui qui
   signale que l'image figee est jouable. Il s'efface pendant la lecture. */
.fxp-gros{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(12,16,22,.58);
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  display:grid; place-items:center;
  transition:opacity .2s, transform .2s, background .2s, border-color .2s;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.fxp-gros svg{width:40px; height:40px; fill:#fff; display:block}
.fxp-gros:hover{
  background:rgba(56,189,248,.86); border-color:rgba(255,255,255,.6);
  transform:translate(-50%,-50%) scale(1.08);
}
.fxp-gros:hover svg{fill:#06121c}
.fxp.enlecture .fxp-gros{opacity:0; transform:translate(-50%,-50%) scale(.8);
  pointer-events:none}

/* l'image figee (poster) doit remplir le cadre comme la video */
.fxp video{object-fit:contain}

/* barre : discrete, revelee au survol */
.fxp-barre{
  position:absolute; left:0; right:0; bottom:0; padding:16px 10px 8px;
  background:linear-gradient(to top,rgba(6,8,11,.92),rgba(6,8,11,.55) 55%,transparent);
  opacity:0; transition:opacity .18s; line-height:1.4;
}
.fxp:hover .fxp-barre, .fxp:not(.enlecture) .fxp-barre,
.fxp:focus-within .fxp-barre{opacity:1}

.fxp-piste{
  position:relative; height:5px; border-radius:3px; background:rgba(255,255,255,.16);
  cursor:pointer; margin-bottom:7px; touch-action:none;
}
.fxp-piste::before{content:""; position:absolute; inset:-7px 0; }
.fxp-tampon{position:absolute; left:0; top:0; bottom:0; width:0;
  background:rgba(255,255,255,.22); border-radius:3px}
.fxp-joue{position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--accent); border-radius:3px}
.fxp-tete{
  position:absolute; top:50%; left:0; width:12px; height:12px; margin-left:-6px;
  transform:translateY(-50%) scale(0); border-radius:50%; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.35); transition:transform .15s;
}
.fxp:hover .fxp-tete{transform:translateY(-50%) scale(1)}

.fxp-ligne{display:flex; align-items:center; gap:5px; color:#e8edf3; font-size:12px}
.fxp-b{
  background:none; border:none; color:#e8edf3; cursor:pointer;
  padding:3px 6px; border-radius:4px; font-size:12px; line-height:1;
}
.fxp-b:hover{background:rgba(255,255,255,.14)}
.fxp-b.on{color:var(--accent)}
.fxp-play{font-size:13px; min-width:26px}
.fxp-vit{min-width:34px; font-variant-numeric:tabular-nums}
.fxp-temps{
  font-variant-numeric:tabular-nums; color:#c3ccd6; margin-left:4px;
  white-space:nowrap;
}
.fxp-img{
  font-variant-numeric:tabular-nums; color:var(--accent); margin-left:10px;
  white-space:nowrap; font-weight:600;
}
.fxp-espace{flex:1}

/* ---- vignette animee : image fixe, video au survol ---------------------- */
/* La video n'est chargee qu'au premier survol (`preload=none` + src posee en
   JavaScript) : une fiche a vingt versions ne doit pas tirer vingt fichiers
   au chargement de la page. */
.vpreview{position:relative; overflow:hidden; background:#0b0e12}
.vpreview img, .vpreview video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.vpreview video{position:absolute; inset:0; opacity:0; transition:opacity .18s}
.vpreview.joue video{opacity:1}
/* preview sans image fixe : la video tient lieu d'illustration, donc visible
   d'emblee. Cas rare -- la ferme depose toujours les deux ensemble. */
.vpreview.nu video{opacity:1}

/* reglage secondaire, replie : la vignette manuelle ne sert plus que de repli */
.reglage-vignette{margin-top:10px; max-width:720px}
.reglage-vignette summary{
  cursor:pointer; color:var(--muted); font-size:11px;
  text-transform:uppercase; letter-spacing:.1em;
}
.reglage-vignette summary:hover{color:var(--pale)}
.vpreview .indice{
  position:absolute; left:5px; bottom:5px; z-index:2;
  background:rgba(8,11,14,.8); color:var(--accent);
  font-size:9px; font-weight:700; letter-spacing:.08em;
  padding:1px 5px; border-radius:7px; pointer-events:none;
}
.vpreview.joue .indice{opacity:0}

/* ---- bloc version : la vignette, les infos, puis SES notes dessous ------ */
.ver{
  background:var(--panneau); border:1px solid var(--bord); border-radius:8px;
  margin-bottom:14px; overflow:hidden;
}
/* tout l'entete choisit la version ; les commandes gardent leur curseur */
.ver-tete{display:flex; gap:14px; padding:13px; align-items:flex-start;
  cursor:pointer}
.ver-tete button, .ver-tete select, .ver-tete a{cursor:default}
.ver-tete button, .ver-tete a{cursor:pointer}
.ver:hover{border-color:#3d4450}
.ver-vign{
  width:150px; height:84px; flex:none; border-radius:5px; overflow:hidden;
  border:1px solid var(--bord); background:#0e1013; display:block; cursor:pointer;
  position:relative;
}
.ver-vign img{width:100%; height:100%; object-fit:cover; display:block}
.ver-vign:hover{border-color:var(--accent)}

/* version actuellement affichee dans le lecteur du haut */
.ver.actif{border-color:var(--accent)}
.ver.actif .ver-vign{border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset}
.ver.actif .ver-num{color:var(--accent)}
.vide-vign{
  width:150px; height:84px; flex:none; border-radius:5px; background:#0e1013;
  border:1px dashed var(--bord); display:flex; align-items:center;
  justify-content:center; color:#3d4450; font-size:11px; text-align:center;
}
.ver-infos{flex:1; min-width:0}
.ver-ligne1{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:6px}
.ver-num{font-size:16px; font-weight:700; font-variant-numeric:tabular-nums}
.ver-com{font-size:13px; margin-bottom:6px}
.ver-notes{
  border-top:1px solid var(--bord); background:#191c21;
  padding:11px 13px 13px;
}
.ver-notes .note{margin-bottom:7px}

/* ---- champ de chemin avec bouton dossier -------------------------------- */
.champ-dossier{display:flex; gap:6px; align-items:stretch}
.champ-dossier input[type=text]{flex:1; min-width:0}
button.btn-dossier{
  flex:none; width:38px; display:grid; place-items:center; padding:0;
  background:#2f353d; border:1px solid var(--bord); border-radius:5px;
  cursor:pointer;
}
button.btn-dossier:hover{background:#3a414a; border-color:var(--accent)}
button.btn-dossier svg{width:18px; height:18px; fill:var(--pale)}
button.btn-dossier:hover svg{fill:var(--accent)}
.note-champ{
  display:block; margin-top:5px; color:var(--pale); font-size:11px;
  line-height:1.35;
}

/* ---- bouton REVIEW ------------------------------------------------------ */
/* Orange plein : c'est une action de validation, elle doit se voir tout de
   suite au milieu des boutons neutres. N'apparait que sur un plan en review. */
button.btn-review{
  background:#f97316; border-color:#fb923c; color:#1a1005;
  padding:2px 11px; font-size:11px; font-weight:700; border-radius:10px;
  letter-spacing:.08em;
}
button.btn-review:hover{background:#fb923c}

/* annotation attachee a une note, dans la liste de la page */
.note-dessin{display:block; margin:8px 0 4px; max-width:320px}
.note-dessin img{
  width:100%; border-radius:5px; border:1px solid var(--bord); display:block;
}
.note-dessin:hover img{border-color:var(--accent)}

/* ---- lecteur de review (popup) ------------------------------------------ */
body.rv-ouvert{overflow:hidden}

#review-fond{
  position:fixed; inset:0; z-index:900; background:rgba(4,6,9,.86);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
#review-fond[hidden]{display:none}
#review{
  background:var(--panneau); border:1px solid var(--bord); border-radius:10px;
  width:min(1500px,100%); max-height:100%; display:flex; flex-direction:column;
  overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.6);
}

.rv-tete{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  background:var(--panneau2); border-bottom:1px solid var(--bord);
}
.rv-titre{
  font-family:var(--head); font-weight:800; letter-spacing:.12em;
  color:#f97316; font-size:13px;
}
.rv-plan{font-weight:700}
.rv-ver{color:var(--accent); font-weight:700}
.rv-fermer{
  margin-left:auto; background:none; border:none; color:var(--pale);
  font-size:22px; line-height:1; padding:0 4px; cursor:pointer;
}
.rv-fermer:hover{color:var(--texte); background:none}

.rv-corps{display:flex; gap:0; min-height:0; flex:1}
.rv-scene{flex:1; min-width:0; display:flex; flex-direction:column; padding:12px}
.rv-cote{
  width:330px; flex:none; border-left:1px solid var(--bord);
  background:#0a0d11; padding:12px; display:flex; flex-direction:column;
  gap:14px; min-height:0; overflow:auto;
}

/* la video et le canvas doivent occuper EXACTEMENT la meme boite */
.rv-cadre{
  position:relative; background:#000; border:1px solid var(--bord);
  border-radius:6px; overflow:hidden; align-self:center; max-width:100%;
}
.rv-cadre video{display:block; max-width:100%; max-height:62vh; background:#000}
.rv-cadre canvas{
  position:absolute; inset:0; width:100%; height:100%;
  cursor:crosshair; touch-action:none;
}

.rv-transport{
  display:flex; align-items:center; gap:9px; margin-top:12px; flex-wrap:wrap;
}
.rv-transport button{padding:4px 10px; font-size:12px}
.rv-transport input[type=range]{flex:1; min-width:140px; accent-color:var(--accent)}
.rv-frame{font-size:12px; color:var(--pale); white-space:nowrap}
.rv-frame b{color:var(--texte); font-size:13px}
.rv-frame-tot{color:var(--muted)}

.rv-outils{
  display:flex; align-items:center; gap:9px; margin-top:10px; flex-wrap:wrap;
  padding-top:10px; border-top:1px solid var(--bord);
}
.rv-outils button{padding:3px 9px; font-size:11px}
.rv-outils button.on{background:#25405a; border-color:var(--accent); color:#cfe6f7}
.rv-lbl{
  font-size:10px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--muted); font-weight:700;
}
.rv-couleurs{display:flex; gap:5px}
.rv-couleurs button{
  width:20px; height:20px; padding:0; border-radius:50%;
  border:2px solid transparent; cursor:pointer;
}
.rv-couleurs button.on{border-color:var(--texte)}
#rv-taille{width:88px; accent-color:var(--accent)}

.rv-bloc{display:flex; flex-direction:column; gap:7px; min-height:0}
.rv-bloc textarea{min-height:70px}
.rv-etat{font-size:11px; color:var(--vert); min-height:14px}
.rv-etat.err{color:var(--rouge)}

.rv-liste-bloc{flex:1; min-height:0}
.rv-liste{overflow:auto; display:flex; flex-direction:column; gap:7px;
  padding-right:2px}
.rv-liste-vide{color:var(--muted); font-size:12px; padding:10px 0}
.rv-note{
  background:var(--panneau); border:1px solid var(--bord); border-left:3px solid var(--ambre);
  border-radius:0 5px 5px 0; padding:7px 9px; cursor:pointer;
}
.rv-note:hover{border-color:var(--accent); border-left-color:var(--accent)}
.rv-note.ok{opacity:.5; border-left-color:var(--vert)}
.rv-note-frame{color:var(--ambre); font-weight:700; font-size:11px}
.rv-note-qui{color:var(--muted); font-size:11px}
.rv-note-texte{font-size:12px; margin-top:3px; word-break:break-word}
.rv-note-img{width:100%; border-radius:4px; margin-top:6px; display:block}

@media (max-width:1100px){
  .rv-corps{flex-direction:column; overflow:auto}
  .rv-cote{width:auto; border-left:none; border-top:1px solid var(--bord)}
}

/* ---- bouton DJV et notification ---------------------------------------- */
button.djv{
  background:#1d3d52; border-color:#2f6389; color:#8fd0f5;
  padding:2px 9px; font-size:11px; font-weight:600; border-radius:10px;
}
button.djv:hover{background:#26516d}

#toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:#1f3f2c; border:1px solid #2e6344; color:#8ee0a8;
  padding:10px 18px; border-radius:7px; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  z-index:999;
}
#toast.visible{opacity:1; transform:translateX(-50%) translateY(0)}
#toast.err{background:#3d2020; border-color:#5c2b2b; color:#f0a0a0}

/* ---- calendrier -------------------------------------------------------- */
.u{display:inline-block; padding:2px 8px; border-radius:10px;
   font-size:11px; font-weight:600; white-space:nowrap}
.u-retard{background:#4d2626; color:#f0a0a0}
.u-auj{background:#4a3a1c; color:#f0c78a}
.u-proche{background:#3a3520; color:#e0c07a}
.u-loin{background:#2a2f36; color:#8b939e}

.gantt-entete{display:flex; color:var(--pale); font-size:12px;
   padding:0 0 8px 190px; border-bottom:1px solid var(--bord); margin-bottom:10px}
.gantt{position:relative}
.gantt-ligne{display:flex; align-items:center; height:26px}
.gantt-nom{width:190px; flex:none; font-size:12px; padding-right:12px;
   white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gantt-piste{position:relative; flex:1; height:14px; background:#1a1d22;
   border-radius:3px; overflow:hidden}
.gantt-barre{position:absolute; top:0; height:14px; border-radius:3px;
   min-width:4px; opacity:.9}
.gantt-barre.b-retard{background:var(--rouge)}
.gantt-barre.b-aujourdhui{background:var(--ambre)}
.gantt-barre.b-proche{background:#c9a227}
.gantt-barre.b-lointaine{background:var(--bleu)}
.gantt-auj{position:absolute; top:0; bottom:0; width:2px; background:#e0603d;
   margin-left:190px; z-index:2; pointer-events:none}

.connexion{max-width:340px; margin:14vh auto; background:var(--panneau);
      border:1px solid var(--bord); border-radius:10px; padding:28px}
.erreur{background:#3d2020; border:1px solid #5c2b2b; color:#f0a0a0;
      padding:9px 12px; border-radius:6px; margin-bottom:14px; font-size:13px}

/* ---- barre d'outils et sections repliables (page projet) ---------------- */
/* Une seule ligne remplace les six lignes de pastilles d'avant : trois menus
   qui se cascadent, un groupement, une recherche. La barre ne grandit pas
   quand les sequences se multiplient -- c'etait tout le probleme. */
.outils{
  display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
  background:var(--panneau); border:1px solid var(--bord);
  border-radius:9px; padding:11px 14px; margin-bottom:12px;
}
.outils label{
  display:flex; flex-direction:column; gap:4px;
  font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--pale); font-weight:700;
}
.outils select{max-width:280px; text-overflow:ellipsis}
.outils label.grouper{margin-left:auto}
.outils label.grouper select{min-width:120px}
.outils input[type=search]{
  background:#16191d; color:var(--texte); border:1px solid var(--bord);
  border-radius:5px; padding:6px 9px; font:inherit; min-width:180px;
}
.outils input[type=search]:focus{outline:none; border-color:var(--accent)}
@media (max-width:900px){.outils label.grouper{margin-left:0}}

.resume{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
        margin-bottom:12px; font-size:13px; color:var(--pale)}
.chip{
  display:inline-flex; gap:7px; align-items:center; background:#25405a;
  border:1px solid #356a94; color:#cfe6f7; border-radius:20px;
  padding:2px 11px; font-size:12px;
}
.chip:hover{text-decoration:none; border-color:#5a9ccb}
.chip span{color:#8fb6d4; font-size:13px}
.chip.vider{background:transparent; border-color:var(--bord); color:var(--pale)}

/* Le tableau defile dans sa boite plutot que d'elargir la page. */
.defile{overflow-x:auto}

/* Titre de section. Il colle sous l'en-tete pendant qu'on descend : sur une
   section de trente plans, savoir dans laquelle on est vaut mieux qu'un titre
   qu'on a depasse depuis longtemps. */
tr.grp td{
  position:sticky; top:46px; z-index:2;
  background:var(--panneau2); border-bottom:1px solid var(--bord);
  border-top:1px solid var(--bord);
  padding:7px 12px; cursor:pointer; user-select:none;
}
tr.grp:hover td{background:#282d34}
tr.grp .fleche{color:var(--pale); font-size:11px; display:inline-block;
               width:12px; transition:transform .12s}
tr.grp strong{font-family:var(--head); font-size:14px; letter-spacing:.3px}
tr.grp .det{color:var(--pale); font-size:12px; margin-left:8px}
tr.grp .cpt{color:var(--gris); font-size:11px; margin-left:10px;
            font-variant-numeric:tabular-nums}
tbody.section.replie .fleche{transform:rotate(-90deg)}
tbody.section.replie tr:not(.grp){display:none}