/* meumo - Fondation visuelle (lot 8) : polices, jetons de couleur des deux
 * themes et composants communs, d'apres les maquettes validees (identite,
 * Articles, theme sombre, icones, formulaire, ecrans vides).
 *
 * Charge APRES app.css : les regles de ce fichier priment sur les anciennes.
 * Les ecrans utilisent les jetons (--fond, --surface, --texte, --principal,
 * familles --bleu, --vert...) ; les anciens noms (--bg, --panel, --text,
 * --primary, --danger...) restent definis et pointent sur les jetons, pour
 * que tout l'existant suive le theme sans etre reecrit.
 *
 * Deux themes : clair (par defaut) et sombre ([data-theme="sombre"] sur
 * <html>, pose par web/theme.js, qui gere aussi « Comme le systeme »).
 * Chaque couple texte / fond utilise ici respecte le contraste WCAG AA
 * (4,5:1) dans les deux themes : tests/test_contraste_themes.py.
 */

/* ============================== Polices installees ==============================
 * Quicksand (nom « meumo » et titres) et Nunito (texte), fichiers woff2 livres
 * dans web/fonts/ (licence SIL OFL 1.1, voir web/fonts/OFL-*.txt) : rien n'est
 * charge depuis Internet (RGPD, fonctionnement hors ligne). Sous-ensembles
 * latin et latin etendu (accents, oe, euro, guillemets). */
@font-face { font-family: 'Quicksand'; font-style: normal; font-display: swap; font-weight: 600;
  src: url(/fonts/quicksand-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-display: swap; font-weight: 600;
  src: url(/fonts/quicksand-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/fonts/quicksand-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/fonts/quicksand-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/fonts/nunito-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/fonts/nunito-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 600;
  src: url(/fonts/nunito-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 600;
  src: url(/fonts/nunito-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/fonts/nunito-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/fonts/nunito-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ============================== Jetons : theme clair ============================== */
:root {
  color-scheme: light;
  --police-texte: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --police-titre: 'Quicksand', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --police-marque: var(--police-titre);
  --font-stack: var(--police-texte);

  /* Fonds, surfaces, traits */
  --fond: #FBF6EE;            /* creme : fond de page */
  --surface: #FFFFFF;         /* cartes, tableaux, fenetres */
  --surface-2: #F3ECE2;       /* zones en retrait, survol, apercus */
  --bordure: #EADFD0;
  --bordure-champ: #D9CBB9;   /* contour des champs de saisie (maquette Formulaire) */
  --ligne: #F3ECE2;           /* separateurs des lignes de tableau */
  --colonne: #F1E8DA;         /* colonnes des tableaux de cartes */
  --selection-ligne: #FDF6EC; /* ligne choisie d'un tableau */
  /* Textes */
  --texte: #3A2618;
  --texte-2: #6A5444;
  --texte-3: #7A6555;
  --titre: #4A2E16;           /* titres et nom « meumo » (chocolat) */
  /* Couleur principale (caramel) */
  --principal: #A85A1C;
  --principal-survol: #8E4A14;
  --sur-principal: #FFFFFF;
  --principal-doux: #F6E6D3;
  --principal-doux-survol: #F0D9BF;
  --principal-doux-texte: #7A3F10;
  --museau: #F2A9A0;
  --avatar-fond: #FBE3DE;
  --avatar-texte: #8A3B2E;
  --icone-discrete: #A08A78;  /* entonnoir des colonnes (3:1 sur blanc) */
  /* Familles (fond / texte) : statuts, icones des actions, pastilles */
  --bleu-fond: #E7EEF8;      --bleu: #1F4E8C;
  --turquoise-fond: #E3F2EF; --turquoise: #0F6B5C;
  --violet-fond: #EEE8F8;    --violet: #5B3A99;
  --vert-fond: #E5F3E9;      --vert: #1E6B43;
  --rouge-fond: #FBE9E7;     --rouge: #9B2C1F;   --rouge-bordure: #B42318;
  --ambre-fond: #FDF0D8;     --ambre: #8A4E00;
  --brun-fond: #F3ECE2;      --brun: #6A5444;
  /* Aplats (bouton plein d'une famille : Supprimer confirme, Valider...) */
  --rouge-plein: #B42318;    --sur-rouge: #FFFFFF;
  --vert-plein: #1E6B43;     --sur-vert: #FFFFFF;
  /* Formes et ombres */
  --rayon-s: 10px;
  --rayon: 12px;
  --rayon-m: 16px;
  --rayon-l: 18px;
  --rayon-xl: 22px;
  --ombre-carte: 0 1px 2px rgba(58, 38, 24, .05);
  --ombre-menu: 0 16px 40px rgba(58, 38, 24, .22), 0 0 0 1px var(--bordure);
  --ombre-fenetre: 0 24px 64px rgba(58, 38, 24, .30);
  --voile: rgba(58, 38, 24, .45);
  /* Voile des tutoriels (autour de la cible mise en lumiere) : assez sombre
     pour que le liseré de surface du cadre ressorte (3:1, AA). */
  --voile-tuto: rgba(58, 38, 24, .58);
  --infobulle-fond: #3A2618;
  --infobulle-texte: #FFFFFF;

  /* ---- Anciens noms, branches sur les jetons (tout l'existant suit) ---- */
  --bg: var(--fond);
  --panel: var(--surface);
  --border: var(--bordure);
  --text: var(--texte);
  --muted: var(--texte-2);
  --primary: var(--principal);
  --primary-hover: var(--principal-survol);
  --primary-plein: var(--principal);
  --primary-texte: var(--principal);
  --accent: var(--principal);
  --danger: var(--rouge);
  --ok: var(--vert);
  --lock: var(--ambre);
  --warning: var(--ambre);
  --hover: var(--surface-2);
  --accent-gris: var(--surface-2);
  --imp: var(--vert);
  --exp: var(--bleu);
  --selection: rgba(168, 90, 28, .16);
  --bg-elev: var(--surface);
  --bg-soft: var(--fond);
  --sidebar: var(--surface);
  --sidebar-text: var(--texte-2);
  --sidebar-hover: var(--surface-2);
  --sidebar-border: var(--bordure);
  --grad-debut: var(--surface);
  --grad-fin: var(--surface);
  --gradient: var(--fond);
}

/* ============================== Jetons : theme sombre ==============================
 * Proche du noir, peu brun (demande du proprietaire) ; le caramel s'eclaircit
 * pour rester lisible, le texte des boutons pleins devient fonce. */
:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #121110;
  --surface: #1C1A18;
  --surface-2: #262320;
  --bordure: #34302C;
  --bordure-champ: #4A443E;
  --ligne: #34302C;
  --colonne: #171513;
  --selection-ligne: #262320;
  --texte: #F6EEDF;
  --texte-2: #D2C9BE;
  --texte-3: #ADA295;
  --titre: #F6EEDF;
  --principal: #E09A55;
  --principal-survol: #EBB27A;
  --sur-principal: #121110;
  --principal-doux: #33281F;
  --principal-doux-survol: #3E3125;
  --principal-doux-texte: #F2C08A;
  --museau: #F2A9A0;
  --avatar-fond: #3A2E2C;
  --avatar-texte: #F7C9C2;
  --icone-discrete: #8F857A;
  --bleu-fond: #1E2E45;      --bleu: #A9C5F0;
  --turquoise-fond: #183A35; --turquoise: #8FD5C7;
  --violet-fond: #2E2545;    --violet: #C3A8F0;
  --vert-fond: #1F3A2A;      --vert: #9FD8B3;
  --rouge-fond: #3F1E1A;     --rouge: #F0A69B;   --rouge-bordure: #F0A69B;
  --ambre-fond: #3A2C14;     --ambre: #F2C46B;
  --brun-fond: #262320;      --brun: #D2C9BE;
  --rouge-plein: #F0A69B;    --sur-rouge: #121110;
  --vert-plein: #9FD8B3;     --sur-vert: #121110;
  --ombre-carte: none;
  --ombre-menu: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 1px var(--bordure);
  --ombre-fenetre: 0 24px 64px rgba(0, 0, 0, .6);
  --voile: rgba(0, 0, 0, .6);
  --voile-tuto: rgba(0, 0, 0, .62);
  --infobulle-fond: #F6EEDF;
  --infobulle-texte: #121110;
  --selection: rgba(224, 154, 85, .22);
}

/* Aplats supplementaires (bouton plein d'une famille). */
:root { --ambre-plein: #8A4E00; --sur-ambre: #FFFFFF; --bleu-plein: #1F4E8C; --sur-bleu: #FFFFFF; }
:root[data-theme="sombre"] { --ambre-plein: #F2C46B; --sur-ambre: #121110; --bleu-plein: #A9C5F0; --sur-bleu: #121110; }

/* ============================== Base ============================== */
html { background: var(--fond); }
body { font-family: var(--police-texte); font-size: 14px; line-height: 1.45; background: var(--fond); color: var(--texte);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, .titre-meumo { font-family: var(--police-titre); font-weight: 700; color: var(--titre); letter-spacing: .1px; }
h5, h6 { font-family: var(--police-titre); font-weight: 700; }
a { color: var(--principal); }
a:hover { color: var(--principal-survol); }
::selection { background: var(--selection); }
:focus-visible { outline: 2px solid var(--principal); outline-offset: 2px; }
/* Pas de majuscules forcees : titres de colonnes, intitules et onglets
   gardent leur ecriture (maquettes). */
th, .kpi-label, .sidebar h3, .data-table th, .param-nav h3, .mm-legend-head h4, .mm-tables-panel h4,
.mm-detail-cols h4, .bulle-metas .bulle-titre, .acc-bloc h4, .v3d-cat summary, .fiche-chrono-titre,
.fiche-valid-historique, .tw-apercu-titre, .mm-minimap-titre, .v3d-fichier-grp label.mini { text-transform: none; letter-spacing: normal; }
label { color: var(--texte-2); font-size: 13px; font-weight: 700; }
.muted { color: var(--texte-2); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ============================== En-tete commun ==============================
 * Tete de vache + « meumo » (Quicksand 700, chocolat ; creme en sombre),
 * navigation en pastilles, puis notifications, reglages, avatar. */
.topbar { background: var(--surface); color: var(--texte); gap: 20px; padding: 8px 24px; min-height: 60px;
  box-shadow: 0 1px 0 var(--bordure); position: relative; z-index: 50; }
.topbar .brand { gap: 8px; font-family: var(--police-marque); font-weight: 700; font-size: 24px; letter-spacing: .5px; color: var(--titre); line-height: 1; }
.topbar .brand-logo { width: 40px; height: 40px; }
.topbar .brand-nom { color: var(--titre); }
.topbar .nav { gap: 4px; align-items: center; }
.topbar .nav-btn { color: var(--texte-2); background: transparent; border: none; border-radius: var(--rayon-s); padding: 8px 14px;
  font-size: 14.5px; font-weight: 600; min-height: 38px; }
.topbar .nav-btn:hover { background: var(--surface-2); color: var(--texte); }
.topbar .nav-btn.active { background: var(--principal-doux); color: var(--principal-doux-texte); font-weight: 700; }
.topbar .nav-plus-btn.contient-actif::after { background: var(--principal); }
.nav-plus-liste { background: var(--surface); border: none; border-radius: var(--rayon-m); box-shadow: var(--ombre-menu); padding: 8px; }
.nav-plus-liste .nav-btn { color: var(--texte); border-radius: var(--rayon-s); padding: 10px 12px; font-weight: 600; }
.nav-plus-liste .nav-btn:hover, .nav-plus-liste .nav-btn:focus-visible { background: var(--fond); color: var(--texte); }
.nav-plus-liste .nav-btn.active { background: var(--principal-doux); color: var(--principal-doux-texte); }
.topbar .user-area { gap: 4px; color: var(--texte-2); font-size: 13px; }
.topbar .user-area button { color: var(--texte-2); background: transparent; border: none; border-radius: var(--rayon); }
.topbar .user-area button:hover { background: var(--surface-2); color: var(--texte); }
.topbar .user-area .btn-icone { width: 40px; height: 40px; min-height: 40px; padding: 0; position: relative; }
.topbar .user-area .btn-icone .mx-icone { width: 20px; height: 20px; }
.topbar .user-area .btn-icone .btn-libelle { display: none; }
.topbar .btn-mode { border: 1px solid var(--bordure); border-radius: 999px; padding: 0 12px; height: 32px; min-height: 32px; font-size: 13px; font-weight: 600; color: var(--texte-2); }
.topbar .user-area .btn-mode { border: 1px solid var(--bordure); }
.topbar .user-area .btn-mode:hover { background: var(--surface-2); }
/* Nom et role : l'avatar (initiales) les remplace a l'ecran (maquette) ; ils
   sont repris dans son info-bulle et son nom accessible (web/app.js). */
.topbar #user-name, .topbar #user-badge { display: none; }
.topbar #btn-profil.btn-profil-avatar { width: 40px; height: 40px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; }
.topbar #btn-profil .btn-avatar-defaut { width: 36px; height: 36px; border-radius: 50%; background: var(--avatar-fond); color: var(--avatar-texte);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; letter-spacing: .3px; }
.topbar #btn-profil .btn-avatar-defaut.hidden { display: none; }
.topbar #btn-profil .btn-avatar-defaut .mx-icone { width: 20px; height: 20px; }
.topbar #btn-profil .btn-avatar-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.topbar #btn-profil:hover { background: transparent; }
.topbar #btn-profil:hover .btn-avatar-defaut { box-shadow: 0 0 0 3px var(--principal-doux); }
.notif-badge { background: var(--rouge-plein); color: var(--sur-rouge); border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 6px; line-height: 1.3; }
.topbar #notif-badge { position: absolute; top: 2px; right: 0; margin: 0; box-shadow: 0 0 0 2px var(--surface); }
.topbar .mx-liaisons { border: 1px solid var(--bordure); border-radius: 999px; height: 32px; min-height: 32px; padding: 0 12px; }
.topbar .mx-enregistre { color: var(--vert); }
@media (max-width: 1100px) {
  .topbar { gap: 12px; padding: 8px 14px; }
  .topbar .nav-btn { padding: 8px 10px; font-size: 14px; }
  .topbar .brand { font-size: 21px; }
  .topbar .brand-logo { width: 34px; height: 34px; }
}
@media (max-width: 900px) {
  .topbar .nav-btn { padding: 6px 8px; font-size: 13.5px; }
  .topbar .user-area .btn-icone { width: 36px; height: 36px; min-height: 36px; }
  .topbar #btn-profil.btn-profil-avatar { width: 36px; height: 36px; }
  .topbar #btn-profil .btn-avatar-defaut, .topbar #btn-profil .btn-avatar-img { width: 32px; height: 32px; font-size: 13px; }
}

/* ============================== Boutons ==============================
 * Trois styles : principal (caramel plein, une action par ecran), secondaire
 * (caramel doux) et discret (texte seul, survol creme). Rayons 10-12 px,
 * libelles courts, icone a gauche (web/icones.js : une action = une icone =
 * une couleur). */
button { font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--texte); background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--rayon-s); padding: 6px 14px; min-height: 34px; line-height: 1.25; vertical-align: middle; }
button:hover { background: var(--fond); }
button:disabled, button[disabled] { opacity: .55; cursor: not-allowed; }
button.primary, button.principal, .bouton-principal { background: var(--principal); color: var(--sur-principal); border: 1px solid var(--principal); font-weight: 700; }
button.primary:hover, button.principal:hover, .bouton-principal:hover { background: var(--principal-survol); border-color: var(--principal-survol); color: var(--sur-principal); }
button.secondaire, .bouton-secondaire { background: var(--principal-doux); color: var(--principal-doux-texte); border: 1px solid transparent; font-weight: 700; }
button.secondaire:hover, .bouton-secondaire:hover { background: var(--principal-doux-survol); color: var(--principal-doux-texte); }
button.ghost, button.discret { background: transparent; color: var(--texte); border-color: transparent; }
button.ghost:hover, button.discret:hover { background: var(--surface-2); color: var(--texte); }
button.ghost.small, button.ghost.mini { color: var(--texte); }
button.ghost.danger, button.danger { background: transparent; border: 1px solid color-mix(in srgb, var(--rouge) 45%, var(--bordure)); color: var(--rouge); }
button.ghost.danger:hover, button.danger:hover, .danger.small:hover { background: var(--rouge-fond); color: var(--rouge); border-color: var(--rouge); }
button.danger-plein { background: var(--rouge-plein); border-color: var(--rouge-plein); color: var(--sur-rouge); }
button.danger-plein:hover { background: var(--rouge-plein); filter: brightness(.95); }
button.small { font-size: 13px; padding: 3px 10px; min-height: 30px; border-radius: 9px; }
button.mini { font-size: 12.5px; padding: 2px 8px; min-height: 26px; border-radius: 8px; line-height: 1.3; }
button.ghost.mini, button.ghost.small { min-width: 26px; }
button.occupe::after { border-color: color-mix(in srgb, var(--sur-principal) 35%, transparent); border-top-color: var(--sur-principal); }
button.occupe:not(.primary):not(.principal)::after { border-color: var(--bordure); border-top-color: var(--principal); }
button:focus-visible { outline: 2px solid var(--principal); outline-offset: 2px; }
/* Icones des boutons (web/icones.js) */
.mx-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -4px; display: inline-block; }
/* Icone suivie d'un libelle (pose par web/icones.js) : petit espace. */
.mx-ic.mx-ic-avant { margin-inline-end: 7px; }
button.mini .mx-ic, button.small .mx-ic { width: 15px; height: 15px; vertical-align: -3px; }
button.mini .mx-ic.mx-ic-avant, button.small .mx-ic.mx-ic-avant { margin-inline-end: 5px; }
.mx-ic.plein { fill: currentColor; stroke: none; }
/* Couleur de l'icone selon l'action, sur un bouton discret ou neutre ;
   sur un bouton plein (principal, rouge), l'icone prend la couleur du texte. */
[data-mx-famille="principal"] { --mx-action-fond: var(--principal-doux); --mx-action-texte: var(--principal); }
[data-mx-famille="doux"] { --mx-action-fond: var(--principal-doux); --mx-action-texte: var(--principal-doux-texte); }
[data-mx-famille="bleu"] { --mx-action-fond: var(--bleu-fond); --mx-action-texte: var(--bleu); }
[data-mx-famille="turquoise"] { --mx-action-fond: var(--turquoise-fond); --mx-action-texte: var(--turquoise); }
[data-mx-famille="violet"] { --mx-action-fond: var(--violet-fond); --mx-action-texte: var(--violet); }
[data-mx-famille="vert"] { --mx-action-fond: var(--vert-fond); --mx-action-texte: var(--vert); }
[data-mx-famille="rouge"] { --mx-action-fond: var(--rouge-fond); --mx-action-texte: var(--rouge); }
[data-mx-famille="brun"] { --mx-action-fond: var(--brun-fond); --mx-action-texte: var(--brun); }
button[data-mx-famille]:not(.primary):not(.principal):not(.danger-plein):not(.secondaire) > .mx-ic { color: var(--mx-action-texte); }
/* Pastille d'icone (menus « Plus », tuiles) : carre arrondi aux couleurs de la famille. */
.mx-ic-pastille { width: 30px; height: 30px; border-radius: 9px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--mx-action-fond, var(--brun-fond)); color: var(--mx-action-texte, var(--brun)); }
.mx-ic-pastille .mx-ic { width: 16px; height: 16px; color: inherit !important; }
[data-mx-famille="ambre"] { --mx-action-fond: var(--ambre-fond); --mx-action-texte: var(--ambre); }
/* Signe dans un texte (web/icones.js, MX_Icones.signe) : l'icone de meumo a
   la place d'un emoji, a la taille du texte, dans la couleur de sa famille
   (cadenas violet, attention ambre, interdit rouge...). */
.mx-ic.mx-signe { width: 1.15em; height: 1.15em; vertical-align: -.2em; color: var(--mx-action-texte, currentColor); margin-inline-end: .25em; }
button .mx-ic.mx-signe { margin-inline-end: 5px; }
button .mx-ic.mx-signe:only-child, .mx-ic.mx-signe.seul { margin-inline-end: 0; }
button.mini .mx-ic.mx-signe, button.small .mx-ic.mx-signe { width: 15px; height: 15px; vertical-align: -3px; }
/* Sur un fond plein (bouton principal ou rouge, tablette d'atelier, case
   cochee), le signe prend la couleur du texte, comme l'icone d'un bouton. */
button.primary .mx-signe, button.principal .mx-signe, button.danger-plein .mx-signe,
.ma-btn:not(.ma-secondaire) .mx-signe, .ma-tete .mx-signe, .pp-case .mx-signe { color: inherit; }
.pp-case .mx-ic.mx-signe { width: 14px; height: 14px; margin: 0; vertical-align: 0; }
.pj-icone > svg { width: 32px; height: 32px; vertical-align: middle; }
.profil-avatar-defaut .mx-icone { width: 44px; height: 44px; }

/* ============================== Champs de saisie ============================== */
input, select, textarea { font-family: inherit; font-size: 14px; color: var(--texte); background: var(--surface);
  border: 1px solid var(--bordure-champ); border-radius: var(--rayon-s); padding: 7px 11px; min-height: 36px; }
textarea { line-height: 1.45; }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 18px; height: 18px; accent-color: var(--principal); padding: 0; }
input[type="range"] { min-height: 0; accent-color: var(--principal); }
input[type="color"] { min-height: 36px; padding: 3px; }
input[type="file"] { border: none; min-height: 0; padding: 0; background: transparent; color: var(--texte-2); }
input::placeholder, textarea::placeholder { color: var(--texte-3); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--principal) 35%, var(--bordure-champ)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--principal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--principal) 22%, transparent); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--texte-2); }
/* Champ en erreur (web/formulaires.js, maquette Formulaire) : contour rouge
   de 2 px, fond rose tres pale, message rouge dessous. */
