/* OMEX — Masse salariale : compléments au design system DAF (_daf_style.css).
   S'appuient UNIQUEMENT sur les tokens DAF (--omex-*, --indigo, --ok, --alert, --warn).
   Règle d'office (Barre #4/#11) : AUCUNE règle de mise en forme ne vit dans index.html —
   ni <style>, ni attribut style="" inline, jamais de valeur codée en dur dans le HTML/JS. */
.kpi.accent .val{color:var(--omex-red-deep)}
.ms-foot{display:flex;align-items:flex-start;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--omex-hairline);font-size:var(--fs-xs);color:var(--omex-ink-2);line-height:1.5}
.ms-foot svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}
/* Variante compacte du pied de page (tableau par individu) : pas de marge haute, séparateur seul */
.ms-foot.tight{margin:0;padding:12px 14px;border-top:1px solid var(--omex-hairline)}
.ms-month{all:unset;cursor:pointer;font-size:13px;font-weight:600;color:var(--omex-ink);background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd);border-radius:8px;padding:7px 11px}
.ms-month:focus-visible{outline:2px solid var(--omex-red);outline-offset:2px}
.navdot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
/* Couleurs des 4 sociétés (fixes, pas de valeur dynamique injectée en style inline) */
.navdot-sas{background:#1d4ed8}
.navdot-nbvo{background:#0E7C3A}
.navdot-syn{background:#5a6b86}
.navdot-maint{background:#9a5b00}
/* Logo casque OMEX dans le badge de marque (remplace l'attribut style="" de l'<img>) */
.brand-badge img{display:block;width:100%;height:100%;object-fit:contain}
/* Bascule d'icône jour/nuit (remplace le style="display:none" inline, togglée en JS via classList) */
.icon-hidden{display:none}
/* Statut « réalisé » (vert, .live déjà défini dans _daf_style.css) / « prévisionnel » (ambre) */
.chip .live.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warn-bg)}
/* Espacement entre les deux blocs de navigation (Vérité / Théorique) */
.nav-block.atelier{margin-top:14px}
/* Héro : Masse salariale du mois en grand (chiffre que le DDO reconnaît) */
.ms-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--omex-surface-2);border:1px solid var(--omex-hairline);border-top:3px solid var(--omex-red);border-radius:var(--r-md,12px);padding:18px 20px;margin-bottom:16px}
.ms-hero .lbl{font-size:var(--fs-xs);color:var(--omex-ink-2);display:flex;align-items:center;gap:6px}
.ms-hero .big{font-size:34px;font-weight:800;letter-spacing:-.5px;color:var(--omex-red-deep);font-variant-numeric:tabular-nums;line-height:1.05}
.ms-hero .eq{font-size:var(--fs-xs);color:var(--omex-ink-2);text-align:right;max-width:260px}
.ms-recap-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#fff;background:var(--omex-red);border-radius:8px;padding:9px 14px}
.ms-recap-btn:hover{background:var(--omex-red-deep)}
.ms-recap-btn:focus-visible{outline:2px solid var(--omex-red-deep);outline-offset:2px}
.ms-recap-btn svg{width:15px;height:15px}
.ms-recap-btn.busy{opacity:.6}
.ms-recap-off{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--omex-ink-2);background:var(--omex-surface-2);border:1px dashed var(--omex-surface-brd);border-radius:8px;padding:8px 12px}
/* Ligne « bascule Année/Mois + bouton récap » (détail entité, chapitre Vérité) */
.ms-recap-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ms-table{width:100%;border-collapse:collapse;font-size:14px}
.ms-table thead th{text-align:left;background:var(--omex-surface-2);color:var(--omex-ink-2);font-weight:700;font-size:12px;letter-spacing:.3px;padding:10px 14px;border-bottom:1px solid var(--omex-hairline);white-space:nowrap}
.ms-table th.r,.ms-table td.r{text-align:right}
.ms-table tbody td{padding:9px 14px;border-bottom:1px solid var(--omex-hairline)}
.ms-table tbody tr:nth-child(odd){background:color-mix(in srgb,var(--omex-surface-2) 55%,transparent)}
.ms-table tbody tr:hover{background:var(--omex-red-soft)}
.ms-table tr.tot td{font-weight:800;border-top:2px solid var(--omex-surface-brd);background:var(--omex-surface-2)}
.ms-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
.ms-badge.sous{color:var(--omex-red-deep);background:var(--omex-red-soft)}
.ms-badge.ok{color:var(--ok);background:var(--ok-bg)}
.ms-badge.neutre{color:var(--omex-ink-2);background:var(--omex-surface-2)}
.ms-wrap{background:var(--omex-surface);border:1px solid var(--omex-surface-brd);border-radius:var(--r-md,12px);overflow:hidden;border-top:3px solid var(--omex-red);margin-top:18px}
.ms-wrap.theo{border-top-color:var(--indigo)}
.ms-wrap .th{padding:12px 14px;font-weight:700;border-bottom:1px solid var(--omex-hairline);font-size:14px}
.ms-wrap .th small{font-weight:400;color:var(--omex-ink-2);font-size:12px}
/* En-tête du tableau par individu : titre + bascule Mois/Cumul sur une même ligne */
.ms-indiv-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ms-empty{padding:26px;text-align:center;color:var(--omex-ink-2)}
.ms-empty b{color:var(--omex-ink)}
.ms-banner{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:8px;margin-bottom:16px;background:var(--warn-bg);border:1px solid var(--warn);color:var(--omex-ink);font-size:14px}
.ms-banner.alerte{background:var(--alert-bg);border-color:var(--alert)}
/* Bannières multi-lignes (constat / cause / consigne, Barre #4/#9) : une idée par ligne, jamais un
   pavé -- .ms-banner-body est l'unique enfant flex du conteneur, les lignes s'empilent normalement. */
.ms-banner-body{display:flex;flex-direction:column;gap:4px}
.ms-banner-line{line-height:1.4}
/* Écart réel / théo — POLARITÉ UNIQUE tenue partout (Barre #4/#5, DAF validé 25/07/2026) :
   écart > 0 = réel au-dessus du budget = DÉPASSEMENT = rouge (.bad) ; écart < 0 = sous le budget =
   .good (vert) ; écart = 0 = neutre (.flat). Un seul jeu de classes pour le KPI (kpi cls ligne
   495/523), le tableau « Écart par entité » et le tag inline (ecartInline chapitre 1) : jamais
   « pos »/« neg » qui laissait deux lectures contradictoires coexister sur la même page (le
   dépassement en vert au tableau vs en ambre au KPI). Le texte accompagne toujours la couleur. */
.em-num{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-variant-numeric:tabular-nums}
.em-num.bad{color:var(--alert)} .em-num.good{color:var(--ok)} .em-num.flat{color:var(--omex-ink-2)}
.ecart-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
.ecart-tag.bad{color:var(--alert);background:var(--alert-bg)} .ecart-tag.good{color:var(--ok);background:var(--ok-bg)} .ecart-tag.flat{color:var(--omex-ink-2);background:var(--omex-surface-2)}
/* Encart d'explication honnête (chapitre 2) */
.ms-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:8px;margin:16px 0 4px;background:var(--indigo-soft);border:1px solid var(--indigo-soft-2);color:var(--indigo-deep);font-size:13px;line-height:1.5}
:root[data-theme="dark"] .ms-note{color:#c7ccf5}
.ms-note svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px}
.ms-cible{font-size:var(--fs-xs);color:var(--omex-ink-2);margin-top:10px;padding:9px 14px;background:var(--omex-surface-2);border:1px dashed var(--omex-surface-brd);border-radius:8px}
.ms-cible .tag-mesure{color:var(--ok);font-weight:700}
.ms-cible .tag-estim{color:var(--warn,#9a6b00);font-weight:700}
/* Traçabilité de l'instantané (date de génération + rafraîchissement) — topbar */
.ms-snap{all:unset;cursor:default;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--omex-ink-2);background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd);border-radius:8px;padding:7px 11px;white-space:nowrap}
.ms-snap svg{width:13px;height:13px;flex:0 0 auto}
.ms-snap.perime{color:var(--alert);border-color:var(--alert)}
.ms-refresh{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--omex-ink);background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd);border-radius:8px;padding:7px 11px}
.ms-refresh:hover{background:var(--omex-red-soft);border-color:var(--omex-red)}
.ms-refresh:disabled{opacity:.55;cursor:progress}
.ms-refresh svg{width:14px;height:14px}
.ms-refresh.spin svg{animation:msspin 1s linear infinite}
@keyframes msspin{to{transform:rotate(360deg)}}
/* Badge d'incohérence (coefficient/écart source vs recalculé) — 11px mini (aligné .ms-badge),
   jamais de micro-police sur l'information la plus sensible du panneau (Barre #7). */
