@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;
  /* vert et ambre du TEXTE sur leurs fonds -f (4,8:1 et 5,1:1) : --vert / --ambre restent pour les aplats */
  --sante-vert: #2C7642; --sante-ambre: #8A5F10;
  /* 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;
  /* types de contrat (décision 2026-10-06, option B) : la famille froide du look D de PM Dashboard
     (NOTES-pm-dashboard.md), réservée aux pastilles de contrat, jamais au risque ni aux états actifs */
  --contrat-tm: #7FABC9; --contrat-forfait: #97A2CE; --contrat-points: #BB96B9;
  --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);
  /* gris des anneaux de focus, des puces et des mini-barres : en tokens pour suivre le thème sombre */
  --anneau: #E2E2E6; --puce: #F2F2F4; --puce-2: #F0F0F2; --gris-a: #B9B9C0; --gris-na: #D6D6DB;
  /* accent personnel (menu du nom, 2026-10-07) : les états actifs (pilules, vues, onglets) ; noir par défaut.
     Les couleurs viennent de pm-dashboard (look D) ; le texte posé dessus reste foncé (--encre, 7:1 ; le blanc
     n'y fait que 2,5:1), dans les deux thèmes. */
  --rose: #C894A0; --mauve: #BB96B9; --lilas-c: #AD9BC6; --pervenche: #97A2CE; --bleu: #7FABC9;
  --encre: #16161A;
  --actif: var(--noir); --sur-actif: var(--sur-noir);
  /* la heatmap de La prod (vide, partiel, plein) : en sombre, le plein s'adoucit au lieu de virer au blanc */
  --heat-partiel: var(--faible); --heat-plein: var(--noir);
  color-scheme: light;
}
:root[data-accent="rose"] { --actif: var(--rose); --sur-actif: var(--encre); }
:root[data-accent="mauve"] { --actif: var(--mauve); --sur-actif: var(--encre); }
:root[data-accent="lilas"] { --actif: var(--lilas-c); --sur-actif: var(--encre); }
:root[data-accent="pervenche"] { --actif: var(--pervenche); --sur-actif: var(--encre); }
:root[data-accent="bleu"] { --actif: var(--bleu); --sur-actif: var(--encre); }

/* thème sombre (menu du nom) : choisi, ou celui de l'ordinateur quand rien n'est choisi. Valeurs de la palette
   sombre de pm-dashboard (skin.css) ; les deux blocs déclarent les mêmes valeurs. « Noir » y devient clair : c'est
   la couleur forte (pastilles, états actifs), posée sous un texte --sur-noir sombre. */
:root[data-theme="sombre"] {
  --fond: #161414; --carte: #232020; --carte-2: #2E2B2B; --texte: #F7F6F6; --doux: #B3B0B0; --faible: #8F8C8C;
  --trait: #3F3C3C; --trait-fort: #5E5B5B; --noir: #F7F6F6; --sur-noir: #161414;
  --vert: #3FBE8A; --vert-f: #12261E; --rouge: #E5776A; --rouge-f: #2C1815; --ambre: #E8A33B; --ambre-f: #2C2412;
  --sante-vert: #3FBE8A; --sante-ambre: #E8A33B; --lilas: #DDDADA; --lilas-f: #2E2B2B;
  --ombre: 0 1px 2px rgba(0,0,0,.4); --ombre-lg: 0 24px 60px -20px rgba(0,0,0,.7);
  --anneau: #5E5B5B; --puce: #2E2B2B; --puce-2: #3F3C3C; --gris-a: #8F8C8C; --gris-na: #5E5B5B;
  --heat-partiel: #5E5B5B; --heat-plein: #8F8C8C;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #161414; --carte: #232020; --carte-2: #2E2B2B; --texte: #F7F6F6; --doux: #B3B0B0; --faible: #8F8C8C;
    --trait: #3F3C3C; --trait-fort: #5E5B5B; --noir: #F7F6F6; --sur-noir: #161414;
    --vert: #3FBE8A; --vert-f: #12261E; --rouge: #E5776A; --rouge-f: #2C1815; --ambre: #E8A33B; --ambre-f: #2C2412;
    --sante-vert: #3FBE8A; --sante-ambre: #E8A33B; --lilas: #DDDADA; --lilas-f: #2E2B2B;
    --ombre: 0 1px 2px rgba(0,0,0,.4); --ombre-lg: 0 24px 60px -20px rgba(0,0,0,.7);
    --anneau: #5E5B5B; --puce: #2E2B2B; --puce-2: #3F3C3C; --gris-a: #8F8C8C; --gris-na: #5E5B5B;
    --heat-partiel: #5E5B5B; --heat-plein: #8F8C8C;
    color-scheme: dark;
  }
}
* { 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 : deux côtés égaux, la marque reste au centre de la page quel que soit le nombre d'onglets */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; 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; }
/* lien d'évitement : hors écran jusqu'au focus clavier, puis pastille noire comme .btn.p */
.evitement { position: absolute; left: 12px; top: -100px; z-index: 100; font-size: 12.5px; font-weight: 600;
  padding: 7px 15px; border-radius: var(--pill); background: var(--noir); color: var(--sur-noir); text-decoration: none; }
.evitement:focus { top: 12px; }
/* cible du lien d'évitement (tabindex="-1") : reçoit le focus sans contour, le contenu suit */
#contenu:focus { outline: none; }
.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; }