.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(--rouge-bordure) !important; box-shadow: 0 0 0 1px var(--rouge-bordure) !important;
  background: color-mix(in srgb, var(--rouge-fond) 45%, var(--surface)) !important; }

/* ============================== Onglets et sous-onglets ==============================
 * Soulignement caramel de 3 px sous l'onglet actif (maquette Articles). */
.sous-onglets, .fiche-onglets-barre, .profil-tabs, .ribbon-tabs { display: flex; flex-wrap: wrap; gap: 6px; border: none;
  box-shadow: inset 0 -1px 0 var(--bordure); background: transparent; padding: 0; margin: 4px 0 14px; }
.sous-onglets > button, .fiche-onglets-barre > button, .profil-tabs .tab-btn, .ribbon-tab {
  background: transparent; border: none; border-radius: 0; padding: 10px 14px; min-height: 0; color: var(--texte-2); font-weight: 600;
  opacity: 1; box-shadow: none; }
.sous-onglets > button:hover, .fiche-onglets-barre > button:hover, .profil-tabs .tab-btn:hover, .ribbon-tab:hover { background: transparent; color: var(--texte); box-shadow: inset 0 -3px 0 var(--bordure); }
.sous-onglets > button.active, .fiche-onglets-barre > button.active, .profil-tabs .tab-btn.actif, .ribbon-tab.active {
  background: transparent; border: none; color: var(--principal-doux-texte); font-weight: 700; box-shadow: inset 0 -3px 0 var(--principal); }
#login-mode-toggle { gap: 6px; box-shadow: inset 0 -1px 0 var(--bordure); margin-bottom: 18px; }
#login-mode-toggle .tab { background: transparent; border: none; border-radius: 0; color: var(--texte-2); padding: 10px 14px; }
#login-mode-toggle .tab.active { background: transparent; color: var(--principal-doux-texte); font-weight: 700; box-shadow: inset 0 -3px 0 var(--principal); }

/* ============================== Cartes et sections ============================== */
.p-section, .kpi-card, .acc-bloc, .sidebar, #view-bom .view-tete { background: var(--surface); border: 1px solid transparent; border-radius: var(--rayon-l); box-shadow: var(--ombre-carte); }
:root[data-theme="sombre"] .p-section, :root[data-theme="sombre"] .kpi-card, :root[data-theme="sombre"] .acc-bloc,
:root[data-theme="sombre"] .sidebar, :root[data-theme="sombre"] #view-bom .view-tete { border-color: var(--bordure); }
.p-section { padding: 22px 24px; }
.kpi-card { padding: 18px 20px; }
.kpi-card .kpi-value, .kpi-value { font-family: var(--police-titre); color: var(--titre); }
.kpi-card .kpi-label { color: var(--texte-2); font-size: 13px; }
.acc-bloc { padding: 16px 18px; }
.acc-bloc h4 { color: var(--texte-3); font-size: 13px; font-weight: 700; }
hr { border: none; border-top: 1px solid var(--bordure); margin: 16px 0; }

/* ============================== Pastilles de statut ==============================
 * Couleurs des familles : vert = valide / termine, bleu = en cours, ambre =
 * en attente, rouge = refuse / en retard, brun-gris = brouillon / neutre. */
.badge-etat, .mx-pastille { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  border: none; background: var(--brun-fond); color: var(--brun); white-space: nowrap; line-height: 1.35; }
.badge-etat.etat-en_cours, .badge-etat.etat-pil-a_venir, .badge-etat.etat-proposee, .badge-etat.etat-etude, .badge-etat.etat-nature-achete,
.mx-pastille.bleu { background: var(--bleu-fond); color: var(--bleu); border: none; }
.badge-etat.etat-soumis, .badge-etat.etat-en_controle, .badge-etat.etat-nature-matiere, .mx-pastille.ambre { background: var(--ambre-fond); color: var(--ambre); border: none; }
.badge-etat.etat-approuve, .badge-etat.etat-termine, .badge-etat.etat-validee, .badge-etat.etat-pil-atteint, .badge-etat.etat-retenue,
.badge-etat.etat-disponible, .mx-pastille.vert { background: var(--vert-fond); color: var(--vert); border: none; }
.badge-etat.etat-rejete, .badge-etat.etat-annule, .badge-etat.etat-obsolete, .badge-etat.etat-pil-en_retard, .badge-etat.etat-abandonnee,
.badge-etat.etat-refuse, .badge-etat.etat-bloque, .badge-etat.etat-rebute, .mx-pastille.rouge { background: var(--rouge-fond); color: var(--rouge); border: none; }
.badge-etat.etat-epuise, .badge-etat.etat-consomme, .mx-pastille.brun { background: var(--brun-fond); color: var(--brun); }
.mx-pastille.violet { background: var(--violet-fond); color: var(--violet); }
.mx-pastille.turquoise { background: var(--turquoise-fond); color: var(--turquoise); }
.badge { background: var(--principal-doux); color: var(--principal-doux-texte); border-radius: 999px; padding: 2px 9px; font-weight: 700; }

/* ============================== Fenetres ============================== */
.modal { background: var(--voile); }
.modal-card { background: var(--surface); color: var(--texte); border: none; border-radius: var(--rayon-xl); box-shadow: var(--ombre-fenetre); }
.modal-header { padding: 20px 24px 12px; border-bottom: none; gap: 12px; }
.modal-header h2 { font-family: var(--police-titre); font-size: 22px; font-weight: 700; color: var(--titre); }
.modal-body { padding: 8px 24px 24px; }
.modal h2, .modal h3 { color: var(--titre); }
.modal label { color: var(--texte); font-weight: 700; font-size: 13.5px; }
.modal-header button, .modal-close { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; border: none;
  background: transparent; color: var(--texte-2); font-size: 20px; font-weight: 400; }
.modal-header button:hover, .modal-close:hover { background: var(--surface-2); color: var(--texte); }

/* ============================== Menus et petites fenetres ============================== */
.aide-menu, .mx-menu-format, .col-menu, .mode-popover, .bulle-metas, .mx-filtre-menu {
  background: var(--surface); color: var(--texte); border: none; border-radius: var(--rayon-m); box-shadow: var(--ombre-menu); }