.ms-anom{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#9a5b00;background:#fdf0d5;border:1px solid #f0c987;border-radius:20px;padding:3px 8px;margin-left:6px;cursor:help}
:root[data-theme="dark"] .ms-anom{color:#ffd699;background:#4a3510;border-color:#7a5a1c}
/* Pied de page en puces courtes (Barre #7 : phrases < 20 mots, pas de pavé) */
.ms-foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
/* État d'erreur réseau (matrice des 8 états) */
.ms-error{padding:26px;text-align:center;color:var(--alert)}
.ms-error button{all:unset;cursor:pointer;margin-top:10px;display:inline-block;font-weight:700;color:#fff;background:var(--omex-red);border-radius:8px;padding:8px 16px}
/* Message-action en tête d'un bloc (le "so what") */
.ms-lead{font-size:14px;line-height:1.5;margin-bottom:12px;padding:11px 14px;border-radius:8px;background:var(--omex-surface-2);border-left:3px solid var(--omex-red)}
.ms-lead b{color:var(--omex-red-deep)}
/* Tableau par individu : zone défilante, en-tête et TOTAL toujours visibles (Nielsen #1/#6) */
.ms-scroll{max-height:560px;overflow:auto}
.ms-scroll .ms-table thead th{position:sticky;top:0;z-index:2;background:var(--omex-surface-2);box-shadow:0 1px 0 var(--omex-hairline)}
.ms-scroll .ms-table tr.tot td{position:sticky;bottom:0;z-index:2;background:var(--omex-surface-2);box-shadow:0 -2px 0 var(--omex-surface-brd)}
/* Lignes d'ajustement (écarts nommés) : distinctes des salariés par la FORME (italique + badge), pas par la seule couleur */
.ms-table tr.ajust td{font-style:italic;color:var(--omex-ink-2);background:color-mix(in srgb,var(--omex-surface-2) 75%,transparent)}
.ms-table tr.ajust td:first-child{padding-left:22px}
/* Note secondaire en ligne (ex. mois de la photo d'effectif entre parenthèses) */
.ms-inline-note{font-weight:400;color:var(--omex-ink-2)}
/* Bascule Mois / Cumul annuel */
.ms-toggle{display:inline-flex;gap:0;border:1px solid var(--omex-surface-brd);border-radius:8px;overflow:hidden}
.ms-toggle button{all:unset;cursor:pointer;font-size:12px;font-weight:700;color:var(--omex-ink-2);background:var(--omex-surface-2);padding:6px 12px}
.ms-toggle button[aria-pressed="true"]{color:#fff;background:var(--omex-red)}
.ms-toggle button:focus-visible{outline:2px solid var(--omex-red-deep);outline-offset:-2px}
/* Vue Année — table façon Sandra (6 lignes × 12 mois + cumul). Le défilement horizontal vit DANS
   le wrapper (jamais sur le body/shell) ; la 1re colonne (libellés) est sticky avec un fond OPAQUE
   obligatoire : le zébrage des lignes utilise color-mix(...,transparent), un fond hérité laisserait
   transparaître les colonnes qui défilent dessous (valable thème clair ET sombre : var(--omex-surface-2)
   est un aplat opaque dans les deux, déjà éprouvé sur les thead sticky du tableau individus). */
.ms-annee-scroll{overflow-x:auto}
.ms-annee-scroll .ms-table{white-space:nowrap;min-width:100%}
.ms-table th.rowlbl{position:sticky;left:0;z-index:2;text-align:left;background:var(--omex-surface-2);color:var(--omex-ink);font-weight:700;font-size:13px;padding:9px 14px;border-bottom:1px solid var(--omex-hairline);box-shadow:1px 0 0 var(--omex-hairline)}
.ms-annee-scroll thead th.corner{position:sticky;left:0;z-index:3;background:var(--omex-surface-2);box-shadow:1px 0 0 var(--omex-hairline)}
.ms-table td.np{color:var(--omex-ink-2);opacity:.5}
.ms-table th.cum,.ms-table td.cum{border-left:2px solid var(--omex-surface-brd);font-weight:800}
.ms-annee-scroll tr.msrow-total td,.ms-annee-scroll tr.msrow-total th.rowlbl{font-weight:800;background:var(--omex-surface-2);border-bottom:2px solid var(--omex-surface-brd)}
.ms-annee-legende{padding:12px 14px;border-top:1px solid var(--omex-hairline);font-size:var(--fs-xs);color:var(--omex-ink-2);line-height:1.5}
/* Bloc cumul depuis le début de l'année */
.ms-ytd{background:var(--omex-surface);border:1px solid var(--omex-surface-brd);border-left:4px solid var(--omex-red-deep);border-radius:var(--r-md,12px);padding:14px 16px;margin-top:16px}
.ms-ytd .yt-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ms-ytd .yt-head b{font-size:14px}
.ms-ytd .yt-head small{color:var(--omex-ink-2);font-size:12px}
.ms-ytd .yt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ms-ytd .yt-cell .l{font-size:var(--fs-xs);color:var(--omex-ink-2)}
.ms-ytd .yt-cell .v{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.ms-ytd .yt-cell.total .v{color:var(--omex-red-deep)}
.ms-ytd .yt-note{margin-top:9px;font-size:var(--fs-xs);color:var(--omex-ink-2);line-height:1.45}
/* Grille KPI à 2 colonnes (bloc « Effectif payé / Écart au budget mensuel ») */
.kpi-grid-2{grid-template-columns:repeat(2,1fr)}
/* Espacement avant le bandeau d'auto-contrôle du détail nominatif théorique */
.ms-pad-top{padding:12px 14px 0}
/* Repli mobile (testé 390 px, iPhone standard) — la topbar (5 éléments en ligne : marque, badge
   instantané, bouton Rafraîchir, sélecteur de mois, statut) et la grille de KPI ne se repliaient
   pas sous 600 px : date tronquée, titre coupé, cartes KPI coupées à droite (NC-010). */
@media (max-width:600px){
  .topbar{flex-wrap:wrap;row-gap:8px}
  .topbar-spacer{flex-basis:100%;height:0;order:3}
  .ms-snap{white-space:normal}
  .ms-month{max-width:150px}
  .panel-title h1{font-size:17px;line-height:1.3;white-space:normal;word-break:break-word}
  .kpi-grid{grid-template-columns:1fr!important}
  .kpi .val{font-size:21px;white-space:normal;word-break:break-word;text-align:left}
  .kpi .sub{text-align:left}
  .ms-hero{flex-direction:column;align-items:flex-start}
  .ms-hero .eq{max-width:100%;text-align:left}
  /* Sur cette page, contrairement au Cockpit DAF, on préfère la liste verticale complète au
     défilement horizontal masqué : les 10 vues (2 chapitres) doivent rester lisibles d'un coup. */
  .navlist{flex-direction:column!important;overflow-x:visible!important;flex-wrap:wrap!important;
           -webkit-mask-image:none!important;mask-image:none!important}
  .navitem{white-space:normal!important;width:100%}
}
/* Groupe de contrôle UNIQUE mois + vue, vit dans la topbar (jamais dans .panel-head) — position
   fixe indépendante du chapitre/vue affichée (retour DDO 26/07 : le contrôle ne doit plus sauter
   d'environ 38 px entre vue Mois et vue Année). Les boutons/le select ne sont JAMAIS ajoutés ni
   retirés du DOM : seuls disabled et aria-pressed changent, pour garantir largeur/hauteur
   constantes. Le sélecteur de mois et la bascule restent solidaires (un seul conteneur) : au repli
   mobile ils passent à la ligne ensemble, jamais l'un sans l'autre. */
.ms-periodctl{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.ms-month:disabled{opacity:.55;cursor:not-allowed}
.ms-periodctl .ms-toggle button:disabled{opacity:.4;cursor:not-allowed}

/* ===================== BADGES DE PROVENANCE DU RÉCAP (précédence dépôt > NAS) =====================
   L'information « fait foi » n'est JAMAIS portée par la seule couleur (accessibilité daltonien,
   doctrine Design §4) : le texte « — fait foi » / « récap NAS » et l'icône ✓ la portent aussi. */
.ms-foi-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok);border-radius:20px;padding:4px 11px}
.ms-foi-badge svg{flex:0 0 auto}
.ms-nas-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;color:var(--omex-ink-2);background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd);border-radius:20px;padding:4px 10px}

/* ===================== ZONES DE DÉPÔT (récap / bordereau / export Silae) =====================
   Design INTERNE rouge spartiate, tokens --omex-* uniquement (aucun style inline dans index.html).
   S'inspire de l'ergonomie « Dépôt Sage/banque » de l'app Facturation, mais tout est en classes. */
.ms-depot{background:var(--omex-surface);border:1px solid var(--omex-surface-brd);border-top:3px solid var(--omex-red);border-radius:var(--r-md,12px);margin-top:18px;overflow:hidden}
.ms-depot-head{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;border-bottom:1px solid var(--omex-hairline)}
.ms-depot-head svg{width:18px;height:18px;flex:0 0 auto;color:var(--omex-red)}
.ms-depot-head b{display:block;font-size:14px}
.ms-depot-head small{display:block;color:var(--omex-ink-2);font-size:12px;line-height:1.45;margin-top:2px}
.ms-depot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px}
.ms-depot-loading{grid-column:1/-1;color:var(--omex-ink-2);font-size:13px;padding:8px 2px}
.ms-depot-slot{display:flex;flex-direction:column;gap:8px;background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd);border-radius:10px;padding:13px}
.ms-depot-slot.filled{border-color:var(--omex-red);border-left-width:3px}
.ms-depot-slot.busy{opacity:.6;pointer-events:none}
.ms-depot-slot.erreur{border-color:var(--alert)}
.ms-depot-slot-head{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--omex-ink)}
.ms-depot-slot-head svg{width:16px;height:16px;flex:0 0 auto;color:var(--omex-red-deep)}
.ms-depot-sub{font-size:var(--fs-xs);color:var(--omex-ink-2);line-height:1.4;min-height:2.5em}
.ms-depot-drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer;border:2px dashed var(--omex-surface-brd);border-radius:8px;background:var(--omex-surface);padding:16px 10px;transition:border-color .15s,background .15s}
.ms-depot-drop:hover{border-color:var(--omex-red)}
.ms-depot-drop:focus-visible{outline:2px solid var(--omex-red-deep);outline-offset:2px}
.ms-depot-drop svg{width:22px;height:22px;color:var(--omex-ink-2)}
.ms-depot-slot.drag .ms-depot-drop{border-color:var(--omex-red);background:var(--omex-red-soft)}
.ms-depot-hint{font-size:12px;color:var(--omex-ink-2);line-height:1.4}
.ms-depot-hint u{color:var(--omex-red-deep);text-decoration:underline;font-weight:700}
.ms-depot-input{display:none}
.ms-depot-state{font-size:12px;min-height:1.5em}
.ms-depot-filled{display:flex;flex-direction:column;gap:2px}
.ms-depot-when{font-weight:700;color:var(--omex-red-deep)}
.ms-depot-nom{color:var(--omex-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-depot-taille{color:var(--omex-ink-2)}
.ms-depot-vide{color:var(--omex-ink-2);font-style:italic}
.ms-depot-err{color:var(--alert);font-weight:600;line-height:1.4}
.ms-depot-actions{display:flex;gap:8px;flex-wrap:wrap}
.ms-depot-btn{all:unset;cursor:pointer;font-size:12px;font-weight:700;border-radius:7px;padding:6px 12px}
.ms-depot-btn.open{color:#fff;background:var(--omex-red)}
.ms-depot-btn.open:hover{background:var(--omex-red-deep)}
.ms-depot-btn.del{color:var(--omex-ink-2);background:var(--omex-surface);border:1px solid var(--omex-surface-brd)}
.ms-depot-btn.del:hover{color:var(--alert);border-color:var(--alert)}
.ms-depot-btn:focus-visible{outline:2px solid var(--omex-red-deep);outline-offset:2px}
@media (max-width:820px){.ms-depot-grid{grid-template-columns:1fr}}

/* ===================== CONTRÔLEUR DE POINTAGES (chapitre 3) =====================
   Design INTERNE rouge spartiate, tokens --omex-* uniquement (aucun style inline dans index.html).
   Gravité JAMAIS portée par la seule couleur (accessibilité daltonien, doctrine Design §4) : chaque
   alerte porte une étiquette texte (DANGER / À vérifier / Note) redondante à la couleur et à la
   bordure gauche. Les tons ambre reprennent ceux déjà employés par .ms-anom (palette existante). */
.nav-block.pointages{margin-top:14px}
.pt-synth{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--omex-surface-2);border:1px solid var(--omex-hairline);border-top:3px solid var(--omex-red);border-radius:var(--r-md,12px);padding:12px 16px;margin-bottom:14px}
.pt-synth-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pt-synth-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pt-statut{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:800;padding:5px 12px;border-radius:20px}
.pt-statut svg{flex:0 0 auto}
.pt-statut.ok{color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok)}
.pt-statut.alerte{color:var(--alert);background:var(--alert-bg);border:1px solid var(--alert)}
.pt-count{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;border:1px solid transparent}
.pt-count.danger{color:var(--alert);background:var(--alert-bg);border-color:var(--alert)}
.pt-count.verifier{color:#9a5b00;background:#fdf0d5;border-color:#f0c987}
.pt-count.note{color:var(--omex-ink-2);background:var(--omex-surface);border-color:var(--omex-surface-brd)}
:root[data-theme="dark"] .pt-count.verifier{color:#ffd699;background:#4a3510;border-color:#7a5a1c}
.pt-alertes{display:flex;flex-direction:column}
.pt-alert{display:flex;align-items:flex-start;gap:10px;padding:11px 16px;border-bottom:1px solid var(--omex-hairline);font-size:14px;line-height:1.45;border-left:4px solid var(--omex-surface-brd)}
.pt-alert:last-child{border-bottom:none}
.pt-alert.danger{border-left-color:var(--alert);background:color-mix(in srgb,var(--alert-bg) 45%,transparent)}
.pt-alert.verifier{border-left-color:#e0a040}
.pt-alert.note{border-left-color:var(--omex-ink-2)}
.pt-alert-tag{flex:0 0 auto;display:inline-flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:.3px;padding:3px 9px;border-radius:6px;text-transform:uppercase;white-space:nowrap}
.pt-alert-tag.danger{color:#fff;background:var(--alert)}
.pt-alert-tag.verifier{color:#5a3800;background:#f0c987}
.pt-alert-tag.note{color:var(--omex-ink-2);background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd)}
.pt-alert-body{min-width:0}
.pt-alert-regle{display:inline-block;font-size:11px;font-weight:700;color:var(--omex-ink-2);background:var(--omex-surface-2);border-radius:5px;padding:1px 7px;margin-left:4px;white-space:nowrap}
@media (max-width:600px){.pt-synth{flex-direction:column;align-items:flex-start}.pt-alert{flex-direction:column;gap:6px}}

/* ===== INTERACTIONS POINTAGES — DRILL-DOWN / FILTRES / ÉTATS (recadrage DDO 27/07) =====
   Rendre le chapitre Pointages ACTIONNABLE : filtres de gravité + recherche, alertes cliquables ->
   volet drill-down (mini-calendrier jours × codes, période surlignée, contrepartie Silae), suivi
   d'état (traité / à corriger / faux positif), bouton « préparer la correction » (lecture seule).
   Tokens --omex-* / --alert / --ok / --warn / --indigo déjà en service, ZÉRO style inline. Chaque
   gravité et chaque état = pastille + libellé (jamais la seule couleur, test niveaux de gris). */

/* -- filtres + recherche -- */
.pt-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid var(--omex-hairline)}
.pt-filter-chips{display:flex;gap:6px;flex-wrap:wrap}
.pt-chip{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--omex-ink-2);background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd);border-radius:20px;padding:6px 12px;min-height:32px;box-sizing:border-box;transition:background .14s ease-out,border-color .14s ease-out}
.pt-chip i{width:8px;height:8px;border-radius:3px;background:currentColor;flex:0 0 auto}
.pt-chip:hover{background:var(--omex-red-soft)}
.pt-chip:focus-visible{outline:2px solid var(--omex-red);outline-offset:2px}
.pt-chip[aria-pressed="true"]{color:#fff;background:var(--omex-ink-2);border-color:var(--omex-ink-2)}
.pt-chip.danger[aria-pressed="true"]{color:#fff;background:var(--alert);border-color:var(--alert)}
.pt-chip.verifier[aria-pressed="true"]{color:#5a3800;background:#f0c987;border-color:#e0a040}
.pt-chip.note[aria-pressed="true"]{color:var(--omex-ink);background:var(--omex-surface-brd);border-color:var(--omex-surface-brd)}
.pt-chip-n{font-variant-numeric:tabular-nums;opacity:.85}
.pt-search{display:flex;align-items:center;gap:7px;flex:1 1 200px;min-width:160px;max-width:280px;background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd);border-radius:8px;padding:6px 11px;box-sizing:border-box}
.pt-search svg{width:15px;height:15px;color:var(--omex-ink-2);flex:0 0 auto}
.pt-search input{all:unset;flex:1;font-size:13px;color:var(--omex-ink)}
.pt-search input::placeholder{color:var(--omex-ink-2)}
.pt-search:focus-within{border-color:var(--omex-red)}
.pt-filter-count{margin-left:auto;font-size:12px;color:var(--omex-ink-2);font-variant-numeric:tabular-nums}
@media (max-width:600px){.pt-filters{flex-direction:column;align-items:stretch}.pt-filter-count{margin-left:0}}

/* -- alertes cliquables + badge d'état -- */
.pt-alert.pt-clickable{cursor:pointer;transition:background .14s ease-out}
.pt-alert.pt-clickable:hover{background:var(--omex-red-soft)}
.pt-alert.pt-clickable:focus-visible{outline:2px solid var(--omex-red);outline-offset:-2px}
.pt-alert.pt-hide{display:none}
.pt-alert.pt-treated .pt-alert-body{opacity:.62}
.pt-etat-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;margin-left:8px;white-space:nowrap;vertical-align:middle}
.pt-etat-pill svg{width:12px;height:12px;flex:0 0 auto}
.pt-etat-pill.traite{color:var(--ok);background:var(--ok-bg)}
.pt-etat-pill.corriger{color:var(--alert);background:var(--alert-bg)}
.pt-etat-pill.faux-positif{color:var(--omex-ink-2);background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd)}
.pt-etat-pill-note{color:var(--omex-ink-2);font-style:italic;font-weight:400;margin-left:6px}
.pt-row-clickable{cursor:pointer}
.pt-row-clickable:hover td{background:var(--omex-red-soft)}
.pt-row-clickable:focus-visible{outline:2px solid var(--omex-red);outline-offset:-2px}

/* -- volet drill-down (panneau latéral, pas une nouvelle page) -- */
.pt-drawer-backdrop{position:fixed;inset:0;background:rgba(13,17,20,.42);z-index:60;opacity:0;transition:opacity .2s ease-out}
.pt-drawer-backdrop:not([hidden]){opacity:1}
:root[data-theme="dark"] .pt-drawer-backdrop{background:rgba(0,0,0,.6)}
.pt-drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,92vw);background:var(--omex-surface);border-left:1px solid var(--omex-surface-brd);box-shadow:-8px 0 24px rgba(13,43,78,.14);z-index:61;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease-out}
.pt-drawer:not([hidden]){transform:translateX(0)}
:root[data-theme="dark"] .pt-drawer{box-shadow:-8px 0 24px rgba(0,0,0,.4)}
@media (prefers-reduced-motion:reduce){.pt-drawer,.pt-drawer-backdrop{transition:none}}
.pt-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--omex-hairline);border-top:3px solid var(--omex-red)}
.pt-drawer-head h2{font-size:16px;margin:0}
.pt-drawer-sub{font-size:12px;color:var(--omex-ink-2);margin-top:2px}
.pt-drawer-close{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-xs);color:var(--omex-ink-2);flex:0 0 auto}
.pt-drawer-close:hover{background:var(--omex-surface-2);color:var(--omex-ink)}
.pt-drawer-close:focus-visible{outline:2px solid var(--omex-red);outline-offset:2px}
.pt-drawer-close svg{width:18px;height:18px}
.pt-drawer-body{overflow-y:auto;padding:16px 18px 24px;flex:1}
.pt-drawer-section{margin-top:18px}
.pt-drawer-section-head{font-weight:700;font-size:13px;margin-bottom:8px;display:flex;align-items:baseline;gap:8px}
.pt-drawer-section-head small{font-weight:400;color:var(--omex-ink-2);font-size:11px}
.pt-drawer-alert-recap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;padding:10px 12px;border-radius:8px;background:var(--omex-surface-2)}
.pt-drawer-alert-recap+.pt-drawer-alert-recap{margin-top:6px}
.pt-drawer-alert-recap.danger{background:color-mix(in srgb,var(--alert-bg) 60%,transparent)}