/* sélecteur de profil local (développement seulement) : le nom et l'avatar ouvrent un panneau
   (celui de « Rôles manquants », .deroulant .panneau) ; une ligne par personne (.dropdown-row) */
/* le panneau s'aligne sur le bord droit du bloc utilisateur (« Déconnexion » compris) : il reste dans l'écran au téléphone */
.nav .d { position: relative; }
.profil { position: static; }
.profil-btn { display: inline-flex; align-items: center; gap: 14px; background: none; border: 0; padding: 0;
  color: var(--doux); font-size: 13px; border-radius: var(--pill); }
.profil-btn:hover, .profil-btn[aria-expanded="true"] { color: var(--texte); }
.profil-btn:focus-visible { outline: 2px solid var(--noir); outline-offset: 2px; }
.profil-panneau { position: absolute; top: calc(100% + 8px); right: 0; z-index: 90; width: min(340px, calc(100vw - 36px));
  max-height: 70vh; overflow: auto; background: var(--carte); border: 1px solid var(--trait-fort);
  border-radius: 14px; box-shadow: var(--ombre-lg); padding: 6px; text-align: left; }
.profil-panneau[hidden] { display: none; }
.profil-panneau .bloc-t { margin: 8px 12px 6px; }
.profil-panneau ul { list-style: none; margin: 0; padding: 0; }
.nav .profil-l { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  font-size: 13px; color: var(--texte); text-decoration: none; white-space: normal; }
.nav .profil-l:hover, .nav .profil-l:focus-visible { background: var(--carte-2); }
.nav .profil-l:focus-visible { outline: 2px solid var(--noir); outline-offset: -2px; }
.nav .profil-l[aria-current] { background: var(--lilas-f); }
.profil-img { width: 27px; height: 27px; object-fit: contain; flex: none; display: block; }
.profil-l .ava { flex: none; }
.profil-n { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.profil-n strong { font-weight: 600; }
.profil-n .doux { font-size: 11.5px; }
.profil-ok { flex: none; color: var(--noir); }
/* une photo téléversée se recadre en rond ; un autocollant (static/avatars) se montre entier */
.rond { border-radius: 50%; object-fit: cover !important; }
.ava-photo { width: 27px; height: 27px; object-fit: contain; display: block; flex: none; }

/* ═══ menu du nom (2026-10-07, option C) : photo, surnom, accent, thème, déconnexion ═══ */
.profil-panneau { color: var(--texte); font-size: 13px; }
.nav .d .profil-panneau form { display: block; }
.moi { display: flex; gap: 12px; align-items: center; padding: 10px 12px 12px; }
.moi-photo { width: 48px; height: 48px; flex: none; object-fit: contain; display: block; }
.nav .ava.moi-photo { width: 48px; height: 48px; font-size: 16px; }
.moi-n { display: flex; flex-direction: column; min-width: 0; }
.moi-n strong { font-size: 14px; font-weight: 700; }
.moi-n .doux { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.moi-actions { display: flex; gap: 6px; margin-top: 7px; align-items: center; }
.nav .profil-panneau .btn { font-size: 12px; padding: 4px 11px; border: 1px solid var(--trait-fort); background: var(--carte);
  color: var(--texte); border-radius: var(--pill); font-weight: 500; cursor: pointer; }
.nav .profil-panneau .btn:hover { background: var(--carte-2); }
.nav .profil-panneau .btn.fantome { border-color: transparent; color: var(--doux); background: none; }
.profil-panneau .btn:focus-within { outline: 2px solid var(--noir); outline-offset: 2px; }
.sep-p { height: 1px; background: var(--trait); margin: 6px 4px; }
.reglage { padding: 8px 12px; }
.reglage fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.reglage .champ-l, .reglage legend { display: block; padding: 0; margin-bottom: 7px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--doux); font-weight: 700; }
.reglage .champ-seul { width: 100%; }
.pastilles { display: flex; gap: 8px; flex-wrap: wrap; }
.pastille { display: inline-flex; cursor: pointer; border-radius: 50%; }
.pastille i { width: 24px; height: 24px; border-radius: 50%; display: block; border: 1px solid var(--trait-fort); }
.pastille:has(input:checked) i { outline: 2px solid var(--noir); outline-offset: 3px; }
.pastille:has(input:focus-visible) { outline: 2px solid var(--noir); outline-offset: 6px; }
.p-neutre { background: var(--encre); } .p-rose { background: var(--rose); } .p-mauve { background: var(--mauve); }
.p-lilas { background: var(--lilas-c); } .p-pervenche { background: var(--pervenche); } .p-bleu { background: var(--bleu); }
.seg-p { display: flex; gap: 6px; }
.seg-p .pf { font-size: 12.5px; padding: 6px 14px; cursor: pointer; }
.seg-p .pf:has(input:checked) { background: var(--actif); color: var(--sur-actif); border-color: var(--actif); }
.seg-p .pf:has(input:focus-visible) { outline: 2px solid var(--noir); outline-offset: 2px; }
.nav .d .item-p { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px;
  color: var(--texte); font-size: 13px; font-weight: 500; text-align: left; }
.nav .d .item-p svg { color: var(--doux); flex: none; }
.nav .d .item-p:hover { background: var(--carte-2); color: var(--texte); }

/* ═══ 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 var(--anneau); 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(--doux); background: var(--puce);
  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(--actif); color: var(--sur-actif); border-color: var(--actif); }
.pf .n { opacity: .65; 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(--actif); color: var(--sur-actif); border-color: var(--actif); }
.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: var(--trait); }
.tbl tbody tr.on { background: var(--lilas-f); box-shadow: inset 3px 0 0 var(--noir); }
.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(--sante-vert); }
.st.partiel { background: var(--puce-2); 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: var(--sur-noir); }
.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(--sante-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;
  font-family: Manrope, -apple-system, sans-serif;
  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(--doux); font-size: 13.5px; }

.bloc-t { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--doux);
  font-weight: 700; margin: 22px 0 10px; }
/* notes « Pour démarrer » d'un projet (tiroirs et fiche) : les retours à la ligne saisis sont gardés */
.notes-demarrage { white-space: pre-line; font-size: 13.5px; line-height: 1.5; }
.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; }
  /* onglets sur une 2e rangée qui défile, sous la marque : les pilules de .filtres (.pf, .pf.on) */
  .nav .g { grid-column: 1 / -1; grid-row: 2; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
  .nav .g:not(:has(a)) { display: none; }
  .nav .g a { font-size: 13px; padding: 7px 16px; border: 1px solid var(--trait-fort); border-radius: var(--pill);
    background: var(--carte); color: var(--texte); }
  .nav .g a.on { background: var(--actif); color: var(--sur-actif); border-color: var(--actif); text-decoration: none; }
  .carte { margin: 0 12px 18px; border-radius: 18px; }
  /* la gouttière téléphone est celle de .carte (12px) : .zone n'en ajoute pas une 2e */
  .zone { padding-left: 0; padding-right: 0; }
  .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; flex-wrap: wrap; }
  .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; }