.aide-menu, .mx-menu-format, .col-menu { padding: 8px; }
.aide-menu .aide-m-item, .mx-menu-format button, .col-menu button { min-height: 40px; justify-content: flex-start; text-align: left; border-radius: var(--rayon-s);
  padding: 8px 12px; color: var(--texte); font-weight: 600; background: transparent; border: none; gap: 12px; width: 100%; }
.aide-menu .aide-m-item:hover, .mx-menu-format button:hover, .col-menu button:hover, .col-menu button:focus-visible { background: var(--fond); }
.mx-menu-sep { height: 1px; background: var(--ligne); margin: 6px 8px; }

/* ============================== Info-bulles (web/infobulles.js) ============================== */
.mx-infobulle { background: var(--infobulle-fond); color: var(--infobulle-texte); border-radius: var(--rayon-s); padding: 8px 12px; font-size: 13px;
  font-family: var(--police-texte); box-shadow: 0 8px 24px rgba(58, 38, 24, .25); line-height: 1.4; }
.mx-infobulle[data-place="bas"]::after { border-bottom-color: var(--infobulle-fond); }
.mx-infobulle[data-place="haut"]::after { border-top-color: var(--infobulle-fond); }

/* ============================== Messages (toasts) et notifications ============================== */
.mx-toast, #toast-box .toast { background: var(--surface); color: var(--texte); border: none; border-left: 4px solid var(--vert); border-radius: var(--rayon);
  box-shadow: var(--ombre-menu); font-family: var(--police-texte); }
.mx-toast.erreur, #toast-box .toast-erreur { border-left-color: var(--rouge-bordure); }
#toast-box .toast-ok { border-left-color: var(--vert); }
#toast-box .toast-attente { border-left-color: var(--ambre); }
#toast-box .toast-annuler { border-radius: var(--rayon-s); color: var(--principal-doux-texte); background: var(--principal-doux); border: none; }
.notif-item { border-radius: var(--rayon); }
.notif-item.non-lue { background: var(--principal-doux); }
.notif-item.non-lue .notif-titre { color: var(--principal-doux-texte); }
.mx-notif-pop { background: var(--surface); color: var(--texte); border: none; border-radius: var(--rayon-m); box-shadow: var(--ombre-menu); }

/* ============================== Ecran de connexion ============================== */
.login-screen { background: var(--fond); padding: 24px 16px; }
.login-card { background: var(--surface); border: none; border-radius: var(--rayon-xl); box-shadow: 0 12px 40px rgba(58, 38, 24, .12); padding: 28px 32px; width: 400px; max-width: 100%; }
:root[data-theme="sombre"] .login-card { box-shadow: 0 0 0 1px var(--bordure); }
.login-logo { flex-direction: column; gap: 4px; }
.login-logo img { width: 128px; height: 128px; }
.login-nom { font-family: var(--police-marque); font-weight: 700; font-size: 44px; color: var(--titre); }
.login-sub { text-align: center; color: var(--texte-2); font-size: 14px; margin: 2px 0 20px; }
.form label { font-size: 13.5px; color: var(--texte); }
.form button.primary { min-height: 44px; font-size: 15px; border-radius: var(--rayon); }
.error { color: var(--rouge); font-size: 13.5px; font-weight: 600; }

/* ============================== Mode atelier (tablette) ============================== */
.ma-tete { background: var(--surface); color: var(--texte); box-shadow: 0 1px 0 var(--bordure); }
.ma-tete h1 { color: var(--titre); }
.ma-tete .ma-secondaire { background: var(--principal-doux); color: var(--principal-doux-texte); }

.topbar #btn-profil { order: 20; }
button.occupe .mx-ic { visibility: hidden; }
/* Element de menu avec icone : l'icone dans un carre aux couleurs de son
   action (maquette du menu « Plus »). */
button.mx-avec-pastille > .mx-ic { width: 30px; height: 30px; padding: 7px; border-radius: 9px; vertical-align: middle;
  background: var(--mx-action-fond, var(--brun-fond)); color: var(--mx-action-texte, var(--brun)) !important; margin-inline-end: 10px; }
button.mx-bouton-icone { padding-left: 6px; padding-right: 6px; min-width: 32px; }

/* ============================== Tableaux ==============================
 * Maquette Articles : carte blanche aux grands rayons, titres de colonnes
 * discrets (gris brun, gras, sans majuscules), lignes aerees separees par un
 * trait tres fin, pas de cadre. La ligne choisie : fond creme et barre
 * caramel a gauche. */
.data-table { background: var(--surface); border: none; border-radius: var(--rayon-l); border-collapse: separate; border-spacing: 0; overflow: visible; }
.data-table th, .data-table td { padding: 12px 10px; font-size: 14px; border-bottom: none; box-shadow: inset 0 -1px 0 var(--ligne); vertical-align: middle; }
.data-table th:first-child, .data-table td:first-child { padding-left: 18px; }
.data-table th:last-child, .data-table td:last-child { padding-right: 18px; }
.data-table thead th, .table-sticky-head thead tr:not(.filtres-colonnes) th, .table-sticky-head thead th {
  background: var(--surface); color: var(--texte-3); font-weight: 700; font-size: 13px; text-transform: none; letter-spacing: normal;
  border-bottom: none; box-shadow: inset 0 -1px 0 var(--bordure); white-space: nowrap; }
.data-table thead tr:first-child th:first-child { border-top-left-radius: var(--rayon-l); }
.data-table thead tr:first-child th:last-child { border-top-right-radius: var(--rayon-l); }
.data-table tbody tr:last-child td { box-shadow: none; }
.data-table tbody tr:hover { background: var(--fond); }
.data-table tbody tr.selected, .data-table tbody tr.selectionnee, .data-table tbody tr[aria-selected="true"] { background: var(--selection-ligne); }
.data-table tbody tr.selected > td:first-child, .data-table tbody tr.selectionnee > td:first-child, .data-table tbody tr[aria-selected="true"] > td:first-child { box-shadow: inset 3px 0 0 var(--principal), inset 0 -1px 0 var(--ligne); }
table.data-table th.sortable:hover { background: var(--surface); color: var(--texte); }
table.data-table th.tri-asc .th-label::after, table.data-table th.tri-desc .th-label::after { color: var(--principal); }
table.data-table th .col-resizer:hover { background: color-mix(in srgb, var(--principal) 35%, transparent); }
.table-scroll-wrap { position: relative; background: var(--surface); border-radius: var(--rayon-l); }
:root[data-theme="sombre"] .table-scroll-wrap { box-shadow: 0 0 0 1px var(--bordure); }
.mx-table-outils { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; color: var(--texte-2); font-size: 13.5px; }
.mx-table-outils .mx-compteur { color: var(--texte-2); font-weight: 600; }
.mx-table-outils .mx-exporter { margin-left: auto; }
.mx-tout-effacer { color: var(--principal-doux-texte) !important; background: var(--principal-doux) !important; }

/* Entonnoir d'une colonne : ouvre le filtre de la colonne sous son titre.
   Pose juste apres le libelle (maquette Articles : « Référence » + entonnoir) ; le
   reste du titre trie la colonne et se glisse pour la deplacer. Dans une
   colonne etroite, le libelle se raccourcit (…) et l'entonnoir reste
   visible dans le titre (texte entier dans l'info-bulle et le panneau des
   colonnes). */
.mx-entonnoir { position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 24px; height: 24px; min-height: 24px; padding: 0; margin: -4px 0 -4px 4px; border: none; border-radius: 7px; background: transparent;
  color: var(--icone-discrete); cursor: pointer; z-index: 2; }
.mx-entonnoir:active { transform: scale(.94); }
thead tr:first-child > th:has(> .mx-entonnoir) > .th-label { display: inline-block; max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle; }
.mx-entonnoir .mx-ic { width: 14px; height: 14px; vertical-align: 0; }
.mx-entonnoir:hover, .mx-entonnoir[aria-expanded="true"] { background: var(--surface-2); color: var(--texte); }
.mx-entonnoir.actif { background: var(--principal-doux); color: var(--principal-doux-texte); }
.mx-entonnoir.actif .mx-ic { fill: currentColor; }
/* La ligne des filtres n'apparait que pour les colonnes ouvertes ou filtrees. */
thead tr.filtres-colonnes:not(.mx-filtres-visibles) { display: none; }
table.mx-avec-entonnoirs thead tr.filtres-colonnes > th:not(.mx-filtre-ouvert) > * { visibility: hidden; }
table.data-table thead tr.filtres-colonnes th, .table-sticky-head thead tr.filtres-colonnes th { background: var(--surface); padding: 4px 8px 8px; box-shadow: inset 0 -1px 0 var(--bordure); }
table.data-table thead tr.filtres-colonnes input, .filtres-colonnes .filtre-col-wrap input { min-height: 30px; padding: 4px 9px; font-size: 13px; border-radius: 8px; }
.filtres-colonnes .mx-filtre-btn { min-height: 30px; min-width: 28px; padding: 0 6px; border: none; background: transparent; color: var(--texte-2); border-radius: 8px; }
.filtres-colonnes .mx-filtre-btn:hover { background: var(--surface-2); }
.filtres-colonnes .mx-filtre-btn.actif { background: var(--principal-doux); color: var(--principal-doux-texte); }
.mx-filtre-menu { padding: 14px; }
.mx-filtre-menu .mx-filtre-titre { font-family: var(--police-titre); font-weight: 700; color: var(--titre); margin-bottom: 8px; }

/* Bouton « + » des colonnes, sur la ligne des titres, tout a droite. */
/* Ancre sans hauteur, collee en haut a gauche du cadre qui defile (elle ne
   decale pas le tableau) ; le bouton s'y place, centre sur la ligne des titres. */
.mx-colonnes-ancre { position: sticky; top: 0; left: 0; z-index: 6; height: 0; }
.mx-colonnes-btn { position: absolute; right: 10px; top: calc((var(--mx-th-h, 44px) - 32px) / 2); width: 32px; height: 32px; min-height: 32px; padding: 0;
  border: none; border-radius: 9px; background: var(--principal-doux); color: var(--principal-doux-texte); display: inline-flex; align-items: center; justify-content: center; }
.mx-colonnes-btn:hover { background: var(--principal-doux-survol); }
.mx-colonnes-btn .mx-ic { width: 16px; height: 16px; stroke-width: 2.4; vertical-align: 0; }
table.mx-avec-colonnes thead tr:first-child > th:last-child { padding-right: 54px; }
.mx-col-masquee { display: none !important; }
/* Panneau des colonnes */
.mx-colonnes-panneau { position: fixed; z-index: 700; width: min(320px, calc(100vw - 16px)); max-height: min(70vh, 520px); overflow: auto;
  padding: 14px; background: var(--surface); color: var(--texte); border-radius: var(--rayon-m); box-shadow: var(--ombre-menu); }
.mx-colonnes-titre { font-family: var(--police-titre); font-weight: 700; font-size: 16px; color: var(--titre); }
.mx-colonnes-aide { color: var(--texte-2); font-size: 13px; margin: 4px 0 10px; }
.mx-colonnes-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mx-colonnes-ligne { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--rayon-s); background: transparent; }
.mx-colonnes-ligne:hover { background: var(--fond); }
.mx-colonnes-ligne label { flex: 1; min-width: 0; color: var(--texte); font-size: 14px; font-weight: 600; flex-direction: row; cursor: pointer; }
.mx-colonnes-poignee { color: var(--texte-3); cursor: grab; letter-spacing: -2px; user-select: none; }
.mx-colonnes-fleches { display: inline-flex; gap: 2px; }
.mx-colonnes-fleches button { min-width: 26px; padding: 0 4px; }
.mx-colonnes-ligne.mx-colonnes-deplacee { opacity: .5; }
.mx-colonnes-ligne.mx-colonnes-cible { box-shadow: inset 0 2px 0 var(--principal); }
.mx-colonnes-boutons { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }

/* ============================== Ecran vide (web/ecran-vide.js) ==============================
 * Maquettes Tableau vide et Ecrans vides : la vache, un titre en Quicksand,
 * une phrase, l'action principale. */
.mx-vide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 24px 48px; color: var(--texte); }
.mx-vide-image { width: 150px; height: 150px; object-fit: contain; }
.mx-vide-compact { padding: 24px 16px 28px; gap: 8px; }
.mx-vide-compact .mx-vide-image { width: 110px; height: 110px; }
.mx-vide-titre { margin: 4px 0 0; font-family: var(--police-titre); font-size: 21px; font-weight: 700; color: var(--titre); }
.mx-vide-compact .mx-vide-titre { font-size: 18px; }
.mx-vide-texte { margin: 0; color: var(--texte-2); max-width: 460px; line-height: 1.5; font-size: 14.5px; }
.mx-vide-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.mx-vide-actions button { min-height: 44px; padding: 0 18px; border-radius: var(--rayon); font-size: 14.5px; }
.table-scroll-wrap > .mx-vide { box-shadow: inset 0 1px 0 var(--ligne); }
tr.mx-vide-ligne > td { padding: 0; box-shadow: none; background: var(--surface); }
/* Tableau plus large que la zone visible (nombreuses colonnes, petit
   ecran) : l'ecran vide reste dans la partie visible, colle a gauche, sans
   defiler de cote (cqw : largeur visible du conteneur de defilement). */
.table-scroll-wrap:has(> table > tbody > tr.mx-vide-ligne) { container-type: inline-size; }
tr.mx-vide-ligne > td > .mx-vide { position: sticky; left: 0; box-sizing: border-box; max-width: 100cqw; }
tr.mx-vide-ligne:hover { background: transparent; }
/* Variante en ligne (blocs de Mon espace, panneaux, fenetres) : petite vache
   a gauche, titre et phrase a cote. */
.mx-vide-mini { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 6px 0; }
.mx-vide-mini .mx-vide-image { width: 64px; height: 64px; flex: 0 0 64px; }
.mx-vide-mini .mx-vide-corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mx-vide-mini .mx-vide-titre { margin: 0; font-size: 16px; }
.mx-vide-mini .mx-vide-texte { font-size: 14px; max-width: none; }
.mx-vide-mini .mx-vide-actions { justify-content: flex-start; margin-top: 4px; }
.mx-vide-mini .mx-vide-actions button { min-height: 36px; padding: 0 14px; font-size: 14px; }
/* Texte seul, sans vache (option image: false) : ecran de travail, ou un
   autre ecran vide est deja affiche dans la vue (une seule vache par vue). */
