/* meumo - Feuille de styles de l'application. Les jetons de couleur des deux
 * themes (clair, sombre) et la fondation visuelle sont dans web/meumo.css,
 * charge apres ce fichier. */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* ===================== Motion pass ===================== */
/* Vitesses et courbes : rapides (150-250ms), easing "physique" a la macOS. */
:root {
  --m-vite: 120ms;
  --m-court: 180ms;
  --m-normal: 240ms;
  --m-ease: cubic-bezier(.2, .8, .2, 1);
  --m-spring: cubic-bezier(.34, 1.3, .5, 1);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Animations desactivees par l'utilisateur (Profil > Apparence > Affichage) */
.mx-sans-animations *, .mx-sans-animations *::before, .mx-sans-animations *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  animation-delay: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
/* Panneaux pliables : le contenu s'ouvre en glissant */
details[open] > :not(summary) { animation: m-status var(--m-court) var(--m-ease); }
/* Blocs de l'accueil : apparition echelonnee, tres courte */
.acc-bloc { animation: m-status var(--m-normal) var(--m-ease) backwards; }
.acc-bloc:nth-child(2) { animation-delay: 40ms; } .acc-bloc:nth-child(3) { animation-delay: 80ms; }
.acc-bloc:nth-child(4) { animation-delay: 120ms; } .acc-bloc:nth-child(n+5) { animation-delay: 160ms; }
/* Feedback bouton : enfoncement immediat au clic */
button { transition: transform var(--m-vite) var(--m-ease), background var(--m-vite), box-shadow var(--m-vite), opacity var(--m-vite); }
button:active { transform: scale(.97); }
button.primary:active { transform: scale(.96); }
/* Etat occupe : le bouton montre qu'il travaille (spinner + libelle) */
button.occupe { position: relative; color: transparent !important; pointer-events: none; }
button.occupe::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: m-tourne .7s linear infinite;
}
button.occupe.ghost::after { border-color: var(--border); border-top-color: var(--primary); }
@keyframes m-tourne { to { transform: rotate(360deg); } }
/* Ouverture modale : fond en fondu + carte qui zoome depuis 96% (sens d'origine) */
.modal { animation: m-fondu var(--m-court) var(--m-ease); }
.modal > .modal-card, .modal > .tw-card { animation: m-carte var(--m-normal) var(--m-spring); }
@keyframes m-fondu { from { opacity: 0; } }
@keyframes m-carte { from { opacity: 0; transform: scale(.96) translateY(8px); } }
/* Sous-fenetre de champ du wizard : zoom leger + fondu */
.tw-champ-card { animation: m-carte var(--m-normal) var(--m-spring); }
/* Panneau droit du mode Connecter : coulisse depuis son bord */
.tw-zone-droite { animation: m-coulisse var(--m-normal) var(--m-ease); }
@keyframes m-coulisse { from { opacity: 0; transform: translateX(24px); } }
/* Carte elargie du mode Connecter : easing macOS */
.tw-card { transition: min-width var(--m-normal) var(--m-ease), transform var(--m-normal) var(--m-ease); }
/* Messages de status : apparition en fondu + leger glissement vers le haut */
.status-msg { animation: m-status var(--m-court) var(--m-ease); }
#mindmap-status { animation: m-status var(--m-court) var(--m-ease); }
@keyframes m-status { from { opacity: 0; transform: translateY(4px); } }
/* Vues (onglets) : fondu discret au changement */
.view { animation: m-vue var(--m-court) var(--m-ease); }
@keyframes m-vue { from { opacity: 0; transform: translateY(6px); } }
/* Lignes de listes : retour visuel au survol deja present, on ajoute la fluidite */
#mm-tables-list li, .tree li, .dossier-item, .param-nav li { transition: background var(--m-vite) var(--m-ease); }
/* Toast/confirmation : succes pulse une fois */
.reussi { animation: m-pulse var(--m-normal) var(--m-ease); }
@keyframes m-pulse { 50% { transform: scale(1.05); } }

body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); }
.hidden { display: none !important; }
button { cursor: pointer; border: 1px solid var(--border); background: var(--panel); padding: 6px 12px; border-radius: 6px; font-size: 13px; }
button.primary { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; border-color: var(--primary); }
button.primary:hover { background: var(--primary-hover); }
button.ghost { background: transparent; color: var(--text); }
button.ghost:hover { background: var(--hover); color: var(--text); }
button.ghost.small, button.ghost.mini { color: var(--text); }
button.ghost.danger { color: var(--danger); }
input, select, textarea { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; width: 100%; background: var(--panel); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--primary); }
input[type="file"] { color: var(--muted); background: transparent; }
input[type="range"] { accent-color: var(--primary); padding: 0; background: transparent; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }

/* Nom « meumo » : Quicksand 700 (installee avec meumo dans un prochain lot),
   a defaut les polices arrondies du systeme. */
:root { --police-marque: 'Quicksand', 'Nunito', 'Varela Round', 'Segoe UI Rounded', 'Arial Rounded MT Bold', var(--font-stack, sans-serif); }

/* Login */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--gradient); }
.login-card { background: var(--panel); padding: 32px; border-radius: 12px; width: 380px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
/* La vache qui salue et le nom, en minuscules (lisibles sur tous les thèmes) */
.login-logo { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 4px; }
.login-logo img { display: block; width: 112px; height: 112px; flex: 0 0 auto; }
.login-nom { font-family: var(--police-marque); font-weight: 700; font-size: 44px; line-height: 1; color: var(--text); letter-spacing: .5px; }
.login-sub { color: var(--muted); font-size: 13px; margin: 4px 0 20px; }
#login-mode-toggle { display: flex; gap: 4px; margin-bottom: 16px; }
.login-souvenir { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; font-size: 13px; margin: 4px 0 8px; cursor: pointer; }
.login-souvenir input[type="checkbox"] { width: auto; order: -1; }
.tab { flex: 1; background: var(--hover); border: none; }
.tab.active { background: var(--primary-plein); color: var(--sur-principal); }
.form { display: none; flex-direction: column; gap: 12px; }
.form.active { display: flex; }
.form label { font-size: 12px; }
.form .regles-mdp { margin-top: -8px; }
.form button { margin-top: 8px; padding: 10px; }
.error { color: var(--danger); font-size: 12px; min-height: 16px; }

/* App */
.topbar { display: flex; align-items: center; gap: 16px; background: var(--gradient); color: #fff; padding: 10px 20px; }
.brand { font-family: var(--police-marque); font-weight: 700; font-size: 20px; letter-spacing: .3px; display: flex; align-items: center; gap: 8px; }
.brand-logo { height: 32px; width: 32px; display: block; flex: 0 0 auto; }
.nav { display: flex; gap: 6px; flex: 1; }
.nav-btn { background: transparent; color: var(--sidebar-text); border: none; padding: 8px 14px; }
.nav-btn:hover { background: var(--sidebar-hover); color: #fff; }
.nav-btn.active { background: var(--primary-plein); color: var(--sur-principal); border-radius: 6px; }
.user-area { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sidebar-text); }
.user-area button { color: var(--sidebar-text); background: transparent; border: 1px solid var(--sidebar-border); }
.badge { background: var(--primary-plein); color: var(--sur-principal); border-radius: 10px; padding: 2px 8px; font-size: 12px; }

.search-bar { display: flex; gap: 10px; padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--border); }
.search-bar input { max-width: 480px; flex: 1; }

/* Filtres avancés */
.filter-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin: 10px 20px; }
.filter-panel.hidden { display: none; }
.filter-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.filter-row label { flex: 1; min-width: 140px; }
.filter-row input[type="text"], .filter-row input[type="date"] { flex: 1; min-width: 140px; }
.filter-row select { flex: 1; min-width: 140px; }

.content { padding: 16px 20px; }
.view { display: none; }
.view.active { display: block; }
/* ----- Disposition generale : bandeau d'onglets et entetes toujours visibles ----- */
html, body { height: 100%; }
body { display: flex; flex-direction: column; overflow: hidden; }
.topbar { flex: none; }
#app-view.app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
#app-view.app.hidden { display: none; }
.content { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.view.active { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.view.active.view-scrollable { overflow: hidden; }
/* Vues a zones fixes : la zone de contenu defile, rien n'est coupe. */
.view.active.view-scrollable > .prod-panneau:not(.hidden),
.view.active.view-scrollable > #pil-espace-ressources, .view.active.view-scrollable > #pil-espace-charge,
.view.active.view-scrollable > #pil-espace-projets,
.view.active.view-scrollable > #eq-espace-personnes, .view.active.view-scrollable > #eq-espace-absences,
.view.active.view-scrollable > #eq-espace-temps,
.view.active.view-scrollable > #cdc-contenu, .view.active.view-scrollable > #ql-contenu { flex: 1 1 auto; min-height: 0; overflow: auto; }
.view-tete { flex: none; }
.table-scroll-wrap { flex: 1; min-height: 0; overflow: auto; }
/* Entetes et ligne de filtres collantes pour tous les tableaux meumo */
table.data-table.table-sticky-head { overflow: visible; }
.table-sticky-head thead th { position: sticky; background: var(--hover); z-index: 3; }
.table-sticky-head thead tr:first-child th { top: 0; position: sticky; z-index: 4; }
.table-sticky-head thead tr.filtres-colonnes th { top: var(--th-titres-h, 32px); background: var(--panel); padding: 2px 6px; z-index: 3; }
.table-sticky-head thead tr:not(.filtres-colonnes) th { background: var(--hover); border-bottom: 1px solid var(--border); }
.table-sticky-head thead tr.filtres-colonnes input { min-width: 60px; padding: 3px 6px; font-size: 12px; }

/* Fichiers */
#view-fichiers { display: none; }
#view-fichiers.active { display: flex; gap: 16px; flex: 1; min-height: 0; }
.sidebar { width: 240px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px; height: fit-content; }
.sidebar h3 { font-size: 13px; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; }
/* Le nom « meumo » reste en minuscules, même dans un titre en capitales */
.sidebar h3.nom-marque { text-transform: none; }
.tree { list-style: none; }
.tree li { padding: 5px 8px; cursor: pointer; border-radius: 4px; font-size: 13px; }
.tree li:hover { background: var(--hover); }
.tree li.active { background: var(--selection, var(--primary)); color: var(--text); font-weight: 600; }
.main-area { flex: 1; }
.toolbar { margin-bottom: 10px; font-weight: 600; font-size: 14px; }

.data-table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.data-table th, .data-table td { padding: 8px 10px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--border); }
.data-table th { background: var(--hover); font-weight: 600; font-size: 12px; text-transform: uppercase; color: var(--muted); }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: var(--hover); }
.empty { padding: 20px; color: var(--muted); text-align: center; }

/* Dashboard */
.kpi-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi-card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
.kpi-card .kpi-label { font-size: 12px; color: var(--muted); text-transform: uppercase; }
.kpi-card .kpi-value { font-size: 24px; font-weight: 700; margin-top: 4px; }
.dashboard-tabs { display: flex; gap: 16px; margin-bottom: 20px; }
.dtab { flex: 1; }

/* BOM */
/* ----- Nomenclatures : carte de construction BOM ----- */
.bom-builder { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.bom-builder-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bom-builder-tete h3 { margin: 0; }
.bom-builder-aide { font-size: 12px; color: var(--muted); }
.bom-builder-row { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 6px; }
.bom-builder-row label { font-size: 12px; color: var(--muted); }
.bom-builder-ligne { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.bom-builder-ligne .bom-ligne-ref { flex: 1; min-width: 140px; }
.bom-qte-grp { display: inline-flex; align-items: center; gap: 4px; }
.bom-qte-grp .bom-ligne-qte { width: 54px; text-align: center; }
.bom-builder-ligne .bom-ligne-repere { width: 90px; flex: 0 1 90px; min-width: 60px; }
.bom-builder-ligne { flex-wrap: wrap; }
.bom-builder-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.bom-builder-actions .primary { margin-left: auto; }
.bom-node { padding: 5px 0; font-size: 13px; border-bottom: 1px dashed var(--border); }
.bom-node .lvl { display: inline-block; width: 30px; color: var(--muted); }
.bom-node .ref { font-weight: 600; }
.bom-node .qte { color: var(--primary-texte); margin-left: 12px; }

/* Modales */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-card { background: var(--panel); border-radius: 10px; width: 600px; max-width: 92vw; max-height: 88vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal-header h2 { font-size: 16px; }
.modal-body { padding: 18px; }
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.meta-grid label { font-size: 12px; }
.fiche-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.status-msg { margin-top: 10px; font-size: 13px; min-height: 18px; color: var(--ok); }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.inline-form label { min-width: 120px; }
.notif-badge { display: inline-block; background: color-mix(in srgb, var(--danger) 70%, #000); color: #fff; border-radius: 10px; font-size: 12px; padding: 1px 5px; margin-left: 2px; font-weight: bold; }
.notif-badge.hidden { display: none; }
#notif-list { margin-top: 10px; max-height: 380px; overflow-y: auto; }
.notif-item { padding: 10px 8px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.notif-item.non-lue { background: color-mix(in srgb, var(--principal) 12%, transparent); }
.notif-item .notif-entete { display: flex; gap: 10px; cursor: pointer; align-items: flex-start; }
.notif-item .notif-icone { font-size: 20px; line-height: 1; margin-top: 2px; }
.notif-item .notif-corps { flex: 1; min-width: 0; }
.notif-item .notif-titre { font-size: 13px; font-weight: 600; }
.notif-item.non-lue .notif-titre { font-weight: 700; }
.notif-item .notif-message { font-size: 12px; color: var(--text); margin-top: 2px; white-space: pre-wrap; }
.notif-item .notif-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.notif-item .notif-date { font-size: 12px; color: var(--muted); }
.notif-item .notif-actions { display: flex; gap: 6px; padding-left: 34px; }
.notif-reporter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; margin: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.notif-reporter input[type="datetime-local"] { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-elev, var(--bg)); color: var(--text); }
.notif-report-boutons { display: flex; gap: 6px; margin-left: auto; }
.notif-pref-row { display: flex; gap: 10px; align-items: center; padding: 4px 0; }
.tag { display: inline-block; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-texte); border-radius: 8px; padding: 1px 6px; font-size: 12px; margin-right: 3px; }
.tag.tag-danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
button.mini { padding: 0 5px; font-size: 12px; line-height: 1.4; margin-left: 2px; }
.muted { color: var(--muted); }
.notif-pref-row label { min-width: 120px; }
/* Croix de suppression par notification (remplace le bouton Supprimer) */
.notif-entete { position: relative; padding-right: 26px; }
.notif-croix { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: none; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; border-radius: 4px; }
.notif-croix:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
/* Popup de notification (coin bas droit, 5 s, cliquable) */
.mx-notif-pop { position: fixed; bottom: 18px; right: 18px; max-width: 340px; display: flex; gap: 10px; align-items: flex-start; background: var(--panel, #fff); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 10px; padding: 12px 30px 12px 14px; font-size: 13px; box-shadow: 0 8px 28px rgba(0,0,0,.28); z-index: 90; cursor: pointer; animation: m-vue var(--m-court) var(--m-ease); }
.mx-notif-pop-icone { font-size: 20px; line-height: 1; }
.mx-notif-pop-corps { flex: 1; min-width: 0; }
.mx-notif-pop-titre { font-weight: 700; }
.mx-notif-pop-message { color: var(--muted); margin-top: 2px; }
.mx-notif-pop-croix { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border: none; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; border-radius: 4px; }
.mx-notif-pop-croix:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
/* Croix de fermeture du toast generique */
/* Croix de fermeture du toast generique */
.mx-toast { cursor: pointer; }
.mx-toast-croix { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 18px; height: 18px; border: none; background: transparent; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; }
.mx-toast-croix:hover { color: var(--danger); }
/* Selection rapide des preferences de notification (comme la matrice de droits) */
#notif-prefs-table th.np-toggle-col { cursor: pointer; user-select: none; }
#notif-prefs-table th.np-toggle-col:hover { background: color-mix(in srgb, var(--primary) 12%, var(--hover)); color: var(--text); }
#notif-prefs-table td.np-toggle-ligne { cursor: pointer; user-select: none; }
#notif-prefs-table td.np-toggle-ligne:hover { color: var(--primary-texte); }
#notif-prefs-table td.np-on { background: color-mix(in srgb, var(--primary) 8%, transparent); }.notif-section { border: 1px solid var(--border); border-radius: 8px; margin: 8px 0; background: var(--bg-elev, var(--bg)); }.notif-section > summary { cursor: pointer; font-weight: 600; padding: 8px 12px; user-select: none; }.notif-section[open] > summary { border-bottom: 1px solid var(--border); }.notif-prefs-bloc { border: 1px solid var(--border); border-radius: 8px; margin-top: 10px; background: var(--bg-elev, var(--bg)); }.notif-prefs-bloc > summary { cursor: pointer; font-weight: 600; padding: 8px 12px; user-select: none; }.notif-prefs-bloc[open] > summary { border-bottom: 1px solid var(--border); }

/* ----- Info-bulles "i" ----- */
.info-bulle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--border, #8a8f98);
  color: var(--bg, #fff);
  font-size: 12px;
  font-weight: bold;
  cursor: help;
  position: relative;
  vertical-align: middle;
}
.info-bulle .bulle-texte {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 130%;
  z-index: 300;
  min-width: 220px;
  max-width: 280px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--text, #222);
  color: var(--bg, #fff);
  font-size: 12px;
  font-weight: normal;
  text-align: left;
  line-height: 1.35;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.info-bulle .bulle-texte::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--text, #222);
}
.info-bulle:hover .bulle-texte { display: block; }

/* ----- Sidebar fichiers ----- */
.sidebar-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.sidebar-actions:first-child h3 { margin-top: 0; }
.small { font-size: 12px; padding: 2px 8px; }
#dossiers-tree ul { margin-left: 7px; padding-left: 6px; list-style: none; border-left: 1px solid var(--border, #ccc); }
#dossiers-tree .dossier-item { padding: 2px 0; cursor: pointer; }
/* Dossier : l'icone « Parcourir » de meumo (web/icones.js), brun-gris. */
#dossiers-tree .dossier-item::before { content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-inline-end: .3em; vertical-align: -.2em; background: var(--brun); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ----- Onglet Articles (style tkinter) ----- */
.articles-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; height: auto; }
.ribbon-tabs { display: flex; gap: 2px; padding: 6px 12px 0; background: var(--panel); border-bottom: 1px solid var(--border); }
.ribbon-tab { border: 1px solid transparent; border-bottom: none; background: transparent; padding: 6px 14px; font-size: 13px; cursor: pointer; border-radius: 6px 6px 0 0; color: var(--muted); }
.ribbon-tab.active { background: var(--bg); border-color: var(--border); color: var(--text); font-weight: 600; }
.ribbon-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--border); }
.articles-body { display: flex; flex: 1; min-height: 0; }
.articles-body .sidebar { height: auto; overflow-y: auto; }
.articles-main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 0 0 0 12px; }
.articles-main-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; }
.articles-main-toolbar .ghost.active { background: var(--principal); color: var(--sur-principal); }
#files-icons { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; align-content: start; padding: 8px 4px; }
/* Affichage par tranches des grandes listes : « Afficher la suite » en bas
   (sur toute la largeur de la grille de vignettes ou du tableau). */
.mx-suite { grid-column: 1 / -1; text-align: center; padding: 8px; }
tr.mx-suite td { text-align: center; padding: 8px; color: var(--muted); }
/* Recherche limitee aux N premiers resultats */
.recherche-limite { display: block; font-size: 12px; font-weight: normal; color: var(--muted); }
#files-icons.list-mode { display: flex; flex-direction: column; gap: 4px; grid-template-columns: none; align-content: stretch; }
#files-icons.list-mode .file-row { width: 100%; margin: 0; }
.file-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px; cursor: pointer; background: var(--panel); text-align: center; transition: box-shadow .15s; }
.file-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.file-card.selected { border-color: var(--principal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--principal) 25%, transparent); }
.file-card .thumb { width: 100%; height: 90px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--muted); }
.file-card .thumb img { max-width: 100%; max-height: 90px; }
/* Vignette en preparation (traitement en tache de fond apres l'import) */
.file-card .thumb-attente { display: flex; opacity: .55; animation: mx-thumb-attente 1.6s ease-in-out infinite; }
@keyframes mx-thumb-attente { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .file-card .thumb-attente { animation: none; } }
.file-card .fc-ref { font-weight: 600; font-size: 12px; }
.file-card .fc-nom { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card .fc-lock { font-size: 12px; }
.detail-view { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); overflow: hidden; }
.articles-bottom { height: 32%; min-height: 160px; display: flex; flex-direction: column; border-top: 2px solid var(--border); background: var(--panel); }
.articles-bottom .search-bar { padding: 8px 12px; }
.articles-bottom .filter-panel { margin: 0 12px 8px; }
.list-area { flex: 1; overflow-y: auto; padding: 0 12px 8px; }


/* ----- Carte BDD (galaxie de tables) ----- */
.mindmap-layout { display: flex; gap: 12px; align-items: stretch; }
/* Panneau lateral unique : legende AU-DESSUS du listing, ranges sous la
   nav "TABLES / Carte BDD / Statuts / Metadonnees", alignes a droite et a
   gauche avec elle ; largeur commune pilotee par le sash. */