/* un nom de personne mène à sa fiche (#25) : souligné au repos, plus marqué au survol */
.personne-lien { color: inherit; text-decoration: underline; text-decoration-color: var(--trait-fort);
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.personne-lien:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
/* .faible porte du texte (« non désigné », dates, renvois) : --doux pour passer 4,5:1 ;
   le jeton --faible reste réservé aux icônes, filets et états désactivés */
.doux { color: var(--doux); } .faible { color: var(--doux); }
/* dates et horodatages : jamais coupés entre la date et l'heure */
.nw { white-space: nowrap; }
.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(--doux); 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 var(--anneau); border-color: var(--noir); }
.champ textarea { min-height: 92px; resize: vertical; }
.champ .aide { font-size: 11.5px; color: var(--doux); 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(--doux); 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; }
/* valeur calée en bas : un libellé sur deux lignes ne décale pas son chiffre */
.gros > div { flex: 1; padding: 14px 18px; border-right: 1px solid var(--trait);
  display: flex; flex-direction: column; justify-content: space-between; }
.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(--doux); 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; }
/* .sous-820 (Utilisateurs, Journal, Hiring, Annuaire) : le tableau ne défile qu'à 820px et moins ; au-delà, il
   tient dans la carte et garde l'en-tête collant de .tbl, que .defile rend statique */
