@font-face {
  font-family: 'Manrope';
  src: url('/static/fonts/manrope-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}
/* polices auto-hébergées (@fontsource-variable, licence OFL, voir fonts/SOURCES.txt) :
   aucune requête vers un hôte tiers */

/* Grammaire reprise des références : grande carte blanche posée sur un fond gris,
   titre gras et serré, filtres en pilules dont l'actif est noir, tableau à en-tête
   gris clair et pastilles de statut sémantiques. */
:root {
  --fond: #EDEDEE;
  --carte: #FFFFFF;
  --carte-2: #FAFAFA;
  --texte: #16161A;
  --doux: #6E6E76;
  --faible: #A0A0A8;
  --trait: #ECECEE;
  --trait-fort: #DEDEE1;
  --noir: #16161A;
  --sur-noir: #FFFFFF;
  --vert: #2F7D46; --vert-f: #E4F3E8;
  --rouge: #C0392B; --rouge-f: #FBEAE8;
  --ambre: #9A6B14; --ambre-f: #FBF2DF;
  /* accent neutre : aucun mauve dans l'app. Gris foncé pour les barres et
     les états actifs, gris très clair pour les fonds de sélection. */
  --lilas: #3A3A40; --lilas-f: #F1F1F3;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --pill: 999px;
  --ombre: 0 1px 2px rgba(22,22,26,.04);
  --ombre-lg: 0 18px 48px rgba(22,22,26,.10);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Manrope, -apple-system, sans-serif; background: var(--fond); color: var(--texte);
  font-size: 13.5px; -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; }

/* ═══ bandeau de navigation, logo centré ═══ */
/* liens | marque | utilisateur : les côtés prennent leur largeur, la marque se centre dans l'espace restant */
.nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  padding: 20px 28px; gap: 16px;
  position: sticky; top: 0; z-index: 40; background: var(--fond); }
.nav .g { display: flex; gap: 22px; }
.nav a { font-size: 13.5px; color: var(--doux); text-decoration: none; font-weight: 500; white-space: nowrap; }
.nav a.on { color: var(--texte); text-decoration: underline; text-underline-offset: 5px; }
.nav .marque { font-weight: 800; font-size: 17px; letter-spacing: -.035em; text-align: center; }
.nav .marque span { font-weight: 500; color: var(--doux); letter-spacing: 0; }
/* la marque est un lien vers l'accueil, mais garde l'allure du logo */
.nav a.marque { text-decoration: none; color: inherit; }
.nav .d { display: flex; gap: 14px; align-items: center; justify-content: flex-end; font-size: 13px; color: var(--doux); }
.nav .ava { width: 27px; height: 27px; border-radius: 50%; background: var(--lilas-f); color: var(--lilas);
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700; }

/* ═══ la grande carte ═══ */
.zone { display: flex; gap: 18px; align-items: flex-start; padding: 0 22px 26px; }
/* « clip » plutôt que « hidden » : sinon position:sticky est désactivé. */
.carte { background: var(--carte); border-radius: 22px; overflow: clip;
  flex: 1; min-width: 0; transition: none; }
.carte-tete { padding: 26px 30px 20px; display: flex; align-items: center; gap: 18px;
  border-bottom: 1px solid var(--trait); flex-wrap: wrap; }
.carte-tete h1 { font-size: 30px; font-weight: 800; letter-spacing: -.035em; }
/* le tiroir de La prod compte ses personnes de la même façon */
.carte-tete .compte, .t-titre .compte { font-size: 13px; color: var(--doux); font-weight: 500; }
.rech { margin-left: auto; position: relative; }
.rech input { font: inherit; font-size: 13px; padding: 11px 46px 11px 40px; width: 400px;
  border: 1px solid var(--trait-fort); border-radius: 11px; background: var(--carte); color: var(--texte); }
.rech input:focus { outline: 2px solid #E2E2E6; border-color: var(--noir); }
/* filtres côte à côte (Annuaire) : même champ, sans la poussée à droite ni la place du raccourci */
.rech.filtre { margin-left: 0; }
.rech.filtre input { width: 220px; padding-right: 14px; }
.rech .loupe { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faible); font-size: 13px; }
.rech .raccourci { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10.5px; color: var(--faible); background: #F2F2F4;
  border: 1px solid var(--trait-fort); border-radius: 5px; padding: 1px 6px; pointer-events: none; }
.rech input:focus + .raccourci { opacity: 0; }

/* Le titre, la recherche et les filtres restent en haut pendant le défilement,
   et l'entête du tableau se cale juste en dessous. */
/* Une fois collé, le haut arrondi de la carte a défilé : l'entête redessine ses
   propres coins (fond gris dans les angles, pastille blanche arrondie par-dessus). */
.carte-haut { position: sticky; top: var(--nav-h, 0px); z-index: 30; background: var(--fond); }
.carte-haut::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--carte); border-radius: 22px 22px 0 0; }
.tbl thead th { position: sticky; top: calc(var(--nav-h, 0px) + var(--haut-h, 0px)); z-index: 20; }
.filtres { display: flex; gap: 8px; padding: 18px 30px; flex-wrap: wrap; align-items: center; }
.pf { font-size: 13px; padding: 7px 16px; border: 1px solid var(--trait-fort); border-radius: var(--pill);
  background: var(--carte); color: var(--texte); font-weight: 500; white-space: nowrap; }