.mx-vide-sans-image { padding: 16px; gap: 6px; }
.mx-vide-sans-image .mx-vide-titre { margin: 0; font-size: 17px; }
.mx-vide-sans-image .mx-vide-texte { font-size: 14px; }
.mx-vide-mini.mx-vide-sans-image { padding: 8px 0; }
.mx-vide-mini.mx-vide-sans-image .mx-vide-titre { font-size: 15px; }
.mx-vide-actions button.lien { min-height: 44px; padding: 0 4px; background: none; border: none; font-weight: 600; }
/* Ecrans de travail a plusieurs listes par page (Reglages, fiche d'un
   article : Fabrications, lots, numeros de serie, commentaires…) : tous
   leurs ecrans vides en texte seul (classe mx-sans-vache). */
.mx-sans-vache .mx-vide-image { display: none; }
.mx-sans-vache .mx-vide:not(.mx-vide-mini) { padding: 18px 16px; gap: 6px; }
/* Places particulieres : liste du bas des Articles, zone de depot des
   Articles (elle garde son cadre pointille), listes a puces. */
.files-vide { padding: 6px 16px; }
.files-vide:empty { display: none; }
.articles-vide .mx-vide { padding: 8px 12px; background: transparent; }
li > .mx-vide-mini, .pil-liv-vide, .fav-vide { list-style: none; }
.fav-vide { padding: 4px 6px; font-size: 13px; color: var(--texte-3); line-height: 1.45; }
.sidebar .mx-vide-mini { gap: 8px; padding: 4px 6px; }
.sidebar .mx-vide-mini .mx-vide-image { width: 40px; height: 40px; flex-basis: 40px; }
.sidebar .mx-vide-mini .mx-vide-titre { font-size: 14px; }
.sidebar .mx-vide-mini .mx-vide-texte { font-size: 12.5px; }
.carte-liste li:has(> .mx-vide), .acc-liste li:has(> .mx-vide) { border: none; background: transparent; }
/* Tablette d'atelier : l'ecran vide occupe toute la grille des cartes. */
.ma-grille > .mx-vide { grid-column: 1 / -1; }
.mx-vide.ma-vide .mx-vide-titre { font-size: 22px; }
.mx-vide.ma-vide .mx-vide-texte { font-size: 17px; }

/* ============================== Mon espace (web/accueil.js) ==============================
 * Maquette « Mon espace » : la vache qui salue, « Bonjour Prenom » en
 * Quicksand et la date, « Choisir mes blocs » ; une rangee de compteurs ;
 * des blocs blancs arrondis (titre Quicksand 19 px, lignes separees d'un
 * trait fin). */
.mon-espace { width: 100%; max-width: 1400px; margin: 0 auto; padding: 8px 4px 28px; display: flex; flex-direction: column; gap: 20px; }
.me-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; }
.me-vache { width: 84px; height: 84px; margin: -14px 0 -10px; object-fit: contain; }
.me-salut { display: flex; flex-direction: column; min-width: 0; }
.me-titre { margin: 0; font-family: var(--police-titre); font-size: 28px; font-weight: 700; color: var(--titre); line-height: 1.2; }
.me-jour { color: var(--texte-2); font-size: 15px; }
.me-tete #acc-personnaliser { margin-left: auto; height: 40px; min-height: 40px; padding: 0 14px; border: none; border-radius: var(--rayon);
  background: var(--surface); box-shadow: 0 0 0 1px var(--bordure); color: var(--texte); font-weight: 600; font-size: 15px; }
.me-tete #acc-personnaliser:hover { background: var(--surface-2); }
.me-tete #acc-personnaliser[aria-expanded="true"] { background: var(--principal-doux); color: var(--principal-doux-texte); box-shadow: none; }
.me-compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.me-compteur { text-align: left; background: var(--surface); border: 1px solid transparent; border-radius: var(--rayon-l); padding: 18px 20px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--texte); cursor: pointer; box-shadow: var(--ombre-carte);
  font: inherit; height: auto; min-height: 0; }
.me-compteur:hover { box-shadow: 0 0 0 1px var(--bordure), var(--ombre-carte); background: var(--surface); }
:root[data-theme="sombre"] .me-compteur { border-color: var(--bordure); }
.me-nombre { font-family: var(--police-titre); font-size: 32px; font-weight: 700; color: var(--titre); line-height: 1.1; }
.me-nombre.vert { color: var(--vert); }
.me-nombre.principal { color: var(--principal); }
.me-libelle { color: var(--texte-2); font-size: 15px; }
.mon-espace .acc-blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 20px; align-items: start; }
.mon-espace .acc-bloc { padding: 20px; display: flex; flex-direction: column; gap: 10px; border-radius: var(--rayon-l); }
.mon-espace .acc-blocs > .mx-vide { grid-column: 1 / -1; }
.acc-bloc-tete { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.acc-bloc-tete h2 { margin: 0; font-family: var(--police-titre); font-size: 19px; font-weight: 700; color: var(--titre); }
.acc-bloc-tete h2:focus { outline: none; }
.acc-bloc-tete h2:focus-visible { outline: 2px solid var(--principal); outline-offset: 3px; border-radius: 4px; }
.me-bloc-outils { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; }
.mon-espace .acc-bloc.me-bloc-temporaire { box-shadow: 0 0 0 2px var(--principal-doux), var(--ombre-carte); }
.me-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.me-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--ligne); }
.me-ligne:last-child { box-shadow: none; }
.me-ligne-texte { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.me-ligne .lien { text-align: left; }
.me-date { color: var(--texte-2); font-size: 14px; white-space: nowrap; }
.me-date.texte-danger { color: var(--rouge); font-weight: 700; }
.me-discret { color: var(--texte-3); font-size: 13px; }
.me-groupe { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--texte-2); }
.me-groupe.acc-alerte { color: var(--rouge); }
.me-pied { margin: 2px 0 0; }
.me-retirer { width: 36px; height: 36px; min-height: 36px; padding: 0; border: none; background: transparent; color: var(--texte-3);
  border-radius: var(--rayon-s); display: inline-flex; align-items: center; justify-content: center; }
.me-retirer:hover { background: var(--surface-2); color: var(--texte); }
.me-retirer .mx-ic, .me-ancienne .mx-ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.me-retirer .mx-ic { width: 16px; height: 16px; }
.me-ancienne { flex-basis: 100%; font-size: 13px; color: var(--ambre); display: flex; align-items: center; gap: 6px; }
.me-ancienne .mx-ic { width: 14px; height: 14px; flex: none; }
.me-bouton-doux { align-self: flex-start; height: 40px; min-height: 40px; padding: 0 14px; border: none; border-radius: var(--rayon);
  background: var(--principal-doux); color: var(--principal-doux-texte); font-weight: 700; }
.me-bouton-doux:hover { background: var(--principal-doux-survol); color: var(--principal-doux-texte); }
.mx-pastille.principal { background: var(--principal-doux); color: var(--principal-doux-texte); border: none; }
.mx-pastille.brun { background: var(--brun-fond); color: var(--brun); border: none; }
.me-projet { font-size: 12px; padding: 3px 8px; max-width: 14em; overflow: hidden; text-overflow: ellipsis; }
.mon-espace .acc-chiffre { margin: 0; }
.mon-espace .acc-chiffre b { font-family: var(--police-titre); font-size: 24px; color: var(--titre); }
.mon-espace .acc-panneau { max-width: 760px; margin: 0; background: var(--surface); border: none; border-radius: var(--rayon-l); padding: 18px 20px; box-shadow: var(--ombre-menu); }
.acc-panneau-titre { margin: 0 0 4px; font-size: 17px; }
/* Echeances : phrase courte en couleur a droite (maquette Mon espace). */
.me-echeance { font-size: 14px; font-weight: 700; white-space: nowrap; }
.me-echeance.ambre { color: var(--ambre); }
.me-echeance.rouge { color: var(--rouge); }
.mon-espace .pp-carte, .mon-espace .pp-reduit, .mon-espace > .acc-alerte { margin: 0; }
@media (max-width: 640px) {
  .me-titre { font-size: 24px; }
  .me-vache { width: 64px; height: 64px; margin: -8px 0 -6px; }
  .me-tete #acc-personnaliser { margin-left: 0; }
  .me-compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .me-compteur { padding: 14px 16px; }
  .me-nombre { font-size: 26px; }
}

/* ============================== Navigation laterale et arborescences ============================== */
.param-nav { background: var(--surface); border: 1px solid transparent; border-radius: var(--rayon-l); box-shadow: var(--ombre-carte); }
:root[data-theme="sombre"] .param-nav { border-color: var(--bordure); }
.param-nav h3 { color: var(--texte-3); font-family: var(--police-texte); font-size: 13px; font-weight: 700; }
.param-nav li { border-radius: var(--rayon-s); color: var(--texte); font-size: 14px; }
.param-nav li:hover { background: var(--fond); }
.param-nav li.active { background: var(--principal-doux); color: var(--principal-doux-texte); font-weight: 700; }
.sidebar h3 { color: var(--texte-3); font-family: var(--police-texte); font-size: 13px; font-weight: 700; }
.sidebar h3.nom-marque { font-family: var(--police-marque); color: var(--titre); font-size: 16px; }
.tree li, .dossier-item { border-radius: var(--rayon-s); }
.tree li:hover, .dossier-item:hover { background: var(--fond); }
.tree li.active, .dossier-item.active, #dossiers-tree .dossier-item.active { background: var(--principal-doux); color: var(--principal-doux-texte); font-weight: 700; }

/* ============================== Pastilles d'aide « i » et etiquettes ============================== */
.info-bulle, .mc-info { width: 20px; height: 20px; background: var(--surface-2); color: var(--texte-2); font-family: var(--police-texte);
  font-style: normal; font-weight: 700; font-size: 12px; border-radius: 50%; }