/* -- mini-calendrier jours × codes -- */
.pt-cal-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--omex-ink-2);margin-bottom:8px}
.pt-cal-tag{display:inline-flex;align-items:center;gap:4px}
.pt-cal-tag i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.pt-cal-tag.present i{background:var(--omex-surface-brd)}
.pt-cal-tag.dplct i{background:#1d4ed8}
.pt-cal-tag.cp i{background:var(--ok)}
.pt-cal-tag.rtt i{background:var(--indigo)}
.pt-cal-tag.am i{background:#9a5b00}
.pt-cal-tag.sans_solde i{background:var(--alert)}
.pt-cal-tag.autre i{background:var(--omex-ink-2)}
.pt-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.pt-cal-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;aspect-ratio:1;border-radius:var(--r-xs);background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd);font-size:11px}
.pt-cal-day b{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.pt-cal-day small{font-size:11px;color:var(--omex-ink-2);text-transform:uppercase}
.pt-cal-day.present{background:var(--omex-surface)}
.pt-cal-day.dplct{background:rgba(29,78,216,.12);border-color:#1d4ed8}
.pt-cal-day.cp{background:var(--ok-bg);border-color:var(--ok)}
.pt-cal-day.rtt{background:var(--indigo-soft);border-color:var(--indigo)}
.pt-cal-day.am{background:#fdf0d5;border-color:#f0c987}
.pt-cal-day.sans_solde{background:var(--alert-bg);border-color:var(--alert)}
.pt-cal-day.autre{background:var(--omex-surface-2);border-color:var(--omex-ink-2)}
/* surlignage de la période en cause : forme (anneau épais) + point, PAS que la couleur (daltonien-safe) */
.pt-cal-day.surlign{outline:3px solid var(--omex-red);outline-offset:1px;position:relative}
.pt-cal-day.surlign::after{content:'●';position:absolute;top:1px;right:2px;font-size:6px;color:var(--omex-red)}

/* -- contrepartie Silae -- */
.pt-silae-line{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:8px;font-size:13px}
.pt-silae-line+.pt-silae-line{margin-top:6px}
.pt-silae-line svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px}
.pt-silae-line.found{background:var(--ok-bg);color:var(--omex-ink)}
.pt-silae-line.found svg{color:var(--ok)}
.pt-silae-line.missing{background:var(--alert-bg);color:var(--omex-ink)}
.pt-silae-line.missing svg{color:var(--alert)}
.pt-silae-line div span{display:block;color:var(--omex-ink-2);font-size:12px;margin-top:1px}

/* -- suivi d'état (traité / à corriger / faux positif) -- */
.pt-etat-group{display:flex;gap:6px;flex-wrap:wrap}
.pt-etat-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:8px 12px;border-radius:8px;border:1px solid var(--omex-surface-brd);background:var(--omex-surface-2);color:var(--omex-ink-2);min-height:40px;box-sizing:border-box}
.pt-etat-btn svg{width:14px;height:14px}
.pt-etat-btn:hover{background:var(--omex-red-soft)}
.pt-etat-btn:focus-visible{outline:2px solid var(--omex-red);outline-offset:2px}
.pt-etat-btn.traite[aria-pressed="true"]{color:#fff;background:var(--ok);border-color:var(--ok)}
.pt-etat-btn.corriger[aria-pressed="true"]{color:#fff;background:var(--alert);border-color:var(--alert)}
.pt-etat-btn.faux-positif[aria-pressed="true"]{color:#fff;background:var(--omex-ink-2);border-color:var(--omex-ink-2)}
.pt-comment-label{display:block;font-size:12px;color:var(--omex-ink-2);margin:10px 0 4px}
.pt-comment{width:100%;box-sizing:border-box;font:inherit;font-size:13px;color:var(--omex-ink);background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd);border-radius:8px;padding:9px 11px;resize:vertical}
.pt-comment:focus-visible{outline:2px solid var(--omex-red);outline-offset:1px}
.pt-etat-meta{font-size:11px;color:var(--omex-ink-2);margin-top:8px;min-height:1.4em}

/* -- préparer la correction (pont vers l'action, sans exécuter) -- */
.pt-prepare-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#fff;background:var(--omex-red);border-radius:8px;padding:10px 15px;min-height:40px;box-sizing:border-box}
.pt-prepare-btn:hover{background:var(--omex-red-deep)}
.pt-prepare-btn:focus-visible{outline:2px solid var(--omex-red-deep);outline-offset:2px}
.pt-prepare-btn svg{width:15px;height:15px}
.pt-prepare-out{margin-top:10px;padding:11px 12px;background:var(--omex-surface-2);border:1px dashed var(--omex-surface-brd);border-radius:8px}
.pt-prepare-line{font-size:13px;font-variant-numeric:tabular-nums;font-family:ui-monospace,Consolas,monospace;color:var(--omex-ink);word-break:break-word}
.pt-prepare-copy{all:unset;cursor:pointer;display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--omex-red-deep);background:var(--omex-surface);border:1px solid var(--omex-surface-brd);border-radius:6px;padding:6px 11px}
.pt-prepare-copy:hover{border-color:var(--omex-red)}
.pt-prepare-copy:focus-visible{outline:2px solid var(--omex-red);outline-offset:2px}
.pt-prepare-note{font-size:11px;color:var(--omex-ink-2);margin-top:7px;line-height:1.4}

@media (max-width:600px){.pt-drawer{width:100vw}.pt-cal-grid{grid-template-columns:repeat(5,1fr)}}

/* ===================== SAISIE DE POINTAGE STANDARD (module 27/07/2026) =====================
   Namespace .sp- (« saisie pointage ») : zéro collision avec l'existant, tokens --omex-* uniquement,
   registre ERP interne (rouge spartiate --omex-red / --omex-red-deep), jamais le navy du site public.
   La vue s'affiche DANS le chapitre Pointages via une bascule interne au panneau (composant .sp-mode) :
   aucun nouvel onglet de navigation (décision DDO), la topbar reste inchangée au pixel près. */
.sp-mode{display:inline-flex;gap:4px;background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd);border-radius:22px;padding:3px;margin:0 0 14px}
.sp-mode button{all:unset;cursor:pointer;font-size:12px;font-weight:700;color:var(--omex-ink-2);padding:6px 14px;border-radius:18px;min-height:30px;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px}
.sp-mode button[aria-pressed="true"]{background:var(--omex-red);color:#fff}
.sp-mode button:focus-visible{outline:2px solid var(--omex-red);outline-offset:2px}
.sp-identity{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;background:var(--omex-surface-2);border:1px solid var(--omex-hairline);border-top:3px solid var(--omex-red);border-radius:var(--r-md,12px);padding:12px 16px;margin-bottom:14px}
.sp-id-ent{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--omex-ink);padding-bottom:7px}
.sp-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--omex-ink-2)}
.sp-field select,.sp-field .sp-input{all:unset;cursor:pointer;font-size:13px;font-weight:600;color:var(--omex-ink);background:var(--omex-surface);border:1px solid var(--omex-surface-brd);border-radius:8px;padding:7px 11px;box-sizing:border-box;min-width:180px}
.sp-field .sp-input{cursor:text}
.sp-field select:focus-visible,.sp-field .sp-input:focus-visible{outline:2px solid var(--omex-red);outline-offset:2px}
.sp-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 0;margin-bottom:2px}
.sp-toolbar button{all:unset;cursor:pointer;font-size:12px;font-weight:700;color:var(--omex-ink-2);background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd);border-radius:20px;padding:6px 12px;min-height:32px;box-sizing:border-box}
.sp-toolbar button:hover{background:var(--omex-red-soft)}
.sp-toolbar button:focus-visible{outline:2px solid var(--omex-red);outline-offset:2px}
.sp-toolbar button:disabled{opacity:.45;cursor:not-allowed}
.sp-plage{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--omex-ink-2)}
.sp-plage input,.sp-plage select{all:unset;font-size:12px;font-weight:600;color:var(--omex-ink);background:var(--omex-surface);border:1px solid var(--omex-surface-brd);border-radius:6px;padding:5px 8px;box-sizing:border-box;min-width:52px;text-align:center}
.sp-plage select{min-width:96px;text-align:left}
.sp-plage input:focus-visible,.sp-plage select:focus-visible{outline:2px solid var(--omex-red);outline-offset:1px}
.sp-grid-scroll{max-height:56vh;overflow:auto;border:1px solid var(--omex-surface-brd);border-radius:10px}
.sp-grid{width:100%;border-collapse:collapse;font-size:13px}
.sp-grid thead th{position:sticky;top:0;z-index:2;background:var(--omex-surface-2);color:var(--omex-ink-2);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;text-align:left;padding:9px 10px;border-bottom:1px solid var(--omex-surface-brd)}
.sp-grid td{padding:5px 10px;border-bottom:1px solid var(--omex-hairline);vertical-align:middle}
.sp-grid tbody tr:hover td{background:var(--omex-red-soft)}
.sp-day{white-space:nowrap;color:var(--omex-ink);font-weight:600;font-variant-numeric:tabular-nums}
.sp-day small{font-weight:600;color:var(--omex-ink-2);margin-left:5px}
.sp-tag-we,.sp-tag-fe{font-size:11px;font-weight:700;text-transform:uppercase;margin-left:6px;padding:1px 5px;border-radius:5px}
.sp-tag-we{color:var(--omex-ink-2);background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd)}
.sp-tag-fe{color:var(--omex-red-deep);background:var(--omex-red-soft);border:1px solid var(--omex-red)}
.sp-row-weekend td{background:var(--omex-surface-2)}
.sp-row-weekend td.sp-day{color:var(--omex-ink-2)}
.sp-code-select{all:unset;cursor:pointer;width:100%;box-sizing:border-box;font-size:13px;color:var(--omex-ink);background:var(--omex-surface);border:1px solid var(--omex-surface-brd);border-radius:7px;padding:6px 9px}
.sp-code-select:focus-visible{outline:2px solid var(--omex-red);outline-offset:1px}
.sp-code-select.sp-has-code{border-color:var(--omex-red);font-weight:700}
.sp-tot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 14px;margin-top:12px;background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd);border-radius:10px;font-size:13px}
.sp-tot b{color:var(--omex-ink);font-variant-numeric:tabular-nums}
.sp-tot span{color:var(--omex-ink-2)}
.sp-save-bar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--omex-surface);border-top:1px solid var(--omex-surface-brd);padding:12px 0;margin-top:8px}
.sp-save-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sp-save-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#fff;background:var(--omex-red);border-radius:8px;padding:9px 16px;min-height:40px;box-sizing:border-box}
.sp-save-btn:hover{background:var(--omex-red-deep)}
.sp-save-btn:disabled{opacity:.5;cursor:not-allowed}
.sp-save-btn:focus-visible{outline:2px solid var(--omex-red-deep);outline-offset:2px}
.sp-consolider-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--omex-red-deep);background:var(--omex-surface);border:1px solid var(--omex-red);border-radius:8px;padding:9px 16px;min-height:40px;box-sizing:border-box}
.sp-consolider-btn:hover{background:var(--omex-red-soft)}
.sp-consolider-btn:disabled{opacity:.5;cursor:not-allowed}
.sp-consolider-btn:focus-visible{outline:2px solid var(--omex-red);outline-offset:2px}
.sp-saved-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok);border-radius:20px;padding:4px 11px}
.sp-saved-badge svg{width:14px;height:14px}
.sp-hint{font-size:12px;color:var(--omex-ink-2);line-height:1.5;margin:0 0 12px}
.sp-avalider{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--omex-red-deep);background:var(--omex-red-soft);border:1px solid var(--omex-red);border-radius:6px;padding:1px 7px;margin-left:6px}
.sp-entete{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 14px}
.sp-entete .sp-kpi{display:flex;flex-direction:column;gap:2px;padding:9px 14px;background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd);border-radius:10px;min-width:88px}
.sp-entete .sp-kpi b{font-size:18px;color:var(--omex-ink);font-variant-numeric:tabular-nums}
.sp-entete .sp-kpi small{font-size:11px;color:var(--omex-ink-2);text-transform:uppercase;letter-spacing:.02em}
@media (max-width:600px){.sp-identity{flex-direction:column;align-items:stretch}.sp-field select,.sp-field .sp-input{min-width:0;width:100%}}
/* Import d'un relevé de chantier (module 27/07/2026) : REMPLIT la saisie sans ressaisie. Design DAF,
   aucun style inline ; alertes portées par icône + texte (jamais la seule couleur). */