.pf:hover { background: var(--carte-2); }
.pf.on { background: var(--noir); color: var(--sur-noir); border-color: var(--noir); }
.pf .n { opacity: .55; margin-left: 5px; font-family: var(--mono); font-size: 11px; }
.pf .pod { display: inline-block; margin-right: 6px; }
/* un pod sélectionné garde sa pastille de couleur lisible sur fond sombre */
.pf-pod.on { background: var(--noir); color: var(--sur-noir); border-color: var(--noir); }
.pf-pod.on .pod { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.sep-f { width: 1px; height: 20px; background: var(--trait-fort); margin: 0 4px; }

/* ═══ tableau ═══ */
/* « separate » plutôt que « collapse » : en mode fusionné, les bordures d'une
   cellule collante restent sur place et laissent un trait transparent au défilement. */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--doux);
  padding: 13px 16px; background: var(--carte-2); border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait); white-space: nowrap; }
/* Trois colonnes alignées à gauche, largeurs fixes : les pastilles de statut
   démarrent toutes au même endroit, qu'il y en ait une ou deux.
   L'alignement à droite les faisait danser d'une ligne à l'autre. */
.tbl th:first-child { padding-left: 30px; } .tbl th:last-child { padding-right: 30px; }
.tbl td { padding: 15px 16px; border-bottom: 1px solid var(--trait); font-size: 13.5px; vertical-align: middle; }
.tbl td .st + .st { margin-left: 8px; }
.tbl td:first-child { padding-left: 30px; } .tbl td:last-child { padding-right: 30px; }
.tbl tbody tr:nth-child(even) { background: var(--carte-2); }
.tbl tbody tr.calme { opacity: .5; }
.tbl tbody tr.calme:hover, .tbl tbody tr.calme.on { opacity: 1; }
.tbl tbody tr:hover { background: #F4F4F6; }
.tbl tbody tr.on { background: var(--lilas-f); box-shadow: inset 3px 0 0 var(--lilas); }
.tbl .num { font-family: var(--mono); font-size: 12.5px; }
.nom-p { font-weight: 600; display: flex; align-items: center; gap: 9px; }
.check { color: var(--noir); display: inline-flex; }
.pc-pod { font-size: 10.5px; color: var(--doux); display: inline-flex; align-items: center; gap: 4px; }
/* pourcentage du besoin (MR !2 staffing.css .pc-ici) : La prod et la recherche des Assignations */
.pc-ici { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--texte);
  background: var(--lilas-f); border-radius: 5px; padding: 1px 7px; }