.info-bulle:hover, .mc-info:hover { background: var(--principal-doux); color: var(--principal-doux-texte); }
.tag { background: var(--principal-doux); color: var(--principal-doux-texte); border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.tag.tag-danger { background: var(--rouge-fond); color: var(--rouge); }
.pp-case { color: var(--sur-vert); }
.pp-tache.fait .pp-case { background: var(--vert-plein); border-color: var(--vert-plein); }

/* ============================== Etiquettes des taches ==============================
 * Pastilles douces (maquette Taches). Les six couleurs nommees suivent les
 * familles du theme ; une couleur personnalisee (#RRGGBB, web/choix-couleur.js)
 * porte ses deux paires fond / texte calculees pour le contraste AA :
 * --et-f / --et-t en clair, --et-fs / --et-ts en sombre. */
.etiquette { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
  line-height: 1.5; border: none; min-height: 0; }
.etiquette.et-bleu { background: var(--bleu-fond); color: var(--bleu); }
.etiquette.et-vert { background: var(--vert-fond); color: var(--vert); }
.etiquette.et-orange { background: var(--ambre-fond); color: var(--ambre); }
.etiquette.et-rouge { background: var(--rouge-fond); color: var(--rouge); }
.etiquette.et-violet { background: var(--violet-fond); color: var(--violet); }
.etiquette.et-gris { background: var(--brun-fond); color: var(--brun); }
.etiquette.et-perso { background: var(--et-f); color: var(--et-t); }
:root[data-theme="sombre"] .etiquette.et-perso { background: var(--et-fs); color: var(--et-ts); }
button.etiquette { cursor: pointer; }
button.etiquette:hover { box-shadow: 0 0 0 2px var(--bordure-champ); }
.carte-etiq-edit, #carte-etiq-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Bouton « Couleur » : un temoin de la couleur choisie et son nom. */
button.mx-couleur-btn { display: inline-flex; align-items: center; gap: 6px; }
.mx-couleur-temoin { width: 16px; height: 16px; border-radius: 5px; flex: none; background: var(--case, #2D63B0);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
/* Fenetre « Couleur de l'etiquette » */
.mx-couleur-panneau { position: fixed; z-index: 700; width: min(300px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto;
  padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); color: var(--texte);
  border-radius: var(--rayon-m); box-shadow: var(--ombre-menu); }
.mx-couleur-titre { font-family: var(--police-titre); font-weight: 700; font-size: 15px; color: var(--titre); }
.mx-couleur-sous-titre { font-size: 13px; color: var(--texte-2); }
.mx-couleur-nuancier { display: flex; flex-wrap: wrap; gap: 6px; }
button.mx-couleur-case { width: 26px; height: 26px; min-height: 0; min-width: 0; padding: 0; border-radius: 8px; border: none;
  background: var(--case); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); cursor: pointer; }
button.mx-couleur-case:hover { background: var(--case); filter: brightness(1.08); }
button.mx-couleur-case[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--texte); }
.mx-couleur-perso { border-radius: var(--rayon-s); background: var(--fond); padding: 8px 10px; }
.mx-couleur-perso > summary { font-size: 13px; font-weight: 700; color: var(--texte-2); cursor: pointer; }
.mx-couleur-perso-corps { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.mx-couleur-sv { position: relative; height: 96px; border-radius: 8px; cursor: crosshair; touch-action: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000), linear-gradient(to right, #FFFFFF, var(--teinte, #FF0000)); }
.mx-couleur-sv:focus-visible { outline: 2px solid var(--principal); outline-offset: 2px; }
.mx-couleur-curseur { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px #3A2618; }
input.mx-couleur-teinte { width: 100%; height: 14px; margin: 0; padding: 0; border: none; border-radius: 999px; -webkit-appearance: none; appearance: none;
  background: linear-gradient(to right, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF, #FF0000); cursor: pointer; }
input.mx-couleur-teinte::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 20px; border-radius: 3px; background: #FFFFFF; box-shadow: 0 0 0 1px #3A2618; }
input.mx-couleur-teinte::-moz-range-thumb { width: 10px; height: 20px; border-radius: 3px; background: #FFFFFF; border: none; box-shadow: 0 0 0 1px #3A2618; }
input.mx-couleur-teinte:focus-visible { outline: 2px solid var(--principal); outline-offset: 3px; }
.mx-couleur-codes { display: flex; gap: 6px; align-items: flex-end; }
.mx-couleur-codes label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--texte-2); margin: 0; }
.mx-couleur-codes input { height: 30px; min-height: 0; padding: 0 5px; font-size: 13px; border-radius: 7px; }
.mx-couleur-codes .mx-couleur-hex { width: 80px; }
.mx-couleur-codes input[type="number"] { width: 44px; -moz-appearance: textfield; appearance: textfield; }
.mx-couleur-codes input[type="number"]::-webkit-inner-spin-button, .mx-couleur-codes input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mx-couleur-apercu { display: flex; align-items: center; gap: 10px; }
.mx-couleur-boutons { display: flex; justify-content: flex-end; gap: 8px; }

/* ============================== Profil ============================== */
.profil-avatar-cadre { background: linear-gradient(135deg, var(--principal), var(--museau)); }
.profil-avatar-defaut { background: var(--avatar-fond); color: var(--avatar-texte); }
.theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 6px 0 12px; }
.theme-tile { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border: 2px solid var(--bordure); border-radius: var(--rayon-m);
  background: var(--surface); color: var(--texte); cursor: pointer; text-align: left; font-size: 14px; font-weight: 600; min-height: 0; }
.theme-tile:hover { border-color: color-mix(in srgb, var(--principal) 50%, var(--bordure)); background: var(--surface); }
.theme-tile.actif { border-color: var(--principal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--principal) 22%, transparent); font-weight: 700; }
.theme-apercu { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 22px 22px; gap: 4px; padding: 6px; border-radius: 10px; background: var(--surface-2); }
.theme-apercu span { border-radius: 6px; border: 1px solid rgba(58, 38, 24, .12); }
.theme-tile-systeme .theme-apercu span:nth-child(3), .theme-tile-systeme .theme-apercu span:nth-child(4) { border-color: rgba(255, 255, 255, .15); }
.theme-libelle { text-align: center; }

/* ============================== Petites fenetres de dialogue (web/dialogues.js) ============================== */
.dialogue-carte { border-radius: var(--rayon-xl); }
.dialogue-boutons, .modal-footer { gap: 10px; padding: 4px 24px 20px; }
.dialogue-boutons button, .modal-footer button { min-height: 40px; padding: 0 18px; border-radius: var(--rayon); }

/* ============================== Assistant de premier lancement ============================== */
.assistant-carte .modal-header { flex-wrap: wrap; align-items: center; padding-top: 18px; }
.assistant-carte .modal-header::before { content: ""; width: 64px; height: 64px; flex: none; margin: -6px 4px -6px 0;
  background: url(/img/meumo/ecrans/meumo-salue.png) center / contain no-repeat; }
.assistant-carte .modal-header h2 { flex: 1; }
.as-etapes { flex-basis: 100%; }
.as-etapes li { border: none; background: var(--surface-2); color: var(--texte-2); font-weight: 600; }
.as-etapes li.faite { background: var(--vert-fond); color: var(--vert); }
.as-etapes li.active { background: var(--principal); color: var(--sur-principal); }

/* ============================== Tutoriels et mini-tutos ============================== */
/* Voile decoupe : rien sur la cible (claire et nette), le reste assombri par
   l'ombre du cadre. Cadre caramel de la charte, cerne d'un liseré de surface
   pour rester visible sur le voile (contraste AA des deux cotes, clair et
   sombre). Sans cible : voile plein. */
.tuto-overlay { background: transparent; }
.tuto-overlay.tuto-sans-cible { background: var(--voile-tuto); }
.tuto-spot { border: 3px solid var(--principal); border-radius: var(--rayon); box-shadow: 0 0 0 2px var(--surface), 0 0 0 200vmax var(--voile-tuto); }
.tuto-bulle, .tuto-proposition, .tuto-menu { background: var(--surface); color: var(--texte); border: none; border-radius: var(--rayon-l); box-shadow: var(--ombre-fenetre); }
:root[data-theme="sombre"] .tuto-bulle, :root[data-theme="sombre"] .tuto-proposition, :root[data-theme="sombre"] .tuto-menu { box-shadow: 0 0 0 1px var(--bordure), var(--ombre-fenetre); }
.tuto-bulle { padding: 16px 18px 14px; width: min(380px, calc(100vw - 24px)); max-width: 380px; }
/* La vache accompagne les tutoriels (jamais les ecrans de travail). */
.tuto-titre { font-family: var(--police-titre); font-size: 17px; color: var(--titre); display: flex; align-items: center; gap: 10px; padding-right: 26px; }
.tuto-titre::before { content: ""; width: 34px; height: 34px; flex: none; background: url(/icons/logo-tete.png) center / contain no-repeat; }
.tuto-texte { font-size: 14px; color: var(--texte); }
.tuto-texte kbd, .kbd-aide-card kbd { background: var(--surface-2); border: 1px solid var(--bordure); border-bottom-width: 2px; border-radius: 6px; }
.tuto-compteur { color: var(--texte-2); }
.tuto-nav .primary, .tuto-nav .ghost { min-height: 36px; padding: 0 16px; font-size: 13.5px; }
.tuto-croix { border-radius: 50%; width: 28px; height: 28px; min-height: 28px; padding: 0; color: var(--texte-2); }
.tuto-proposition { border-left: none; }
.tuto-prop-titre { font-family: var(--police-titre); color: var(--titre); font-size: 16px; }
/* Pastille du livre (mini-tuto a decouvrir) : caramel de la charte. */
.livre-pastille { background: var(--principal); box-shadow: 0 0 0 2px var(--surface); }
.kbd-aide-card { background: var(--surface); color: var(--texte); border: none; border-radius: var(--rayon-m); box-shadow: var(--ombre-menu); }

/* ============================== Notifications ============================== */
#notif-popover .modal-card { max-width: min(560px, 94vw); }
.notif-item { border: 1px solid var(--bordure); background: var(--surface); padding: 2px; }
.notif-item.non-lue { border-color: transparent; }
.notif-titre { font-weight: 700; color: var(--texte); }
.notif-message, .notif-date { color: var(--texte-2); }

/* ============================== Guide integre ============================== */
.guide-fenetre { background: var(--surface); color: var(--texte); border: none; border-radius: var(--rayon-xl); box-shadow: var(--ombre-fenetre); overflow: hidden; }
.guide-tete { border-bottom: 1px solid var(--bordure); padding: 10px 12px 10px 20px; }
.guide-tete h2, .guide-tete strong { font-family: var(--police-titre); color: var(--titre); }
.guide-cadre { background: var(--fond); }

/* ============================== Barre d'activite, squelettes ============================== */
#mx-activite span { background: var(--principal); }
.squelette, .mx-squelette { background: linear-gradient(90deg, var(--surface-2), var(--fond), var(--surface-2)); background-size: 200% 100%; }

/* ============================== Divers ecrans communs ============================== */
.articles-main-toolbar .ghost.active, .vue-bascule .active { background: var(--principal-doux); color: var(--principal-doux-texte); }
.status-msg { font-weight: 600; }
details > summary { cursor: pointer; }
.drop-hover { outline-color: var(--principal); }
#col-add-meta, #lc-add-col { color: var(--principal-doux-texte); font-size: 18px; font-weight: 700; text-align: center; cursor: pointer; }
#col-add-meta::before, #lc-add-col::before { content: ""; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%);
  border-radius: 9px; background: var(--principal-doux); z-index: -1; }
#files-table thead tr:first-child th, .liste-centrale-table thead tr.lc-titres th { background: var(--surface); color: var(--texte-3); font-weight: 700; font-size: 13px; }
#files-table thead tr.filtres-colonnes th, .liste-centrale-table thead tr.filtres-colonnes th { background: var(--surface); }

/* Le bouton « + » masque proprement ce qui passerait dessous (tableau plus
   large que son cadre). */
.mx-colonnes-btn { box-shadow: -10px 0 0 2px var(--surface); }
/* Champ « fichier » : le bouton du navigateur aux couleurs de meumo. */
input[type="file"]::file-selector-button { font: inherit; font-weight: 700; border: none; border-radius: var(--rayon-s); padding: 7px 14px;
  margin-right: 10px; background: var(--principal-doux); color: var(--principal-doux-texte); cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--principal-doux-survol); }
.profil-tab-pane h3 { margin: 20px 0 8px; font-size: 17px; }
.profil-tab-pane h3:first-child { margin-top: 6px; }

/* Champs en erreur : message rouge sous le champ, bandeau « 1 champ à
   corriger » en haut du formulaire (maquette Formulaire). */
.mx-erreur-champ { color: var(--rouge); font-size: 13.5px; font-weight: 600; margin-top: 4px; }
.mx-erreur-champ::before { content: none; }
.mx-resume-erreurs { display: flex; align-items: center; gap: 10px; background: var(--rouge-fond); color: var(--rouge); border-radius: var(--rayon);
  padding: 10px 14px; margin: 0 0 14px; font-size: 14px; font-weight: 700; width: 100%; flex-basis: 100%; }
.mx-resume-erreurs::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -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'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%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'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Libelle qui tient lieu de bouton pour choisir un fichier (« Importer
   (Excel, CSV) ») : meme allure qu'un bouton discret. */
label.ghost:has(> input[type="file"][hidden]), .label-bouton { display: inline-block; flex-direction: row; padding: 6px 14px; min-height: 34px;
  border: 1px solid transparent; border-radius: var(--rayon-s); background: transparent; color: var(--texte); font-size: 13.5px;
  font-weight: 600; line-height: 1.6; cursor: pointer; white-space: nowrap; }
label.ghost:has(> input[type="file"][hidden]):hover, .label-bouton:hover { background: var(--surface-2); }
label[data-mx-famille] > .mx-ic { color: var(--mx-action-texte); }

/* Pastilles « badge » de l'application (licence, modules, profils de l'assistant). */
.badge.badge-ok { background: var(--vert-fond); color: var(--vert); }
.badge.badge-licence { background: var(--ambre-fond); color: var(--ambre); }
.badge.badge-gris { background: var(--brun-fond); color: var(--brun); }
.badge.badge-pack { background: var(--bleu-fond); color: var(--bleu); }
.as-profil .badge { color: var(--principal-doux-texte); }

/* Le livre du guide (en bas a gauche) : cuir chocolat de meumo dans les deux themes. */
.mx-livre { --cuir: #5E3A1B; }
:root[data-theme="sombre"] .mx-livre { --cuir: #7A4A22; }

/* Fiche article (zone centrale des Articles, partagee avec la liste) :
   champs plus serres pour que les onglets restent visibles sans defiler. */
#detail-view .meta-grid { gap: 6px 12px; }
#detail-view .meta-grid label { font-size: 12.5px; gap: 2px; line-height: 1.3; }
#detail-view .meta-grid input, #detail-view .meta-grid select, #detail-view .meta-grid textarea { min-height: 30px; padding: 4px 10px; font-size: 13.5px; line-height: 1.4; }
#detail-view .meta-grid textarea { min-height: 0; }
#detail-view .detail-header { padding-top: 8px; row-gap: 6px; }
#detail-view .fiche-onglets-sup { margin-top: 6px; padding-top: 6px; }
/* Pastilles des versions (frise) : pas la hauteur d'un bouton. */
.fiche-chrono-v { min-height: 0; padding: 1px 10px; line-height: 1.5; border-radius: 999px; }
/* Actions de la fiche un peu plus serrees : le titre et les actions tiennent
   sur une ligne a 1440 px. */
#detail-view .fiche-actions { gap: 4px; }
#detail-view .fiche-actions > button, #detail-view .fiche-actions .menu-plus-bouton { padding-left: 9px; padding-right: 9px; }
/* Titre long : il passe a la ligne dans sa case, les actions restent a cote. */
#detail-view .detail-header h2#fiche-title { flex: 1 1 140px; min-width: 0; }
#detail-view .mx-presence:empty { margin-left: 0; }
/* « Ce qui a change dans cette version » suit les pastilles s'il reste la place. */
.fiche-chrono-note { flex: 0 1 auto; }

/* ============================== Ecran Taches (lot 9, maquette Taches) ==============================
 * En-tete : titre, « Projet », barre de vues en segments, « + Tache » ; tableau
 * de cartes, liste, matrice urgent / important, graphiques, fenetre
 * Etiquettes. Jetons des deux themes uniquement (contraste AA). */
.view.active.view-scrollable > .tch-ecran { flex: 1 1 auto; min-height: 0; overflow: auto; }
.tch-ecran { display: flex; flex-direction: column; gap: 18px; padding: 8px 8px 24px; max-width: 1440px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.tch-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tch-titre { margin: 0 8px 0 0; font-family: var(--police-titre); font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--titre); }
label.tch-portee { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 400; color: var(--texte-2); }
.tch-portee select { height: 40px; min-height: 40px; border-radius: 10px; border: none; box-shadow: 0 0 0 1px var(--bordure); padding: 0 10px;
  font: inherit; color: var(--texte); background: var(--surface); max-width: 280px; }
.tch-global { margin: 0; font-weight: 600; }
#tch-global-zone.hidden { display: none !important; }
.tch-vues { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 12px; background: var(--colonne); }
.tch-vues > button { height: 36px; min-height: 36px; padding: 0 14px; border: none; border-radius: 9px; background: transparent; color: var(--texte-2);
  font: inherit; font-size: 15px; font-weight: 400; cursor: pointer; box-shadow: none; }
.tch-vues > button:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--texte); }
.tch-vues > button[aria-selected="true"] { background: var(--surface); color: var(--texte); font-weight: 700; box-shadow: 0 1px 2px rgba(58, 38, 24, .12); }
:root[data-theme="sombre"] .tch-vues { background: var(--surface-2); }
:root[data-theme="sombre"] .tch-vues > button[aria-selected="true"] { background: var(--surface); box-shadow: 0 0 0 1px var(--bordure); }
.tch-tete .mx-presence { margin-left: auto; }
.tch-tete .mx-presence:empty { display: none; }
button.tch-nouvelle { margin-left: auto; height: 44px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px;
  border-radius: 12px; font-size: 15px; font-weight: 700; }
.tch-tete .mx-presence:not(:empty) + button.tch-nouvelle { margin-left: 0; }
button.tch-nouvelle .mx-ic { width: 18px; height: 18px; stroke-width: 2.2; }
.tch-zone { min-width: 0; }
.tch-zone .plan-outils { margin-top: 0; }
.tch-zone .plan-nouvelle { max-width: 900px; flex-wrap: nowrap; }
.tch-zone .plan-nouvelle > select { width: auto; max-width: 200px; flex: 0 1 auto; }
.tch-zone .plan-nouvelle input[type="text"] { min-width: 160px; }
@media (max-width: 900px) { .tch-zone .plan-nouvelle { flex-wrap: wrap; } }
.tch-sous-vues { display: flex; gap: 4px; margin-bottom: 4px; }
.tch-sous-vues .active { background: var(--principal-doux); color: var(--principal-doux-texte); font-weight: 700; }
.tch-aide { margin: 0 0 8px; }
.tch-nouvelle-carte { width: min(460px, calc(100vw - 24px)); }
.tch-nouvelle-form { display: flex; flex-direction: column; gap: 12px; }
.tch-nouvelle-form .tch-n-travail > span { display: flex; gap: 8px; }
.tch-nouvelle-form .tch-n-travail input { width: 110px; }
.tch-nouvelle-form .modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ----- Tableau de cartes (maquette) ----- */
.kanban-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: flex-end; margin: 0 0 8px; }
.kanban-barre .kanban-tous-note { margin-right: auto; order: -1; }
.kanban-affichage .abs-menu-liste { padding: 10px 12px; gap: 4px; min-width: 250px; }
.kanban-affichage .case-ligne { font-size: 14px; font-weight: 600; color: var(--texte); }
.kanban-affichage p { margin: 0 0 0 26px; }
.kanban { display: flex; gap: 16px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.kanban-col { flex: 1 1 250px; min-width: 220px; max-width: 420px; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: none;
  border-radius: 18px; background: var(--colonne); max-height: 72vh; }
.kanban-col.type-terminee, .kanban-col.type-bloquee, .kanban-col.type-en_pause { background: var(--colonne); }
:root[data-theme="sombre"] .kanban-col { background: var(--surface-2); }
.kanban-col.kanban-nouvelle { flex: 0 0 170px; min-width: 170px; background: transparent; border: 1.5px dashed var(--bordure-champ); }
.kanban-col-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 6px; }
h2.kanban-col-titre { margin: 0; font-family: var(--police-titre); font-size: 16px; font-weight: 700; color: var(--titre); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.kanban-nb { color: var(--texte-2); font-size: 14px; }
.kanban-type { font-size: 12px; padding: 1px 7px; border-radius: 999px; border: none; background: var(--surface); color: var(--texte-2); }
.kanban-actions { margin-left: auto; display: inline-flex; gap: 2px; opacity: 0; transition: opacity var(--m-court, .15s); }
.kanban-col:hover .kanban-actions, .kanban-actions:focus-within { opacity: 1; }
@media (hover: none) { .kanban-actions { opacity: 1; } }
.kanban-ajout input { width: 100%; height: 40px; min-height: 40px; box-sizing: border-box; border: 1.5px dashed var(--bordure-champ); border-radius: 12px;
  background: transparent; color: var(--texte); font: inherit; font-weight: 600; text-align: center; box-shadow: none; }
.kanban-ajout input::placeholder { color: var(--texte-2); opacity: 1; }
.kanban-ajout input:hover { background: color-mix(in srgb, var(--surface) 50%, transparent); }
.kanban-ajout input:focus { text-align: left; border-style: solid; border-color: var(--principal); background: var(--surface); outline: none; }
.kanban-cartes { display: flex; flex-direction: column; gap: 10px; min-height: 40px; overflow-y: auto; padding: 3px; margin: -3px; }
.kanban-carte { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: none; border-radius: 14px;
  background: var(--surface); box-shadow: var(--ombre-carte); cursor: pointer; font-size: 15px; color: var(--texte); }
.kanban-carte:hover { border: none; box-shadow: 0 2px 8px rgba(58, 38, 24, .10); }
.kanban-carte:focus-visible { outline: 2px solid var(--principal); outline-offset: 2px; border: none; }
:root[data-theme="sombre"] .kanban-carte { box-shadow: 0 0 0 1px var(--bordure); }
.kanban-carte.critique, .kanban-carte.terminee { border: none; }
.kanban-carte.terminee { opacity: 1; gap: 6px; }
.kanban-carte.terminee .kanban-titre { text-decoration: none; color: var(--texte-2); font-weight: 600; }
.kanban-titre { font-weight: 700; overflow-wrap: anywhere; padding-right: 26px; line-height: 1.35; }
.kanban-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; padding-right: 26px; }
.kanban-etiquettes + .kanban-titre { padding-right: 0; }
.kanban-apercu + .kanban-etiquettes, .kanban-apercu ~ .kanban-titre { padding-right: 0; }
.kanban-apercu { height: 120px; border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.kanban-apercu img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .2s; }
.kanban-apercu.charge img { opacity: 1; }
.kanban-avance { display: block; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.kanban-avance > span { display: block; height: 100%; border-radius: 999px; background: var(--principal); }
.kanban-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--texte-2); font-size: 13px; }
.kanban-icone { display: inline-flex; align-items: center; gap: 3px; }
.kanban-icone .mx-ic { width: 14px; height: 14px; stroke-width: 2; }
/* Echeance urgente (maquette : « pour demain » en rouge gras) ; autres
   alertes en texte court et sans pastille, pour des cartes legeres. */