.sp-import{background:var(--omex-surface-2);border:1px solid var(--omex-hairline);border-left:3px solid var(--omex-red);border-radius:var(--r-md,12px);padding:6px 16px;margin:0 0 14px}
.sp-import>summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--omex-red-deep);padding:7px 2px;list-style:none;display:flex;align-items:center;gap:8px}
.sp-import>summary::-webkit-details-marker{display:none}
.sp-import>summary::before{content:"";width:14px;height:14px;flex:0 0 auto;background:var(--omex-red);-webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E")}
.sp-import>summary:focus-visible{outline:2px solid var(--omex-red);outline-offset:2px}
.sp-import-body{padding:4px 0 12px}
.sp-import-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.sp-import-row input[type=file]{font-size:12px;color:var(--omex-ink);max-width:280px}
.sp-import-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#fff;background:var(--omex-red);border-radius:8px;padding:9px 16px;min-height:40px;box-sizing:border-box}
.sp-import-btn:hover{background:var(--omex-red-deep)}
.sp-import-btn:focus-visible{outline:2px solid var(--omex-red-deep);outline-offset:2px}
.sp-import-report{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.sp-import-ok,.sp-import-warn,.sp-import-ko{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5;padding:8px 12px;border-radius:8px}
.sp-import-ok{color:var(--omex-ink);background:var(--omex-surface);border:1px solid var(--omex-surface-brd)}
.sp-import-warn{color:var(--omex-ink);background:var(--omex-red-soft);border:1px solid var(--omex-red)}
.sp-import-ko{color:var(--omex-red-deep);background:var(--omex-red-soft);border:1px solid var(--omex-red)}
.sp-import-ok svg,.sp-import-warn svg,.sp-import-ko svg{flex:0 0 auto;width:15px;height:15px;margin-top:1px}
@media (max-width:600px){.sp-import-row{flex-direction:column;align-items:stretch}.sp-import-row input[type=file]{max-width:none}}

/* ===========================================================================
   PILOTE POINTAGE POSTÉ (3x8) « Préventeurs Cadarache » — page /poste (poste.html).
   Compléments s'appuyant UNIQUEMENT sur les tokens DAF (--omex-*, --ok, --warn, --alert).
   AUCUN style inline dans poste.html : toute la mise en forme vit ici (Barre #4/#11).
   =========================================================================== */
.po-wrap{max-width:1180px;margin:0 auto;padding:22px 20px 60px}
.po-h1{font-size:20px;font-weight:800;letter-spacing:-.3px;color:var(--omex-ink);margin:0 0 4px}
.po-sub{font-size:13px;color:var(--omex-ink-2);margin:0 0 18px}
.po-card{background:var(--omex-surface);border:1px solid var(--omex-surface-brd);border-radius:var(--r-md,12px);border-top:3px solid var(--omex-red);padding:20px;margin-bottom:18px}
.po-card.plain{border-top-color:var(--omex-surface-brd)}
/* --- Écran de connexion --- */
.po-login{max-width:380px;margin:8vh auto 0}
.po-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.po-field label{font-size:12px;font-weight:700;color:var(--omex-ink-2)}
.po-field input{all:unset;box-sizing:border-box;width:100%;font-size:14px;color:var(--omex-ink);background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd);border-radius:8px;padding:10px 12px}
.po-field input:focus-visible{outline:2px solid var(--omex-red);outline-offset:1px}
.po-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:14px;font-weight:700;color:#fff;background:var(--omex-red);border-radius:8px;padding:11px 16px}
.po-btn:hover{background:var(--omex-red-deep)}
.po-btn:focus-visible{outline:2px solid var(--omex-red-deep);outline-offset:2px}
.po-btn.busy{opacity:.6;cursor:progress}
.po-btn.ghost{color:var(--omex-ink);background:var(--omex-surface-2);border:1px solid var(--omex-surface-brd)}
.po-btn.ghost:hover{background:var(--omex-red-soft);border-color:var(--omex-red)}
.po-btn.wide{width:100%;box-sizing:border-box}
.po-btn.sm{font-size:12px;padding:7px 12px}
.po-demo{font-size:12px;color:var(--omex-ink-2);background:var(--omex-surface-2);border:1px dashed var(--omex-surface-brd);border-radius:8px;padding:10px 12px;margin-top:8px;line-height:1.5}
.po-err{font-size:13px;color:var(--omex-red-deep);background:var(--omex-red-soft);border:1px solid var(--omex-red);border-radius:8px;padding:10px 12px;margin-bottom:12px}
.po-err.hidden{display:none}
/* --- Barre d'identité (qui suis-je) --- */
.po-me{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.po-me .who{font-size:14px;color:var(--omex-ink)}
.po-me .who b{font-weight:800}
.po-role{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;color:var(--omex-red-deep);background:var(--omex-red-soft)}
.po-me .sp{flex:1}
/* --- Badge d'état : LIBELLÉ texte + FORME/icône (jamais la couleur seule — test niveaux de gris) --- */
.po-etat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 11px;border-radius:20px;border:1px solid var(--omex-surface-brd);background:var(--omex-surface-2);color:var(--omex-ink)}
.po-etat svg{width:13px;height:13px;flex:0 0 auto}
.po-etat.brouillon{border-style:dashed}
.po-etat.soumis{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}
.po-etat.valide{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.po-etat.renvoye{border-color:var(--alert);color:var(--alert);background:var(--alert-bg)}
.po-etat.reouvert{border-color:var(--info);color:var(--info);background:var(--info-bg)}
.po-etat.pret_paie{border-color:var(--omex-red);color:var(--omex-red-deep);background:var(--omex-red-soft)}
.po-etat .stamp{font-weight:400;color:var(--omex-ink-2)}
/* --- Grille de saisie des quarts --- */
.po-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.po-day{display:flex;flex-direction:column;gap:5px;padding:8px 9px;border:1px solid var(--omex-hairline);border-radius:8px;background:var(--omex-surface-2)}
.po-day.we{background:color-mix(in srgb,var(--omex-surface-2) 60%,var(--omex-hairline))}
.po-day.fer{border-color:var(--omex-red);border-style:dashed}
.po-day .d{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;color:var(--omex-ink-2)}
.po-day .d b{font-size:14px;font-weight:800;color:var(--omex-ink)}
.po-day .tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--omex-red-deep)}
.po-day select{all:unset;box-sizing:border-box;width:100%;font-size:12px;color:var(--omex-ink);background:var(--omex-surface);border:1px solid var(--omex-surface-brd);border-radius:6px;padding:6px 8px}
.po-day select:focus-visible{outline:2px solid var(--omex-red);outline-offset:1px}
.po-day select:disabled{opacity:.6;cursor:not-allowed}
.po-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--omex-hairline)}
.po-actions .sp{flex:1}
.po-hint{font-size:12px;color:var(--omex-ink-2);margin-top:10px}
.po-lock{display:flex;gap:9px;align-items:flex-start;padding:11px 14px;border-radius:8px;margin-bottom:14px;background:var(--ok-bg);border:1px solid var(--ok);color:var(--omex-ink);font-size:13px;line-height:1.5}
.po-lock svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px}
/* --- Tableau responsable « à valider » --- */
.po-table{width:100%;border-collapse:collapse;font-size:14px}
.po-table thead th{text-align:left;background:var(--omex-surface-2);color:var(--omex-ink-2);font-weight:700;font-size:12px;letter-spacing:.3px;padding:10px 14px;border-bottom:1px solid var(--omex-hairline);white-space:nowrap}
.po-table tbody td{padding:10px 14px;border-bottom:1px solid var(--omex-hairline);vertical-align:middle}
.po-table tbody tr:hover{background:var(--omex-red-soft)}
.po-table .rowact{display:flex;gap:7px;flex-wrap:wrap}
.po-progress{font-size:13px;color:var(--omex-ink-2);margin:2px 0 14px}
.po-progress b{color:var(--omex-ink)}
/* --- Tableau des heures/majorations consolidées --- */
.po-hwrap{overflow:auto;border:1px solid var(--omex-surface-brd);border-radius:var(--r-md,12px);border-top:3px solid var(--omex-red);margin-top:8px}
.po-hwrap .th{padding:12px 14px;font-weight:700;border-bottom:1px solid var(--omex-hairline);font-size:14px}
.po-num{text-align:right;font-variant-numeric:tabular-nums}
.po-verdict{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 11px;border-radius:20px}
/* Le picto héritait de la taille intrinsèque du SVG (badge démesuré) : même gabarit que .po-etat svg. */
.po-verdict svg{width:13px;height:13px;flex:0 0 auto}
.po-verdict.ok{color:var(--ok);background:var(--ok-bg)}
.po-verdict.ko{color:var(--alert);background:var(--alert-bg)}
.po-note{font-size:12px;color:var(--omex-ink-2);background:var(--omex-surface-2);border:1px dashed var(--omex-surface-brd);border-radius:8px;padding:9px 12px;margin-top:10px;line-height:1.5}
.po-empty{padding:26px;text-align:center;color:var(--omex-ink-2)}
.po-hidden{display:none}
/* --- Liste de validation « au pouce » (remplace le tableau à valider sur tous formats) --- */
.po-vlist{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.po-vitem{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--omex-surface);border:1px solid var(--omex-surface-brd);border-left:3px solid var(--omex-red);border-radius:10px;padding:12px 14px}
.po-vhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.po-vname{font-size:15px;color:var(--omex-ink)}
.po-vname b{font-weight:800}
.po-vact{display:flex;gap:8px;flex-wrap:wrap}
.po-saszone{flex:1 1 100%}
/* --- Sélecteur de RÉGIME (préventeur) : champ dédié, cohérent avec .po-field --- */
.po-regfield{display:flex;flex-direction:column;gap:5px;margin:4px 0 14px}
.po-regfield label{font-size:12px;font-weight:700;letter-spacing:.3px;color:var(--omex-ink-2)}
.po-regfield select{all:unset;box-sizing:border-box;max-width:340px;font-size:14px;font-weight:600;color:var(--omex-ink);background:var(--omex-surface);border:1px solid var(--omex-surface-brd);border-radius:8px;padding:9px 12px}
.po-regfield select:focus-visible{outline:2px solid var(--omex-red);outline-offset:1px}
.po-regfield select:disabled{opacity:.6;cursor:not-allowed}
.po-regfield .po-hint{margin:0}
/* --- Résultat du contrôleur de BUTOIRS légaux (SAS de validation + relevé préventeur) --- */
.po-sas{margin:6px 0 14px;padding:12px 14px;border:1px solid var(--omex-surface-brd);border-left:3px solid var(--omex-red);border-radius:10px;background:var(--omex-surface-2)}
.po-sas .po-me{margin:0 0 6px}
.po-butoirs{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.po-butoirs li{font-size:13px;line-height:1.45;color:var(--omex-ink);padding:8px 11px;border-radius:8px;background:var(--alert-bg);border:1px solid var(--alert)}
.po-butoirs li b{color:var(--alert)}
.po-flag{display:inline-block;font-size:11px;font-weight:800;padding:2px 9px;border-radius:20px}
.po-flag.ok{color:var(--ok);background:var(--ok-bg)}
.po-flag.ko{color:var(--alert);background:var(--alert-bg);cursor:help}
/* --- Sélecteur de MOIS (bandeau relevé + écran responsable), même widget partout --- */
.po-monthsel{display:inline-flex;align-items:center;gap:7px}
.po-monthsel label{font-size:12px;font-weight:700;letter-spacing:.3px;color:var(--omex-ink-2)}
.po-monthsel select{all:unset;box-sizing:border-box;font-size:14px;font-weight:700;color:var(--omex-ink);background:var(--omex-surface);border:1px solid var(--omex-surface-brd);border-radius:8px;padding:7px 11px;cursor:pointer}
.po-monthsel select:focus-visible{outline:2px solid var(--omex-red);outline-offset:1px}
/* --- Bandeau « service local injoignable » --- */
.po-offline{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:6px 2px}
.po-offline-t{font-size:16px;font-weight:800;color:var(--omex-red-deep);display:flex;align-items:center;gap:8px}
.po-offline-t::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--omex-red)}
/* --- Bandeau de consolidation partielle / complète --- */
.po-partiel{font-size:13px;line-height:1.5;color:var(--omex-ink);background:var(--warn-bg);border:1px solid var(--warn);border-radius:10px;padding:11px 14px;margin-bottom:12px}
.po-partiel.ok{background:var(--ok-bg);border-color:var(--ok)}
.po-partiel b{font-weight:800}
/* =========================================================================
   CLÉ D'AFFAIRE — saisie par période (préventeur) + signalement (responsable) + table ventilée.
   Identité INTERNE : rouge spartiate (--omex-red), jamais le navy des supports client. Tokens
   uniquement, aucun hex en dur : le mode sombre suit tout seul (--omex-*/--warn/--ok redéfinis
   dans _daf_style.css). HIÉRARCHIE DE GRAVITÉ ASSUMÉE : --alert reste réservé au dépassement de
   butoir légal (grave) ; le « non affecté » prend --warn (bloquant pour la facturation, pas pour
   la personne). Le signal n'est JAMAIS porté par la couleur seule : picto + mot écrit en clair.
   ========================================================================= */