.pod { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pod.aucun { background: var(--trait-fort); }

/* pastilles de statut, comme la référence */
.st { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 13px; border-radius: var(--pill); }
.st.complet { background: var(--vert-f); color: var(--vert); }
.st.partiel { background: #F0F0F2; color: var(--texte); }
.st.ratio { background: var(--noir); color: var(--sur-noir); font-family: var(--mono);
  letter-spacing: .02em; display: inline-flex; align-items: center; gap: 7px; }
.st.ratio.tard { background: var(--rouge); color: #fff; }
.st.ratio svg { opacity: .9; }
.st.retard { background: var(--rouge-f); color: var(--rouge); text-transform: uppercase;
  letter-spacing: .06em; font-size: 10.5px; padding: 4px 10px; }
/* variantes absentes de la référence : requis ouvert (ambre), à assigner plus tard (hachuré) */
.st.manque { background: var(--ambre-f); color: var(--ambre); }
/* rouge en casse de phrase (MR !2) : rôles au démarrage manquants, hors fenêtre de démarrage (ASGN-65) */
.st.urgent { background: var(--rouge-f); color: var(--rouge); }
.st.tentatif { color: var(--doux);
  background: repeating-linear-gradient(45deg, var(--trait-fort) 0 3px, var(--carte) 3px 7px); }
.st.ratio.manque { background: var(--ambre); color: var(--sur-noir); }

/* bulle de survol : instantanée, sans curseur d'aide */
.bulle { position: relative; }
.bulle::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); background: var(--noir); color: var(--sur-noir);
  font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0;
  white-space: pre-line; max-width: 360px; width: max-content; padding: 8px 12px; border-radius: 9px; line-height: 1.5;
  opacity: 0; pointer-events: none; transition: opacity 90ms; z-index: 60;
  box-shadow: 0 8px 22px rgba(22,22,26,.22);
}
.bulle::before {
  content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--noir);
  opacity: 0; pointer-events: none; transition: opacity 90ms; z-index: 60;
}
/* au clavier aussi : l'hôte non focalisable reçoit tabindex="0" */
.bulle:hover::after, .bulle:hover::before,
.bulle:focus-visible::after, .bulle:focus-visible::before { opacity: 1; }
/* près du bord droit, la bulle se recale */
.tbl td:last-child .bulle::after { left: auto; right: 0; transform: none; }
.tbl td:last-child .bulle::before { left: auto; right: 14px; transform: none; }

.vide-t { padding: 46px 30px; text-align: center; color: var(--faible); font-size: 13.5px; }

.bloc-t { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--faible);
  font-weight: 700; margin: 22px 0 10px; }
.btn { font-size: 12.5px; padding: 7px 15px; border-radius: var(--pill); border: 1px solid var(--trait-fort);
  background: var(--carte); color: var(--texte); font-weight: 500; }
.btn:hover { background: var(--carte-2); }
.btn.p { background: var(--noir); color: var(--sur-noir); border-color: var(--noir); }
.note { background: var(--ambre-f); color: var(--ambre); font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 11px; display: inline-block; }
.note.ok { background: var(--vert-f); color: var(--vert); }

@media (max-width: 820px) {
  .nav { grid-template-columns: 1fr auto; padding: 16px 18px; }
  .nav .g { display: none; }
  .carte { margin: 0 12px 18px; border-radius: 18px; }
  .carte-haut::before { border-radius: 18px 18px 0 0; }
  .carte-tete { padding: 20px 18px 16px; }
  .carte-tete h1 { font-size: 24px; }
  .rech { width: 100%; margin-left: 0; } .rech input { width: 100%; }
  .filtres { padding: 14px 18px; overflow-x: auto; flex-wrap: nowrap; }
  .tbl th:first-child, .tbl td:first-child { padding-left: 18px; }
  .tbl th:last-child, .tbl td:last-child { padding-right: 18px; }
}

/* ═══ primitives communes à toutes les pages ═══
   Chaque valeur reprend une valeur déjà présente dans l'écran « Mes projets ». */

/* liens : texte courant, soulignés au survol */
a { color: inherit; }
.lien { color: var(--texte); font-weight: 600; text-decoration: none; }
.lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.doux { color: var(--doux); } .faible { color: var(--faible); }
.mono { font-family: var(--mono); font-size: 12.5px; }