.kanban-echeance.urgente { color: var(--rouge); font-weight: 700; }
.kanban-glisse, .kanban-critique { color: var(--rouge); font-weight: 600; }
.kanban-surcharge { color: var(--ambre); font-weight: 600; }
/* Tache impossible a placer (lot 9) : libelle propre, en rouge (AA dans
   les deux themes) ; l'explication est dans l'info-bulle et la fiche. */
.kanban-impossible, .tch-l-impossible { color: var(--rouge); font-weight: 700; }
.tch-l-impossible { font-size: 12.5px; white-space: nowrap; }
.kanban-insecable { white-space: nowrap; }
.kanban-avatars { margin-left: auto; display: inline-flex; }
.kanban-avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin: 0;
  font-size: 11px; font-weight: 700; box-shadow: 0 0 0 2px var(--surface); background: var(--avatar-fond); color: var(--avatar-texte); }
.kanban-avatar + .kanban-avatar { margin-left: -6px; }
.kanban-avatar.av-1 { background: var(--violet-fond); color: var(--violet); }
.kanban-avatar.av-2 { background: var(--bleu-fond); color: var(--bleu); }
.kanban-avatar.av-3 { background: var(--vert-fond); color: var(--vert); }
.kanban-avatar.av-4 { background: var(--ambre-fond); color: var(--ambre); }
.kanban-avatar.av-5 { background: var(--turquoise-fond); color: var(--turquoise); }
.kanban-avatar.av-plus { background: var(--surface-2); color: var(--texte-2); }
.kanban-pause-etat { display: flex; align-items: center; gap: 6px; color: var(--ambre); font-size: 13px; font-weight: 700; }
.kanban-pause-etat .mx-ic { width: 14px; height: 14px; stroke-width: 2.4; }
.kanban-reel { color: var(--texte-2); font-size: 13px; }
.kanban-termine { color: var(--texte-3); font-size: 13px; }
button.kanban-reprendre { align-self: flex-start; height: 34px; min-height: 34px; padding: 0 12px; border: none; border-radius: 9px;
  background: var(--turquoise-fond); color: var(--turquoise); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
button.kanban-reprendre:hover { background: color-mix(in srgb, var(--turquoise) 14%, var(--turquoise-fond)); color: var(--turquoise); }
.kanban-attend { color: var(--ambre); font-size: 12px; }
button.kanban-menu-btn { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; min-height: 28px; min-width: 0; padding: 0;
  border: none; border-radius: 8px; background: var(--surface); color: var(--texte-2); display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--m-court, .15s); }