.po-h2{font-size:15px;font-weight:800;letter-spacing:-.2px;color:var(--omex-ink);margin:0 0 3px}
.po-affaire-block{background:var(--omex-surface);border:1px solid var(--omex-surface-brd);border-top:3px solid var(--omex-red);border-radius:var(--r-md,12px);padding:15px 16px;margin:4px 0 16px}
.po-affaire-block .po-field{margin-bottom:0}
.po-affaire-block .po-regfield{margin:0}
.po-affaire-rows{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.po-affaire-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--omex-hairline);border-left:3px solid var(--omex-red-soft);border-radius:10px;background:var(--omex-surface-2)}
.po-affaire-row .po-cle{flex:1 1 150px;min-width:0}
.po-affaire-row .po-nav{flex:1 1 160px;min-width:0}
.po-affaire-row .po-regfield{flex:0 0 auto}
.po-affaire-row .po-regfield select{max-width:110px}
.po-affaire-del{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:8px;color:var(--alert);background:var(--omex-surface);border:1px solid var(--omex-surface-brd)}
.po-affaire-del svg{width:17px;height:17px}
.po-affaire-del:hover{background:var(--alert-bg);border-color:var(--alert)}
.po-affaire-del:focus-visible{outline:2px solid var(--omex-red);outline-offset:2px}
.po-affaire-del[disabled]{opacity:.5;cursor:not-allowed}
.po-affaire-add{margin-top:12px;border-style:dashed}
.po-affaire-summary{font-size:12px;line-height:1.6;color:var(--omex-ink-2);margin-top:12px}
.po-affaire-summary b{color:var(--omex-ink);font-weight:800}
.po-affaire-summary .sep{color:var(--omex-surface-brd);padding:0 4px}
/* Bandeau « jours non affectés » — forme + picto + libellé en toutes lettres (jamais un point coloré) */
.po-nonaffecte{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.5;color:var(--omex-ink);background:var(--warn-bg);border:1px solid var(--warn);border-radius:10px;padding:10px 13px;margin-top:12px}
.po-nonaffecte svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--warn)}
.po-nonaffecte b{font-weight:800}
.po-flag.warn{color:var(--warn);background:var(--warn-bg)}
.po-flag.aff{color:var(--omex-red-deep);background:var(--omex-red-soft);font-variant-numeric:tabular-nums}
.po-flag svg{width:11px;height:11px;vertical-align:-1px;margin-right:3px}
/* Jour de la grille non couvert par une période : liseré discret, jamais un badge lourd (mobile) */
.po-day.noaff{border-left:3px solid var(--warn)}
.po-day .aff{font-size:10px;font-weight:800;letter-spacing:.3px;color:var(--omex-red-deep)}
.po-day.noaff .aff{color:var(--warn)}
/* Table « Heures ventilées par affaire » — bloc SÉPARÉ sous « Heures & majorations » */
.po-table tr.tot td{font-weight:800;border-top:2px solid var(--omex-surface-brd);background:var(--omex-surface-2)}
.po-table tr.naff td{background:var(--warn-bg)}
.po-table tr.naff td:first-child{border-left:3px solid var(--warn);font-weight:800}
.po-table td .prov{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--warn);white-space:nowrap}
.po-table td .ent{font-size:11px;color:var(--omex-ink-2)}
/* Détail par personne × période : replié par défaut (l'agrégat par affaire se lit d'abord) */
.po-detail{margin-top:10px}
.po-detail>summary{cursor:pointer;display:flex;align-items:center;min-height:44px;font-size:12px;font-weight:700;color:var(--omex-red-deep);padding:0 2px}
.po-detail>summary:focus-visible{outline:2px solid var(--omex-red);outline-offset:2px;border-radius:6px}
/* =========================================================================
   RECETTE 11/08 — corrections d'usage (D2/D4/D6/D7/D13). Toujours des TOKENS, jamais un hex en dur ;
   aucun style inline dans poste.html.
   ========================================================================= */