/* entête de page : actions poussées à droite, comme la recherche */
.actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* corps de carte quand le contenu n'est pas un tableau pleine largeur (retraits de .carte-tete / .t-corps) */
.carte-corps { padding: 20px 30px 26px; }
/* plusieurs cartes empilées sur une même page */
.zone.pile { flex-direction: column; align-items: stretch; }

/* boutons : .btn existe ; liens habillés en bouton, variante destructive */
a.btn { display: inline-block; text-decoration: none; }
/* petit bouton : lignes denses (Administration), 12px, le plancher des boutons (ASGN-59, ASGN-63) */
.btn.s { font-size: 12px; padding: 4px 11px; }
.btn.danger { color: var(--rouge); }
.btn.danger:hover { background: var(--rouge-f); }
.btn[disabled] { opacity: .35; cursor: default; }

/* onglets et filtres en liens : mêmes pilules que les filtres */
a.pf { text-decoration: none; display: inline-block; }

/* messages : .note (ambre) et .note.ok existent */
.note.ko { background: var(--rouge-f); color: var(--rouge); }

/* formulaires : champs repris de la recherche des candidats, libellés des rôles du tiroir */
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 18px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ.large { grid-column: 1 / -1; }
/* champs deux par deux (MR !2) : Nouveau projet, fiche projet, fiches de l'administration ; un seul sous 820px */
.champs.deux { grid-template-columns: 1fr 1fr; }
@media (max-width: 820px) { .champs.deux { grid-template-columns: 1fr; } }
.champ > span, .champ > label { font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--faible); font-weight: 700; }
.champ input, .champ select, .champ textarea, input.champ-seul, select.champ-seul {
  font: inherit; font-size: 13px; padding: 9px 14px; border: 1px solid var(--trait-fort);
  border-radius: 11px; background: var(--carte); color: var(--texte); }
.champ input:focus, .champ select:focus, .champ textarea:focus,
input.champ-seul:focus, select.champ-seul:focus { outline: 2px solid #E2E2E6; border-color: var(--noir); }
.champ textarea { min-height: 92px; resize: vertical; }
.champ .aide { font-size: 11.5px; color: var(--faible); text-transform: none; letter-spacing: 0; font-weight: 500; }
.boutons { display: flex; gap: 8px; margin-top: 22px; }
input[type=checkbox] { accent-color: var(--noir); }

/* liste de définitions : libellé au-dessus, valeur en dessous, filets verticaux (rôles du tiroir) */
.infos { display: flex; flex-wrap: wrap; gap: 16px 0; }
.infos > div { flex: 1; min-width: 160px; padding: 0 20px; border-right: 1px solid var(--trait); }
.infos > div:first-child { padding-left: 0; }
.infos > div:last-child { border-right: 0; padding-right: 0; }
.infos dt { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--faible); font-weight: 700; }
.infos dd { font-size: 13.5px; font-weight: 600; margin-top: 4px; }

/* chiffres clés : repris de la fiche employé */
.gros { display: flex; gap: 0; border-top: 1px solid var(--trait-fort); border-bottom: 1px solid var(--trait);
  margin: 20px 0 4px; }
.gros > div { flex: 1; padding: 14px 18px; border-right: 1px solid var(--trait); }
.gros > div:first-child { padding-left: 0; }
.gros > div:last-child { border-right: 0; padding-right: 0; }
.gros .l { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--faible); font-weight: 700; }
.gros .v { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin-top: 4px; }
.gros .v small { font-size: 13px; font-weight: 600; color: var(--doux); letter-spacing: 0; }


/* déconnexion dans le bandeau : un lien de la nav, pas un bouton */
.nav .d form { display: inline; }
.nav .d button { background: none; border: 0; color: var(--doux); font-size: 13px; }
.nav .d button:hover { color: var(--texte); }