.kanban-carte:hover .kanban-menu-btn, .kanban-carte:focus-within .kanban-menu-btn, .kanban-menu-btn[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { button.kanban-menu-btn { opacity: 1; } }
button.kanban-menu-btn:hover { background: var(--surface-2); color: var(--texte); }
.kanban-menu-btn .mx-ic { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.kanban-apercu ~ .kanban-menu-btn { background: color-mix(in srgb, var(--surface) 85%, transparent); }
.kanban-repere { height: 4px; border-radius: 2px; background: var(--principal); }
.kanban-menu { position: fixed; z-index: 720; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto;
  display: flex; flex-direction: column; padding: 6px; border-radius: var(--rayon-m); background: var(--surface); box-shadow: var(--ombre-menu); }
.kanban-menu button { justify-content: flex-start; text-align: left; border: none; padding: 8px 10px; min-height: 36px; border-radius: var(--rayon-s);
  color: var(--texte); font-weight: 600; background: transparent; }
.kanban-menu button:hover, .kanban-menu button:focus-visible { background: var(--fond); }
.kanban-menu button.actif { color: var(--principal-doux-texte); background: var(--principal-doux); }
.kanban-menu button.actif::after { content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-inline-start: .4em; vertical-align: -.2em; background: currentColor; -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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
.kanban-menu [role="group"] { display: flex; flex-direction: column; }
.kanban-menu-groupe { padding: 8px 10px 2px; font-size: 12px; font-weight: 700; color: var(--texte-2); border-top: 1px solid var(--bordure); margin-top: 4px; }
.kanban-menu > [role="group"]:first-child > .kanban-menu-groupe { border-top: none; margin-top: 0; }
.kanban-menu button.avec-detail { flex-direction: column; align-items: flex-start; gap: 2px; }
.kanban-menu-detail { display: block; font-size: 12px; font-weight: 400; color: var(--texte-2); }

/* ----- Fenetre Etiquettes (maquette) ----- */
.mx-etiquettes { position: fixed; z-index: 710; width: min(310px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface); color: var(--texte); box-shadow: var(--ombre-menu); }
.mx-etiq-tete { display: flex; align-items: center; justify-content: space-between; }
.mx-etiq-titre { font-size: 14px; font-weight: 700; }
button.mx-etiq-fermer { min-height: 28px; height: 28px; width: 28px; padding: 0; font-size: 18px; }
label.mx-etiq-jeu { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 400; color: var(--texte-2); }
.mx-etiq-jeu select { flex: 1 1 auto; min-width: 0; height: 34px; min-height: 34px; border-radius: 8px; border: none; box-shadow: 0 0 0 1px var(--bordure); color: var(--texte); background: var(--surface); }
.mx-etiq-liste { display: flex; flex-direction: column; gap: 6px; }
label.mx-etiq-ligne { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 400; color: var(--texte); cursor: pointer; }
.mx-etiq-ligne input { accent-color: var(--principal); margin: 0; }
.mx-etiq-pastille { width: 14px; height: 14px; border-radius: 4px; flex: none; background: var(--case); }
:root[data-theme="sombre"] .mx-etiq-pastille { background: var(--case-s, var(--case)); }
.mx-etiq-sous-titre { font-size: 13px; font-weight: 400; color: var(--texte-2); margin: 2px 0 0; }
.mx-etiq-nouvelle { display: flex; flex-direction: column; gap: 4px; }
.mx-etiq-nouvelle-ligne { display: flex; gap: 6px; }
/* Nom deja pris pendant la saisie (lot 13) : « Existe déjà » et sa couleur. */
.mx-etiq-existe, .carte-etiq-existe { display: inline-flex; align-items: center; gap: 6px; }
.mx-etiq-existe:empty, .carte-etiq-existe:empty { display: none; }
.mx-etiq-nouvelle-ligne input { flex: 1 1 auto; min-width: 0; height: 34px; min-height: 34px; }
.mx-etiq-pied { display: flex; flex-direction: column; gap: 6px; }
button.mx-etiq-modele { height: 34px; min-height: 34px; border: none; border-radius: 9px; background: var(--principal-doux); color: var(--principal-doux-texte);
  font-size: 14px; font-weight: 700; }
button.mx-etiq-modele:hover { background: var(--principal-doux-survol); color: var(--principal-doux-texte); }
button.mx-etiq-tout { align-self: flex-start; }
/* Lot 13 : etiquettes communes au projet (nombre de taches, Modifier,
   renommer / couleur / fusionner / supprimer), recherche, jeux repliables. */
.mx-etiq-portee { margin: -6px 0 0; }
.mx-etiq-cherche { height: 34px; min-height: 34px; }
.mx-etiq-item { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mx-etiq-item > .mx-etiq-ligne { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.mx-etiq-texte { overflow-wrap: anywhere; }
.mx-etiq-nb { font-size: 12px; color: var(--texte-2); min-width: 1.5em; text-align: right; }
button.mx-etiq-modif { min-height: 28px; height: 28px; width: 28px; padding: 0; flex: none; }
.mx-etiq-editeur { display: flex; flex-direction: column; gap: 6px; margin: 0 0 4px 12px; padding: 8px; border-radius: 10px; background: var(--surface-2); }
.mx-etiq-editeur label { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.mx-etiq-editeur input[type="text"] { height: 32px; min-height: 32px; }
.mx-etiq-editeur .mx-couleur-btn { align-self: flex-start; }
.mx-etiq-note { margin: 0; }
.mx-etiq-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-etiq-fusion { display: flex; flex-direction: column; gap: 2px; }
.mx-etiq-fusion select { flex: 1 1 0; width: auto; min-width: 0; height: 32px; min-height: 32px; }
.mx-etiq-fusion button { flex: none; padding: 0 10px; }
.mx-etiq-jeux > summary { cursor: pointer; font-size: 13px; color: var(--texte-2); }
.mx-etiq-jeux[open] > summary { margin-bottom: 8px; }
.mx-etiq-jeux .mx-etiq-pied { margin-top: 8px; }
.mx-etiq-jeu-contenu { margin: 6px 0; }
button.tch-etiquettes { margin-left: auto; height: 44px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 12px; }
button.tch-etiquettes .mx-ic { width: 16px; height: 16px; }
.tch-tete .mx-presence:not(:empty) + button.tch-etiquettes, button.tch-etiquettes:not(.hidden) + button.tch-nouvelle { margin-left: 0; }

/* ----- Taches repetees (lot 13) ----- */
.kanban-repetee .mx-ic { width: 14px; height: 14px; }
.kanban-reportee { font-size: 12px; color: var(--ambre); font-weight: 600; margin-left: 2px; }
.tch-l-repetee .mx-ic { width: 14px; height: 14px; vertical-align: -2px; }
.carte-repetition p { margin: 4px 0; }
.carte-rep-regle { display: flex; align-items: center; gap: 6px; }
.carte-rep-report { padding: 4px 8px; border-radius: 6px; background: var(--ambre-fond); color: var(--ambre); font-weight: 600; }
.carte-rep-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mx-rep-carte { width: min(480px, calc(100vw - 24px)); }
.mx-rep-corps { display: flex; flex-direction: column; gap: 12px; }
.mx-rep-corps fieldset { border: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.mx-rep-corps legend { font-size: 13px; color: var(--texte-2); padding: 0; margin-bottom: 4px; width: 100%; }
.mx-rep-corps fieldset label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.mx-rep-ligne { display: flex; flex-wrap: wrap; gap: 12px; }
.mx-rep-ligne > label { flex: 1 1 160px; }
.mx-rep-n { display: flex; align-items: center; gap: 8px; }
.mx-rep-n input { width: 80px; }
.mx-rep-fin input[type="number"] { width: 80px; }
/* « Le [date] » / « Après [n] fois » : bouton radio centre sur le champ (pas sur
   la premiere ligne du texte, regle generale de app.css). */
.mx-rep-corps .mx-rep-fin label > input[type="radio"] { align-self: center; margin-top: 0; }
label.mx-rep-jour { padding: 4px 8px; border-radius: 8px; background: var(--surface-2); }
.mx-rep-apercu { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); min-height: 2.5em; }
.mx-rep-apercu ul { margin: 6px 0 0; padding-left: 18px; }
.mx-rep-report { color: var(--ambre); font-size: 13px; font-weight: 600; }
.mx-couleur-panneau.mx-couleur-integre { position: static; z-index: auto; width: auto; max-height: none; overflow: visible; padding: 0; box-shadow: none;
  background: transparent; border-radius: 0; gap: 8px; }
.carte-etiq-fenetre { margin-left: 6px; font-size: 12.5px; }

/* ----- Liste ----- */
.tch-liste-cadre .table-scroll-wrap { max-height: calc(100vh - 330px); min-height: 220px; }
.tch-liste tbody tr { cursor: pointer; }
.tch-liste tbody tr:focus-visible { outline: 2px solid var(--principal); outline-offset: -2px; }
.tch-liste tr.tch-l-replie { display: none !important; }
.tch-liste tr.tch-l-replie.mx-trouvee { display: table-row !important; }
.tch-liste tr.mx-contexte .tch-l-nom { font-weight: 400; color: var(--texte-2); }
.tch-liste .tch-l-sous td.tch-l-nom { padding-left: 34px; }
.tch-l-retrait { color: var(--texte-3); margin-right: 6px; }
.tch-l-nom { font-weight: 600; }
.tch-l-sous .tch-l-nom { font-weight: 400; }
button.tch-l-plier { min-height: 22px; height: 22px; width: 22px; padding: 0; margin-right: 4px; font-size: 13px; color: var(--texte-2); }
.tch-l-plier-vide { display: inline-block; width: 26px; }
.tch-l-av { display: inline-flex; align-items: center; gap: 8px; }
.tch-l-av .kanban-avance { width: 60px; }
.tch-prio { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--texte-2); }
.tch-prio.prio-haute { background: var(--rouge-fond); color: var(--rouge); }
.tch-prio.prio-basse { background: var(--bleu-fond); color: var(--bleu); }
.tch-etat { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--texte-2); }
.tch-etat.etat-en_cours { background: var(--bleu-fond); color: var(--bleu); }
.tch-etat.etat-en_pause { background: var(--ambre-fond); color: var(--ambre); }
.tch-etat.etat-bloquee { background: var(--rouge-fond); color: var(--rouge); }
.tch-etat.etat-terminee { background: var(--vert-fond); color: var(--vert); }

/* ----- Urgent / important ----- */
.tch-matrice { display: grid; grid-template-columns: 26px 1fr 1fr; grid-template-rows: auto auto auto; gap: 12px; align-items: stretch; }
.tch-m-axe { font-size: 13px; font-weight: 700; color: var(--texte-2); text-align: center; align-self: center; }
.tch-m-axe-u { grid-column: 2; grid-row: 1; }
.tch-m-axe-nu { grid-column: 3; grid-row: 1; }
.tch-m-axe-i, .tch-m-axe-ni { grid-column: 1; writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; }
.tch-m-axe-i { grid-row: 2; }
.tch-m-axe-ni { grid-row: 3; }
.tch-m-quadrant { display: flex; flex-direction: column; gap: 10px; min-height: 180px; padding: 12px; border-radius: 18px; background: var(--colonne);
  outline: 2px dashed transparent; outline-offset: -4px; }
:root[data-theme="sombre"] .tch-m-quadrant { background: var(--surface-2); }
.tch-m-quadrant.cible { outline-color: var(--principal); }
.tch-m-quadrant.q-maintenant { grid-column: 2; grid-row: 2; }
.tch-m-quadrant.q-planifier { grid-column: 3; grid-row: 2; }
.tch-m-quadrant.q-deleguer { grid-column: 2; grid-row: 3; }
.tch-m-quadrant.q-plus_tard { grid-column: 3; grid-row: 3; }
.tch-m-quadrant > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 2px 4px; }
.tch-m-quadrant h2 { margin: 0; font-family: var(--police-titre); font-size: 16px; color: var(--titre); }
.tch-m-quadrant h2::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: var(--texte-3); }
.tch-m-quadrant.q-maintenant h2::before { background: var(--rouge); }
.tch-m-quadrant.q-planifier h2::before { background: var(--principal); }
.tch-m-quadrant.q-deleguer h2::before { background: var(--bleu); }
.tch-m-nb { color: var(--texte-2); font-size: 14px; }
.tch-m-liste { list-style: none; margin: 0; padding: 2px; display: flex; flex-direction: column; gap: 8px; min-height: 40px; max-height: 440px; overflow: auto; }
.tch-m-carte { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--ombre-carte); cursor: pointer; }
:root[data-theme="sombre"] .tch-m-carte { box-shadow: 0 0 0 1px var(--bordure); }
.tch-m-carte[draggable="true"] { cursor: grab; }
.tch-m-carte:focus-visible { outline: 2px solid var(--principal); outline-offset: 2px; }
.tch-m-carte.deplace { opacity: .4; }
.tch-m-carte.force { box-shadow: inset 3px 0 0 var(--principal), var(--ombre-carte); }
.tch-m-nom { font-weight: 700; overflow-wrap: anywhere; }
.tch-m-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--texte-2); }
.tch-m-pers { margin-left: auto; font-weight: 700; }
.tch-m-force { font-size: 12.5px; color: var(--texte-2); }
.tch-m-force .lien { font-size: 12.5px; margin-left: 4px; }
.tch-m-vide { padding: 6px 4px; }
/* Menu ⋯ d'une tache de la matrice (deplacer sans glisser : tablette) */
.tch-m-carte { position: relative; padding-right: 40px; }
.tch-m-carte:hover .kanban-menu-btn, .tch-m-carte:focus-within .kanban-menu-btn { opacity: 1; }
button.tch-m-menu-btn { top: 6px; right: 6px; }
@media (max-width: 760px) {
  .tch-matrice { grid-template-columns: 1fr; grid-template-rows: none; }
  .tch-m-quadrant.q-maintenant, .tch-m-quadrant.q-planifier, .tch-m-quadrant.q-deleguer, .tch-m-quadrant.q-plus_tard { grid-column: 1; grid-row: auto; }
  .tch-m-axe { display: none; }
}

/* ----- Graphiques (SVG integre, jetons des deux themes) ----- */
:root { --graphe-1: #2A78D6; --graphe-2: #D0701F; --graphe-critique: #D03B3B; }
:root[data-theme="sombre"] { --graphe-1: #3987E5; --graphe-2: #C8741F; --graphe-critique: #E66767; }
.tch-graphiques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; align-items: start; }
@media (max-width: 520px) { .tch-graphiques { grid-template-columns: 1fr; } }
.tch-g-carte { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 18px; background: var(--surface);
  box-shadow: var(--ombre-carte); }
:root[data-theme="sombre"] .tch-g-carte { box-shadow: 0 0 0 1px var(--bordure); }
.tch-g-carte h2 { margin: 0; font-family: var(--police-titre); font-size: 17px; color: var(--titre); }
.tch-g-explication { margin: 0; font-size: 13.5px; color: var(--texte-2); }
.tch-g-corps { min-width: 0; overflow-x: auto; }
.tch-g-svg { display: block; max-width: 100%; height: auto; overflow: visible; font-family: var(--police-texte); }
.tch-g-svg .s1 { fill: var(--graphe-1); }
.tch-g-svg .s2 { fill: var(--graphe-2); }
.tch-g-svg .critique { fill: var(--graphe-critique); }
/* Heures disponibles : la piste a un contour fonce (au moins 3:1 face au
   fond de la carte, dans les deux themes) ; indisponible : gris soutenu. */
.tch-g-svg .piste { fill: var(--surface-2); stroke: var(--texte-3); stroke-width: 1.5; }
.tch-g-svg rect.hachure { fill: color-mix(in srgb, var(--texte-3) 80%, var(--surface)); }
.tch-g-cle.s1 { background: var(--graphe-1); }
.tch-g-cle.s2 { background: var(--graphe-2); }
.tch-g-cle.critique { background: var(--graphe-critique); }
.tch-g-cle.piste { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--texte-3); }
.tch-g-cle.hachure { background: color-mix(in srgb, var(--texte-3) 80%, var(--surface)); }
.tch-g-svg .tch-g-ligne { fill: none; stroke: var(--graphe-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tch-g-svg .tch-g-aire { fill: var(--graphe-2); fill-opacity: .1; }
.tch-g-svg .tch-g-point { fill: var(--graphe-2); stroke: var(--surface); stroke-width: 2; }
.tch-g-svg .tch-g-cible { fill: transparent; }
.tch-g-svg .tch-g-cible:hover { fill: color-mix(in srgb, var(--graphe-2) 25%, transparent); }
.tch-g-svg .tch-g-grille { stroke: var(--bordure); stroke-width: 1; }
.tch-g-svg text { font-size: 12px; fill: var(--texte-2); }
.tch-g-svg .tch-g-libelle { fill: var(--texte); font-size: 13px; }
.tch-g-svg .tch-g-valeur { fill: var(--texte); font-size: 12px; font-weight: 700; }
.tch-g-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 0; padding: 0; font-size: 13px; color: var(--texte-2); }
.tch-g-legende li { display: inline-flex; align-items: center; gap: 6px; }
.tch-g-cle { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tch-g-minis { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.tch-g-mini, .tch-g-personne { margin: 0; min-width: 0; }
.tch-g-mini figcaption, .tch-g-personne figcaption { font-size: 13.5px; font-weight: 700; color: var(--texte); margin-bottom: 2px; }
.tch-g-alerte { color: var(--rouge); font-weight: 700; font-size: 12.5px; margin-left: 6px; }
.tch-g-stat { margin: 0; font-size: 14px; color: var(--texte-2); }
.tch-g-stat b { color: var(--texte); font-size: 18px; }
.tch-g-stat b.texte-danger { color: var(--rouge); }
.tch-g-hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0; }
.tch-g-hero b { font-size: 40px; line-height: 1.1; color: var(--titre); font-weight: 700; }
.tch-g-chiffres > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--principal-doux-texte); }
.tch-g-table { border-collapse: collapse; font-size: 13px; margin-top: 6px; width: 100%; }
.tch-g-table th, .tch-g-table td { padding: 4px 8px; border-bottom: 1px solid var(--ligne); text-align: left; color: var(--texte); }
.tch-g-table thead th { color: var(--texte-2); font-weight: 700; background: transparent; }
.tch-g-perimetre { margin: 8px 2px 0; }

/* Ecran encore dessine pour le compte precedent (deconnexion puis autre
   compte dans le meme onglet, web/app.js mxEcransPerimes) : contenu cache
   jusqu'a ce que son ouverture ait relu les donnees. */
.view[data-mx-perime] > * { visibility: hidden; }
.view.active[data-mx-perime]::before { content: 'Chargement…'; display: block; padding: 24px 28px; color: var(--texte-2); }

/* ============================== Mon temps (lot 10) ==============================
 * Panneau « Mon temps » (maquette Barre : chrono, concentration, Ne pas
 * deranger, Passer a, Indisponible, Feuille de temps) ouvert par le bouton
 * de l'en-tete, fenetres Feuille de temps et Reglages (web/mon-temps.js).
 * Couleurs : familles turquoise (chrono), ambre (concentration), violet (Ne
 * pas deranger), caramel doux (feuille de temps) ; pastilles des projets. */
:root {
  --mt-violet-texte: #4A2E86;
  --mt-c0: #2D63B0; --mt-c1: #0F7A6B; --mt-c2: #C2410C; --mt-c3: #C74B6F;
  --mt-c4: #2F7D57; --mt-c5: #8A4E00; --mt-c6: #7C4DCC; --mt-c7: #7A5A40; --mt-chp: #A08A78;
}
:root[data-theme="sombre"] {
  --mt-violet-texte: #C3A8F0;
  --mt-c0: #A9C5F0; --mt-c1: #8FD5C7; --mt-c2: #F2A47A; --mt-c3: #F2A9C0;
  --mt-c4: #9FD8B3; --mt-c5: #F2C46B; --mt-c6: #C3A8F0; --mt-c7: #D2B49C; --mt-chp: #ADA295;
}
.mt-pastille { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; background: var(--mt-chp); }
.mt-c0 { background: var(--mt-c0); } .mt-c1 { background: var(--mt-c1); } .mt-c2 { background: var(--mt-c2); }
.mt-c3 { background: var(--mt-c3); } .mt-c4 { background: var(--mt-c4); } .mt-c5 { background: var(--mt-c5); }
.mt-c6 { background: var(--mt-c6); } .mt-c7 { background: var(--mt-c7); } .mt-chp { background: var(--mt-chp); }