/* D7 — table large (12/13 colonnes) : en-tête ET 1re colonne COLLANTS. Sans ça, on fait défiler
   jusqu'à « J astreinte » sans plus savoir de quelle affaire ni de quelle colonne il s'agit. Même
   mécanique que .ms-scroll .ms-table thead th et .ms-table th.rowlbl, déjà en place dans ce produit. */
.po-hwrap.po-sticky{max-height:min(70vh,560px)}
.po-hwrap.po-sticky .po-table thead th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--omex-hairline)}
.po-hwrap.po-sticky .po-table thead th:first-child{left:0;z-index:3}
.po-hwrap.po-sticky .po-table tbody td:first-child{position:sticky;left:0;z-index:1;background:var(--omex-surface);box-shadow:1px 0 0 var(--omex-hairline)}
.po-hwrap.po-sticky .po-table tbody tr:hover td:first-child{background:var(--omex-red-soft)}
.po-hwrap.po-sticky .po-table tr.naff td:first-child{background:var(--warn-bg)}
.po-hwrap.po-sticky .po-table tr.tot td:first-child{background:var(--omex-surface-2)}
/* D4 — aperçu LECTURE SEULE : visuellement distinct de la consolidation, qui elle engage (trait
   pointillé rouge = « on regarde », bandeau plein = « on a agi »). */