.mm-side-panel { width: 250px; flex: 0 0 250px; min-width: 160px; max-width: 480px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 190px); min-height: 0; }
.mm-legend-panel { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 8px 10px; display: flex; flex-direction: column; }
.mm-legend-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mm-legend-head h4 { font-size: 12px; text-transform: uppercase; color: var(--muted); margin: 0; }
.mm-legend-head button { min-width: 26px; padding: 1px 6px; font-size: 12px; }
.mm-legend-panel .muted { font-size: 12px; text-transform: none; }
.mm-tables-panel { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 10px 12px; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 120px; overflow: hidden; }
.mm-legend-panel { flex: 0 0 auto; }
.mm-tables-panel h4 { font-size: 12px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.mm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12px; color: var(--text); margin-bottom: 4px; }
.mm-legend-dom { border-top: 1px dashed var(--border); padding-top: 6px; margin-top: 2px; }
.mm-legend-btn { cursor: pointer; user-select: none; padding: 1px 4px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.mm-legend-btn:hover { background: var(--hover); }
.mm-legend-btn input { accent-color: var(--primary); margin: 0; }
.mm-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.mm-filt-bar { display: flex; gap: 4px; align-self: center; }
.mm-filt-btn.active { background: var(--primary-plein); color: var(--sur-principal); border-color: var(--primary); }
.mm-sort-bar { display: flex; gap: 4px; margin-bottom: 8px; align-items: center; }
.mm-sort-bar h4 { margin: 0; }
.mm-sort-bar select { flex: 1; font-size: 12px; padding: 3px 6px; }
.mm-sort-bar button { min-width: 34px; padding: 3px 8px; }
.mm-leg-swatch { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.mm-leg-import { background: var(--imp); }
.mm-leg-export { background: var(--exp); }
.mm-leg-iso { background: var(--muted); height: 10px; width: 10px; border-radius: 2px; }
#mm-tables-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#mm-tables-list li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 12.5px; font-weight: 600; }
#mm-tables-list li:hover { background: var(--hover); }
#mm-tables-list li.mm-active { background: var(--primary-plein); color: var(--sur-principal); }
#mm-tables-list li.mm-iso { color: var(--muted); font-weight: 400; }
#mm-tables-list li.mm-hidden-table { display: none; }
.mm-badge-nb { margin-left: auto; font-size: 12px; font-weight: 700; padding: 0 6px; border-radius: 8px; background: var(--hover); color: var(--text); }
#mm-tables-list li.mm-active .mm-badge-nb { background: rgba(255,255,255,.25); color: #fff; }
.mm-cnt-imp { color: var(--imp); }
.mm-cnt-exp { color: var(--exp); }
#mm-tables-list li.mm-active .mm-cnt-imp, #mm-tables-list li.mm-active .mm-cnt-exp { color: #fff; }
.mindmap-canvas-wrap { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; }
#mm-sash-listing { flex: 0 0 6px; }
#mm-sash-detail { width: 100%; }
#mindmap-wrap { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); height: 560px; cursor: grab; }
#mindmap-wrap.mm-panning { cursor: grabbing; }
#mindmap-svg { display: block; transform-origin: 0 0; }
.mm-zoom-bar { position: absolute; bottom: 10px; right: 12px; display: flex; gap: 4px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; font-size: 12px; }
.mm-zoom-bar button { min-width: 30px; padding: 2px 8px; }
#mm-zoom-label { min-width: 42px; text-align: center; color: var(--muted); font-weight: 700; }
.mm-import-edge { stroke: var(--imp) !important; opacity: .95 !important; }
.mm-export-edge { stroke: var(--exp) !important; opacity: .95 !important; }
.mm-box-domain { }
.mm-node .mm-domain-tag { font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; fill: #fff; }
.mm-focus-pair { stroke: var(--lock) !important; stroke-width: 2.5 !important; }
path.mm-import-edge { stroke: var(--imp) !important; opacity: .95 !important; }
path.mm-export-edge { stroke: var(--exp) !important; opacity: .95 !important; }
/* Légende « Importe » + « Exporte » cochées : couleur neutre, sans flèche. */
path.mm-edge-neutre { stroke: var(--muted) !important; opacity: .8 !important; }
.mm-arrow { fill: var(--primary); }
.mm-arrow-imp { fill: var(--imp); }
.mm-arrow-exp { fill: var(--exp); }
.mm-arrow-ambre { fill: var(--lock); }
/* Masquage reel par les filtres de la legende (concordance graphe/listing) */
#mindmap-svg .mm-node.hidden, #mindmap-svg path.hidden, #mindmap-svg .mm-edge-label.hidden { display: none; }
/* Grille du modal Nouveau lien entre champs */
.lien-champ-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 8px 0 4px; }
.lien-champ-grid label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.lien-champ-grid select { font-size: 13px; padding: 5px 8px; }
/* Toolbar carte : groupes espacés */
.mm-toolbar { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.mm-tb-group { display: flex; gap: 6px; align-items: center; }
.mm-tb-search { gap: 8px; }
.mm-tb-search input[type="search"] { width: 240px; }
.mm-tb-search .mini { font-size: 12px; color: var(--muted); display: flex; gap: 4px; align-items: center; white-space: nowrap; }
#mindmap-search { max-width: 260px; align-self: center; }
.mm-box { fill: var(--panel); stroke: var(--border); stroke-width: 1.5; }
.mm-perso .mm-box { stroke-dasharray: none; stroke-width: 2; }
.mm-title { font-size: 13px; font-weight: 700; fill: var(--text); }
.mm-champ { font-size: 12px; fill: var(--muted, #666); }
.mm-champ-pk { font-weight: 700; fill: var(--text); }
.mm-champ-fk { fill: var(--primary); }
/* Coloration semantique des champs, pilotee par la legende de sens :
   importe = vert (--imp), exporte = bleu (--exp). La PK prime, puis la FK,
   puis la coloration import/export. */
.mm-champ.mm-champ-import { fill: var(--imp); font-weight: 600; }
.mm-champ.mm-champ-export { fill: var(--exp); font-weight: 600; }
/* La PK garde sa couleur (var(--text)) meme si importee/exportee : elle
   reste identifiable ; la FK prime sur la coloration import/export. */
.mm-champ-pk.mm-champ-import, .mm-champ-pk.mm-champ-export { font-weight: 800; }
.mm-champ-fk.mm-champ-import, .mm-champ-fk.mm-champ-export { font-weight: 700; }
/* Champ mis en avant par la selection d'une relation : meme couleur que la
   fleche selectionnee (ambre). */
.mm-champ.mm-champ-sel { fill: var(--lock) !important; font-weight: 800; }
.mm-more { font-style: italic; }
.mm-del { font-size: 14px; fill: var(--danger); font-weight: 700; }
/* Chevron de depliage et bouton Donnees : NEUTRES (pas de rouge, reserve a
 la suppression). Positionnes a distance du x pour eviter les clics rates. */
.mm-dep { font-size: 13px; fill: var(--muted, #666); font-weight: 700; }
.mm-dep:hover { fill: var(--primary); }
.mm-dat { font-size: 13px; fill: var(--muted, #666); font-weight: 700; }
.mm-dat:hover { fill: var(--primary); }
/* Poignee de redimensionnement d'une table (angle inferieur droit).
 pointer-events: all est requis : un fill transparent ne capte pas les
 evenements par defaut en SVG (visiblePainted ignore l'alpha 0). */
.mm-grip { fill: transparent; stroke: var(--muted, #94a3b8); stroke-width: 1; pointer-events: all; }
.mm-node:hover .mm-grip { fill: rgba(148, 163, 184, .25); }
.mm-fk { fill: none; stroke: var(--primary); stroke-width: 1.5; opacity: .55; transition: opacity .15s; }
.mm-lien { fill: none; stroke: var(--lock); stroke-width: 2; stroke-dasharray: 6 4; opacity: .7; }
.mm-arrow { fill: var(--primary); }
.mm-focus { opacity: 1 !important; stroke-width: 2.5 !important; }
.mm-node { transition: opacity .15s; }
.mm-node .mm-box { transition: stroke .15s; }
.mm-node.mm-focus .mm-box { stroke: var(--primary); stroke-width: 2.5; }
.mm-estompe { opacity: .16; }
.mm-minimap-wrap { position: absolute; top: 8px; right: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.08); overflow: hidden; z-index: 5; }
.mm-minimap-titre { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); padding: 2px 8px; cursor: move; user-select: none; border-bottom: 1px solid var(--border); }
.mm-minimap { display: block; width: 160px; height: 100px; cursor: pointer; }
.mm-minimap-grip { position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--border) 50%); }
.mm-minimap .mm-mm-nodes { fill: #b8c2ce; stroke: none; }
.mm-minimap .mm-mm-vue { fill: color-mix(in srgb, var(--principal) 12%, transparent); stroke: var(--primary); stroke-width: 1; }
.mm-dom-banner { position: absolute; top: 8px; left: 12px; display: flex; gap: 6px; font-size: 12px; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 3px 10px; pointer-events: none; }
.mm-dom-banner .mm-dom-item { display: inline-flex; gap: 4px; align-items: center; }
.mm-dom-banner .mm-leg-swatch { width: 14px; height: 3px; }
#mm-filt-reset { margin-top: 6px; font-size: 12px; padding: 3px 8px; width: 100%; }

/* ----- Wizard Nouvelle table ----- */
.tw-card { min-width: min(540px, 94vw); max-width: min(720px, 96vw); transition: min-width .2s; }
/* Mode Connecter : la carte s'elargit et le corps devient une grille deux
 colonnes (apercu a gauche, tables cibles a droite) : plus de debordement
 hors carte ni de chevauchement des boutons. */
.tw-card.tw-ouverte { min-width: min(980px, 94vw); max-width: min(1080px, 96vw); }
.tw-card.tw-ouverte .modal-body { display: block; }
.tw-card.tw-ouverte .modal-body > form { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "apercu droite" "submit submit"; gap: 18px; align-items: start; }
.tw-card.tw-ouverte form > .tw-zone-gauche-apercu { grid-area: apercu; min-height: 0; max-height: calc(88vh - 160px); overflow-y: auto; }
.tw-card.tw-ouverte form > .tw-zone-droite { grid-area: droite; max-height: calc(88vh - 160px); }
.tw-card.tw-ouverte form > .tw-submit { grid-area: submit; }
.tw-zone-gauche { display: flex; flex-direction: column; gap: 8px; }
.tw-zone-gauche h4 { margin: 8px 0 0; }
.tw-zone-droite { width: 400px; flex: 0 0 400px; padding: 10px 14px; border-left: 1px dashed var(--border); display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 62vh; }
.tw-zone-droite h4 { margin: 2px 0 0; }
#tw-recherche-table { width: 100%; }
#tw-select-table { width: 100%; }
#tw-apercu-cible { border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 8px; min-height: 60px; }
.tw-apercu-table { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); display: inline-block; min-width: 170px; }
.tw-apercu-titre { font-size: 12px; font-weight: 700; padding: 4px 8px; border-bottom: 1px solid var(--border); text-transform: uppercase; }
.tw-apercu-champ { font-size: 12px; padding: 2px 8px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.tw-apercu-champ.tw-actif { color: var(--text); font-weight: 600; background: var(--hover); }
.tw-liens ul { list-style: none; margin: 0; padding: 0; }
.tw-liens li { display: flex; gap: 6px; align-items: center; font-size: 12px; padding: 3px 6px; border-radius: 6px; background: var(--hover); margin-bottom: 4px; }
.tw-liens li button { margin-left: auto; }
.tw-actions { display: flex; gap: 8px; margin-top: 10px; }
.tw-actions-connect { display: flex; gap: 8px; margin-top: 8px; }
/* Controles temps reel du wizard : champ invalide (doublon / table existante) */
.tw-invalide { border-color: var(--danger) !important; background: color-mix(in srgb, var(--danger) 6%, var(--bg)); }
/* Aide dynamique du mode Connecter : decrit l'action attendue ou l'erreur. */
.tw-aide-dynamique { font-size: 12px; color: var(--muted); border-left: 3px solid var(--border); padding: 4px 8px; }
.tw-aide-dynamique.tw-aide-erreur { color: var(--danger); border-left-color: var(--danger); font-weight: 600; }
.tw-champ-info { color: var(--lock); font-size: 12px; }
/* Resume des connexions validees, affiche dans le formulaire apres "Valider" */
.tw-resume-connexions { border: 1px solid var(--primary); border-radius: 8px; background: color-mix(in srgb, var(--principal) 8%, transparent); padding: 8px 10px; font-size: 12.5px; }
.tw-resume-connexions ul { margin: 4px 0 6px; padding-left: 18px; }
.tw-submit { margin-top: 14px; display: flex; justify-content: flex-end; }
.tw-champ-modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.35); z-index: 10; }
.tw-champ-card { width: 340px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.tw-champ-card .modal-body { display: flex; flex-direction: column; gap: 8px; }/* Mode Connecter : la zone gauche est remplacee par l'apercu de la table en cours de creation (meme format que la table cible). */.tw-zone-gauche-apercu { justify-content: center; align-items: flex-start; min-height: 320px; }.tw-zone-gauche-apercu .tw-apercu-table { cursor: pointer; }.tw-zone-gauche-apercu .tw-apercu-champ:hover { color: var(--text); background: var(--hover); }.tw-zone-gauche-apercu .tw-apercu-champ.tw-actif { outline: 1px solid var(--primary); }
/* Verrouillage pendant la creation des connexions : seul le formulaire
 original est grise/desactive ; l'apercu de la nouvelle table (zone gauche en
 mode Connecter) et la zone cible restent pleinement lisibles et actifs. */
.tw-card.tw-verrou #tw-zone-gauche > :not(.tw-actions), .tw-card.tw-verrou .tw-submit, .tw-card.tw-verrou .modal-header { opacity: .45; filter: saturate(.4); pointer-events: none; }
.tw-card.tw-verrou button:disabled { opacity: .5; cursor: not-allowed; }
.tw-card.tw-verrou .tw-zone-gauche-apercu, .tw-card.tw-obscur .tw-zone-gauche-apercu, .tw-card.tw-verrou .tw-zone-droite { opacity: 1; filter: none; }
.tw-card.tw-obscur #tw-apercu-cible { background: var(--panel); border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--principal) 18%, transparent); }
.tw-card.tw-obscur .tw-apercu-table { border-color: var(--primary); background: var(--panel); box-shadow: 0 4px 18px rgba(0,0,0,.18); position: relative; z-index: 1; }
.tw-card.tw-obscur .tw-apercu-titre { color: var(--primary-texte); }
.champ-ligne { display: flex; gap: 6px; align-items: center; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 4px; background: var(--bg); }
.champ-ligne .ch-nom { font-weight: 600; }
.champ-ligne .ch-type { color: var(--muted); font-size: 12px; }
.champ-ligne .ch-badges { display: flex; gap: 4px; }
.champ-ligne .badge-pk { background: var(--primary-plein); color: var(--sur-principal); font-size: 12px; font-weight: 700; padding: 1px 5px; border-radius: 6px; }
.champ-ligne .badge-req { background: var(--muted); color: #fff; font-size: 12px; font-weight: 700; padding: 1px 5px; border-radius: 6px; }
.champ-ligne button { margin-left: auto; }
/* Selecteur visuel de themes (fiche profil) */
.mm-edge-label { font-size: 12px; fill: var(--muted); background: var(--panel); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; font-weight: 600; }
/* Panneau de detail de table */
.mindmap-detail { margin-top: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 12px 14px; max-height: 300px; overflow-y: auto; }
.mm-detail-titre { font-size: 15px; font-weight: 700; }
.mm-detail-libelle { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mm-detail-cols { display: flex; gap: 24px; margin-top: 10px; flex-wrap: wrap; }
.mm-detail-cols h4 { font-size: 12px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.mm-detail-cat { font-size: 12px; font-weight: 700; margin: 6px 0 4px; }
.mm-ligne { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 12.5px; }
.mm-champ-nom { font-weight: 600; }
.mm-type { color: var(--muted); font-size: 12px; margin-left: auto; }
.mm-badge { font-size: 12px; font-weight: 800; padding: 1px 5px; border-radius: 4px; }
.mm-badge.mm-pk { background: color-mix(in srgb, var(--lock) 15%, transparent); color: var(--lock); }
.mm-badge.mm-fkbadge { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary-texte); }
.mm-chip { display: inline-block; font-size: 12px; font-weight: 600; background: var(--hover); border: 1px solid var(--border); border-radius: 12px; padding: 2px 10px; margin: 2px 4px 2px 0; cursor: default; }
.mm-chip-lien { background: color-mix(in srgb, var(--lock) 15%, transparent); border-color: color-mix(in srgb, var(--lock) 45%, transparent); }
.mm-champ-trouve { fill: var(--lock) !important; font-weight: 800; }
.mm-cnt-champs { font-size: 12px; font-weight: 700; color: var(--lock); }
.mm-chip-imp { background: color-mix(in srgb, var(--imp) 15%, transparent); border-color: var(--imp); color: var(--imp); }
.mm-chip-exp { background: color-mix(in srgb, var(--exp) 15%, transparent); border-color: var(--exp); color: var(--exp); }
.mm-ligne-rel { background: color-mix(in srgb, var(--lock) 10%, transparent); border-radius: 6px; padding: 2px 6px; }
.mm-rel-fleche { color: var(--primary-texte); font-size: 18px; margin: 0 4px; }
.champ-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.champ-row input[type="text"] { flex: 1; }
.champ-row .mini { font-size: 12px; white-space: nowrap; }

/* ----- Sash (redimensionnement zones Articles) ----- */
.v-sash { height: 6px; cursor: ns-resize; background: transparent; flex: 0 0 6px; }
.v-sash:hover { background: var(--principal); }

/* ----- Fiche : etoile favori + split infos/apercu ----- */
.fiche-favori { font-size: 20px; line-height: 1; padding: 2px 8px; }
.detail-card { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; }
.detail-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 0 14px 14px; }
.detail-split { display: flex; gap: 14px; flex: 1; min-height: 0; }
.detail-split .meta-grid { flex: none; }
.fiche-apercu-zone { flex: 1.2; border: 1px solid var(--border); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: auto; background: var(--bg); }

/* ----- Colonnes triables ----- */
#files-table th.sortable { cursor: pointer; user-select: none; }
#files-table th.sortable:hover { background: var(--panel); }

/* ----- Dossiers favoris / arborescence ----- */
#dossiers-tree .dossier-item { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
#dossiers-tree .dossier-item.active { background: var(--selection, var(--primary)); color: var(--text); border-radius: 4px; font-weight: 600; }
#dossiers-tree .dossier-item .ghost.mini { border: none; background: transparent; font-size: 12px; cursor: pointer; }

/* ----- Navigation laterale (Reglages / Tables) ----- */
.param-layout { display: flex; gap: 16px; align-items: flex-start; }
.param-nav { width: 200px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.param-nav h3 { font-size: 13px; color: var(--muted); text-transform: uppercase; margin: 4px 0 8px; }
.param-nav ul { list-style: none; margin: 0; padding: 0; }
.param-nav li { padding: 8px 10px; cursor: pointer; border-radius: 6px; font-size: 13px; }
.param-nav li:hover { background: var(--hover); }
.param-nav li.active { background: var(--principal); color: var(--sur-principal); }
.param-content { flex: 1; min-width: 0; }

/* ----- Vue centrale mode liste ----- */
.file-row { display: grid; grid-template-columns: 36px 140px 1fr 70px 160px 90px; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); font-size: 13px; cursor: pointer; }
.file-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.file-row.selected { border-color: var(--principal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--principal) 25%, transparent); }
.file-row .fr-icone { font-size: 20px; }
.file-row .fr-ref { font-weight: 600; }
.file-row .fr-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----- Filtres par colonne (zone de details) ----- */
.filtres-colonnes th { padding: 2px 4px; }
.filtres-colonnes input { width: 90%; font-size: 12px; padding: 2px 6px; }

/* ----- Fiche : croix au-dessus, etoile a gauche de la reference ----- */
.detail-header { display: flex; align-items: center; gap: 8px; padding: 12px 48px 0 14px; flex: none; flex-wrap: wrap; position: relative; }
.detail-header .fiche-actions { margin: 0 0 0 12px; flex-wrap: wrap; }
.detail-header .fiche-actions button { white-space: nowrap; }
.fiche-ref { font-size: 13px; color: var(--muted); font-weight: 600; }
.detail-header .fiche-close { padding: 2px 10px; font-size: 16px; line-height: 1.2; position: absolute; top: 10px; right: 10px; }
.detail-header h2#fiche-title { flex: 1 1 160px; margin: 0; font-size: 17px; min-width: 0; overflow-wrap: anywhere; }

/* ----- Sash vertical ----- */
.h-sash { width: 6px; cursor: ew-resize; background: transparent; align-self: stretch; flex: 0 0 6px; }
.h-sash:hover { background: var(--principal); }
.detail-sash { margin: 0; }
.detail-split { gap: 0; }
.detail-split .meta-grid { padding-right: 8px; }

/* ----- Drag & drop ----- */
.drop-hover { outline: 2px dashed var(--principal); outline-offset: 2px; background: var(--principal-doux) !important; }
.tree li.drop-hover, ul.tree.drop-hover { border-radius: 4px; }

/* ----- Hierarchie projets/familles (modales) ----- */
.hier-item { padding: 2px 0; }
.hier-ligne { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-bottom: 1px solid var(--border); border-radius: 4px; }
.hier-ligne:hover { background: var(--hover); }
.hier-nom { font-weight: 600; min-width: 140px; }
.hier-desc { flex: 1; font-size: 12px; }
.hier-add { font-size: 14px; padding: 0 8px; }

/* ----- Zone de details : filtres par colonne + resizers ----- */
.filtres-colonnes th { padding: 2px 4px; background: var(--hover); }
.filtres-colonnes .filtre-col-wrap { display: block; }
.filtres-colonnes input { width: 100%; font-size: 12px; padding: 2px 6px; }
#files-table th { position: relative; white-space: nowrap; }
#files-table th.sortable { cursor: pointer; user-select: none; }
#files-table th.sortable:hover { background: var(--panel); }
#files-table th .col-resizer { position: absolute; right: -4px; top: 0; width: 8px; height: 100%; cursor: ew-resize; z-index: 3; }
#files-table th .col-resizer:hover { background: color-mix(in srgb, var(--principal) 35%, transparent); }
#files-table th.tri-asc::after { content: " \25B4"; color: var(--principal); }
#files-table th.tri-desc::after { content: " \25BE"; color: var(--principal); }

/* ----- Bulle selection metadonnees ----- */
.list-area { position: relative; }
.bulle-metas { position: absolute; top: 34px; left: auto; right: 12px; z-index: 50; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 10px 12px; max-height: 320px; overflow-y: auto; min-width: 240px; }
.bulle-metas .bulle-titre { font-size: 12px; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; color: var(--muted); }
.bulle-metas .bulle-ligne { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--text); padding: 2px 0; cursor: pointer; }
.bulle-metas .bulle-ligne input { width: auto; }

/* ----- Alignement zone de details : en-tetes / filtres / donnees ----- */
#files-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: visible; border-radius: 0; table-layout: fixed; }
#files-table col, .liste-centrale-table col { width: auto; }
.liste-centrale-table { table-layout: fixed; width: 100%; }
#files-table thead th { position: sticky; overflow: visible; background: var(--hover); z-index: 6; }
#files-table thead tr:first-child th { border-bottom: none; }
#files-table thead tr:first-child th { top: 0; z-index: 7; }
#files-table thead tr.filtres-colonnes th { border-top: none; padding: 2px 6px 6px; background: var(--panel); top: var(--th-titres-h-details, 32px); z-index: 6; }
#files-table thead tr.filtres-colonnes input { width: 100%; font-size: 12px; padding: 3px 6px; }
#files-table th .col-resizer { position: absolute; right: -4px; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 3; }
th.tri-asc, th.tri-desc { color: var(--primary-texte); }

/* ----- Champs lecture seule fiche ----- */
.champ-ro, input.champ-ro, select.champ-ro, textarea.champ-ro {
  background: var(--hover) !important;
  color: var(--muted);
}

/* ----- Bouton agrandir apercu ----- */
.fiche-apercu-zone { position: relative; }
.fiche-apercu-agrandir { position: absolute; top: 6px; right: 8px; z-index: 5; opacity: .6; background: var(--panel); }
.fiche-apercu-agrandir:hover { opacity: 1; }
.fiche-apercu-zone.apercu-agrandi { position: fixed; top: 70px; left: 60px; right: 16px; bottom: 16px; z-index: 60; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: auto; }

/* ----- Arborescence repliable ----- */
#dossiers-tree, #dossiers-tree ul { list-style: none; }
#dossiers-tree ul ul { padding-left: 10px; }
.dossier-item { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 6px; cursor: pointer; user-select: none; }
.dossier-item:hover { background: var(--hover); }
.dossier-item.active { background: var(--selection, var(--primary)); color: var(--text); font-weight: 600; }
.dossier-item.drop-hover { outline: 2px dashed var(--primary); }
.tree-fleche { display: inline-block; width: 14px; text-align: center; transition: transform .12s; cursor: pointer; color: var(--muted); }
.tree-fleche.ouvert { transform: rotate(90deg); }
.tree-fleche.invisible { visibility: hidden; }
.dossier-item .dossier-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dossier-fav { border: none; background: transparent; padding: 0 4px; opacity: .55; }
.dossier-fav:hover { opacity: 1; }
#etoile-dossier-courant { border: none; background: transparent; font-size: 16px; padding: 0 2px; }

/* ----- Hierarchie projets/familles ----- */
.hier-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hier-nom { font-weight: 600; min-width: 120px; }
.hier-desc-input { flex: 1 1 160px; min-width: 120px; max-width: 320px; font-size: 12px; padding: 3px 8px; }
/* Fenetre « Nouveau projet » : nom, description, puis options repliees. */
.projet-form { display: flex; flex-direction: column; gap: 10px; }
.projet-form > button[type=submit] { align-self: flex-start; }
.projet-options > summary, .projets-gestion > summary { cursor: pointer; color: var(--primary-texte); font-size: 13px; }
.projets-gestion { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 10px; }
@media (max-width: 500px) { .hier-nom { min-width: 0; flex: 1 1 100%; } }

/* ----- Zone morte a droite : la zone centrale occupe tout ----- */
.articles-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; height: auto; }
.content { padding-right: 8px; }

/* ----- Vue 3D (onglet nav) ----- */
/* ----- Favoris dossiers : sous-niveaux deployables ----- */
#favoris-dossiers-list ul { margin-left: 14px; padding-left: 4px; list-style: none; }
#favoris-dossiers-list .fav-dossier-item { display: flex; align-items: center; gap: 4px; padding: 2px 0; cursor: pointer; }
.fav-icone { display: inline-flex; align-items: center; flex: none; }
.fav-icone svg { display: block; }
#favoris-list { list-style: none; margin: 0; padding: 0; }
#favoris-list .fav-fichier-item { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }
#favoris-list .fav-fichier-item .fav-icone svg { width: 18px; height: 18px; }
#favoris-dossiers-list .fav-dossier-item:hover { background: var(--hover); border-radius: 4px; }
#favoris-dossiers-list .fav-dossier-item.active { background: var(--selection, var(--primary)); color: var(--text); border-radius: 4px; font-weight: 600; }
#favoris-dossiers-list .fav-dossier-item .dossier-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#favoris-dossiers-list .fav-dossier-item .ghost.mini { border: none; background: transparent; }

/* ----- Boutons arborescence : + et poubelle cote a cote ----- */
.sidebar-actions .sidebar-btns { display: inline-flex; gap: 6px; align-items: center; }
.sidebar-actions .sidebar-btns button { padding: 2px 10px; font-size: 14px; line-height: 1.4; }

/* ----- Onglet 3D : barre de selection + zone viewer ----- */
#view-3d { display: none; flex-direction: column; flex: 1; min-height: 0; height: auto; }
#view-3d.active { display: flex; flex: 1; min-height: 0; }
.viewer-3d-zone { flex: 1; position: relative; min-height: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #1e293b; }

/* ----- Vue centrale mode liste : table type Excel ----- */
.liste-centrale { flex: 1; overflow: auto; position: relative; }

.lc-add { cursor: pointer; width: 34px; text-align: center; }
.liste-centrale-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: visible; border-radius: 0; }
.liste-centrale-table thead th { position: sticky; white-space: nowrap; background: var(--hover); border-bottom: 1px solid var(--border); padding: 6px 8px; text-align: left; font-size: 12px; z-index: 6; }
.liste-centrale-table thead tr.lc-titres th { top: 0; z-index: 7; }
.liste-centrale-table thead tr.filtres-colonnes th { padding: 2px 6px; background: var(--panel); top: var(--th-titres-h-lc, 30px); z-index: 6; }
.liste-centrale-table thead .col-resizer { position: absolute; right: -4px; top: 0; width: 8px; height: 100%; cursor: ew-resize; z-index: 3; }
.liste-centrale-table thead .col-resizer:hover { background: color-mix(in srgb, var(--principal) 35%, transparent); }
.liste-centrale-table tbody td { padding: 5px 8px; font-size: 13px; border-bottom: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-centrale-table tbody tr:hover { background: var(--hover); }
.liste-centrale-table tbody tr.selected { outline: 2px solid var(--principal); outline-offset: -2px; }
.liste-centrale-table .lc-ref { font-weight: 600; }
.liste-centrale-table .empty { text-align: center; color: var(--muted); padding: 20px; }

/* ----- Fiche : mode edition (assombri + champs surlignes) ----- */
#detail-view.mode-edition { position: relative; }
#detail-view.mode-edition::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 90;
}
#detail-view.mode-edition .detail-card { position: relative; z-index: 91; box-shadow: 0 0 0 3px var(--principal), 0 12px 40px rgba(0,0,0,.4); }
#detail-view.mode-edition .champ-editable {
  background: var(--panel) !important;
  border: 1px solid var(--principal);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--principal) 25%, transparent);
  color: var(--text);
}
#detail-view.mode-edition .champ-editable:focus { outline: none; border-color: var(--principal-survol); }
#btn-save.edition-active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--principal) 35%, transparent); }
.modif-actions { display: flex; gap: 10px; margin-top: 14px; justify-content: flex-end; }
.diff-table td { word-break: break-word; }
/* ----- Hierarchie projets/familles : repli des sous-elements ----- */
.hier-ligne .hier-fleche { flex: 0 0 14px; }
/* ----- Editeur de matrice de droits (roles) ----- */
.matrice-cat { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; padding: 0; }
.matrice-cat summary { cursor: pointer; padding: 8px 12px; font-weight: 700; background: var(--hover); border-radius: 8px; user-select: none; }
.matrice-cat[open] summary { border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; }
.matrice-cat .matrice-table { margin: 8px 12px 12px; }
.matrice-table { width: calc(100% - 24px); border-collapse: collapse; table-layout: fixed; }
.matrice-table th, .matrice-table td { padding: 4px 8px; font-size: 12.5px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; overflow: visible; }
.matrice-table td:first-child, .matrice-table th:first-child { text-align: left; width: 26%; }
.matrice-table tbody tr:hover { background: var(--hover); }
.matrice-defaut td { font-weight: 600; background: color-mix(in srgb, var(--primary) 7%, transparent); }
.matrice-defaut:hover td { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.matrice-table th { position: static; background: var(--hover); }
/* Cellules : une seule ligne, centrage vertical strict pour eviter tout decalage */
td.mc-cell-td { white-space: nowrap; height: 28px; }
input.mc-cell { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--primary); vertical-align: middle; }
input.mc-cell.mc-monitor { accent-color: var(--danger); }
input.mc-cell.mc-none { opacity: .45; }
/* Projet à accès restreint dans la matrice d'un rôle : cases figées. */
tr.mc-ferme input.mc-cell { cursor: not-allowed; opacity: .35; }
tr.mc-ferme .mc-ligne-nom { color: var(--muted); }
/* En-tetes cliquables : bascule de toute la colonne / ligne */
th.mc-toggle-col { cursor: pointer; user-select: none; }
th.mc-toggle-col:hover { background: color-mix(in srgb, var(--primary) 12%, var(--hover)); color: var(--text); }
td.mc-ligne-nom { cursor: pointer; }
tr[data-ligne]:hover td.mc-ligne-nom { color: var(--primary-texte); }
/* Pastille « i » + bulle d'aide au survol */
.mc-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 6px; border-radius: 50%; background: var(--primary-plein); color: var(--sur-principal); font-size: 12px; font-weight: 800; font-style: italic; font-family: Georgia, serif; cursor: help; position: relative; vertical-align: middle; flex: none; }
.mc-sup { display: inline-block; width: 15px; }
.mc-bulle { display: none; position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.25); padding: 6px 10px; font-size: 12px; font-weight: 400; font-style: normal; font-family: inherit; text-align: left; white-space: normal; width: max-content; max-width: 240px; z-index: 40; cursor: default; }
.mc-bulle::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: var(--border); }
.mc-info:hover .mc-bulle, .mc-info:focus .mc-bulle { display: block; }
/* ----- Simulateur de droits ----- */
.simu-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 10px; }
.simu-ok { background: color-mix(in srgb, var(--ok, #16a34a) 15%, transparent); color: var(--ok, #16a34a); }
.simu-ko { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
/* « Droits particuliers » de la fiche d'une personne (lot 13) : une ligne par
   action, choix a trois etats, valeur effective. */
.user-droits { margin: 6px 0 12px; }
.user-droits h3 { margin: 4px 0; font-size: 15px; }
.ud-cat { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
.ud-cat summary { cursor: pointer; padding: 6px 10px; font-weight: 600; font-size: 13.5px; }
.ud-nb { font-weight: 400; font-size: 12px; color: var(--ambre); margin-left: 4px; }
.ud-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.2em; gap: 8px; align-items: center; padding: 4px 10px;
  border-top: 1px solid var(--border); font-size: 13px; }
.ud-ligne select { width: auto; min-width: 11em; margin: 0; padding: 3px 6px; font-size: 13px; }
.ud-nom { display: inline-flex; align-items: center; min-width: 0; }
.ud-effectif { font-weight: 700; font-size: 12px; text-align: center; padding: 1px 6px; border-radius: 10px; }
.ud-oui { background: color-mix(in srgb, var(--ok, #16a34a) 15%, transparent); color: var(--ok, #16a34a); }
.ud-non { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
@media (max-width: 560px) { .ud-ligne { grid-template-columns: minmax(0, 1fr) 3.2em; } .ud-ligne select { grid-column: 1 / -1; grid-row: 2; } }
/* ----- Viewer 3D natif (onglet 3D) ----- */
.view-3d-natif { display: flex; flex-direction: column; gap: 0; height: 100%; }
.v3d-topbar { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px 10px 0 0; border-bottom: none; }
.v3d-logo { font-size: 16px; line-height: 1; color: var(--primary-texte); }
.v3d-fichier-grp { display: flex; align-items: center; gap: 6px; }
.v3d-fichier-grp label.mini { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.v3d-fichier-grp select { max-width: 420px; min-width: 220px; }
.v3d-topbar .v3d-titre { flex: 1; text-align: right; }
.v3d-corps { flex: 1; display: flex; gap: 0; min-height: 0; }
.v3d-scene { flex: 1; position: relative; border: 1px solid var(--border); border-radius: 0 0 0 10px; overflow: hidden; background: #111827; min-height: 0; }
.v3d-scene-info { position: absolute; left: 10px; bottom: 8px; display: flex; gap: 14px; font-size: 12px; color: #94a3b8; background: rgba(17, 24, 39, .72); border: 1px solid rgba(148, 163, 184, .25); border-radius: 8px; padding: 4px 10px; z-index: 3; pointer-events: none; }
.v3d-scene-info b { color: #e2e8f0; font-weight: 600; }
.v3d-outils { width: 248px; flex: none; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-left: none; border-radius: 0 0 10px 0; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.v3d-cat { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.v3d-cat summary { cursor: pointer; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 7px 10px; background: var(--hover); user-select: none; }
.v3d-cat summary:hover { color: var(--text); }
.v3d-cat[open] summary { border-bottom: 1px solid var(--border); }
.v3d-cat-corps { padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.v3d-outils label.mini { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.v3d-boutons { display: flex; gap: 4px; flex-wrap: wrap; }
.v3d-titre { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3d-chargement { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(17, 24, 39, .75); color: #e2e8f0; font-size: 14px; z-index: 5; }
.v3d-erreur { position: absolute; top: 10px; left: 10px; right: 10px; background: color-mix(in srgb, var(--danger) 18%, #111827); border: 1px solid var(--danger); color: #fecaca; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; z-index: 6; }
.v3d-etiquette { position: absolute; transform: translate(-50%, -130%); background: #f59e0b; color: #111827; font-size: 12px; font-weight: 800; padding: 1px 6px; border-radius: 6px; pointer-events: none; white-space: nowrap; z-index: 4; }
.v3d-arbre { font-size: 12px; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px; }
.v3d-arbre details { margin: 2px 0; }
.v3d-arbre summary { cursor: pointer; font-weight: 700; padding: 2px 0; }
.v3d-arbre-item { display: flex; align-items: center; gap: 6px; padding: 1px 0 1px 14px; cursor: default; }
.v3d-arbre-item span { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3d-arbre-item span:hover { color: var(--primary-texte); }
#v3d-section.actif, #v3d-mesure.actif, #v3d-wireframe.actif { background: var(--primary-plein); color: var(--sur-principal); border-color: var(--primary); }
/* ----- Corbeille ----- */button.danger, .danger.small { background: transparent; border: 1px solid var(--danger); color: var(--danger); }button.danger:hover, .danger.small:hover { background: var(--rouge-plein); color: var(--sur-rouge); }

/* ----- Partage externe ----- */
.partage-ext-lien { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; align-items: center; }
.partage-ext-lien input { flex: 1 1 220px; min-width: 0; font-size: 12px; }
/* Liste des liens : l'adresse passe a la ligne, Copier / Revoquer dessous
   (rien ne deborde de la fenetre, meme sur telephone). */
.partage-ext-table { table-layout: fixed; width: 100%; }
.partage-ext-table th:first-child { width: 60%; }
.partage-ext-url { word-break: break-all; white-space: normal; font-size: 12px; }
.partage-ext-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.partage-ext-reglage { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 8px 0; }
.partage-ext-reglage label { flex: 1 1 220px; }

/* ----- Grille de donnees des tables perso ----- */
.donnees-card { width: 900px; }
.donnees-barre { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.donnees-barre input[type="search"] { flex: 1; }
.donnees-grille-wrap { max-height: 55vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.donnees-grille { width: 100%; border-collapse: collapse; table-layout: auto; }
.donnees-grille th { position: sticky; top: 0; background: var(--hover); z-index: 2; white-space: nowrap; }
.donnees-grille th, .donnees-grille td { padding: 4px 10px; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.donnees-grille tbody tr:hover { background: var(--hover); }
.donnees-cell { cursor: cell; min-width: 60px; white-space: nowrap; }
.donnees-cell:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.donnees-pk { color: var(--muted); font-weight: 700; }
.donnees-input { width: 100%; box-sizing: border-box; font: inherit; padding: 1px 4px; border: 1px solid var(--primary); border-radius: 4px; background: var(--panel); color: var(--text); }
#donnees-lignes .empty { text-align: center; padding: 18px; }
.mm-btn-donnees { margin-left: 6px; padding: 0 5px; }

/* ----- Recherche de contenu ----- */
.badge-contenu { display: inline-block; font-size: 12px; font-weight: 700; padding: 0 6px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary-texte); vertical-align: middle; margin-left: 4px; cursor: help; }

/* ----- Onglets fiche : commentaires / BOM / annotations ----- */
.fiche-onglets-sup { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; flex: 1; min-height: 200px; display: flex; flex-direction: column; }
.fiche-onglets-barre { display: flex; gap: 6px; margin-bottom: 8px; }
.fiche-onglets-barre .active { background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: var(--primary); }
.fiche-ong-corps { min-height: 60px; }
.fiche-comm-liste { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.fiche-comm-item { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.fiche-comm-tete { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.fiche-comm-msg { font-size: 13px; white-space: pre-wrap; }
.fiche-comm-saisie { display: flex; gap: 8px; align-items: flex-end; }
.fiche-comm-saisie textarea { flex: 1; resize: vertical; }
.fiche-ong-barre-outils { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.fiche-annot-info { font-size: 12px; color: var(--muted); }
.fiche-annot-item { font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.fiche-bom-table { max-height: 220px; overflow-y: auto; }
.bom-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bom-table th, .bom-table td { padding: 4px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.bom-table th { position: sticky; top: 0; background: var(--hover); }

/* ----------------------------- Section Plugins (Parametres) ----------------------------- */
.plugins-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 10px; }
.plugin-carte { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
.plugin-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.plugin-badges:empty { display: none; }
.badge.badge-licence { background: color-mix(in srgb, var(--lock, #b45309) 18%, transparent); color: var(--text); }
.licence-etat { display: grid; gap: 4px; padding: 10px 12px; border-radius: 8px; border-left: 4px solid var(--ok, #16a34a); background: var(--bg-soft, var(--bg)); margin-bottom: 8px; }
.licence-etat.licence-ko { border-left-color: var(--danger, #dc2626); }
.licence-mode { font-weight: 600; }
/* Offre : socle gratuit + trois packs (bloc Licence) */
.licence-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 10px; }
.licence-pack { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg); display: flex; flex-direction: column; gap: 4px; }
.licence-pack ul { margin: 2px 0 0 18px; padding: 0; font-size: 13px; }
.licence-pack p { margin: 0; }
.licence-pack-titre { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.licence-pack.couvert, .licence-pack.inclus { border-color: color-mix(in srgb, var(--ok, #16a34a) 55%, var(--border)); }
.licence-pack.absent { opacity: .8; }
.licence-en-plus { grid-column: 1 / -1; margin: 0; }
.badge.badge-ok { background: color-mix(in srgb, var(--ok, #16a34a) 85%, #000); }
.badge.badge-gris { background: color-mix(in srgb, var(--muted, #6b7280) 22%, transparent); color: var(--text); }
.badge.badge-pack { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--text); }
.plugin-offre:empty { display: none; }
.as-profil .badge { justify-self: start; color: #fff; font-size: 12px; }
.licence-cles { overflow-x: auto; margin-bottom: 8px; }
.licence-cles td { vertical-align: top; }
#licence-cle { width: 100%; font-family: ui-monospace, monospace; font-size: 12px; }
.plugin-entete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cle-unique { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--hover); word-break: break-all; }

/* Interrupteur de plugin (switch horizontal droite-gauche) */
.plugin-switch { position: relative; display: inline-block; width: 42px; height: 22px; flex-shrink: 0; }
.plugin-switch input { opacity: 0; width: 0; height: 0; }
.plugin-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 22px; transition: background .2s; }
.plugin-slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: var(--bg); border-radius: 50%; transition: transform .2s; }
.plugin-switch input:checked + .plugin-slider { background: var(--ok, #16a34a); }
.plugin-switch input:checked + .plugin-slider::before { transform: translateX(20px); }
.plugin-switch input:disabled + .plugin-slider { opacity: .6; cursor: wait; }
.plugin-inactif { opacity: .6; }
/* ----- Lecteur PDF securise (pdf.js local, sans telechargement) ----- */
.pdf-sec-pages { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pdf-sec-page { max-width: 100%; box-shadow: 0 2px 8px rgba(0,0,0,.25); border-radius: 4px; background: #fff; }
/* ----- Fenetre "Modifier le champ" : case a cocher alignee avec son texte ----- */
.tw-champ-card label.mini { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.tw-champ-card label.mini input[type="checkbox"] { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--primary); }
/* ----- Onglet Nomenclatures : resultats defilants ----- */
.bom-result-scroll { flex: 1; min-height: 0; overflow-y: auto; }
/* ----- Fiche article : zone des onglets (Commentaires, Composants...)
   alignee sur la colonne des metadonnees (elle defile avec la fiche,
   l'apercu garde sa largeur) ----- */
.detail-col-gauche { display: flex; flex-direction: column; min-width: 0; flex: 1 1 46%; overflow-y: auto; padding-right: 8px; }
.detail-col-gauche .meta-grid { flex: none; }
.detail-col-gauche .fiche-onglets-sup { max-width: none; min-width: 0; }


/* ============================== Tableaux standardises ============================== */
/* Generique : tri, filtres par colonne, entetes figes, redimensionnement */
table.data-table th.sortable { cursor: pointer; user-select: none; position: relative; }
table.data-table th.sortable:hover { background: var(--panel); }
table.data-table th .col-resizer { position: absolute; right: -4px; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 3; }
table.data-table th .col-resizer:hover { background: color-mix(in srgb, var(--principal) 35%, transparent); }
table.data-table th .th-label { pointer-events: none; }
table.data-table th.tri-asc .th-label::after { content: " \25B4"; color: var(--primary-texte); }
table.data-table th.tri-desc .th-label::after { content: " \25BE"; color: var(--primary-texte); }
table.data-table thead tr.filtres-colonnes th { position: sticky; top: var(--th-titres-h, 32px); background: var(--panel); padding: 2px 6px; z-index: 2; }
table.data-table thead tr.filtres-colonnes input { min-width: 60px; padding: 3px 6px; font-size: 12px; width: 100%; box-sizing: border-box; }
table.data-table thead tr.filtres-colonnes .filtre-col-wrap { display: block; }
/* Le conteneur de defilement : seules les lignes deroulent */
.view > .table-scroll-wrap { flex: 1; min-height: 200px; overflow: auto; }
.table-scroll-wrap { max-height: 100%; overflow: auto; }
.view .table-scroll-wrap { max-height: calc(100vh - 170px); }
/* Majuscules sans accents : l'italique CSS n'evite pas les accents, on force
   la normalisation via la propriete dediee (supporte par les navigateurs recents) */
th, .kpi-label, .sidebar h3 { text-transform: uppercase; }
/* Sash generiques */
.mx-sash-h { flex: 0 0 6px; cursor: col-resize; background: transparent; transition: background var(--m-vite) var(--m-ease); }
.mx-sash-h:hover { background: var(--primary); opacity: .4; }
.mx-sash-v { flex: 0 0 6px; cursor: row-resize; background: transparent; transition: background var(--m-vite) var(--m-ease); }
.mx-sash-v:hover { background: var(--primary); opacity: .4; }
/* Croix de fermeture des fenetres : toujours bien visible */
.modal-header button, .modal-close, button[title*="Fermer"], button[title*="fermer"] { color: var(--text); font-weight: 700; font-size: 15px; }
.modal-header button:hover { background: var(--hover); color: var(--text); }
.modal { background: rgba(0, 0, 0, .45); }
.modal-card { background: var(--panel); color: var(--text); }
.modal h2, .modal h3 { color: var(--text); }
.modal label { color: var(--muted); }
/* ============================== Prise en main / accessibilite ============================== */
/* Focus clavier toujours visible (navigation au clavier) */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Cibles de clic confortables (mobile + precis) */
button.ghost.mini, button.ghost.small { min-width: 26px; min-height: 26px; }
.nav-btn { min-height: 32px; }
/* Scrollbars discretes qui suivent le theme */
* { scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
/* Aide raccourcis clavier */
.kbd-aide { position: fixed; bottom: 14px; right: 14px; z-index: 60; display: flex; gap: 6px; }
.kbd-aide button { opacity: .55; font-size: 12px; }
.kbd-aide button:hover { opacity: 1; }
.kbd-aide-card { position: fixed; bottom: 52px; right: 14px; z-index: 60; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; box-shadow: 0 8px 30px rgba(0,0,0,.25); max-width: 320px; }
.kbd-aide-card kbd { display: inline-block; background: var(--hover); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; font-family: inherit; font-size: 12px; color: var(--text); }
.kbd-aide-card table { border-collapse: collapse; }
.kbd-aide-card td { padding: 3px 8px 3px 0; font-size: 12px; color: var(--text); }
/* Toasts de confirmation non bloquants (remplacent progressivement les alert) */
.mx-toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--panel); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--ok); border-radius: 8px; padding: 10px 30px 10px 18px; font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.25); z-index: 80; cursor: pointer; animation: m-vue var(--m-court) var(--m-ease); }
.mx-toast.erreur { border-left-color: var(--danger); }
/* ============================== Refonte menus (Reglages, Nomenclatures, Tables) ============================== */
/* Sections en cartes aerees : espacement generereux autour du contenu */
.param-content { display: flex; flex-direction: column; gap: 18px; }
.p-section { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; }
.p-section > h3:first-child { margin-top: 0; margin-bottom: 14px; font-size: 15px; color: var(--text); }
.p-section h3 { margin-top: 18px; margin-bottom: 10px; }
.p-section .toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; font-weight: 400; font-size: 13px; }
.p-section .toolbar button, .p-section .toolbar input, .p-section .toolbar select { margin: 0; }
.p-section form.inline-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding-top: 8px; }
.p-section form.inline-form label { min-width: 180px; flex: 1; }
.p-section form.inline-form button { margin-top: 22px; }
.p-section .data-table { margin-top: 6px; }
.p-section hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
/* View BOM : zone de construction en carte aeree */
.view-tete .toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; font-weight: 400; font-size: 13px; }
.view-tete .toolbar input, .view-tete .toolbar button { width: auto; }
.view-tete .toolbar .ghost[style*="cursor"] { display: inline-flex; align-items: center; gap: 6px; }
#view-bom .view-tete { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; margin-bottom: 16px; }
#view-bom .bom-builder { background: var(--hover); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; margin-top: 14px; }
#view-bom .bom-builder-tete h3 { margin: 0 0 4px; }
#view-bom .bom-builder-row { margin: 12px 0; }
#view-bom .bom-builder-actions { display: flex; gap: 10px; margin-top: 14px; }
/* Tables : la mindmap reste plein cadre, sections en cartes */
#t-carte .mindmap-layout { min-height: 520px; }
#view-tables .param-layout, #view-fichiers-settings .param-layout { align-items: stretch; }
#view-tables .param-content { min-width: 0; }
/* Barre de nav de sections : items plus aeres */
.param-nav { padding: 14px; }
.param-nav li { padding: 10px 12px; margin-bottom: 2px; }
.param-nav li + li { margin-top: 2px; }
/* Formulaires generiques : espace vertical et largeur contrainte */
.modal form label, .p-section form label { margin-bottom: 4px; }
.status-msg { min-height: 18px; margin-top: 8px; }
/* ============================== Profil (self) ============================== */
#btn-profil.btn-profil-avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 2px; border-radius: 50%; overflow: hidden; }
#btn-profil .btn-avatar-defaut { font-size: 20px; line-height: 1; }
#btn-profil .btn-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.profil-card .modal-body { padding-top: 0; }
.profil-entete { display: flex; align-items: center; gap: 16px; padding: 18px 0 12px; }
.profil-avatar-cadre { position: relative; width: 84px; height: 84px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, var(--principal), #7c3aed); padding: 3px; display: flex; align-items: center; justify-content: center; }
.profil-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; background: #fff; }
.profil-avatar-defaut { width: 100%; height: 100%; border-radius: 50%; background: #1f2937; color: #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 38px; }
.profil-identite { min-width: 0; }
.profil-nom-complet { font-size: 1.15rem; font-weight: 600; }
.profil-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--bordure); margin-bottom: 14px; }
.profil-tabs .tab-btn { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer; font: inherit; color: inherit; opacity: 0.75; white-space: nowrap; }
.profil-tabs .tab-btn.actif { opacity: 1; border-bottom-color: var(--primary-texte); color: var(--primary-texte); font-weight: 600; }
.profil-tab-pane { display: none; }
.profil-tab-pane.actif { display: block; }
.profil-card form label { display: block; margin: 10px 0; }
.profil-card form button[type="submit"] { margin-top: 6px; }

/* ====== Droits & Roles : blocs numerotes ====== */
#p-droits .droits-intro { margin-bottom: 6px; }
#p-droits .droits-intro h3 { margin: 0 0 4px; }
.droits-bloc {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #ddd);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 14px 0;
}
.droits-bloc > summary {
  cursor: pointer;
  font-size: 14px;
  padding: 4px 2px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.droits-bloc > summary::-webkit-details-marker { display: none; }
.droits-bloc > summary::before {
  content: "▸";
  font-size: 12px;
  transition: transform var(--m-vite) var(--m-ease);
}
.droits-bloc[open] > summary::before { transform: rotate(90deg); }
.droits-bloc > summary:hover { color: var(--principal); }
.droits-bloc-corps { padding: 12px 4px 4px; }
.droits-bloc-corps .toolbar { margin-bottom: 10px; }

/* ====== Tutoriel guide ======
   Vraie mise en lumiere : le voile (.tuto-overlay) est transparent et c'est
   l'ombre geante du cadre (.tuto-spot) qui assombrit tout le reste ; la
   cible, dans la decoupe, n'est couverte par rien et reste claire et nette.
   Sans cible (bulle au centre), le voile entier assombrit l'ecran
   (.tuto-sans-cible). Au-dessus de toute fenetre (modales, panneau Mon
   temps, mode atelier) : la cible n'a pas a changer de plan, rien n'est
   deplace ni casse. */
.tuto-overlay { position: fixed; inset: 0; background: transparent; z-index: 1650; }
.tuto-overlay.tuto-sans-cible { background: rgba(10, 16, 30, .55); }
.tuto-spot { position: fixed; border-radius: 10px; box-shadow: 0 0 0 200vmax rgba(10, 16, 30, .55); border: 2px solid var(--primary); pointer-events: none; animation: m-vue var(--m-court) var(--m-ease); z-index: 1651; }
.tuto-bulle { position: fixed; width: min(400px, calc(100vw - 24px)); max-width: 400px; background: var(--panel, #fff); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px 14px; box-shadow: 0 10px 34px rgba(10, 20, 50, .3); z-index: 1652; }
.tuto-bulle.tuto-centre { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tuto-titre { font-weight: 700; font-size: 15.5px; margin-bottom: 6px; }
.tuto-texte { font-size: 13.5px; line-height: 1.55; }
.tuto-texte kbd { background: var(--hover); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; font-size: 12px; }
.tuto-nav { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tuto-compteur { font-size: 12px; color: var(--muted); margin-right: auto; }
.tuto-nav .primary, .tuto-nav .ghost { padding: 5px 14px; font-size: 12.5px; }
.tuto-croix { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border: none; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; border-radius: 4px; }
.tuto-croix:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
/* Proposition au premier login */
.tuto-proposition { position: fixed; bottom: 22px; right: 22px; max-width: 320px; background: var(--panel, #fff); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 12px; padding: 16px 18px; box-shadow: 0 10px 34px rgba(10, 20, 50, .25); z-index: 150; animation: m-vue var(--m-court) var(--m-ease); }
.tuto-prop-titre { font-weight: 700; font-size: 15px; }
.tuto-prop-texte { font-size: 13px; color: var(--muted); margin: 4px 0 12px; }
.tuto-prop-actions { display: flex; gap: 8px; }
/* Menu de relance */
.tuto-menu { position: fixed; bottom: 60px; right: 22px; width: 260px; max-height: 60vh; overflow-y: auto; background: var(--panel, #fff); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: 0 10px 34px rgba(10, 20, 50, .3); z-index: 150; display: flex; flex-direction: column; gap: 6px; animation: m-vue var(--m-court) var(--m-ease); }
.tuto-menu-titre { font-weight: 700; font-size: 13.5px; padding: 2px 4px 6px; }
.tuto-menu .ghost { text-align: left; font-size: 12.5px; padding: 6px 10px; }

.aide-menu { position: fixed; z-index: 80; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 8px 30px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.aide-menu .aide-m-item { text-align: left; }
.minituto-menu { right: 22px; top: auto; bottom: 60px; z-index: 150; max-height: 60vh; }
.minituto-menu .minituto-nouveau { font-weight: 600; }
.rapport-erreur-detail { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 12px; display: flex; flex-direction: column; gap: 6px; }
.rapport-erreur-detail pre { margin: 0; white-space: pre-wrap; word-break: break-all; background: rgba(0,0,0,.06); border-radius: 6px; padding: 8px; font-size: 12px; max-height: 220px; overflow: auto; }

/* Apercu Office natif navigateur (docx/xlsx/pptx sans LibreOffice) */
.docx-apercu { max-height: 100%; overflow: auto; padding: 16px 20px; background: var(--panel, #fff); border-radius: 8px; font-family: Georgia, 'Times New Roman', serif; line-height: 1.6; color: var(--text); }
[data-theme="sombre"] .docx-apercu { background: var(--surface); color: var(--texte); }
.docx-apercu p { margin: 0 0 0.75em 0; }
.docx-apercu h1 { font-size: 1.6em; margin: 0.6em 0 0.4em; border-bottom: 2px solid var(--border); padding-bottom: 4px; }
.docx-apercu h2 { font-size: 1.35em; margin: 0.6em 0 0.35em; }
.docx-apercu h3 { font-size: 1.15em; margin: 0.5em 0 0.3em; }
.docx-apercu ul, .docx-apercu ol { margin: 0 0 0.75em 1.4em; }
.docx-apercu li { margin-bottom: 0.25em; }
.docx-apercu table { border-collapse: collapse; margin: 0.5em 0; font-family: inherit; }
.docx-apercu td, .docx-apercu th { border: 1px solid var(--border, #ccc); padding: 4px 8px; }
.docx-apercu img { max-width: 100%; border-radius: 4px; }
.docx-apercu strong { font-weight: 700; }
.docx-apercu em { font-style: italic; }
.pptx-apercu .pptx-slide { border: 1px solid var(--border, #ccc); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; background: var(--panel); }
.pptx-apercu .pptx-slide-num { font-weight: 600; color: var(--muted); margin-bottom: 4px; font-size: 12px; }

/* Label masquant un input file : rendu identique a un bouton ghost */
.label-bouton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: var(--text);
  font-size: 12.5px; cursor: pointer;
}
.label-bouton:hover { background: var(--hover); }

/* ----- Cases a cocher / boutons radio : toujours sur la meme ligne que leur
   texte, case a gauche, centrees verticalement (les libelles de formulaire
   sont en colonne par defaut, ce qui placait la case au-dessus du texte). */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  display: flex !important; flex-direction: row !important; align-items: center !important;
  justify-content: flex-start; gap: 8px; flex-wrap: nowrap; cursor: pointer;
}
label:has(> input[type="checkbox"]) > input[type="checkbox"],
label:has(> input[type="radio"]) > input[type="radio"] {
  order: -1; margin: 0; flex: none; width: 15px; height: 15px;
  /* Alignee sur la PREMIERE ligne du texte (libelles longs sur 2 lignes). */
  align-self: flex-start; margin-top: max(0px, calc((1lh - 15px) / 2));
}

/* Barre de recherche : le champ garde une largeur utile, la liste des
   recherches sauvegardees ne l'ecrase plus. */
.search-bar input#search-input { flex: 1 1 260px; min-width: 200px; max-width: 480px; width: auto; }
.search-bar select#saved-filters { flex: 0 1 240px; width: auto; min-width: 160px; }
.search-bar button { flex: none; }
/* Message vide de la zone de vignettes : sur toute la largeur. */
.files-icons > .empty { grid-column: 1 / -1; width: 100%; max-width: 520px; }
/* Les zones de texte reprennent la police de l'interface (pas de chasse fixe). */
textarea { font-family: inherit; line-height: 1.45; }
/* Liste deroulante + bouton "+" sur une meme ligne ; champ chemin + bouton. */
.select-plus, .dossier-chemin-ligne { display: flex; gap: 6px; align-items: center; }
.select-plus > select, .dossier-chemin-ligne > input { flex: 1; min-width: 0; }
.select-plus > button, .dossier-chemin-ligne > button { flex: none; }
/* Textes d'aide des fenetres : meme taille que le reste du formulaire. */
.modal-body .muted, .modal-body p.muted { font-size: 12.5px; line-height: 1.45; }
/* Formulaires en ligne : le bouton s'aligne sur les champs, pas sur les libelles. */
.inline-form > button { align-self: flex-end; }
/* Barre d'outils de la corbeille : boutons et retention sur une ligne. */
#view-corbeille > .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 12px; }
#view-corbeille > .toolbar label.mini { flex-direction: row; align-items: center; gap: 6px; }
#view-corbeille > .toolbar .status-msg { margin-top: 0; }
/* Barre du haut : jamais de libelle sur deux lignes ; ecrans moyens
   (portables 1280-1440 px) : marges reduites, nom d'utilisateur masque
   (il reste dans Mon profil). */
.topbar .brand, .topbar .nav-btn, .topbar #user-name, .topbar .user-area button { white-space: nowrap; }
.topbar nav { display: flex; flex-wrap: nowrap; min-width: 0; }
@media (max-width: 1440px) {
  .topbar { gap: 10px; padding: 10px 14px; }
  .topbar .nav-btn { padding: 8px 9px; }
  .topbar .user-area { gap: 6px; }
  .topbar .brand { font-size: 16px; letter-spacing: .5px; }
}
@media (max-width: 1320px) {
  .topbar #user-name { display: none; }
  .topbar #btn-logout { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 1100px) {
  .topbar .nav-btn { padding: 6px 6px; font-size: 12.5px; }
  .topbar .brand-logo + * , .topbar .brand { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
}
.topbar nav { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar .user-area { flex: none; }
@media (max-width: 1100px) { .topbar #user-badge { display: none; } }
.tuto-nav .tuto-compteur { margin-right: auto; }
/* Textes d'aide des blocs de parametres : taille du formulaire. */
.droits-bloc-corps > p.muted, .droits-bloc-corps > .muted, .p-section p.muted { font-size: 13px; line-height: 1.5; margin: 4px 0 10px; }
.v3d-outils .muted.mini, .v3d-outils div.mini { font-size: 12px; line-height: 1.4; }
/* Onglet Validations de la fiche */
.fiche-valid-item { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.fiche-valid-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.fiche-valid-sigs { margin: 6px 0 4px 18px; padding: 0; font-size: 13px; }
.texte-ok { color: var(--ok); font-size: 12.5px; }
.texte-danger { color: var(--danger); font-size: 12.5px; }
.statut-avis { font-size: 12px; font-weight: 400; min-height: 0; }
.liste-rappels { margin: 6px 0 6px 18px; padding: 0; font-size: 13px; }
.bouton-fichier { display: inline-flex !important; flex-direction: row !important; align-items: center; padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text); background: transparent; }
.bouton-fichier:hover { background: var(--hover); }

/* ----- Retour visuel des actions ----- */
/* Barre d'activite : une requete lancee par l'utilisateur est en cours */
#mx-activite { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10000; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .2s; }
#mx-activite.actif { opacity: 1; }
#mx-activite span { position: absolute; top: 0; bottom: 0; left: -35%; width: 35%; border-radius: 2px; background: var(--primary); animation: mx-activite 1.1s ease-in-out infinite; }
@keyframes mx-activite { to { left: 100%; } }
html.mx-occupe body { cursor: progress; }
@media (prefers-reduced-motion: reduce) { #mx-activite span { animation-duration: 2.4s; } }
/* Toasts aux couleurs du theme (lisibles en clair comme en sombre) */
#toast-box .toast { position: relative; display: flex; align-items: flex-start; gap: 10px; max-width: min(400px, calc(100vw - 40px)); padding: 10px 34px 10px 14px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.25); font-size: 14px; line-height: 1.4; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
#toast-box .toast.visible { opacity: 1; transform: none; }
#toast-box .toast-ok { border-left-color: var(--ok); }
#toast-box .toast-erreur { border-left-color: var(--danger); }
#toast-box .toast-attente { border-left-color: var(--lock); }
#toast-box .toast-attente::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--primary); animation: m-tourne .7s linear infinite; }
#toast-box .toast-texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#toast-box .toast-croix { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 0; border: none; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; border-radius: 4px; }
#toast-box .toast-croix:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
/* Bouton « Annuler » des messages (annuler plutot que confirmer) */
#toast-box .toast-annuler { flex: none; align-self: center; padding: 3px 10px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--primary-texte); font-weight: 600; font-size: 13px; cursor: pointer; }
#toast-box .toast-annuler:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
/* Squelettes de chargement */
.mx-sq-barre, .mx-sq-bloc { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--hover) 25%, color-mix(in srgb, var(--border) 70%, var(--hover)) 50%, var(--hover) 75%); background-size: 200% 100%; animation: mx-sq 1.3s linear infinite; }
.mx-sq td { padding-top: 12px; padding-bottom: 12px; }
.mx-sq td:nth-child(odd) .mx-sq-barre { width: 70%; }
.mx-sq-carte { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
.mx-sq-bloc { height: 70px; border-radius: 6px; }
.mx-sq-barre.courte { width: 55%; }
@keyframes mx-sq { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .mx-sq-barre, .mx-sq-bloc { animation: none; } }
/* Import : zone de depot et une ligne de progression par fichier */
.upload-zone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; border: 2px dashed var(--border); border-radius: 10px; text-align: center; color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.upload-zone:hover, .upload-zone:focus-visible, .upload-zone.survol { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); outline: none; }
.upload-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.upload-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto 90px minmax(0, auto) auto; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.upload-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-barre { height: 6px; border-radius: 3px; background: var(--hover); overflow: hidden; }
.upload-barre span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .15s; }
.upload-etat { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-liste li.ok { border-color: color-mix(in srgb, var(--ok) 50%, var(--border)); }
.upload-liste li.ok .upload-barre span { width: 100%; background: var(--ok); }
.upload-liste li.ok .upload-etat { color: var(--ok); }
.upload-liste li.erreur { border-color: var(--danger); }
.upload-liste li.erreur .upload-etat { color: var(--danger); max-width: 240px; white-space: normal; overflow-wrap: anywhere; }
.upload-liste li.erreur .upload-barre span { background: var(--danger); }
.upload-liste li.en-cours .upload-retirer, .upload-liste li.ok .upload-retirer { visibility: hidden; }
@media (max-width: 560px) { .upload-liste li { grid-template-columns: minmax(0, 1fr) auto; } .upload-barre { grid-column: 1 / -1; } }
/* Fichiers du poste glisses sur la zone des articles */
#view-fichiers.depot-actif { outline: 3px dashed var(--primary); outline-offset: -6px; }
#view-fichiers.depot-actif::after { content: "Déposez pour importer"; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px 22px; border-radius: 10px; background: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(0,0,0,.25); font-weight: 600; pointer-events: none; z-index: 50; }
.upload-liste:not([hidden]) { margin-bottom: 6px; }
#upload-form input:disabled { opacity: .65; cursor: not-allowed; }
/* Fichiers deja connus a l'import (web/doublons.js) : proposition par ligne */
.upload-liste:has(.upload-doublon.reconnu) { max-height: 55vh; }
.upload-liste li.en-analyse .upload-etat { color: var(--muted); }
.upload-doublon { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.upload-doublon p { margin: 0; }
.upload-doublon.reconnu { padding: 6px 8px; border-radius: 6px; border-left: 3px solid var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--panel)); }
.upload-doublon.reconnu.identique { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, var(--panel)); }
.upload-doublon.a-choisir { border-left-color: var(--warning, #c2410c); background: color-mix(in srgb, var(--warning, #c2410c) 7%, var(--panel)); }
.upload-doublon-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.upload-doublon-choix label { flex-direction: row; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--text); flex: 1 1 320px; min-width: 0; }
.upload-doublon-choix select { width: auto; flex: 1 1 auto; max-width: 100%; min-width: 0; }
.upload-doublon-q { white-space: nowrap; }
.upload-doublon-raison { color: var(--muted); }
.upload-doublon.jumeau:not(.reconnu) { padding: 6px 8px; border-radius: 6px; border-left: 3px solid var(--ok); background: color-mix(in srgb, var(--ok) 7%, var(--panel)); }
.upload-doublon-jumeau { color: var(--muted); }
/* Reference saisie (un seul fichier) qui ne sert qu'a « Nouvel article ». */
.upload-doublon-saisie { color: var(--text); border-left: 3px solid var(--primary); padding-left: 6px; margin: 4px 0; }
/* Fichiers mis de cote faute de place sur le serveur (import par vagues). */
.upload-doublons-vagues { margin: 0 0 6px; color: var(--muted); }
.upload-doublons-vagues[hidden] { display: none; }
.upload-doublons-tous { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px; margin-bottom: 6px; border: 1px dashed var(--border); border-radius: 6px; font-size: 13px; }
.upload-doublons-tous[hidden] { display: none; }
.upload-doublons-tous select { width: auto; max-width: 100%; }
.upload-comparaison[hidden] { display: none; }
.upload-comparaison-identique { color: var(--ok); font-weight: 600; }
.upload-comparaison-cotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.upload-cote { margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); min-width: 0; }
.upload-cote figcaption { font-size: 12px; overflow-wrap: anywhere; }
.upload-cote-apercu { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 90px; margin: 6px 0; }
.upload-cote-apercu img, .upload-cote-apercu canvas { max-width: 100%; max-height: 220px; object-fit: contain; border: 1px solid var(--border); background: #fff; }
.upload-cote dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; margin: 0; font-size: 12px; }
.upload-cote dt { color: var(--muted); }
.upload-cote dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .upload-comparaison-cotes { grid-template-columns: minmax(0, 1fr); } }
/* Selection multiple de la vue Articles */
.selection-articles { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.selection-articles[hidden] { display: none; }
/* Webhooks */
.wh-form { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.wh-evenements { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 10px; margin: 0; }
.wh-evenements legend { padding: 0 6px; font-weight: 600; font-size: 13px; }
.wh-evts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; margin-top: 6px; }
.wh-tous { font-weight: 600; }
.wh-url { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.wh-code { background: var(--hover); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 10px; font-size: 12.5px; overflow-x: auto; }
/* Connecteur Odoo */
.avertissement { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--lock) 55%, var(--border)); border-left: 4px solid var(--lock); border-radius: 8px; background: color-mix(in srgb, var(--lock) 8%, var(--panel)); color: var(--text); }
.odoo-form { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.odoo-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.fiche-odoo { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font-size: 13px; }
.fiche-odoo-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fiche-odoo-tete button { margin-left: auto; }
.fiche-odoo-chiffres { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; align-items: baseline; }
/* Vue Production */
.sous-onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.sous-onglets button.active { background: var(--primary-plein); color: var(--sur-principal); border-color: var(--primary-plein); }
.prod-panneau .toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.prod-panneau .toolbar label.mini { display: flex; flex-direction: column; gap: 2px; }
.om-recherche { max-width: 260px; }
.prod-split { display: grid; grid-template-columns: minmax(300px, 2fr) minmax(0, 3fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .prod-split { grid-template-columns: 1fr; } }
.prod-liste { overflow-x: auto; }
.prod-liste tbody tr { cursor: pointer; }
.prod-liste tbody tr.selection td { background: var(--selection); }
.prod-detail { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.prod-detail h4 { margin: 0 0 6px; font-size: 16px; }
.prod-detail h5 { margin: 18px 0 8px; font-size: 14px; }
.om-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: flex-start; }
.om-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: var(--muted); }
.om-meta b { color: var(--text); }
.om-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.om-grille { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.om-ligne { display: flex; flex-wrap: wrap; gap: 12px; }
.om-ligne label { flex: 1 1 160px; }
.om-champ div { white-space: normal; margin-top: 2px; }
.om-ajout { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.badge-etat { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: var(--hover); color: var(--text); white-space: nowrap; }
.badge-etat.etat-soumis, .badge-etat.etat-en_cours { border-color: color-mix(in srgb, var(--lock) 60%, var(--border)); color: var(--lock); }
.badge-etat.etat-approuve, .badge-etat.etat-termine, .badge-etat.etat-validee { border-color: color-mix(in srgb, var(--ok) 60%, var(--border)); color: var(--ok); }
.badge-etat.etat-rejete, .badge-etat.etat-annule, .badge-etat.etat-obsolete { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); color: var(--danger); }
.gamme-estimation { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: flex-end; margin: 12px 0; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 8px; }
.gamme-estimation label { display: flex; flex-direction: column; }
.gamme-estimation input { width: 90px; }
.gamme-instr { white-space: pre-wrap; }
.op-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.op-form .op-large { grid-column: span 2; }
.op-form .op-pleine { grid-column: 1 / -1; display: flex; gap: 8px; flex-direction: column; }
.op-form div.op-pleine { flex-direction: row; }
@media (max-width: 560px) { .op-form .op-large { grid-column: 1 / -1; } }
.poste-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.fiche-om { margin: 8px 0; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--lock) 55%, var(--border)); border-left: 4px solid var(--lock); border-radius: 8px; background: color-mix(in srgb, var(--lock) 7%, var(--panel)); font-size: 13px; }
/* Vue Projets (pilotage) */
.pil-split { grid-template-columns: minmax(260px, 1fr) minmax(0, 3fr); }
.pil-liste { display: flex; flex-direction: column; gap: 8px; }
.pil-carte { display: flex; flex-direction: column; gap: 6px; align-items: stretch; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); cursor: pointer; }
.pil-carte:hover { border-color: var(--primary); }
.pil-carte.selection { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.pil-carte-tete { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pil-barre { display: block; height: 6px; border-radius: 3px; background: var(--hover); overflow: hidden; margin: 6px 0; }
.pil-barre span { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.pil-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.pil-chip { display: inline-flex; gap: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--hover); font-size: 12px; color: var(--text); }
.pil-om { color: var(--lock); text-decoration: none; font-weight: 600; }
.pil-planning { position: relative; height: 150px; margin: 14px 8px 18px; }
.pil-axe { position: absolute; left: 0; right: 0; top: 74px; height: 2px; background: var(--border); }
.pil-aujourdhui { position: absolute; top: 10px; bottom: 10px; width: 0; border-left: 2px dashed var(--primary); }
.pil-aujourdhui span { position: absolute; top: -4px; left: 4px; font-size: 12px; color: var(--primary-texte); white-space: nowrap; }
.pil-repere { position: absolute; top: 66px; transform: translateX(-9px); }
.pil-losange { display: block; width: 14px; height: 14px; margin: 2px; transform: rotate(45deg); background: var(--muted); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--border); }
.pil-repere.etat-pil-atteint .pil-losange { background: var(--ok); }
.pil-repere.etat-pil-en_retard .pil-losange { background: var(--danger); }
.pil-repere.etat-pil-a_venir .pil-losange { background: var(--primary); }
.pil-etiquette { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: 150px; font-size: 12px; line-height: 1.25; text-align: center; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.pil-repere.haut .pil-etiquette { bottom: 24px; }
.pil-repere.bas .pil-etiquette { top: 24px; }
.pil-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 10px 0; }
.pil-jalons { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.pil-jalon { border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 10px; padding: 10px 14px; background: var(--panel); }
.pil-jalon.etat-pil-atteint { border-left-color: var(--ok); }
.pil-jalon.etat-pil-en_retard { border-left-color: var(--danger); }
.pil-jalon.etat-pil-annule { border-left-color: var(--muted); opacity: .75; }
.pil-jalon-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: flex-start; }
.pil-jalon-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.pil-date input { width: 150px; }
.pil-livrables { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pil-livrables li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pil-revues { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pil-revue { padding: 4px 8px; border-radius: 6px; background: var(--hover); }
.pil-revue-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 8px; }
.pil-revue-form .pil-pleine { grid-column: 1 / -1; }
.badge-etat.etat-pil-atteint { border-color: color-mix(in srgb, var(--ok) 60%, var(--border)); color: var(--ok); }
.badge-etat.etat-pil-en_retard { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); color: var(--danger); }
.badge-etat.etat-pil-a_venir { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); color: var(--primary-texte); }
@media (max-width: 1100px) { .pil-split { grid-template-columns: 1fr; } }
.pil-planning-cadre { overflow-x: auto; }
.pil-planning-cadre .pil-planning { min-width: 560px; }
.pil-jalon-tete .muted.mini, .pil-carte .muted.mini, .pil-livrables .muted.mini { font-size: 12.5px; }
.pil-jalon-tete b { font-size: 15px; }
.pil-planning { margin: 14px 70px 18px; }
/* ----- Planning : barre d'outils, Gantt, carte de tache ----- */
.pil-onglets { margin-top: 12px; }
.plan-barre { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 10px 0; }
.plan-nouvelle { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.plan-nouvelle input[type="text"] { width: 220px; }
.plan-nouvelle label { display: flex; flex-direction: column; }
.plan-nouvelle input[type="number"] { width: 80px; }
.plan-filtres { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; }
.plan-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.plan-resume { font-size: 13px; margin-bottom: 8px; }
.gantt { --nom: 230px; display: grid; grid-template-columns: var(--nom) var(--largeur); grid-template-rows: auto auto; overflow: auto; max-height: max(360px, calc(100vh - 330px)); border: 1px solid var(--border); border-radius: 8px; background: var(--panel); position: relative; }
.gantt-coin { position: sticky; top: 0; left: 0; z-index: 4; background: var(--panel); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8px 10px; font-weight: 600; font-size: 13px; }
.gantt-entete { position: sticky; top: 0; z-index: 3; background: var(--panel); border-bottom: 1px solid var(--border); height: 74px; }
.gantt-ligne-mois { position: relative; height: 22px; border-bottom: 1px solid var(--border); }
.gantt-ligne-jours { position: relative; height: 20px; }
.gantt-mois { position: absolute; top: 0; height: 22px; padding: 3px 6px; font-size: 12px; font-weight: 600; border-left: 1px solid var(--border); white-space: nowrap; overflow: hidden; }
.gantt-jour { position: absolute; top: 0; height: 20px; font-size: 12px; text-align: center; line-height: 20px; color: var(--muted); }
.gantt-jour.ferme { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.gantt-jalons { position: relative; height: 32px; }
.gantt-jalon { position: absolute; top: 4px; display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 12px; }
.gantt-jalon span { display: block; width: 11px; height: 11px; transform: rotate(45deg); background: var(--primary); }
.gantt-jalon.atteint span { background: var(--ok); }
.gantt-jalon.menace span { background: var(--danger); }
.gantt-jalon.menace b { color: var(--danger); }
.gantt-noms { position: sticky; left: 0; z-index: 2; background: var(--panel); border-right: 1px solid var(--border); }
.gantt-nom { position: absolute; left: 0; right: 0; height: 34px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 10px; border: none; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); background: transparent; color: var(--text); text-align: left; font-size: 13px; line-height: 1.15; border-radius: 0; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gantt-nom:hover, .gantt-nom:focus-visible { background: var(--hover); }
.gantt-nom.critique { box-shadow: inset 3px 0 0 var(--danger); }
.gantt-nom .mini { font-size: 12px; }
.gantt-corps { position: relative; }
.gantt-rangee { position: absolute; left: 0; right: 0; height: 34px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.gantt-ferme { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--muted) 10%, transparent); }
.gantt-aujourdhui { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--primary); z-index: 1; }
.gantt-ligne-jalon { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dotted var(--primary); opacity: .7; }
.gantt-ligne-jalon.menace { border-left-color: var(--danger); }
.gantt-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.gantt-fleche { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.gantt-fleche.critique { stroke: var(--danger); stroke-width: 1.8; }
.gantt-pointe { fill: var(--muted); }
.gantt-pointe.critique { fill: var(--danger); }
/* Barres : nom lisible (au moins 4,5:1) dans les deux themes. Clair :
   couleur pleine et texte blanc ; sombre : couleur claire du theme et
   texte fonce (sans ombre). */
.gantt-barre { position: absolute; height: 20px; border-radius: 5px; background: var(--primary); border: 1px solid var(--primary); color: #fff; font-size: 12px; line-height: 18px; overflow: hidden; white-space: nowrap; cursor: grab; touch-action: none; z-index: 1; }
:root[data-theme="sombre"] .gantt-barre { color: #121110; }
:root[data-theme="sombre"] .gantt-texte { text-shadow: none; }
.gantt-barre.critique { background: var(--danger); border-color: var(--danger); }
.gantt-barre.retard { outline: 2px solid color-mix(in srgb, var(--lock) 70%, transparent); outline-offset: 1px; }
.gantt-barre.terminee { background: var(--ok); border-color: var(--ok); cursor: pointer; }
.gantt-barre.repere { width: 14px !important; height: 14px; top: auto; margin-top: 3px; transform: rotate(45deg); border-radius: 2px; }
.gantt-barre.glisse { opacity: .8; cursor: grabbing; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.gantt-avance { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(0,0,0,.22); }
.gantt-texte { position: relative; padding: 0 6px; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.gantt-base { position: absolute; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 55%, transparent); }
.gantt-legende { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 8px; }
.gantt-legende .leg { display: inline-block; width: 18px; height: 9px; border-radius: 3px; }
.leg.critique { background: var(--danger); } .leg.normale { background: var(--primary); } .leg.terminee { background: var(--ok); }
.leg.retard { border: 2px solid var(--lock); } .leg.base { height: 4px !important; background: var(--muted); }
/* Carte detaillee */
.carte-card { width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 40px); }
.carte-card .modal-header h2 { flex: 1; }
.carte-card .modal-header input { width: 100%; font-size: 17px; font-weight: 600; }
.carte-corps { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.carte-corps h5 { margin: 8px 0 0; font-size: 14px; }
.carte-etat { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; }
.carte-attend { color: var(--lock); }
.carte-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--hover); font-size: 13px; }
.carte-dates div { display: flex; flex-direction: column; }
.carte-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.carte-grille .carte-large { grid-column: 1 / -1; }
.carte-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.carte-liste li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.carte-ajout { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.carte-ajout textarea { flex: 1 1 280px; }
.carte-comms { display: flex; flex-direction: column; gap: 6px; }
.carte-comm { padding: 6px 8px; background: var(--hover); border-radius: 6px; font-size: 13px; }
.carte-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.carte-etiquettes input { width: 160px; }
.carte-pied { border-top: 1px solid var(--border); padding-top: 10px; }
/* Lot 9 : fiche de tache (plan calcule, travail + unite, personnes et parts,
   sous-taches, pause, apercu, tache perso). Couleurs du theme (contraste AA
   dans les deux themes). */
.carte-plan { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.carte-plan > div:first-child { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.carte-plan .muted.mini { font-size: 12.5px; }
.carte-plan button { align-self: flex-start; }
.carte-repartition { color: var(--text); overflow-wrap: anywhere; }
.carte-surcharge { padding: 4px 8px; border-radius: 6px; background: var(--ambre-fond); color: var(--ambre); font-weight: 600; }
.carte-impossible { flex-basis: 100%; padding: 6px 10px; border-radius: 6px; background: var(--rouge-fond); color: var(--rouge); line-height: 1.4; }
.carte-impossible b { font-weight: 700; margin-right: 4px; }
.carte-pause-etat { display: inline-flex; align-items: center; gap: 6px; color: var(--ambre); font-weight: 700; }
.carte-pause-etat .mx-ic { width: 14px; height: 14px; }
.carte-duree-reelle { color: var(--muted); }
.carte-travail-ligne { display: flex; gap: 6px; align-items: center; }
.carte-travail-ligne input { flex: 1 1 90px; min-width: 70px; }
.carte-travail-ligne select { flex: 0 1 auto; width: auto; }
.carte-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--violet-fond); color: var(--violet); font-size: 11px; font-weight: 700; flex: none; }
.carte-part input { width: 64px; }
.carte-part select { width: auto; }
.carte-st li .lien { font-weight: 600; text-align: left; }
.carte-st-form input[type="text"] { flex: 1 1 180px; }
.carte-st-form input[type="number"] { width: 90px; }
.carte-st-form select { width: auto; }
.carte-apercu { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 13px; max-width: 360px; }
.carte-parente { font-size: 13px; }
.badge-etat.carte-perso { background: var(--violet-fond); color: var(--violet); display: inline-flex; align-items: center; gap: 4px; }
.badge-etat.carte-badge-pause { background: var(--ambre-fond); color: var(--ambre); display: inline-flex; align-items: center; gap: 4px; }
.badge-etat .mx-ic { width: 14px; height: 14px; }
.plan-perso-note { display: inline-flex; align-items: center; gap: 5px; color: var(--violet); font-weight: 600; margin-right: 8px; }
.plan-perso-note .mx-ic { width: 14px; height: 14px; }
.plan-duree select { width: auto; margin-left: 4px; }
.pil-carte.pil-perso { margin-bottom: 8px; border-style: dashed; }
.pil-carte.pil-perso .mx-ic { width: 16px; height: 16px; vertical-align: -3px; color: var(--violet); }
.kanban-col.type-en_pause { background: color-mix(in srgb, var(--ambre) 7%, var(--hover)); }
.kanban-pause { color: var(--ambre); font-weight: 700; }
/* En pause : hachures de deux tons d'ambre plein, chacun d'au moins 4,5:1
   avec le texte (blanc en clair, fonce en sombre). */
.gantt-barre.en_pause { background: repeating-linear-gradient(135deg, var(--ambre-plein) 0 6px, color-mix(in srgb, var(--ambre-plein) 80%, #000) 6px 12px);
  border-color: var(--ambre-plein); color: var(--sur-ambre); }
:root[data-theme="sombre"] .gantt-barre.en_pause { background: repeating-linear-gradient(135deg, var(--ambre-plein) 0 6px, color-mix(in srgb, var(--ambre-plein) 80%, #fff) 6px 12px); }
.gantt-barre.en_pause .gantt-texte { text-shadow: none; }
.gantt-barre.principale { height: 10px; margin-top: 5px; border-radius: 2px 2px 6px 6px; }
.gantt-barre.principale .gantt-texte { display: none; }
.leg.pause { background: var(--ambre); }
/* Etiquettes des taches (.etiquette, .et-*) : web/meumo.css (couleurs des
   familles du theme et couleurs personnalisees, contraste AA). */
.plan-actions select { width: auto; }
.carte-etiquettes select { width: auto; }
.gantt-legende { font-size: 12.5px; }
/* Tableau de cartes */
.kanban { display: flex; gap: 12px; max-width: 100%; min-width: 0; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.kanban-col { flex: 0 0 272px; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; background: var(--hover); border: 1px solid var(--border); max-height: 72vh; }
.kanban-col.type-terminee { background: color-mix(in srgb, var(--ok) 7%, var(--hover)); }
.kanban-col.type-bloquee { background: color-mix(in srgb, var(--danger) 6%, var(--hover)); }
.kanban-col-tete { display: flex; align-items: center; gap: 6px; }
.kanban-col-tete b { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-col-tete { flex-wrap: wrap; }
.kanban-nb { color: var(--muted); font-size: 12px; }
.kanban-type { font-size: 12px; padding: 1px 6px; border-radius: 9px; border: 1px solid var(--border); color: var(--muted); }
.kanban-actions { margin-left: auto; display: inline-flex; gap: 2px; opacity: .55; }
.kanban-col:hover .kanban-actions, .kanban-actions:focus-within { opacity: 1; }
.kanban-cartes { display: flex; flex-direction: column; gap: 8px; min-height: 40px; overflow-y: auto; }
.kanban-carte { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--primary); box-shadow: 0 1px 2px rgba(0,0,0,.08); cursor: pointer; font-size: 13px; }
.kanban-carte:hover, .kanban-carte:focus-visible { border-color: var(--primary); outline: none; }
.kanban-carte.critique { border-left-color: var(--danger); }
.kanban-carte.terminee { border-left-color: var(--ok); opacity: .85; }
.kanban-carte.terminee .kanban-titre { text-decoration: line-through; }
.kanban-carte.deplace { opacity: .4; }
.kanban-titre { font-weight: 600; overflow-wrap: anywhere; }
.kanban-etiquettes { display: flex; flex-wrap: wrap; gap: 4px; }
.kanban-attend { color: var(--lock); font-size: 12px; }
.kanban-pied { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12px; }
.kanban-avatar { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--sur-principal); font-size: 12px; font-weight: 700; }
.kanban-deplacer select { width: 100%; font-size: 12px; padding: 2px 4px; }
.kanban-repere { height: 4px; border-radius: 2px; background: var(--primary); }
.kanban-ajout input, .kanban-nouvelle input { width: 100%; }
.kanban-nouvelle { background: transparent; border-style: dashed; }
.kanban-nouvelle form { display: flex; flex-direction: column; gap: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kanban-col-tete button { padding: 0 6px; min-width: 0; }
#pil-vue-planning { min-width: 0; max-width: 100%; }
/* Reseau des taches (PERT) */
.pert-legende { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; }
.pert-legende p { margin: 3px 0; }
.pert-legende > div { flex: 1 1 280px; }
.pert-exemple { flex: 0 0 auto; }
.pert-scroll { overflow: auto; max-height: 70vh; max-width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.pert { display: block; }
.pert-noeud { cursor: pointer; }
.pert-noeud text { font-size: 12px; fill: var(--text); }
.pert-noeud line { stroke: var(--border); }
.pert-cadre { fill: var(--panel); stroke: var(--primary); stroke-width: 1.5; }
.pert-noeud .pert-nom { font-size: 12.5px; font-weight: 600; }
.pert-noeud .pert-duree, .pert-noeud .pert-marge { font-weight: 600; }
.pert-noeud .pert-tard { fill: var(--muted); }
.pert-noeud.critique .pert-cadre { stroke: var(--danger); stroke-width: 2.5; fill: color-mix(in srgb, var(--danger) 6%, var(--panel)); }
.pert-noeud.critique .pert-marge { fill: var(--danger); }
.pert-noeud.terminee .pert-cadre { stroke: var(--ok); fill: color-mix(in srgb, var(--ok) 7%, var(--panel)); }
.pert-noeud.retard .pert-nom { fill: var(--danger); }
.pert-noeud[data-tache]:hover .pert-cadre, .pert-noeud[data-tache]:focus-visible .pert-cadre { stroke-width: 3; }
.pert-noeud:focus { outline: none; }
.pert-lien { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.pert-lien.critique { stroke: var(--danger); stroke-width: 2.5; }
.pert-pointe { fill: var(--muted); }
.pert-pointe.critique { fill: var(--danger); }
.pert-decalage { font-size: 12px; fill: var(--muted); }
/* Ressources, horaires, plan de charge */
.res-split { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); }
.res-liste { display: flex; flex-direction: column; gap: 6px; }
.res-liste h5 { margin: 10px 0 2px; }
.res-nouvelle { display: flex; flex-wrap: wrap; gap: 6px; }
.res-nouvelle input { flex: 1 1 140px; min-width: 0; }
.res-ligne { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); cursor: pointer; }
.res-ligne:hover, .res-ligne:focus-visible { border-color: var(--primary); }
.res-ligne.selection { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.res-ligne.inactive { opacity: .6; }
.res-icone { font-size: 18px; }
.res-nom { display: flex; flex-direction: column; min-width: 0; }
.res-nom b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.res-semaine { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; font-size: 13px; }
.res-horaires { margin-top: 18px; }
.res-horaires-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.res-horaire { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.res-horaire h5 { margin: 0; }
.res-horaire h5 input { width: 100%; font-weight: 600; }
.res-horaire-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.res-horaire-table th { text-align: left; width: 44px; font-weight: 600; padding: 2px 4px 2px 0; }
.res-horaire-table td { padding: 2px 0; }
.res-horaire-table input { width: 100%; font-size: 12.5px; padding: 3px 6px; }
.carte-part { width: 64px; padding: 2px 4px; }
.charge-barre { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.charge-barre label.mini { display: flex; flex-direction: column; gap: 2px; }
.charge-legende { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12px; color: var(--muted); margin-left: auto; }
.charge-pastille { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 6px; }
.charge-scroll { overflow: auto; max-width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.charge { border-collapse: separate; border-spacing: 0; font-size: 13px; }
.charge th, .charge td { padding: 4px; border-bottom: 1px solid var(--border); text-align: center; }
.charge thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; font-weight: 600; white-space: nowrap; }
.charge td.charge-nom { position: sticky; left: 0; background: var(--panel); text-align: left; white-space: nowrap; min-width: 170px; z-index: 1; }
.charge-case { position: relative; width: 74px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--hover); overflow: hidden; cursor: pointer; color: var(--text); }
.charge-case:focus-visible, .charge-case.choisie { outline: 2px solid var(--primary); outline-offset: 1px; }
.charge-remplie { position: absolute; left: 0; right: 0; bottom: 0; opacity: .55; }
.charge-texte { position: relative; font-size: 12px; font-weight: 600; }
.charge-case.faible .charge-remplie, .charge-pastille.faible { background: #4caf7a; }
.charge-case.moyen .charge-remplie, .charge-pastille.moyen { background: #3f88d9; }
.charge-case.plein .charge-remplie, .charge-pastille.plein { background: #e09a2c; }
.charge-case.sur .charge-remplie, .charge-pastille.sur { background: var(--danger); }
.charge-case.sur .charge-remplie { height: 100% !important; }
.charge-detail { margin-top: 10px; }
#pil-espace-ressources, #pil-espace-charge { min-width: 0; max-width: 100%; }
@media (max-width: 760px) { .res-split { grid-template-columns: 1fr; } }
.res-horaires > p.muted, .res-horaire .muted, .res-liste .muted.mini, .res-nom .muted, .res-semaine .muted.mini, #res-detail .muted.mini, .charge .muted.mini, .charge-detail .muted.mini { font-size: 12.5px; }
.muted.mini { font-size: 12.5px; }
.charge button.charge-case, .res-liste button.res-ligne { background: var(--hover); color: var(--text); }
.res-liste button.res-ligne { background: var(--panel); }
/* Habilitations, ordres de fabrication, planning atelier */
.res-habil { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.res-habil label { display: inline-flex; gap: 6px; align-items: center; }
.of-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.of-form label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.of-ops td { vertical-align: top; }
.of-ops select { max-width: 170px; min-width: 7.5em; width: auto; }
.of-ops .of-temps input { width: 5.5em; }
.of-ops tr.of-critique td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.of-op-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.atelier-scroll { overflow: auto; max-width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.atelier { display: flex; flex-direction: column; min-width: max-content; }
.atelier-tete, .atelier-ligne { display: flex; border-bottom: 1px solid var(--border); }
.atelier-nom { flex: 0 0 190px; padding: 6px 8px; position: sticky; left: 0; background: var(--panel); z-index: 2; border-right: 1px solid var(--border); font-size: 13px; }
.atelier-jours { display: flex; }
.atelier-jours span { width: var(--l); text-align: center; font-size: 12px; color: var(--muted); padding: 4px 0; }
.atelier-jours span.we { background: var(--hover); }
.atelier-piste { position: relative; height: 44px; }
.atelier-we { position: absolute; top: 0; bottom: 0; background: var(--hover); }
.atelier-barre { position: absolute; top: 9px; height: 26px; padding: 0 4px; border-radius: 5px; border: none; font-size: 12px; font-weight: 600; color: #fff; background: #3f88d9; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; z-index: 1; }
.atelier-barre.en_cours { background: #2f9e66; }
.atelier-barre.critique { box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.atelier-barre.retard { background: var(--danger); }
.atelier-barre:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
/* Maintenance */
.mnt-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 16px; }
.mnt-machine { padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); display: flex; flex-direction: column; gap: 6px; }
.mnt-machine.panne { border-color: var(--danger); box-shadow: inset 4px 0 0 var(--danger); }
.mnt-machine header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: center; }
.mnt-machine h5 { margin: 6px 0 0; }
.mnt-etat { font-size: 12.5px; font-weight: 600; }
.mnt-etat.ok { color: var(--ok); }
.mnt-etat.panne { color: var(--danger); }
.mnt-etat.prevue { color: var(--lock); }
.mnt-compteur { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.mnt-releve { display: inline-flex; gap: 4px; }
.mnt-releve input { width: 90px; }
.mnt-plan-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; font-size: 13px; }
.mnt-plan-form label { display: flex; flex-direction: column; gap: 2px; }
.mnt-plan-form .carte-large, .mnt-plan-form .res-actions { grid-column: 1 / -1; }
#mnt-histo summary { cursor: pointer; margin: 12px 0 6px; font-weight: 600; }
.atelier-entretien { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 13px;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--lock) 30%, transparent) 0 6px, transparent 6px 12px); border: 1px solid var(--lock); }
.atelier-entretien.panne { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--danger) 30%, transparent) 0 6px, transparent 6px 12px); border-color: var(--danger); }
.charge-pastille.mnt { background: repeating-linear-gradient(45deg, var(--lock) 0 3px, transparent 3px 6px); border: 1px solid var(--lock); }
/* Impression 3D */
.i3d-sections { margin-top: 0; }
.i3d-groupe { margin-bottom: 14px; }
.i3d-profils { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.i3d-profils .i3d-groupe { padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
button.lien { background: none; border: none; padding: 0; color: var(--primary-texte); text-decoration: underline; cursor: pointer; font: inherit; }
.i3d-json { width: 100%; font-family: ui-monospace, monospace; font-size: 12px; }
.i3d-matieres { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.i3d-reglages summary { cursor: pointer; font-weight: 600; margin: 8px 0; }
.i3d-suivi { padding: 10px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 8%, var(--panel)); border: 1px solid var(--border); margin: 8px 0; }
.i3d-depot { display: inline-flex; align-items: center; cursor: pointer; border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 13px; }
.i3d-tr-form label { min-width: 0; flex: 1 1 320px; }
.i3d-tr-form input { width: 100%; }
p.mini, span.mini, div.mini { font-size: 12.5px; }
/* Usinage CNC */
.cnc-securite { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--panel)); font-size: 13px; }
.cnc-alertes li { font-size: 13px; }
.ok-texte { color: var(--ok); }
.cnc-env td, .cnc-env th { text-align: right; }
.cnc-env td:first-child, .cnc-env th:first-child { text-align: left; }
.cnc-courses { display: flex; flex-wrap: wrap; gap: 6px 16px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.cnc-courses span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.cnc-courses input { width: 76px; }
.cnc-m-form { align-items: flex-end; }

/* Fiche de tache : deux colonnes, enregistrement automatique */
.carte-card .modal-header { gap: 10px; }
.carte-enr { font-size: 12px; color: var(--muted); white-space: nowrap; }
.carte-enr.ok { color: var(--ok); }
.carte-enr.erreur { color: var(--danger); font-weight: 600; }
.carte-enr.en-cours { color: var(--primary); }
.carte-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.carte-principale, .carte-laterale { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.carte-bloc { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.carte-bloc textarea { font-weight: normal; min-height: 90px; }
.carte-section { display: flex; flex-direction: column; gap: 6px; }
.carte-section h5 { margin: 0; }
.carte-laterale .carte-grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.carte-points li { flex-wrap: nowrap; }
.carte-point-lib { flex: 1; min-width: 0; border-color: transparent; background: transparent; padding: 3px 6px; }
.carte-point-lib:hover, .carte-point-lib:focus { border-color: var(--border); background: var(--panel); }
.carte-point-lib.fait, .carte-points .fait { text-decoration: line-through; color: var(--muted); }
.carte-dec input { width: 62px; }
button.etiquette { border: none; cursor: pointer; }
button.etiquette:hover { filter: brightness(1.1); box-shadow: 0 0 0 2px var(--border); }
.carte-etiq-edit { display: inline-flex; gap: 4px; align-items: center; }
.carte-etiq-edit input { width: 130px; }
.carte-etiq-edit select { width: auto; }
.carte-comm-actions { float: right; display: inline-flex; gap: 2px; }
.carte-comm-texte { white-space: pre-wrap; margin-top: 2px; }
@media (max-width: 820px) { .carte-cols { grid-template-columns: 1fr; } }

/* Pieces jointes (taches, OF) */
.pj-zone { display: flex; flex-direction: column; gap: 8px; border-radius: 8px; transition: background .15s; }
.pj-zone.pj-survol { outline: 2px dashed var(--primary); outline-offset: 2px; background: color-mix(in srgb, var(--primary) 6%, transparent); }
.pj-zone.pj-envoi { opacity: .6; pointer-events: none; }
.pj-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pj { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.pj-icone { font-size: 20px; width: 44px; text-align: center; flex: none; }
.pj-vignette { width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; flex: none; background: var(--hover); cursor: zoom-in; display: flex; align-items: center; justify-content: center; }
.pj-vignette img { width: 100%; height: 100%; object-fit: cover; }
.pj-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pj-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-nom[data-pj-renommer] { cursor: text; }
.pj-nom[data-pj-renommer]:hover { text-decoration: underline dotted; }
.pj-renommer { width: 100%; }
.pj-ajout { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pj-depot { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px dashed var(--border); border-radius: 8px; cursor: pointer; font-size: 13px; }
.pj-depot:hover, .pj-depot:focus { border-color: var(--primary); }
.pj-article { display: inline-flex; gap: 6px; align-items: center; }
.pj-article input { width: 180px; }
.pj-visionneuse .modal-card { width: min(1100px, calc(100vw - 32px)); }
.pj-visionneuse .modal-header { gap: 8px; }
.pj-visionneuse .modal-header h2 { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-visionneuse img { max-width: 100%; max-height: calc(100vh - 160px); display: block; margin: 0 auto; }
.carte-section form.carte-ajout, .carte-section .carte-ajout { flex-wrap: nowrap; align-items: center; }
.carte-section form.carte-ajout input[type=text] { flex: 1 1 auto; width: auto; min-width: 0; }
.carte-section form.carte-ajout select { width: auto; flex: none; }
.carte-section form.carte-ajout button { flex: none; }
.carte-section .carte-ajout:not(form) { flex-wrap: wrap; align-items: flex-end; }
label.carte-dec { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: normal; }
.pj-texte > * { align-self: flex-start; text-align: left; max-width: 100%; }
.pj-article input { flex: 1 1 140px; }
.carte-card { display: flex; flex-direction: column; overflow: hidden; }
.carte-card > .modal-header { flex: none; }
.carte-card > .carte-corps { flex: 1 1 auto; min-height: 0; }
.carte-liste li label.carte-dec { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; }
/* Fiche OF : temps et instructions modifiables */
.of-temps { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; font-weight: normal; color: inherit; }
.of-temps input { width: 76px; }
button.of-instr { display: block; margin-top: 3px; padding: 2px 6px; border: 1px dashed transparent; background: none; color: var(--muted); font-size: 12px; text-align: left; white-space: pre-wrap; cursor: text; border-radius: 6px; max-width: 360px; }
button.of-instr:hover, button.of-instr:focus { border-color: var(--border); color: var(--text); }
button.of-instr.vide { font-style: italic; }
.of-instr-texte { white-space: pre-wrap; color: var(--muted); }
.of-instr-edit { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.of-instr-edit span { display: flex; gap: 4px; }
.ofd-champs { margin-bottom: 4px; }

/* Planning : barre d'outils (ajout, actions, filtres, zoom) */
.plan-outils { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 8px; }
.plan-ligne { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.plan-nouvelle { display: flex; gap: 8px; align-items: center; flex: 1 1 340px; max-width: 560px; }
.plan-nouvelle input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; }
.plan-nouvelle label.plan-duree { flex-direction: row; align-items: center; gap: 4px; white-space: nowrap; font-weight: normal; color: var(--muted); font-size: 12px; }
.plan-nouvelle label.plan-duree input { width: 64px; }
.plan-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.plan-filtres { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.plan-filtres-titre { color: var(--muted); font-size: 12px; font-weight: 600; margin-right: 2px; }
.plan-puce { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 12.5px; cursor: pointer; line-height: 1.5; }
.plan-puce b { font-weight: 700; }
.plan-puce:hover { border-color: var(--primary); }
.plan-puce.active { background: var(--primary); border-color: var(--primary); color: var(--sur-principal); }
select.plan-puce-select { width: auto; max-width: 220px; padding: 3px 26px 3px 10px; border-radius: 999px; font-size: 12.5px; }
select.plan-puce-select.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.plan-zoom { display: flex; align-items: center; gap: 4px; }
.plan-zoom input[type=range] { width: 130px; }
.plan-zoom select { width: auto; font-size: 12.5px; padding: 3px 24px 3px 8px; }
.plan-zoom [data-zoom] { min-width: 28px; font-weight: 700; }
.gantt-texte-dehors { position: absolute; font-size: 12px; white-space: nowrap; color: var(--text); pointer-events: none; z-index: 1; }
.gantt-ferme.fermeture { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warning, #c2410c) 14%, transparent) 0 4px, transparent 4px 8px); }
.gantt-corps { cursor: grab; }
.gantt-corps.deplacement { cursor: grabbing; user-select: none; }
.gantt-corps .gantt-barre { cursor: pointer; }

/* Plein ecran du planning */
.plan-plein-ecran { position: fixed; inset: 0; z-index: 900; background: var(--bg); padding: 12px 16px; overflow: auto; }
.plan-plein-ecran .gantt { max-height: calc(100vh - 190px); }
body.plan-plein-actif { overflow: hidden; }

/* Liste des projets masquable */
.pil-split.pil-liste-masquee { grid-template-columns: 1fr; }
.pil-split.pil-liste-masquee > #pil-liste { display: none; }
#pil-detail .om-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#pil-liste-bascule { flex: none; }

/* Jours de fermeture */
.fermetures-card { width: min(680px, calc(100vw - 32px)); }
.fermeture-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.fermeture-form .ferme-lib { flex: 1 1 200px; }
.fermetures-liste li { padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
@media (max-width: 700px) {
  .plan-zoom input[type=range] { width: 80px; }
  .plan-nouvelle { max-width: none; }
}
@media (max-width: 1100px) { #pil-liste-bascule { display: none; } .pil-split.pil-liste-masquee > #pil-liste { display: flex; } }
/* Dossier lie a un projet / une famille */
.dossier-choix { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin: 4px 0; display: flex; flex-direction: column; gap: 6px; flex-basis: 100%; min-width: 0; }
.dossier-choix legend { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 4px; }
label.dossier-option { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: normal; font-size: 13px; color: var(--text); }
label.dossier-option input[type=radio] { width: auto; margin: 0; }
label.dossier-option select { width: auto; max-width: 100%; flex: 0 1 280px; }
.inline-form .dossier-choix { width: 100%; }
.hier-dossier { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.hier-dossier.vide { font-style: italic; opacity: .8; }
.hier-dossier-form { margin: 6px 0 10px 18px; display: flex; flex-direction: column; gap: 6px; }
.hier-dossier-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dossier-lien { font-size: 12px; margin-left: 4px; opacity: .75; }
#upload-destination { font-weight: normal; }
label.dossier-option > span { flex: 0 0 auto; white-space: nowrap; }
label.dossier-option select { flex: 1 1 200px; }
@media (max-width: 600px) { label.dossier-option > span { white-space: normal; flex: 1 1 100%; } }
label.dossier-option { min-width: 0; max-width: 100%; }
label.dossier-option select { min-width: 0; width: 0; flex: 1 1 160px; text-overflow: ellipsis; }
label.dossier-option input[type=radio] { align-self: center; }
/* Rangement : schemas, familles d'un dossier, import */
.schemas-card { width: min(980px, calc(100vw - 32px)); }
.schemas-corps { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.schemas-liste { display: flex; flex-direction: column; gap: 6px; }
.schemas-liste > button { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.schemas-liste > button.active { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.schemas-edition { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sch-noeuds td { vertical-align: top; }
.sch-noeuds .sch-chemin { width: 100%; min-width: 140px; }
.sch-familles { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sch-familles select { width: auto; font-size: 12.5px; }
.sch-nouvelle-fam { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.sch-nouvelle-fam input[type=text] { width: 170px; }
.famdos-card { width: min(560px, calc(100vw - 32px)); }
.upload-rangement { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--warning, #c2410c) 45%, var(--border)); background: color-mix(in srgb, var(--warning, #c2410c) 7%, var(--panel)); }
.famille-auto { flex-basis: 100%; }
@media (max-width: 700px) { .schemas-corps { grid-template-columns: 1fr; } }
.upload-rangement label.dossier-option { flex-wrap: nowrap; align-items: flex-start; }
.upload-rangement label.dossier-option > span { white-space: normal; flex: 1 1 auto; min-width: 0; }
.upload-rangement label.dossier-option input { margin-top: 3px; }
.suppr-conflits { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--warning, #c2410c) 45%, var(--border)); background: color-mix(in srgb, var(--warning, #c2410c) 6%, var(--panel)); }
.suppr-conflits label.dossier-option > span { white-space: normal; }

/* ----- Planning global : projet + sous-projets ----- */
.gantt-nom { padding-left: calc(10px + var(--niveau, 0) * 16px); }
.gantt-nom.gantt-groupe { flex-direction: column; font-weight: 700; background: color-mix(in srgb, var(--primary) 7%, var(--panel)); padding-left: calc(24px + var(--niveau, 0) * 16px); }
.gantt-nom.gantt-groupe:hover, .gantt-nom.gantt-groupe:focus-visible { background: color-mix(in srgb, var(--primary) 14%, var(--panel)); }
.gantt-nom .gantt-pli { position: absolute; left: calc(8px + var(--niveau, 0) * 16px); top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--primary); }
.gantt-nom.gantt-groupe .mini { font-weight: 400; }
.gantt-rangee.groupe { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.gantt-resume { position: absolute; height: 12px; background: color-mix(in srgb, var(--text) 55%, var(--panel)); border-radius: 2px; z-index: 1; overflow: visible; }
.gantt-resume::before, .gantt-resume::after { content: ''; position: absolute; bottom: -6px; border: 5px solid transparent; border-top-color: color-mix(in srgb, var(--text) 55%, var(--panel)); }
.gantt-resume::before { left: -1px; border-left-color: color-mix(in srgb, var(--text) 55%, var(--panel)); }
.gantt-resume::after { right: -1px; border-right-color: color-mix(in srgb, var(--text) 55%, var(--panel)); }
.gantt-resume .gantt-avance { position: absolute; inset: 0 auto 0 0; background: var(--ok); opacity: .75; border-radius: 2px; }
.gantt-resume.critique { background: color-mix(in srgb, var(--danger) 75%, var(--panel)); }
.gantt-resume.retard { outline: 2px solid color-mix(in srgb, var(--lock) 70%, transparent); outline-offset: 1px; }
.plan-projet { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid color-mix(in srgb, var(--primary) 55%, var(--border)); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--panel)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-projet::before { content: '◆ '; font-size: 12px; }
.plan-filtres-projets { display: inline-flex; flex-wrap: wrap; gap: 4px; padding-left: 8px; margin-left: 4px; border-left: 1px solid var(--border); }
.plan-puce.plan-puce-projet:not(.active) { opacity: .6; text-decoration: line-through; }
#plan-projet { width: auto; max-width: 200px; }
.pert-sp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.pert-groupe .pert-cadre { fill: color-mix(in srgb, var(--primary) 8%, var(--panel)); stroke: var(--primary); stroke-width: 1.5; }
.pert-groupe .pert-pile { opacity: .5; }
.pert-groupe .pert-groupe-lib { font-size: 12px; fill: var(--primary); font-weight: 600; }
.pert-groupe .pert-avance-fond { fill: var(--border); }
.pert-groupe .pert-avance { fill: var(--ok); }
.pert-groupe:hover .pert-cadre, .pert-groupe:focus-visible .pert-cadre { stroke-width: 3; }
.pert-noeud .pert-projet { font-size: 12px; fill: var(--primary); }
.hier-dep-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 8px 28px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.hier-dep-form label { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hier-dep-form select { width: auto; max-width: 320px; }
/* Liste des projets : sous-projets en retrait, repliables */
.pil-ligne { display: flex; align-items: stretch; gap: 4px; margin-left: calc(var(--niveau, 0) * 18px); position: relative; }
.pil-ligne > .pil-carte { flex: 1 1 auto; min-width: 0; }
.pil-ligne[style*="--niveau:1"], .pil-ligne[style*="--niveau:2"], .pil-ligne[style*="--niveau:3"], .pil-ligne[style*="--niveau:4"] { border-left: 2px solid color-mix(in srgb, var(--primary) 30%, var(--border)); padding-left: 6px; }
.pil-plier { flex: none; width: 24px; padding: 0; border-radius: 6px; font-size: 12px; color: var(--primary); }
.pil-plier-vide { flex: none; width: 24px; }
.pil-ariane { font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.pil-ariane .lien { background: none; border: none; padding: 0; color: var(--primary-texte); cursor: pointer; font-size: 12.5px; }
.pil-ariane .lien:hover { text-decoration: underline; }
.pil-sous-projets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 4px; }
.pil-sp { cursor: pointer; border: 1px solid var(--border); }
.pil-sp:hover { border-color: var(--primary); color: var(--primary); }
.pil-global { margin: 6px 0 2px; }
/* Jalons transverses, creation d'un sous-projet */
.pil-sp-form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pil-sp-form input { width: 220px; max-width: 100%; }
.pil-attend { margin-top: 4px; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pil-attend-choix { flex-basis: 100%; }
.pil-attend-choix summary { cursor: pointer; color: var(--primary); font-size: 13px; }
.pil-attend-liste { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 2px; }
.pil-attend-liste label { display: flex; gap: 6px; align-items: center; padding-left: calc(var(--niveau, 0) * 18px); font-size: 13px; font-weight: 400; }
.pil-attend-form { margin: 6px 0 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
/* Matrice : reporter un changement sur d'autres elements */
.mc-prop-card { max-width: 640px; }
.mc-prop { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.mc-prop h4 { margin: 0 0 4px; font-size: 14px; }
.mc-prop-outils { display: flex; gap: 6px; margin: 6px 0; }
.mc-prop-liste { display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow: auto; }
.mc-prop-liste label { display: flex; gap: 6px; align-items: center; font-weight: 400; font-size: 13px; }
.mc-prop-card .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 0 18px 16px; }
/* Gantt : numeros de semaine */
.gantt-entete.avec-semaines { height: 92px; }
.gantt-ligne-semaines { position: relative; height: 18px; border-bottom: 1px solid var(--border); }
.gantt-semaine { position: absolute; top: 0; height: 18px; line-height: 18px; font-size: 12px; color: var(--muted); padding-left: 4px; border-left: 1px solid var(--border); white-space: nowrap; overflow: hidden; }
/* Ordre des colonnes (glisser un titre) */
thead th[draggable="true"] { cursor: grab; }
thead th.col-deplacee { opacity: .45; }
thead th.col-cible-g { box-shadow: inset 3px 0 0 var(--primary); }
thead th.col-cible-d { box-shadow: inset -3px 0 0 var(--primary); }
.col-menu { position: fixed; z-index: 400; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; }
.col-menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 7px 10px; border-radius: 6px; color: var(--text); font-size: 13px; cursor: pointer; }
.col-menu button:hover, .col-menu button:focus-visible { background: var(--hover); }
/* Personnes ayant des droits propres sur un projet */
.pil-personnes { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.pil-personnes h5 { margin: 0 0 8px; font-size: 14px; }
.pil-personnes-liste { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 4px; }
.pil-personnes-liste li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pil-personne-nom { flex: 1 1 220px; }
.pil-personnes-liste select { width: auto; }
/* Acces restreint (projet confidentiel) : cadenas, interrupteur, equipe */
.cadenas { font-size: 12px; margin-left: 4px; }
label.projet-restreint { flex-wrap: nowrap; align-items: flex-start; }
label.projet-restreint > span { white-space: normal; flex: 1 1 auto; min-width: 0; }
label.projet-restreint input { width: auto; margin: 2px 0 0; }
.pil-confidentialite { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; margin: 6px 0 2px; font-size: 13px; }
.pil-confidentialite label { display: inline-flex; flex-direction: row; gap: 6px; align-items: center; font-weight: normal; font-size: 13px; color: var(--text); }
.pil-confidentialite input[type=checkbox] { width: auto; margin: 0; }
.pil-confidentialite select { width: auto; max-width: 100%; }
.pil-cadenas { display: inline-flex; gap: 4px; align-items: center; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--hover); font-size: 12px; font-weight: normal; vertical-align: middle; margin-left: 6px; }
.pil-equipe-form { margin-top: 6px; }
/* Fenetres de dialogue meumo (confirmer / demander) */
.dialogue-mx { z-index: 500; }
.dialogue-carte { width: 460px; }
.dialogue-message { white-space: pre-line; margin: 0 0 10px; line-height: 1.45; }
.dialogue-saisie { width: 100%; }
/* Fichiers joints a une demande (dialogue « Demander une modification ») */
.dlg-fichiers { margin-top: 10px; }
.dlg-fichiers-ajout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dlg-fichiers-ajout [data-dlg-joindre] { display: inline-flex; align-items: center; gap: 6px; }
.dlg-fichiers-liste { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dlg-fichiers-liste li { display: flex; align-items: center; gap: 8px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.dlg-fichier-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialogue-carte.dlg-survol { outline: 2px dashed var(--primary); outline-offset: -6px; }
.dialogue-boutons { display: flex; justify-content: flex-end; gap: 8px; padding: 0 18px 16px; }
/* Sauvegardes : mot de passe ressaisi, restauration, attente du redemarrage */
.fenetre-sauvegarde label { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; font-size: 13px; }
.fenetre-sauvegarde .avertissement { margin: 10px 0; font-size: 13px; line-height: 1.45; }
.fenetre-sauvegarde label.case-a-cocher { flex-direction: row; align-items: flex-start; gap: 8px; }
.acc-alerte { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fenetre-erreur { margin: 10px 0 0; }
.fenetre-erreur:empty { display: none; }
.restauration-attente { z-index: 600; }
.restauration-attente progress { width: 100%; margin: 4px 0 12px; accent-color: var(--primary); }
#adm-cle-avertissement { margin: 8px 0; }
#adm-cle-avertissement p { margin: 0 0 8px; }
button.danger-plein { background: var(--rouge-plein); border: 1px solid var(--danger); color: var(--sur-rouge); }
button.danger-plein:hover { filter: brightness(1.08); }
/* Fenetre de signature electronique (mot de passe ressaisi) */
.sig-form { display: flex; flex-direction: column; gap: 10px; }
.sig-form label { display: flex; flex-direction: column; gap: 3px; }
.sig-form label[hidden] { display: none; }
/* Etat d'une signature (onglet Validations, verification de la chaine) */
.sig-etat { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; }
.sig-etat.ok { color: var(--ok); }
.sig-etat.ko { color: var(--danger); }
.sig-etat.ancien { color: var(--muted); font-weight: 400; }
.sig-verif { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.sig-verif.ok { border-color: var(--ok); }
.sig-verif.ko { border-color: var(--danger); }
.sig-verif ul { margin: 6px 0 0 18px; padding: 0; }
.sig-verif b.ok { color: var(--ok); }
.sig-verif b.ko { color: var(--danger); }
.sig-verif code { font-size: 12px; letter-spacing: .5px; }
.sig-verif #btn-sig-complet { margin-top: 8px; }
/* Menu « ⋯ » des actions secondaires */
.menu-plus { position: relative; display: inline-flex; }
.menu-plus-bouton { font-weight: 700; letter-spacing: 1px; min-width: 30px; }
.menu-plus-liste { position: absolute; right: 0; top: calc(100% + 4px); z-index: 300; min-width: 190px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; }
.menu-plus-liste[hidden] { display: none; }
.menu-plus-liste.vers-haut { top: auto; bottom: calc(100% + 4px); }
.menu-plus-liste button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 7px 10px; border-radius: 6px; color: var(--text); font-size: 13px; cursor: pointer; white-space: nowrap; }
.menu-plus-liste button:hover, .menu-plus-liste button:focus-visible { background: var(--hover); }
.menu-plus-liste button.danger { color: var(--danger); }
/* ----- Collaboration en direct ----- */
.mx-presence { display: inline-flex; align-items: center; gap: 0; margin-left: 10px; vertical-align: middle; }
.mx-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--mx-c); box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--mx-c); margin-left: -4px; overflow: hidden; cursor: default; position: relative; }
.mx-avatar:first-child { margin-left: 4px; }
.mx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mx-edite-par { outline: 2px solid var(--mx-c) !important; outline-offset: 1px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--mx-c) 18%, transparent) !important; }
.mx-porte-etiquette { position: relative; }
.mx-etiquette-presence { position: absolute; right: 4px; top: -8px; z-index: 5; background: var(--mx-c); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 4px 4px 4px 0; pointer-events: none; text-transform: none; letter-spacing: 0; }
.mx-change-distant { animation: mx-flash 1.6s ease-out; }
@keyframes mx-flash { 0% { box-shadow: 0 0 0 3px var(--mx-c); } 100% { box-shadow: 0 0 0 0 transparent; } }
.mx-conflit { margin-top: 6px; padding: 6px 8px; border-left: 3px solid var(--mx-c); background: color-mix(in srgb, var(--mx-c) 10%, var(--panel)); border-radius: 4px; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; text-transform: none; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .mx-change-distant { animation: none; } }
.modal.sans-animation, .modal.sans-animation > .modal-card { animation: none; }

/* ----------------------------- Cahier des charges ----------------------------- */
.view-tete label.cdc-projet { display: flex; flex-direction: row; gap: 8px; align-items: center; margin: 4px 0 8px; font-weight: 600; }
.view-tete label.cdc-projet select { width: auto; min-width: 220px; max-width: 360px; }
.cdc-barre .inline-form { display: flex; flex-direction: row; gap: 8px; align-items: center; flex: 1 1 420px; flex-wrap: nowrap; }
.cdc-barre .inline-form input { flex: 1; min-width: 0; }
.cdc-synthese { margin: 6px 0 10px; }
.cdc-barre { gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.cdc-barre input[type="text"] { min-width: 280px; }
.cdc-split { grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); }
.cdc-gauche { min-width: 0; overflow-x: auto; }
.cdc-table td { vertical-align: top; }
.cdc-table tr[data-ex] { cursor: pointer; }
.cdc-table tr.cdc-abandon td { opacity: .55; text-decoration: line-through; }
.cdc-table tr.cdc-abandon td.cdc-col-action { text-decoration: none; opacity: 1; }
.cdc-num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.cdc-indent { display: inline-block; padding-left: calc(var(--p, 0) * 18px); }
.cdc-col-action { width: 1%; white-space: nowrap; }
.badge-etat.etat-proposee, .badge-etat.etat-etude { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); color: var(--primary-texte); }
.badge-etat.etat-retenue { border-color: color-mix(in srgb, var(--ok) 60%, var(--border)); color: var(--ok); }
.badge-etat.etat-abandonnee { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); color: var(--danger); }
.cdc-sol { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--border); background: var(--hover); margin: 1px 2px; }
.cdc-sol-retenue { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.cdc-sol-abandonnee { border-color: color-mix(in srgb, var(--danger) 60%, var(--border)); text-decoration: line-through; opacity: .8; }
.cdc-couv { font-weight: 700; color: var(--muted); }
.cdc-couv.ok { color: var(--ok); }
.cdc-panneau h4 { margin-top: 0; }
.cdc-form { display: grid; gap: 8px; }
.cdc-form label { display: grid; gap: 3px; }
.cdc-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cdc-exigences { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; max-height: 220px; overflow: auto; display: grid; gap: 2px; }
.cdc-exigences label.cdc-case { display: flex; gap: 6px; align-items: flex-start; }
.cdc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cdc-docs { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 4px; }
.cdc-docs li { display: flex; gap: 6px; align-items: center; }
.cdc-cartes, .cdc-rex { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.cdc-carte { border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 8px; padding: 10px 12px; background: var(--panel); display: grid; gap: 4px; cursor: pointer; }
.cdc-rex .cdc-carte { cursor: default; }
.cdc-carte.selection, .fast-noeud.selection { outline: 2px solid var(--primary); outline-offset: 1px; }
.cdc-carte-retenue { border-left-color: var(--ok); }
.cdc-carte-abandonnee { border-left-color: var(--danger); }
.cdc-carte-tete { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cdc-raison { font-style: italic; }
/* Diagramme FAST : arbre horizontal (pourquoi <- / -> comment) */
.fast-zone { overflow: auto; padding: 8px 4px 16px; }
.fast-arbre, .fast-arbre ul { list-style: none; margin: 0; padding: 0; }
.fast-arbre li { display: flex; align-items: center; position: relative; padding: 4px 0 4px 28px; }
.fast-arbre > li { padding-left: 0; }
.fast-arbre ul { display: flex; flex-direction: column; position: relative; padding-left: 28px; }
.fast-arbre ul::before { content: ""; position: absolute; left: 0; top: 50%; width: 28px; border-top: 2px solid var(--border); }
.fast-arbre ul > li::before { content: ""; position: absolute; left: 0; top: 50%; width: 28px; border-top: 2px solid var(--border); }
.fast-arbre ul > li::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--border); }
.fast-arbre ul > li:first-child::after { top: 50%; }
.fast-arbre ul > li:last-child::after { bottom: 50%; }
.fast-arbre ul > li:only-child::after { display: none; }
.fast-noeud { min-width: 170px; max-width: 260px; border: 2px solid var(--primary); border-radius: 6px; padding: 6px 10px; background: var(--panel); cursor: pointer; display: grid; gap: 4px; flex-shrink: 0; }
.fast-arbre > li > .fast-noeud { border-width: 3px; font-weight: 600; }
.fast-noeud:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.fast-ex { font-size: 12px; color: var(--muted); }
.fast-ex::before { content: "Exigence "; }
.fast-sols { display: flex; flex-wrap: wrap; gap: 2px; }
@media (max-width: 1100px) { .cdc-split { grid-template-columns: 1fr; } }
/* Articles a reference provisoire */
.badge-provisoire { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--lock) 18%, transparent); color: var(--lock); border: 1px solid color-mix(in srgb, var(--lock) 50%, var(--border)); vertical-align: middle; }
.lien-reference { font-size: 12px; margin: 4px 0; }
/* « Valable jusqu'au » des documents (backend/echeances.py) : badge
   « expiré » (rouge), « aujourd'hui » et « J-n » dans les 30 jours (orange),
   dans la fiche, les listes d'articles et le bloc d'accueil « Échéances ». */
.badge-echeance { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.5; padding: 0 7px; border-radius: 999px; vertical-align: middle; white-space: nowrap;
  color: var(--lock); background: color-mix(in srgb, var(--lock) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lock) 45%, var(--border)); }
.badge-echeance.expire, .badge-echeance.aujourdhui { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.detail-header .badge-echeance { font-size: 12px; padding: 1px 8px; }
.fiche-echeance { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fiche-echeance-titre { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fiche-echeance-badge:empty { display: none; }
.fiche-echeance-reprendre { margin: 0; color: var(--muted); font-weight: normal; }
.fiche-echeance-ajouter { align-self: flex-start; font-size: 13px; margin-top: 18px; }
/* Fenetre « Deposer une nouvelle version » : date de la nouvelle version. */
.nv-echeance { display: flex; flex-direction: column; gap: 4px; }
.nv-echeance input[type="date"] { max-width: 200px; }
.nv-echeance-avant { margin: 0; }
.nv-echeance-conseil { display: block; }
/* Fenetre « Demander une validation » : revision sans date d'un document suivi. */
.valid-echeance { margin: 0; font-size: 13px; line-height: 1.45; }
.acc-echeances .badge-echeance { margin: 0 2px; }

/* ----------------------------- Qualite ----------------------------- */
.ql-grille-zone { overflow-x: auto; }
.ql-grille { min-width: 1500px; }
.ql-grille td { vertical-align: top; padding: 4px; }
.ql-grille textarea { width: 100%; min-width: 120px; resize: vertical; font: inherit; font-size: 13px; padding: 4px 6px; }
.ql-grille select { padding: 3px 4px; }
.ql-grille input[type="date"] { width: 132px; }
.ql-grille tr.ql-ligne-critique td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
.ql-grille tr.ql-clos td { opacity: .55; }
.ql-grille tr.ql-nouvelle input { width: 100%; }
.ql-c { text-align: center; }
.ql-crit { display: inline-block; min-width: 34px; padding: 2px 6px; border-radius: 6px; font-weight: 700; text-align: center; }
.ql-faible { background: color-mix(in srgb, var(--ok) 22%, transparent); }
.ql-moyen { background: color-mix(in srgb, #eab308 30%, transparent); }
.ql-eleve { background: color-mix(in srgb, #f97316 32%, transparent); }
.ql-critique { background: color-mix(in srgb, var(--danger) 35%, transparent); }
.ql-liens { min-width: 140px; }
.ql-liens .pil-chip { display: inline-block; margin: 1px 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-risques { display: grid; gap: 14px; }
.ql-matrice-bloc { max-width: 420px; }
.ql-matrice-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.ql-matrice { border-collapse: separate; border-spacing: 3px; }
.ql-matrice th { font-size: 12px; color: var(--muted); padding: 2px 6px; }
.ql-case { padding: 0; border-radius: 6px; }
.ql-case button { width: 56px; height: 40px; border: 0; background: transparent; font-weight: 700; font-size: 15px; cursor: pointer; color: var(--text); }
.ql-case.selection { outline: 2px solid var(--primary); }

/* Menu « Plus ▾ » de la barre de navigation (entrees qui ne tiennent pas) */
.nav-plus-liste { position: fixed; z-index: 1200; min-width: 200px; max-width: 280px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.nav-plus-liste[hidden] { display: none; }
.nav-plus-liste .nav-btn { color: var(--text); text-align: left; width: 100%; border-radius: 6px; padding: 8px 12px; }
.nav-plus-liste .nav-btn:hover, .nav-plus-liste .nav-btn:focus-visible { background: var(--hover); color: var(--text); }
.nav-plus-liste .nav-btn.active { background: var(--primary-plein); color: var(--sur-principal); }
.nav-plus-liste .nav-btn.hidden { display: none; }
.nav-plus-btn { flex: none; }
/* Barres d'outils des modules : libelles et champs sur une ligne */
.cdc-barre > label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }
.cdc-barre > label select { width: auto; max-width: 340px; }
.cdc-barre { display: flex; }
.cdc-barre > label.dossier-option { width: auto; margin: 0; }

/* ----------------------------- Agile ----------------------------- */
.ag { display: grid; gap: 14px; }
.ag-sprint { border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 10px; padding: 10px 14px; background: var(--panel); display: grid; gap: 8px; }
.ag-sprint.ag-en_cours { border-left-color: var(--ok); }
.ag-sprint-tete { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.ag-sprint-tete h5 { margin: 0; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.ag-sprint-tete input[type="date"] { width: 140px; }
.ag-actions { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.ag-sprint label.ag-objectif { display: flex; flex-direction: row; gap: 8px; align-items: center; font-weight: 600; font-size: 13px; text-align: left; }
.ag-objectif input { flex: 1; }
.ag-graphe { overflow-x: auto; }
.ag-burndown, .ag-velocite { width: 100%; max-width: 560px; height: auto; display: block; }
.ag-velocite { max-width: 360px; max-height: 200px; }
.ag-burndown text, .ag-velocite text { font-size: 12px; fill: var(--muted); }
.ag-velocite .ag-val { fill: var(--text); font-weight: 700; }
.ag-grille { stroke: var(--border); stroke-width: 1; }
.ag-ideal { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ag-reel { fill: none; stroke: var(--primary); stroke-width: 2.5; }
.ag-point { fill: var(--primary); }
.ag-engage { fill: color-mix(in srgb, var(--primary) 30%, transparent); }
.ag-realise { fill: var(--ok); }
.ag-legende { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.ag-legende span { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-left: 8px; }
.ag-l-ideal { border-top: 2px dashed var(--muted); height: 0 !important; }
.ag-l-reel { background: var(--primary); }
.ag-l-engage { background: color-mix(in srgb, var(--primary) 30%, transparent); height: 10px !important; }
.ag-l-realise { background: var(--ok); height: 10px !important; }
.ag-taches td { vertical-align: middle; }
.ag-taches tr.ag-fait td { opacity: .6; }
.ag-poignee { cursor: grab; color: var(--muted); width: 18px; user-select: none; }
.ag-taches tr.ag-tiree { opacity: .4; }
.ag-bas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .ag-bas { grid-template-columns: 1fr; } }
.ag-backlog h5, .ag-velo h5 { margin: 0 0 6px; font-size: 15px; }

/* ----------------------------- Mode atelier (tablette) ----------------------------- */
body.en-mode-atelier { overflow: hidden; }
/* Fenetres de dialogue (panne, demande de modification) au-dessus du mode atelier. */
body.en-mode-atelier .dialogue-mx { z-index: 1600; }
.mode-atelier { position: fixed; inset: 0; z-index: 1500; background: var(--bg); color: var(--text); display: flex; flex-direction: column; font-size: 18px; }
.ma-tete { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--gradient); color: #fff; flex: none; }
.ma-tete h1 { margin: 0; font-size: 24px; flex: 1; display: flex; align-items: center; gap: 10px; }
.ma-logo { font-weight: 800; letter-spacing: 1px; }
.ma-nom { opacity: .85; }
.ma-corps { flex: 1; overflow: auto; padding: 18px; display: grid; gap: 16px; align-content: start; }
.ma-btn { min-height: 56px; min-width: 56px; padding: 10px 22px; font-size: 19px; font-weight: 700; border-radius: 12px; border: 0; cursor: pointer; background: var(--primary-plein); color: var(--sur-principal); }
.ma-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--primary); }
.ma-secondaire { background: color-mix(in srgb, var(--text) 12%, transparent); color: inherit; }
.ma-tete .ma-secondaire { background: rgba(255,255,255,.18); color: #fff; }
.ma-go { background: var(--primary-plein); }
.ma-ok { background: var(--ok); }
.ma-panne { background: var(--danger); }
.ma-large { width: 100%; }
.ma-saisie { display: flex; gap: 10px; }
.ma-saisie input { flex: 1; min-height: 56px; font-size: 20px; padding: 0 16px; border-radius: 12px; }
.ma-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ma-carte { display: grid; gap: 6px; text-align: left; padding: 18px; border-radius: 14px; border: 2px solid var(--border); background: var(--panel); color: var(--text); font-size: 17px; cursor: pointer; min-height: 120px; }
.ma-carte.ma-retard { border-color: var(--danger); }
.ma-carte-titre { font-size: 22px; font-weight: 800; }
.ma-carte-etat { color: var(--muted); }
.ma-badge-retard { display: inline-block; justify-self: start; background: var(--rouge-plein); color: var(--sur-rouge); border-radius: 999px; padding: 2px 10px; font-size: 14px; font-weight: 700; }
.ma-of-tete { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.ma-gros { font-size: 26px; font-weight: 800; }
.ma-statut { font-weight: 700; }
.ma-op { border: 2px solid var(--border); border-left-width: 8px; border-radius: 14px; padding: 14px 18px; background: var(--panel); display: grid; gap: 10px; }
.ma-op.ma-en_cours { border-left-color: var(--primary); }
.ma-op.ma-terminee { border-left-color: var(--ok); opacity: .8; }
.ma-op-tete { display: flex; align-items: center; gap: 12px; }
.ma-op-tete h2 { margin: 0; font-size: 22px; flex: 1; }
.ma-op-num { font-weight: 800; color: var(--muted); font-size: 20px; }
.ma-op-etat { font-weight: 700; }
.ma-op-info { color: var(--muted); }
.ma-instructions { color: var(--text); background: var(--hover); padding: 8px 12px; border-radius: 8px; white-space: pre-wrap; }
.ma-barre { position: relative; height: 28px; border-radius: 14px; background: var(--hover); overflow: hidden; }
.ma-barre span { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--ok) 70%, transparent); }
.ma-barre b { position: relative; display: block; text-align: center; line-height: 28px; font-size: 15px; }
.ma-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ma-vide, .ma-attente, .ma-erreur { font-size: 19px; color: var(--muted); }
.ma-demande { margin-top: 18px; }
.ma-aide { font-size: 16px; color: var(--muted); margin: 6px 0 0; }
.ma-erreur { color: var(--danger); }
.ma-kiosque { display: flex; gap: 10px; align-items: center; font-size: 16px; color: var(--muted); }
.ma-kiosque input { width: 26px; height: 26px; }
.ma-scanner { position: fixed; inset: 0; z-index: 1600; background: #000; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.ma-scanner video { max-width: 92vw; max-height: 70vh; border-radius: 12px; }
.ma-impression { position: fixed; width: 0; height: 0; border: 0; visibility: hidden; }

/* ----------------------------- Assistant de demarrage ----------------------------- */
.assistant-carte { width: min(820px, 96vw); max-height: 92vh; display: flex; flex-direction: column; }
.assistant-carte .modal-body { overflow: auto; }
.as-etapes { list-style: none; display: flex; gap: 8px; padding: 0; margin: 6px 0 0; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.as-etapes li { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); }
.as-etapes li.active { background: var(--primary-plein); color: var(--sur-principal); border-color: transparent; }
.as-etapes li.faite { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, var(--border)); }
.as-profils { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.as-profil { display: grid; gap: 6px; text-align: left; padding: 14px; border-radius: 12px; border: 2px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; }
.as-profil span { font-size: 13px; color: var(--muted); font-weight: 400; }
.as-profil.choisi { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.as-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
/* Carte haute (texte long) : case et texte en haut, alignes (la regle
   generique des libelles a case centre verticalement, d'ou le !important). */
.as-module { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
label.as-module, label.as-modele { align-items: flex-start !important; }
.as-module.hors-licence { opacity: .6; }
.as-recap { margin: 0 0 10px 18px; }

/* ----------------------------- Tableau de bord : vue d'ensemble ----------------------------- */
.dir-alertes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dir-alerte { border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px; padding: 6px 12px; background: var(--panel); color: var(--text); cursor: pointer; font-size: 13.5px; }
.dir-danger { border-left-color: var(--danger); }
.dir-attention { border-left-color: #f59e0b; }
.dir-info { border-left-color: var(--primary); }
.dir-ok { color: var(--ok); font-weight: 600; margin: 0; }
.dir-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.dir-carte { border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; background: var(--panel); display: grid; gap: 8px; align-content: start; }
.dir-carte h4 { margin: 0; font-size: 16px; }
.dir-chiffres { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.dir-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dir-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dir-liste li { display: grid; gap: 3px; }
.dir-liste li > button.lien { justify-self: start; text-align: left; }
/* Code en ligne dans les textes d'aide : boite propre (pas de chevauchement en retour a la ligne). */
.droits-bloc-corps p code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; vertical-align: top; }

/* Fusion automatique d'une saisie avec la modification d'un collegue */
.mx-fusion { margin-top: 4px; font-size: 12.5px; padding: 3px 8px; border-left: 3px solid var(--mx-c, var(--primary)); background: color-mix(in srgb, var(--mx-c, var(--primary)) 10%, transparent); border-radius: 4px; }

/* Indisponibilites des personnes (un seul etat, sans type) */
.abs-barre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-bottom: 10px; }
.abs-barre label.mini { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.abs-barre-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-items: center; margin-left: auto; }
.abs-menu { position: relative; }
.abs-menu > summary { list-style: none; cursor: pointer; border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; font-size: 13px; background: transparent; color: var(--text); }
.abs-menu > summary::-webkit-details-marker { display: none; }
.abs-menu > summary:hover, .abs-menu[open] > summary { background: var(--hover); }
.abs-menu-liste { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; min-width: 190px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.abs-menu-liste button { text-align: left; border: 0; }
.abs-explication { margin: -4px 0 8px; }
.abs-odoo-msg { margin: -4px 0 10px; }
.abs-table td { vertical-align: middle; }
.abs-actions { white-space: nowrap; text-align: right; }
.abs-cal, .abs-legende, .abs-etat { --abs-c: #d9822b; }
.abs-etat { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; background: color-mix(in srgb, var(--abs-c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--abs-c) 45%, var(--border)); color: var(--text); }
.abs-source { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-size: 12px; white-space: nowrap; border: 1px solid var(--border); color: var(--muted); cursor: help; }
.abs-cal-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.abs-cal-titre { min-width: 140px; text-align: center; }
.abs-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12px; color: var(--muted); margin-left: auto; }
.abs-pastille { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; background: var(--abs-c); }
.abs-cal { border-collapse: collapse; font-size: 12px; }
.abs-cal th, .abs-cal td { text-transform: none; border: 1px solid var(--border); min-width: 22px; height: 24px; padding: 0 2px; text-align: center; }
.abs-cal tbody th { text-transform: none; letter-spacing: normal; text-align: left; padding: 0 8px; white-space: nowrap; font-weight: 600; position: sticky; left: 0; background: var(--panel); z-index: 1; }
.abs-cal .abs-we { background: color-mix(in srgb, var(--muted) 12%, transparent); }
.abs-cal th.abs-auj { color: var(--primary-texte, var(--primary)); box-shadow: inset 0 -2px 0 var(--primary); }
.abs-cal td.abs-case { background: var(--abs-c); cursor: pointer; }
.abs-cal td.abs-case.abs-demi-matin, .abs-pastille.abs-demi-matin { background: linear-gradient(135deg, var(--abs-c) 50%, transparent 50%); }
.abs-cal td.abs-case.abs-demi-apres_midi, .abs-pastille.abs-demi-apres_midi { background: linear-gradient(135deg, transparent 50%, var(--abs-c) 50%); }
.abs-cal td.abs-case.abs-externe, .abs-pastille.abs-externe { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text) 45%, transparent); cursor: help; }
.abs-pastille.abs-demi, .abs-pastille.abs-externe { border: 1px solid color-mix(in srgb, var(--abs-c) 60%, var(--border)); }
.abs-form { display: flex; flex-direction: column; gap: 10px; }
.abs-form label { display: flex; flex-direction: column; gap: 3px; }
.abs-form-dates { display: flex; gap: 10px; }
.abs-form-dates label { flex: 1; }
.abs-form-carte { width: min(460px, 94vw); }
.abs-import-carte { width: min(860px, 96vw); }
.abs-import-options { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin-bottom: 10px; }
.abs-import-options label { display: flex; flex-direction: column; gap: 3px; }
.abs-import-options label.case { flex-direction: row; align-items: center; gap: 6px; }
.abs-imp-table { max-height: 42vh; overflow: auto; }
.abs-imp-erreur td:last-child { color: var(--danger); }
.abs-imp-doublon td, .abs-imp-ignoree td { color: var(--muted); }
.abs-imp-ignorees { margin: 6px 0; }
.abs-imp-ok td:last-child { color: var(--ok); }
.abs-moi-tete { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.abs-mienne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.odoo-abs-table select { max-width: 260px; }

/* Bandeau de licence (evaluation, absente, expiree) */
.bandeau-licence { padding: 6px 16px; font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--primary) 10%, var(--panel)); color: var(--text); }
.bandeau-licence.alerte { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); border-bottom-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.bandeau-licence.hidden { display: none; }
#setup-licence { font-family: ui-monospace, monospace; font-size: 12px; resize: vertical; }

/* Exports Excel / CSV, compteur « N lignes · K filtres » et « Tout effacer » au-dessus des tableaux */
.mx-table-outils { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.mx-table-outils button.mini { font-size: 12px; padding: 2px 8px; min-height: 24px; }
.mx-compteur { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mx-table-outils .mx-compteur { margin-right: auto; }
.mx-tout-effacer[hidden], .mx-filtre-valeurs[hidden], .mx-filtre-menu [hidden] { display: none !important; }
.search-bar .mx-compteur { align-self: center; padding: 0 4px; }
.mx-menu-format { position: fixed; z-index: 600; display: flex; flex-direction: column; min-width: 170px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.mx-menu-format button { text-align: left; border: 0; }

/* Filtres de colonnes avances (filtres.js) : case « filtrer » + bouton ▽ */
table.data-table thead tr.filtres-colonnes .filtre-col-wrap, .filtres-colonnes .filtre-col-wrap { display: flex; align-items: center; gap: 2px; }
.filtres-colonnes .filtre-col-wrap input, table.data-table thead tr.filtres-colonnes .filtre-col-wrap input { flex: 1 1 0; width: 0; min-width: 44px; }
.mx-filtre-btn { flex: 0 0 auto; min-width: 20px; min-height: 22px; padding: 0 3px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--muted); font-size: 11px; line-height: 1; text-transform: none; }
.mx-filtre-btn:hover, .mx-filtre-btn:focus-visible { color: var(--text); border-color: var(--border); background: var(--hover); }
.mx-filtre-btn.actif { color: var(--primary-texte); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--panel)); }
.filtres-colonnes input.mx-filtre-special { cursor: pointer; font-style: italic; color: var(--primary-texte); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--panel)); }
.mx-filtre-menu { position: fixed; z-index: 610; display: flex; flex-direction: column; gap: 8px; width: max-content; min-width: 230px; max-width: min(340px, calc(100vw - 16px)); padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, .22); font-size: 13px; text-transform: none; }
.mx-filtre-titre { font-weight: 600; }
.mx-filtre-ligne select { width: 100%; }
.mx-filtre-valeurs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mx-filtre-valeurs input { flex: 1 1 110px; min-width: 0; }
.mx-filtre-valeurs select { width: auto; }
.mx-filtre-et { color: var(--muted); font-size: 12px; }
.mx-filtre-boutons { display: flex; justify-content: flex-end; gap: 6px; }

/* Fenetres « Choisir un article » et « Choisir un dossier » (selecteurs.js) */
.modal.mx-choix { z-index: 450; }
.mx-choix-carte { width: 860px; display: flex; flex-direction: column; }
#choix-dossier .mx-choix-carte { width: 520px; }
.mx-choix-corps { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.mx-choix-recherche input { width: 100%; }
.mx-choix-aide { margin: 0; }
.mx-choix-zone { max-height: 55vh; overflow: auto; }
.mx-choix-zone .table-scroll-wrap { max-height: none; }
.mx-choix-table tbody tr { cursor: pointer; }
.mx-choix-table tbody tr:hover, .mx-choix-table tbody tr:focus { background: var(--hover); outline: none; }
.mx-choix-table tbody tr:focus-visible { box-shadow: inset 3px 0 0 var(--primary); }
.mx-champ-parcourir { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mx-champ-parcourir > input { flex: 1 1 auto; min-width: 0; }
.mx-parcourir { flex: 0 0 auto; white-space: nowrap; }
.upload-lier { margin: 2px 0 6px; color: var(--muted); }
.upload-lier[hidden] { display: none; }
.mx-cd-speciaux { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-cd-special.active { border-color: var(--primary); color: var(--primary-texte); background: color-mix(in srgb, var(--primary) 10%, var(--panel)); }
.mx-cd-arbre, .mx-cd-arbre ul { list-style: none; margin: 0; padding: 0; }
.mx-cd-arbre { font-size: 14px; max-height: 50vh; overflow: auto; border: 1px solid var(--border); border-radius: 6px; padding: 4px; }
.mx-cd-arbre [role=treeitem] { outline: none; }
.mx-cd-ligne { display: flex; align-items: center; gap: 4px; padding: 3px 6px 3px calc(6px + var(--niveau, 0) * 18px); border-radius: 4px; cursor: pointer; user-select: none; }
.mx-cd-ligne:hover { background: var(--hover); }
.mx-cd-ligne.selection { background: color-mix(in srgb, var(--primary) 16%, var(--panel)); color: var(--text); font-weight: 600; }
.mx-cd-arbre [role=treeitem]:focus-visible > .mx-cd-ligne { box-shadow: 0 0 0 2px var(--primary); }
.mx-cd-pli { display: inline-block; width: 14px; text-align: center; color: var(--muted); }
.mx-cd-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-cd-chemin { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.mx-choix-dossier-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; text-align: left; background: var(--panel); color: var(--text); }
.mx-choix-dossier-btn .mx-cd-texte { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-choix-dossier-btn .mx-cd-fleche { color: var(--muted); }
.mx-select-remplace { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
@media (max-width: 640px) {
  .mx-choix-carte, #choix-dossier .mx-choix-carte { width: auto; }
  .mx-filtre-menu { min-width: 0; }
}

/* ---------- Guide integre (fenetre par-dessus l'application) ---------- */
.guide-modal { z-index: 1700; padding: 16px; }
.guide-fenetre { width: min(1100px, 100%); height: min(92vh, 100%); display: flex; flex-direction: column; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.4); overflow: hidden; animation: m-vue var(--m-court) var(--m-ease); }
.guide-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--border); }
.guide-tete-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.guide-fermer { font-size: 22px; line-height: 1; padding: 2px 10px; }
.guide-cadre { flex: 1; width: 100%; border: 0; background: #fff; min-height: 0; }

/* ---------- Le livre du guide (en bas a gauche) ----------
   Vieux livre relie de cuir : la teinte suit le theme (degrade de la barre),
   grain du cuir par un bruit SVG, filets dores, nervures sur le dos.
   Entierement visible, dans une bande d'aide reservee en bas de l'ecran
   (--mx-bande-aide, retiree de la zone de contenu) : il ne cache jamais rien.
   Sur grand ecran, au-dessus des fenetres ouvertes (z-index 1450 : modales,
   panneaux, Mon temps) pour ouvrir l'aide de la fenetre affichee, sans
   toucher leurs cartes (centrees, 1120 px au plus) ; sous le mode atelier,
   les mini-tutos et le guide lui-meme. Plus petit, il reste sous les
   fenetres (il ne cache jamais le coin d'une carte) : F1 et le menu Aide
   ouvrent alors l'aide de la fenetre. */
:root { --mx-bande-aide: 58px; }
#app-view .content { padding-bottom: var(--mx-bande-aide); }
.mx-livre { --lw: 34px; --lh: 44px;
  --cuir: color-mix(in srgb, var(--grad-fin, #40321f) 62%, #5a3416);
  --cuir-fonce: color-mix(in srgb, var(--cuir) 62%, #120a05);
  --dore: #c9a24a;
  position: fixed; left: 16px; bottom: 4px; z-index: 70; width: calc(var(--lw) * 2 + 8px); height: calc(var(--lh) + 10px);
  padding: 0; border: 0; background: transparent; cursor: pointer; perspective: 520px;
  transition: transform .26s cubic-bezier(.3,.8,.3,1);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
@media (min-width: 1366px) and (min-height: 700px) { .mx-livre { z-index: 1450; } }
.mx-livre.leve { transform: translateY(-6px); }
.mx-livre:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 6px; }
.mx-livre .livre { position: absolute; left: 0; bottom: 4px; width: var(--lw); height: var(--lh); transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-14deg); transition: transform .45s cubic-bezier(.3,.7,.3,1); }
.mx-livre.ouvert .livre { transform: translateX(calc(var(--lw) + 4px)) rotateX(10deg) rotateY(0deg); }
.livre > span { position: absolute; inset: 0; transform-origin: left center; }
/* Dos (plat arriere) et blocs de pages */
.livre-dos { background: var(--cuir-fonce); border-radius: 2px 6px 6px 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.livre-bloc { top: 3px !important; bottom: 3px !important; border-radius: 1px 3px 3px 1px;
  /* lignes de texte pales, comme une page imprimee */
  background: repeating-linear-gradient(180deg, transparent 0 4px, rgba(90,70,40,.16) 4px 5px) 9px 9px / calc(100% - 17px) calc(100% - 18px) no-repeat,
    linear-gradient(90deg, #e6d9bb, #f7f0de 14%, #f4ecd8);
  box-shadow: inset -2px 0 0 #d6c6a2, inset -3px 0 0 #f1e7cf, inset -4px 0 0 #d6c6a2, inset 0 0 6px rgba(120,90,40,.22); }
.livre-bloc-droit { left: 1px !important; right: 3px !important; transform: translateZ(1px); }
.livre-bloc-gauche { right: 100% !important; left: auto !important; width: calc(var(--lw) - 4px); transform: translateZ(4px);
  opacity: 0; transition: opacity .1s linear; border-radius: 3px 1px 1px 3px;
  background: repeating-linear-gradient(180deg, transparent 0 4px, rgba(90,70,40,.16) 4px 5px) 8px 9px / calc(100% - 17px) calc(100% - 18px) no-repeat,
    linear-gradient(270deg, #e6d9bb, #f7f0de 14%, #f4ecd8);
  box-shadow: inset 2px 0 0 #d6c6a2, inset 3px 0 0 #f1e7cf, inset 4px 0 0 #d6c6a2, inset 0 0 6px rgba(120,90,40,.22); }
.mx-livre.ouvert .livre-bloc-gauche { opacity: 1; transition: opacity .15s linear .2s; }
/* Feuilles qui tournent puis restent a gauche, un peu decalees */
.livre-feuille { top: 3px !important; bottom: 3px !important; right: 3px !important; left: 1px !important;
  background: repeating-linear-gradient(180deg, transparent 0 4px, rgba(90,70,40,.14) 4px 5px) 9px 9px / calc(100% - 17px) calc(100% - 18px) no-repeat,
    linear-gradient(90deg, #e9dec2, #fbf6e8 18%, #f8f1df); border-radius: 1px 3px 3px 1px;
  box-shadow: inset 0 0 4px rgba(120,90,40,.25); transform: translateZ(2px); backface-visibility: visible; }
.mx-livre.ouvert .livre-feuille { animation: mxFeuille .5s cubic-bezier(.4,.1,.3,1) forwards; animation-delay: calc(.12s + var(--i) * .16s); }
@keyframes mxFeuille { 0% { transform: translateZ(2px) rotateY(0deg); } 100% { transform: translateZ(calc(5px + var(--i) * .6px)) rotateY(calc(-176deg + var(--i) * 1.2deg)); } }
/* Couverture : face cuir et revers (papier marbre) */
.livre-couv { transform-style: preserve-3d; transform: translateZ(3px); transition: transform .5s cubic-bezier(.3,.7,.3,1); }
.mx-livre.ouvert .livre-couv { transform: translateZ(3px) rotateY(-178deg); }
.couv-face, .couv-revers { position: absolute; inset: 0; border-radius: 2px 6px 6px 2px; backface-visibility: hidden; }
.couv-face { display: flex; align-items: center; justify-content: center;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 35% 30%, color-mix(in srgb, var(--cuir) 80%, #fff) 0%, var(--cuir) 45%, var(--cuir-fonce) 100%);
  background-blend-mode: multiply, normal;
  box-shadow: inset 7px 0 0 -1px var(--cuir-fonce), inset 8px 0 0 -1px rgba(255,255,255,.08),
    inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in srgb, var(--dore) 70%, transparent),
    inset 0 0 10px rgba(0,0,0,.45); }
/* Nervures du dos (cotes de reliure) */
.couv-face::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; border-radius: 2px 0 0 2px;
  background: repeating-linear-gradient(180deg, transparent 0 11px, rgba(0,0,0,.35) 11px 12px, rgba(255,255,255,.12) 12px 13px, transparent 13px 18px); }
/* Cartouche dore */
.couv-face::after { content: ""; position: absolute; left: 10px; right: 5px; top: 9px; bottom: 9px; border: 1px solid color-mix(in srgb, var(--dore) 75%, transparent); border-radius: 3px; }
/* Tete de la vache de meumo sur la couverture (meme image que la barre du
   haut et le favicon, web/icons/logo-tete.png) : le cadre dore dessine par
   .couv-face::after l'entoure comme un titre de livre. */
.couv-logo { width: 17px; height: 17px; transform: translateX(2px);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 0 3px rgba(201,162,74,.35)); }
.couv-revers { transform: rotateY(180deg); background:
  radial-gradient(circle at 30% 30%, rgba(255,255,255,.25) 0 2px, transparent 3px) 0 0 / 9px 9px,
  linear-gradient(135deg, color-mix(in srgb, var(--cuir) 30%, #9c6b3a), color-mix(in srgb, var(--cuir) 30%, #d9b47a));
  box-shadow: inset 0 0 0 3px var(--cuir-fonce); }
/* Signet de tissu rouge, pose sur la reliure, qui depasse en bas */
.livre-signet { left: -2px !important; right: auto !important; top: -3px !important; bottom: -8px !important; width: 5px;
  transform: translateZ(9px); opacity: 0; transition: opacity .1s linear;
  background: repeating-linear-gradient(180deg, #a3121c 0 2px, #8c0f17 2px 3px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 5px), 0 100%); box-shadow: 1px 0 2px rgba(0,0,0,.4); }
.mx-livre.ouvert .livre-signet { opacity: 1; transition: opacity .25s ease .95s; }
@media (prefers-reduced-motion: reduce) {
  .mx-livre, .mx-livre .livre, .livre-couv, .livre-signet, .livre-bloc-gauche { transition: none; }
  .mx-livre.ouvert .livre-feuille { animation: none; transform: translateZ(5px) rotateY(-176deg); }
}
@media print { .mx-livre { display: none; } }

/* ---------- Petits ecrans (telephone, tablette en portrait) ----------
   Articles : arborescence au-dessus, contenu dessous ; la fiche defile en
   entier ; aucune colonne ecrasee. */
@media (max-width: 700px) {
  #view-fichiers.view.active { overflow: auto; }
  .articles-wrap { flex: none; }
  .articles-body { flex-direction: column; flex: none; gap: 10px; }
  .articles-body .sidebar { width: auto !important; max-height: 38vh; }
  .articles-body .h-sash, #view-fichiers .v-sash { display: none; }
  .articles-main { padding: 0; min-height: 70vh; }
  .detail-view { overflow: auto; }
  .detail-body { overflow: visible; flex: none; }
  .detail-split { flex-direction: column; flex: none; }
  .detail-col-gauche { overflow: visible; padding-right: 0; flex: none; }
  .detail-header .fiche-actions { margin-left: 0; }
}
@media (max-width: 700px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; padding: 8px 10px; }
  .topbar .brand { order: 1; flex: 1 1 auto; max-width: none; }
  .topbar .user-area { order: 2; margin-left: auto; }
  .topbar nav { order: 3; flex: 1 1 100%; }
  .topbar #btn-logout, .topbar #btn-aide-top { padding-left: 8px; padding-right: 8px; font-size: 12.5px; }
}

/* Le livre du guide ne cache jamais rien : il vit dans la bande d'aide
   reservee en bas de l'ecran (--mx-bande-aide, voir « Le livre du guide »). */

/* ---------- Temps passes (feuille de la semaine) ---------- */
.tps-semaine { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tps-cadre { max-height: none; }
.tps-table { min-width: 720px; }
.tps-table th, .tps-table td { text-align: center; vertical-align: middle; }
.tps-table th.tps-lib { text-align: left; font-weight: 500; min-width: 200px; }
.tps-lib .tps-projet { display: block; }
.tps-lib .tps-tache { display: block; color: var(--muted); font-size: 12.5px; }
.tps-lib .tps-prevu { display: block; }
.tps-case { width: 64px; text-align: center; padding: 4px 6px; }
.tps-case.tps-invalide { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 25%, transparent); }
.tps-we { background: color-mix(in srgb, var(--muted) 7%, transparent); }
.tps-auj { box-shadow: inset 0 -2px 0 var(--primary); }
.tps-total { font-weight: 600; }
.tps-alerte { color: var(--danger); font-weight: 600; }
.tps-proposee .tps-lib { color: var(--muted); }
.tps-abs { margin-top: 3px; font-weight: 400; }
.tps-abs .abs-etat { font-size: 12px; padding: 0 6px; }
.tps-ajout { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.tps-ajout select { width: auto; max-width: 260px; }

/* Reglages > Logiciels RH (web/connecteurs-rh.js) */
.rh-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: max(12px, 0.78em);
  background: color-mix(in srgb, var(--lock) 22%, transparent); color: var(--text); vertical-align: middle; }
.rh-sens { max-width: 520px; }
.rh-sens select { width: 100%; }
.rh-avance { border-left: 3px solid var(--border); padding-left: 10px; }
.rh-avance > summary { cursor: pointer; color: var(--muted); }
.rh-avance label { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.rh-avance textarea { font-family: monospace; font-size: 0.85em; }

/* ----- Mon espace (web/accueil.js ; mise en page dans web/meumo.css) ----- */
.acc-blocs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.acc-bloc { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.acc-liste { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.acc-liste li { overflow-wrap: anywhere; }
.acc-alerte { color: var(--danger); font-weight: 600; margin-bottom: 4px; }
.acc-chiffre { margin-bottom: 6px; }
.acc-chiffre b { font-size: 1.25em; }
.acc-pastille { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--muted); }
.acc-pastille.ok { background: var(--ok); }
.acc-pastille.erreur, .acc-pastille.absent { background: var(--danger); }
.acc-pastille.jamais { background: var(--lock); }
.acc-panneau { max-width: 760px; margin-top: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.acc-choix { list-style: none; display: flex; flex-direction: column; gap: 4px; margin: 8px 0 12px; }
.acc-choix li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; }
.acc-choix li:hover { background: var(--hover); }
.acc-choix label { flex: 1; min-width: 0; }
.acc-fleches { display: flex; gap: 2px; }
.profil-affichage { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.profil-interrupteur { display: flex; align-items: center; gap: 8px; }
/* ----- « Enregistre » (les ecrans vides qui guident, mxVide et
   web/ecran-vide.js, sont dessines par web/meumo.css) ----- */
.mx-enregistre { font-size: .82rem; color: var(--ok); opacity: 0; transform: translateY(-3px);
  transition: opacity var(--m-court) var(--m-ease), transform var(--m-court) var(--m-ease); white-space: nowrap; pointer-events: none; }
.mx-enregistre.visible { opacity: 1; transform: none; }
/* ----- Pastille des liaisons et palette « Que voulez-vous faire ? » ----- */
.mx-liaisons { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; }
.btn-palette { font-size: .95rem; }
.palette-mx { align-items: flex-start; padding-top: 12vh; }
.palette-carte { width: min(640px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.pal-saisie { width: 100%; border: 0; border-bottom: 1px solid var(--border); padding: 16px 18px; font-size: 1.05rem;
  background: var(--panel); color: var(--text); outline: none; }
.pal-liste { list-style: none; max-height: 52vh; overflow-y: auto; padding: 6px; }
.pal-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.pal-liste li.actif, .pal-liste li:hover { background: var(--hover); }
.pal-liste li.actif { box-shadow: inset 3px 0 0 var(--primary); }
.pal-groupe { color: var(--muted); font-size: max(12px, .82em); white-space: nowrap; }
.pal-vide { color: var(--muted); cursor: default !important; }
.pal-aide { padding: 6px 18px 12px; }
/* ----- Profil > Agenda (web/agenda.js) ----- */
.agenda-contenu { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
#agenda-url code { display: block; overflow-wrap: anywhere; margin: 6px 0; }
.agenda-aide ul { margin: 8px 0 8px 18px; display: flex; flex-direction: column; gap: 4px; }

/* ---------- Lot 3 : mode Simple / Expert, espaces, reglages groupes (web/espaces.js) ---------- */
.btn-mode { border: 1px solid var(--sidebar-border, rgba(255,255,255,.25)); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; }
.btn-mode.expert { background: color-mix(in srgb, var(--primary-plein) 35%, transparent); }
.btn-mode .btn-mode-court { display: none; }
/* Ecran moyen : « Affichage » en petit au-dessus de « simple » / « expert ». */
@media (max-width: 1239px) {
  .btn-mode .btn-mode-pre { display: none; }
  .btn-mode { padding: 2px 10px; line-height: 1.15; text-align: center; border-radius: 10px; }
  .btn-mode .btn-mode-court { display: block; font-size: 9.5px; opacity: .8; letter-spacing: .02em; }
}
/* Tablette et telephone : la bascule est dans Mon profil > Apparence et dans
   Ctrl+K (la barre garde la place pour les ecrans de travail). */
@media (max-width: 900px) { .topbar .btn-mode { display: none; } }
.mode-popover { position: fixed; z-index: 1300; width: min(360px, calc(100vw - 16px)); background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.2); padding: 10px 12px 12px; }
.mode-popover-titre { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mode-choix { display: flex; flex-direction: column; gap: 6px; }
.mode-carte { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.mode-carte > span { display: flex; flex-direction: column; gap: 2px; }
.mode-carte input { margin-top: 3px; }
.mode-carte.actif { border-color: var(--primary-plein); background: color-mix(in srgb, var(--primary-plein) 8%, var(--panel)); }
.mode-explication { margin: 8px 0 0; line-height: 1.45; }
.profil-mode { max-width: 520px; }
/* Menu « Plus ▾ » : la vue active est mise en evidence dans la liste ; un point sur le bouton */
.nav-plus-btn.contient-actif { position: relative; }
.nav-plus-btn.contient-actif::after { content: ""; position: absolute; top: 5px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
/* Beta : modules pas encore valides sur des machines reelles */
.badge-beta { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; line-height: 16px; vertical-align: 1px; background: color-mix(in srgb, var(--lock) 18%, transparent); color: inherit; border: 1px solid color-mix(in srgb, var(--lock) 55%, transparent); }
.bandeau-beta { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; border-left: 4px solid var(--lock); background: color-mix(in srgb, var(--lock) 9%, var(--panel)); font-size: 13px; }
.res-aide { margin: 0 0 8px; }
.res-horaires-autres { margin-top: 12px; }
.res-horaires-autres > summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px; padding: 4px 0; }
.res-horaires-autres > .res-horaires-grille { margin-top: 8px; }
.as-beta { display: inline-block; margin-top: 4px; padding-left: 8px; border-left: 3px solid var(--lock); color: var(--text); line-height: 1.35; }
/* Reglages : groupes Essentiel et Avance */
.param-nav .param-groupe { margin: 0 0 6px; }
.param-nav .param-groupe + .param-groupe { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.param-nav .param-groupe-titre { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 6px; background: none; border: none; padding: 4px 6px; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; }
.param-nav .param-groupe-titre:hover { color: var(--text); }
.param-nav .param-groupe-titre .fleche { transition: transform var(--m-vite, .15s); }
.param-nav .param-groupe.replie .param-groupe-titre .fleche { transform: rotate(-90deg); }
.param-nav .param-groupe.replie ul { display: none; }
.param-nav .param-groupe-note { margin: 0 6px 6px; font-size: 11.5px; line-height: 1.35; }
.param-nav li .badge-beta { font-size: 10px; }
.param-nav li.param-lien::after { content: " ↗"; color: var(--muted); }
@media (max-width: 760px) {
  .param-layout { flex-direction: column; } .param-nav { width: auto; }
  /* Telephone : le contenu prend la largeur de l'ecran (et non celle de son
     plus large tableau) ; chaque bloc fait defiler ses tableaux lui-meme,
     les paragraphes passent a la ligne. */
  .param-layout { align-items: stretch; }
  .param-content { width: 100%; max-width: 100%; }
  .param-content .droits-bloc-corps, .param-content .p-section { max-width: 100%; overflow-x: auto; }
  .param-content .inline-form input[type="text"] { min-width: 0 !important; max-width: 100%; }
}
/* ----- Fiche article : en-tete, chronologie, nouvelle version, apercu 3D ----- */
.menu-plus-liste button[hidden] { display: none; }
.detail-header h2#fiche-title { flex: 0 1 auto; }
.detail-header .fiche-actions { margin-left: auto; }
.fiche-reserve { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; color: var(--lock); background: color-mix(in srgb, var(--lock) 12%, transparent); border: 1px solid color-mix(in srgb, var(--lock) 45%, var(--border)); }
.fiche-reserve[hidden] { display: none; }
#detail-view.mode-edition #btn-definitive { display: none !important; }
.detail-header .fiche-actions .primary[disabled] { opacity: .55; cursor: not-allowed; }
.fiche-chrono { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 12.5px; padding: 2px 0 4px; min-width: 0; }
.fiche-chrono[hidden] { display: none; }
.fiche-chrono-titre { font-weight: 700; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.fiche-chrono-liste { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.fiche-chrono-liste li + li::before { content: "→"; color: var(--muted); margin-right: 4px; }
.fiche-chrono-v { font: inherit; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; }
.fiche-chrono-v:hover, .fiche-chrono-v:focus-visible { border-color: var(--primary); }
.fiche-chrono-v.courante { background: var(--primary-plein); color: var(--sur-principal); border-color: var(--primary-plein); cursor: default; }
.fiche-chrono-v.derniere:not(.courante) { border-color: var(--primary); }
.fiche-chrono-avis { color: var(--lock); }
.fiche-chrono-avis.muted { color: var(--muted); }
.fiche-chrono-note { flex: 1 1 100%; color: var(--text); font-style: italic; }
/* Fenetres « Nouvelle version » et « Demander une validation » */
.nv-carte { width: 540px; }
.nv-form { display: flex; flex-direction: column; gap: 12px; }
.nv-fichier { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.nv-choix { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.nv-choix legend { font-size: 13px; font-weight: 700; padding: 0 4px; color: var(--text); }
.nv-option { flex-direction: row; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text); font-weight: 400; cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.nv-option:hover { background: var(--hover); }
.nv-option input { margin-top: 3px; flex: none; width: auto; }
.nv-option > span { display: flex; flex-direction: column; gap: 2px; }
.nv-progression { display: flex; align-items: center; gap: 10px; }
.nv-progression[hidden] { display: none; }
.nv-progression .upload-barre { flex: 1; }
/* Onglets Composants, « Ou est-il utilise ? », Validations */
.fiche-compo-liste { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fiche-compo-liste li { padding: 4px 6px 4px calc(6px + var(--niveau, 0) * 18px); border-bottom: 1px dashed var(--border); font-size: 13px; }
.fiche-compo { margin-bottom: 10px; }
/* Nomenclature : composants directs (repere, quantite, commentaire), ajout,
   comparaison entre indices (web/nomenclatures.js). */
.bom-table-scroll { overflow-x: auto; max-width: 100%; }
.bom-composants { font-size: 13px; }
.bom-composants td { vertical-align: middle; }
.bom-composants .bom-c-repere { width: 70px; }
.bom-composants .bom-c-qte { white-space: nowrap; width: 90px; }
.bom-composants .bom-c-actions { white-space: nowrap; text-align: right; width: 1%; }
.bom-composants .bom-c-com { color: var(--muted); }
.bom-composants input { width: 100%; min-width: 60px; padding: 3px 6px; }
.bom-composants .bom-c-actions button + button { margin-left: 4px; }
.bom-ajout-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 10px 0; font-size: 13px; }
.bom-ajout-ligne label { display: flex; flex-direction: column; gap: 2px; flex: 1 1 140px; }
.bom-ajout-ligne .bom-ajout-qte, .bom-ajout-ligne .bom-ajout-repere { flex: 0 1 90px; }
.bom-ajout-ligne .bom-ajout-com { flex: 2 1 180px; }
.bom-niveaux { margin: 8px 0; font-size: 13px; }
.bom-niveaux summary { cursor: pointer; color: var(--muted); }
.bom-comparer h5 { margin: 14px 0 6px; font-size: 13px; }
.bom-comparer-barre { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; font-size: 13px; }
.bom-comparaison { margin-top: 8px; font-size: 13px; }
.bom-diff { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.bom-diff li { padding: 3px 8px; border-left: 3px solid var(--border); border-radius: 4px; }
.bom-diff-ajout { border-left-color: var(--ok) !important; background: color-mix(in srgb, var(--ok) 9%, transparent); }
.bom-diff-retrait { border-left-color: var(--danger) !important; background: color-mix(in srgb, var(--danger) 8%, transparent); }
.bom-diff-modif { border-left-color: var(--lock) !important; background: color-mix(in srgb, var(--lock) 9%, transparent); }
/* Ordres de modification : zone de la fiche, assemblages proposes, obsolescence. */
.detail-view.mode-edition #btn-demander-modif { display: none; }
.om-proposes { margin: 10px 0; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 8px; font-size: 13px; }
.om-proposes ul { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.om-proposes label { display: flex; gap: 8px; align-items: baseline; }
.om-proposes-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.om-obsolescence { display: block; margin-top: 2px; }
.om-alertes { margin: 10px 0; padding: 8px 12px; border-left: 4px solid var(--lock); border-radius: 6px; background: color-mix(in srgb, var(--lock) 8%, var(--panel)); font-size: 13px; }
.om-alertes ul { margin: 4px 0 0; padding-left: 18px; }
.om-comparaison { margin: 8px 0 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; }
.fiche-valid-explication { margin: 0 0 10px; font-size: 13px; color: var(--muted); max-width: 70ch; }
.fiche-valid-attente { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--lock) 50%, var(--border)); border-left: 4px solid var(--lock); background: color-mix(in srgb, var(--lock) 8%, var(--panel)); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
#fiche-valid-demander { margin: 0 0 12px; }
.fiche-valid-historique { font-size: 12px; text-transform: uppercase; color: var(--muted); margin: 6px 0; letter-spacing: .03em; }
/* Apercu 3D integre a la fiche */
.fiche-apercu-zone.apercu-3d { padding: 0; align-items: stretch; justify-content: stretch; overflow: hidden; min-height: 300px; }
.apercu3d-cadre { position: relative; flex: 1 1 auto; min-height: 160px; background: #111827; border-radius: 10px 10px 0 0; }
.apercu3d-hote { position: absolute; inset: 0; }
.apercu3d-canevas { display: block; width: 100%; height: 100%; touch-action: none; border-radius: 10px 10px 0 0; }
.apercu3d-canevas:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
.apercu3d-etat { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #e2e8f0; background: rgba(15, 23, 42, .75); padding: 8px 14px; border-radius: 8px; font-size: 13px; max-width: 86%; text-align: center; pointer-events: none; }
.apercu3d-etat[hidden] { display: none; }
.apercu3d-etat.erreur { color: #fecaca; }
.apercu3d-barre { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-top: 1px solid var(--border); background: var(--panel); border-radius: 0 0 10px 10px; }
.fiche-apercu-zone.apercu-3d:fullscreen { border-radius: 0; background: var(--panel); }
.fiche-apercu-zone.apercu-3d:fullscreen .apercu3d-cadre, .fiche-apercu-zone.apercu-3d:fullscreen .apercu3d-canevas { border-radius: 0; }
.fiche-apercu-zone.apercu-3d.apercu-agrandi { display: flex; flex-direction: column; padding: 0; }
/* Vue Articles vide : grande zone de depot */
.files-icons > .articles-vide { grid-column: 1 / -1; }
.articles-vide { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 28px 20px; margin: 8px; border-radius: 14px; color: var(--muted); }
.articles-vide.depot { border: 2px dashed var(--border); background: color-mix(in srgb, var(--primary) 3%, transparent); }
.articles-vide.premiere-fois { min-height: 260px; }
.articles-vide h3 { margin: 0; font-size: 18px; color: var(--text); }
.articles-vide p { margin: 0; max-width: 52ch; font-size: 13.5px; }
.articles-vide-icone { font-size: 38px; line-height: 1; color: var(--primary-texte); }
#view-fichiers.depot-actif .articles-vide.depot { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, transparent); }
/* Vignettes et lignes au clavier */
.file-card:focus-visible, #files-body tr:focus-visible, .liste-centrale-table tbody tr:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
#files-body tr:focus-visible, .liste-centrale-table tbody tr:focus-visible { outline-offset: -3px; }
/* Fenetre d'import : options repliees */
.upload-destination { margin: -4px 0 0; }
.upload-destination:empty { display: none; }
.upload-plus { border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; }
.upload-plus > summary { cursor: pointer; padding: 9px 0; font-size: 13px; font-weight: 600; color: var(--text); }
.upload-plus[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.upload-plus-corps { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.upload-plus-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.upload-plus label.dossier-option > span { flex: 1 1 0; min-width: 0; white-space: normal; }
/* Menu « ⋯ » : jamais hors de l'ecran (aligne a gauche du bouton si besoin) */
.menu-plus-liste.vers-droite { right: auto; left: 0; }
.menu-plus-liste { max-width: calc(100vw - 16px); }
.menu-plus-liste button { overflow: hidden; text-overflow: ellipsis; }
/* Onglets de la fiche : a la ligne plutot que hors de l'ecran */
.fiche-onglets-barre { flex-wrap: wrap; }
.fiche-onglets-barre button { white-space: nowrap; }
/* Fiche : champs sur 3 colonnes quand la place le permet, la zone fiche /
   apercu occupe toute la hauteur : les onglets se voient sans defiler. */
#fiche-meta { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
#fiche-status:empty { min-height: 0; margin-top: 4px; }
@media (min-width: 701px) { .detail-body::after { display: none; } }
/* Clic a cote de la fiche pendant une modification : elle se signale */
@keyframes fiche-secousse { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
#detail-view.mode-edition .detail-card.fiche-secousse { animation: fiche-secousse .28s ease; }
@media (prefers-reduced-motion: reduce) { #detail-view.mode-edition .detail-card.fiche-secousse { animation: none; } }
.fiche-valid-decision { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.nv-option-off { opacity: .65; cursor: not-allowed; }
@media (max-width: 560px) {
  #fiche-meta { grid-template-columns: 1fr 1fr; }
  .nv-carte { width: auto; }
  .detail-header .fiche-actions { width: 100%; }
  .detail-header .fiche-actions #btn-nouvelle-version { flex: 1 1 100%; }
  .upload-plus-ligne { grid-template-columns: 1fr; }
}
/* ===== Accompagnement du novice (lot 3, chantier C) =====
   Premiers pas de l'accueil, pastille « ? Decouvrir » des mini-tutos,
   bouton designe par « Me montrer », assistant par profil, icones SVG. */
/* ----- Premiers pas (web/accueil.js) ----- */
.pp-carte { background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.pp-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-tete h3 { font-size: 1.1rem; font-weight: 600; margin: 0; }
.pp-compte { color: var(--muted); font-size: 13px; white-space: nowrap; }
.pp-progression { flex: 0 1 160px; min-width: 80px; height: 8px; border-radius: 999px; background: var(--hover); overflow: hidden; }
.pp-progression > span { display: block; height: 100%; background: var(--ok); border-radius: inherit; transition: width var(--m-court) var(--m-ease); }
.pp-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.pp-intro { color: var(--muted); margin: 6px 0 10px; font-size: 13px; }
.pp-liste { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; max-width: 920px; }
.pp-tache { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; min-width: 0; }
.pp-tache .pp-texte { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.pp-tache .pp-aide { color: var(--muted); font-size: 13px; }
.pp-tache .pp-etat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pp-case { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; }
.pp-tache.fait .pp-case { background: var(--ok); border-color: var(--ok); }
.pp-tache.fait .pp-texte b { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.pp-tache button { flex: none; align-self: center; }
.pp-fait { flex: none; align-self: center; color: var(--ok); font-size: 13px; font-weight: 600; }
.pp-pied { margin: 10px 0 0; }
#premiers-pas:focus:not(:focus-visible) { outline: none; }
.pp-reduit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 12px; border: 1px dashed var(--border); border-radius: 8px; background: var(--panel); }
/* Bouton designe par « Me montrer » : contour qui pulse, sans voile. */
.mx-montre { outline: 3px solid var(--primary) !important; outline-offset: 3px; border-radius: 6px; animation: mxMontre 1.1s ease-in-out 4; }
@keyframes mxMontre { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent); } 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--primary) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .mx-montre { animation: none; } }
/* ----- Pastille du livre (web/guide-integre.js) : un mini-tuto de l'ecran
   affiche n'a pas encore ete vu. Elle fait partie du livre (coin de la
   couverture) : aucun element flottant ; le livre l'annonce aussi dans son
   nom accessible. Le guide ouvert propose « Mini-tuto de cet écran ». ----- */
.livre-pastille { position: absolute; left: calc(var(--lw) - 8px); top: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--principal, var(--primary)); box-shadow: 0 0 0 2px var(--surface, var(--panel)); opacity: 0; transform: scale(.4);
  transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.mx-livre.a-decouvrir .livre-pastille { opacity: 1; transform: scale(1); }
.mx-livre.ouvert .livre-pastille { opacity: 0; }
.guide-minituto { max-width: min(420px, 60vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ----- Assistant : trois profils, modeles de numerotation ----- */
.as-profils-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.as-profil[disabled] { cursor: not-allowed; opacity: .65; }
.as-profil .as-profil-licence { color: var(--danger); font-size: 12.5px; }
.as-sans-profil { margin-top: 10px; }
.as-explication { background: var(--hover); border-radius: 8px; padding: 10px 12px; margin: 6px 0 10px; line-height: 1.5; }
.as-explication b { white-space: nowrap; }
.as-modeles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 8px; }
.as-modele { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 2px solid var(--border); border-radius: 10px; cursor: pointer; }
.as-modele.choisi { border-color: var(--primary); }
.as-modele > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-exemple { font-family: ui-monospace, Consolas, monospace; color: var(--text) !important; }
.as-ex { white-space: nowrap; }
.as-apercu { margin: 6px 0 12px; }
.as-avance { margin-bottom: 8px; }
/* ----- Icones SVG de l'en-tete (sprite inline de index.html) ----- */
.mx-icone { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.user-area .btn-icone { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.user-area .btn-icone .btn-libelle { white-space: nowrap; }
#btn-profil .btn-avatar-defaut .mx-icone { width: 22px; height: 22px; display: block; }
#btn-notifs { position: relative; }
/* Le compteur de la cloche se pose sur l'icone : le bouton garde sa largeur
   (la barre de navigation ne bouge pas quand des notifications arrivent). */
#btn-notifs .notif-badge { position: absolute; top: -7px; right: -7px; margin: 0; min-width: 18px; line-height: 16px;
  padding: 0 4px; text-align: center; pointer-events: none; box-shadow: 0 0 0 2px rgba(15, 23, 42, .85); }
@media (max-width: 1100px) { .user-area .btn-icone .btn-libelle { display: none; } }
/* Portables (jusqu'a 1440 px) : « Deconnexion » en icone seule (infobulle et
   nom accessible), « Aide » garde son libelle ; plus de place pour les onglets. */
@media (max-width: 1440px) { .user-area #btn-logout .btn-libelle { display: none; } }
/* Logo et nom de l'organisation : seul le nom se raccourcit. */
.brand-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* « Enregistre » : petite etiquette sous l'en-tete, hors du flux (elle ne
   prend pas de place dans la barre, visible ou non). */
.topbar .user-area { position: relative; }
.topbar .mx-enregistre { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; color: var(--ok);
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 2px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15); font-size: 12.5px; }

/* Reglages > Base de donnees : cible du passage en multi-utilisateur. */
#p-base .base-cible { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin: 12px 0;
  display: grid; gap: 8px; min-width: 0; }
#p-base .base-cible legend { font-weight: 600; padding: 0 4px; }
#p-base .base-etapes { margin: 4px 0 8px 1.2em; padding: 0; }
#p-base .base-serveur label { min-width: 0; }

/* ----- Cycle de vie (web/cycle-de-vie.js) : schema des statuts et passages ----- */
.cv-schema-bloc { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; background: var(--panel); min-width: 0; }
.cv-schema-bloc h3 { margin: 0 0 4px; font-size: 15px; }
.cv-schema-bloc > p { margin: 0 0 8px; max-width: 90ch; }
.cv-schema { overflow-x: auto; min-width: 0; }
.cv-svg { display: block; width: 100%; height: auto; touch-action: none; }
.cv-case { fill: var(--panel); stroke: var(--border); stroke-width: 1.5; }
.cv-libelle { fill: var(--text); font-size: 13px; font-weight: 600; pointer-events: none; }
.cv-fige .cv-case { fill: color-mix(in srgb, var(--lock) 10%, var(--panel)); stroke: color-mix(in srgb, var(--lock) 60%, var(--border)); }
.cv-gele .cv-case { stroke-dasharray: 5 3; }
.cv-cadenas { fill: var(--lock); stroke: none; }
.cv-cadenas-anse { fill: none; stroke: var(--lock); stroke-width: 1.6; }
.cv-trait { fill: none; stroke-width: 2; }
.cv-zone-clic { fill: none; stroke: transparent; stroke-width: 14; }
.cv-simple .cv-trait { stroke: var(--primary); }
.cv-signe .cv-trait { stroke: var(--lock); stroke-width: 3.2; }
.cv-immediat .cv-trait { stroke: var(--muted); stroke-dasharray: 6 4; }
.cv-retour .cv-trait { stroke: var(--ok); stroke-dasharray: 2 4; stroke-linecap: round; }
.cv-pointe-simple path { fill: var(--primary); }
.cv-pointe-signe path { fill: var(--lock); }
.cv-pointe-immediat path { fill: var(--muted); }
.cv-pointe-retour path { fill: var(--ok); }
.cv-etiquette { fill: var(--text); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.cv-etiquette-retour { fill: var(--ok); font-weight: 400; font-style: italic; }
.cv-edition .cv-noeud { cursor: grab; }
.cv-edition .cv-noeud.cv-saisi { cursor: grabbing; }
.cv-edition .cv-noeud.cv-saisi .cv-case, .cv-edition .cv-noeud:focus-visible .cv-case { stroke: var(--primary); stroke-width: 2.5; }
.cv-edition .cv-fleche[data-transition] { cursor: pointer; }
.cv-edition .cv-fleche[data-transition]:hover .cv-trait, .cv-edition .cv-fleche[data-transition]:focus-visible .cv-trait { stroke-width: 4; }
.cv-noeud:focus, .cv-fleche:focus { outline: none; }
.cv-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.cv-leg { display: inline-flex; align-items: center; gap: 6px; }
.cv-leg-svg { overflow: visible; }
.cv-aide-edition { flex-basis: 100%; margin: 2px 0 0; }
#cv-reinitialiser { margin-top: 6px; }
tr.cv-ligne-visee td { background: color-mix(in srgb, var(--primary) 12%, var(--panel)); }
.wf-tag-signe { color: var(--lock); border-color: color-mix(in srgb, var(--lock) 50%, var(--border)); }
.wf-tag-retour { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, var(--border)); margin-left: 4px; }
.wf-case-signature { display: inline-flex; align-items: center; gap: 6px; flex-direction: row; white-space: nowrap; }
/* Fiche : indice fige, retour en modification, signature anterieure au retour. */
.fiche-fige { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--lock) 45%, var(--border));
  border-left: 4px solid var(--lock); background: color-mix(in srgb, var(--lock) 7%, var(--panel)); font-size: 13px; }
.fiche-valid-retour { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.fiche-valid-retour p { margin: 0; }
.fiche-valid-decisions { margin: 4px 0 0 18px; padding: 0; font-size: 13px; }
.sig-etat.anterieur { color: var(--muted); font-weight: 400; }
#retour-form .retour-explication { margin: 0 0 10px; }
/* Demande perimee (l'article a change de statut depuis) ; contenu signe
   conserve, telechargeable depuis la signature. */
.wf-tag-perimee { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); margin-left: 4px; }
.sig-contenu { margin-left: 6px; padding: 1px 8px; font-size: 12px; }
/* Production › Achats et lots (web/achats.js) : articles achetes et matieres,
   receptions, lots, numeros de serie, peremption. */
.ach-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ach-split { grid-template-columns: minmax(320px, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .ach-split { grid-template-columns: 1fr; } }
.pj-ajout select[data-pj-type-depot] { width: auto; max-width: 230px; flex: 0 0 auto; }
.pj .pj-type-choix { width: auto; flex: 0 0 auto; }
.ach-vues { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.ach-vues button.active { background: var(--primary-plein); color: var(--sur-principal); border-color: var(--primary-plein); }
.ach-controle { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.ach-alertes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.ach-alerte { border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; }
.ach-alerte.ach-perime, .ach-alerte.ach-bloque { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); color: var(--danger); }
.ach-alerte.ach-proche, .ach-alerte.ach-en_controle { border-color: color-mix(in srgb, var(--lock) 60%, var(--border)); color: var(--lock); }
.ach-odoo { margin: 0 0 10px; }
.ach-options { margin: 0 0 6px; }
.ach-filtre { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; font-size: 13px; }
.ach-pastille { display: inline-block; white-space: nowrap; font-size: 12px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--border); }
.ach-pastille.ach-perime, .ach-pastille.ach-bloque, .ach-pastille.ach-refuse { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.ach-pastille.ach-proche, .ach-pastille.ach-en_controle { color: var(--lock); border-color: color-mix(in srgb, var(--lock) 50%, var(--border)); }
.ach-stock { margin: 8px 0; font-size: 14px; }
.ach-quantites { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 4px; font-size: 14px; }
.ach-alerte-ligne { margin: 8px 0; padding: 7px 12px; border-radius: 8px; border-left: 4px solid var(--lock); background: color-mix(in srgb, var(--lock) 8%, var(--panel)); font-size: 13px; }
.ach-alerte-ligne.ach-perime, .ach-alerte-ligne.ach-bloque, .ach-alerte-ligne.ach-refuse, .ach-alerte-ligne.ach-rebute { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--panel)); }
.ach-gestion { margin: 10px 0; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.ach-gestion summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.ach-gestion form { margin-top: 10px; }
.ach-case { display: flex; align-items: flex-start; gap: 8px; flex-direction: row; }
.ach-natures { border: 0; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 4px; }
.ach-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ach-fenetre-form label { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.ach-fenetre-form .ach-case { flex-direction: row; }
.ach-series-liste { line-height: 1.9; }
.ach-journal { margin-top: 14px; font-size: 13px; }
.ach-journal summary { cursor: pointer; color: var(--muted); }
.badge-etat.etat-disponible { border-color: color-mix(in srgb, var(--ok) 60%, var(--border)); color: var(--ok); }
.badge-etat.etat-en_controle { border-color: color-mix(in srgb, var(--lock) 60%, var(--border)); color: var(--lock); }
.badge-etat.etat-refuse, .badge-etat.etat-bloque, .badge-etat.etat-rebute { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); color: var(--danger); }
.badge-etat.etat-epuise, .badge-etat.etat-consomme { color: var(--muted); }
.badge-etat.etat-nature-achete { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); color: var(--primary-texte); }
.badge-etat.etat-nature-matiere { border-color: color-mix(in srgb, var(--lock) 55%, var(--border)); color: var(--lock); }
.fiche-achat { margin: 8px 0; padding: 7px 12px; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 8px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
/* Elements masques (attribut hidden) malgre leur display flex : bandeau de
   la fiche, case du controle (administrateur), champs d'une ligne de
   reception selon le suivi de l'article. */
.fiche-achat[hidden], #prod-achats [hidden], #rec-modal [hidden], .ach-fenetre [hidden] { display: none !important; }
.pj-type { font-size: 12px; padding: 0 6px; border-radius: 6px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary-texte); white-space: nowrap; }
.pj-type-choix { font-size: 12px; max-width: 190px; padding: 2px 4px; }
/* Formulaire de reception : une carte par ligne (lot), lisible sur tablette. */
.rec-carte { width: 980px; }
.rec-form label { display: flex; flex-direction: column; gap: 3px; }
.rec-entete { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.rec-titre { font-size: 14px; margin: 16px 0 8px; }
.rec-lignes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.rec-ligne { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in srgb, var(--hover) 45%, var(--panel)); }
.rec-ligne-tete { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: flex-end; }
.rec-num { flex: 0 0 22px; align-self: center; font-weight: 700; color: var(--muted); text-align: center; }
.rec-article { flex: 0 1 340px; min-width: 220px; }
.rec-info { flex: 1 1 200px; align-self: center; }
.rec-actions { display: flex; gap: 4px; margin-left: auto; align-self: center; }
.rec-ligne-champs { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding-left: 34px; }
.rec-lot { flex: 0 1 190px; }
.rec-qte { flex: 0 1 120px; }
.rec-unite { flex: 0 1 110px; }
.rec-peremption { flex: 0 1 170px; }
.rec-series { flex: 1 1 280px; }
.rec-series textarea { font-family: inherit; min-height: 64px; }
.rec-doc { display: flex; gap: 6px; align-items: flex-end; flex: 1 1 420px; flex-wrap: wrap; }
.rec-doc input[type=file] { max-width: 230px; }
.rec-doc select { width: auto; max-width: 220px; flex: 0 1 auto; }
.rec-docs { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rec-docs legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.rec-ligne [hidden] { display: none !important; }
@media (max-width: 720px) {
  .rec-carte { width: auto; }
  .rec-ligne-champs { padding-left: 0; }
  .rec-ligne-champs > * { flex: 1 1 100%; }
  .ach-deux { grid-template-columns: 1fr; }
  .ach-vues { margin-left: 0; }
}
/* Production : consommation des lots par les ordres de fabrication
   (web/consommation.js) et traçabilité (web/tracabilite.js). La fenêtre
   passe au-dessus du mode atelier (tablette), sous les dialogues. */
.cof-modal, .trc-modal { z-index: 400; }
.cof-modal.cof-atelier, .trc-modal.cof-atelier, body.en-mode-atelier .cof-modal, body.en-mode-atelier .trc-modal { z-index: 1550; }
#cof-modal [hidden], .trc-modal [hidden], .cof-bloc [hidden], #of-form [hidden] { display: none !important; }
.cof-carte { width: 940px; }
.cof-atelier .cof-carte { width: 96vw; max-height: 94vh; font-size: 17px; }
.cof-atelier .cof-carte input, .cof-atelier .cof-carte select { min-height: 46px; font-size: 17px; }
.cof-atelier .cof-carte button { min-height: 46px; min-width: 46px; font-size: 16px; }
.cof-atelier .cof-form, .cof-atelier .cof-total, .cof-atelier .cof-form .mini { font-size: 16px; }
.cof-atelier .cof-form input[type=checkbox], .cof-atelier .cof-form input[type=radio] { width: 24px; height: 24px; min-height: 0; }
.cof-form label { display: flex; flex-direction: column; gap: 3px; }
.cof-form label.ach-case { flex-direction: row; align-items: center; }
.cof-sec { margin-bottom: 14px; }
.cof-sec h3 { font-size: 14px; margin: 4px 0 8px; }
.cof-ligne-prod { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; }
.cof-ligne-prod input[name=quantite] { max-width: 150px; }
.cof-info-prod { align-self: center; }
.cof-series-prod { border: 0; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.cof-series-prod textarea { font-family: inherit; }
.cof-scan { display: flex; gap: 6px; margin: 6px 0 10px; }
.cof-scan input { flex: 1 1 auto; }
.cof-comp { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; background: color-mix(in srgb, var(--hover) 40%, var(--panel)); }
.cof-comp-tete { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 4px; }
.cof-prevu { margin-left: auto; }
.cof-lot-ligne { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.cof-lot-ligne select { flex: 1 1 260px; max-width: 480px; width: auto; }
.cof-lot-ligne input[name=q] { width: 96px; flex: 0 0 auto; }
.cof-derog { flex: 1 1 100%; }
.cof-series { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.cof-serie { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 999px; padding: 1px 4px 1px 10px; background: var(--panel); font-size: 13px; }
.cof-serie.perime { border-color: var(--danger); color: var(--danger); }
.cof-serie-saisie { display: flex; gap: 6px; flex-wrap: wrap; }
.cof-serie-saisie input { flex: 1 1 220px; max-width: 360px; }
.cof-total { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: flex-end; margin-top: 6px; font-size: 13px; }
.cof-ecart { flex: 1 1 260px; }
.cof-qte-simple input { max-width: 150px; }
.cof-terminer { margin: 4px 0 8px; font-weight: 600; }
.cof-bloc .cof-produit { margin: 4px 0 8px; font-size: 14px; }
.cof-actions { margin: 6px 0 10px; }
.cof-sous-titre { font-size: 13px; margin: 12px 0 6px; }
.cof-produits { display: flex; flex-wrap: wrap; gap: 6px; }
.cof-produit-puce { border: 1px solid var(--border); border-radius: 8px; padding: 2px 8px; font-size: 13px; }
.cof-produit-puce.annule { opacity: .55; }
.cof-declarations tr.cof-annulee td { color: var(--muted); }
.ach-contre-passe td { color: var(--muted); }
.ach-contre-passe td:nth-child(3) { text-decoration: line-through; }
/* Consommations non declarees des pieces produites (OF, tablette, tracabilite). */
.cof-alerte { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 4px 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); background: color-mix(in srgb, var(--danger) 7%, var(--panel)); }
.cof-alerte.cof-alerte-cloture { border-color: color-mix(in srgb, var(--warning, #c2410c) 45%, var(--border)); background: color-mix(in srgb, var(--warning, #c2410c) 6%, var(--panel)); }
.cof-avis-sans-conso { margin: 2px 0 8px; }
.cof-motif-cloture { margin: 0 0 8px; }
.ma-alerte { font-size: 16px; margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); background: color-mix(in srgb, var(--danger) 7%, var(--panel)); }
.trc-alerte { display: block; font-size: 12.5px; color: var(--danger); margin-top: 2px; }
.ma-declarer { margin: 10px 0 18px; }
.ma-lot { font-weight: 600; }
.of-lot-info { align-self: center; }
.trc-carte { width: 1060px; }
.trc-objet { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.trc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.trc-sens { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trc-sens h3 { font-size: 14px; margin: 0 0 6px; }
.trc-arbre { list-style: none; margin: 0; padding-left: 16px; border-left: 2px solid var(--border); }
.trc-arbre.trc-racine { padding-left: 0; border-left: 0; }
.trc-arbre li { margin: 4px 0; }
.trc-arbre summary, .trc-feuille { font-size: 13px; line-height: 1.55; }
.trc-arbre summary { cursor: pointer; }
.trc-rev { font-size: 12px; padding: 0 5px; border-radius: 5px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary-texte); }
.trc-q { font-weight: 600; margin-left: 4px; }
.trc-masque { color: var(--muted); }
.trc-cherche { display: flex; gap: 6px; margin-bottom: 10px; }
.trc-cherche input { flex: 1 1 auto; }
.trc-liste { list-style: none; margin: 0; padding: 0; }
.trc-item { width: 100%; text-align: left; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); margin-bottom: 4px; cursor: pointer; color: var(--text); font: inherit; }
.trc-item:hover, .trc-item:focus-visible { background: var(--hover); }
.trc-bandeau-recherche { display: block; font-size: 12.5px; font-weight: 400; margin-top: 4px; }
@media (max-width: 900px) {
  .trc-sens { grid-template-columns: 1fr; }
  .trc-carte, .cof-carte { width: auto; }
  .cof-prevu { margin-left: 0; }
}
/* Espace de travail (espace-travail.js) : reservation de la fiche, copies de
   secours, Mes extractions, autorisation d'un poste. */
.fiche-reservation { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--lock) 45%, var(--border)); border-left: 4px solid var(--lock);
  background: color-mix(in srgb, var(--lock) 7%, var(--panel)); }
.fiche-reservation.a-moi { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); border-left-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--panel)); }
.fiche-reservation[hidden], .fiche-copies[hidden] { display: none; }
.fiche-reservation-actions { display: inline-block; margin-left: 6px; }
.fiche-copies { margin: 0 0 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; padding: 2px 10px; }
.fiche-copies summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.ws-copies { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; }
.ws-copies li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; padding: 5px 0; border-top: 1px solid var(--border); }
.ws-copies-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ext-actions { white-space: normal; }
.ext-actions button { margin: 2px 0; }
.poste-portees { margin: 4px 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.poste-code b { font-size: 20px; letter-spacing: 2px; font-family: ui-monospace, Consolas, monospace; }
.profil-aide { margin: -4px 0 8px; }
/* Identite meumo inscrite dans les fichiers exportes : « Identifier un
   fichier » (articles.js), case « sans l'identite » de la fenetre d'export. */
.identifier-resultat { margin-top: 12px; padding: 8px 12px; border-radius: 8px; font-size: 13px;
  border: 1px solid var(--border); border-left: 4px solid var(--muted); background: var(--panel); }
.identifier-resultat:empty { display: none; }
.identifier-resultat.ok { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--panel)); }
.identifier-resultat.attention { border-left-color: var(--lock); background: color-mix(in srgb, var(--lock) 7%, var(--panel)); }
.identifier-resultat.erreur { border-left-color: var(--danger); }
.identifier-resultat p { margin: 4px 0; }
.identifier-titre { font-weight: 600; }
/* !important : les libelles de case a cocher sont en display:flex !important. */
#export-sans-inscription-zone[hidden], #export-inscription-aide[hidden], #inscriptions-bloc[hidden],
#adm-export-zip-brut-zone[hidden], #selection-sans-inscription-zone[hidden] { display: none !important; }
/* Exporter l'assemblage (web/export-assemblage.js) : options, apercu,
   progression, lien de partage, exports precedents. */
.exa-carte { width: 760px; }
.exa-racine { font-weight: 600; margin: 6px 0; }
.exa-racine:empty { display: none; }
.exa-ref { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.exa-options fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px 6px; margin: 0 0 8px; }
.exa-options legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.exa-partage { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 2px 0 8px 26px; }
.exa-partage label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.exa-partage input { max-width: 220px; }
.exa-apercu, .exa-resultat { margin-top: 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px;
  border: 1px solid var(--border); border-left: 4px solid var(--muted); background: var(--panel); }
.exa-apercu:empty, .exa-resultat:empty { display: none; }
.exa-apercu.ok, .exa-resultat.ok { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--panel)); }
.exa-apercu.attention { border-left-color: var(--lock); background: color-mix(in srgb, var(--lock) 7%, var(--panel)); }
.exa-apercu.erreur, .exa-resultat.erreur { border-left-color: var(--danger); }
.exa-apercu p, .exa-resultat p { margin: 4px 0; }
/* PDF / STEP manquants, chemins trop longs pour Windows : ligne mise en evidence. */
.exa-apercu .exa-formats.manque, .exa-apercu .exa-chemins { border-left: 3px solid var(--lock); padding-left: 8px; }
.exa-detail { margin-top: 8px; }
.exa-detail summary { cursor: pointer; font-size: 13px; }
.exa-detail-table { max-height: 300px; overflow: auto; margin-top: 6px; }
.exa-table td { white-space: nowrap; }
.exa-actions { margin-top: 10px; }
.exa-suivi { margin-top: 10px; }
.exa-suivi progress { width: 100%; height: 12px; }
.exa-suivi #exa-etape { margin: 4px 0; }
.exa-lien { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.exa-lien input { flex: 1 1 260px; min-width: 0; }
.exa-recents h4 { margin: 14px 0 4px; font-size: 13px; }
.exa-recents-liste { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.exa-recents-liste li { padding: 4px 0; border-top: 1px solid var(--border); }
#exa-sans-inscription-zone[hidden], #exa-partage-libelle[hidden], #exa-ref-zone[hidden], #exa-partage-zone[hidden], #exa-suivi[hidden],
#exa-detail[hidden], #export-assemblage-bloc[hidden] { display: none !important; }
/* Codes des projets et des familles, assistant de reaffectation (codes.js). */
.code-badge { display: inline-block; padding: 0 6px; margin-right: 4px; border-radius: 4px; font-size: 12px; font-weight: 600;
  font-family: ui-monospace, Consolas, monospace; letter-spacing: .3px; white-space: nowrap; vertical-align: baseline;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--panel)); color: var(--text); }
.code-badge.code-repere { font-weight: 500; border-style: dashed; background: transparent; }
.code-zone label { display: flex; flex-direction: column; gap: 2px; }
.code-ligne { display: flex; gap: 6px; align-items: center; }
.code-ligne input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; text-transform: uppercase; }
.code-ligne input::placeholder { text-transform: none; }
.codes-form { display: flex; flex-direction: column; gap: 10px; }
.codes-type { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.codes-type legend { font-weight: 600; padding: 0 4px; }
.codes-type > p { flex-basis: 100%; margin: 0; }
.codes-court { width: 7em; }
.codes-form input[type="text"]:not(.codes-court) { font-family: ui-monospace, Consolas, monospace; }
.pil-sp-form .codes-court { font-family: ui-monospace, Consolas, monospace; text-transform: uppercase; }
.mxc-code .modal-card { width: min(560px, calc(100vw - 32px)); }
.mxc-code-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.mxc-code-form label { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.mxc-code-form input { font-family: ui-monospace, Consolas, monospace; text-transform: uppercase; }
.mxc-code-form p, .mxc-code-form .status-msg { flex-basis: 100%; margin: 0; }
.mxc-verrou { padding: 8px 10px; border-radius: 8px; border-left: 4px solid var(--lock, var(--danger));
  background: color-mix(in srgb, var(--lock, var(--danger)) 7%, var(--panel)); font-size: 13px; }
.mxc-pied, .reaff-modal .modal-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 0 18px 16px; }
.mxc-hist ul, .reaff-hist ul { margin: 4px 0; padding-left: 18px; font-size: 13px; }
.reaff-modal .modal-card { width: min(1100px, calc(100vw - 32px)); }
.reaff-dossiers { margin: 2px 0; font-size: 14px; overflow-wrap: anywhere; }
.reaff-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.reaff-scroll { max-height: 48vh; overflow: auto; }
.reaff-table td.reaff-chemin { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.reaff-table tr.reaff-bloque td { opacity: .8; }
.reaff-resultat { padding: 8px 10px; border-radius: 8px; font-size: 13px; border-left: 4px solid var(--ok);
  background: color-mix(in srgb, var(--ok) 8%, var(--panel)); }
.reaff-resultat.erreur { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--panel)); }
.reaff-vide { padding: 10px 0; color: var(--ok); font-weight: 600; }
.reaff-bandeau { margin: 0; padding: 6px 10px; border-radius: 8px; font-size: 13px; border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 5%, var(--panel)); }
.hier-reaff:empty { display: none; }
/* Codification des references (codification.js) : un seul masque ; article
   sans projet / famille / type, compteur, codes des types d'article (T). Les
   erreurs (masque, debut du compteur, codes) suivent le mecanisme commun des
   champs en erreur (web/formulaires.js, .mx-erreur-champ). */
.p-section form.ref-form .ref-pf { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 10px; }
/* En colonne et sans retour a la ligne : la phrase « Sans effet… » (un <p>,
   flex-basis 100 % par la regle commune .codes-type > p) prendrait sinon
   toute la hauteur du cadre et rejetterait les choix dans une seconde
   colonne, par-dessus le cadre voisin (masque sans P, F ni T : le defaut). */
.p-section form.ref-form .ref-pf .codes-type { flex: 1 1 320px; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 4px; }
.p-section form.ref-form .ref-pf label { flex: none; min-width: 0; }
.p-section form.ref-form .ref-pf .ref-types { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 6px 14px; }
.p-section form.ref-form .ref-pf .ref-type { display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.p-section form.ref-form .ref-pf .ref-type input { width: 9em; font-family: ui-monospace, Consolas, monospace; }
.p-section form.ref-form .ref-pf .ref-types > .muted { flex-basis: 100%; }
.p-section form.ref-form .ref-pf .ref-types .mx-erreur-champ { flex-basis: 100%; margin-top: 0; }
#ref-masque, #ref-code-defaut { font-family: ui-monospace, Consolas, monospace; }
#ref-origine { width: 8em; }
/* Reglage sans effet pour le masque saisi (pas de P, F ou T) : cadre en
   pointilles et phrase « Sans effet… » en couleur de texte normale. Jamais
   d'opacite reduite : le texte doit garder un contraste AA (4,5:1). */
.ref-pf .ref-pf-inutile { border-style: dashed; }
.ref-pf .ref-sans-effet { flex: none; margin: 0; font-size: 12.5px; color: var(--text); font-style: italic; max-width: 100%; }
.ref-pf .ref-sans-effet[hidden] { display: none; }
/* Les choix (boutons radio) se replient sur plusieurs lignes a cote de leur
   bouton : jamais de cadre plus large que la vue (tablette, 768 px). */
.p-section form.ref-form .ref-pf .codes-type { min-width: 0; max-width: 100%; }
.p-section form.ref-form .ref-pf label.dossier-option { flex-wrap: nowrap; align-items: flex-start; max-width: 100%; }
.p-section form.ref-form .ref-pf label.dossier-option > span { white-space: normal; flex: 1 1 auto; min-width: 0; }
.p-section form.ref-form .ref-pf label.dossier-option input[type=radio] { align-self: flex-start; margin-top: 2px; }
.ref-explication { margin: 4px 0 0; padding-left: 18px; }
.ref-explication:empty { display: none; }
.code-zone.code-sous-niveau [data-code-aide] { white-space: normal; }
@media (max-width: 700px) {
  .reaff-table td.reaff-chemin { max-width: 140px; }
  .codes-type { flex-direction: column; align-items: stretch; }
}

/* ----- Lot 7a : info-bulle commune (web/infobulles.js) -----
   Une seule bulle, en position fixe a la racine de la page, au premier
   plan (au-dessus des fenetres, menus, en-tetes de tableau figes) et
   ramenee dans l'ecran par le script. Les pastilles « i » existantes
   gardent leur texte dans la page mais ne s'affichent plus sur place
   (elles etaient coupees par les tableaux qui defilent). */
.mx-infobulle { position: fixed; left: 0; top: 0; z-index: 2147483000; max-width: 340px; padding: 7px 10px; border-radius: 6px;
  background: var(--text); color: var(--bg); font-size: 12.5px; font-weight: 400; font-style: normal; line-height: 1.4; text-align: left;
  text-transform: none; letter-spacing: normal; white-space: pre-line; overflow-wrap: anywhere; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); pointer-events: auto; }
.mx-infobulle[hidden] { display: none; }
.mx-infobulle::after { content: ""; position: absolute; left: var(--mx-fleche, 50%); transform: translateX(-50%); border: 6px solid transparent; }
.mx-infobulle[data-place="bas"]::after { bottom: 100%; border-bottom-color: var(--text); }
.mx-infobulle[data-place="haut"]::after { top: 100%; border-top-color: var(--text); }
.info-bulle .bulle-texte, .mc-info .mc-bulle { display: none !important; }
.cadenas[data-infobulle], .resa-cadenas[data-infobulle] { cursor: help; }

/* ----- Lot 7a : champs en erreur (web/formulaires.js) ----- */
.mx-champ-erreur, input.mx-champ-erreur, select.mx-champ-erreur, textarea.mx-champ-erreur, .mx-choix-dossier-btn.mx-champ-erreur {
  border-color: var(--danger) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 30%, transparent) !important; }
fieldset.mx-champ-erreur, .dossier-choix.mx-champ-erreur { border: 1px solid var(--danger) !important; border-radius: 8px; }
.mx-erreur-champ { color: var(--danger); font-size: 12px; font-weight: 600; line-height: 1.35; margin-top: 2px; text-transform: none; white-space: normal; }
/* Signe « attention » de meumo (web/icones.js), ambre. */
.mx-erreur-champ::before { content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-inline-end: .3em; vertical-align: -.2em; background: var(--ambre); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3L2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 10v4M12 17.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3L2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 10v4M12 17.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Message place en fin de rangee (data-mx-erreur-apres) : sa propre ligne. */
.mx-erreur-champ.mx-erreur-ligne { flex-basis: 100%; width: 100%; margin-top: 0; }

/* ----- Lot 7a : notifications par e-mail indisponibles ----- */
#notif-prefs-table .np-indisponible { color: var(--muted); background: color-mix(in srgb, var(--muted) 8%, transparent); cursor: help; }
.np-raison { margin: 8px 0 4px; padding: 6px 10px; border-left: 3px solid var(--lock); border-radius: 6px; font-size: 13px;
  background: color-mix(in srgb, var(--lock) 8%, var(--panel)); color: var(--text); }
.np-raison .lien { margin-left: 4px; }

/* ----- Lot 7a : droits (administrateur, personnes par leur nom) ----- */
.mc-admin-note { margin: 4px 0 10px; padding: 8px 12px; border-left: 3px solid var(--ok); border-radius: 6px; font-size: 13px;
  background: color-mix(in srgb, var(--ok) 8%, var(--panel)); color: var(--text); }
input.mc-cell[data-admin] { opacity: .75; cursor: not-allowed; }
.mx-cp-liste { list-style: none; margin: 0; padding: 4px; font-size: 14px; max-height: 50vh; overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
.mx-cp-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 4px; cursor: pointer; outline: none; }
.mx-cp-item:hover { background: var(--hover); }
.mx-cp-item.selection { background: color-mix(in srgb, var(--primary) 16%, var(--panel)); font-weight: 600; }
.mx-cp-item:focus-visible { box-shadow: 0 0 0 2px var(--primary); }
.mx-cp-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-cp-role { flex: none; font-size: 12px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--border); color: var(--muted); }
#ndroit-article-ligne[hidden] { display: none; }

/* ----- Lot 7a : Mes extractions (consultations) ----- */
#ext-table tr.ext-consultation td:first-child { border-left: 3px solid var(--muted); }
.ext-plus-recent { display: inline-block; margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--lock); }
/* Lot 12 : etat de la copie sur le poste (Mes extractions, Mon espace),
   copie non reservee, fenetre « Deposer ». Couleurs des etats de la charte. */
.ext-copie .badge-etat, .badge-etat.etat-copie { display: inline-flex; align-items: center; gap: 4px; white-space: normal; }
.badge-etat.etat-copie-a_jour { border-color: color-mix(in srgb, var(--ok) 60%, var(--border)); color: var(--ok); }
.badge-etat.etat-copie-modifie, .badge-etat.etat-copie-verification, .badge-etat.etat-non-reservee { border-color: color-mix(in srgb, var(--lock) 60%, var(--border)); color: var(--lock); }
.badge-etat.etat-copie-plus_recent { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); color: var(--primary-texte); }
.badge-etat.etat-copie-conflit, .badge-etat.etat-copie-supprime { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); color: var(--danger); }
.ext-copie-detail { display: block; margin-top: 2px; }
.ext-postes { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-depot-alerte { color: var(--lock); font-weight: 600; display: flex; gap: 6px; align-items: flex-start; }
.ws-reserver { margin-top: 4px; }
.ws-depot-fichier { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 10px; }

/* ----- Lot 7a : « Parcourir… » (dossiers du serveur et du poste) ----- */
.mx-cdp-attente { display: flex; align-items: flex-start; gap: 8px; }
.mx-cdp-roue { flex: none; display: inline-block; width: 14px; height: 14px; margin-top: 2px; border: 2px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%; animation: m-tourne 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .mx-cdp-roue { animation: none; } }

/* ----- Lot 7a : renommer un dossier (sur place par défaut) ----- */
.mxr-form { display: flex; flex-direction: column; gap: 10px; }
.mxr-form p { margin: 0; overflow-wrap: anywhere; }
.mxr-avert { padding: 8px 12px; border-left: 3px solid var(--lock); border-radius: 6px; font-size: 13px;
  background: color-mix(in srgb, var(--lock) 8%, var(--panel)); color: var(--text); }
.mxr-avert ul { margin: 6px 0 0; padding-left: 18px; }
.nv-option input[type=radio]:disabled + span { opacity: .75; }
/* Reglages > Taches (lot 9) */
.taches-reglages { align-items: flex-end; }
.champ-avec-unite { display: inline-flex; align-items: center; gap: 6px; }
.champ-avec-unite input { width: 90px; }
/* Plan de charge : semaine en surcharge (lot 9) */
.charge-case.surcharge { border-color: var(--ambre); box-shadow: inset 0 0 0 1px var(--ambre); }
.charge-alerte { position: absolute; top: 1px; right: 3px; font-size: 11px; color: var(--ambre); }
.charge-surcharge-leg { color: var(--ambre); margin-left: 6px; }
.carte-projet { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.carte-pied { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.kanban-pause { display: inline-flex; align-items: center; gap: 3px; }
.kanban-pause .mx-ic { width: 12px; height: 12px; }