/* To-do INCYBER 2027 — feuille de style unique (extraite de index.html le 02/10/2026, Lot 0.3). */
  @font-face{font-family:"Schibsted Grotesk";src:url(../fonts/schibsted-grotesk-latin.woff2) format("woff2");font-weight:400 800;font-display:swap;}
  @font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-latin.woff2) format("woff2");font-weight:400 500;font-display:swap;}
  :root{
    /* ---------- Charte graphique PE ----------
       Couleurs de la charte 10 couleurs utilisée dans INCYBER/PE. Les noms de
       variables sont conservés (tout le fichier les référence) même quand la
       teinte change de famille : `--green` porte désormais le teal de charte,
       la charte PE ne contenant aucun vert. */
    /* Refonte (02/10/2026) : palette charte INCYBER en pastel, coins arrondis, Schibsted Grotesk.
       Les noms de variables sont conservés (tout le fichier les référence). */
    --bg:#fffefd; --side:#f5f2f2; --panel:#fff; --border:#ebebeb; --text:#26221f; --muted:#756d68; --faint:#a59d97;
    --blue:#4468e6; --blue-bg:#eaeefc; --green:#51beca; --green-bg:#e1f3f5;
    --red:#e5605e; --red-bg:#fbe9e9; --yellow:#fbf25a;
    /* « Attention » (Lot 3, 3.2) : statut « en attente de précision » — distinct du rouge (réservé au retard,
       voir règle de couleur) et du jaune (surlignage « à clôturer »/commentaires). Ambre, encre foncée pour le contraste. */
    --warn:#e8962e; --warn-bg:#fbeedb; --warn-ink:#8a4d05;
    --neutral-bg:#f0eeec; --hover:#f5f2f2; --on-blue:#fff; --on-green:#0b3a40;
    /* Lot 6 (06/10/2026) : encre des mentions @nom (.mention) — `--blue` seul sur `--blue-bg` ne
       passait que 4,15:1 en clair (sous le seuil AA 4,5:1 texte normal). Assombri sans toucher
       `--blue` (boutons/liens, déjà conformes ailleurs) ; en sombre `--blue` suffit déjà (5,31:1). */
    --mention-ink:color-mix(in srgb,var(--blue) 82%,#000);
    color-scheme:light;
    --font:"Schibsted Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
    --sidebar-w:240px;
    /* Hauteur commune de tous les contrôles de la barre de filtres —
       voir la section "Main"/.filters : évite l'écart constaté entre <select>,
       <input> et <button> à padding égal. */
    --filter-h:36px;
    /* Largeur de la pastille/sélecteur "projet" — recalculée en JS
       (TODO_syncProjectChipWidth()) sur le nom de projet le plus long existant,
       pour que toutes les cartes réduites s'alignent sur la même largeur de
       zone projet. Valeur ci-dessous = repli avant le premier rendu JS. */
    --project-chip-w:150px;
    /* Largeur commune du sélecteur "responsable" en édition rapide —
       même principe que --project-chip-w, recalculée par TODO_syncRespChipWidth()
       sur le nom le plus long de RESPONSABLES (ou "— Non assigné —"). */
    --resp-chip-w:150px;
    /* Largeur commune des 7 pilules du ruban de semaine — même principe,
       recalculée par TODO_syncDayChipWidth() sur les libellés jour complet
       ("Lundi" à "Dimanche") réellement générés par TODO_dayPillLabel().
       Valeur ci-dessous = repli avant le premier rendu JS. */
    --day-chip-w:100px;
    /* Ombre unique de tout l'outil — valeur de référence relevée dans PE
       (blocs PE/GLOBAL_IMPACT-CODE-PROMO_FR.html). Ne pas en introduire d'autre. */
    --shadow:0 8px 28px rgba(60,40,30,.12);
    /* Rayons — coins carrés (alignement charte PE, qui neutralise
       explicitement l'arrondi du builder tiers). Les 3 paliers posés en Init-12
       sont conservés comme points d'entrée, tous à 0 : un seul endroit à
       changer si Antoine veut revenir à des coins arrondis. */
    --r-sm:8px; --r-md:12px; --r-pill:99px; --red-ink:#c4403e;
    /* Typo — 6 tailles, aucune valeur intermédiaire ailleurs dans le fichier */
    --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-lg:15px; --fs-xl:17px; --fs-2xl:19px;
    /* Palier supplémentaire : uniquement le titre de la page de
       connexion, qui a besoin d'un vrai contraste de hiérarchie. */
    --fs-3xl:24px;
    /* Espacements — grille de 4px */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px;
  }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
    --bg:#1c1917; --side:#171412; --panel:#262220; --border:#363029; --text:#f1ebe6; --muted:#a39992; --faint:#7d746d;
    --blue:#7f9bff; --blue-bg:#222c45; --green:#6cc9d4; --green-bg:#173236;
    --red:#ff8a82; --red-bg:#3b211d; --yellow:#fbf25a;
    --warn:#f0ad4e; --warn-bg:#3a2a12; --warn-ink:#f0ad4e;
    --neutral-bg:#2b2623; --hover:#2a2522; --on-blue:#0e1530; --on-green:#062b30;
    --mention-ink:var(--blue);
    --shadow:0 12px 36px rgba(0,0,0,.55);
    color-scheme:dark; } }
  :root[data-theme="dark"]{
    --bg:#1c1917; --side:#171412; --panel:#262220; --border:#363029; --text:#f1ebe6; --muted:#a39992; --faint:#7d746d;
    --blue:#7f9bff; --blue-bg:#222c45; --green:#6cc9d4; --green-bg:#173236;
    --red:#ff8a82; --red-bg:#3b211d; --yellow:#fbf25a;
    --warn:#f0ad4e; --warn-bg:#3a2a12; --warn-ink:#f0ad4e;
    --neutral-bg:#2b2623; --hover:#2a2522; --on-blue:#0e1530; --on-green:#062b30;
    --mention-ink:var(--blue);
    --shadow:0 12px 36px rgba(0,0,0,.55);
    color-scheme:dark; }
  *{box-sizing:border-box;}
  /* Sidebar et main partagent le même flux : `align-items:stretch` (défaut de
     flexbox) suffit à étirer la sidebar jusqu'à la hauteur réelle de la page,
     sans JS — indispensable depuis que les colonnes ne défilent plus en interne
     et que `main` peut dépasser 100vh. */
  body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);font-size:var(--fs-md);
       display:flex;align-items:stretch;min-height:100vh;}
  button{cursor:pointer;border:none;border-radius:var(--r-sm);font-size:var(--fs-md);padding:7px var(--sp-3);font-weight:600;font-family:inherit;}
  .btn-primary{background:var(--blue);color:var(--on-blue);}
  .btn-primary:hover{background:color-mix(in srgb,var(--blue) 88%,#000);}
  .btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border);}
  .btn-ghost:hover{background:var(--hover);}
  .btn-small{padding:var(--sp-1) var(--sp-2);font-size:var(--fs-sm);}

  /* ---------- Bouton-icône : composant unique, 2 tailles ----------
     Utilisé par le modal de détail, l'en-tête de colonne projet et la toolbar
     de texte riche, qui avaient chacun leur propre implémentation. */
  .ibtn{width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;
        font-size:var(--fs-lg);line-height:1;border-radius:var(--r-sm);
        background:var(--panel);border:1px solid var(--border);color:var(--muted);}
  .ibtn:hover{background:var(--hover);}
  /* Icône en blanc sur fond uni coloré : le teal
     ne laisse pas le choix d'une encre foncée pour un glyphe texte comme "↺"
     sans casser la règle demandée — contraste mesuré ~3:1, acceptable pour un
     pictogramme isolé (pas du texte de lecture). */
  .ibtn.on{background:var(--green);color:var(--on-green);border-color:transparent;}
  .ibtn.primary{background:var(--blue);color:var(--on-blue);border-color:transparent;}
  .ibtn.primary:hover{background:color-mix(in srgb,var(--blue) 88%,#000);}
  .ibtn-sm{width:24px;height:24px;font-size:var(--fs-sm);}
  .ibtn-auto{width:auto;padding:0 var(--sp-2);gap:var(--sp-1);font-size:var(--fs-sm);}
  /* Variante posée sur un fond coloré (en-tête de colonne projet) */
  .ibtn-plain{background:transparent;border-color:transparent;color:inherit;opacity:.65;}
  .ibtn-plain:hover{background:var(--hover);opacity:1;}
  /* Variante "encre" : le glyphe lui-même porte le sens (G / S / B de la toolbar) */
  .ibtn-ink{color:var(--text);}
  .ibtn-ink.b{font-weight:800;}
  .ibtn-ink.u{text-decoration:underline;}
  .ibtn-ink.s{text-decoration:line-through;}

  /* ---------- Badges : une seule base + modificateurs de couleur ----------
     Logique de couleur unique dans toute l'app : gris = état normal,
     vert = résolu, rouge = exception à traiter (en retard / info manquante).
     Un état normal n'est jamais coloré. */
  .badge{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);font-weight:700;
         padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;line-height:1.4;}
  .badge-outline{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--border);}
  /* Les couleurs de la charte PE sont claires (jaune, teal, rouge corail) : les
     utiliser comme couleur de TEXTE sur un fond teinté donnerait un contraste
     de ~2:1, illisible. Elles servent donc d'aplat, avec l'encre foncée par
     dessus — rendu plat et carré, cohérent avec PE. */
  .badge-neutral{background:var(--neutral-bg);color:var(--muted);}

  /* Pastille de projet — même rendu dans les 3 vues (carte, tableau, commentaires).
     `white-space:nowrap` + `text-overflow:ellipsis` : un nom de projet long ne doit
     jamais passer sur 2 lignes (sinon la hauteur du bloc varie d'une carte à
     l'autre selon la longueur du nom, cf. demande d'égalisation). */
  .tag-project{display:inline-block;width:var(--project-chip-w);font-size:var(--fs-xs);font-weight:700;padding:2px var(--sp-2);
               border-radius:var(--r-sm);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
               vertical-align:middle;}

  /* ---------- Édition rapide en ligne (admin) ----------
     Contrôles natifs posés directement sur la carte / la ligne de tableau.
     Gabarit aligné sur celui des badges (même taille, même rayon) mais avec
     une bordure et un curseur pointeur pour rester identifiables comme
     interactifs — un badge ne se clique pas, un `.qe` si. */
  .qe{font-size:var(--fs-xs);font-weight:600;font-family:inherit;color:var(--text);
      background:var(--panel);border:1px solid var(--border);border-radius:var(--r-sm);
      padding:2px var(--sp-1);line-height:1.5;cursor:pointer;min-width:0;max-width:100%;}
  .qe:hover{border-color:var(--blue);}
  .qe:focus{outline:2px solid var(--blue);outline-offset:-1px;}
  /* `.qe-project` est un <select> natif : le navigateur réserve en interne une
     zone pour sa flèche, non comptée dans --project-chip-w (calculée pour du
     texte simple) — sans cette marge le texte le plus long restait tronqué. `.tag-project` (span en lecture seule) n'a pas cette flèche,
     garde la largeur exacte de --project-chip-w. */
  .qe-project{font-weight:700;border-color:transparent;box-shadow:inset 0 0 0 1px var(--border);width:calc(var(--project-chip-w) + 16px);}
  /* Responsable + date toujours sur UNE seule ligne — avant, ils
     partaient chacun sur leur propre ligne dès qu'une colonne de board devenait
     trop étroite pour leur largeur fixe combinée (`--resp-chip-w` + 118px),
     et ce quel que soit le contenu de la description (dette notée en Init-21,
     signalée toujours présente par Antoine). `.qe-line` force le non-retour à
     la ligne ; `.qe-resp` devient flexible et rétrécit (ellipsis) en priorité,
     `.qe-date` garde sa largeur fixe (une date tronquée serait illisible).
     `--resp-chip-w` reste calculée (TODO_syncRespChipWidth) et sert de
     largeur confortable par défaut, mais n'est plus une largeur imposée. */
  .qe-resp{flex:1 1 auto;min-width:0;width:100%;max-width:calc(var(--resp-chip-w) + 16px);
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .qe-date{width:118px;flex-shrink:0;}
  .qe-date.is-overdue{color:var(--red-ink);font-weight:700;}
  .qe-wrap{display:inline-flex;align-items:center;gap:var(--sp-1);min-width:0;max-width:100%;}
  /* Titre éditable en ligne — même gabarit que .task-title,
     mais interactif (`.qe`) : bordure visible uniquement au survol/focus pour
     ne pas alourdir visuellement la carte au repos. */
  .qe-title{display:block;width:100%;font-size:var(--fs-md);font-weight:600;font-family:inherit;padding:2px 6px;margin:-2px -6px;
            border-color:transparent;background:transparent;box-shadow:none;resize:none;overflow:hidden;
            white-space:normal;word-break:break-word;line-height:1.35;appearance:none;-webkit-appearance:none;}
  .qe-title:hover, .qe-title:focus{border-color:var(--border);background:var(--panel);}
  .qe-title:focus{border-color:var(--blue);}
  .qe-title.done{color:var(--muted);text-decoration:line-through;}
  #taskList.compact .qe-title{font-size:var(--fs-sm);}
  .task-modal .qe-title{font-size:var(--fs-xl);font-weight:700;margin:0 20px var(--sp-1) -6px;padding:2px 6px;line-height:1.3;}
  /* Description éditable — même logique transparente au repos que
     .qe-title. Carte réduite : gabarit proche de l'ancien `.task-preview`
     (fs-sm, encre atténuée, ~2 lignes visibles). Modal : gabarit proche de
     l'ancien `.task-desc` (fs-md, encre pleine, plus de hauteur). */
  .qe-desc{display:block;width:100%;font-family:inherit;resize:none;overflow-y:auto;
           border-color:transparent;background:transparent;box-shadow:none;appearance:none;-webkit-appearance:none;}
  .qe-desc:hover, .qe-desc:focus{border-color:var(--border);background:var(--panel);}
  .qe-desc:focus{border-color:var(--blue);}
  .qe-desc::placeholder{color:var(--muted);opacity:.7;}
  .task-head .qe-desc{font-size:var(--fs-sm);color:var(--muted);line-height:1.4;min-height:2.6em;max-height:5.6em;
                       padding:2px 6px;margin:2px -6px 0;}
  /* Description en modal : plus de place, resize vertical réactivé (pratique
     pour une longue description) — seule variante où le picto de poignée natif
     du navigateur a du sens visuellement (zone clairement dédiée, pas une
     carte compacte). */
  .qe-desc-modal{font-size:var(--fs-md);color:var(--text);line-height:1.5;min-height:90px;max-height:280px;
                  padding:8px 10px;margin:var(--sp-4) 0;resize:vertical;}

  /* Texte secondaire / zones vides / erreurs inline */
  .hint{font-size:var(--fs-sm);color:var(--muted);}
  .field-error{color:var(--red-ink);font-size:var(--fs-sm);margin-top:var(--sp-1);}

  /* ---------- Groupe de boutons à état actif (segmented control) ----------
     Partagé par le sélecteur du login, la nav de la sidebar et le sélecteur de vue. */
  .seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;background:var(--panel);}
  .seg button{background:transparent;color:var(--muted);border-radius:0;padding:7px var(--sp-3);font-size:var(--fs-md);}
  .seg button + button{border-left:1px solid var(--border);}
  .seg button:hover{background:var(--hover);}
  .seg button.active{background:var(--blue-bg);color:var(--blue);}
  .seg-full{display:flex;width:100%;}
  .seg-full button{flex:1;padding:10px;}

  /* ---------- Login screen ----------
     Refonte visuelle Init-13 : fond dégradé deux tons, carte en élévation
     (ombre) plutôt qu'une bordure 1px, indicateur d'onglet qui glisse.
     Aucun changement d'interaction : mêmes id, mêmes handlers. */
  #loginScreen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:500;padding:56px 20px;overflow:auto;
               /* même fond que PDF Comp / PDF Éditeur : aplat + deux taches floues (violet en haut à droite, bleu en bas à gauche) */
               background:
                 radial-gradient(circle 380px at calc(100% - 80px) 80px, rgba(124,92,212,.10), transparent 100%),
                 radial-gradient(circle 380px at 80px calc(100% - 80px), rgba(68,104,230,.11), transparent 100%),
                 var(--bg);}
  .login-wrap{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;max-width:560px;margin:auto;}
  .login-back{align-self:flex-start;background:none;border:none;padding:8px 6px;color:var(--muted);
              font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;}
  .login-back:hover{color:var(--text);}
  .login-head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
  .login-card{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:28px;width:100%;
              box-shadow:0 1px 2px rgba(38,34,31,.04), 0 24px 48px -12px rgba(38,34,31,.1);}
  .login-mark{display:block;}
  .login-mark img{height:30px;width:auto;display:block;}
  .login-mark img.login-mark-dark{display:none;}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .login-mark-light{display:none;}
    :root:not([data-theme="light"]) .login-mark img.login-mark-dark{display:block;} }
  :root[data-theme="dark"] .login-mark-light{display:none;}
  :root[data-theme="dark"] .login-mark img.login-mark-dark{display:block;}
  .login-head h1{font-size:32px;font-weight:700;letter-spacing:-.015em;margin:0;}
  .login-head .sub{color:var(--muted);font-size:14px;line-height:1.5;}
  /* Indicateur actif qui glisse d'un onglet à l'autre. Le `:has()` lit l'état
     posé par TODO_switchLoginTab sur les boutons : aucun JS ajouté. Si le
     navigateur ne supporte pas `:has()`, l'onglet actif reste identifiable par
     la couleur de son libellé (dégradation propre). */
  .login-toggle{position:relative;margin-bottom:22px;background:var(--bg);border-color:var(--border);padding:3px;}
  .login-toggle::before{content:"";position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);
                        background:var(--panel);border-radius:var(--r-sm);box-shadow:var(--shadow);
                        transition:transform .25s cubic-bezier(.4,0,.2,1);}
  .login-toggle:has(#tabAdmin.active)::before{transform:translateX(100%);}
  .login-toggle button{position:relative;z-index:1;background:transparent;font-size:var(--fs-sm);font-weight:700;transition:color .2s;}
  .login-toggle button + button{border-left:none;}
  .login-toggle button:hover{background:transparent;color:var(--text);}
  .login-toggle button.active{background:transparent;color:var(--blue);}
  .login-hint{margin:-12px 0 18px;padding:10px 12px;border-radius:var(--r-sm);background:var(--blue-bg);color:var(--text);font-size:var(--fs-sm);line-height:1.45;}
  .login-hint[hidden]{display:none;}
  .login-pane{display:none;}
  .login-pane.active{display:block;}
  .login-pane label{display:block;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
                    color:var(--muted);margin-bottom:6px;}
  .login-pane select, .login-pane input{width:100%;padding:11px var(--sp-3);border:1px solid var(--border);border-radius:var(--r-sm);
                                        font-size:var(--fs-md);font-family:inherit;background:var(--panel);margin-bottom:var(--sp-4);
                                        transition:border-color .2s, box-shadow .2s;}
  .login-pane select:focus, .login-pane input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg);}
  .login-pane button.submit{width:100%;padding:11px;font-size:var(--fs-lg);transition:background .2s, transform .1s;}
  .login-pane button.submit:active{transform:translateY(1px);}
  .login-foot{margin-top:var(--sp-4);text-align:center;}

  /* ---------- Barre latérale (refonte) : menu déployé, repliable en rail d'icônes ---------- */
  .sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--side);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:2px;padding:12px 10px;z-index:20;
           position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;overflow-x:hidden;}
  .brand{display:flex;align-items:center;gap:10px;padding:2px 6px 14px;}
  .logo{width:34px;height:34px;border-radius:9px;background:var(--blue);color:var(--on-blue);display:grid;place-items:center;font:800 13px var(--mono);flex:none;}
  .brand b{display:block;font-size:var(--fs-lg);line-height:1.2;} .brand small{display:block;color:var(--faint);font:11px var(--mono);}
  .side-nav{display:flex;flex-direction:column;gap:2px;}
  .nv{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;color:var(--muted);width:100%;text-align:left;font-weight:500;font-size:var(--fs-md);white-space:nowrap;background:transparent;}
  .nv:hover{background:var(--hover);color:var(--text);}
  .nv.active{background:var(--panel);color:var(--text);font-weight:600;box-shadow:inset 0 0 0 1px var(--border);}
  .nv.active .ico{color:var(--blue);}
  .nv .n{margin-left:auto;font:12px var(--mono);color:var(--faint);}
  .nv .nav-badge{margin-left:auto;background:var(--yellow);color:#463f00;padding:0 6px;font-family:var(--mono);}
  .ico{flex:none;}
  .sec{margin:18px 10px 6px;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap;}
  .pdot{width:9px;height:9px;border-radius:3px;flex:none;margin:0 4px;}
  .col-btn{margin:6px 0 0;display:flex;align-items:center;gap:10px;padding:7px 10px;color:var(--faint);border-radius:9px;font-size:var(--fs-sm);white-space:nowrap;background:transparent;width:100%;font-weight:500;}
  .col-btn:hover{background:var(--hover);color:var(--muted);}
  .side-user{border-top:1px solid var(--border);padding-top:var(--sp-3);margin-top:var(--sp-2);}
  .me{display:flex;align-items:center;gap:10px;white-space:nowrap;margin-bottom:var(--sp-2);}
  .me b{display:block;font-size:var(--fs-md);line-height:1.2;} .me small{font-size:var(--fs-sm);color:var(--faint);}
  .av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;font:700 11px/1 var(--font);letter-spacing:0;padding:0;background:var(--panel);color:var(--text);border:1px solid var(--text);}
  .side-user > button{width:100%;display:flex;align-items:center;justify-content:flex-start;text-align:left;padding-left:9px;} /* texte calé sur le picto flèche (.col-btn : padding 10px) */
  /* Menu replié : rail d'icônes de 64px (le bandeau d'actions groupées suit via --sidebar-w) */
  body.side-slim{--sidebar-w:64px;}
  body.side-slim .brand b, body.side-slim .brand small, body.side-slim .nv .t, body.side-slim .nv .n, body.side-slim .nv .nav-badge,
  body.side-slim .sec, body.side-slim .me > div, body.side-slim .col-btn .t, body.side-slim .side-user > button{display:none;}
  body.side-slim .nv, body.side-slim .col-btn{justify-content:center;padding:10px 0;}
  body.side-slim .brand, body.side-slim .me{justify-content:center;padding-left:0;padding-right:0;}
  body.side-slim #sideProjects .nv{padding:10px 0;}
  body.side-slim .col-btn .ico{transform:rotate(180deg);}

  /* ---------- Barre du haut (titre de la page + sélecteur d'affichage) ---------- */
  .topbar{display:flex;align-items:center;gap:14px;height:56px;margin:-22px -28px 18px;padding:0 28px;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:15;}
  .topbar h1{font-size:var(--fs-xl);margin:0;font-weight:700;letter-spacing:-.01em;white-space:nowrap;}
  .topbar .seg{background:var(--hover);padding:3px;border-radius:10px;}
  .topbar .seg button{border-radius:7px;padding:5px 11px;font-size:var(--fs-md);display:inline-flex;align-items:center;gap:6px;}
  .topbar .seg button + button{border-left:none;}
  .topbar .seg button.active{background:var(--panel);color:var(--text);box-shadow:0 0 0 1px var(--border);}

  /* ---------- Main ---------- */
  main{flex:1;min-width:0;padding:var(--sp-5) 28px 80px;max-width:none;}
  /* flex-wrap:nowrap par défaut : l'écran de référence de l'outil est
     1920×1080 (poste d'Antoine, voir plus bas), la barre tient sur une ligne
     à cette taille sans rien réduire. En dessous, la media query plus bas
     repasse en flex-wrap:wrap. */
  /* Règle d'uniformité de la barre de filtres : tout
     contrôle de la barre (bouton .seg, <select>, <input>, bouton texte) partage
     la même hauteur explicite (--filter-h) et la même taille de police
     (--fs-md), plutôt qu'une hauteur déduite du padding — un <select> natif et
     un <button> contenant un emoji ne calculent pas leur hauteur intrinsèque de
     la même façon à padding égal (constaté Init-23 : jusqu'à 12px d'écart).
     Les <select> sont en gras comme les boutons ; le champ de recherche (texte
     libre tapé par l'utilisateur) reste en graisse normale, seule exception. */
  .filters select, .filters input, .filters .seg button, .filters .btn-primary, .filters .btn-ghost{
    height:var(--filter-h);box-sizing:border-box;font-size:var(--fs-md);
  }
  .filters select, .filters input{padding:0 var(--sp-3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--panel);color:var(--text);}
  .filters select{font-weight:600;}
  .filters input{flex:1;min-width:180px;}
  .filters .seg button{padding:0 var(--sp-3);display:inline-flex;align-items:center;justify-content:center;}
  .filters .btn-primary, .filters .btn-ghost{padding:0 var(--sp-4);}
  /* Le filtre de date réutilise le composant `.seg` (état actif bleu pâle) —
     pas de couleur d'alerte : un filtre actif est un état normal, pas une
     exception (règle de couleur Init-12). Même hauteur que le reste de la
     barre (--filter-h) : avant Init-23, une police réduite (--fs-sm) sur ces
     3 boutons leur donnait une hauteur visiblement différente des autres. */
  /* Écran de référence de l'outil : 1920×1080 (poste d'Antoine). La barre de
     filtres tient nativement sur une seule ligne à cette taille (mesuré
     Init-23, sans avoir besoin de réduire la police — seuls le `gap` et le
     padding ont été resserrés ci-dessus) ; en dessous, elle repasse en
     empilement multi-lignes (flex-wrap:wrap, comportement par défaut ci-dessus). */

  /* ---------- Compteurs cliquables (filtrent la vue active) ---------- */
  #kpis{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .kpis{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
  .kpi{display:flex;align-items:baseline;gap:9px;color:var(--muted);padding:6px 14px 6px 12px;border-radius:11px;border:1px solid transparent;background:transparent;font-size:var(--fs-md);font-weight:500;}
  .kpi:hover{background:var(--hover);}
  .kpi b{font:600 22px var(--mono);color:var(--text);letter-spacing:-.02em;}
  .kpi.late b{color:var(--red-ink);}
  .kpi.clos b{box-shadow:inset 0 -6px 0 color-mix(in srgb,var(--yellow) 75%,transparent);}
  .kpi.on{background:var(--panel);border-color:var(--text);color:var(--text);font-weight:600;}
  .kpi .clr{display:none;color:var(--faint);font-size:var(--fs-sm);}
  .kpi.on .clr{display:inline;}

  /* ---------- Ruban de semaine (Init-40) : 7 pilules .kpi.day (aujourd'hui → +6 jours) dans #weekRibbonRow,
     pleine largeur sous .toprow, vue "par date" admin uniquement (TODO_renderWeekRibbonRow).
     Largeur fixe identique (--day-chip-w, posée par TODO_syncDayChipWidth) : les jours complets
     ont des longueurs très variables. Sélection = même traitement que .kpi.on ; "aujourd'hui" garde
     son fond bleu et change seulement de bordure quand il est sélectionné. */
  .week-ribbon-row{width:100%;margin:12px 0 5px;}
  .week-ribbon{display:flex;gap:4px;align-items:center;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
  .kpi.day{flex:0 0 var(--day-chip-w);width:var(--day-chip-w);flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 10px;text-align:center;box-sizing:border-box;border:1px solid transparent;cursor:pointer;user-select:none;}
  .kpi.day:hover{background:var(--hover);}
  .kpi.day b{font:600 12px var(--mono);letter-spacing:0;color:var(--muted);}
  .kpi.day .cnt{font-size:10px;font-weight:700;color:var(--muted);}
  .kpi.day.on{background:var(--panel);border-color:var(--text);}
  .kpi.day.today{background:var(--blue);border-color:var(--blue);}
  .kpi.day.today b, .kpi.day.today .cnt{color:var(--on-blue);}
  .kpi.day.today .cnt{opacity:.85;}
  .kpi.day.today.on{background:var(--blue);border-color:var(--on-blue);}

  /* ---------- Vue par date ---------- */
  #taskList.date-view{display:block;}
  .lg{margin-bottom:22px;}
  /* En-tête de groupe : MÊME style que .project-group-head .pg-name (13 px, 700, encre) dans les 3 vues ; seul « En retard » est en rouge (exception) */
  /* Les groupes de la vue par date utilisent .project-group-head (mêmes classes que les colonnes Projets/Statuts) : alignement identique d'une vue à l'autre */
  .lg.late .project-group-head .pg-name{color:var(--red-ink);}
  .lrows{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;}
  .lr{display:grid;grid-template-columns:20px minmax(0,1fr) auto auto var(--project-chip-w) 74px auto;gap:14px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--border);cursor:pointer;}
  .lr:last-child{border-bottom:0;}
  .lr:hover{background:var(--hover);}
  .lti{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .lti small{color:var(--faint);font-weight:500;margin-left:8px;font-size:var(--fs-sm);}
  .lr.is-fait .lti{color:var(--muted);font-weight:500;}
  .lr.is-cloturee{filter:grayscale(.9);opacity:.75;}
  .lr.is-cloturee .lti{text-decoration:line-through;color:var(--muted);font-weight:500;}
  .ind{display:inline-flex;gap:10px;align-items:center;color:var(--faint);font:12px var(--mono);white-space:nowrap;}
  .ldt{font:12.5px var(--mono);color:var(--muted);text-align:right;white-space:nowrap;}
  .ldt.late{color:var(--red-ink);font-weight:600;}
  /* tâche en retard : liseré rouge à gauche + pastille « En retard » + date rouge */
  .is-late.lr{box-shadow:inset 3px 0 0 var(--red);}
  .late-pill{display:inline-flex;align-items:center;gap:5px;font:700 12px var(--font);color:var(--red-ink);border:1px solid color-mix(in srgb,var(--red) 45%,transparent);border-radius:99px;padding:1px 9px;white-space:nowrap;}
  .av.s{width:22px;height:22px;font-size:9px;}
  .lr .tag-project{width:auto;justify-self:start;max-width:100%;border-radius:99px;padding:2px 10px;}

  /* ---------- Vue tableau ---------- */
  .task-table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;font-size:var(--fs-md);}
  .task-table th, .task-table td{padding:9px var(--sp-3);text-align:left;border-bottom:1px solid var(--border);}
  .task-table th{background:var(--bg);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.03em;color:var(--muted);cursor:pointer;white-space:nowrap;}
  .task-table th:hover{color:var(--text);}
  .task-table tbody tr{cursor:pointer;}
  .task-table tbody tr:hover{background:var(--hover);}
  .task-table tbody tr:last-child td{border-bottom:none;}
  .row-check, .card-check{width:16px;height:16px;}

  /* ---------- Barre d'actions groupées ---------- */
  .bulk-bar{position:fixed;bottom:20px;left:calc(var(--sidebar-w) + var(--sp-5));right:var(--sp-5);background:var(--text);color:var(--bg);border-radius:var(--r-md);padding:10px var(--sp-4);display:flex;align-items:center;gap:10px;z-index:90;box-shadow:var(--shadow);}
  .bulk-bar span{font-size:var(--fs-md);font-weight:600;margin-right:auto;}
  .bulk-bar button{font-size:var(--fs-sm);}
  /* Sur le fond sombre de la barre, `.btn-ghost` (texte/bordure gris clair par
     défaut) devenait quasi illisible — texte et pictos texte passés
     en blanc, bordure éclaircie, `.btn-primary` (Clôturer) inchangé (déjà
     blanc sur bleu). */
  .bulk-bar .btn-ghost{color:var(--bg);border-color:color-mix(in srgb,var(--bg) 40%,transparent);}
  .bulk-bar .btn-ghost:hover{background:color-mix(in srgb,var(--bg) 14%,transparent);border-color:var(--bg);}

  /* ---------- Board : 1 colonne = 1 projet ---------- */
  #taskList{display:grid;gap:var(--sp-4);align-items:start;}
  @media (max-width:700px){ #taskList{grid-template-columns:1fr !important;} }
  /* `.task`/`.task-head` sont en colonne flex partout : `.card-quick-actions`
     peut ainsi se caler tout en bas via `margin-top:auto`, même quand la
     hauteur de la carte dépasse son contenu naturel (égalisation de hauteur,
     TODO_equalizeBoardRows()). */

  /* ---------- Page Projets : mêmes tuiles .task que la vue Urgentes ---------- */
  #projectsList{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill, minmax(260px,1fr));align-items:stretch;}
  @media (max-width:700px){ #projectsList{grid-template-columns:1fr !important;} }
  /* Hauteur naturelle du contenu : c'est la page entière qui défile, pas
     chaque colonne (retour assumé sur le scroll interne d'Init-10, voir
     CLAUDE.md Init-13 — le déséquilibre de hauteur entre colonnes redevient
     un compromis accepté). */
  .board-column{display:flex;flex-direction:column;gap:10px;min-width:0;}
  /* Vue Statuts (kanban) : 3 colonnes fixes, cartes déplaçables par la poignée */
  .kanban-col{min-height:240px;border-radius:var(--r-sm);}
  .kanban-col.drop-target{outline:2px dashed var(--blue);outline-offset:2px;}
  .kanban-empty{color:var(--muted);font-size:var(--fs-sm);padding:var(--sp-3);text-align:center;}
  .drag-handle{position:absolute;bottom:6px;right:8px;z-index:2;cursor:grab;color:var(--muted);font-size:var(--fs-lg, 18px);line-height:1;padding:2px 4px;user-select:none;}
  .drag-handle:active{cursor:grabbing;}
  /* Liens joints (modal de détail) */
  .attachment{display:flex;align-items:center;gap:var(--sp-2);padding:6px 0;font-size:var(--fs-md);border-bottom:1px dashed var(--border);}
  .attachment a{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--blue);}
  .add-row input.att-label{flex:0 0 32%;}
  /* Journal d'activité (admin) */
  #activityList .task-table tbody tr{cursor:default;}
  #activityList .act-when{white-space:nowrap;color:var(--muted);}
  #activityList .act-task a{color:var(--blue);cursor:pointer;}
  /* Le nom du projet peut être long dans une colonne étroite : l'en-tête doit
     pouvoir passer à la ligne, sinon il déborde et fait apparaître une barre de
     défilement horizontale sur toute la colonne. */
  .project-group-head{display:flex;align-items:center;gap:10px;padding:0 4px 8px;min-width:0;min-height:40px;}   /* hauteur mini commune : le texte reste à la même hauteur que la tête de colonne ait ou non des boutons (renommer / supprimer) */
  .project-group-head .sw, .project-group-head .sw-gap{width:10px;height:10px;border-radius:3px;flex:none;}
  .project-group-head .pg-name{font-size:var(--fs-md);font-weight:700;min-width:0;overflow-wrap:anywhere;}
  .project-group-head .pg-count{font:12px var(--mono);color:var(--faint);margin-left:auto;}
  .project-group-head .pg-actions{display:flex;gap:var(--sp-1);}
  .project-group-head .ibtn-plain{opacity:.55;}
  .project-group-head .ibtn-plain:hover{opacity:1;}
  .unread-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-left:3px;}
  .nav-badge{background:var(--red);color:var(--text);border-radius:var(--r-pill);padding:1px 6px;font-size:var(--fs-xs);font-weight:800;margin-left:6px;}

  .task{position:relative;background:var(--panel);border:1px solid var(--border);border-left:4px solid var(--border);border-radius:var(--r-md);overflow:hidden;cursor:pointer;transition:box-shadow .15s;min-width:0;flex-shrink:0;display:flex;flex-direction:column;}
  .task:hover{box-shadow:var(--shadow);}
  .task.selected{box-shadow:0 0 0 2px var(--blue);}
  .card-check{position:absolute;top:var(--sp-3);right:var(--sp-3);z-index:2;}
  .task-head{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);flex:1;}
  .task-title{flex:1;font-size:var(--fs-md);font-weight:600;min-width:100%;}
  /* `.compact` : posée sur #taskList par TODO_render() à partir de
     6 colonnes de board (sur un maximum de 9) — réduit la police des cartes
     pour qu'elles restent lisibles, sans jamais toucher l'alignement en
     hauteur (TODO_equalizeBoardRows() mesure après ce changement de taille). */
  #taskList.compact .task-title{font-size:var(--fs-sm);}
  .task-title.done{color:var(--muted);text-decoration:line-through;}
  .date-overdue{color:var(--red-ink) !important;font-weight:700;}

  .task-desc{font-size:var(--fs-md);color:var(--text);margin:var(--sp-4) 0;line-height:1.5;white-space:pre-wrap;}

  /* ---------- Zone "information demandée" (tâches de type info) ---------- */
  .rt-toolbar{display:flex;gap:var(--sp-1);margin-bottom:6px;}
  .rt-box{min-height:110px;max-height:300px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r-sm);padding:10px var(--sp-3);font-size:var(--fs-md);line-height:1.5;}
  .rt-box:focus{outline:2px solid var(--blue);outline-offset:-1px;}
  .rt-box:empty:before{content:attr(data-placeholder);color:var(--muted);}
  .rt-box ul{margin:var(--sp-1) 0;padding-left:20px;}
  .info-link-row{display:flex;gap:var(--sp-2);align-items:center;margin-top:10px;}
  .info-link-row input{flex:1;padding:7px 9px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--fs-md);}
  .info-link-current{font-size:var(--fs-sm);margin-top:6px;}
  .info-link-current a{color:var(--blue);font-weight:600;}

  /* ---------- Task detail modal (floutage) ---------- */
  .task-modal-backdrop{position:fixed;inset:0;background:rgba(20,25,35,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:150;padding:var(--sp-5);}
  .task-modal-backdrop.show{display:flex;}
  .task-modal{background:var(--panel);border-radius:var(--r-md);padding:26px;width:100%;max-width:640px;max-height:88vh;overflow:auto;position:relative;box-shadow:var(--shadow);}
  .task-modal h2{margin:0 26px var(--sp-1) 0;font-size:var(--fs-xl);}

  .section-label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.03em;margin:var(--sp-4) 0 var(--sp-2);}
  .add-row{display:flex;gap:var(--sp-2);margin-top:var(--sp-2);align-items:center;}
  .add-row input, .add-row select{flex:1;padding:6px 9px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--fs-md);}

  .comment{background:var(--bg);border-radius:var(--r-sm);padding:var(--sp-2) 10px;margin-bottom:6px;font-size:var(--fs-md);}
  .comment-meta{font-size:var(--fs-xs);color:var(--muted);margin-bottom:2px;font-weight:600;}
  .comment-form{margin-top:var(--sp-2);}
  .comment-form .as-who{font-size:var(--fs-xs);color:var(--muted);}
  .comment-box{width:100%;margin-top:var(--sp-2);}
  /* Mentions @nom (Lot 3, 3.3) : menu d'autocomplétion sous la zone de commentaire + mise en forme de la mention affichée. */
  .comment-input-wrap{position:relative;}
  .mention-menu{position:absolute;z-index:5;left:0;right:0;top:100%;margin:2px 0 0;padding:4px;list-style:none;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow);max-height:180px;overflow:auto;}
  .mention-menu li{margin:0;}
  .mention-menu button{display:block;width:100%;text-align:left;padding:6px 8px;border-radius:6px;background:none;border:none;color:var(--text);font:600 13px var(--font);cursor:pointer;}
  .mention-menu button:hover, .mention-menu button:focus{background:var(--hover);}
  .mention{background:var(--blue-bg);color:var(--mention-ink);padding:0 4px;border-radius:4px;font-weight:700;}
  .comment-box textarea{width:100%;padding:var(--sp-2) 10px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--fs-md);font-family:inherit;resize:vertical;}
  .comment-box .comment-box-actions{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:6px;}

  .empty{text-align:center;color:var(--muted);padding:40px;font-size:var(--fs-md);}
  /* Message dédié quand le board d'un individu (utilisateur non-admin) ne contient
     plus aucune tâche assignée — distinct du message générique "aucun résultat de
     filtre", nettement plus visible. */
  .empty-big{font-size:var(--fs-3xl);font-weight:800;color:var(--text);padding:70px 40px;}

  /* ---------- Tooltip instantané (sans le délai du `title` natif) ----------
     Utilisé sur les boutons d'action rapide de la carte réduite (valider,
     commenter). `data-tip` porte le texte, aucune transition = apparition
     immédiate au survol/focus. */
  [data-tip]{position:relative;}
  [data-tip]:hover::after, [data-tip]:focus-visible::after{
    content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
    background:var(--text);color:var(--bg);font-size:var(--fs-xs);font-weight:600;padding:4px 9px;
    border-radius:var(--r-sm);white-space:nowrap;z-index:300;pointer-events:none;box-shadow:var(--shadow);
  }
  [data-tip]:hover::before, [data-tip]:focus-visible::before{
    content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
    border:5px solid transparent;border-top-color:var(--text);margin-bottom:-3px;z-index:300;pointer-events:none;
  }

  /* ---------- Actions rapides sur la carte réduite (valider / commenter) ----------
     `margin-top:auto` cale la rangée tout en bas de `.task-head` (flex
     colonne, `flex:1`) — même position, en bas à gauche, quel que soit le
     contenu au-dessus (avec ou sans aperçu, sous-tâches, commentaires) et même
     quand la carte est étirée par l'égalisation de hauteur entre colonnes. */

  /* ---------- Comments view ---------- */
  .comment-item{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin-bottom:10px;}
  .comment-item .ci-head{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);color:var(--muted);margin-bottom:6px;}
  .comment-item .ci-author{font-weight:700;color:var(--text);}
  .comment-item .ci-text{font-size:var(--fs-md);margin-bottom:var(--sp-2);}
  .comment-item .ci-link{font-size:var(--fs-sm);color:var(--blue);font-weight:600;text-decoration:none;}
  .comment-item .ci-link:hover{text-decoration:underline;}
  /* Zone "tâches terminées" : moins actionnable, donc dé-emphasée (pas colorée —
     la couleur reste réservée aux exceptions, cf. Init-12). */
  .comments-closed{margin-top:var(--sp-5);border-top:1px solid var(--border);padding-top:var(--sp-2);opacity:.68;}
  .comments-closed:hover{opacity:1;}
  .comments-closed .comment-item{background:var(--bg);}

  .modal-backdrop{position:fixed;inset:0;background:rgba(20,25,35,.45);display:none;align-items:center;justify-content:center;z-index:160;padding:20px;}
  .modal-backdrop.show{display:flex;}
  .modal{background:var(--panel);border-radius:var(--r-md);padding:var(--sp-5);width:100%;max-width:440px;max-height:90vh;overflow:auto;box-shadow:var(--shadow);}
  .modal h2{margin:0 0 var(--sp-4);font-size:var(--fs-xl);}
  .field{margin-bottom:var(--sp-3);}
  .field label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--muted);margin-bottom:var(--sp-1);}
  .field input, .field select, .field textarea{width:100%;padding:var(--sp-2) 10px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--fs-md);font-family:inherit;}
  .field textarea{resize:vertical;min-height:60px;}
  .modal-actions{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-4);}

  .toast{position:fixed;bottom:20px;left:calc(50% + var(--sidebar-w)/2);transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 18px;border-radius:var(--r-sm);font-size:var(--fs-md);display:none;z-index:700;}
  .toast.show{display:block;}
  .wk-hello{margin:2px 0 18px;} .wk-hello h2{font-size:var(--fs-2xl);margin:0 0 4px;} .wk-more{margin:-8px 0 22px;}
  .tbl-closed{margin-top:28px;}
  .toast .toast-undo{margin-left:14px;padding:2px 10px;border-radius:99px;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer;}
  .toast .toast-undo:hover{background:color-mix(in srgb,currentColor 15%,transparent);}

  /* =====================================================================
     REFONTE LOT 3 : tuiles (Projets, Statuts), tableau, filtres
     ===================================================================== */
  .spill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border-radius:99px;font-size:var(--fs-sm);font-weight:700;white-space:nowrap;line-height:1.4;}
  .spill i{width:8px;height:8px;border-radius:50%;border:2px solid currentColor;display:inline-block;}
  .spill.a_faire{background:var(--hover);color:var(--muted);}
  .spill.fait{background:color-mix(in srgb,var(--text) 12%,var(--panel));color:var(--text);}
  .spill.fait i{background:currentColor;}
  .spill.cloturee{background:color-mix(in srgb,var(--faint) 22%,var(--panel));color:var(--muted);}
  /* « En attente de précision » (Lot 3, 3.2) : pastille distincte, couleur « attention » (jamais le rouge du retard). */
  .spill.en_attente{background:var(--warn-bg);color:var(--warn-ink);}
  .spill.en_attente i{background:currentColor;}
  .abtn{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:9px;font:600 12.5px/1.2 var(--font);white-space:nowrap;border:1px solid var(--border);background:var(--panel);color:var(--text);box-shadow:0 1px 0 rgba(0,0,0,.05);}
  .abtn:hover{border-color:var(--text);}
  .abtn.lock{background:var(--text);border-color:var(--text);color:var(--bg);}
  .abtn.warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 45%,transparent);color:var(--warn-ink);}
  .abtn.off{opacity:.45;box-shadow:none;}
  /* Bandeau d'alerte « en attente de précision » / « bloquée par » — carte réduite ET modal de détail. */
  .precision-banner{display:flex;align-items:flex-start;gap:8px;margin:6px 0;padding:7px 10px;border-radius:var(--r-sm);background:var(--warn-bg);color:var(--warn-ink);font-size:var(--fs-sm);line-height:1.4;}
  .precision-banner svg{flex:none;margin-top:1px;}
  .precision-banner b{font-weight:700;}
  .lg.warn .project-group-head .pg-name{color:var(--warn-ink);}
  .dep-ind{color:var(--warn-ink);}
  /* Vues = filtres enregistrés (Lot 3, 3.5, refonte 07/10/2026) : un seul bouton + menu. L’état actif se lit sur le bouton (nom, bleu, « modifiée »), dans le menu (✓) et dans une pastille sous la barre. */
  .vues{position:relative;}
  .fvues{height:var(--filter-h);display:inline-flex;align-items:center;gap:6px;padding:0 var(--sp-3);border:1px solid var(--border);border-radius:9px;background:var(--panel);color:var(--text);font:500 var(--fs-md) var(--font);cursor:pointer;white-space:nowrap;}
  .fvues:hover{border-color:var(--faint);}
  .fvues.on{border-color:var(--blue);font-weight:600;background-color:color-mix(in srgb,var(--blue) 8%,var(--panel));}
  .fvues #fVuesLbl{max-width:100px;overflow:hidden;text-overflow:ellipsis;}
  .fvues-mod{font-size:11px;font-weight:700;color:var(--blue);}
  .vues-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;width:320px;max-width:calc(100vw - 32px);background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;gap:2px;}
  .vues-menu[hidden]{display:none;}
  .vi{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:7px;font-size:var(--fs-sm);}
  .vi.act{background:color-mix(in srgb,var(--blue) 8%,var(--panel));}
  .vi-ck{width:14px;color:var(--blue);font-weight:700;flex:none;}
  .vi-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;border:0;background:none;color:var(--text);font:600 var(--fs-sm) var(--font);cursor:pointer;padding:6px 0;}
  .vi-name:hover{text-decoration:underline;}
  .vi-btn{flex:none;border:0;background:none;color:var(--muted);font:600 12px var(--font);cursor:pointer;padding:5px 7px;border-radius:5px;}
  .vi-btn:hover{background:var(--hover);color:var(--text);}
  .vi-btn.vi-del{color:var(--red-ink);background:var(--red-bg);}
  .vi-btn.vi-upd{color:var(--blue);}
  .vi-empty, .vi-count{color:var(--muted);}
  .vi-count{font-size:12px;padding-top:0;}
  .vi-sep{height:1px;background:var(--border);margin:4px 2px;}
  .vi-save{border:0;background:none;color:var(--blue);font:700 var(--fs-sm) var(--font);text-align:left;padding:8px 8px;border-radius:7px;cursor:pointer;}
  .vi-save:hover{background:var(--hover);}
  .vi-save:disabled{color:var(--muted);cursor:not-allowed;}
  .fchip-vue{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 8%,var(--panel));font-weight:600;}
  .stamp{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font:600 11px var(--mono);color:var(--muted);border:1px dashed var(--faint);border-radius:6px;padding:2px 8px;white-space:nowrap;}
  .pchip{display:inline-flex;align-items:center;padding:2px 9px;border-radius:99px;font-size:var(--fs-sm);font-weight:700;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}

  /* tuile */
  .task{border-left:1px solid var(--border);overflow:visible;cursor:pointer;}
  .task-head{padding:13px 14px 12px;gap:9px;}
  .task .pj{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap;}
  .task .pchip{flex:none;}
  .task:has(.card-check) .pj-state{margin-right:26px;}
  .task:has(.card-check) .pj{padding-right:24px;}
  .task .cf{flex-wrap:wrap;row-gap:4px;}
  .task .pj-sujet{color:var(--faint);font-size:var(--fs-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  .task .pj-state{margin-left:auto;flex:none;}
  #taskList.kanban .pj-state{display:none;}
  .task .t-title{font-size:var(--fs-md);font-weight:600;line-height:1.35;word-break:break-word;}
  .task .cf{display:flex;align-items:center;gap:12px;color:var(--faint);font:12px var(--mono);}
  .task .cf span{display:inline-flex;align-items:center;gap:4px;}
  .task .cf-right{margin-left:auto;gap:8px;}
  .task .t-act{margin-top:2px;}
  .task.selected{box-shadow:0 0 0 2px var(--text);}
  .task.is-late{box-shadow:inset 3px 0 0 var(--red);}
  .task.is-late:hover{box-shadow:inset 3px 0 0 var(--red),var(--shadow);}
  .task.is-cloturee{filter:grayscale(.9);opacity:.8;}
  .task.is-cloturee .t-title{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--muted);font-weight:500;}
  .task.is-fait .t-title{color:var(--text);}
  .drag-handle{bottom:10px;right:10px;}
  #taskList.kanban .task-head{padding-right:30px;}

  /* colonnes Statuts */
  .kanban-col[data-statut="cloturee"]{background:repeating-linear-gradient(135deg,transparent 0 9px,color-mix(in srgb,var(--text) 4%,transparent) 9px 10px);border-radius:14px;padding:0 10px 10px;}

  /* tableau */
  .task-table th{background:var(--hover);font:600 11px var(--mono);letter-spacing:.06em;color:var(--faint);padding:10px 12px;}
  .task-table th.sorted{color:var(--blue);}
  .task-table td{padding:9px 12px;vertical-align:middle;}
  .task-table td.t{font-weight:600;min-width:220px;max-width:380px;}
  .task-table tr.is-late td:first-child{box-shadow:inset 3px 0 0 var(--red);}
  .task-table tr.is-cloturee td{opacity:.7;}
  .task-table tr.is-cloturee td.t{text-decoration:line-through;font-weight:500;color:var(--muted);}
  .task-table .chipp{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--muted);white-space:nowrap;}
  .task-table .ldt{font:12.5px var(--mono);}

  /* filtres */
  .filters select, .filters input{border-radius:9px;background:var(--panel);font-weight:500;}
  .filters select{font-weight:500;}
  .lr .rowact{justify-self:end;}
  .lr .pchip{justify-self:start;}

  /* =====================================================================
     REFONTE LOT 4 : détail de la tâche en tiroir à droite
     ===================================================================== */
  .task-modal-backdrop{inset:56px 0 0 auto;width:min(460px,100%);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;align-items:stretch;justify-content:flex-end;pointer-events:none;z-index:40;}
  .task-modal-backdrop .task-modal{pointer-events:auto;}
  .task-modal{max-width:none;max-height:none;height:100%;width:100%;border-radius:0;border-left:1px solid var(--border);box-shadow:var(--shadow);padding:20px 24px 40px;background:var(--panel);}
  @media (min-width:1500px){
    body.drawer-open main{padding-right:calc(460px + 28px);}
    body.drawer-open .topbar{margin-right:calc(-460px - 28px);}
  }
  .task.open, .lr.open, .task-table tr.open td{background:color-mix(in srgb,var(--text) 5%,var(--panel));}
  .task.open{border-color:var(--faint);}
  .d-hd{display:flex;align-items:center;gap:8px;margin-bottom:12px;min-width:0;}
  .d-hd .pj-sujet{color:var(--muted);font-size:var(--fs-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  .d-hd .d-x{margin-left:auto;flex:none;}
  .d-hd .d-link{margin-left:auto;flex:none;} .d-hd .d-link + .d-x{margin-left:0;}
  .task-modal h2{font-size:21px;line-height:1.28;letter-spacing:-.015em;margin:0 0 16px;font-weight:700;}
  .task-modal .qe-title{font-size:21px;letter-spacing:-.015em;margin:0 0 12px -6px;}
  .state{display:flex;gap:10px;align-items:flex-start;padding:10px 11px;border-radius:10px;margin-bottom:10px;border:1px solid var(--border);background:var(--hover);}
  .state .si{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;flex:none;}
  .state b{display:block;font-size:12px;line-height:1.25;} .state small{color:var(--muted);font-size:11px;}
  .state.a_faire .si{background:var(--neutral-bg);color:var(--muted);}
  .state.fait{background:color-mix(in srgb,var(--text) 5%,var(--panel));border-color:var(--faint);}
  .state.fait .si{background:var(--text);color:var(--bg);}
  .state.cloturee{background:repeating-linear-gradient(135deg,transparent 0 9px,color-mix(in srgb,var(--text) 5%,transparent) 9px 10px),var(--hover);}
  .state.cloturee .si{background:var(--faint);color:var(--bg);}
  .acts{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
  .abtn.big{padding:8px 13px;font-size:11.5px;border-radius:8px;flex:1;justify-content:center;gap:6px;}
  .dkv{display:grid;grid-template-columns:100px 1fr;gap:9px 12px;font-size:var(--fs-md);align-items:center;margin-bottom:6px;}
  .dkv > :nth-child(odd){color:var(--faint);font-weight:600;}
  .dkv .late{color:var(--red-ink);font-weight:600;}
  .dkv .qe{font-size:var(--fs-md);padding:3px 6px;}
  .section-label{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin:22px 0 9px;}
  .d-foot{display:flex;gap:8px;margin-top:28px;padding-top:14px;border-top:1px solid var(--border);}

  /* =====================================================================
     REFONTE LOT 5 : pages secondaires, modales, connexion, filtres
     ===================================================================== */
  .tag-project{width:auto;max-width:100%;border-radius:99px;padding:2px 10px;font-size:var(--fs-sm);}
  .pcounts{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:var(--fs-md);}
  .pcounts b{font:600 20px var(--mono);color:var(--text);margin-right:5px;letter-spacing:-.02em;}

  /* =====================================================================
     BARRE DE FILTRES (refonte) : une ligne, recherche en tête, listes à puces d'état,
     filtres actifs rappelés en pastilles, nombre de résultats
     ===================================================================== */
  .filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px;}
  .filters input[type="text"], .filters input[type="search"]{flex:1 1 280px;min-width:220px;height:var(--filter-h);padding:0 var(--sp-3) 0 36px;border:1px solid var(--border);border-radius:9px;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a59d97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 12px center;font:500 var(--fs-md)/1 var(--font);color:var(--text);}
  .filters input::placeholder{color:var(--faint);font-weight:400;}
  .filters input:focus, .filters select:focus{outline:2px solid var(--blue);outline-offset:-1px;}
  .filters select.fsel{appearance:none;-webkit-appearance:none;height:var(--filter-h);padding:0 30px 0 12px;border:1px solid var(--border);border-radius:9px;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23756d68' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;font:500 var(--fs-md)/1 var(--font);color:var(--muted);cursor:pointer;max-width:190px;field-sizing:content;}
  .filters select.fsel:hover{border-color:var(--faint);}
  .filters select.fsel.on{border-color:var(--blue);color:var(--text);font-weight:600;background-color:color-mix(in srgb,var(--blue) 8%,var(--panel));}
  .filters .freset{height:var(--filter-h);padding:0 var(--sp-3);border-radius:9px;font-weight:600;color:var(--muted);background:transparent;border:1px solid transparent;display:none;}
  .filters .freset:hover{background:var(--hover);color:var(--text);}
  .filters .freset.show{display:inline-flex;align-items:center;}
  /* Écran large : la place de « Réinitialiser » est réservée en permanence (invisible tant qu'aucun filtre n'est posé),
     sinon son apparition fait passer la barre sur 2 lignes et décale les compteurs. */
  @media (min-width:901px){
    .filters .freset{display:inline-flex;align-items:center;visibility:hidden;}
    .filters .freset.show{visibility:visible;}
    /* listes plafonnées : le nom complet du filtre reste lisible dans la pastille sous la barre */
    .toprow .filters select.fsel{max-width:150px;overflow:hidden;text-overflow:ellipsis;}
    .toprow .filters #fSort{max-width:175px;}
    .toprow .filters input[type="search"]{flex-basis:168px;}
  }
  .fchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:16px;min-height:26px;}
  .fchip{display:inline-flex;align-items:center;gap:6px;padding:2px 4px 2px 10px;border-radius:99px;background:var(--hover);font-size:var(--fs-sm);font-weight:600;color:var(--text);}
  .fchip button{width:18px;height:18px;padding:0;border-radius:50%;background:transparent;color:var(--muted);font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center;}
  .fchip button:hover{background:var(--border);color:var(--text);}
  .fcount{margin-left:auto;font:12px var(--mono);color:var(--faint);}

  /* =====================================================================
     PASSE GÉNÉRALE (alignement sur la maquette)
     ===================================================================== */
  :root{--faint:#7a736d; --muted:#655e59; --red-ink:#c4403e;}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--faint:#968d86; --red-ink:var(--red);} }
  :root[data-theme="dark"]{--faint:#968d86; --red-ink:var(--red);}
  :focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
  .toprow{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:6px;}
  .toprow #kpis{flex:none;}
  .toprow .kpis{margin-bottom:0;}
  .toprow .filters{flex:1 1 560px;justify-content:flex-end;margin:0;align-self:center;}
  .filters input[type="text"], .filters input[type="search"]{flex:0 1 190px;min-width:140px;}
  .nv .n{min-width:24px;text-align:right;}
  .nv .n{color:var(--muted);}
  .nv{min-width:0;} .nv .t{min-width:0;overflow:hidden;text-overflow:ellipsis;} .nv .n{flex:none;}
  .side-spacer{flex:1 1 auto;min-height:12px;}
  .col-btn{margin-top:0;}
  /* case de sélection : discrète, remplace le rond d'état au survol */
  .row-check, .card-check{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.5px solid var(--faint);border-radius:5px;background:var(--panel);cursor:pointer;margin:0;display:inline-grid;place-items:center;}
  .row-check:checked, .card-check:checked{background:var(--text);border-color:var(--text);}
  .row-check:checked::after, .card-check:checked::after{content:"";width:8px;height:4px;border:2px solid var(--bg);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px);}
  .grp-check[data-partial]{background:var(--panel);border-color:var(--text);}
  .grp-check[data-partial]::after{content:"";width:8px;height:2px;background:var(--text);}
  .project-group-head .grp-check{flex:0 0 auto;margin-right:2px;}
  .lsel{position:relative;width:20px;height:20px;display:grid;place-items:center;}
  .ring{width:18px;height:18px;border-radius:50%;border:2px solid var(--faint);display:grid;place-items:center;color:var(--bg);box-sizing:border-box;}
  .ring.info{border-style:dashed;}
  .ring.fait{background:var(--text);border-color:var(--text);color:var(--bg);}
  .ring.cloturee{background:var(--faint);border-color:var(--faint);}
  .lsel .ring{pointer-events:none;}
  .lsel .row-check:focus-visible{opacity:1;}
  .lsel .row-check{position:absolute;inset:0;margin:auto;opacity:0;z-index:1;}
  /* case « tout le groupe » de l'en-tête d'un groupe de la vue par date : toujours visible (pas de survol au doigt) */

  .lr:hover .lsel .row-check, .lsel .row-check:checked, body.has-selection .lsel .row-check{opacity:1;}
  .lr:hover .lsel .ring, .lsel .row-check:checked ~ .ring, body.has-selection .lsel .ring{opacity:0;}
  .task-modal .qe-title{field-sizing:content;min-height:0;margin-bottom:6px;}
  .qe-desc{field-sizing:content;}
  .dkv .qe-project{width:auto;min-width:140px;}
  /* sélecteurs du tiroir */
  .dkv select, .dkv input[type="date"]{appearance:none;-webkit-appearance:none;border:1px solid var(--border);border-radius:9px;background-color:var(--panel);padding:5px 28px 5px 10px;font:500 var(--fs-md) var(--font);color:var(--text);max-width:100%;}
  .dkv input[type="date"]{padding-right:10px;}
  .dkv select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23756d68' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}

  /* =====================================================================
     CHAMPS : listes à choix = forme de pilule ; autres champs = rectangle à léger arrondi
     ===================================================================== */
  :root{--r-field:6px;--r-choice:99px;}
  html{accent-color:var(--blue);}
  select,
  .filters select.fsel, .dkv select, .qe-wrap select, select.qe, .modal select, .login-pane select{border-radius:var(--r-choice) !important;}
  input[type="text"], input[type="search"], input[type="password"], input[type="date"], input[type="url"], textarea,
  .filters input[type="text"], .filters input[type="search"], .dkv input[type="date"], input.qe, textarea.qe,
  .rt-box, .modal input, .modal textarea, .login-pane input, .add-row input, .info-link-row input, .comment-box textarea{border-radius:var(--r-field) !important;}
  select{padding-left:14px;}

  /* Liste ouverte stylée là où le navigateur le permet (Chrome / Edge récents) */
  @supports (appearance: base-select){
    .filters select.fsel, .dkv select, select.qe, .modal select, .login-pane select{appearance:base-select !important;background-image:none !important;padding-right:12px;}
    .filters select.fsel, .dkv select, select.qe, .modal select, .login-pane select{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap;line-height:1.2;}
    select::picker-icon{content:"";width:12px;height:12px;background:var(--muted);-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='M6 9l6 6 6-6'/%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='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:rotate .15s;flex:none;}
    select:open::picker-icon{rotate:180deg;}
    select::picker(select){appearance:base-select;border:1px solid var(--border);border-radius:14px;padding:6px;background:var(--panel);box-shadow:var(--shadow);margin-top:6px;min-width:anchor-size(width);max-height:340px;}
    select option{padding:7px 12px;border-radius:9px;font:500 var(--fs-md) var(--font);color:var(--text);display:flex;align-items:center;gap:8px;}
    select option:hover, select option:focus{background:var(--hover);}
    select option:checked{background:color-mix(in srgb,var(--blue) 12%,var(--panel));font-weight:700;}
    select option::checkmark{display:none;}
  }

  /* ---------- Journal par jour ---------- */
  #activityList .dgroup{border:1px solid var(--border);border-radius:var(--r-md);background:var(--panel);margin-bottom:10px;overflow:hidden;}
  #activityList .dgroup summary{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none;font-weight:700;font-size:var(--fs-md);user-select:none;}
  #activityList .dgroup summary::-webkit-details-marker{display:none;}
  #activityList .dgroup summary:hover{background:var(--hover);}
  #activityList .dgroup summary svg{flex:none;color:var(--muted);transition:rotate .15s;rotate:180deg;}
  #activityList .dgroup[open] summary svg{rotate:270deg;}
  #activityList .dgroup summary .dl::first-letter{text-transform:uppercase;}
  #activityList .dgroup summary small{font:12px var(--mono);color:var(--faint);font-weight:500;}
  #activityList .dgroup .task-table{table-layout:fixed;width:100%;border-top:1px solid var(--border);}
  #activityList .c-when{width:72px;} #activityList .c-who{width:17%;} #activityList .c-act{width:17%;} #activityList .c-task{width:30%;}
  #activityList td{overflow-wrap:anywhere;}

  /* ---------- État vide : toujours calé à gauche, au même endroit quelle que soit la vue ---------- */
  .empty-state{grid-column:1 / -1;display:flex;align-items:center;justify-content:flex-start;gap:20px;text-align:left;padding:28px 4px;}
  .empty-state.empty-big{padding:36px 4px;font-size:var(--fs-3xl);}
  .empty-state svg.cyber{flex:none;color:var(--blue);}
  .cyber .sh{stroke:currentColor;stroke-width:2.2;fill:color-mix(in srgb,var(--blue) 9%,transparent);}
  .cyber .ck{stroke:var(--green);stroke-width:3.4;}
  .cyber .tr{stroke:var(--faint);stroke-width:1.6;}
  .cyber .nd{fill:var(--green);stroke:none;}
  .cyber .nd.p{animation:cyberPulse 2.4s ease-in-out infinite;}
  @keyframes cyberPulse{0%,100%{opacity:1;}50%{opacity:.25;}}
  @media (prefers-reduced-motion:reduce){ .cyber .nd.p{animation:none;} }

  /* ---------- Recherche globale Ctrl+K (Lot R, R.1, 06/10/2026) ---------- */
  .search-modal{align-items:flex-start;padding-top:min(14vh,120px);}
  .search-modal .modal.search-modal-box{max-width:560px;padding:12px;display:flex;flex-direction:column;gap:6px;}
  .search-head{display:flex;align-items:center;gap:10px;padding:6px 8px 10px;border-bottom:1px solid var(--border);}
  .search-head .search-ic{color:var(--faint);display:flex;flex:none;}
  .search-input{flex:1;min-width:0;border:0;background:transparent;padding:4px 0;font:500 var(--fs-lg) var(--font);color:var(--text);outline:none;border-radius:0 !important;}
  .search-input::placeholder{color:var(--faint);}
  .search-results{list-style:none;margin:4px 0 0;padding:0;max-height:55vh;overflow:auto;}
  .search-results li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;}
  .search-results li.active, .search-results li:hover{background:var(--hover);}
  .search-results .sres-ic{color:var(--muted);flex:none;display:flex;}
  .search-results .sres-body{min-width:0;display:flex;flex-direction:column;gap:1px;}
  .search-results .sres-body b{font-size:var(--fs-md);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .search-results .sres-body small{color:var(--muted);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .search-results .search-empty, .search-results .search-pending{padding:14px 10px;color:var(--muted);font-size:var(--fs-sm);cursor:default;}
  .search-hint{font-size:var(--fs-xs);color:var(--faint);padding:6px 10px 2px;border-top:1px solid var(--border);}