/* Bouton de l'en-tete : la vache, et le chrono en cours (projet et temps).
   Largeur RESERVEE : avec ou sans chrono, il occupe la meme place (zone du
   chrono de largeur fixe, nom tronque, chiffres tabulaires ; sans chrono,
   une marge de meme largeur a sa gauche) : la barre des onglets ne se
   recompose pas (rien ne passe dans « Plus ») a chaque lancement ou arret. */
.topbar .user-area .btn-mon-temps { --mt-zone: 150px; display: inline-flex; align-items: center; gap: 6px; height: 40px; min-height: 40px; padding: 0 10px 0 8px;
  border-radius: var(--rayon); position: relative; color: var(--texte); font-weight: 700; margin-left: calc(var(--mt-zone) + 6px); }
.topbar .user-area .btn-mon-temps.mt-actif { margin-left: 0; }
/* Ecran etroit (tablette) : ni reserve ni zone ; un point sur la vache dit
   qu'un chrono tourne (gris : en pause), le projet et le temps sont dans le
   nom accessible et l'info-bulle (et dans le panneau). Largeur constante. */
@media (max-width: 900px) {
  .topbar .user-area .btn-mon-temps { margin-left: 0; }
  .topbar .user-area .btn-mon-temps .mt-entete-chrono { display: none; }
  .topbar .user-area .btn-mon-temps.mt-actif::after { content: ''; position: absolute; left: 25px; bottom: 6px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 0 2px var(--surface); }
  .topbar .user-area .btn-mon-temps.mt-actif.mt-en-pause::after { background: var(--texte-2); }
}
.topbar .user-area .btn-mon-temps[aria-expanded="true"] { background: var(--surface); box-shadow: 0 0 0 2px var(--principal); }
.btn-mon-temps .mt-entete-vache { width: 24px; height: 24px; flex: none; }
.btn-mon-temps .mt-entete-ndd { position: absolute; left: 22px; top: 4px; width: 16px; height: 16px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--violet-fond); color: var(--mt-violet-texte); }
.btn-mon-temps .mt-entete-ndd[hidden], .btn-mon-temps .mt-entete-chrono[hidden] { display: none; }
.btn-mon-temps .mt-entete-chrono { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; width: var(--mt-zone, 150px);
  flex: none; box-sizing: border-box; overflow: hidden; }
.btn-mon-temps .mt-entete-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.btn-mon-temps .mt-entete-temps { flex: none; font-variant-numeric: tabular-nums; color: var(--turquoise); white-space: nowrap; }
.btn-mon-temps.mt-en-pause .mt-entete-temps { color: var(--texte-2); font-weight: 600; }

/* Panneau (maquette Barre) */
.mt-panneau { position: fixed; right: 14px; top: 68px; z-index: 95; width: 350px; max-width: calc(100vw - 16px); box-sizing: border-box;
  max-height: calc(100vh - 80px); overflow: auto; border-radius: 20px; background: var(--surface); color: var(--texte);
  box-shadow: 0 16px 40px rgba(58, 38, 24, .28); padding: 18px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.45; }
:root[data-theme="sombre"] .mt-panneau { box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 0 1px var(--bordure); }
.mt-panneau[hidden] { display: none; }
.mt-panneau:focus, .mt-panneau:focus-visible { outline: none; }
.mt-reglages-form input[name="inactivite"] { max-width: 120px; }
.mt-panneau button { font-family: inherit; font-size: inherit; line-height: inherit; cursor: pointer; }
.mt-tete { display: flex; align-items: center; gap: 8px; }
.mt-vache { width: 34px; height: 34px; flex: none; }
.mt-titre { font-family: var(--police-titre); font-weight: 700; font-size: 19px; color: var(--titre); }
.mt-seul { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--texte-2); font-size: 12px; font-weight: 400; cursor: default; border-radius: 6px; }
.modal-header .mt-seul { margin-left: auto; }
.mt-icone-bouton { width: 32px; height: 32px; min-height: 32px; border: none; border-radius: var(--rayon-s); background: transparent; color: var(--texte-2);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.mt-icone-bouton:hover { background: var(--surface-2); color: var(--texte); }
.mt-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-ndd { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--violet-fond);
  color: var(--mt-violet-texte); font-weight: 700; font-size: 15px; cursor: pointer; margin: 0; }
.mt-ndd svg { flex: none; }
.mt-ndd-lib { flex-grow: 1; }
.mt-ndd-quand { font-weight: 600; font-size: 13px; }
.mt-panneau label.mt-ndd > input[type="checkbox"] { order: 10; width: 20px; height: 20px; margin: 0; align-self: center; accent-color: var(--violet); flex: none; cursor: pointer; }
.mt-chrono { border-radius: 16px; background: var(--turquoise-fond); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.mt-chrono-vide { background: var(--fond); padding: 10px 12px; }
.mt-chrono-vide .mx-vide { margin: 0; padding: 0; }
.mt-ligne { display: flex; align-items: center; gap: 8px; }
.mt-nom { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-etat { margin-left: auto; font-size: 13px; color: var(--turquoise); font-weight: 700; white-space: nowrap; }
.mt-chrono.en-pause .mt-etat, .mt-chrono-arret .mt-etat { color: var(--texte-2); }
.mt-temps { font-family: var(--police-titre); font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; color: var(--texte); }
.mt-boutons { display: flex; gap: 8px; }
.mt-blanc { flex-grow: 1; height: 42px; min-height: 42px; border: none; border-radius: 12px; background: var(--surface); color: var(--texte); font-weight: 700; padding: 0 12px; }
.mt-blanc.mt-principal { color: var(--turquoise); }
.mt-blanc:hover:not(:disabled) { box-shadow: inset 0 0 0 2px currentColor; }
.mt-blanc:disabled { opacity: .6; cursor: not-allowed; }
.mt-conc { border-radius: 16px; background: var(--ambre-fond); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.mt-conc-texte { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.mt-conc-titre { font-weight: 700; color: var(--ambre); }
.mt-conc-reste { font-size: 13px; color: var(--ambre); font-variant-numeric: tabular-nums; }
.mt-conc-bouton { width: 40px; height: 40px; min-height: 40px; flex: none; border: none; border-radius: 10px; background: var(--surface); color: var(--ambre);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.mt-passer-titre { font-size: 13px; font-weight: 700; color: var(--texte-3); }
.mt-passer { display: flex; flex-direction: column; gap: 12px; }
.mt-passer-ligne { height: 44px; min-height: 44px; border: none; border-radius: 12px; background: var(--fond); color: var(--texte); font-weight: 400;
  display: flex; align-items: center; gap: 10px; padding: 0 14px; text-align: left; }
.mt-passer-ligne:hover { background: var(--surface-2); }
.mt-passer-nom { flex-grow: 1; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-passer-temps { color: var(--texte-2); font-variant-numeric: tabular-nums; }
/* Petite roue des projets (maquette BarreHaut) */
.mt-roue-cadre { display: flex; align-items: center; gap: 4px; background: var(--fond); border-radius: 14px; padding: 4px; }
.mt-roue-fleche { width: 32px; height: 40px; min-height: 40px; flex: none; border: none; border-radius: 10px; background: transparent; color: var(--texte-2);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.mt-roue-fleche:hover { background: var(--surface-2); }
.mt-roue { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; overflow: hidden;
  border-radius: 10px; touch-action: pan-y; user-select: none; cursor: grab; }
.mt-roue:focus-visible { outline: 2px solid var(--principal); outline-offset: 2px; }
.mt-roue-option { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-roue-option.mt-voisin { font-size: 13px; color: var(--texte-3); padding: 0 4px; max-width: 26%; cursor: pointer; }
.mt-roue-option.mt-choisi { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--surface);
  box-shadow: 0 1px 3px rgba(58, 38, 24, .15); font-weight: 700; max-width: 50%; flex: none; cursor: pointer; }
.mt-roue-lancer { width: 40px; height: 40px; min-height: 40px; flex: none; border: none; border-radius: 10px; background: var(--turquoise-fond); color: var(--turquoise);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.mt-lien { border: none; background: transparent; color: var(--principal-doux-texte); font-weight: 700; font-size: 13px; padding: 2px 0; text-align: left;
  text-decoration: underline; text-underline-offset: 2px; min-height: 0; }
.mt-bas { display: flex; gap: 8px; padding-top: 4px; }
.mt-bas button { flex-grow: 1; height: 42px; min-height: 42px; border: none; border-radius: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; }
.mt-indispo { background: var(--surface-2); color: var(--texte); }
.mt-feuille-bouton { background: var(--principal-doux); color: var(--principal-doux-texte); }
.mt-indispo:hover, .mt-feuille-bouton:hover { box-shadow: inset 0 0 0 2px currentColor; }
.mt-sous-menu { border: 1px solid var(--bordure); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.mt-sous-menu[hidden] { display: none; }
.mt-sous-titre { font-size: 13px; font-weight: 700; color: var(--texte-2); }
.mt-sous-texte { margin: 0; font-size: 12.5px; color: var(--texte-2); }
.mt-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-choix button, .mt-jusqua button, .mt-autre-liste button { border: 1px solid var(--bordure); border-radius: var(--rayon-s); background: var(--surface);
  color: var(--texte); font-weight: 600; font-size: 13px; padding: 6px 10px; min-height: 34px; }
.mt-choix button:hover, .mt-jusqua button:hover, .mt-autre-liste button:hover { background: var(--surface-2); }
.mt-jusqua { display: flex; align-items: center; gap: 6px; margin: 0; }
.mt-jusqua label { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--texte); margin: 0; flex: 1; min-width: 0; }
.mt-jusqua input { min-height: 34px; width: auto; flex: 1; min-width: 0; max-width: 150px; }
.mt-indispo-ligne { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mt-autre-liste { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; }
.mt-autre-liste button { display: flex; align-items: center; gap: 8px; text-align: left; }
.mt-chargement { margin: 0; }
@media (max-width: 420px) { .mt-panneau { right: 8px; left: 8px; width: auto; } }

/* Fenetres Feuille de temps et Reglages */
.mt-fenetre .mt-fenetre-carte { width: min(820px, 96vw); max-height: 92vh; overflow: auto; }
.mt-onglets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.mt-onglets button { border: none; background: transparent; border-radius: var(--rayon-s); padding: 6px 12px; font-weight: 700; color: var(--texte-2); min-height: 34px; }
.mt-onglets button[aria-selected="true"], .mt-onglets button[aria-pressed="true"] { background: var(--principal-doux); color: var(--principal-doux-texte); }
.mt-onglets-sep { flex: 1; }
.mt-nav { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.mt-table th[scope="row"] { font-weight: 700; text-align: left; background: transparent; color: var(--texte); white-space: nowrap; }
.mt-table th[scope="row"] .mt-pastille { margin-right: 8px; vertical-align: middle; position: relative; top: -1px; }
.mt-table td, .mt-table thead th { text-align: right; font-variant-numeric: tabular-nums; }
.mt-table thead th:first-child { text-align: left; }
.mt-table .mt-total { font-weight: 700; }
.mt-table .mt-auj { color: var(--principal-doux-texte); }
.mt-report input, .mt-report select { width: 76px; text-align: right; min-height: 32px; }
.mt-deja { display: block; font-size: 11.5px; color: var(--texte-2); }
.mt-note { font-size: 13px; color: var(--texte-2); margin: 8px 0; }
.mt-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; }
.mt-mode { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 8px 12px; margin: 10px 0 0; display: flex; gap: 16px; flex-wrap: wrap; }
.mt-mode legend { font-size: 13px; font-weight: 700; color: var(--texte); padding: 0 4px; }
.mt-mode label { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.mt-plages { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mt-plage { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--rayon); background: var(--fond); flex-wrap: wrap; }
.mt-plage-nom { font-weight: 700; flex: 1; min-width: 120px; }
.mt-plage-heures, .mt-plage-duree { font-variant-numeric: tabular-nums; color: var(--texte-2); font-size: 13px; }
.mt-plage-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--bordure); border-radius: var(--rayon); }
.mt-plage-form > b { flex-basis: 100%; font-size: 13.5px; }
.mt-plage-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.mt-plage-edition { border-style: solid; width: 100%; background: var(--surface); }
.mt-reglages-form fieldset { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 10px 14px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.mt-reglages-form legend { font-weight: 700; color: var(--titre); padding: 0 4px; }
.mt-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 12px; }
.mt-grille label { display: flex; flex-direction: column; gap: 4px; }
.mt-case { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 600 !important; }
.mt-h3 { font-size: 16px; margin: 16px 0 4px; }
.mt-projets-reglages { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mt-projets-reglages li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--rayon-s); background: var(--fond); flex-wrap: wrap; }
.mt-projets-reglages li > span:not(.mt-pastille) { flex: 1; font-weight: 600; }

/* « Ne pas deranger » vu des collegues : seulement ce drapeau, sur l'avatar
   (presence sur une fiche) et dans l'ecran Equipe. */
.mx-avatar.mt-avatar-ndd { position: relative; overflow: visible; }
/* Pastille pleine (violet, lune claire ; theme sombre : violet clair, lune
   foncee) : la lune et la pastille contrastent d'au moins 3:1 avec leur
   fond et la surface dans les deux themes (WCAG 1.4.11). */
.mx-avatar.mt-avatar-ndd::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%;
  background: #5B3A99 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z'/%3E%3C/svg%3E") center / 8px no-repeat;
  box-shadow: 0 0 0 2px var(--surface); }
:root[data-theme="sombre"] .mx-avatar.mt-avatar-ndd::after {
  background: #C3A8F0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E2545' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z'/%3E%3C/svg%3E") center / 8px no-repeat; }
.mt-badge-ndd { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: var(--violet-fond); color: var(--mt-violet-texte); white-space: nowrap; }