.po-apercu{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.5;color:var(--omex-ink);background:var(--omex-surface-2);border:1px dashed var(--omex-red);border-radius:10px;padding:11px 14px;margin-bottom:12px}
.po-apercu svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--omex-red-deep)}
.po-apercu b{font-weight:800}
/* D6 — le préventeur voit POURQUOI son relevé lui revient (gravité : --alert, comme un butoir). */
.po-renvoi{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.5;color:var(--omex-ink);background:var(--alert-bg);border:1px solid var(--alert);border-radius:10px;padding:11px 14px;margin-bottom:14px}
.po-renvoi svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--alert)}
.po-renvoi b{font-weight:800}
/* D6 — saisie du motif par le responsable, dans la ligne du relevé concerné. */
.po-motif{margin-top:10px;padding:12px 14px;border:1px solid var(--omex-surface-brd);border-left:3px solid var(--alert);border-radius:10px;background:var(--omex-surface-2)}
.po-motif .po-actions{margin-top:10px;padding-top:10px}
.po-motif .po-hint{margin-top:8px}
/* D2 — précision sous la liste d'erreurs du bloc Affaire (pourquoi le décompte n'est pas affiché). */
.po-err-sub{margin-top:6px;font-size:12px;font-weight:400;opacity:.9}
/* D1 — un bouton désactivé doit SE VOIR désactivé (« + Ajouter une période » quand le mois est plein). */
.po-btn[disabled]{opacity:.5;cursor:not-allowed}
.po-btn[disabled]:hover{background:var(--omex-red)}
.po-btn.ghost[disabled]:hover{background:var(--omex-surface-2);border-color:var(--omex-surface-brd)}
/* =========================================================================
   Passe TÉLÉPHONE (phone-grade) — cibles tactiles ≥44px, champs ≥16px (anti-zoom iOS),
   actions pleine largeur. Ne touche ni le thème ni le desktop.
   ========================================================================= */