/* notifications : pastille noire comme la bulle de survol, rouge pour les erreurs */
.toast-container { position: fixed; top: 20px; right: 22px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 380px; padding: 11px 14px;
  border-radius: 11px; background: var(--noir); color: var(--sur-noir); font-size: 13px; font-weight: 500;
  box-shadow: var(--ombre-lg); }
.toast-success { background: var(--noir); }
.toast-error { background: var(--rouge); }
.toast-message { flex: 1; }
.toast-close { background: none; border: 0; color: inherit; font-size: 15px; line-height: 1; }
/* « Annuler » dans un message de confirmation : un lien, pas un deuxième bouton plein */
.toast-annuler { background: none; border: 0; color: inherit; font: inherit; font-weight: 700; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.toast-annuler:disabled { opacity: .5; cursor: default; }

/* ═══ primitives remontées des pages (mêmes valeurs qu'avant, écrites une seule fois) ═══ */
/* titre de section posé sur un tableau pleine largeur : pas de retrait du bas, la marge de .bloc-t suffit */
.carte-corps.avant-tbl { padding-bottom: 0; }
/* premier élément d'un corps de carte : pas de marge du haut en plus du retrait */
.carte-corps > .bloc-t:first-child, .carte-corps > .gros:first-child { margin-top: 0; }
/* tableau large : défilement horizontal ; l'entête collante ne marche pas dans un conteneur qui défile */
.defile { overflow-x: auto; }
.defile .tbl thead th { position: static; }
/* bouton sous un message d'état vide (écart de .champs) */
.vide-t .btn { margin-top: 16px; }
/* chiffre clé en alerte : ambre, rouge */
.gros .v.alerte { color: var(--ambre); }
.gros .v.ko { color: var(--rouge); }
@media (max-width: 820px) { .carte-corps { padding-left: 18px; padding-right: 18px; } }

/* étiquettes (compétences) : la pastille .st.partiel, avec un × comme le bouton de fermeture ;
   le champ d'ajout reprend .champ-seul, en pilule */
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 4px 6px 4px 13px;
  border-radius: var(--pill); background: #F0F0F2; color: var(--texte); white-space: nowrap; }
.tag button { background: none; border: 0; color: var(--doux); font-size: 15px; line-height: 1; margin-left: 5px; }
.tag button:hover { color: var(--texte); }
.tag-saisie { font: inherit; font-size: 12px; padding: 4px 13px; border: 1px dashed var(--trait-fort);
  border-radius: var(--pill); background: var(--carte); color: var(--texte); min-width: 9em; }
.tag-saisie:focus { outline: 2px solid #E2E2E6; border-color: var(--noir); border-style: solid; }
.tags .aide.ko { font-size: 11.5px; font-weight: 500; color: var(--rouge); }

/* pourcentage de charge en pastille mono ; .plein = au-delà de 100 % (Assignations, La prod) */
.pc-tot { font-family: var(--mono); font-size: 10.5px; color: var(--doux);
  background: #F2F2F4; border-radius: 5px; padding: 1px 7px; }
.pc-tot.plein { background: var(--rouge-f); color: var(--rouge); font-weight: 600; }

/* lignes de requis d'un tiroir (MR !2 .req) : rôle, personne et fin, filet --trait ; Assignations et La prod */
.req { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.req .q { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; }
.req .q .fin { display: block; font-size: 11.5px; color: var(--faible); font-weight: 400; }
.req .r { font-size: 12.5px; color: var(--doux); width: 118px; flex: none; }
.req .alloc { font-family: var(--mono); font-size: 11px; color: var(--doux); white-space: nowrap; flex: none; }

/* ═══ tiroir de détail (staffing.css MR !2) ═══
   Pas de voile : le tiroir est une colonne de .zone à part entière, le tableau se
   comprime au lieu d'être recouvert. Les filets de l'entête tombent sur ceux de la
   carte : hauteurs --haut-h / --tete1-h posées par ui.js. */
.tiroir { width: 0; flex: none; overflow: hidden; background: var(--carte); border-radius: 22px;
  display: flex; flex-direction: column;
  position: sticky; top: var(--nav-h, 0px);
  max-height: calc(100vh - var(--nav-h, 0px) - 18px);
  transition: width 180ms cubic-bezier(.4,0,.2,1); }
.tiroir.on { width: min(640px, calc(50% - 9px)); }
/* tiroir fermé : il ne garde pas l'écart de .zone (18px) */
.zone > .tiroir:not(.on) { margin-left: -18px; }
.fermer { position: absolute; top: 20px; right: 22px; width: 32px; height: 32px; border-radius: 10px;
  border: 1px solid var(--trait-fort); background: var(--carte); color: var(--doux); font-size: 15px; }
.fermer:hover { background: var(--carte-2); color: var(--texte); }
/* le contenu du tiroir est enveloppé pour les échanges htmx : il doit garder la colonne flex */
.t-in { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.t-tete { padding: 0 26px; border-bottom: 1px solid var(--trait); flex: none;
  min-height: calc(var(--haut-h, 0px) + 1px); display: flex; flex-direction: column; }
.t-titre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: none;
  min-height: calc(var(--tete1-h, 0px) - 1px); }
.t-titre h2 { font-size: 22px; font-weight: 800; letter-spacing: -.03em; display: flex; align-items: center; gap: 10px; }
.t-meta { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; flex: none; }
.t-roles { display: flex; gap: 0; flex: 1; align-items: center; }
.t-roles > div { flex: 1; min-width: 0; padding: 0 20px; border-right: 1px solid var(--trait); }
.t-roles > div:first-child { padding-left: 0; }
.t-roles > div:last-child { border-right: 0; padding-right: 0; }
.t-roles dt { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--faible); font-weight: 700; }
.t-roles dd { font-size: 13.5px; font-weight: 600; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-corps { overflow: auto; flex: 1; padding: 20px 26px 26px; }
@media (max-width: 820px) { .t-corps, .t-tete { padding-left: 18px; padding-right: 18px; } }
/* le × est posé en absolu dans le coin : le titre lui laisse la place */
.tiroir .t-titre { padding-right: 44px; }
.tiroir .t-titre h2 { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* trop étroit pour deux colonnes : le tiroir ouvert prend la place de la liste, le fermer la ramène */
@media (max-width: 820px) {
  .zone:has(> .tiroir.on) > .carte { display: none; }
  .zone > .tiroir.on { width: 100%; }
}

/* vérification avant d'ouvrir un poste (MR !2 .verif-hiring) : tiroir d'Assignations et « Nouveau poste » de Hiring ;
   la paire ambre de .note quand des gens se libèrent */
.verif-hiring:not(:empty) { margin: 12px 0 4px; padding: 14px 16px; border: 1px solid var(--trait-fort); border-radius: 12px; }
.verif-hiring.alerte { background: var(--ambre-f); border-color: var(--ambre-f); }
.vh-tete { display: flex; align-items: center; gap: 10px; font-size: 12.5px; flex-wrap: wrap; }
.vh-tete input.champ-seul, .vh-tete select.champ-seul { width: auto; flex: 0 1 auto; min-width: 0; }
#nouveau-poste:not(:empty) { margin: 18px 30px 6px; }
.vh-msg { font-size: 13px; line-height: 1.45; margin: 10px 0 8px; }
.verif-hiring.alerte .vh-msg strong { color: var(--ambre); }
.vh-liste { list-style: none; margin: 0 0 10px; padding: 0; font-size: 12.5px; }
.vh-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--trait); }
.vh-raison { width: 100%; box-sizing: border-box; }
.vh-actions { display: flex; gap: 8px; margin-top: 10px; }
.vh-actions .btn { white-space: nowrap; }
/* dates et âges d'un tableau sur une ligne (MR !2 .postes td.court) */
.tbl td.court { white-space: nowrap; }

/* texte secondaire sous le nom dans une cellule (Annuaire, ASGN-59) ; étiquette en lecture seule, sans × */
.tbl .sous { display: block; font-size: 12px; margin-top: 2px; }
.tag.lecture { padding: 4px 11px; }