@media (min-width: 821px) {
  .defile.sous-820 { overflow-x: visible; }
  .defile.sous-820 .tbl thead th { position: sticky; }
}
/* 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; }
  /* chiffres clés en 2 × 2 : mêmes retraits et filets, la 2e rangée sous un filet */
  .gros { flex-wrap: wrap; }
  .gros > div { flex: 1 1 50%; }
  .gros > div:nth-child(odd) { padding-left: 0; }
  .gros > div:nth-child(even) { border-right: 0; padding-right: 0; }
  .gros > div:nth-child(n+3) { border-top: 1px solid var(--trait); }
  /* notifications : la gouttière de .carte (12px) des deux côtés */
  .toast-container { left: 12px; right: 12px; }
  .toast { min-width: 0; max-width: none; }
}

/* é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: var(--puce-2); 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 var(--anneau); 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: var(--puce); 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(--doux); 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 { margin: 0; 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; }
/* trop de rôles pour la largeur : ils passent à la ligne plutôt que de se chevaucher */
.t-roles { display: flex; gap: 0; flex: 1; align-items: center; flex-wrap: wrap; row-gap: 12px; }
.t-roles > div { flex: 1 0 auto; 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(--doux); 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%; }
  /* la liste masquée n'a plus d'entête à suivre (--tete1-h y vaut 0) : la rangée de titre garde sa hauteur */
  .tiroir .t-titre { min-height: 72px; }
}

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

/* liste déroulante (.deroulant, .panneau de MR !2) : Rôles manquants (Assignations), chargés de projet (Mon espace) */
.deroulant { position: relative; }
.deroulant summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
/* flèche du menu (MR !2 .deroulant .fleche) */
.deroulant .fleche { margin-left: 7px; font-size: 10px; color: var(--doux); }
.deroulant summary.on .fleche { color: var(--gris-a); }
.deroulant summary::-webkit-details-marker { display: none; }
.deroulant summary .st { font-size: 10.5px; padding: 1px 7px; margin-left: 5px; }
.deroulant .panneau { position: absolute; top: calc(100% + 8px); left: 0; z-index: 90; min-width: min(460px, calc(100vw - 36px));
  max-height: 60vh; overflow: auto; background: var(--carte); border: 1px solid var(--trait-fort);
  border-radius: 14px; box-shadow: var(--ombre-lg); padding: 6px; }
/* la carte rogne son contenu (coins arrondis) : liste ouverte, elle la laisse dépasser */
.carte:has(.deroulant[open]) { overflow: visible; }