@media (max-width:600px){
  .po-wrap{padding:16px 14px calc(48px + env(safe-area-inset-bottom))}
  .po-h1{font-size:19px}
  .po-card{padding:16px}
  .po-login{margin-top:4vh}
  .po-field input{font-size:16px;padding:12px 14px}          /* ≥16px : bloque le zoom auto iOS */
  .po-btn{min-height:44px}
  .po-btn.sm{min-height:42px;font-size:14px;padding:10px 14px}
  .po-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .po-day{padding:10px 11px}
  .po-day select{font-size:16px;min-height:44px;padding:10px 12px}  /* doigt + anti-zoom */
  .po-regfield select{font-size:16px;min-height:44px;max-width:none}
  .po-monthsel select{font-size:16px;min-height:44px}
  .po-vitem{flex-direction:column;align-items:stretch}
  .po-vhead{justify-content:space-between}
  .po-vact{width:100%}
  .po-vact .po-btn{flex:1 1 auto}
  /* Clé d'affaire : une période = une carte empilée. Les champs héritent de .po-field input (16px) et
     de .po-regfield select (16px / 44px) ci-dessus — aucune règle mobile dupliquée. */
  /* ⚠ En colonne, `align-items` pilote l'axe HORIZONTAL et `flex-basis` la HAUTEUR : sans ces deux
     remises à plat, les champs se dimensionnent sur leur contenu et débordent de l'écran. */
  .po-affaire-row{flex-direction:column;align-items:stretch}
  .po-affaire-row .po-cle,.po-affaire-row .po-nav,.po-affaire-row .po-regfield{flex:0 0 auto;width:100%}
  .po-affaire-row .po-regfield select{max-width:none;width:100%}
  .po-affaire-del{width:100%}
  .po-affaire-add{width:100%}
  .bu-grid{grid-template-columns:1fr}
}
/* =========================================================================
   LE BUREAU — sélecteur de bureau (front door). Tuiles cliquables = bureaux vivants.
   ========================================================================= */
.bu-groupe{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--omex-ink-2);margin:22px 0 10px}
/* ⚠ Meme correction que .soc-grid, et pour une raison qu'il faut connaitre.
   Cette grille AVAIT deja son rattrapage telephone — `.bu-grid{grid-template-
   columns:1fr}` dans le @media (max-width:600px) une trentaine de lignes plus
   haut. Il n'a jamais servi : a specificite egale, c'est la DERNIERE regle
   ecrite qui gagne, et celle-ci vient apres. Un rattrapage place avant la
   regle qu'il corrige est pire qu'absent : on croit le sujet traite.
   Le `min()` ne depend pas de l'ordre des regles, et regle les deux cas. */
.bu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:12px}
.bu-card{display:flex;align-items:flex-start;gap:14px;background:var(--omex-surface);border:1px solid var(--omex-surface-brd);border-left:3px solid var(--omex-hairline);border-radius:12px;padding:15px 16px;text-decoration:none;color:inherit}
.bu-card[aria-disabled=true]{opacity:.6}
.bu-card.live{border-left-color:var(--omex-red);cursor:pointer}
.bu-card.live:hover{background:var(--omex-red-soft);border-color:var(--omex-red)}
.bu-card.live:focus-visible{outline:2px solid var(--omex-red);outline-offset:2px}
.bu-ico{flex:0 0 auto;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--omex-surface-2);color:var(--omex-ink-2)}
.bu-card.live .bu-ico{color:var(--omex-red-deep);background:var(--omex-red-soft)}
.bu-ico svg{width:22px;height:22px}
.bu-body{flex:1 1 auto;min-width:0}
.bu-titre{font-size:15px;font-weight:800;color:var(--omex-ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.bu-remplit{font-size:13px;color:var(--omex-ink);line-height:1.45}
.bu-cible{font-size:12px;color:var(--omex-ink-2);margin-top:4px}
.bu-go{flex:0 0 auto;color:var(--omex-red);align-self:center}
.bu-go svg{width:18px;height:18px}
.bu-tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;border-radius:20px;border:1px solid var(--omex-surface-brd)}
.bu-tag.ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok)}
.bu-tag.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn)}
.bu-tag.muted{color:var(--omex-ink-2);background:var(--omex-surface-2)}
/* Bouton retour « ← Bureaux » dans le bandeau d'un bureau (navigation en fenêtre d'app) */
.po-home{margin-left:6px;text-decoration:none;white-space:nowrap}