/* --- DESIGN SYSTEM CHANV OFFICIAL (APPS HUB) --- */
:root {
    --chanv-blanc: #FFFFFF;
    --chanv-beige: #DDCBA4;
    --chanv-fibre: #F1EADA;
    --chanv-terre: #282828;

    --bg-main: var(--chanv-blanc);
    --bg-alternate: var(--chanv-fibre);
    --text-main: var(--chanv-terre);
    --accent: var(--chanv-beige);

    --shadow-soft: 0 4px 20px rgba(40, 40, 40, 0.05);
    --shadow-bold: 0 12px 40px rgba(40, 40, 40, 0.1);
    --radius: 12px;
    --radius-lg: 20px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   LE SOCLE — le vocabulaire commun de GANDALF
   ==========================================================================

   Maquettes et raisonnement complet : /concepts/  (hors application, non lié
   depuis la navigation ; c'est un dossier de revue, pas une fonctionnalité).

   Pourquoi ce bloc existe. Mesuré sur ce fichier (15 062 lignes) :

       396 couleurs distinctes, dont 206 employées une seule fois
       168 ombres différentes
        93 tailles de police, en px, rem ET em, avec des demi-pixels
        86 valeurs de padding distinctes pour 128 usages dans .tasks-*
        45 rayons, dont TROIS façons d'écrire « pilule » (99px, 999px, 50px)

   Ce n'est pas de la négligence : jusqu'ici il n'existait AUCUN token
   d'espacement, de rayon, de taille de texte ni d'ombre dans GANDALF.
   Seulement des couleurs, et encore — en trois jeux qui ne se recouvrent
   pas : --chanv-* (ci-dessus, aucune valeur sombre), --gs-* (shell.css:12,
   inertes tant que shell.js:1654 n'a pas posé .shell-on) et --tst-*
   (ligne 6566, le seul jeu réellement sur :root).

   Quand il n'y a rien à citer, on invente. C'est ce qui a produit un appel
   à un token « gs-muted » (repli #8a8a8a) sur 15 règles, et à un token
   « gs-hover » sur 2 : deux noms qui n'existaient dans aucun fichier. Le
   repli les rendait invisibles en clair et illisibles en sombre — #8a8a8a
   sur #2b2823 donne ≈ 3.6:1, sous le seuil de 4.5:1. Une 18e règle, morte
   celle-là (shell.css:775, appel sans repli), souffrait du même mal.
   Toutes réparées vers --g-muted / --g-hover, plus bas ligne ~14582.
   Le même accident est déjà documenté ligne 6634 avec --gcard/--gborder :
   deux fois le même symptôme, une seule cause — l'absence de socle.

   NOTE AU PROCHAIN QUI PASSE — les noms fantômes sont écrits ici SANS la
   syntaxe var(--…) volontairement. La première rédaction de ce commentaire
   les citait littéralement, et le script qui a réparé les 18 règles a
   réécrit du même coup l'explication de ce qu'il réparait. Une correction
   qui efface sa propre trace n'a corrigé que la moitié du problème.

   CE BLOC EST PUREMENT ADDITIF. Aucun de ces noms n'existait ailleurs dans
   public/ (vérifié : zéro collision). Rien de ce qui s'affiche aujourd'hui
   ne change tant qu'une règle ne vient pas les citer.

   PRINCIPE — on ne jette pas l'identité. Le beige, l'or, l'encre chaude,
   Outfit + Inter : c'est Chanv, ça reste. Le socle ne change pas la
   palette, il lui donne une grammaire.
   ========================================================================== */
:root {
    /* SURFACES ET ENCRES — les valeurs de --gs-* (shell.css:12), mais sur
       :root et non sur `body.shell-on`. C'est un élargissement : tout ce qui
       résout aujourd'hui continue de résoudre. */
    --g-ground:      #FFFFFF;               /* le fond de la page — blanc officiel */
    --g-panel:       #FFFFFF;               /* la surface qui porte le contenu */
    --g-panel-2:     #F1EADA;               /* surface secondaire — fibre officielle */
    --g-panel-3:     color-mix(in srgb, var(--chanv-fibre) 34%, var(--chanv-blanc));

    --g-line:        rgba(40,34,24,.10);    /* filet de séparation */
    --g-line-strong: rgba(168,134,63,.32);  /* filet accentué : sélection, focus */

    --g-ink:         #282828;               /* texte principal */
    --g-ink-dim:     rgba(40,38,34,.78);    /* texte secondaire */
    --g-ink-faint:   rgba(40,38,34,.70);    /* méta lisibles aussi sur les surfaces fibre */

    --g-accent:      #A8863F;               /* l'or Chanv */
    --g-accent-soft: rgba(168,134,63,.12);  /* son aplat */
    --g-accent-ink:  #FFFFFF;               /* texte SUR l'or */

    --g-ok:          #6E8A63;
    --g-warn:        #BC7E29;
    --g-crit:        #B85443;

    /* Les deux tokens qui manquaient. `muted` n'est pas une quatrième encre :
       c'est un alias explicite de `ink-faint`, pour que le prochain qui
       cherche « le gris discret » tombe dessus au lieu d'en inventer un. */
    --g-muted:       var(--g-ink-faint);
    --g-hover:       rgba(40,34,24,.045);
    --g-selected:    rgba(168,134,63,.10);

    /* TYPOGRAPHIE — sept tailles au lieu de 93. 13px reste la base : c'est
       déjà 60 % des usages de .tasks-*, donc l'échelle ratifie l'habitude
       au lieu de la contrarier. */
    --t-xs:    11px;   /* méta, horodatage, compteur */
    --t-sm:    12px;   /* libellé de colonne, pastille, bouton discret */
    --t-base:  13px;   /* le corps du tableau — la taille de travail */
    --t-md:    14px;   /* texte de lecture : description, commentaire */
    --t-lg:    16px;   /* titre de section */
    --t-xl:    20px;   /* titre de tâche dans le panneau */
    --t-2xl:   26px;   /* titre d'écran */

    /* Quatre graisses. Pas 650, pas 750 : index.html:40 ne charge que
       300/400/500/600/700 (Outfit) et 400/500/600 (Inter). Les 69 règles qui
       demandent aujourd'hui 650 ou 750 — 21 ici, 13 dans shell.css, 35 dans
       crm.css — réclament un poids qui n'est jamais téléchargé. Elles ne
       sont PAS corrigées dans ce lot : elles débordent des Tâches. */
    --w-normal:  400;
    --w-medium:  500;
    --w-semi:    600;
    --w-bold:    700;

    --f-body:    'Inter', -apple-system, system-ui, sans-serif;
    --f-display: 'Outfit', 'Inter', sans-serif;
    --f-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

    --lh-tight:  1.25;   /* titres */
    --lh-base:   1.45;   /* interface */
    --lh-read:   1.65;   /* paragraphes longs */

    /* ESPACEMENT — un pas de 4, sept crans. Les valeurs impaires d'aujourd'hui
       (1, 3, 5, 7, 9, 11, 13, 22, 46) disparaissent : aucune ne portait
       d'intention. */
    --s-1:  4px;
    --s-2:  8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;

    /* RAYONS — quatre. Repris de .gest-* (ligne 6662), déjà la surface la
       plus saine de l'app : 6 pour ce qu'on clique, 8 pour ce qui contient.
       Une seule écriture de la pilule. */
    --r-sm:   8px;    /* contrôle : bouton ou champ — référence AGRICOLE 2026 */
    --r-md:  10px;    /* conteneur : tableau, carte, barre d'outils */
    --r-lg:  14px;    /* surface majeure : panneau, boîte de dialogue */
    --r-full: 999px;  /* pilule et pastille ronde */

    /* ÉLÉVATION — quatre niveaux. Le niveau 0 est le défaut assumé : dans une
       interface dense, le filet sépare mieux que l'ombre. */
    --e-0: none;
    --e-1: 0 1px 2px rgba(40,34,24,.06);
    --e-2: 0 4px 16px rgba(40,34,24,.09);
    --e-3: 0 16px 48px rgba(40,34,24,.15);
    --e-focus: 0 0 0 3px rgba(168,134,63,.28);   /* UN seul anneau de focus */

    --dur-fast: .12s;
    --dur-base: .18s;
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* Les douze statuts ne sont PAS recopiés ici : ils vivent déjà sur :root
       ligne 6566, mesurés pour le contraste et éclaircis (jamais assombris)
       en thème sombre. Un seul endroit, celui qui existait déjà. */
}

body[data-gtheme="dark"] {
    --g-ground:      #201d19;
    --g-panel:       #2b2823;
    --g-panel-2:     #332f28;
    --g-panel-3:     #2f2b25;

    --g-line:        rgba(221,203,164,.14);
    --g-line-strong: rgba(221,203,164,.30);

    --g-ink:         rgba(255,255,255,.94);
    --g-ink-dim:     rgba(255,255,255,.72);
    /* .56 et non .44 : sur fond sombre, la même opacité rend un texte bien
       plus faible. C'est précisément ce que le repli #8a8a8a ratait. */
    --g-ink-faint:   rgba(255,255,255,.56);

    --g-accent:      #DDCBA4;
    --g-accent-soft: rgba(221,203,164,.13);
    --g-accent-ink:  #201d19;

    --g-ok:          #8FA986;
    --g-warn:        #E0A458;
    --g-crit:        #CC6B5A;

    --g-muted:       var(--g-ink-faint);
    --g-hover:       rgba(255,255,255,.055);
    --g-selected:    rgba(221,203,164,.12);

    --e-1: 0 1px 2px rgba(0,0,0,.40);
    --e-2: 0 6px 20px rgba(0,0,0,.48);
    --e-3: 0 20px 56px rgba(0,0,0,.60);
    --e-focus: 0 0 0 3px rgba(221,203,164,.34);
}

/* Un <button> à qui personne ne donne de `color` ne l'hérite PAS : il retombe
   sur `ButtonText`, la couleur système du navigateur — c'est-à-dire NOIR, tant
   que la page ne déclare pas `color-scheme: dark`. Le hub ne le déclare nulle
   part : il bascule sur body[data-gtheme="dark"], que le navigateur ne lit pas.
   En thème clair l'oubli ne se voit pas (du noir sur du crème, c'est ce qu'on
   voulait) ; en sombre, l'icône d'un bouton nu tombe à 1,2:1 sur le panneau
   #26221b — mesuré, pas estimé. Invisible.
   Signalé le 12/09 sur l'en-tête des groupes de tâches (➕ ✅ ✏️ 📍 🗑️) ; un
   relevé du même jour trouve la même omission dans 46 règles de boutons-icônes
   de l'app (cartes, commentaires, clavardage, CRM…). On répare la CAUSE une
   fois plutôt que 46 symptômes.
   `:where()` met la règle à spécificité ZÉRO : elle ne s'applique qu'aux
   boutons pour qui AUCUNE autre règle ne parle de couleur. `.btn`, les pilules
   pleines, tout ce qui pose déjà sa teinte — y compris les boutons à fond
   clair du thème sombre (.plan-btn-primary, .gsp-tray-send) — continuent de
   gagner, quelle que soit leur spécificité. Rien ne change pour eux. */
:where(body[data-gtheme="dark"] button) { color: inherit; }

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--chanv-blanc);
    background-image: radial-gradient(var(--chanv-fibre) 1px, transparent 1px);
    background-size: 40px 40px;
    background-attachment: fixed;
    color: var(--text-main);
    margin: 0;
    min-height: 100vh;
}

h1,
h2,
h3,
.dash-title {
    font-family: 'Outfit', sans-serif;
    margin: 0;
}

.hidden {
    display: none !important;
}

/* --- HEADER --- */
.main-header {
    background: var(--chanv-terre);
    color: var(--chanv-blanc);
    padding: 40px 20px 90px;
    position: relative;
    overflow: hidden;
}

.main-header::after {
    content: "";
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 100px;
    background: var(--chanv-blanc);
    transform: skewY(-2deg);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 10;
    flex-wrap: wrap;
}

.header-titles h1 {
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin: 0;
    line-height: 1.2;
}

.header-titles p {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 4px;
    opacity: 0.7;
    max-width: 280px;
}

.logo-wrapper {
    text-decoration: none;
    display: flex;
    align-items: center;
    background: var(--chanv-fibre);
    padding: 12px 18px;
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
    flex-shrink: 0;
}

.logo-wrapper:hover {
    filter: brightness(0.97);
    box-shadow: var(--shadow-bold);
}

.main-logo {
    height: 40px;
    display: block;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

/* --- Global FR/EN Language Toggle --- */
.header-lang-toggle {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 3px;
    margin-left: 4px;
    border: 1px solid rgba(255,255,255,0.1);
}

.lang-toggle-btn {
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lang-toggle-btn:hover {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.08);
}

.lang-toggle-btn.active {
    background: var(--chanv-beige);
    color: var(--chanv-terre);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.view-toggle {
    display: flex;
    background: var(--chanv-fibre);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 24px;
    width: 100%;
    max-width: 600px;
}

.toggle-btn {
    flex: 1;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}

.toggle-btn:hover {
    color: var(--chanv-terre);
    background: rgba(40, 40, 40, 0.05);
}

.toggle-btn.active {
    background: var(--chanv-terre);
    color: white;
    box-shadow: 0 2px 8px rgba(40, 40, 40, 0.2);
}

.toggle-btn.active .toggle-label {
    color: white;
}

.header-user-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* --- AVATAR + BURGER BUTTON --- */
.avatar-burger-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.avatar-burger-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 5px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: var(--transition);
}

.avatar-burger-btn:hover .avatar-burger-inner {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.avatar-burger-photo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    object-fit: cover;
    transition: var(--transition);
}

.avatar-burger-btn:hover .avatar-burger-photo {
    border-color: rgba(255, 255, 255, 0.5);
}

.avatar-burger-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 16px;
}

.avatar-burger-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
    transition: var(--transition);
}

.avatar-burger-icon span:nth-child(2) {
    width: 70%;
}

.avatar-burger-btn:hover .avatar-burger-icon span {
    background: white;
}

.avatar-burger-btn:hover .avatar-burger-icon span:nth-child(2) {
    width: 100%;
}

.user-details {
    text-align: right;
}

.header-user-section .user-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff !important;
    text-decoration: none;
}

.header-user-section .user-role {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.6) !important;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
    object-fit: cover;
}

/* --- ECOSYSTEM DROPDOWN --- */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    /* Accolé au bouton */
    background-color: white;
    min-width: 240px;
    box-shadow: var(--shadow-bold);
    border-radius: var(--radius);
    z-index: 1000;
    overflow: hidden;
    border: 1px solid var(--chanv-fibre);
}

.dropdown-section {
    padding: 10px 20px;
    font-size: 11px;
    font-weight: 800;
    color: #999;
    text-transform: uppercase;
    background: #fafafa;
    border-bottom: 1px solid var(--chanv-fibre);
}

.dropdown-content::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
}

.dropdown:hover .dropdown-content {
    display: block;
    animation: fadeIn 0.2s;
}

.dropdown-content a {
    color: var(--chanv-terre);
    padding: 15px 20px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--chanv-fibre);
}

/* --- DASHBOARD --- */
.container-dashboard {
    max-width: 1200px;
    margin: -10px auto 60px auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

.welcome-section {
    margin-bottom: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
}

.welcome-left {
    flex-shrink: 0;
}

.welcome-section h2 {
    font-size: 28px;
    color: var(--chanv-terre);
}

.welcome-right {
    text-align: right;
    min-width: 0;
}

.welcome-date {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--chanv-terre);
    margin: 0 0 6px 0;
    letter-spacing: 0.3px;
}

.welcome-quote {
    font-size: 13px;
    font-style: italic;
    color: #888;
    margin: 0;
    line-height: 1.5;
    max-width: 420px;
    margin-left: auto;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 20px;
    min-height: 200px;
}

.category-header {
    grid-column: 1 / -1;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--chanv-terre);
    padding: 8px 0 0;
    border-bottom: 2px solid var(--chanv-beige);
    margin-top: 10px;
}

.category-header:first-child {
    margin-top: 0;
}

.restricted-notice {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: var(--chanv-fibre);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--chanv-beige);
    max-width: 600px;
    margin: 40px auto;
}

.notice-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.restricted-notice h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: var(--chanv-terre);
}

.restricted-notice p {
    color: #666;
    margin: 5px 0;
}

.app-tile {
    background: white;
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--chanv-fibre);
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

/* Tiles with image: no top padding, image fills card */
.app-tile.has-image {
    padding: 0;
}

/* Tiles with emoji only: keep padding */
.app-tile.emoji-only {
    padding: 24px 16px;
}

.app-tile:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-bold);
    border-color: var(--chanv-beige);
}

.app-icon {
    font-size: 40px;
    margin-bottom: 14px;
}

/* Image icon: fills the card width */
.app-icon-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--chanv-fibre);
    overflow: hidden;
}

.app-icon-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-icon-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none;
}

/* Site tiles: logos need contain, not cover */
.app-tile.site-tile .app-icon-image img {
    object-fit: contain;
    padding: 20px;
}

.app-tile-text {
    padding: 10px 12px 14px;
    width: 100%;
}

.app-name {
    font-family: 'Outfit';
    font-size: 1em;
    font-weight: 700;
    margin-bottom: 3px;
}

.app-desc {
    font-size: 0.8em;
    color: #666;
    line-height: 1.4;
}

/* --- BOUTONS --- */
.btn {
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* `display` ci-dessus est une déclaration d'AUTEUR : elle l'emporte sur le
   `[hidden] { display: none }` de la feuille du navigateur, quelle que soit la
   spécificité. Sans cette règle, `btn.hidden = true` ne masque RIEN.
   Constaté sur la ligne Gmail des Réglages (public/js/shell.js — cas « 4 boîtes
   atteintes ») : le bouton restait affiché, et comme cette branche ne réécrit
   pas son texte, il gardait le « … » littéral de public/index.html — un
   contrôle présent, muet et sans effet. Corrigé pour TOUS les .btn : ceux qui
   portent l'attribut `hidden` sont précisément ceux qu'on veut cacher. */
.btn[hidden] {
    display: none;
}

.btn-primary {
    background: var(--chanv-beige);
    color: var(--chanv-terre);
}

.btn-primary:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
}

.btn-ecosystem {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-ecosystem:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-admin {
    background: var(--chanv-terre);
    color: white;
}

.btn-help {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid rgba(255,255,255,0.15);
}

.btn-help:hover {
    background: rgba(255,255,255,0.25);
    color: white;
}

/* Emoji Picker */
.emoji-field-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.emoji-field-row input { flex: 1; }

.emoji-picker-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--chanv-fibre);
    background: white;
    cursor: pointer;
    font-size: 18px;
    transition: var(--transition);
    flex-shrink: 0;
}

.emoji-picker-btn:hover {
    background: var(--chanv-fibre);
    transform: scale(1.08);
}

.emoji-picker-dropdown {
    position: fixed;
    z-index: 10000;
    background: white;
    border: 1px solid var(--chanv-fibre);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    width: 300px;
    max-height: 260px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.emoji-picker-dropdown.hidden { display: none; }

.emoji-picker-item {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.emoji-picker-item:hover {
    background: var(--chanv-fibre);
}

/* Footer */
.app-footer {
    text-align: center;
    padding: 24px 16px;
    font-size: 11px;
    color: rgba(0,0,0,0.3);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
body[data-gtheme="dark"] .app-footer {
    color: rgba(255,255,255,0.35);
}

.btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-logout:hover {
    background: rgba(229, 62, 62, 0.25);
    color: #fff;
}

/* --- MODALS & ADMIN --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(40, 40, 40, 0.8);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* align-items:flex-start ici + margin:auto 0 sur .modal-content : dès que
       le contenu dépasse la hauteur utile, le `margin:auto` retombe à 0 et la
       modale se colle au padding de l'overlay. À 20px (10px ≤768px) en dur,
       son titre et son ✕ (top:20px, seule sortie) atterrissaient sous la barre
       d'état en PWA. C'est l'overlay qui réserve, pour toutes les modales du
       hub d'un coup : réglages, admin, fiche de tâche, nouvelle conversation… */
    padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto;
}

.modal-content {
    background: white;
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-bold);
    max-width: 600px;
    width: 100%;
    position: relative;
    margin: auto 0;
}

.admin-modal {
    max-width: 960px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-modal > h2,
.admin-modal > .admin-tabs,
.admin-modal > .close-modal {
    flex-shrink: 0;
}

.admin-tab-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 28px;
    cursor: pointer;
    color: #999;
}

.admin-tabs {
    display: flex;
    gap: 10px;
    margin: 30px 0;
    border-bottom: 2px solid var(--chanv-fibre);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--chanv-beige) transparent;
    padding-bottom: 4px;
}

.admin-tabs::-webkit-scrollbar {
    height: 4px;
}
.admin-tabs::-webkit-scrollbar-thumb {
    background: var(--chanv-beige);
    border-radius: 4px;
}

.tab-btn {
    padding: 10px 20px;
    background: none;
    border: none;
    font-weight: 700;
    color: #999;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.tab-btn.active {
    color: var(--chanv-terre);
    border-bottom: 3px solid var(--chanv-beige);
}

/* --- ADMIN TABLES & SEARCH --- */
.admin-header-actions {
    margin-bottom: 20px;
}

.search-wrapper {
    position: relative;
    max-width: 400px;
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 11px;
    font-size: 14px;
    pointer-events: none;
}

.search-wrapper input {
    padding-left: 45px;
}

.admin-table-wrapper {
    background: #fafafa;
    border-radius: var(--radius);
    border: 1px solid var(--chanv-fibre);
    overflow-x: auto;
}

/* Santé des connexions Gmail (onglet Super Admin) — une ligne par flux système
   au-dessus du tableau des boîtes. */
.admin-flow-row {
    padding: 8px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--chanv-fibre);
    border-radius: var(--radius);
    background: #fafafa;
    font-size: 14px;
    line-height: 1.6;
}

.btn.btn-sm {
    padding: 3px 10px;
    font-size: 12px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.admin-table th {
    background: #f0f0f0;
    padding: 12px 20px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
}

.admin-table td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--chanv-fibre);
    vertical-align: middle;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--chanv-fibre);
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 700;
    color: var(--chanv-terre);
}

.user-email {
    font-size: 11px;
    color: #999;
}

.role-select {
    padding: 6px 12px;
    border: 1px solid var(--chanv-fibre);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    background: white;
    cursor: pointer;
}

.timestamp {
    font-size: 12px;
    color: #999;
}

/* --- BADGES & BUTTONS --- */
.access-badge {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.access-badge.public {
    background: #E6FFFA;
    color: #2C7A7B;
}

.access-badge.restreint {
    background: #FFF5F5;
    color: #C53030;
}

.btn-settings {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--chanv-fibre);
    background: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-settings:hover {
    background: var(--chanv-fibre);
    border-color: var(--chanv-beige);
    transform: translateY(-1px);
}

.btn-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--chanv-fibre);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 14px;
}

.btn-icon:hover {
    background: var(--chanv-fibre);
    transform: scale(1.05);
}

.btn-icon-danger:hover {
    background: #FFE5E5;
    border-color: #FEB2B2;
}

.loading,
.error {
    text-align: center;
    padding: 40px;
    font-weight: 500;
    font-size: 14px;
    color: #999;
}

.error {
    color: #E53E3E;
}

/* --- FORMULAIRES --- */
.form-group {
    margin-bottom: 20px;
}
/* RÈGLE GLOBALE : dans une modale, un champ de formulaire prend TOUTE la
   largeur de son groupe. Sans elle, chaque textarea/input retombait sur sa
   taille intrinsèque du navigateur (champ à moitié vide — bug récurrent).
   Les exceptions ciblées (ex: champ icône) gardent la main via un
   sélecteur plus spécifique. */
.modal-content .form-group input[type="text"],
.modal-content .form-group input[type="search"],
.modal-content .form-group input[type="email"],
.modal-content .form-group input[type="date"],
.modal-content .form-group input[type="number"],
.modal-content .form-group input[type="url"],
.modal-content .form-group textarea,
.modal-content .form-group select {
    width: 100%;
    box-sizing: border-box;
}
.modal-content .form-group textarea { resize: vertical; min-height: 64px; }

.toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-transform: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--chanv-terre);
}

.toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--chanv-vert);
    cursor: pointer;
}

.form-hint {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4;
}

label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    color: #666;
}

input,
select {
    width: 100%;
    padding: 12px 15px;
    border-radius: 10px;
    border: 2px solid var(--chanv-fibre);
    font-family: inherit;
    font-size: 14px;
}

input:focus {
    outline: none;
    border-color: var(--chanv-beige);
}

/* --- LOGIN --- */
#login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--chanv-fibre);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: white;
    padding: 60px 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-bold);
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.main-logo-login {
    height: 60px;
    margin-bottom: 30px;
}

.error-text {
    color: #E53E3E;
    margin-top: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* --- LOADER & TOAST --- */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--chanv-fibre);
    border-top-color: var(--chanv-beige);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

#toast {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--chanv-terre);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: var(--shadow-bold);
    z-index: 10001;
    transition: 0.4s;
}

#toast.show {
    /* Mobile : remonter au-dessus de la barre système (sinon coupé/masqué). */
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    text-align: center;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- SETTINGS MODAL (Per-App Roles) --- */
.settings-modal {
    max-width: 560px;
    padding: 0;
    overflow: hidden;
}

.settings-user-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 30px 30px 20px;
    background: var(--chanv-fibre);
}

.settings-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: #ddd;
    box-shadow: 0 0 0 3px rgba(40, 40, 40, 0.1);
}

.settings-user-info h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--chanv-terre);
    margin: 0;
}

.settings-user-info p {
    font-size: 13px;
    color: #888;
    margin: 2px 0 0;
}

.settings-divider {
    height: 1px;
    background: var(--chanv-fibre);
}

.settings-apps-list {
    padding: 20px 30px;
    max-height: 400px;
    overflow-y: auto;
}

.settings-super-admin {
    padding: 16px 30px;
    background: linear-gradient(135deg, rgba(58, 92, 57, 0.04), rgba(58, 92, 57, 0.08));
    border-bottom: 1px solid var(--chanv-fibre);
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--chanv-terre);
    user-select: none;
}

.toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--chanv-green);
    cursor: pointer;
}

.settings-app-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--chanv-fibre);
}

.settings-app-row:last-child {
    border-bottom: none;
}

.settings-app-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-app-icon {
    font-size: 22px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--chanv-fibre);
    border-radius: 10px;
    flex-shrink: 0;
}

.settings-app-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--chanv-terre);
}

.settings-apps-list .role-select {
    width: auto;
    min-width: 180px;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--chanv-fibre);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: var(--transition);
}

.settings-apps-list .role-select:focus {
    outline: none;
    border-color: var(--chanv-beige);
    box-shadow: 0 0 0 3px rgba(221, 203, 164, 0.2);
}

.settings-modal .modal-actions {
    padding: 16px 30px 24px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-secondary {
    background: var(--chanv-fibre);
    color: var(--chanv-terre);
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition);
}

.btn-secondary:hover {
    background: #e0d5c0;
}

.settings-modal .close-modal {
    top: 15px;
    right: 20px;
    z-index: 10;
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        text-align: center;
        position: relative;
    }

    .header-user-section {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
    }

    /* Mobile : nav du header masquée — LECLAUDE et le reste passent par le
       menu burger (l'entrée LECLAUDE y ouvre le bulletin) */
    .header-nav {
        display: none;
    }

    .welcome-section {
        flex-direction: column;
        gap: 16px;
    }

    .welcome-right {
        text-align: left;
    }

    .welcome-quote {
        margin-left: 0;
        max-width: 100%;
    }

    /* Hide name/role on mobile — only show avatar burger */
    .header-user-section .user-details {
        display: none !important;
    }

    .avatar-burger-inner {
        padding: 3px 10px 3px 3px;
    }

    .avatar-burger-photo {
        width: 30px;
        height: 30px;
    }

    .avatar-burger-icon {
        width: 14px;
        gap: 3px;
    }

    .settings-app-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .settings-apps-list .role-select {
        width: 100%;
    }

    .view-toggle {
        max-width: 100%;
        gap: 3px;
    }

    .toggle-btn {
        padding: 8px 4px;
        font-size: 12px;
        gap: 3px;
    }

    /* Admin panel mobile */
    .modal-overlay {
        padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .app-tile.emoji-only {
        padding: 16px 10px;
    }

    .app-icon {
        font-size: 32px;
        margin-bottom: 8px;
    }

    .app-tile-text {
        padding: 8px 8px 10px;
    }

    .app-name {
        font-size: 0.85em;
    }

    .app-desc {
        font-size: 0.72em;
    }

    .modal-content {
        padding: 20px 16px;
    }

    .admin-modal {
        max-width: 100%;
        max-height: 95vh;
    }

    .admin-tabs {
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        padding-bottom: 2px;
    }

    .admin-tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        padding: 8px 14px;
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .admin-table td,
    .admin-table th {
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* --- UNIVERSAL SIDEBAR --- */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.open {
    opacity: 1;
}

.sidebar-panel {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background: var(--chanv-terre);
    z-index: 9999;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.3);
}

.sidebar-panel.open {
    right: 0;
}

.sidebar-header {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 36px 24px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
}

.sidebar-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px rgba(221, 203, 164, 0.3), 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
}

.sidebar-name {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: white;
    text-align: center;
}

.sidebar-role {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.5);
}

.sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px;
    -webkit-overflow-scrolling: touch;
}

.sidebar-favs {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-favs-title {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
    padding: 0 0 12px;
}

.sidebar-favs-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-fav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
}

.sidebar-fav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    transform: translateX(4px);
}

.sidebar-fav-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-fav-img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    padding: 3px;
}

.sidebar-no-favs {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
    padding: 8px 0;
}

.sidebar-logout {
    flex-shrink: 0;
    width: calc(100% - 48px);
    margin: 0 24px 24px;
    justify-content: center;
    padding: 12px;
    font-size: 14px;
}

.sidebar-tour {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 12px 16px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    margin: 16px 0 12px;
    width: 100%;
    transition: var(--transition);
}

.sidebar-tour:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.sidebar-lang-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.sidebar-lang-label {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
}

@media (max-width: 768px) {
    .sidebar-panel {
        width: 280px;
        right: -280px;
    }
    .sidebar-avatar {
        width: 60px;
        height: 60px;
    }
    .sidebar-name {
        font-size: 15px;
    }
}

/* ============================================== */
/* --- FAVORIS (Bouton cœur sur tiles) --- */
/* ============================================== */

/* Badge de notification (formations en attente, etc.) */
.app-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: #E53E3E;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.45);
    animation: app-badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
}

.app-badge-overdue {
    animation: app-badge-pulse 1.8s ease-in-out infinite;
}

@keyframes app-badge-pop {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes app-badge-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(229, 62, 62, 0.45); }
    50% { box-shadow: 0 2px 18px rgba(229, 62, 62, 0.85); }
}

/* Bouton cœur sur les tiles */
.fav-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: var(--transition);
    padding: 0;
}

.fav-btn img {
    transition: var(--transition);
}

.fav-btn:hover {
    transform: scale(1.15);
}

.fav-btn:hover img {
    content: url('images/favorite-hover.svg');
}

.fav-btn.fav-active:hover img {
    content: url('images/favorite-active-hover.svg');
}

/* ============================================== */
/* --- CHATBOT GANDALF (Floating bottom-right) --- */
/* ============================================== */

.chatbot-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: var(--chanv-terre);
    color: var(--chanv-blanc);
    font-size: 28px;
    cursor: pointer;
    box-shadow: var(--shadow-bold);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.chatbot-toggle:hover {
    transform: scale(1.08);
    background: #1a1a1a;
}

.chatbot-icon {
    line-height: 1;
}

.chatbot-panel {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 140px);
    background: var(--chanv-blanc);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-bold);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9001;
    border: 1px solid rgba(40, 40, 40, 0.08);
}

.chatbot-header {
    background: var(--chanv-terre);
    color: var(--chanv-blanc);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chatbot-title-block {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chatbot-avatar {
    font-size: 24px;
    line-height: 1;
}

.chatbot-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 16px;
}

.chatbot-subtitle {
    font-size: 11px;
    opacity: 0.7;
}

.chatbot-close {
    background: transparent;
    border: none;
    color: var(--chanv-blanc);
    font-size: 24px;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
}

.chatbot-close:hover {
    opacity: 0.7;
}

.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--chanv-fibre);
}

.chatbot-msg {
    padding: 10px 14px;
    border-radius: 14px;
    max-width: 85%;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.chatbot-msg-bot {
    background: var(--chanv-blanc);
    color: var(--chanv-terre);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    box-shadow: var(--shadow-soft);
}

.chatbot-msg-user {
    background: var(--chanv-terre);
    color: var(--chanv-blanc);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.chatbot-msg-streaming::after {
    content: '▌';
    animation: chatbot-blink 1s infinite;
    margin-left: 2px;
    opacity: 0.6;
}

@keyframes chatbot-blink {
    0%, 50% { opacity: 0.6; }
    51%, 100% { opacity: 0; }
}

.chatbot-msg-error {
    background: #fee;
    color: #c33;
    border: 1px solid #fbb;
}

.chatbot-tool-indicator {
    align-self: flex-start;
    font-size: 11px;
    opacity: 0.6;
    font-style: italic;
    padding: 4px 12px;
}

/* ============================================== */
/* --- ADMIN HEADER ROW (title + env toggle + close) --- */
/* ============================================== */

.admin-header-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.admin-header-row h2 {
    margin: 0;
    white-space: nowrap;
    flex: 1;
}

.admin-header-row .close-modal {
    position: static;
}

/* Toggle switch */
.admin-env-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.admin-env-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.admin-env-toggle-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: color 0.2s, opacity 0.2s;
}

/* DEV label (left) — highlighted when on dev, dimmed on prod */
#adminEnvLabelDev  { color: #92400E; opacity: 1; transition: opacity 0.2s; }
#adminEnvLabelProd { color: #166534; opacity: 0.35; transition: opacity 0.2s; }

/* When checked (= prod), flip opacity */
.admin-env-toggle input:checked ~ #adminEnvLabelDev  { opacity: 0.35; }
.admin-env-toggle input:checked ~ #adminEnvLabelProd { opacity: 1; }

.admin-env-slider {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    border-radius: 20px;
    background: #FBBF24;
    transition: background 0.3s;
}

.admin-env-toggle input:checked + .admin-env-slider {
    background: #22C55E;
}

.admin-env-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Checked = PROD (slider right) */
.admin-env-toggle input:checked + .admin-env-slider::before {
    transform: translateX(18px);
}

/* ============================================== */
/* --- FEEDBACK DASHBOARD --- */
/* ============================================== */

/* --- Skill editor modal --- */
.skill-editor-modal {
    max-width: 820px;
    width: 100%;
}

.skill-editor-meta {
    font-size: 12px;
    color: #888;
    margin: -10px 0 16px;
}

.skill-editor-body {
    font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box;
    min-height: 300px;
    resize: vertical;
}

.skill-tools-readonly {
    margin: 16px 0;
    background: var(--chanv-fibre);
    border-radius: 10px;
    padding: 12px 16px;
}

.skill-tools-readonly summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    color: var(--chanv-terre);
    user-select: none;
}

.skill-tools-readonly summary:hover {
    opacity: 0.7;
}

.skill-tool-row {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
    font-size: 12px;
}

.skill-tool-name {
    margin-bottom: 4px;
}

.skill-tool-name code {
    background: var(--chanv-fibre);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    color: var(--chanv-terre);
}

.skill-tool-desc {
    color: #555;
    margin-bottom: 6px;
}

.skill-tool-row details {
    margin-top: 6px;
}

.skill-tool-row details summary {
    font-size: 11px;
    cursor: pointer;
    color: #888;
}

.skill-tool-row details pre {
    background: #1a1a1a;
    color: #f4f4f4;
    padding: 10px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 11px;
    line-height: 1.4;
    margin: 6px 0 0;
}

/* --- Settings tabs (Apps / Skills IA) --- */
.settings-tabs {
    display: flex;
    gap: 0;
    margin: 16px 0 0;
    background: var(--chanv-fibre);
    border-radius: 12px;
    padding: 3px;
}

.settings-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.25s ease;
}

.settings-tab:hover {
    color: var(--chanv-terre);
}

.settings-tab.active {
    background: var(--chanv-terre);
    color: #fff;
    box-shadow: 0 2px 8px rgba(40, 40, 40, 0.15);
}

.settings-tab-content {
    margin-top: 16px;
    animation: settingsTabFadeIn 0.25s ease-out;
}

.settings-tab-content.hidden {
    display: none;
}

@keyframes settingsTabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.settings-section-hint {
    font-size: 12px;
    color: #888;
    margin: 0 0 14px;
    line-height: 1.4;
}

.settings-skills-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.settings-skill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--chanv-fibre);
    border-radius: 12px;
    gap: 16px;
}

.settings-skill-info {
    flex: 1;
    min-width: 0;
}

.settings-skill-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--chanv-terre);
}

.settings-skill-desc {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    line-height: 1.3;
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    border-radius: 24px;
    transition: 0.3s;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--chanv-terre);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* Bandeau statut Basecamp en haut de l'onglet Feedback */
.basecamp-banner {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 14px;
    border-left: 4px solid;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.basecamp-banner[data-level="ok"]   { background: #D4F5E2; color: #166534; border-left-color: #22C55E; }
.basecamp-banner[data-level="info"] { background: #DBEAFE; color: #1E40AF; border-left-color: #3B82F6; }
.basecamp-banner[data-level="warn"] { background: #FEF3C7; color: #92400E; border-left-color: #F59E0B; }
.basecamp-banner a, .basecamp-banner .link-btn {
    color: inherit;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 0;
}
.basecamp-banner a:hover, .basecamp-banner .link-btn:hover {
    opacity: 0.7;
}

/* Header de l'onglet Feedback : aligner boutons d'action + filtres */
#tab-feedback .admin-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Boutons "Rafraîchir" et "Importer" plus compacts pour matcher les filter chips */
#tab-feedback .admin-header-actions > .btn-secondary {
    padding: 8px 14px;
    font-size: 13px;
}

.feedback-filter {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}

.feedback-filter-btn {
    background: transparent;
    border: 1px solid #ddd;
    color: #666;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition);
}

.feedback-filter-btn:hover {
    background: var(--chanv-fibre);
    color: var(--chanv-terre);
}

.feedback-filter-btn.active {
    background: var(--chanv-terre);
    color: #fff;
    border-color: var(--chanv-terre);
}

.feedback-table th, .feedback-table td {
    vertical-align: middle;
}

.fb-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.fb-status-done    { background: #D4F5E2; color: #166534; }
.fb-status-pending { background: #FEF3C7; color: #92400E; }
.fb-status-deleted { background: #F3F4F6; color: #6B7280; }
.fb-status-error   { background: #FEE2E2; color: #991B1B; }
.fb-status-unknown { background: #F3F4F6; color: #6B7280; }

.fb-type {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.fb-type-bug     { background: #FEE2E2; color: #991B1B; }
.fb-type-feature { background: #E0E7FF; color: #3730A3; }

/* ============================================== */
/* --- ONBOARDING --- */
/* ============================================== */

.onboarding-overlay {
    position: fixed;
    inset: 0;
    background: rgba(40, 40, 40, 0.6);
    backdrop-filter: blur(6px);
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: birthdayFadeIn 0.3s ease-out;
}

.onboarding-card {
    position: relative;
    background: var(--chanv-blanc);
    border-radius: var(--radius-lg);
    width: 560px;
    max-width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 80px rgba(40, 40, 40, 0.35);
    animation: birthdayPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.onboarding-skip {
    position: absolute;
    top: 16px;
    right: 20px;
    background: transparent;
    border: none;
    color: #999;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: var(--transition);
    z-index: 2;
}

.onboarding-skip:hover {
    color: var(--chanv-terre);
    background: var(--chanv-fibre);
}

.onboarding-slides {
    flex: 1;
    overflow-y: auto;
    padding: 50px 50px 30px;
    text-align: center;
}

.onboarding-slide {
    animation: onboardingSlideIn 0.35s ease-out;
}

@keyframes onboardingSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.onboarding-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--chanv-fibre);
    border-radius: var(--radius);
    margin-bottom: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onboarding-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.onboarding-emoji-large {
    font-size: 80px;
    line-height: 1;
    margin: 12px 0 24px;
}

.onboarding-title {
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    color: var(--chanv-terre);
    margin: 0 0 14px;
    line-height: 1.25;
}

.onboarding-body {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

.onboarding-body strong {
    color: var(--chanv-terre);
    font-weight: 600;
}

.onboarding-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px 24px;
    border-top: 1px solid var(--chanv-fibre);
    gap: 16px;
    flex-wrap: wrap;
}

.onboarding-dots {
    display: flex;
    gap: 8px;
}

.onboarding-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    transition: var(--transition);
}

.onboarding-dot.active {
    background: var(--chanv-terre);
    transform: scale(1.3);
}

.onboarding-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.onboarding-actions .btn {
    min-width: 110px;
}

/* --- Rail ULTRA PREMIUM : chip département + timeline « Ta première journée » --- */
.onb-dept-chip {
    display: inline-block;
    margin: 10px 0 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(76, 175, 80, .12);
    color: #2e7d32;
    font-size: 13px;
    font-weight: 600;
}

.onb-timeline {
    margin: 18px auto 4px;
    max-width: 420px;
    text-align: left;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 6px;
}

.onb-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    padding: 7px 0;
}

.onb-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 58px;
    top: 26px;
    bottom: -8px;
    width: 2px;
    background: rgba(76, 175, 80, .25);
}

.onb-timeline-time {
    flex: 0 0 44px;
    font-weight: 700;
    font-size: 13px;
    color: #2e7d32;
    padding-top: 2px;
    text-align: right;
}

.onb-timeline-dot {
    flex: 0 0 10px;
    height: 10px;
    border-radius: 50%;
    background: #4caf50;
    margin-top: 5px;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, .18);
}

.onb-timeline-body { flex: 1; min-width: 0; }

.onb-timeline-subject {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}

.onb-timeline-meta {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    line-height: 1.35;
}

body[data-gtheme="dark"] .onb-dept-chip {
    background: rgba(76, 175, 80, .18);
    color: #a5d6a7;
}
body[data-gtheme="dark"] .onb-timeline-subject { color: rgba(255, 255, 255, .92); }
body[data-gtheme="dark"] .onb-timeline-meta { color: rgba(255, 255, 255, .55); }

/* =====================================================================
   GTOUR — moteur de visite guidée (coach-marks) du rail d'accueil
   ===================================================================== */
.gtour {
    position: fixed;
    inset: 0;
    z-index: 13000;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: auto;
}

.gtour--visible { opacity: 1; }

/* Spotlight : découpe lumineuse — le voile est porté par son box-shadow,
   il « morphe » d'une cible à l'autre grâce à la transition. */
.gtour-spot {
    position: fixed;
    border-radius: 14px;
    box-shadow: 0 0 0 200vmax rgba(10, 16, 22, .72);
    transition: all .45s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}

.gtour-spot.on::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    border: 2px solid rgba(76, 175, 80, .95);
    animation: gtourPulse 1.6s ease-out infinite;
}

@keyframes gtourPulse {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, .45); }
    70% { box-shadow: 0 0 0 12px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

.gtour-card {
    position: fixed;
    width: min(370px, calc(100vw - 24px));
    background: linear-gradient(180deg, #fff 0%, #f9fcf9 100%);
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .30), 0 3px 10px rgba(0, 0, 0, .08);
    padding: 20px 22px 14px;
    transition: left .45s cubic-bezier(.4, 0, .2, 1), top .45s cubic-bezier(.4, 0, .2, 1);
}

.gtour-card--wide { width: min(480px, calc(100vw - 24px)); }

.gtour-card--center {
    text-align: center;
    padding: 30px 28px 16px;
}

.gtour-card--in .gtour-content {
    animation: gtourIn .35s ease-out;
}

@keyframes gtourIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.gtour-skip {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 6px;
}

.gtour-skip:hover { color: #555; text-decoration: underline; }

.gtour-emoji {
    font-size: 46px;
    line-height: 1;
    width: 84px;
    height: 84px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, rgba(102, 187, 106, .18), rgba(102, 187, 106, .05) 62%, transparent 75%);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .12));
}

.gtour-title {
    font-size: 19px;
    font-weight: 700;
    color: #222;
    margin: 0 0 8px;
    line-height: 1.25;
    padding-right: 46px;
}

.gtour-card--center .gtour-title { padding-right: 0; }

.gtour-body {
    font-size: 14px;
    color: #555;
    line-height: 1.55;
}

.gtour-body strong { color: #2e7d32; }
/* Bouton d'action des étapes « branchements » (notifications, Gmail) */
.gtour-action { margin-top: 14px; }
.gtour-action .btn { width: 100%; }
.gtour-optional { margin-top: 8px; font-size: 0.8rem; opacity: 0.65; text-align: center; }

.gtour-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* CTA long (ex. « Commencer ma formation ») → passe sous la barre au lieu de déborder */
    gap: 10px 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, .07);
}

.gtour-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 90px;
    min-width: 0;
}

.gtour-stepof {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
}

.gtour-bar {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
    overflow: hidden;
}

.gtour-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #66bb6a, #2e7d32);
    transition: width .45s ease;
}

.gtour-actions {
    display: flex;
    gap: 8px;
    margin-left: auto; /* reste à droite, même quand la ligne passe sous la barre */
    max-width: 100%;
}

.gtour-actions .btn {
    padding: 8px 14px;
    font-size: 13px;
    white-space: nowrap;
    max-width: 100%;
}

.gtour-actions .btn-primary {
    background: linear-gradient(135deg, #43a047, #2e7d32);
    border: none;
    box-shadow: 0 4px 14px rgba(46, 125, 50, .32);
}

.gtour-actions .btn-primary:hover { filter: brightness(1.07); }

@media (max-width: 480px) {
    .gtour-card { padding: 16px 16px 12px; }
    .gtour-emoji { font-size: 42px; }
    .gtour-title { font-size: 16px; }
    .gtour-body { font-size: 13px; }
    .gtour-progress { min-width: 64px; }
    .gtour-stepof { display: none; }
}

body[data-gtheme="dark"] .gtour-card {
    background: linear-gradient(180deg, #202b38 0%, #1b242f 100%);
    border-color: rgba(255, 255, 255, .07);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 3px 10px rgba(0, 0, 0, .3);
}
body[data-gtheme="dark"] .gtour-emoji {
    background: radial-gradient(circle at 50% 42%, rgba(165, 214, 167, .16), rgba(165, 214, 167, .04) 62%, transparent 75%);
}
body[data-gtheme="dark"] .gtour-title { color: rgba(255, 255, 255, .92); }
body[data-gtheme="dark"] .gtour-body { color: rgba(255, 255, 255, .65); }
body[data-gtheme="dark"] .gtour-body strong { color: #a5d6a7; }
body[data-gtheme="dark"] .gtour-foot { border-top-color: rgba(255, 255, 255, .08); }
body[data-gtheme="dark"] .gtour-bar { background: rgba(255, 255, 255, .12); }
body[data-gtheme="dark"] .gtour-skip { color: rgba(255, 255, 255, .45); }
body[data-gtheme="dark"] .gtour-skip:hover { color: rgba(255, 255, 255, .75); }

@media (max-width: 480px) {
    .onboarding-slides { padding: 50px 24px 20px; }
    .onboarding-emoji-large { font-size: 64px; }
    .onboarding-title { font-size: 22px; }
    .onboarding-body { font-size: 14px; }
    .onboarding-footer { padding: 14px 18px; }
    .onboarding-actions .btn { min-width: 0; padding: 8px 14px; font-size: 13px; }
}

/* --- Bouton "Refaire le tour" --- */
.btn-tour {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-tour:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
}


/* ============================================== */
/* --- ANNIVERSAIRE --- */
/* ============================================== */

.birthday-overlay {
    position: fixed;
    inset: 0;
    background: rgba(40, 40, 40, 0.55);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: birthdayFadeIn 0.4s ease-out;
}

#birthdayConfetti {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.birthday-card {
    position: relative;
    z-index: 2;
    background: var(--chanv-blanc);
    border-radius: var(--radius-lg);
    padding: 50px 60px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(40, 40, 40, 0.3);
    max-width: 90vw;
    animation: birthdayPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.birthday-cake {
    font-size: 72px;
    line-height: 1;
    margin-bottom: 16px;
    animation: birthdayBounce 1.4s ease-in-out infinite;
    display: inline-block;
}

.birthday-title {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    color: var(--chanv-terre);
    margin: 0 0 12px;
    line-height: 1.2;
}

.birthday-title span {
    background: linear-gradient(135deg, #DDCBA4, #E89F71);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.birthday-message {
    color: #666;
    font-size: 15px;
    margin: 0 0 28px;
}

.birthday-card .btn {
    min-width: 160px;
    margin: 0 auto;
}

@keyframes birthdayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes birthdayPop {
    0% { transform: scale(0.5) rotate(-5deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes birthdayBounce {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-12px) rotate(5deg); }
}

@media (max-width: 480px) {
    .birthday-card {
        padding: 36px 28px;
    }
    .birthday-cake { font-size: 56px; }
    .birthday-title { font-size: 24px; }
}

.chatbot-sources {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(40, 40, 40, 0.1);
    font-size: 11px;
    opacity: 0.75;
}

.chatbot-sources-label {
    font-weight: 600;
    margin-right: 4px;
}

.chatbot-source-tag {
    display: inline-block;
    background: var(--chanv-fibre);
    padding: 2px 8px;
    border-radius: 10px;
    margin: 2px 2px 0 0;
    font-size: 10px;
}

.chatbot-input-form {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(40, 40, 40, 0.08);
    background: var(--chanv-blanc);
}

.chatbot-input-form input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid rgba(40, 40, 40, 0.15);
    border-radius: 20px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: var(--transition);
}

.chatbot-input-form input:focus {
    border-color: var(--chanv-terre);
}

.chatbot-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--chanv-terre);
    color: var(--chanv-blanc);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}

.chatbot-send:hover {
    background: #1a1a1a;
}

.chatbot-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .chatbot-panel {
        right: 8px;
        bottom: 88px;
        width: calc(100vw - 16px);
        height: calc(100vh - 110px);
    }

    .chatbot-toggle {
        bottom: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
        font-size: 22px;
        z-index: 900;
    }


}

/* --- BUG REPORT --- */
.bug-report-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 900;
    height: 38px;
    padding: 0 14px 0 10px;
    border-radius: 20px;
    border: 1px solid var(--chanv-fibre);
    background: white;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
    opacity: 0.65;
    font-family: 'Inter', sans-serif;
}

.bug-report-btn span {
    font-size: 12px;
    font-weight: 600;
    color: var(--chanv-terre);
}

.bug-report-btn:hover {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    border-color: var(--chanv-beige);
}

.bug-report-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(40, 40, 40, 0.6);
    backdrop-filter: blur(6px);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Le `100%` du min() ci-dessous se mesure sur la BOÎTE DE CONTENU de cet
       overlay : réserver ici suffit à borner la modale sous la barre d'état et
       au-dessus de la barre gestuelle, sans toucher à .bug-report-modal. */
    padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
}

.bug-report-overlay.hidden {
    display: none;
}

/* La hauteur est BORNÉE et le corps défile — même convention que toutes les
   autres modales du fichier (.admin-modal, .us-modal). Sans ça, cinq vignettes
   font ~870 px de modale dans un écran de téléphone de 660 : l'overlay est en
   position fixe et centré, donc le débordement part autant en haut qu'en bas,
   rien ne défile, et le bouton « Envoyer » devient tout simplement
   inatteignable — le signalement ne peut plus partir.
   min(90dvh, 100%) : dvh suit la barre d'outils iOS qui se rétracte, et le
   100% borne à l'overlay pour ne pas déborder de ses 20 px de marge. */
.bug-report-modal {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-bold);
    max-width: 480px;
    width: 100%;
    /* Repli EXPLICITE : sur un moteur sans dvh, tout le min() est invalide et
       la déclaration est jetée — donc plus aucun plafond, et le bug revient
       en entier. Le vh se fait juste rogner par la barre d'outils iOS. */
    max-height: 90vh;
    max-height: min(90dvh, 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bugSlideUp 0.3s ease;
}

@keyframes bugSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.bug-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--chanv-fibre);
    /* Reste visible pendant le défilement du corps : sans ça l'en-tête se
       comprime au lieu de laisser le corps prendre le débordement. */
    flex-shrink: 0;
}

.bug-report-header h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.bug-report-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}

.bug-report-close:hover {
    color: var(--chanv-terre);
}

.bug-report-body {
    padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Un élément flex refuse par défaut de descendre sous la taille de son
       contenu. Explicite ici : c'est CE zéro qui autorise le corps à se
       comprimer et à prendre le débordement au lieu de pousser la modale
       au-delà de son plafond. */
    min-height: 0;
}

.bug-type-toggle {
    display: flex;
    gap: 4px;
    background: var(--chanv-fibre);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
    width: 100%;
}

.bug-type-btn {
    flex: 1;
    /* Sans ce zéro, « Nouvelle fonctionnalité » refuse de descendre sous sa
       largeur min-content et déborde de quelques pixels à 320 px — ce qui,
       depuis que le corps de la modale défile, fait apparaître une barre de
       défilement HORIZONTALE au lieu d'être rogné en silence. */
    min-width: 0;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.bug-type-btn:hover {
    color: var(--chanv-terre);
    background: rgba(40, 40, 40, 0.04);
}

.bug-type-btn.active {
    background: var(--chanv-terre);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.bug-report-body label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 6px;
}

.bug-report-body label + label {
    margin-top: 16px;
}

/* Ticket spMJx212 (A. Veyrine) : « élargir la fenêtre de la zone où l'on tape
   le texte lors d'un signalement […] cela faciliterait la relecture de
   l'utilisateur avant d'envoyer sa demande ». Quatre lignes, c'était écrire par
   une lucarne : au-delà, on tapait sans voir le début de sa phrase.
   min-height JUMEAU de BUG_DESC_MIN_H (bug-report.js) et du widget embarqué
   (public/widgets/feedback.js) — les trois surfaces de signalement s'ouvrent à
   la même taille, sinon le même geste donne trois boîtes différentes selon
   l'app d'où l'on signale.
   Le champ grandit ensuite avec le texte (bug-report.js), la poignée de
   redimensionnement reste offerte, et la modale — bornée à 90dvh, corps
   défilant — encaisse le reste. */
.bug-report-body textarea {
    width: 100%;
    border: 1px solid var(--chanv-fibre);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    min-height: 180px;
    overflow-y: auto;
    transition: border-color 0.2s;
    color: var(--chanv-terre);
    margin-bottom: 4px;
}

.bug-report-body textarea:focus {
    outline: none;
    border-color: var(--chanv-beige);
}

/* « @ » pour identifier un collègue (ticket y5QhM7wY, D. Paquette). La liste
   est celle du composeur (.gc-mention-dd) ; elle s'ouvre SOUS le champ et pas
   au-dessus comme dans un fil : au-dessus, elle recouvrirait le menu
   « Application concernée » et serait rognée par le haut du corps défilant. */
.bug-desc-wrap {
    position: relative;
}
.bug-desc-wrap .gc-mention-dd {
    top: calc(100% + 2px);
    bottom: auto;
}
.bug-mention-hint {
    margin: 0 0 16px;
    font-size: 12px;
    color: #888;
}
body[data-gtheme="dark"] .bug-mention-hint { color: rgba(255,255,255,.5); }

/* Téléphone COUCHÉ (≈ 390 px de haut, clavier ouvert : moins encore). Le
   plancher de 180 px y mangerait tout le corps de la modale : on verrait le
   champ, et plus rien d'autre — ni le menu « Application concernée », ni la
   zone de captures, ni le bouton. Le champ y garde une hauteur confortable et
   grandit toujours avec le texte (le plafond de bug-report.js suit la même
   pente). Requête sur la HAUTEUR et pas la largeur : c'est la hauteur qui
   manque, et un iPad couché n'a pas ce problème. */
@media (max-height: 560px) {
    .bug-report-body textarea {
        min-height: 110px;
    }
}

/* Select « Application concernée » : même peau que le textarea (le style
   global input/select à bordure 2px détonnerait dans cette modale). */
.bug-report-body select {
    width: 100%;
    border: 1px solid var(--chanv-fibre);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--chanv-terre);
    background: #fff;
    margin-bottom: 16px;
}

.bug-report-body select:focus {
    outline: none;
    border-color: var(--chanv-beige);
}

.bug-screenshot-area {
    border: 2px dashed #ddd;
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    margin-top: 6px;
}

.bug-screenshot-area.drag-over {
    border-color: var(--chanv-beige);
    background: rgba(221, 203, 164, 0.08);
}

.bug-screenshot-placeholder {
    color: #aaa;
    font-size: 13px;
    cursor: pointer;
    padding: 12px;
}

.bug-screenshot-placeholder:hover {
    color: #888;
}

/* Galerie des captures jointes (jusqu'à BUG_SHOTS_MAX). auto-fill + minmax :
   les vignettes se rangent d'elles-mêmes, 2 colonnes sur un téléphone, 3 ou 4
   sur un écran large, sans jamais déborder en largeur. auto-fill et non
   auto-fit : une capture seule garde la taille d'une vignette au lieu de
   s'étaler sur toute la ligne. */
.bug-shots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.bug-shots:empty {
    display: none;
}

.bug-shot {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
}

.bug-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bug-shot-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.55);
    color: white;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.bug-shot-remove:hover {
    background: rgba(200,50,50,0.8);
}

/* Marge SEULEMENT quand la galerie est peuplée : sinon la zone vide est
   décalée du haut sans rien à séparer.
   DÉCLARÉE AVANT le bloc tactile plus bas : même sélecteur, donc même
   spécificité — et une media query n'en ajoute aucune. Placée après, elle
   reprenait le dessus et annulait la cible agrandie au doigt. */
.bug-shots:not(:empty) + .bug-screenshot-placeholder {
    margin-top: 10px;
    padding: 8px;
}

/* --- Doigt plutôt que souris ------------------------------------------
   Convention déjà posée ailleurs dans ce fichier (.chat-attach-x, .cmm-reacts,
   .tasks-grip) : sur pointeur grossier, on remonte les cibles. Un ✕ de 22 px
   passe sous le plancher de 24 px du WCAG 2.2, et la zone « ajouter une
   capture » tombait à une bande de 32 px — c'est pourtant LE contrôle qui sert
   à joindre les captures 2 à 5.
   Le passage des champs à 16 px vit ici et non dans une requête de largeur :
   iOS zoome sur TOUT écran tactile, un iPad ou un téléphone couché compris. */
@media (pointer: coarse) {
    .bug-shot-remove {
        width: 32px;
        height: 32px;
        font-size: 14px;
        top: 2px;
        right: 2px;
    }

    .bug-shots:not(:empty) + .bug-screenshot-placeholder {
        padding: 14px 8px;
    }

    .bug-report-close {
        min-width: 40px;
        min-height: 40px;
    }

    .bug-report-body textarea,
    .bug-report-body select {
        font-size: 16px;
    }
}

.bug-screenshot-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Révélé par bug-report.js seulement si navigator.clipboard.read() est
   réellement utilisable — jamais de bouton mort. */
.bug-screenshot-paste {
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: var(--radius);
    background: #fff;
    /* Couleur EXPLICITE : `inherit` remonterait au blanc cassé de
       .bug-report-modal en thème sombre → texte blanc sur fond blanc.
       --text-main n'est pas redéfini en sombre, d'où la règle dédiée plus bas. */
    color: var(--text-main);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.bug-screenshot-paste:hover:not(:disabled) {
    border-color: var(--chanv-beige);
    background: rgba(221, 203, 164, 0.08);
}

.bug-screenshot-paste:disabled {
    opacity: 0.6;
    cursor: wait;
}

.bug-screenshot-hint {
    font-size: 12px;
    line-height: 1.3;
    color: #aaa;
}

.bug-report-submit {
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    border: none;
    border-radius: var(--radius);
    background: var(--chanv-terre);
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.bug-report-submit:hover:not(:disabled) {
    filter: brightness(1.2);
    transform: translateY(-1px);
}

.bug-report-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .bug-report-btn {
        bottom: 12px;
        left: 12px;
        height: 32px;
        width: 32px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
        font-size: 14px;
    }
    .bug-report-btn span {
        display: none;
    }
}

/* ==================== DEVLOG BUTTON ==================== */
.actu-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.85);
    padding: 7px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
    flex-shrink: 0;
    position: relative;
}

.actu-btn:hover {
    background: rgba(255,255,255,0.1);
    color: white;
    border-color: rgba(255,255,255,0.4);
}

.actu-btn-icon { font-size: 13px; }

.actu-notif-dot {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #E53E3E;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.45);
    animation: app-badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.actu-notif-pulse {
    animation: app-badge-pulse 1.8s ease-in-out infinite;
}

/* ==================== L'ACTU VIEW ==================== */
.actu-view {
    max-width: 900px;
    margin: -10px auto 60px auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

.actu-container { animation: fadeIn 0.3s ease; }

.actu-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.actu-back {
    background: var(--chanv-terre);
    border: none;
    font-size: 13px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    padding: 8px 18px;
    border-radius: 50px;
    transition: var(--transition);
    font-family: inherit;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}

.actu-back:hover {
    background: #1a1a1a;
    transform: translateX(-3px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.actu-title-block {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.actu-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--chanv-terre);
    margin: 0;
    line-height: 1.2;
}

.actu-subtitle {
    font-size: 13px;
    color: #888;
    margin: 0;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* --- FR / EN toggle pill --- */
.actu-lang-toggle {
    display: flex;
    gap: 2px;
    background: var(--chanv-fibre);
    border-radius: 8px;
    padding: 3px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.06);
}

.actu-lang-btn {
    padding: 5px 14px;
    border: none;
    background: transparent;
    color: #999;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.actu-lang-btn:hover {
    color: var(--chanv-terre);
    background: rgba(40, 40, 40, 0.04);
}

.actu-lang-btn.active {
    background: var(--chanv-terre);
    color: white;
    box-shadow: 0 1px 4px rgba(40, 40, 40, 0.2);
}

/* ==================== HERO ==================== */
.actu-hero { margin-bottom: 32px; }

.actu-hero-card {
    background: linear-gradient(135deg, #FDFAF3, #F5EFE0);
    border: 1px solid var(--chanv-beige);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.actu-hero-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--chanv-beige), var(--chanv-terre), var(--chanv-beige));
}

.actu-hero-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-bold);
}

.actu-hero-card.unread { border-color: var(--chanv-terre); }

.actu-hero-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.actu-hero-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--chanv-terre);
    background: rgba(40, 40, 40, 0.08);
    padding: 4px 12px;
    border-radius: 6px;
}

.actu-unread-badge {
    font-size: 11px;
    font-weight: 700;
    color: white;
    background: #EF5350;
    padding: 3px 10px;
    border-radius: 10px;
}

.actu-hero-lang { margin-left: auto; font-size: 18px; }

.actu-hero-dates {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--chanv-terre);
    margin-bottom: 10px;
}

.actu-hero-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #666;
    font-weight: 500;
    margin-bottom: 14px;
}

.actu-hero-preview {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.actu-hero-cta {
    display: none;
}

.actu-hero-cta-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--chanv-terre);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 50px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.5px;
    z-index: 2;
}

.actu-hero-cta-btn:hover {
    background: #1a1a1a;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.actu-hero-card { position: relative; }

.actu-hero-empty {
    text-align: center;
    padding: 50px 20px;
    background: var(--chanv-fibre);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--chanv-beige);
}

.actu-hero-empty-icon { font-size: 40px; margin-bottom: 12px; }
.actu-hero-empty h3 { font-size: 20px; color: var(--chanv-terre); margin-bottom: 8px; }
.actu-hero-empty p { color: #888; max-width: 400px; margin: 0 auto; font-size: 14px; }
.actu-hero-loading { text-align: center; padding: 40px; }

/* ==================== RUBRIQUES / TABS ==================== */
.actu-rubriques { margin-bottom: 20px; }

.actu-rubriques-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
    margin: 0 0 10px;
}

.actu-tabs {
    display: flex;
    gap: 6px;
    background: var(--chanv-fibre);
    border-radius: 12px;
    padding: 4px;
}

.actu-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--chanv-terre);
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    text-align: center;
}

.actu-tab:hover { background: rgba(40, 40, 40, 0.05); }

.actu-tab.active {
    background: var(--chanv-terre);
    color: white;
    box-shadow: 0 2px 8px rgba(40, 40, 40, 0.2);
}

.actu-tab.coming-soon {
    color: #bbb;
    position: relative;
}

.actu-tab.coming-soon::after {
    content: 'bientôt';
    position: absolute;
    top: -6px;
    right: -2px;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    background: var(--chanv-beige);
    padding: 1px 5px;
    border-radius: 4px;
}

.actu-tab.coming-soon.active {
    background: #eee;
    color: #999;
    box-shadow: none;
}

.actu-tab-content { padding-top: 8px; }
.actu-tab-icon { height: 16px; width: auto; vertical-align: middle; margin-right: 2px; }

.actu-no-more {
    text-align: center;
    color: #aaa;
    font-size: 13px;
    padding: 20px;
    font-style: italic;
}

.actu-coming-soon {
    text-align: center;
    padding: 60px 20px;
    background: var(--chanv-fibre);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--chanv-beige);
}

.actu-coming-soon-icon { font-size: 42px; margin-bottom: 14px; }
.actu-coming-soon h3 { font-size: 18px; color: var(--chanv-terre); margin-bottom: 8px; }
.actu-coming-soon p { color: #888; max-width: 380px; margin: 0 auto; font-size: 14px; }

/* ==================== CHANGELOG CARDS ==================== */
.changelog-list {
    display: block;
}

.changelog-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--chanv-fibre);
    padding: 18px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.changelog-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--chanv-beige), var(--chanv-terre));
    opacity: 0;
    transition: opacity 0.3s;
}

.changelog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-bold);
    border-color: var(--chanv-beige);
}

.changelog-card:hover::before { opacity: 1; }

.card-unread-dot {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 10px;
    height: 10px;
    background: #EF5350;
    border-radius: 50%;
    animation: notifPulse 2s infinite;
}

.changelog-card.unread { border-left: 3px solid var(--chanv-terre); }

.changelog-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.changelog-card-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--chanv-terre);
    background: var(--chanv-fibre);
    padding: 3px 8px;
    border-radius: 5px;
}

.changelog-card-badge.custom { background: #E8F5E9; color: #2E7D32; }
.changelog-card-lang { font-size: 15px; }

.changelog-card-period {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--chanv-terre);
}

.changelog-card-stats {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #888;
    font-weight: 500;
}

.changelog-card-preview {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.changelog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid var(--chanv-fibre);
}

.changelog-card-author { font-size: 10px; color: #aaa; font-weight: 500; }

.changelog-card-arrow {
    font-size: 11px;
    font-weight: 700;
    color: var(--chanv-beige);
    transition: var(--transition);
}

.changelog-card:hover .changelog-card-arrow { transform: translateX(4px); color: var(--chanv-terre); }

.changelog-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: var(--chanv-fibre);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--chanv-beige);
}

.changelog-empty-icon { font-size: 42px; margin-bottom: 14px; }
.changelog-empty h3 { font-size: 20px; color: var(--chanv-terre); margin-bottom: 8px; }
.changelog-empty p { color: #888; max-width: 400px; margin: 0 auto; }
.changelog-loading { grid-column: 1 / -1; text-align: center; padding: 40px 20px; }
.changelog-loading p { color: #888; margin-top: 12px; }

/* ==================== ADMIN CONTROLS ==================== */
.changelog-admin-controls {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid var(--chanv-fibre);
}

.changelog-admin-title {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.changelog-token-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #FFF8E1;
    border: 1px solid #FFD54F;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 500;
    color: #6D4C00;
}

.changelog-token-warning.critical { background: #FFF3E0; border-color: #FF9800; color: #B74600; }
.changelog-token-warning.expired { background: #FFEBEE; border-color: #EF5350; color: #B71C1C; }
.changelog-warning-icon { font-size: 16px; flex-shrink: 0; }

.changelog-generate-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px 18px;
    background: var(--chanv-fibre);
    border-radius: 12px;
}

.changelog-generate-form label { font-size: 12px; font-weight: 600; color: #666; }

.changelog-date-input {
    padding: 7px 10px;
    border: 1px solid var(--chanv-fibre);
    border-radius: 8px;
    font-size: 12px;
    font-family: inherit;
    background: white;
}

.changelog-lang-select {
    padding: 7px 12px;
    border: 1px solid var(--chanv-fibre);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: white;
    cursor: pointer;
    font-family: inherit;
}

.changelog-generate-btn { margin-left: auto; }

/* ==================== DETAIL / ARTICLE ==================== */
.changelog-detail { animation: fadeIn 0.3s ease; }

.actu-detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.changelog-detail-back {
    background: var(--chanv-terre);
    border: none;
    font-size: 13px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    padding: 8px 18px;
    border-radius: 50px;
    transition: var(--transition);
    font-family: inherit;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}

.changelog-detail-back:hover {
    background: #1a1a1a;
    transform: translateX(-3px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.actu-detail-hebdo-link {
    background: linear-gradient(135deg, var(--chanv-beige), var(--chanv-fibre));
    border: 1px solid var(--chanv-beige);
    color: var(--chanv-terre);
    padding: 8px 20px;
    border-radius: 50px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.actu-detail-hebdo-link:hover {
    background: var(--chanv-terre);
    color: white;
    border-color: var(--chanv-terre);
    transform: translateX(3px);
}
.changelog-detail-period { margin-bottom: 12px; }

.changelog-detail-dates {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--chanv-terre);
    text-transform: capitalize;
}

.changelog-detail-stats-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.changelog-stat-pill {
    padding: 5px 12px;
    background: var(--chanv-fibre);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--chanv-terre);
}

.changelog-article {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--chanv-fibre);
    box-shadow: var(--shadow-soft);
    padding: 40px 48px;
    line-height: 1.85;
    font-size: 15.5px;
    color: #2d2d2d;
    max-width: 800px;
    margin: 0 auto;
}

/* First paragraph drop cap effect */
.changelog-article > p:first-of-type::first-letter {
    float: left;
    font-size: 3.2em;
    font-weight: 800;
    line-height: 0.85;
    margin: 4px 10px 0 0;
    color: var(--chanv-beige);
    font-family: 'Georgia', 'Times New Roman', serif;
}

.changelog-article h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--chanv-beige);
    line-height: 1.3;
    color: var(--chanv-terre);
}

/* h2 — Magazine rubric style with left accent band */
.changelog-article h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 40px 0 18px;
    padding: 12px 20px;
    color: var(--chanv-terre);
    background: linear-gradient(135deg, rgba(200,173,127,0.08), rgba(200,173,127,0.03));
    border-left: 4px solid var(--chanv-beige);
    border-bottom: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    letter-spacing: 0.3px;
}
.changelog-article h3 { font-size: 17px; font-weight: 700; margin: 28px 0 12px; color: #444; }
.changelog-article h4 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; color: #666; }
.changelog-article p {
    margin: 0 0 20px;
    padding-bottom: 18px;
    position: relative;
}
/* Subtle golden separator between consecutive paragraphs */
.changelog-article p + p::before {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, var(--chanv-beige), transparent);
    margin: 0 auto 18px;
    opacity: 0.5;
}
.changelog-article ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
.changelog-article li { padding: 5px 0 5px 24px; position: relative; line-height: 1.7; }
.changelog-article li::before { content: '\2022'; position: absolute; left: 6px; color: var(--chanv-beige); font-weight: 800; font-size: 18px; }
.changelog-article li.depth-1 { padding-left: 42px; font-size: 14px; color: #555; }
.changelog-article li.depth-1::before { left: 26px; content: '\25E6'; }
.changelog-article strong { font-weight: 700; color: var(--chanv-terre); }
.changelog-article em { font-style: italic; color: #777; }
.changelog-article code { background: var(--chanv-fibre); padding: 2px 6px; border-radius: 4px; font-size: 13px; font-family: 'Menlo', 'Monaco', monospace; }

/* Blockquote — Editorial pull-quote with decorative marks */
.changelog-article blockquote {
    border-left: 4px solid var(--chanv-beige);
    background: linear-gradient(135deg, rgba(200,173,127,0.08), rgba(200,173,127,0.02));
    margin: 28px 0;
    padding: 24px 28px 20px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    font-style: italic;
    font-size: 16px;
    color: #555;
    line-height: 1.7;
    position: relative;
}
.changelog-article blockquote::before {
    content: '\201C';
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: 52px;
    font-family: Georgia, serif;
    color: var(--chanv-beige);
    opacity: 0.4;
    line-height: 1;
}
.changelog-article blockquote p { margin: 0; }

/* hr — Ornamental separator with central diamond */
.changelog-article hr {
    border: none;
    height: auto;
    margin: 36px 0;
    text-align: center;
    overflow: visible;
    background: none;
}
.changelog-article hr::before {
    content: '◆';
    display: block;
    position: relative;
    font-size: 12px;
    color: var(--chanv-beige);
    letter-spacing: 8px;
}
.changelog-article hr::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--chanv-beige), transparent);
    margin-top: -7px;
}

.changelog-article a { color: var(--chanv-terre); font-weight: 600; text-decoration: underline; text-decoration-color: var(--chanv-beige); text-underline-offset: 3px; }
.changelog-article a:hover { text-decoration-color: var(--chanv-terre); }

/* Images — Editorial style with shadow and rounded corners */
.changelog-article img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin: 24px auto;
}
.changelog-article .article-img-wrapper {
    margin: 28px 0;
    text-align: center;
}
.changelog-article .article-img-caption {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #999;
    font-style: italic;
    text-align: center;
}

/* Tables — Magazine style with dark header */
.changelog-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 13px; border-radius: 10px; overflow: hidden; border: 1px solid var(--chanv-fibre); }
.changelog-table th { background: var(--chanv-terre); color: #F1EADA; padding: 12px 16px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.changelog-table td { padding: 10px 16px; border-bottom: 1px solid var(--chanv-fibre); }
.changelog-table tr:nth-child(even) { background: rgba(200,173,127,0.04); }
.changelog-table tr:last-child td { border-bottom: none; }
.changelog-table tr:hover { background: rgba(200,173,127,0.08); }

/* Inline "Lire l'article" clickable buttons */
.article-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--chanv-beige), #c9a96e);
    color: white;
    border: none;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    margin-left: 6px;
    vertical-align: middle;
}
.article-inline-link:hover {
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(200,173,127,0.4);
    background: linear-gradient(135deg, #c9a96e, var(--chanv-terre));
}

/* List items that contain article links — card-like style */
.changelog-article li.has-article-link {
    background: linear-gradient(135deg, #FDFAF3, #F9F3E8);
    border: 1px solid rgba(200,173,127,0.2);
    border-radius: var(--radius);
    padding: 14px 20px 14px 24px;
    margin-bottom: 10px;
    transition: var(--transition);
}
.changelog-article li.has-article-link:hover {
    border-color: var(--chanv-beige);
    box-shadow: 0 2px 12px rgba(200,173,127,0.15);
    transform: translateX(4px);
}
.changelog-article li.has-article-link::before {
    top: 16px;
}

/* Hero linked articles buttons */
.actu-hero-linked {
    display: flex;
    gap: 8px;
    margin: 12px 0 4px;
    flex-wrap: wrap;
}
.actu-hero-linked-btn {
    background: rgba(200,173,127,0.15);
    border: 1px solid var(--chanv-beige);
    color: var(--chanv-terre);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.actu-hero-linked-btn:hover {
    background: var(--chanv-beige);
    color: white;
}

/* Linked articles inside article detail */
.article-linked-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid var(--chanv-fibre);
}
.article-linked-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--chanv-terre);
    margin: 0 0 16px;
}
.article-linked-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.article-linked-btn {
    background: linear-gradient(135deg, var(--chanv-beige), #c9a96e);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
}
.article-linked-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-bold);
}

/* Edition badge variant */
.actu-hero-badge.edition,
.changelog-card-badge.edition {
    background: linear-gradient(135deg, var(--chanv-terre), #444);
    color: white;
}
.changelog-card-badge.tech {
    background: linear-gradient(135deg, #4a90d9, #357abd);
    color: white;
}
.changelog-card-badge.production {
    background: linear-gradient(135deg, #C4A97D, #A68B5B);
    color: white;
}
.changelog-card-badge.ventes {
    background: linear-gradient(135deg, #00897B, #00695C);
    color: white;
}
.changelog-card-badge.groupe {
    background: linear-gradient(135deg, #2E7D32, #1B5E20);
    color: white;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .actu-btn { padding: 8px 12px; font-size: 12px; }
    .actu-btn-label { display: none; }
    .actu-title { font-size: 22px; }
    .actu-header { gap: 12px; }
    .actu-hero-card { padding: 20px; }
    .actu-hero-dates { font-size: 17px; }
    .actu-hero-stats { flex-wrap: wrap; gap: 8px; font-size: 12px; }
    .actu-tabs { flex-wrap: wrap; }
    .actu-tab { font-size: 12px; padding: 8px 10px; }
    .changelog-list-grid { grid-template-columns: 1fr; }
    .changelog-article { padding: 20px; font-size: 14px; }
    .changelog-article h1 { font-size: 20px; }
    .changelog-article h2 { font-size: 18px; }
    .changelog-article h3 { font-size: 15px; }
    .changelog-generate-form { flex-direction: column; align-items: stretch; }
    .changelog-generate-btn { margin-left: 0; }
    .changelog-detail-stats-bar { gap: 6px; }
    .changelog-stat-pill { font-size: 11px; padding: 4px 10px; }
    .actu-hero-cta-btn { position: static; margin-top: 12px; width: 100%; }
    .actu-detail-topbar { flex-direction: row; }
}

/* ==================== PRIVATE CARDS ==================== */
.changelog-card.private {
    border: 1px dashed var(--chanv-beige);
    background: #FDFAF3;
}
.changelog-card.private::before { background: linear-gradient(90deg, #999, #bbb); }
.card-private-icon {
    position: absolute; top: 10px; right: 10px; font-size: 14px; opacity: 0.6;
}
.changelog-card-badge.private { background: #F3E5F5; color: #6A1B9A; }

.actu-private-section {
    margin-top: 32px;
    padding: 20px;
    border: 1px dashed var(--chanv-beige);
    border-radius: 12px;
    background: linear-gradient(135deg, #FDFAF3, #F9F3E8);
}
.actu-private-title {
    font-size: 14px;
    font-weight: 700;
    color: #888;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-private-badge {
    display: inline-block;
    background: #F3E5F5;
    color: #6A1B9A;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
    margin-right: 10px;
}

/* ==================== ARCHIVES ==================== */
.actu-archives-btn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 14px;
    border: 1px dashed var(--chanv-beige);
    border-radius: 12px;
    background: transparent;
    color: var(--chanv-terre);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}
.actu-archives-btn:hover {
    background: var(--chanv-fibre);
    border-color: var(--chanv-terre);
}

.actu-archives-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.actu-archives-header h3 { font-size: 18px; font-weight: 700; margin: 0; }

.actu-archives-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.changelog-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

/* ==================== ARTICLE ACTIONS ==================== */
.changelog-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1px solid var(--chanv-fibre);
    border-radius: 8px;
    background: white;
    color: var(--chanv-terre);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}
.btn-action:hover {
    background: var(--chanv-fibre);
    border-color: var(--chanv-beige);
}
.btn-action-danger:hover {
    background: #FFEBEE;
    border-color: #EF5350;
    color: #C62828;
}

/* ==================== ADMIN ROWS ==================== */
.changelog-admin-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    padding: 10px 0;
}
.changelog-admin-row:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 12px;
    margin-bottom: 4px;
}
.changelog-admin-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--chanv-terre);
    min-width: 130px;
    white-space: nowrap;
}
.changelog-admin-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.changelog-admin-dates label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
}
.changelog-admin-hint {
    font-size: 11px;
    color: #888;
    font-style: italic;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .changelog-admin-row {
        flex-wrap: wrap;
        gap: 6px;
    }
    .changelog-admin-dates {
        width: 100%;
    }
}
/* =====================================================================
   --- NOTIFICATION BELL + PANEL (dark sidebar theme) ---
   ===================================================================== */

.sidebar-panel .notif-bell-wrapper {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
}

.notif-bell {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: var(--transition);
    position: relative;
    color: white;
}

.notif-bell:hover {
    background: rgba(221, 203, 164, 0.18);
    border-color: rgba(221, 203, 164, 0.35);
    transform: scale(1.08);
}

.notif-bell.notif-active {
    background: rgba(221, 203, 164, 0.15);
    border-color: var(--chanv-beige);
    box-shadow: 0 0 12px rgba(221, 203, 164, 0.12);
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #E53E3E;
    color: white;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--chanv-terre);
    animation: notifBounce 0.3s ease-out;
}

@keyframes notifBounce {
    0% { transform: scale(0); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* --- Panel dropdown (dark) --- */
.notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 310px;
    max-height: 480px;
    background: #232323;
    border-radius: var(--radius);
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(221, 203, 164, 0.1);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(221, 203, 164, 0.05);
    border-bottom: 1px solid rgba(221, 203, 164, 0.08);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--chanv-beige);
}

.notif-panel-actions { display: flex; gap: 4px; }

.notif-panel-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s;
    color: rgba(255, 255, 255, 0.4);
}

.notif-panel-actions button:hover {
    background: rgba(221, 203, 164, 0.12);
    color: var(--chanv-beige);
}

.notif-list { flex: 1; overflow-y: auto; max-height: 400px; }
.notif-list::-webkit-scrollbar { width: 4px; }
.notif-list::-webkit-scrollbar-thumb { background: rgba(221, 203, 164, 0.15); border-radius: 4px; }

/* --- Notification items --- */
.notif-item {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.notif-item:hover { background: rgba(221, 203, 164, 0.07); }
.notif-item.notif-unread { background: rgba(221, 203, 164, 0.04); border-left: 3px solid var(--chanv-beige); }
.notif-item.notif-read { opacity: 0.5; }

.notif-item-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; padding-top: 2px; }
.notif-item-body { flex: 1; min-width: 0; }

.notif-item-title {
    font-weight: 700;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 3px;
    white-space: normal;
    word-break: break-word;
}

.notif-item-text {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.notif-item-time { font-size: 10px; color: rgba(221, 203, 164, 0.35); margin-top: 4px; }
.notif-empty, .notif-loading { padding: 30px 16px; text-align: center; color: rgba(255, 255, 255, 0.3); font-size: 13px; }

/* =====================================================================
   --- NOTIFICATION DETAIL MODAL ---
   ===================================================================== */

.notif-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.15s ease-out;
}

.notif-modal {
    background: #1e1e1e;
    border: 1px solid rgba(221, 203, 164, 0.12);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(221, 203, 164, 0.06);
    animation: modalSlideUp 0.25s ease-out;
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid rgba(221, 203, 164, 0.08);
    background: rgba(221, 203, 164, 0.03);
}

.notif-modal-header-icon { font-size: 28px; flex-shrink: 0; padding-top: 2px; }
.notif-modal-header-info { flex: 1; min-width: 0; }

.notif-modal-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 6px;
    word-break: break-word;
    line-height: 1.3;
}

.notif-modal-meta {
    font-size: 11px;
    color: rgba(221, 203, 164, 0.45);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.notif-modal-source {
    background: rgba(221, 203, 164, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    color: var(--chanv-beige);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.notif-modal-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.15s;
    flex-shrink: 0;
}
.notif-modal-close:hover { background: rgba(255, 255, 255, 0.1); color: white; }

.notif-modal-body { padding: 22px; overflow-y: auto; flex: 1; }

.notif-modal-text {
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    word-break: break-word;
    white-space: pre-wrap;
}

.notif-modal-footer {
    padding: 14px 22px;
    border-top: 1px solid rgba(221, 203, 164, 0.06);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.notif-modal-btn {
    background: rgba(221, 203, 164, 0.1);
    border: 1px solid rgba(221, 203, 164, 0.18);
    color: var(--chanv-beige);
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.notif-modal-btn:hover { background: rgba(221, 203, 164, 0.18); border-color: var(--chanv-beige); }

/* =====================================================================
   "Mes demandes" — vue plein écran
   ===================================================================== */
.mytickets-view {
    max-width: 900px;
    margin: -10px auto 60px auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}
.mytickets-container { animation: fadeIn 0.3s ease; }
.mytickets-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.mytickets-back {
    background: var(--chanv-terre);
    border: none;
    font-size: 13px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    padding: 8px 18px;
    border-radius: 50px;
    transition: var(--transition);
    font-family: inherit;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}
.mytickets-back:hover {
    background: #1a1a1a;
    transform: translateX(-3px);
}
.mytickets-title-block { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mytickets-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--chanv-terre);
    margin: 0;
    line-height: 1.2;
}
.mytickets-subtitle { font-size: 13px; color: #888; margin: 0; }

.mytickets-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.mytickets-filter {
    background: white;
    border: 1px solid #e2e2e2;
    color: #555;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.mytickets-filter:hover { border-color: var(--chanv-terre); color: var(--chanv-terre); }
.mytickets-filter.active {
    background: var(--chanv-terre);
    color: white;
    border-color: var(--chanv-terre);
}

.mytickets-list { display: flex; flex-direction: column; gap: 12px; }
.mytickets-loading, .mytickets-empty {
    padding: 40px 20px; text-align: center; color: #888;
    background: #fafafa; border-radius: 12px;
}

.mt-card {
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mt-card:hover {
    border-color: var(--chanv-terre);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.mt-card-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mt-card-row-top { font-size: 12px; }
.mt-card-row-bottom { font-size: 12px; color: #888; }
.mt-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-card-date { color: #999; font-size: 11px; white-space: nowrap; }
.mt-card-message {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.mt-card-machine { color: #666; font-size: 12px; }
.mt-card-bclink {
    color: var(--chanv-terre, #555);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}
.mt-card-bclink:hover { text-decoration: underline; }

/* Badges */
.mt-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.4;
}
.mt-badge-feature { background: #FEF3C7; color: #92400E; }
.mt-badge-bug { background: #FEE2E2; color: #991B1B; }
.mt-badge-support { background: #E0E7FF; color: #3730A3; }
.mt-badge-open { background: #DCFCE7; color: #166534; }
.mt-badge-resolved { background: #E5E7EB; color: #374151; }

/* Détail */
.mt-detail { font-size: 14px; color: #333; }
.mt-detail-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.mt-detail-date { font-size: 12px; color: #888; margin-left: auto; }
.mt-detail-title {
    font-size: 20px; font-weight: 700; color: var(--chanv-terre);
    margin: 0 0 16px 0; line-height: 1.3;
}
.mt-detail-meta {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 13px; color: #555;
    background: #f8f8f8; padding: 12px 14px; border-radius: 10px;
    margin-bottom: 16px;
}
.mt-detail-meta a { color: var(--chanv-terre); text-decoration: none; font-weight: 600; }
.mt-detail-meta a:hover { text-decoration: underline; }
.mt-detail-message {
    background: #fafafa;
    padding: 14px 16px;
    border-radius: 10px;
    white-space: pre-wrap;
    line-height: 1.5;
    margin-bottom: 18px;
    border-left: 3px solid var(--chanv-beige, #DDCBA4);
}

.mt-cadrage {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.mt-cadrage-title { font-weight: 700; color: #78350F; margin-bottom: 6px; font-size: 14px; }
.mt-cadrage-status { font-size: 13px; color: #92400E; margin-bottom: 8px; }
.mt-cadrage-link {
    display: inline-block; margin-right: 10px;
    color: #78350F; font-weight: 600; font-size: 13px;
    text-decoration: none;
}
.mt-cadrage-link:hover { text-decoration: underline; }
.mt-cadrage-meta { font-size: 11px; color: #92400E; opacity: 0.7; margin-top: 6px; }

.mt-comments { margin-bottom: 18px; }
.mt-comments-title { font-weight: 700; color: #333; margin-bottom: 10px; font-size: 14px; }
.mt-comments-empty {
    color: #999; font-style: italic; font-size: 13px;
    padding: 12px; text-align: center;
}
.mt-comment {
    background: #f8f8f8;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.mt-comment-hdr {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 4px; gap: 8px;
}
.mt-comment-author { font-weight: 700; font-size: 13px; color: #333; }
.mt-comment-date { font-size: 11px; color: #999; }
.mt-comment-text { font-size: 13px; color: #444; white-space: pre-wrap; line-height: 1.4; }

.mt-add-comment { margin-top: 14px; }
.mt-add-comment textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    box-sizing: border-box;
}
.mt-add-comment textarea:focus {
    outline: none; border-color: var(--chanv-terre);
}
.mt-detail-actions {
    display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; flex-wrap: wrap;
}
.mt-resolved-note {
    text-align: center; padding: 12px; color: #666; font-style: italic;
    background: #f5f5f5; border-radius: 10px; margin-top: 12px; font-size: 13px;
}

/* --- Drive Access Cards (dans tab Agent IA) --- */
/* Drive ACL — Table compacte */
.drive-access-cards { margin-top: 8px; }
.drive-acl-table-wrapper {
    max-height: 280px; overflow-y: auto;
    border: 1px solid var(--chanv-fibre); border-radius: 10px;
    background: #fafafa;
}
.drive-acl-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.drive-acl-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: #f2ede4; color: var(--chanv-terre);
    padding: 8px 12px; font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid var(--chanv-fibre); text-align: left;
}
.drive-acl-row td { padding: 8px 12px; border-bottom: 1px solid rgba(0,0,0,0.05); vertical-align: middle; }
.drive-acl-row:last-child td { border-bottom: none; }
.drive-acl-row:hover { background: rgba(201,168,118,0.06); }
.drive-acl-name { font-weight: 600; color: var(--chanv-terre); white-space: nowrap; }
.drive-acl-perms { text-align: center; white-space: nowrap; }
.drive-acl-perm-badge { font-size: 14px; margin: 0 1px; }
.drive-acl-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.drive-acl-tag {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 12px;
    font-size: 11px; font-weight: 500; white-space: nowrap;
}
.drive-acl-tag.group { background: rgba(201,168,118,0.12); color: var(--chanv-terre); }
.drive-acl-tag.email { background: #e8f4fd; color: #2b6cb0; }
.drive-acl-actions { text-align: right; white-space: nowrap; }
.drive-acl-action-btn {
    background: none; border: none; cursor: pointer; font-size: 13px;
    padding: 3px 5px; border-radius: 6px; opacity: 0.5; transition: opacity 0.2s;
}
.drive-acl-action-btn:hover { opacity: 1; }
.drive-acl-action-btn.delete:hover { background: rgba(255,100,100,0.1); }
.drive-acl-count {
    text-align: right; font-size: 11px; color: #999;
    padding: 6px 12px 0;
}

/* =====================================================================
   Vue "Plan" — bâtiment + capteurs Temp Stick
   ===================================================================== */
.plan-view {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    margin-top: 20px;
}
.plan-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 18px 0;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
    scrollbar-width: thin;
}
.plan-tabs:empty { display: none; }
.plan-tab {
    background: transparent;
    border: 1px solid transparent;
    color: #666;
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    bottom: -1px;
}
.plan-tab:hover {
    color: var(--chanv-terre);
    background: rgba(221,203,164,0.15);
}
.plan-tab-active {
    color: var(--chanv-terre);
    background: white;
    border-color: #eee;
    border-bottom-color: white;
    cursor: default;
}
.plan-tab-count {
    background: var(--chanv-beige, #DDCBA4);
    color: var(--chanv-terre);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    line-height: 1.4;
}
.plan-tab-active .plan-tab-count {
    background: var(--chanv-terre);
    color: white;
}
.plan-tab-empty {
    color: #d97706;
    font-size: 18px;
    line-height: 1;
}
.plan-tab-rename {
    margin-left: 4px;
    opacity: 0.5;
    padding: 6px 10px;
    font-size: 12px;
}
.plan-tab-rename:hover { opacity: 1; background: transparent; }

.plan-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    gap: 12px;
    flex-wrap: wrap;
}
.plan-toolbar-left, .plan-toolbar-right {
    display: flex; gap: 8px; align-items: center;
}
.plan-btn {
    background: white;
    border: 1px solid #ddd;
    color: #333;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}
.plan-btn:hover { background: var(--chanv-beige, #DDCBA4); border-color: var(--chanv-terre); }
.plan-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.plan-btn-primary {
    background: var(--chanv-terre);
    color: white;
    border-color: var(--chanv-terre);
}
.plan-btn-primary:hover { background: #1a1a1a; }
.plan-zoom-level {
    font-size: 12px;
    color: #888;
    min-width: 48px;
    text-align: center;
    font-weight: 600;
}

.plan-status {
    padding: 8px 18px;
    font-size: 12px;
    color: #777;
    border-bottom: 1px solid #f0f0f0;
}
.plan-status-warn { color: #92400E; background: #FEF3C7; }
.plan-status-err  { color: #991B1B; background: #FEE2E2; }

.plan-stage {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
    background:
        linear-gradient(45deg, #f8f8f8 25%, transparent 25%),
        linear-gradient(-45deg, #f8f8f8 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f8f8f8 75%),
        linear-gradient(-45deg, transparent 75%, #f8f8f8 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, 10px 0px;
    cursor: grab;
    user-select: none;
}
.plan-stage-grabbing { cursor: grabbing; }
.plan-edit-mode .plan-stage { cursor: default; }

.plan-canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    transition: transform 0.05s linear;
}

#planImage {
    display: block;
    max-width: none;
    pointer-events: none; /* on capture les events sur le stage */
    user-select: none;
}

.plan-markers {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

/* --- Markers --- */
/* Le marker est positionné en % du canvas (qui se scale). Pour rester lisible
   à tout zoom, le marker se contre-scale via --plan-scale (set par JS).
   Limites : on borne entre 0.5x (sinon trop gros à fort zoom) et 4x. */
.plan-marker {
    position: absolute;
    width: 24px; height: 24px;
    transform: translate(-50%, -50%) scale(clamp(0.6, calc(1 / var(--plan-scale, 1)), 4));
    transform-origin: center center;
    pointer-events: auto;
    cursor: pointer;
    z-index: 2;
}
.plan-edit-mode .plan-marker[data-editable="true"] {
    cursor: grab;
}
.plan-edit-mode .plan-marker[data-editable="true"]:active { cursor: grabbing; }

.plan-marker-dot {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #10B981;
    border: 3px solid white;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.35);
    animation: planPulse 2s infinite ease-out;
}
.plan-marker-offline .plan-marker-dot { background: #9CA3AF; animation: none; }
.plan-marker-unknown .plan-marker-dot { background: #F59E0B; animation: none; }
@keyframes planPulse {
    0%   { box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.35), 0 0 0 0 rgba(16,185,129,0.5); }
    70%  { box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.35), 0 0 0 16px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.35), 0 0 0 0 rgba(16,185,129,0); }
}

/* Label permanent (temp + humidité) — visible en tout temps */
.plan-marker-label {
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(20,20,20,0.93);
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.plan-marker-offline .plan-marker-label { background: rgba(120,120,120,0.93); }
.plan-marker-temp { color: #FCA5A5; }
.plan-marker-hum  { color: #93C5FD; }
.plan-marker-label::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: rgba(20,20,20,0.93);
}
.plan-marker-offline .plan-marker-label::before { border-right-color: rgba(120,120,120,0.93); }

/* Bubble détail (nom + last check-in) — au survol uniquement */
.plan-marker-bubble {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: #222;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    border: 1px solid #e2e2e2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 3;
}
.plan-marker:hover .plan-marker-bubble {
    opacity: 1;
}
.plan-marker-bubble::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: white;
}
.plan-marker-name { font-weight: 700; color: var(--chanv-terre, #555); }
.plan-marker-time { font-size: 11px; color: #888; margin-top: 2px; }

/* --- Tray (capteurs à placer) — overlay en coords écran, hors canvas transformé --- */
.plan-tray-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 20;
}
.plan-tray-container:empty { display: none; }
.plan-tray {
    position: absolute;
    top: 16px; right: 16px;
    width: 240px;
    background: rgba(255,255,255,0.97);
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    pointer-events: auto;
    max-height: calc(100% - 32px);
    overflow-y: auto;
    backdrop-filter: blur(4px);
}
.plan-tray-hint {
    margin-top: 8px;
    font-size: 10px; color: #999;
    font-style: italic; text-align: center;
}
.plan-tray-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #555; margin-bottom: 8px;
}
.plan-tray-list { display: flex; flex-direction: column; gap: 4px; }
.plan-tray-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #fafafa;
    border-radius: 8px;
    font-size: 12px;
    cursor: grab;
    transition: var(--transition);
    user-select: none;
}
.plan-tray-item:hover {
    background: var(--chanv-beige, #DDCBA4);
    transform: translateX(-2px);
}
.plan-tray-item:active { cursor: grabbing; }
.plan-tray-name { font-weight: 600; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-tray-temp { font-weight: 700; color: #666; }

/* =====================================================================
   Chat employés (dev-only)
   ===================================================================== */
.btn-chat {
    background: white;
    color: var(--chanv-terre, #333);
    border: 1px solid #ddd;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-chat:hover { background: var(--chanv-beige, #DDCBA4); }
.chat-nav-badge {
    background: #E53E3E;
    color: white;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.chat-view {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #f5f5f5;
    z-index: 50;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.2s ease;
}
.chat-header {
    background: var(--chanv-terre, #282828);
    color: white;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.chat-back {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.chat-back:hover { background: rgba(255,255,255,0.1); }
.chat-title { font-size: 18px; margin: 0; font-weight: 700; }
.chat-header-spacer { flex: 1; }

.chat-body {
    flex: 1;
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 0;
    overflow: hidden;
}

/* --- Sidebar conversations --- */
.chat-sidebar {
    background: white;
    border-right: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.chat-sidebar-actions {
    padding: 14px;
    border-bottom: 1px solid #f0f0f0;
}
.chat-new-btn { width: 100%; }
.chat-convs-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Onglets Conversations / Salons au-dessus de la liste */
.chat-tabs-row { display: flex; gap: 6px; padding: 0 14px 10px; }
.chat-tab {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 10px;
    border: 1px solid #e8e2d6; border-radius: 10px;
    background: #faf7f0; color: #6b5a3a;
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.chat-tab:hover { background: #f1ead9; }
.chat-tab.active { background: var(--chanv-terre); border-color: var(--chanv-terre); color: #fff; }
.chat-tab-badge {
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; background: #e53935; color: #fff;
    font-size: 10.5px; font-weight: 800; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.chat-tab-badge.hidden { display: none; }
body[data-gtheme="dark"] .chat-tab { background: #241F19; border-color: rgba(221, 203, 164, 0.2); color: #d9c9a5; }
body[data-gtheme="dark"] .chat-tab:hover { background: #2E271E; }
body[data-gtheme="dark"] .chat-tab.active { background: #D9BC77; border-color: #D9BC77; color: #241F19; }

/* Mobile façon Messenger : le gros bouton laisse sa ligne au ✏️ rond de
   l'en-tête « Chat employés » ; la recherche garde toute sa largeur.
   Desktop : inchangé (bouton pleine largeur, ✏️ masqué). */
.chat-sidebar-top { display: contents; }
.chat-compose-btn {
    display: none;
    width: 36px; height: 36px; flex: none;
    border: none; border-radius: 50%;
    background: var(--chanv-beige, #DDCBA4); color: var(--chanv-terre, #282828);
    font-size: 16px; line-height: 1; cursor: pointer;
    align-items: center; justify-content: center;
    transition: transform 0.1s;
}
.chat-compose-btn:active { transform: scale(0.92); }
@media (max-width: 768px) {
    .chat-compose-btn { display: inline-flex; }
    .chat-sidebar-actions { display: none; }
}

.chat-conv-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
    position: relative;
    align-items: center;
}
.chat-conv-item:hover { background: #fafafa; }
.chat-conv-active { background: rgba(221,203,164,0.18); }
.chat-conv-active:hover { background: rgba(221,203,164,0.25); }
/* Non-lu : un FOND et un filet à gauche, pas seulement du gras.
   Ticket J6U7z72o9lkT9ZpQq9rX (M. Parenteau, 16/09) — « faudrait que la convo
   soit surlignée en couleur différente quand on n'a pas cliqué dessus ». La
   réponse réflexe a été « ça le fait déjà » : c'est faux, et la capture jointe
   au ticket explique pourquoi on le croit. Le non-lu ne posait AUCUN fond —
   seulement la graisse du nom et une pastille de 10px coincée dans le coin des
   boutons épingle/sourdine. Pire, `--chanv-terre` vaut #282828 quand le nom
   déjà lu est en #222 : à l'œil, la « couleur du non-lu » n'existait pas.
   Le seul fond de la liste était `.chat-conv-active`, réservé à la conversation
   OUVERTE — d'où la méprise : le beige qu'on voit sur la capture signale le fil
   qu'on regarde, pas un nouveau message.
   Traitement repris tel quel des messages récents d'Aujourd'hui (`.trm-unread`,
   css/shell.css l. 605) : fond teinté + `inset 3px` d'accent. Deux classes dans
   le sélecteur (`.chat-conv-item.chat-conv-unread`) pour passer devant
   `.chat-conv-active` et devant `:hover` — sans ça, survoler une conversation
   non lue effaçait justement le signal qu'on vient d'ajouter. */
.chat-conv-item.chat-conv-unread { background: rgba(168,134,63,.17); box-shadow: inset 4px 0 #A8863F; }
.chat-conv-item.chat-conv-unread:hover { background: rgba(168,134,63,.25); }
.chat-conv-unread .chat-conv-name { font-weight: 800; color: #1d1d1d; }
.chat-conv-unread .chat-conv-preview { color: #333; font-weight: 700; }

.chat-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 16px;
}
.chat-avatar-room { background: var(--chanv-terre, #555); font-size: 18px; }
.chat-avatar-letter { background: var(--chanv-beige, #C9A876); color: var(--chanv-terre); }

/* Groupes : duo d'avatars en diagonale (piste A retenue le 2026-09-04 —
   plan « avatars conversations de groupe »). Tailles en %, donc le même
   gabarit sert la liste Communications (40px), le quai (30px) et les
   bulles réduites (48px). Classes partagées chat.js / quai.js. */
.chat-avatar-duo { position: relative; background: none; font-size: 14px;
    --duo-anneau: #fff; }
body[data-gtheme="dark"] .chat-avatar-duo { --duo-anneau: #2a2724; }
.chat-avatar-duo .chat-duo-arriere,
.chat-avatar-duo .chat-duo-devant { position: absolute; width: 68%; height: 68%; }
.chat-avatar-duo .chat-duo-arriere { top: 0; right: 0; }
.chat-avatar-duo .chat-duo-devant { bottom: 0; left: 0; }
.chat-duo-av { width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    display: flex; align-items: center; justify-content: center; }
.chat-avatar-duo .chat-duo-devant .chat-duo-av { box-shadow: 0 0 0 2px var(--duo-anneau); }
.chat-duo-lettre { background: var(--chanv-beige, #C9A876); color: var(--chanv-terre, #555); font-weight: 700; }
.chat-duo-plus { position: absolute; bottom: -2px; right: -2px;
    min-width: 42%; height: 42%; padding: 0 2px; box-sizing: border-box;
    border-radius: 999px; background: var(--chanv-terre, #555); color: #fff;
    font-size: .62em; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--duo-anneau); }
.gq-avatar.chat-avatar-duo { font-size: 11px; }
.gq-bulle .chat-avatar-duo { font-size: 15px; }

.chat-conv-info { flex: 1; min-width: 0; }
.chat-conv-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.chat-conv-name {
    font-weight: 600;
    font-size: 14px;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-conv-time { font-size: 11px; color: #999; white-space: nowrap; }
.chat-conv-preview {
    font-size: 13px;
    color: #777;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}
.chat-conv-dot {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    width: 10px; height: 10px;
    background: #E53E3E;
    border-radius: 50%;
}

/* --- Pane messages --- */
.chat-pane {
    background: white;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.chat-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%;
    color: #999;
    text-align: center;
    padding: 40px;
}
.chat-empty-icon { font-size: 48px; margin-bottom: 16px; }

.chat-pane-header {
    padding: 14px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.chat-pane-title { flex: 1; min-width: 0; }
.chat-pane-name {
    font-weight: 700; font-size: 16px; color: var(--chanv-terre);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-pane-subtitle { font-size: 12px; color: #999; }
.chat-pane-edit {
    background: transparent; border: none; cursor: pointer;
    font-size: 18px; opacity: 0.5; padding: 6px;
    transition: opacity 0.15s;
}
.chat-pane-edit:hover { opacity: 1; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-day-sep {
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin: 16px 0 8px;
    position: relative;
}
.chat-day-sep::before, .chat-day-sep::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 80px);
    height: 1px;
    background: #e5e5e5;
}
.chat-day-sep::before { left: 0; }
.chat-day-sep::after { right: 0; }

.chat-msg {
    display: flex;
    gap: 10px;
    padding: 4px 0;
}
.chat-msg-grouped { margin-top: -4px; }
.chat-msg-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--chanv-beige, #DDCBA4);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--chanv-terre); font-size: 14px;
}
.chat-msg-avatar-letter { background: var(--chanv-beige, #DDCBA4); }
.chat-msg-avatar-spacer { width: 36px; flex-shrink: 0; }
.chat-msg-body { flex: 1; min-width: 0; }
.chat-msg-hdr {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}
.chat-msg-author { font-weight: 700; color: var(--chanv-terre); font-size: 13px; }
.chat-msg-time { font-size: 11px; color: #6b6b6b; }

/* ── Modifier un message : le champ d'écriture, dans la bulle ──────────────
   Ticket ZvSISxOd (D. Paquette, 25/08) : « on ne voit pas la même chose que
   quand on écrit ». Même défaut que les commentaires, un écran plus loin.
   `.chat-msg-editbox` n'avait JUSQU'ICI aucune règle : tout son style était en
   attributs `style=` dans chat.js, ce qui ne pouvait pas habiller les éléments
   que l'éditeur enrichi insère.
   La carte claire n'est pas une coquetterie. On ne modifie QUE ses propres
   messages, et `.chat-msg-own .chat-msg-content` est presque noir
   (--chanv-terre #282828) avec texte blanc ; or `.grt-editor` est taillé pour
   le composeur — `color:#2b2620` sur fond transparent. Posé nu dans la bulle,
   c'est brun sur noir, illisible. La boîte d'avant y échappait par accident :
   un <textarea> sans `background` est blanc par défaut. On rend donc cette
   surface claire explicite, au lieu de dépendre d'un défaut de navigateur. */
.chat-msg-editwrap {
    background: #fff; border: 1px solid rgba(40,34,24,.10);
    border-radius: 10px; padding: 2px 2px 6px; text-align: left;
    /* Ancre de la liste @mention (ticket ChR5wbyUPAXc6fYLncVp) : `.chat-mention-pop`
       se place en `position:absolute`, elle a besoin d'un parent positionné. Sans
       lui, elle remonterait au premier ancêtre positionné — le panneau du fil —
       et s'afficherait loin du champ qu'elle complète. */
    position: relative;
}
/* La MÊME liste que dans le composeur, mais posée dans une bulle. Or on ne
   modifie que SES messages, et `.chat-msg-own .chat-msg-content` écrit en
   BLANC : `.chat-mention-item { color: inherit }` aurait donné du blanc sur le
   fond blanc de la liste — les noms invisibles, sur le seul chemin qui existe.
   Même correction que pour `.chat-msg-editbox` juste en dessous : on rend
   explicite ce que le composeur tenait de son contexte clair. */
.chat-msg-editwrap .chat-mention-pop { color: #2b2620; }
body[data-gtheme="dark"] .chat-msg-editwrap .chat-mention-pop { color: #efe7d6; }
/* Pas de `resize` : la boîte grandit avec le texte (autoGrow) et s'arrête à
   FIELD_MAX_H — d'où le seul `overflow-y`, jumeau de .tasks-comment-editbox. */
.chat-msg-editbox {
    width: 100%; box-sizing: border-box; background: transparent; border: none;
    resize: none; outline: none; overflow-y: auto;
    font-family: inherit; font-size: 14px; line-height: 1.45;
    color: #2b2620; padding: 8px 10px;
}
.chat-msg-editbar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-top: 2px; padding: 0 6px;
}
.chat-msg-editbar .btn { padding: 4px 14px; font-size: 12px; }
.chat-msg-edithint { font-size: 11px; opacity: .6; color: #2b2620; }
/* Le bouton « Aa » est calibré pour le composeur (42 px) : dans une bulle il
   écraserait la rangée. `white-space` n'est PAS décoratif — `.chat-msg-content`
   porte `word-wrap:break-word` (utile pour les longues URL d'un message), qui
   s'hérite jusque dans le bouton et y coupait « Aa » en « A » / « a » sur deux
   lignes. Visible seulement sur la capture, pas dans le DOM. */
.chat-msg-editwrap .grt-fmt-btn {
    width: 34px; height: 34px; font-size: 15px; border-radius: 9px;
    white-space: nowrap; word-wrap: normal;
}
body[data-gtheme="dark"] .chat-msg-editwrap {
    background: #2f2b24; border-color: rgba(221,203,164,.16);
}
body[data-gtheme="dark"] .chat-msg-editbox,
body[data-gtheme="dark"] .chat-msg-editwrap .grt-editor,
body[data-gtheme="dark"] .chat-msg-edithint { color: #efe7d6; }
.chat-msg-content {
    background: white;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 14px;
    color: #222;
    line-height: 1.4;
    word-wrap: break-word;
    max-width: 80%;
    display: inline-block;
}
.chat-msg-own .chat-msg-content {
    background: var(--chanv-terre, #2d3748);
    border-color: var(--chanv-terre, #2d3748);
    color: white;
}
.chat-msg-own .chat-msg-author { display: none; }

/* --- Alignement type Basecamp : mes messages à DROITE, les autres à GAUCHE --- */
.chat-msg-own { flex-direction: row-reverse; }
.chat-msg-own .chat-msg-body { display: flex; flex-direction: column; align-items: flex-end; }
.chat-msg-own .chat-msg-hdr { flex-direction: row-reverse; }
.chat-msg-other .chat-msg-body { display: flex; flex-direction: column; align-items: flex-start; }
.chat-msg-own .chat-msg-content,
.chat-msg-other .chat-msg-content { max-width: 100%; }

/* --- Réactions emoji --- */
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-msg-own .chat-reactions { justify-content: flex-end; }
.chat-reaction {
    display: inline-flex; align-items: center; gap: 3px;
    background: #f1f1f1; border: 1px solid #e2e2e2; border-radius: 12px;
    padding: 1px 8px; font-size: 13px; cursor: pointer; line-height: 1.5;
    transition: background .12s, border-color .12s;
}
.chat-reaction span { font-size: 11px; font-weight: 700; color: #666; }
.chat-reaction:hover { background: #e8e8e8; }
.chat-reaction-mine { background: #E9E2D0; border-color: var(--chanv-or, #A8863F); }
.chat-reaction-mine span { color: var(--chanv-terre, #2d3748); }

/* Palette de réaction rapide (au clic sur 😊) */
.chat-react-palette {
    position: fixed; z-index: 400;
    display: flex; gap: 2px; padding: 4px 6px;
    background: #fff; border: 1px solid #e2e2e2; border-radius: 20px;
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.chat-react-choice {
    border: none; background: none; cursor: pointer; font-size: 20px;
    padding: 3px; border-radius: 8px; line-height: 1; transition: transform .1s, background .1s;
}
.chat-react-choice:hover { transform: scale(1.25); background: #f1f1f1; }
.chat-react-more { font-weight: 700; color: #888; border-left: 1px solid #eee; margin-left: 2px; padding-left: 6px; }
/* Palette déployée (au clic sur ＋) : grille scrollable de tous les emojis */
.chat-react-palette-full { flex-wrap: wrap; width: 300px; max-height: 240px; overflow-y: auto; gap: 1px; }
.chat-react-palette-full .chat-react-choice { font-size: 18px; }
body[data-gtheme="dark"] .chat-react-more { color: rgba(255,255,255,.5); border-left-color: rgba(221,203,164,.14); }

/* --- Historique au scroll-up : indicateur discret en haut du flux ---
   (réutilise l'animation chat-typing-dots, dorée → lisible en dark mode d'office) */
.chat-hist-loading { display: flex; justify-content: center; padding: 8px 0 4px; opacity: .7; }

/* --- Indicateur de saisie (3 points sautillants) --- */
.chat-typing { display: flex; align-items: center; gap: 8px; padding: 6px 4px 2px; }
.chat-typing-dots { display: inline-flex; gap: 3px; }
.chat-typing-dots i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--chanv-or, #A8863F); display: inline-block;
    animation: chatTypingBounce 1.2s infinite ease-in-out both;
}
.chat-typing-dots i:nth-child(1) { animation-delay: -0.24s; }
.chat-typing-dots i:nth-child(2) { animation-delay: -0.12s; }
.chat-typing-txt { font-size: 12px; color: #888; font-style: italic; }
@keyframes chatTypingBounce {
    0%, 80%, 100% { transform: scale(0.5); opacity: .5; }
    40% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-typing-dots i { animation: none; opacity: .8; }
}

/* --- Gandalf bot messages --- */
/* Avatar du bot = icône de l'app (img) — plus de pastille emoji violette */
.chat-msg-avatar-bot {
    background: #241F19;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}
/* Message ADRESSÉ à Gandalf : le /gandalf est masqué, la bulle prend un
   contour violet « magicien » bien visible (même signature que le mode du
   composeur). S'applique aussi à tous les messages de l'utilisateur dans la
   conversation dédiée Gandalf. */
/* Pastille « ⬇ Nouveaux messages » : sticky dans la liste — visible quand on
   lit plus haut et qu'un message arrive, sans JAMAIS déplacer la vue. */
.chat-newmsg-pill { position: sticky; bottom: 10px; left: 50%; transform: translateX(-50%);
    display: block; margin: 8px auto 0; border: none; cursor: pointer; z-index: 5;
    background: var(--chanv-terre, #6B5A3A); color: #fff; font-weight: 700; font-size: 13px;
    border-radius: 999px; padding: 8px 16px; box-shadow: 0 4px 14px rgba(40,34,24,.35); }
.chat-newmsg-pill:hover { filter: brightness(1.1); }
body[data-gtheme="dark"] .chat-newmsg-pill { background: #DDCBA4; color: #2b2415; }

/* PAS de fond violet : il écrasait le fond de la bulle (texte blanc illisible
   en clair). Le contour + accent + halo portent la signature, la bulle garde
   ses couleurs d'origine (donc son contraste). */
.chat-msg-togandalf .chat-msg-content {
    border: 2px solid rgba(142, 111, 199, 0.9);
    border-right-width: 4px; /* accent côté bulle (messages à soi = à droite) */
    box-shadow: 0 0 12px rgba(142, 111, 199, 0.4);
}
body[data-gtheme="dark"] .chat-msg-togandalf .chat-msg-content {
    border-color: rgba(167, 139, 250, 0.85);
    box-shadow: 0 0 14px rgba(167, 139, 250, 0.35);
}
.chat-msg-bot .chat-msg-content {
    background: linear-gradient(135deg, #EEF2FF 0%, #F3E8FF 100%);
    border-color: #C7D2FE;
    color: #1E1B4B;
    position: relative;
}
.chat-msg-bot .chat-msg-content::before {
    content: '';
    position: absolute;
    left: -1px; top: -1px; bottom: -1px;
    width: 3px;
    background: linear-gradient(180deg, #6366F1, #8B5CF6);
    border-radius: 12px 0 0 12px;
}
.chat-msg-author-bot {
    color: #6366F1 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chat-msg-author-tag {
    background: #6366F1;
    color: white;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.chat-empty-msgs {
    text-align: center; color: #999;
    padding: 40px 20px;
    font-size: 14px;
}

/* Offre de supprimer une conversation vide. Discrète et non alarmante : elle
   n'apparaît QUE s'il n'y a rien à perdre (aucun message vivant), ce qui est
   aussi la raison pour laquelle elle ne demande pas de confirmation. */
.chat-dispose {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: wrap;
    padding: 18px 20px 28px;
    text-align: center; color: #999; font-size: 13px;
}
.chat-dispose button {
    background: none; border: 1px solid #ddd; border-radius: 999px;
    padding: 6px 14px; font: inherit; color: #777; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.chat-dispose button:hover:not(:disabled) { border-color: #c96; color: #a55; background: #fff8f5; }
.chat-dispose button:disabled { opacity: .5; cursor: default; }
body[data-gtheme="dark"] .chat-dispose button { border-color: #444; color: #999; }
body[data-gtheme="dark"] .chat-dispose button:hover:not(:disabled) { border-color: #a76; color: #d88; background: #2a1f1c; }

/* --- Composer --- */
.chat-composer {
    padding: 12px 16px;
    background: white;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.chat-composer-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    min-width: 0;
}
.chat-composer textarea {
    flex: 1;
    min-width: 0;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 16px; /* < 16px = auto-zoom iOS au focus */
    line-height: 1.4;
    resize: none;
    min-height: 42px;
    max-height: 160px;
    outline: none;
    box-sizing: border-box;
}
.chat-composer textarea:focus { border-color: var(--chanv-terre); }
.chat-tool-btn {
    width: 42px; height: 42px;
    flex-shrink: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: white;
    font-size: 17px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: background 0.15s, border-color 0.15s;
}
.chat-tool-btn:hover { background: #f5f1e8; border-color: var(--chanv-terre); }
/* Groupe d'outils à gauche (façon Messenger) : se replie derrière la flèche › à la saisie. */
.chat-tools-left { display: inline-flex; gap: 8px; align-items: flex-end; flex: 0 0 auto; min-width: 0; }
.chat-tools-expand { display: none; font-size: 22px; font-weight: 700; color: var(--chanv-terre); }
.chat-composer-row.tools-collapsed .chat-tools-left { display: none; }
.chat-composer-row.tools-collapsed .chat-tools-expand { display: flex; }
.chat-send {
    white-space: nowrap;
    width: 42px; height: 42px; min-width: 42px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
}
/* Envoyer masqué tant qu'il n'y a rien à envoyer (pas encore dans le champ) → élargit le champ */
.chat-composer-row .chat-send { display: none; }
.chat-composer-row.can-send .chat-send { display: flex; }
/* Pas de scrollbar dans le champ (elle masquait le radius à droite, effet bizarre) */
.chat-composer textarea { scrollbar-width: none; }
.chat-composer textarea::-webkit-scrollbar { display: none; }
/* Menu du « + » : petite feuille qui remonte au-dessus du composeur */
.chat-composer { position: relative; }
.chat-plus-menu {
    position: absolute; bottom: calc(100% + 8px); left: 12px; z-index: 40;
    background: var(--chanv-blanc, #fff); border: 1px solid rgba(40,34,24,.12);
    border-radius: 14px; box-shadow: 0 12px 32px rgba(40,34,24,.20);
    padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 200px;
}
.chat-plus-menu.hidden { display: none; }
.chat-plus-menu button {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
    border: none; background: none; padding: 11px 12px; border-radius: 10px; cursor: pointer;
    font-size: 14px; font-weight: 500; color: inherit;
}
.chat-plus-menu button:hover { background: rgba(168,134,63,.12); }
.chat-plus-btn { font-size: 22px; font-weight: 400; line-height: 1; }
body[data-gtheme="dark"] .chat-plus-menu { background: #2b2823; border-color: rgba(221,203,164,.16); }
body[data-gtheme="dark"] .chat-plus-menu button { color: rgba(255,255,255,.9); } /* sinon noir sur fond sombre */
body[data-gtheme="dark"] .chat-plus-menu button:hover { background: rgba(221,203,164,.12); }
.chat-plus-check { margin-left: auto; color: #8E6FC7; font-weight: 800; }
.chat-plus-check.hidden { display: none; }

/* ---- Mode Gandalf IA : le composeur devient « magicien » (violet) ---- */
.chat-gandalf-bar { display: flex; align-items: center; gap: 9px; margin: 0 4px 7px;
    padding: 7px 12px; border-radius: 12px; font-size: 13px; font-weight: 600;
    background: linear-gradient(100deg, rgba(142,111,199,.16), rgba(142,111,199,.06));
    border: 1px solid rgba(142,111,199,.45); color: #6D51A8; }
.chat-gandalf-bar.hidden { display: none; }
.chat-gandalf-bar-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-gandalf-bar-x { border: none; background: none; cursor: pointer; color: inherit;
    font-size: 14px; font-weight: 800; padding: 2px 7px; border-radius: 7px; flex-shrink: 0; }
.chat-gandalf-bar-x:hover { background: rgba(142,111,199,.18); }
body[data-gtheme="dark"] .chat-gandalf-bar { color: #C4B5FD; border-color: rgba(167,139,250,.4);
    background: linear-gradient(100deg, rgba(167,139,250,.14), rgba(167,139,250,.05)); }
.chat-composer.gandalf-mode .chat-composer-row {
    border-radius: 22px;
    box-shadow: 0 0 0 2px rgba(142,111,199,.65), 0 0 14px rgba(142,111,199,.30);
    background: linear-gradient(120deg, rgba(142,111,199,.10), rgba(142,111,199,.04));
}
.chat-composer.gandalf-mode textarea { caret-color: #8E6FC7; }
.chat-composer.gandalf-mode textarea::placeholder { color: #8E6FC7; opacity: .85; }
.chat-composer.gandalf-mode .chat-send { background: #8E6FC7 !important; border-color: #8E6FC7 !important; }
.chat-composer.gandalf-mode .chat-plus-btn { color: #8E6FC7; }
body[data-gtheme="dark"] .chat-composer.gandalf-mode .chat-composer-row {
    box-shadow: 0 0 0 2px rgba(167,139,250,.6), 0 0 16px rgba(167,139,250,.28);
    background: linear-gradient(120deg, rgba(167,139,250,.12), rgba(167,139,250,.05));
}
body[data-gtheme="dark"] .chat-composer.gandalf-mode textarea::placeholder { color: #C4B5FD; }
body[data-gtheme="dark"] .chat-composer.gandalf-mode .chat-send { background: #A78BFA !important; border-color: #A78BFA !important; color: #241F33 !important; }

/* Preview de la pièce jointe en attente */
.chat-attach-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px dashed #ccc;
    border-radius: 12px;
    background: #faf8f4;
    font-size: 13px;
    min-width: 0;
}
.chat-attach-preview.hidden { display: none; }
.chat-attach-preview img {
    width: 44px; height: 44px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.chat-attach-icon { font-size: 22px; flex-shrink: 0; }
.chat-attach-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    min-width: 0;
}
.chat-attach-preview small { color: #999; flex-shrink: 0; }
.chat-attach-x {
    margin-left: auto;
    border: none; background: none;
    font-size: 15px;
    cursor: pointer;
    color: #999;
    padding: 4px;
    flex-shrink: 0;
}
.chat-attach-x:hover { color: #e53e3e; }
/* Aperçu multi-pièces-jointes : chaque fichier = une puce (wrap).
   Hauteur plafonnée + défilement interne : sur téléphone une puce = une
   rangée, et 10 photos (≈ 650 px) poussaient le champ et ➤ hors de l'écran
   → message impossible à envoyer (ticket 5valpei078DULSy9retA). */
.chat-attach-preview {
    flex-wrap: wrap;
    max-height: 132px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
/* « Annuler l'envoi » reste visible même quand la liste défile */
.chat-attach-preview .chat-upload-cancel { position: sticky; bottom: 0; }
.chat-attach-item { display: inline-flex; align-items: center; gap: 8px; background: rgba(40,34,24,.04); border: 1px solid rgba(40,34,24,.1); border-radius: 10px; padding: 5px 8px; max-width: 230px; }
.chat-attach-item .chat-attach-name { max-width: 110px; }
.chat-attach-item .chat-attach-x { margin-left: 2px; }
body[data-gtheme="dark"] .chat-attach-item { background: rgba(221,203,164,.06); border-color: rgba(221,203,164,.16); }

/* Enregistrement vocal en cours */
.chat-rec-bar { display: none; }
.chat-composer.is-recording .chat-rec-bar {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    padding: 0 4px;
    min-height: 42px;
}
.chat-composer.is-recording textarea,
.chat-composer.is-recording .chat-tools-left,
.chat-composer.is-recording .chat-tools-expand,
.chat-composer.is-recording .chat-mic-btn { display: none; }
/* Pendant l'enregistrement, ➤ = arrêter+envoyer → toujours visible (prime sur can-send) */
.chat-composer.is-recording .chat-send { display: flex; }
.chat-rec-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #e53e3e;
    animation: chatRecBlink 1s infinite;
    flex-shrink: 0;
}
@keyframes chatRecBlink { 50% { opacity: 0.25; } }
.chat-rec-time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 15px;
}

/* Pièces jointes dans les messages */
.chat-att { margin-top: 6px; }
.chat-att-img {
    display: block;
    /* Le plafond de 280 px est porté par .chat-att-imgwrap (juste en dessous),
       pas ici : l'image se contente de ne jamais dépasser la place qu'on lui
       donne. Voir l'explication complète sous .chat-att-imgwrap. */
    max-width: 100%;
    max-height: 300px;
    border-radius: 12px;
    cursor: zoom-in;
    background: #eee;
    min-height: 60px;
    min-width: 80px;
    object-fit: cover;
}
/* ── Le plafond de largeur d'une image jointe est porté par son CONTENEUR ──
   Deux phases de calcul, deux besoins opposés, et c'est tout le sujet :

   1. Calcul INTRINSÈQUE — la bulle (élément flex, `flex: 0 1 auto`) se
      dimensionne sur le max-content de son contenu. Un pourcentage n'y est pas
      résoluble : il est traité comme `auto`. Poser `max-width: min(280px,100%)`
      SUR L'IMAGE laissait donc la contribution retomber sur ce que borne
      `max-height: 300px`, soit 300 × 1512/982 = 462 px pour une capture de
      bureau. La bulle faisait 462 px pour une image de 280 : 182 px de blanc
      vide à sa droite — le défaut du ticket UsmGYJdaaacT7i75uldt.
   2. Largeur UTILISÉE — sur mobile, le flex n'accorde à la bulle que ce qui
      reste une fois l'heure groupée et le ⋯ servis : 163 px sur un viewport de
      412. Une borne en pixels sur l'image (l'ancien `calc(80vw - 110px)`, qui
      refaisait ce calcul à la main et donnait 220 px) la faisait déborder de
      57 px, par-dessus l'heure et le ⋯ — ticket SHPiB, T. Matteucci.

   D'où le partage : une borne DÉFINIE sur le conteneur (elle borne la phase 1,
   donc la bulle colle à l'image), un POURCENTAGE sur l'image (il suit la phase
   2, donc l'image ne déborde jamais). Aucune arithmétique de viewport à
   re-dériver le jour où un padding change.

   `max-width` et non `width` : les deux plafonds (largeur et hauteur) passent
   alors par la table de contraintes des éléments remplacés, qui PRÉSERVE le
   rapport. Avec un `width` explicite, une capture haute serait écrasée à
   280 × 300 puis rognée par `object-fit: cover`. */
.chat-att-imgwrap { max-width: 280px; }
.chat-att-audio {
    display: block;
    width: min(300px, 75vw);
    height: 42px;
}
.chat-att-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    max-width: min(300px, 75vw);
    min-width: 0;
    text-align: left;
}
.chat-att-file:hover { border-color: var(--chanv-terre); background: #faf8f4; }
.chat-att-file-icon { font-size: 20px; flex-shrink: 0; }
.chat-att-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    min-width: 0;
}
.chat-att-file small { color: #999; flex-shrink: 0; }
.chat-att-error { font-size: 12px; color: #999; font-style: italic; }
/* Image en échec transitoire : léger fond rougeâtre (retentée au rendu suivant) */
.chat-att-img.chat-att-broken { background: rgba(179,38,30,.08); cursor: default; }

/* Drag & drop */
.chat-pane { position: relative; }
.chat-pane.chat-dropping::after {
    content: 'Dépose ton fichier ici  📎';
    position: absolute;
    inset: 10px;
    z-index: 5;
    border: 2px dashed var(--chanv-terre);
    border-radius: 16px;
    background: rgba(244, 239, 227, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--chanv-terre);
    pointer-events: none;
}

/* Lightbox image plein écran */
/* --- Modal Nouvelle conv --- */
.chat-type-toggle {
    display: flex;
    background: #f5f5f5;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 16px;
}
.chat-type-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    transition: all 0.15s;
}
.chat-type-btn.active { background: white; color: var(--chanv-terre); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.chat-selected-list {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 6px 0;
    min-height: 32px;
}
.chat-no-selected { color: #aaa; font-size: 12px; font-style: italic; padding: 6px 0; }
.chat-chip {
    background: var(--chanv-beige, #DDCBA4);
    color: var(--chanv-terre);
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
}
.chat-chip:hover { background: #c9a876; }
.chat-chip-x { font-size: 14px; line-height: 1; }
.chat-users-list {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-top: 8px;
}
.chat-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.1s;
}
.chat-user-item:last-child { border-bottom: none; }
.chat-user-item:hover { background: #fafafa; }
.chat-user-photo {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--chanv-beige, #DDCBA4);
    display: flex; align-items: center; justify-content: center;
    color: var(--chanv-terre); font-weight: 700; font-size: 13px;
}
.chat-user-info { flex: 1; min-width: 0; }
.chat-user-name { font-weight: 600; font-size: 13px; color: #222; }
.chat-user-email { font-size: 11px; color: #999; }

.chat-loading, .chat-error, .chat-empty-list {
    padding: 30px 14px;
    text-align: center;
    color: #999;
    font-size: 13px;
}
.chat-error { color: #c53030; }

/* Responsive */
@media (max-width: 768px) {
    .chat-body { grid-template-columns: 1fr; }
    .chat-sidebar { display: none; }
    .chat-view.chat-show-sidebar .chat-sidebar { display: flex; }
    .chat-view.chat-show-sidebar .chat-pane { display: none; }
}

/* =====================================================================
 * MONITEUR — Palantir service cards (Super Admin)
 * ===================================================================== */

.monitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 8px 0;
}

.monitor-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--card-bg, #2a2a2a);
    border: 1px solid var(--border-color, #3a3a3a);
    border-left: 3px solid var(--status-color, #888);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}
.monitor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    border-color: var(--status-color, #888);
}

.mc-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mc-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--status-color, #888);
    box-shadow: 0 0 6px var(--status-color, transparent);
    flex-shrink: 0;
}
.mc-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.mc-name {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary, #f0f0f0);
}
.mc-env {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.mc-env-prod {
    background: rgba(239,68,68,0.15);
    color: #f87171;
}
.mc-env-dev {
    background: rgba(59,130,246,0.15);
    color: #60a5fa;
}

.mc-sparkline {
    width: 100%;
    height: 36px;
    opacity: 0.9;
}

.mc-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.mc-metric {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.8rem;
    color: var(--text-secondary, #aaa);
}
.mc-metric-icon {
    font-size: 0.7rem;
}
.mc-metric span:not(.mc-metric-icon) {
    font-weight: 500;
    color: var(--text-primary, #f0f0f0);
}
.mc-metric small {
    font-size: 0.65rem;
    color: var(--text-secondary, #888);
}

.mc-footer {
    display: flex;
    gap: 12px;
    font-size: 0.7rem;
    color: var(--text-secondary, #777);
    padding-top: 8px;
    border-top: 1px solid var(--border-color, #333);
}

@media (max-width: 640px) {
    .monitor-grid {
        grid-template-columns: 1fr;
    }
    .mc-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
}

/* =====================================================================
   Module Tâches (dev-only)
   ===================================================================== */
.btn-tasks {
    background: white;
    color: var(--chanv-terre, #333);
    border: 1px solid #ddd;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-tasks:hover { background: var(--chanv-beige, #DDCBA4); }
.tasks-nav-badge {
    background: #E53E3E;
    color: white;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.tasks-view {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #f7f7f5;
    z-index: 50;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.2s ease;
}
.tasks-list > * { flex-shrink: 0; }

.tasks-header {
    background: var(--chanv-terre, #282828);
    color: white;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.tasks-back {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.tasks-back:hover { background: rgba(255,255,255,0.1); }
.tasks-title { font-size: 18px; margin: 0; font-weight: 700; flex: 1; }
.tasks-new-btn { white-space: nowrap; }

/* Toolbar */
.tasks-toolbar {
    padding: 14px 24px;
    background: white;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.tasks-filters { display: flex; gap: 12px; flex-wrap: wrap; }
.tasks-filter-group {
    display: flex;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.tasks-filter, .tasks-status {
    background: transparent;
    border: none;
    color: #666;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.tasks-filter.active, .tasks-status.active {
    background: white;
    color: var(--chanv-terre);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.tasks-search {
    border: 1px solid #ddd;
    padding: 7px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    min-width: 200px;
    outline: none;
}
.tasks-search:focus { border-color: var(--chanv-terre); }

.tasks-status-line {
    padding: 8px 24px;
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: white;
    border-bottom: 1px solid #f5f5f5;
}

/* Liste */
.tasks-list {
    flex: 1;
    min-height: 0; /* flex:1 + overflow : sans ceci, contenu long = clip SANS scroll */
    overflow-y: auto;
    /* voir règle .tasks-list>* plus bas : les blocs ne doivent JAMAIS se compresser */
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 1440px;   /* grand écran : on profite de l'espace */
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
/* Le TABLEAU (Gestion de projets) échappe au plafond de 1440 px.
   Une ligne de texte courte se lit mieux — c'est vrai d'une liste de cartes,
   et faux d'un tableau : chaque colonne rognée est une information perdue,
   et sur un écran large on se retrouvait avec des titres coupés par des « … »
   entourés de 900 px de vide de chaque côté. La classe est posée par
   renderList() en un seul endroit (TasksView), jamais en dur dans le HTML. */
.tasks-list.tasks-list-large { max-width: none; padding-left: 20px; padding-right: 20px; }
.tasks-loading, .tasks-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    background: white;
    border-radius: 12px;
}
.tasks-empty-icon { font-size: 48px; margin-bottom: 12px; }

/* L'ÉCRAN VIDE QUI SE RACONTE — ticket WvYAUy3DxQRiLnRcOlnO. Un tableau
   entièrement terminé n'affiche plus « Aucune tâche. » mais la raison, le
   nombre de tâches cachées et le bouton qui les rouvre. Le titre se lit à la
   couleur du texte, pas au gris de « aucune tâche » : ce n'est pas un vide,
   c'est un filtre. */
.tasks-empty-filtre { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tasks-empty-filtre strong { color: var(--gs-ink, #282828); font-size: 14px; }
.tasks-empty-filtre .tasks-empty-icon { margin-bottom: 0; }
.tasks-empty-detail { max-width: 46ch; font-size: 12.5px; line-height: 1.5; }
.tasks-empty-btn {
    display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
    margin-top: 4px; padding: 0 14px;
    border: 1px solid var(--gs-line, rgba(40,34,24,.14)); border-radius: 8px;
    background: var(--gs-panel, #fff); color: var(--gs-ink, #282828);
    font: inherit; font-size: 12.5px; cursor: pointer;
}
.tasks-empty-btn:hover { background: var(--gs-panel-2, #f7f1e6); border-color: var(--gs-gold-b, #a1823f); }
.tasks-empty-btn .gicon { width: 16px; height: 16px; flex-shrink: 0; }
body[data-gtheme="dark"] .tasks-empty-filtre strong { color: rgba(255,255,255,.88); }
body[data-gtheme="dark"] .tasks-empty-btn {
    background: #38332c; border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.88);
}
body[data-gtheme="dark"] .tasks-empty-btn:hover { background: #443d34; }

/* Card */
.tasks-card {
    background: var(--gs-panel, #fff);
    border: 1px solid var(--gs-line, #ececec);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    border-left-width: 1px;
}
.tasks-card:hover {
    box-shadow: 0 2px 8px rgba(40,34,24,.06);
    background: var(--gs-panel-2, #f7f1e6);
}
.tasks-card-priority-urgent,
.tasks-card-priority-high,
.tasks-card-priority-normal,
.tasks-card-priority-low { border-left-color: var(--gs-line, #ececec); }
.tasks-card-done { opacity: 0.72; }
.tasks-card-done .tasks-card-title { text-decoration: line-through; }

.tasks-card-check {
    width: 24px; height: 24px; display: grid; place-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0;
    transition: background .1s ease;
}
.tasks-card-check:hover { background: var(--gs-accent-soft, rgba(168,134,63,.13)); border-radius: 6px; }
.tasks-check-box {
    width: 16px; height: 16px; display: grid; place-items: center;
    border: 1px solid var(--gs-line-strong, rgba(40,34,24,.22));
    border-radius: 4px; background: var(--gs-panel, #fff);
    color: var(--gs-panel, #fff); font-size: 11px; font-weight: 700;
}
.tasks-check-box.checked {
    border-color: var(--tst-vert, #2f7259);
    background: var(--tst-vert, #2f7259);
}

.tasks-card-body { flex: 1; min-width: 0; }
.tasks-card-title {
    font-weight: 600;
    font-size: 14px;
    color: #222;
    margin-bottom: 4px;
    line-height: 1.3;
    /* Le titre est une ANCRE (⌘/Ctrl+clic → nouvel onglet, ticket Z0vjLu) :
       on lui retire l'apparence de lien, la carte entière reste cliquable. */
    display: block;
    text-decoration: none;
}
.tasks-card-desc {
    font-size: 12px;
    color: #777;
    line-height: 1.4;
    margin: 2px 0 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tasks-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.tasks-meta-chip {
    background: #f0f0f0;
    color: #555;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
    /* mobile : un long chemin de projet se tronque au lieu de déborder de la carte */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
/* ===== Pastilles de statut — palette des statuts configurables (M1) =========
   Douze teintes, jeu FERMÉ. Les sept premières sont relevées au pixel sur
   Monday ; les autres complètent la roue depuis leur nuancier (36 teintes,
   trop nombreuses pour garantir quoi que ce soit — la moitié y sont des gris
   presque identiques).

   La couleur du TEXTE n'est pas décorative : elle est calculée. Monday met du
   blanc sur toutes ses pastilles et échoue le seuil AA (4.5) sur plusieurs —
   « En cours » orange plafonne à 2.03. On garde leurs teintes et on choisit
   blanc ou encre selon le contraste réellement obtenu, pastille par pastille.

   Deux teintes ont dû être éclaircies de 6 % en thème sombre (rose, indigo) :
   à leur valeur d'origine, AUCUNE couleur de texte n'atteignait 4.5 — elles
   tombaient dans le creux de luminance où ni le blanc ni le noir ne portent.
   L'indigo sombre est la valeur mesurée chez Monday : elle échoue chez eux.

   Le libellé est TOUJOURS affiché : la couleur renforce, elle n'informe pas
   seule. C'est ce qui rend l'écran lisible en cas de daltonisme.
   ========================================================================== */
:root {
    --tst-encre: #16181D;
    --tst-gris: #BCBCBC;       --tst-gris-txt: var(--tst-encre);
    --tst-vert: #00C16A;       --tst-vert-txt: var(--tst-encre);
    --tst-lime: #91CD22;       --tst-lime-txt: var(--tst-encre);
    --tst-jaune: #FFC400;      --tst-jaune-txt: var(--tst-encre);
    --tst-orange: #FDA135;     --tst-orange-txt: var(--tst-encre);
    --tst-rouge: #DA2941;      --tst-rouge-txt: #FFFFFF;
    --tst-rose: #E10068;       --tst-rose-txt: #FFFFFF;
    --tst-violet: #381689;     --tst-violet-txt: #FFFFFF;
    --tst-indigo: #4B4FDA;     --tst-indigo-txt: #FFFFFF;
    --tst-bleu: #4D90FC;       --tst-bleu-txt: var(--tst-encre);
    --tst-turquoise: #45C5BF;  --tst-turquoise-txt: var(--tst-encre);
    --tst-brun: #74493E;       --tst-brun-txt: #FFFFFF;
}
body[data-gtheme="dark"] {
    /* Éclaircies, jamais assombries : sur un fond #121212 une teinte foncée
       se confond avec la page (le violet mesuré chez Monday n'a que 2.3 de
       contraste avec son propre fond). */
    --tst-gris: #6E7388;       --tst-gris-txt: #FFFFFF;
    --tst-vert: #2DCD86;       --tst-vert-txt: var(--tst-encre);
    --tst-lime: #A7D74E;       --tst-lime-txt: var(--tst-encre);
    --tst-jaune: #FFD033;      --tst-jaune-txt: var(--tst-encre);
    --tst-orange: #FDB459;     --tst-orange-txt: var(--tst-encre);
    --tst-rouge: #E45E72;      --tst-rouge-txt: var(--tst-encre);
    --tst-rose: #E83F8D;       --tst-rose-txt: var(--tst-encre);
    --tst-violet: #5B3C9F;     --tst-violet-txt: #FFFFFF;
    --tst-indigo: #7578E3;     --tst-indigo-txt: var(--tst-encre);
    --tst-bleu: #6EA5FD;       --tst-bleu-txt: var(--tst-encre);
    --tst-turquoise: #6AD1CC;  --tst-turquoise-txt: var(--tst-encre);
    --tst-brun: #906D65;       --tst-brun-txt: #FFFFFF;
}
/* La pastille elle-même. Pleine et saturée, à l'inverse des .tasks-chip-*
   pastel d'aujourd'hui : c'est ce manque de présence qui rendait les vues
   ternes. Largeur pleine dans une cellule de tableau, centrée comme Monday. */
.tstatut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 88px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--tst-gris);
    color: var(--tst-gris-txt);
}
.tstatut-gris { background: var(--tst-gris); color: var(--tst-gris-txt); }
.tstatut-vert { background: var(--tst-vert); color: var(--tst-vert-txt); }
.tstatut-lime { background: var(--tst-lime); color: var(--tst-lime-txt); }
.tstatut-jaune { background: var(--tst-jaune); color: var(--tst-jaune-txt); }
.tstatut-orange { background: var(--tst-orange); color: var(--tst-orange-txt); }
.tstatut-rouge { background: var(--tst-rouge); color: var(--tst-rouge-txt); }
.tstatut-rose { background: var(--tst-rose); color: var(--tst-rose-txt); }
.tstatut-violet { background: var(--tst-violet); color: var(--tst-violet-txt); }
.tstatut-indigo { background: var(--tst-indigo); color: var(--tst-indigo-txt); }
.tstatut-bleu { background: var(--tst-bleu); color: var(--tst-bleu-txt); }
.tstatut-turquoise { background: var(--tst-turquoise); color: var(--tst-turquoise-txt); }
.tstatut-brun { background: var(--tst-brun); color: var(--tst-brun-txt); }
/* Statut dont la définition a disparu du projet : hachuré, pour qu'il se voie
   comme une anomalie à corriger plutôt que comme une couleur choisie. */
.tstatut-orphelin {
    background: repeating-linear-gradient(45deg, var(--tst-gris), var(--tst-gris) 5px, rgba(0,0,0,.12) 5px, rgba(0,0,0,.12) 10px);
    color: var(--tst-gris-txt);
}

/* ============================================================
   GESTION DE PROJETS — la vue de pilotage (vue parallèle)
   ------------------------------------------------------------
   Aucun sélecteur ne sort du préfixe .gest : cette vue ne doit
   RIEN pouvoir casser dans l'affichage classique, qui reste le
   défaut de tout le monde. C'est la contrepartie du choix de
   Thierry — un onglet en plus, pas un remplacement.

   LES COULEURS VIENNENT DE --gs-* (public/css/shell.css), et de
   nulle part ailleurs. La passe A avait écrit --gcard et --gborder,
   qui ne sont déclarées NULLE PART : `var()` retombait donc en
   silence sur le repli clair, et le tableau restait blanc sur fond
   sombre — texte quasi blanc compris. Une variable inventée ne
   casse rien à l'écran clair, ce qui est exactement ce qui la rend
   dangereuse : elle ne se voit qu'en thème sombre, où plus personne
   ne relit. Le test « aucune variable inventée » monte la garde.
   ============================================================ */
.gest { padding: 0 0 32px; }

/* --- LA BARRE D'OUTILS ---
   Calquee sur celle de Monday (reference 01) : une ligne, un bouton plein a
   gauche, puis des commandes NOMMEES. La version precedente alignait quatre
   pastilles nues — impossible de savoir si c'etait un filtre, un onglet ou un
   tri — et une case a cocher sans titre. Un tableau de pilotage doit dire ce
   qu'il sait faire ; c'est le « je ne vois pas comment ajouter » de Thierry. */
/* LA PORTÉE — « ce tableau ne montre pas tout ».
   Un tableau filtre sans le dire est un tableau qui ment : les chiffres du
   bandeau sont justes, la liste est partielle, et rien ne distingue « ce
   projet n'a plus rien à faire » de « je ne regarde qu'un coin ». Le bandeau
   est donc AU-DESSUS de la barre d'outils, pleine largeur, et porte sa propre
   sortie — jamais un réglage à retrouver dans un menu.
   Cible de 44 px sur « Tout voir » : c'est la seule issue, et une issue ne se
   rate pas au doigt (voir la passe tactile plus bas). */
.gest-portee {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 8px 12px; margin-bottom: 10px;
    /* COULEUR EXPLICITE. Sans elle, ce bandeau héritait du gris d'encre du
       corps — invisible sur son propre fond en thème sombre. Mesuré au banc
       le 21/08 : #282828 sur #2b2823. Le défaut ne se voyait pas parce que le
       bandeau n'apparaissait que limité, donc rarement ; la passe 0 le rend
       PERMANENT, dans les deux sens. Ne jamais compter sur l'héritage pour
       une couleur de texte : c'est ce qui a produit 806 règles sombres
       écrites à la main dans ce fichier. */
    color: var(--gs-ink, #282828);
    background: var(--gs-panel-2, #f4f1ea);
    border: 1px solid var(--gs-line, rgba(40,34,24,.10));
    border-left: 3px solid var(--chanv-terre, #282828);
    border-radius: 8px;
}
.gest-portee-lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.gest-portee-nom { font-size: 14px; font-weight: 600; }
.gest-portee-tout {
    margin-left: auto; border: 1px solid var(--gs-line, rgba(40,34,24,.16));
    background: var(--gs-panel, #fff); border-radius: 6px;
    padding: 0 12px; min-height: 32px; font: inherit; font-size: 12.5px; cursor: pointer;
}
/* `--gs-panel-2` et non un `--gs-hover` : il n'existe pas. Le test
   « aucune variable CSS inventée dans le bloc » l'a attrapé — var() serait
   retombé en silence sur le repli, donc sur une couleur figée qui aurait
   ignoré le thème sombre. */
.gest-portee-tout:hover { background: var(--gs-panel-2, #f4f1ea); }
@media (hover: none) and (pointer: coarse) { .gest-portee-tout { min-height: 44px; } }
body[data-gtheme="dark"] .gest-portee { background: #2b2823; border-color: rgba(221,203,164,.22); border-left-color: #A8863F; }
body[data-gtheme="dark"] .gest-portee-tout { background: #201d19; border-color: rgba(221,203,164,.22); color: rgba(255,255,255,.85); }

.gest-outils {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 12px; margin-bottom: 14px;
    background: var(--gs-panel, #fff);
    border: 1px solid var(--gs-line, rgba(40,34,24,.10));
    border-radius: 8px;
}
.gest-neuf {
    border: 0; border-radius: 6px; padding: 8px 16px; font: inherit; font-size: 13px;
    font-weight: 600; cursor: pointer;
    background: var(--gs-ink, #282828); color: var(--gs-panel, #fff);
}
.gest-neuf:hover { filter: brightness(1.18); }
.gest-sep { width: 1px; align-self: stretch; margin: 0 4px; background: var(--gs-line, rgba(40,34,24,.10)); }
.gest-groupepar { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.gest-lbl { font-size: 12px; color: var(--gs-ink-faint, #8a8175); margin-right: 2px; }
.gest-axe {
    padding: 5px 11px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12.5px;
    border: 1px solid transparent; background: transparent; color: var(--gs-ink-dim, inherit);
}
.gest-axe:hover { background: var(--gs-panel-2, #f7f1e6); }
.gest-axe.on {
    background: var(--gs-accent-soft, rgba(168,134,63,.12));
    color: var(--gs-ink, inherit); font-weight: 600;
    border-color: var(--gs-line-strong, rgba(168,134,63,.32));
}
/* Un BOUTON A ETAT, jamais <label> + <input type="checkbox"> nus : ces balises
   heritent des regles de formulaire de la maison (label{text-transform:
   uppercase; display:block} et input{width:100%; padding:12px}). Le libelle
   sortait en capitales sur trois lignes et la case prenait la largeur de son
   conteneur — le « ca semble bug » de Thierry, 2026-08-19. Dans une feuille
   qui style les balises nues, on n'ecrit pas de balise nue. */
.gest-outil {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 6px; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 400; text-transform: none;
    letter-spacing: normal; margin: 0; white-space: nowrap;
    border: 1px solid transparent; background: transparent; color: var(--gs-ink-dim, inherit);
}
.gest-outil:hover { background: var(--gs-panel-2, #f7f1e6); }
.gest-outil.on {
    background: var(--gs-accent-soft, rgba(168,134,63,.12));
    color: var(--gs-ink, inherit);
    border-color: var(--gs-line-strong, rgba(168,134,63,.32));
}
/* « Nouvelle liste » dans la barre de l'Atelier (ticket QZXALAokQFvGhfWH68jO).
   Un .gest-outil nu — transparent, sans bordure — se lit comme un menu de
   réglage au milieu de Personne / Filtrer / Trier, et le ticket porte
   justement sur une porte qu'on ne trouve pas. Elle reçoit donc un contour :
   second geste de création, à côté du premier, sans lui disputer l'encre
   pleine de « + Nouvelle tâche ». */
.gest-new-list {
    border-color: var(--gs-line, rgba(40,34,24,.18));
    color: var(--gs-ink, #282828); font-weight: 500;
}
.gest-new-list:hover { border-color: var(--gs-line-strong, rgba(168,134,63,.32)); }
/* Droit `lists` absent sur CE tableau (ticket 9H9w4jo4aH3bXvgJXmS2) : la
   porte reste à sa place, en pointillé et pâlie — on voit qu'elle existe,
   et le clic dit à qui la demander. */
.gest-new-list.gest-new-list-verrou {
    border-style: dashed; opacity: .6; cursor: help;
}
.gest-new-list.gest-new-list-verrou:hover { opacity: .85; }
.gest-ic { font-size: 12px; opacity: .75; }
/* Le compte des colonnes visibles, ECRIT SUR LE BOUTON : le reglage se lit
   sans l'ouvrir, et le bouton cesse d'etre une porte fermee. */
.gest-outil-n {
    margin-left: 2px; padding: 1px 6px; border-radius: 8px;
    font-size: 11px; font-variant-numeric: tabular-nums;
    background: var(--gs-panel-2, #f7f1e6); color: var(--gs-ink-faint, #8a8175);
}

/* --- Les chiffres de synthese ---
   UNE ligne, plus cinq paves dont deux a fond saturE rouge et jaune. Ces
   paves criaient plus fort que les donnees qu'ils resumaient et poussaient le
   tableau — le vrai outil — sous la ligne de flottaison. */
.gest-chiffres {
    display: flex; flex-wrap: wrap; gap: 4px 20px;
    font-size: 12.5px; color: var(--gs-ink-dim, #6b6357);
    margin: 0 2px 16px;
}
.gest-chiffre b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gs-ink, inherit); }
/* Le retard est la SEULE alerte coloree : la seule dont l'action est
   immediate. En colorer une deuxieme les banaliserait toutes les deux. */
.gest-chiffre-alerte, .gest-chiffre-alerte b { color: var(--tst-rouge); }

/* --- Un groupe ---
   Le nom du groupe est en ENCRE, plus dans sa couleur. Dix titres a pleine
   saturation — vert #00C16A, rose #E10068, bleu #4D90FC — empiles sur un fond
   beige, c'etait le « criard » de Thierry, et la couleur n'y disait rien : elle
   suit l'index, pas le sens. Reduite a une pastille de 8 px et au lisere de la
   ligne, elle repere sans crier. */
.gest-groupe { margin-bottom: 22px; }
.gest-tete {
    display: flex; align-items: center; gap: 10px; padding: 0 2px 7px; cursor: pointer;
}
/* Le nom, le compte et le retard occupent une LARGEUR FIXE pour que toutes les
   barres partent de la meme abscisse. Repliees, dix lignes dont la barre
   commence a une position differente selon la longueur du nom ne se comparent
   pas — c'etait une liste, pas un tableau de bord. */
.gest-tete-id { flex: 0 0 460px; display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Seul le NOM se laisse rogner. Sans cette regle, « 2 En retard » passait a la
   ligne quand le nom etait long et faisait sauter la hauteur de l'en-tete —
   un mot coupe en deux dans un tableau de bord. */
.gest-tete-id > * { flex: 0 0 auto; white-space: nowrap; }
.gest-tete-id .gest-nom { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.gest-nom { font-weight: 650; font-size: 14.5px; letter-spacing: -.01em; color: var(--gs-ink, inherit); }
.gest-pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--gest-teinte, var(--tst-gris)); flex: 0 0 auto; }
.gest-chev { font-size: 9px; color: var(--gs-ink-faint, #8a8175); width: 9px; }
/* Le chevron est la SEULE porte du dépliage quand la bande ouvre le projet
   (ticket ZWEE46CaAX6J3XETe8mC) : 9 px ne se visent pas. La zone de clic
   s'élargit par le padding, la marge négative rend la place prise. */
.gest-tete .gest-chev[data-gest-chev] {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px; margin: -6px; box-sizing: content-box; border-radius: 4px; cursor: pointer;
}
.gest-tete .gest-chev[data-gest-chev]:hover { background: rgba(127, 127, 127, .18); color: var(--gs-ink, inherit); }
.gest-compte { font-size: 12.5px; color: var(--gs-ink-faint, #8a8175); font-variant-numeric: tabular-nums; }
.gest-retard { font-size: 12px; color: var(--tst-rouge); font-weight: 600; }
.gest-point { color: var(--gs-ink-faint, #8a8175); font-size: 12px; }

/* REPLIE, le groupe garde sa mesure : sa barre et son pourcentage passent dans
   le titre. Sans eux, replier les dix projets pour les embrasser d'un coup
   d'oeil — le geste exact de Thierry sur sa capture — donnait une liste a
   puces sans information, 56 px de haut pour un mot. */
.gest-tete-barre { width: 150px; margin-left: 6px; flex: 0 0 auto; }
.gest-tete-barre .gest-barre { height: 8px; border-radius: 4px; }
.gest-tete-pct { font-size: 11.5px; color: var(--gs-ink-faint, #8a8175); font-variant-numeric: tabular-nums; }

/* La barre empilee. `flex` sur chaque segment plutot qu'une largeur en
   pourcentage : le navigateur repartit l'espace exactement, donc aucun trou
   ne peut apparaitre au bout — ni par arrondi, ni au pixel pres. */
.gest-barre { display: flex; height: 16px; border-radius: 3px;
    overflow: hidden; background: var(--gs-line, rgba(40,34,24,.10)); width: 100%; }
.gest-seg { display: block; min-width: 2px; }
.tstatut-gris.gest-seg      { background: var(--tst-gris); }
.tstatut-vert.gest-seg      { background: var(--tst-vert); }
.tstatut-lime.gest-seg      { background: var(--tst-lime); }
.tstatut-jaune.gest-seg     { background: var(--tst-jaune); }
.tstatut-orange.gest-seg    { background: var(--tst-orange); }
.tstatut-rouge.gest-seg     { background: var(--tst-rouge); }
.tstatut-rose.gest-seg      { background: var(--tst-rose); }
.tstatut-violet.gest-seg    { background: var(--tst-violet); }
.tstatut-indigo.gest-seg    { background: var(--tst-indigo); }
.tstatut-bleu.gest-seg      { background: var(--tst-bleu); }
.tstatut-turquoise.gest-seg { background: var(--tst-turquoise); }
.tstatut-brun.gest-seg      { background: var(--tst-brun); }

/* --- LE TABLEAU ---------------------------------------------------
   DEUX SUR-CORRECTIONS DE SUITE, notees ici pour qu'il n'y en ait pas une
   troisieme. D'abord les colonnes s'etiraient sur toute la fenetre : titre a
   gauche, statut a 1 860 px, l'oeil traversait un desert. Puis, en mesurant
   « 1 096 px chez Monday dans une fenetre de 3 412 », j'ai fige la table a
   836 px — et Thierry a vu 70 % de vide.

   Le chiffre etait juste, la lecture etait fausse : la table de Monday est
   etroite MAIS elle est posee sur du blanc, sous une barre d'outils pleine
   largeur, avec un rail a gauche. Ce n'est pas la largeur qui remplit un
   ecran, c'est la structure. La table respire donc jusqu'a 2 200 px — assez
   pour que les titres cessent d'etre coupes — et s'arrete la : au-dela, une
   ligne de 3 400 px se lit a la regle.

   Les colonnes sont declarees UNE fois sur `.gest-groupe` : l'en-tete, les
   lignes et le pied sont freres et doivent heriter la meme grille au pixel
   pres, sinon la barre de resume ne tombe pas sous la colonne qu'elle resume.

   LA VALEUR REELLE EST POSEE EN LIGNE par gestColonnesGrille(), puisque les
   colonnes se choisissent. Celle-ci reste le REPLI : sans elle, un echec du
   calcul donnerait `grid-template-columns: var(--gest-cols)` sans valeur,
   c'est-a-dire une declaration invalide — la grille retomberait a une seule
   colonne et tout le tableau s'empilerait en une file. Un repli qui vaut la
   mise en page par defaut coute une ligne. */
.gest-groupe { --gest-cols: 6px minmax(340px, 620px) 104px 132px 150px 128px; }

/* `overflow-x: auto` et non `hidden` : avec des colonnes au choix, la largeur
   n'est plus connue d'avance. `hidden` TRANCHAIT net la sixieme colonne sur un
   ecran etroit — sans barre, sans indice, sans moyen d'aller voir. Le tableau
   defile donc lateralement, comme tout tableur. (`overflow-y` reste implicite
   a `auto` mais la hauteur est libre : aucune barre verticale n'apparait.) */
.gest-tab {
    width: max-content; max-width: 100%;
    border: 1px solid var(--gs-line, rgba(40,34,24,.10));
    border-radius: 8px; overflow-x: auto;
}
/* `stretch` et non `center` : le lisere de groupe est une cellule VIDE, et
   centre il n'aurait que la hauteur imposee par `min-height`. */
.gest-entete, .gest-ligne, .gest-pied {
    display: grid; grid-template-columns: var(--gest-cols); align-items: stretch;
}

/* L'en-tete est repete PAR GROUPE, comme chez Monday, au lieu d'un seul
   en-tete collant tout en haut : sur 25 lignes reparties en quatre groupes, un
   titre unique sort du champ au premier defilement et ne titre plus rien. */
.gest-entete { background: var(--gs-panel-2, #f7f1e6); }
.gest-h {
    font-size: 11.5px; color: var(--gs-ink-faint, #8a8175); white-space: nowrap;
    padding: 7px 10px; text-align: center;
    border-bottom: 1px solid var(--gs-line, rgba(40,34,24,.10));
    border-right: 1px solid var(--gs-line, rgba(40,34,24,.10));
    overflow: hidden; text-overflow: ellipsis;
}
.gest-h:last-child { border-right: 0; }
.gest-h-titre { text-align: left; }

/* --- L'EN-TETE QUI TRIE (21/08) -------------------------------------
   La cellule garde son role d'en-tete (`role="columnheader"` + `aria-sort`)
   et n'a plus de padding : c'est le BOUTON qui le porte, sinon la zone
   cliquable serait plus petite que la cellule et viser le bord ne ferait
   rien. Le bouton remplit donc toute la cellule, hauteur comprise.
   La classe est posee par le JS plutot que deduite par `:has()` : un
   navigateur sans `:has()` jetterait toute la regle et cumulerait les deux
   paddings, ce qui grossirait la ligne d'en-tete sans qu'aucun test le voie. */
.gest-h-tri { padding: 0; }
.gest-h-b {
    width: 100%; height: 100%;
    appearance: none; -webkit-appearance: none;
    background: none; border: 0; margin: 0;
    padding: 7px 10px;
    font: inherit; color: inherit; text-align: inherit;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    cursor: pointer;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.gest-h-titre .gest-h-b { justify-content: flex-start; }
.gest-h-b:hover { background: var(--gs-accent-soft, rgba(168, 134, 63, .13)); }
.gest-h-b:focus-visible { outline: none; box-shadow: inset var(--e-focus, 0 0 0 3px rgba(168, 134, 63, .28)); }
/* La colonne triee se lit AUSSI sans la fleche : un daltonien, un ecran
   pale, une capture en noir et blanc. Le fond et la graisse le disent. */
.gest-h-on { background: var(--gs-accent-soft, rgba(168, 134, 63, .13)); }
.gest-h-on .gest-h-b { font-weight: var(--w-semi, 600); color: var(--gs-ink, #282828); }
.gest-h-fl { flex: 0 0 auto; font-size: 9px; line-height: 1; }
/* Le critere SECONDAIRE : plus petit et estompe. Il doit se voir — sinon le
   tri a deux niveaux devient un reglage cache — sans concurrencer le
   principal du regard. */
.gest-h-fl2 { font-size: 7.5px; opacity: .5; }

/* Le QUADRILLAGE : un filet a droite de CHAQUE cellule, pas seulement sous
   chaque ligne. C'est lui, autant que les couleurs, qui fait lire un tableau
   plutot qu'une liste. */
.gest-ligne {
    text-decoration: none; color: var(--gs-ink, inherit); font-size: 13px;
    background: var(--gs-panel, #fff); cursor: pointer;
}
.gest-ligne > * {
    min-height: 38px; display: flex; align-items: center; padding: 0 10px;
    border-bottom: 1px solid var(--gs-line, rgba(40,34,24,.10));
    border-right: 1px solid var(--gs-line, rgba(40,34,24,.10));
    overflow: hidden;
}
.gest-ligne > *:last-child { border-right: 0; }
.gest-ligne:hover > * { background: var(--gs-panel-2, #f7f1e6); }

/* Le lisere de groupe est une CELLULE de 6 px, plus une bordure de 3 : sur une
   ligne large, un trait de 3 px est invisible. */
/* Adoucie au color-mix : la teinte pleine saturation sur fond beige, c'était
   le « criard » de Thierry, revenu sur les captures du 02/09. */
.gest-c-bar { background: color-mix(in srgb, var(--gest-teinte, var(--tst-gris)) 66%, var(--gs-panel, #fff)); padding: 0; border-right: 0; }
/* Celui-ci EST necessaire : `.gest-ligne:hover > *` pese deux classes et
   ecraserait sinon la teinte du lisere au survol. */
.gest-ligne:hover > .gest-c-bar { background: color-mix(in srgb, var(--gest-teinte, var(--tst-gris)) 66%, var(--gs-panel, #fff)); }

/* Le titre est le SEUL bloc de la ligne. `text-overflow: ellipsis` ne
   s'applique qu'au texte d'un conteneur de bloc — dans un conteneur flex, le
   texte devient un element flex anonyme et les « … » ne sortent jamais. Or
   c'est cette cellule qui porte des titres de 190 caracteres.

   Le bouton « ouvrir » est POSITIONNE, pas pose dans le flux : cote a cote
   avec le texte il aurait fallu passer la cellule en flex, et les « … »
   auraient disparu pour la deuxieme fois. C'est aussi ce qui lui permet de
   DEPLIER son etiquette au survol sans pousser le titre : il flotte au-dessus
   de la fin du texte, comme le bouton « Open » de Monday, au lieu de faire
   sauter la mise en page a chaque passage de souris. */
.gest-c-titre {
    display: block; padding: 10px; position: relative;
    text-decoration: none; color: inherit;
}
/* Le nom est un <a> DANS LES DEUX BRANCHES depuis le 21/08 — c'est ce qui
   garantit qu'un clic dessus veuille dire la meme chose pour tout le monde,
   quels que soient les droits. Le soulignement est neutralise ici : la rangee
   entiere se comporte deja comme une cible, un souligne permanent sur 224
   lignes ferait un tableau raye. */
.gest-titre-txt {
    display: block; padding-right: 58px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-decoration: none; color: inherit;
}
/* La reserve est CONSTANTE : 24 px de crayon + 5 de decalage + une
   respiration. Il y avait ici une regle qui la portait a 74 px au survol,
   parce que l'ancien bouton « ⤢ Ouvrir » depliait son etiquette par-dessus la
   fin du titre et cassait l'ellipse — un texte coupe en plein mot, sans « … »,
   qui se lisait comme un bug. Le crayon ne se deplie pas : le defaut ne peut
   plus se produire, et la regle qui le rattrapait n'a plus d'objet.
   Portee a 58 px le 21/09 (ticket kTZGzFEmux1DIyGckvu7) : la poubelle prend un
   second echelon de 24 px a gauche du crayon. Un bouton de plus = une reserve
   de plus, sinon la fin du titre repasse SOUS les icones. */

/* ── Le crayon : renommer, et RIEN d'autre ────────────────────────────
   Il prend la place du bouton « ⤢ Ouvrir ». Decision de Thierry, 21/08 :
   « Ouvrir, au clic sur le nom. […] Le crayon a droite c'est parfait. »
   Le nom porte donc l'action COURANTE, le crayon l'action RARE. C'est
   exactement l'inverse d'avant, ou le clic le plus naturel ouvrait un champ
   de saisie sur une donnee de production, texte preselectionne, sans
   annulation possible.

   VISIBLE AU REPOS — cadre et glyphe — pour la meme raison que le ⤢ des
   cartes : une affordance qui n'apparait qu'au survol n'existe pas au doigt et
   ne se decouvre jamais. C'est le retour qu'on a deja eu deux fois, mot pour
   mot, sur deux boutons differents. */
.gest-crayon {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 22px; padding: 0;
    border: 1px solid var(--gs-line, rgba(40, 34, 24, .14));
    border-radius: var(--r-sm, 6px);
    background: transparent; cursor: pointer;
    font-size: 11px; line-height: 1;
    /* Un emoji ignore `color` : l'opacite est le seul levier pour l'attenuer.
       .8 attenue sans effacer — le cadre, lui, reste plein. */
    opacity: .8;
    transition: opacity var(--dur-fast, .12s) var(--ease, ease),
                background var(--dur-fast, .12s) var(--ease, ease),
                border-color var(--dur-fast, .12s) var(--ease, ease);
}
.gest-ligne:hover .gest-crayon {
    opacity: 1;
    background: var(--gs-panel, #fff);
    border-color: var(--gs-line-strong, rgba(168, 134, 63, .32));
}
.gest-crayon:hover {
    opacity: 1;
    background: var(--gs-accent-soft, rgba(168, 134, 63, .13));
    border-color: var(--gs-gold-b, #A8863F);
}
.gest-crayon:focus-visible {
    outline: none; opacity: 1;
    box-shadow: var(--e-focus, 0 0 0 3px rgba(168, 134, 63, .28));
}
@media (prefers-reduced-motion: reduce) {
    .gest-crayon { transition: none; }
}

/* ── La poubelle : archiver SANS ouvrir la tache ──────────────────────
   « Ce serait bien de pouvoir supprimer des taches sans avoir a rentrer
   dedans. » — D. Paquette, ticket kTZGzFEmux1DIyGckvu7, 21/09.

   Meme boite que le crayon, a un echelon de plus vers la gauche : le crayon
   et la bulle ne bougent pas, et un geste qu'on fait vingt fois par jour ne
   se met pas a tomber a cote. Elle vient DERNIERE dans le balisage et se
   pose PREMIERE a l'oeil — l'action destructrice est donc la plus loin du
   bord de la rangee, la ou la souris arrive le moins par accident.

   Elle ne prend sa couleur d'alerte qu'au survol DIRECT : rouge au repos,
   224 lignes de tableau se liraient comme 224 avertissements. */
.gest-poubelle {
    position: absolute; right: 33px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 22px; padding: 0;
    border: 1px solid var(--gs-line, rgba(40, 34, 24, .14));
    border-radius: var(--r-sm, 6px);
    background: transparent; cursor: pointer;
    font-size: 11px; line-height: 1;
    color: var(--gs-ink-faint, #8a8175);
    opacity: .8;
    transition: opacity var(--dur-fast, .12s) var(--ease, ease),
                background var(--dur-fast, .12s) var(--ease, ease),
                border-color var(--dur-fast, .12s) var(--ease, ease),
                color var(--dur-fast, .12s) var(--ease, ease);
}
.gest-ligne:hover .gest-poubelle {
    opacity: 1;
    background: var(--gs-panel, #fff);
    border-color: var(--gs-line-strong, rgba(168, 134, 63, .32));
}
.gest-poubelle:hover {
    opacity: 1;
    color: var(--tst-rouge, #d64545);
    background: color-mix(in srgb, var(--tst-rouge, #d64545) 9%, transparent);
    border-color: color-mix(in srgb, var(--tst-rouge, #d64545) 38%, transparent);
}
.gest-poubelle:focus-visible {
    outline: none; opacity: 1;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tst-rouge, #d64545) 28%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    .gest-poubelle { transition: none; }
}
.gest-c-prio, .gest-c-qui { justify-content: center; }
.gest-c-prio .tasks-meta-chip { font-size: 11px; padding: 2px 8px; }
.gest-c-date {
    font-size: 12.5px; color: var(--gs-ink-dim, inherit); white-space: nowrap;
    font-variant-numeric: tabular-nums; justify-content: center;
}
/* Meme raison que le titre : un nom de projet long a besoin de ses « … », et
   `text-overflow` reste sans effet sur le texte d'un conteneur flex. */
.gest-c-proj {
    display: block; padding: 10px;
    font-size: 12.5px; color: var(--gs-ink-dim, inherit);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Le nom du projet MENE a son atelier (ticket 8zg5qttCQB2MnwyxZiLR).
   Meme convention que le titre de tache juste au-dessus : pas de soulignement
   permanent — sur 224 lignes, deux colonnes soulignees feraient un tableau
   raye — `color: inherit`, et l'affordance au survol seulement. Le lien reste
   INLINE dans sa cellule : c'est `.gest-c-proj` qui porte l'ellipse, et un
   `display:block` ici la reprendrait a son compte pour rien.
   Une seule regle pour les trois endroits qui posent ce lien (le tableau, la
   table « A valider », la carte mobile) : ils partagent la classe, pas le
   contexte. */
.gest-proj-lien { color: inherit; text-decoration: none; cursor: pointer; }
.gest-proj-lien:hover { color: var(--gs-accent, inherit); text-decoration: underline; }
/* Le clavier, lui, a droit a un reperage franc : c'est le seul moyen de savoir
   ou l'on est sans souris. */
.gest-proj-lien:focus-visible {
    color: var(--gs-accent, inherit); text-decoration: underline;
    outline: 2px solid var(--gs-accent, #a1823f); outline-offset: 2px; border-radius: 3px;
}
.gest-vide { color: var(--gs-ink-faint, #8a8175); font-style: normal; opacity: .5; }

/* Les colonnes qu'on peut ajouter. Deux styles suffisent pour les six : un
   COMPTE (sous-taches, dependances) et une DATE (debut, creation, derniere
   modification). Ecrire un style par colonne serait le meme piege que la
   grille en dur — la septieme colonne demanderait de revenir ici. */
.gest-c-cpt {
    justify-content: center; font-size: 12.5px;
    color: var(--gs-ink-dim, inherit); font-variant-numeric: tabular-nums;
}
.gest-c-jour {
    justify-content: center; font-size: 12.5px; white-space: nowrap;
    color: var(--gs-ink-dim, inherit); font-variant-numeric: tabular-nums;
}

/* --- La colonne Statut ---
   La cellule entiere porte la couleur : une pastille flotte au milieu et
   l'oeil doit la chercher ligne a ligne ; un bloc plein transforme la colonne
   en bande continue qu'on lit d'un seul balayage. C'est la signature de Monday
   la plus reconnaissable.

   MAIS le statut par defaut, lui, reste NEUTRE. « A faire » est gris, et un
   aplat gris plein sur les deux tiers des lignes faisait un mur sans message —
   chez Monday la cellule non renseignee est un simple gris pale qui invite a
   la remplir. La couleur ne doit se voir que quand elle dit quelque chose. */
.gest-c-statut { padding: 0; }
.gest-c-statut .tstatut {
    display: flex; align-items: center; justify-content: center;
    width: 100%; align-self: stretch; box-sizing: border-box;
    border-radius: 0; padding: 0 10px; min-width: 0;
    font-size: 12px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gest-c-statut .tstatut-gris {
    background: var(--gs-panel-2, #f7f1e6);
    color: var(--gs-ink-dim, #6b6357);
    box-shadow: inset 0 0 0 1px var(--gs-line, rgba(40,34,24,.10));
}
.gest-c-statut .gest-pending {
    width: calc(100% - 14px); min-height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 4px 7px; padding: 3px 7px; border-radius: 4px;
    text-align: center; line-height: 1.15;
}

/* --- « + Nouvelle tache », en bas de chaque groupe ---
   Une ligne fantome permanente : creer au bon endroit ne demande plus ni
   fenetre de choix ni ouverture prealable du projet. */
.gest-ajout {
    grid-column: 1 / -1; width: 100%; text-align: left;
    border: 0; background: var(--gs-panel, #fff);
    padding: 10px 10px 10px 24px; font: inherit; font-size: 13px;
    color: var(--gs-ink-faint, #8a8175); cursor: pointer;
}
.gest-ajout:hover { color: var(--gs-ink, inherit); background: var(--gs-panel-2, #f7f1e6); }

/* --- Le resume, EN PIED et a la largeur de sa colonne ---
   C'etait une barre de 1 700 px en TETE de groupe : sept empilees occupaient
   plus de la moitie de l'ecran pour redire un chiffre deja ecrit deux fois. */
.gest-pied { margin-top: 5px; }
.gest-pied > * { padding: 0 10px; }
.gest-pied .gest-c-bar { background: none; }
.gest-pied .gest-c-statut { padding: 0; display: block; }
.gest-pied-l { display: block; font-size: 11px; color: var(--gs-ink-faint, #8a8175); text-align: center; margin-top: 4px; }

/* --- La colonne Assignes : des visages, pas des noms ---
   Un nom prend toute la colonne et se fait couper ; trois ronds tiennent dans
   96 px. Et l'absence se voit : 2 572 taches n'ont personne. */
.gest-avatars { display: inline-flex; align-items: center; }
/* Le chevauchement etait de 8 px sur 25 : l'initiale, centree, passait sous le
   rond suivant et les deux premieres personnes devenaient illisibles. Une
   colonne de visages qu'on ne peut pas lire ne sert a rien. */
.gest-avatars .tasks-avatar { width: 25px; height: 25px; font-size: 11px; margin-right: -5px; border: 2px solid var(--gs-panel, #fff); box-shadow: none; font-weight: 600; }
.gest-avatars .tasks-avatar:last-of-type { margin-right: 0; }
.gest-plus { margin-left: 11px; font-size: 11px; color: var(--gs-ink-faint, #8a8175); font-variant-numeric: tabular-nums; }
.gest-personne {
    width: 25px; height: 25px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center;
    border: 1.4px dashed var(--gs-line-strong, rgba(168,134,63,.32));
    color: var(--gs-ink-faint, #8a8175); font-size: 12px;
}

/* Le retard se signale sur la DATE seule : la ligne porte deja un lisere de
   groupe et un bloc de statut colore, et une troisieme couleur forte rendrait
   le lisere illisible. */
.gest-ligne.late .gest-c-date { color: var(--tst-rouge); font-weight: 700; }

/* --- L'ÉDITION EN CELLULE -----------------------------------------
   Une cellule modifiable ne s'annonce qu'au survol de SA rangée : un
   cadre permanent sur quatre colonnes ferait un tableau grillagé deux
   fois, et l'on ne saurait plus lire une valeur sans lire aussi son
   contenant. Au survol de la cellule elle-même, le cadre se précise. */
.gest-mod { cursor: pointer; }
.gest-ligne:hover .gest-mod { box-shadow: inset 0 0 0 1px var(--gs-line, rgba(40,34,24,.10)); }
/* La rangée est forcément survolée si la cellule l'est : écrire les deux
   plutôt qu'un `!important` pour battre la règle du dessus (0,3,0 contre
   0,2,0 — le survol seul aurait perdu, silencieusement). */
.gest-ligne:hover .gest-mod:hover { box-shadow: inset 0 0 0 1px var(--gs-line-strong, rgba(168,134,63,.32)); }
/* Il y avait ici une regle `.gest-titre-txt.gest-mod` : le titre portait le
   cadre d'edition sur son TEXTE. Elle est partie avec la cause — le nom n'est
   plus un champ modifiable depuis le 21/08, c'est le crayon qui renomme, et un
   nom qui s'entoure au survol annoncerait de nouveau « clique ici pour
   ecrire ». La regle exacte que ce module vient de corriger. */
/* Pendant l'appel : la cellule s'estompe et ne répond plus. Rien ne bouge de
   place — un indicateur qui pousserait le contenu ferait sauter la ligne. */
.gest-occupe { opacity: .45; pointer-events: none; }

.gest-saisie {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
    padding: 2px 5px; border-radius: 3px;
    border: 1px solid var(--gs-accent, #A8863F);
    background: var(--gs-panel, #fff); color: inherit;
}

/* --- Le panneau ancré ---
   `fixed` : .tasks-list défile DANS un .tasks-view lui-même fixe, donc les
   coordonnées de page ne veulent rien dire ici. Le z-index passe au-dessus de
   .tasks-view (50). Il vit dans <body> et non dans la cellule, sinon
   `overflow: hidden` du tableau le trancherait net. */
.gest-pop {
    position: fixed; z-index: 120;
    min-width: 190px; max-width: 300px;
    background: var(--gs-panel, #fff);
    border: 1px solid var(--gs-line, rgba(40,34,24,.10));
    border-radius: 6px; box-shadow: 0 8px 28px rgba(0,0,0,.18);
    padding: 5px; font-size: 13px; color: var(--gs-ink, inherit);
}
.gest-pop-liste { display: flex; flex-direction: column; gap: 3px; max-height: 300px; overflow-y: auto; }

/* Le statut : pleine largeur et plein aplat, comme dans la colonne. Choisir
   dans une liste qui ressemble au résultat évite l'aller-retour mental entre
   « le nom que je choisis » et « la bande que je verrai ». */
.gest-pop-st {
    border: 0; border-radius: 4px; padding: 8px 10px; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 500; text-align: left;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.gest-pop-st:hover { filter: brightness(1.08); }
.gest-pop-st.on { box-shadow: inset 0 0 0 2px var(--gs-ink, #282828); }
.gest-pop-fin { font-size: 11px; opacity: .7; }
.gest-pop-validation {
    margin-left: auto; max-width: 112px; font-size: 10.5px; font-weight: 700;
    color: #72581f; white-space: normal; text-align: right; line-height: 1.2;
}
body[data-gtheme="dark"] .gest-pop-validation { color: #F0D99E; }

.gest-pop-q, .gest-pop-jour {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
    padding: 6px 8px; margin-bottom: 5px; border-radius: 4px;
    border: 1px solid var(--gs-line, rgba(40,34,24,.10));
    background: var(--gs-panel, #fff); color: inherit;
}
.gest-pop-opt {
    display: flex; align-items: center; gap: 8px; width: 100%;
    border: 0; background: none; color: inherit; cursor: pointer;
    font: inherit; font-size: 13px; text-align: left;
    padding: 5px 6px; border-radius: 4px;
}
.gest-pop-opt:hover { background: var(--gs-panel-2, #f7f1e6); }
/* Les personnes DÉJÀ retenues, teintées : la coche seule oblige à parcourir
   la colonne de droite ligne à ligne pour savoir qui est dessus. */
.gest-pop-opt.on { background: var(--gs-accent-soft, rgba(168,134,63,.12)); }
.gest-pop-opt .tasks-avatar { width: 24px; height: 24px; font-size: 11px; flex: 0 0 auto; }
.gest-pop-qui-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gest-pop-coche { width: 14px; text-align: center; color: var(--gs-accent, #A8863F); font-weight: 700; }
.gest-pop-rien { padding: 10px 6px; opacity: .55; font-size: 12.5px; text-align: center; }
/* Une colonne retiree sans un mot passe pour un bogue : elle etait la il y a
   trois secondes. Deux lignes disent ou elle est passee. */
.gest-pop-note {
    margin-top: 4px; padding: 8px 6px 4px;
    border-top: 1px solid var(--gs-line, rgba(40,34,24,.10));
    font-size: 11.5px; line-height: 1.4; color: var(--gs-ink-faint, #8a8175);
}

.gest-pop-raccourcis { display: flex; flex-direction: column; gap: 2px; }
.gest-pop-raccourcis button, .gest-pop-vider {
    border: 0; background: none; color: inherit; cursor: pointer;
    font: inherit; font-size: 12.5px; text-align: left;
    padding: 6px 8px; border-radius: 4px; width: 100%;
}
.gest-pop-raccourcis button:hover { background: var(--gs-panel-2, #f7f1e6); }
.gest-pop-vider {
    margin-top: 4px; border-top: 1px solid var(--gs-line, rgba(40,34,24,.10));
    border-radius: 0 0 4px 4px; color: var(--tst-rouge);
}
.gest-pop-vider:hover { background: var(--gs-panel-2, #f7f1e6); }

/* SUR TELEPHONE, une fiche empilee — pas un tableau comprime.
   La regle d'avant masquait `.gest-c-proj` et redeclarait `--gest-cols` en
   accord : les deux devaient bouger ENSEMBLE. Les colonnes se choisissant
   maintenant, ce pacte ne tient plus — la variable est posee en ligne, donc
   elle bat toute media query, et masquer une cellule au hasard decalerait
   toutes les suivantes d'une piste.
   D'ou deux changements de methode : on surcharge `grid-template-columns`
   directement (meme specificite, plus bas dans la feuille : elle gagne, et
   sans `!important`), et chaque cellule gardee est placee par SA LIGNE et SA
   COLONNE. Le resultat ne depend plus du tout de quelles colonnes sont
   allumees — c'etait la fragilite, pas la largeur.
   Au-dessus de ce seuil il n'y a plus de point de rupture : le tableau
   defile lateralement, comme tout tableur. */
@media (max-width: 720px) {
    .gest-entete { display: none; }   /* sans grille commune, il ne titre plus rien */
    .gest-ligne, .gest-pied { grid-template-columns: 6px 1fr auto; }
    .gest-tab { width: 100%; }
    .gest-ligne > * { border-right: 0; display: none; }   /* tout ce qui n'est pas replace ci-dessous */
    .gest-ligne > .gest-c-bar { display: block; grid-row: 1 / 4; grid-column: 1; }
    .gest-ligne > .gest-c-titre { display: block; grid-row: 1; grid-column: 2 / -1; }
    .gest-ligne > .gest-c-qui { display: flex; grid-row: 2; grid-column: 2; justify-content: flex-start; }
    .gest-ligne > .gest-c-date { display: flex; grid-row: 2; grid-column: 3; }
    .gest-ligne > .gest-c-statut { display: flex; grid-row: 3; grid-column: 2 / -1; }
    .gest-pied { display: none; }   /* la place manque : le compte du titre suffit */

    /* La largeur fixe du bloc d'identite sert a ALIGNER les barres d'un projet
       a l'autre, en colonne. Sur 420 px il n'y a plus de colonne a aligner, et
       ces 460 px de gabarit poussaient simplement la barre et le pourcentage
       hors de l'ecran : replier ses projets pour les embrasser d'un coup d'oeil
       — le geste meme pour lequel ce resume existe — ne donnait plus rien au
       telephone. Vu sur l'apercu en 420 px de large, pas devine. */
    .gest-tete { flex-wrap: wrap; }
    .gest-tete-id { flex: 1 1 100%; }
    .gest-tete-barre { margin-left: 17px; }
}

/* Gestion mobile — ligne compacte M4 (capture Mathieu 02/09).
   La fiche à trois étages ci-dessus datait d'avant les maquettes : avatars
   seuls sur leur rangée, puis le statut en BOUTON PLEIN ÉCRAN — trois tâches
   remplissaient le téléphone. m4-projet-accordeon.svg veut une ligne : titre
   en gras, statut + échéance en petit dessous, avatars à droite sur les deux
   rangées. Périmètre : la GESTION seulement — Mes tâches a ses cartes M1
   (.mine-groupe), le :not() les laisse intactes et bat la fiche générique
   par spécificité, sans !important. */
@media (max-width: 720px) {
    .tasks-view:not(.tasks-view--mine) .gest-ligne { grid-template-columns: 6px minmax(0, 1fr) auto auto; }
    .tasks-view:not(.tasks-view--mine) .gest-ligne > .gest-c-bar { grid-row: 1 / 3; padding: 0; }
    .tasks-view:not(.tasks-view--mine) .gest-ligne > .gest-c-titre { grid-row: 1; grid-column: 2 / 4; font-weight: 650; min-height: 40px; }
    .tasks-view:not(.tasks-view--mine) .gest-ligne > .gest-c-statut { grid-row: 2; grid-column: 2; display: flex; justify-content: flex-start; align-items: center; min-height: 26px; padding: 0 0 7px 10px; }
    .tasks-view:not(.tasks-view--mine) .gest-ligne > .gest-c-date { grid-row: 2; grid-column: 3; min-height: 26px; padding: 0 10px 7px 6px; font-size: 11.5px; }
    .tasks-view:not(.tasks-view--mine) .gest-ligne > .gest-c-qui { grid-row: 1 / 3; grid-column: 4; align-items: center; justify-content: flex-end; padding-right: 10px; }
    /* Le width:100% du tableau desktop transforme la pastille en mur. */
    .tasks-view:not(.tasks-view--mine) .gest-ligne .tstatut { width: auto; align-self: center; border-radius: 999px; padding: 2px 10px; font-size: 11px; }
    .tasks-view:not(.tasks-view--mine) .gest-ligne .gest-pending { width: auto; min-height: 0; margin: 0; }
    .tasks-view:not(.tasks-view--mine) .gest-ligne .tasks-avatar { width: 24px; height: 24px; font-size: 10px; }
}
/* === fin GESTION DE PROJETS === */

/* Bibliothèque de statuts personnalisés — utilisée dans les vues Projet
   classique et pilotage, donc volontairement hors du bloc .gest cloisonné. */
.tslib-divider { height: 1px; margin: 6px 2px; background: var(--gs-line, rgba(40,34,24,.10)); }
.tslib-label { padding: 5px 4px 3px; color: var(--gs-ink-faint, rgba(40,38,34,.44));
    font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.tslib-reuse small { margin-left: auto; font-size: 9px; font-weight: 650; opacity: .68; }
.tslib-add { width: 100%; min-height: 36px; margin-top: 4px; padding: 7px 9px;
    border: 1px dashed var(--gs-line-strong, rgba(168,134,63,.32)); border-radius: var(--gs-radius-control, 8px);
    background: var(--gs-panel, #fff); color: var(--gs-ink-dim, rgba(40,38,34,.66));
    font: 650 12px 'Inter', sans-serif; text-align: left; cursor: pointer; }
.tslib-add:hover { border-style: solid; color: var(--gs-ink, #282828); background: var(--gs-accent-soft, rgba(168,134,63,.12)); }
.tslib-modal { max-width: 440px; }
.tslib-hint { margin: -3px 0 15px; color: var(--gs-ink-dim, rgba(40,38,34,.66)); font-size: 12.5px; line-height: 1.45; }
.tslib-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; }
.tslib-field input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--gs-line-strong, rgba(168,134,63,.32));
    border-radius: var(--gs-radius-control, 8px); background: var(--gs-panel, #fff); color: var(--gs-ink, #282828); font: inherit; }
.tslib-colors { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; padding: 0; border: 0; }
.tslib-colors legend { width: 100%; margin-bottom: 6px; color: var(--gs-ink-dim, rgba(40,38,34,.66)); font-size: 11px; font-weight: 700; }
.tslib-color { min-width: 0; width: 27px; height: 27px; padding: 0; border-radius: 7px; cursor: pointer; position: relative; }
.tslib-color input { position: absolute; opacity: 0; pointer-events: none; }
.tslib-color:has(input:checked) { outline: 2px solid var(--gs-ink, #282828); outline-offset: 2px; }
.tslib-share { display: flex; align-items: flex-start; gap: 10px; padding: 12px;
    border: 1px solid var(--gs-line, rgba(40,34,24,.10)); border-radius: var(--gs-radius-card, 10px); background: var(--gs-panel-2, #F1EADA); }
.tslib-share input { margin-top: 3px; }
.tslib-share span { display: flex; flex-direction: column; gap: 3px; }
.tslib-share b { font-size: 12.5px; color: var(--gs-ink, #282828); }
.tslib-share small { color: var(--gs-ink-dim, rgba(40,38,34,.66)); font-size: 11px; line-height: 1.4; }
body[data-gtheme="dark"] .tslib-add, body[data-gtheme="dark"] .tslib-field input { background: var(--gs-panel); color: var(--gs-ink); }

/* ═══════════════════════════════════════════════════════════════════
   L'ATELIER GANDALF — direction visuelle validée (dev-mon)

   `gest2` est posé par renderGestion et ne déborde jamais sur les cartes,
   le kanban ou la fiche. Le vieux socle reste donc un repli réactivable sans
   migration; cette couche ne change que la composition finale du tableau.
   ═══════════════════════════════════════════════════════════════════ */
.gest2 .gest-portee {
    padding: 2px 2px 8px; margin-bottom: 8px;
    background: transparent; border: 0; border-radius: 0;
}
.gest2 .gest-portee-lbl { font-size: 10px; }
.gest2 .gest-portee-nom { font-size: 13px; }
.gest2 .gest-outils {
    padding: 4px 0 10px; margin-bottom: 10px;
    background: transparent; border: 0; border-radius: 0;
}
/* Plus d'override doré : « + Nouvelle tâche » garde l'encre DA de la règle
   de base .gest-neuf (#282828) — le brun-or détonnait (capture 02/09). */
.gest2 .gest-groupe { margin-bottom: 24px; }
.gest2 .gest-tete { min-height: 36px; padding: 0 4px; }
.gest2 .gest-pastille {
    width: 4px; height: 25px; border-radius: 3px;
}
.gest2 .gest-tab {
    border-right: 0; border-left: 0; border-radius: 0;
}
.gest2 .gest-entete { background: transparent; }
.gest2 .gest-h { min-height: 29px; padding-top: 0; padding-bottom: 0; }
.gest2 .gest-h-b { padding-top: 0; padding-bottom: 0; }
.gest2 .gest-ligne > * {
    min-height: 42px;
    border-right-color: transparent;
}
.gest2 .gest-ligne:hover > * { border-right-color: var(--gs-line, rgba(40,34,24,.10)); }
.gest2 .gest-c-prio .tasks-meta-chip {
    padding: 0; background: transparent; box-shadow: none;
}

/* Une brume colorée, pas un mur saturé. La variable locale garde la teinte
   métier comme repère; color-mix la dilue dans la surface du thème courant. */
.gest2 .tstatut-gris      { --gest2-statut: var(--tst-gris); }
.gest2 .tstatut-vert      { --gest2-statut: var(--tst-vert); }
.gest2 .tstatut-lime      { --gest2-statut: var(--tst-lime); }
.gest2 .tstatut-jaune     { --gest2-statut: var(--tst-jaune); }
.gest2 .tstatut-orange    { --gest2-statut: var(--tst-orange); }
.gest2 .tstatut-rouge     { --gest2-statut: var(--tst-rouge); }
.gest2 .tstatut-rose      { --gest2-statut: var(--tst-rose); }
.gest2 .tstatut-violet    { --gest2-statut: var(--tst-violet); }
.gest2 .tstatut-indigo    { --gest2-statut: var(--tst-indigo); }
.gest2 .tstatut-bleu      { --gest2-statut: var(--tst-bleu); }
.gest2 .tstatut-turquoise { --gest2-statut: var(--tst-turquoise); }
.gest2 .tstatut-brun      { --gest2-statut: var(--tst-brun); }
.gest2 .gest-c-statut .tstatut {
    width: calc(100% - 14px); min-height: 32px; align-self: center;
    margin: 4px 7px; padding: 3px 8px; border-radius: 6px;
    background: color-mix(in srgb, var(--gest2-statut, var(--tst-gris)) 16%, var(--gs-panel, #fff));
    color: color-mix(in srgb, var(--gest2-statut, var(--tst-gris)) 66%, var(--gs-ink, #282828));
    box-shadow: inset 2px 0 0 var(--gest2-statut, var(--tst-gris));
}
.gest2 .gest-c-statut .tstatut-orphelin {
    background: repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--tst-gris) 18%, var(--gs-panel, #fff)),
        color-mix(in srgb, var(--tst-gris) 18%, var(--gs-panel, #fff)) 5px,
        color-mix(in srgb, var(--tst-gris) 30%, var(--gs-panel, #fff)) 5px,
        color-mix(in srgb, var(--tst-gris) 30%, var(--gs-panel, #fff)) 10px);
}

body[data-gtheme="dark"] .gest2 .gest-portee { background: transparent; border: 0; }

@media (max-width: 720px) {
    .gest2 .gest-c-statut .tstatut,
    .gest2 .gest-c-statut .gest-pending { width: calc(100% - 12px); margin: 4px 6px; }
}

/* -------------------------------------------------------------------
   L'ATELIER, composition finale. Le premier passage ne changeait que la
   teinte des statuts et quatre espacements : l'ancien ecran restait donc
   parfaitement reconnaissable. Cette passe remplace reellement sa hierarchie
   sans toucher au modele ni aux routes.
   ------------------------------------------------------------------- */
.tasks-projects-row--atelier { display: none; }
.gest2 {
    width: min(100%, 1880px);
    margin: 0 auto;
    padding: 0 0 56px;
    color: var(--gs-ink, #282828);
}
.gest2-hero {
    position: relative;
    overflow: hidden;
    margin: 0 0 14px;
    padding: 20px 24px 0;
    border: 1px solid var(--gs-line, rgba(40,34,24,.1));
    border-radius: 16px;
    background:
        radial-gradient(circle at 93% 8%, rgba(168,134,63,.17), transparent 25%),
        linear-gradient(135deg, var(--gs-panel, #fff), var(--gs-panel-2, #f7f1e6));
}
.gest2-hero::after {
    content: "";
    position: absolute;
    width: 180px; height: 180px; right: -80px; top: -95px;
    border: 1px solid rgba(168,134,63,.22); border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(168,134,63,.04), 0 0 0 46px rgba(168,134,63,.025);
    pointer-events: none;
}
/* Le fil d'ariane « Tâches › IT » est PARTI (Mathieu, 02/09 : « une ligne
   gâchée pour rien »). Seul survivant : le retour à l'espace, visible
   uniquement quand la vue est limitée à un projet. */
.gest2-retour {
    border: 0; padding: 0 0 8px; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--gs-ink-faint, #8a8175);
}
.gest2-retour:hover { color: var(--gs-gold-b, #a1823f); text-decoration: underline; }
.gest2-hero-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.gest2-kicker {
    display: block; margin-bottom: 4px;
    color: var(--gs-gold-b, #a1823f); font-size: 10px; font-weight: 750;
    letter-spacing: .14em; text-transform: uppercase;
}
.gest2-hero h2 {
    margin: 0; font-family: Outfit, Inter, sans-serif; font-size: clamp(24px, 2vw, 32px);
    line-height: 1.08; letter-spacing: -.035em; font-weight: 700;
}
.gest2-hero p { margin: 7px 0 0; color: var(--gs-ink-dim, #6b6357); font-size: 13px; }
.gest2 .gest-portee {
    flex: 0 1 auto; display: grid; grid-template-columns: auto auto; gap: 1px 8px;
    min-width: 190px; max-width: 360px; margin: 0; padding: 8px 10px;
    border: 1px solid var(--gs-line, rgba(40,34,24,.1)); border-radius: 10px;
    background: color-mix(in srgb, var(--gs-panel, #fff) 82%, transparent);
    box-shadow: 0 5px 18px rgba(40,34,24,.04);
}
.gest2 .gest-portee-lbl { grid-column: 1 / -1; font-size: 9px; letter-spacing: .1em; }
.gest2 .gest-portee-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gest2 .gest-portee-tout { margin: 5px 0 0; grid-column: 1 / -1; justify-self: start; min-height: 28px; }
.gest2-views { display: flex; align-items: center; gap: 24px; margin-top: 19px; }
.gest2-views span {
    position: relative; padding: 10px 1px 11px; font-size: 12.5px;
    color: var(--gs-ink-faint, #8a8175);
}
.gest2-views span:not(.on) { opacity: .58; }
.gest2-views .on { color: var(--gs-ink, #282828); font-weight: 650; }
.gest2-views .on::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    border-radius: 2px 2px 0 0; background: var(--gs-gold-b, #a1823f);
}
.gest2-alert {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 12px;
    border: 1px solid color-mix(in srgb, var(--tst-orange) 35%, transparent);
    border-radius: 9px; background: color-mix(in srgb, var(--tst-orange) 10%, var(--gs-panel, #fff));
    color: var(--gs-ink, #282828); font-size: 12px;
}

.gest2 .gest-outils {
    position: sticky; top: 0; z-index: 5;
    display: flex; flex-wrap: nowrap; gap: 6px; min-height: 52px;
    padding: 7px 0; margin: 0 0 4px;
    background: color-mix(in srgb, var(--gs-panel, #fff) 92%, transparent);
    border-bottom: 1px solid var(--gs-line, rgba(40,34,24,.1));
    backdrop-filter: blur(12px);
}
.gest2 .gest-neuf { min-height: 38px; padding: 0 16px; border-radius: 8px; box-shadow: 0 4px 12px rgba(113,84,31,.16); }
.gest2-search-slot { flex: 1 1 300px; min-width: 180px; max-width: 560px; position: relative; }
.gest2-search-slot::before {
    content: "\2315"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--gs-ink-faint, #8a8175); z-index: 1; pointer-events: none;
}
.gest2-search-slot .gest2-search-input {
    display: block; width: 100%; height: 38px; box-sizing: border-box; margin: 0;
    padding: 0 12px 0 32px; border-radius: 8px;
    border: 1px solid var(--gs-line, rgba(40,34,24,.12));
    background: var(--gs-panel, #fff); color: var(--gs-ink, #282828);
    font: inherit; font-size: 12.5px;
}
.gest2-search-slot .gest2-search-input:focus { border-color: var(--gs-gold-b, #a1823f); box-shadow: var(--e-focus, 0 0 0 3px rgba(168,134,63,.18)); }
.gest2 .gest-outil, .gest2-menu > summary {
    min-height: 38px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px;
    padding: 0 11px; border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: var(--gs-ink-dim, #6b6357);
    font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; list-style: none;
}
.gest2-menu > summary::-webkit-details-marker { display: none; }
.gest2-menu > summary:hover, .gest2 .gest-outil:hover { background: var(--gs-panel-2, #f7f1e6); border-color: var(--gs-line, rgba(40,34,24,.1)); }
.gest2-menu { position: relative; }
.gest2-menu[open] > summary { background: var(--gs-accent-soft, rgba(168,134,63,.13)); border-color: var(--gs-line-strong, rgba(168,134,63,.32)); }
.gest2-menu-pop {
    position: absolute; z-index: 20; top: calc(100% + 5px); left: 0;
    min-width: 210px; display: flex; flex-direction: column; gap: 3px;
    padding: 6px; border: 1px solid var(--gs-line, rgba(40,34,24,.1));
    border-radius: 10px; background: var(--gs-panel, #fff); box-shadow: 0 14px 38px rgba(30,24,16,.17);
}
.gest2-menu-pop .gest-lbl { padding: 7px 8px 4px; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; }
.gest2-menu-pop .gest-axe, .gest2-menu-pop .gest-outil {
    width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: space-between;
    margin: 0; padding: 0 9px; text-align: left; border-radius: 7px;
}
.gest2-menu-pop .gest-axe.on { border-color: transparent; }
/* Les OUTILS du menu (« Tout déplier », « Colonnes ») se lisent comme les
   axes : icône puis libellé, collés à gauche. Le `space-between` hérité
   au-dessus est fait pour les axes (libellé ↔ coche) ; sur un outil à deux
   enfants il jetait l'icône à gauche et le texte à droite, et le compte de
   « Colonnes » poussait son libellé au milieu. Seul le compte part à droite. */
.gest2-menu-pop .gest-outil { justify-content: flex-start; gap: 10px; }
.gest2-menu-pop .gest-outil .gest-ic { width: 16px; display: inline-flex; justify-content: center; }
.gest2-menu-pop .gest-outil .gest-outil-n { margin-left: auto; }
/* « Archiver ce tableau », dernier du menu ••• — ticket WvYAUy3DxQRiLnRcOlnO.
   Au-dessus de lui, deux gestes parfaitement réversibles (déplier, colonnes) :
   un filet l'en détache et le rouge n'arrive qu'au survol, pour ne pas crier
   depuis un menu qu'on ouvre surtout pour choisir des colonnes. Même contrat
   que « Retirer cette liste » (.gest-list-del), plus bas dans ce fichier.

   Le sélecteur porte `button.gest-board-archive` (0-3-1) : la règle générique
   `.gest2-menu-pop .gest-outil` (0-2-0) pose `justify-content: flex-start` et
   `border: 1px solid transparent` — un 0-2-0 de notre côté aurait perdu le
   filet à spécificité égale sans rien dire. */
.gest2 .gest2-menu-pop button.gest-board-archive {
    margin-top: 3px; padding-top: 3px;
    border-top: 1px solid var(--gs-line, rgba(40,34,24,.12));
    border-radius: 0 0 6px 6px; color: #a33;
}
.gest2 .gest2-menu-pop button.gest-board-archive:hover {
    background: rgba(197,58,58,.14); border-color: transparent;
    border-top-color: var(--gs-line, rgba(40,34,24,.12));
}
body[data-gtheme="dark"] .gest2 .gest2-menu-pop button.gest-board-archive { color: #e79a9a; }

.gest2-more { margin-left: auto; }
.gest2-more > summary { width: 42px; justify-content: center; font-weight: 800; letter-spacing: .12em; }
.gest2-more .gest2-menu-pop { left: auto; right: 0; }

.gest2 .gest-chiffres {
    display: flex; align-items: center; gap: 0; margin: 0 0 25px;
    min-height: 34px; border-bottom: 1px solid var(--gs-line, rgba(40,34,24,.08));
    color: var(--gs-ink-faint, #8a8175);
}
.gest2-summary-title { margin-right: 14px; color: var(--gs-ink, #282828); font-weight: 650; }
.gest2 .gest-chiffre { padding: 0 12px; border-left: 1px solid var(--gs-line, rgba(40,34,24,.1)); }
.gest2 .gest-chiffre b { margin-right: 3px; }
.gest2-summary-tri { margin-left: auto; font-size: 11px; }

.gest2 .gest-groupe { margin-bottom: 30px; }
.gest2 .gest-tete {
    min-height: 38px; padding: 0 2px 7px; gap: 12px; cursor: pointer;
    border-bottom: 0;
}
.gest2 .gest-tete-id { flex: 1 1 360px; }
.gest2 .gest-nom { font-family: Outfit, Inter, sans-serif; font-size: 15px; font-weight: 650; }
.gest2 .gest-compte {
    padding: 2px 7px; border-radius: 9px; background: var(--gs-panel-2, #f7f1e6);
    color: var(--gs-ink-faint, #8a8175); font-size: 10.5px;
}
.gest2 .gest-tete-barre { width: min(150px, 18vw); margin-left: auto; }
.gest2 .gest-tete-barre .gest-barre { height: 5px; border-radius: 3px; opacity: .82; }
.gest2 .gest-tete-pct { min-width: 34px; text-align: right; font-weight: 650; }
.gest2 .gest-pastille { width: 4px; height: 24px; border-radius: 3px; }
.gest2 .gest-tab {
    width: max-content; max-width: 100%; overflow-x: auto;
    border: 1px solid var(--gs-line, rgba(40,34,24,.1)); border-radius: 11px;
    background: var(--gs-panel, #fff); box-shadow: 0 1px 0 rgba(40,34,24,.02);
}
.gest2 .gest-entete {
    /* .gest-tab defile horizontalement et devient donc son propre conteneur de
       defilement. Un `sticky top:52px` s'y calait 52 px SOUS le bord du groupe
       et recouvrait la premiere tache. Les en-tetes sont deja repetes par
       groupe : statiques, ils restent proches des donnees sans chevauchement. */
    position: static;
    min-height: 30px; background: var(--gs-panel-2, #f7f1e6);
}
.gest2 .gest-h { border-right-color: transparent; font-size: 10px; letter-spacing: .045em; text-transform: uppercase; }
.gest2 .gest-h-b { font-weight: 600; }
.gest2 .gest-ligne { transition: background .12s ease, box-shadow .12s ease; }
.gest2 .gest-ligne > * { min-height: 42px; border-right-color: transparent; }
.gest2 .gest-ligne:hover > * { background: color-mix(in srgb, var(--gs-accent-soft, rgba(168,134,63,.13)) 48%, var(--gs-panel, #fff)); }
.gest2 .gest-ligne.tasks-dock-selected > * { background: var(--gs-accent-soft, rgba(168,134,63,.13)); }
.gest2 .gest-ligne.tasks-dock-selected { box-shadow: inset 0 0 0 1px var(--gs-line-strong, rgba(168,134,63,.32)); }
/* 97 px et non 68 depuis le 21/09 : la poubelle occupe 65→89, il faut la
   meme respiration qu'avant (~8 px) derriere elle. Les DEUX regles de reserve
   doivent suivre — celle-ci et sa jumelle plus bas (~l. 19935), ecrite pour
   reprendre le dessus sur le padding uniforme des cellules. */
.gest2 .gest-c-titre { padding: 0 97px 0 8px; display: flex; align-items: center; gap: 7px; }
.gest2 .gest-titre-txt { flex: 1; padding: 0; font-weight: 520; }
.gest-st-resume {
    flex: 0 0 auto; min-width: 70px; height: 30px; display: inline-flex; align-items: center; gap: 5px;
    padding: 0 7px; border: 1px solid transparent; border-radius: 7px;
    background: transparent; color: var(--gs-ink-faint, #8a8175); cursor: pointer;
    font: 600 10.5px/1 Inter, sans-serif; font-variant-numeric: tabular-nums;
}
.gest-st-resume:hover, .gest-st-resume.on {
    border-color: var(--gs-line-strong, rgba(168,134,63,.3));
    background: var(--gs-accent-soft, rgba(168,134,63,.13)); color: var(--gs-ink, #282828);
}
.gest-st-resume.empty { min-width: 30px; width: 30px; padding: 0; justify-content: center; opacity: .62; }
.gest-st-resume.empty:hover, .gest-st-resume.empty.on { opacity: 1; }
.gest-st-chev { width: 10px; text-align: center; font-size: 12px; }
.gest-st-count { min-width: 20px; text-align: right; }
.gest-st-mini { width: 25px; height: 4px; overflow: hidden; border-radius: 3px; background: var(--gs-line, rgba(40,34,24,.12)); }
.gest-st-mini i, .gest-st-bar i {
    display: block; height: 100%; border-radius: inherit;
    background: var(--tst-vert, #20b36b); transition: width .18s ease;
}

/* Enfant direct de .gest-tab, juste après sa tâche. Il partage sa largeur,
   mais pas sa grille : les étapes ont besoin d'un texte long, pas de cinq
   cellules répétées. */
.gest-st-panel {
    width: 100%; min-width: 100%; box-sizing: border-box; padding: 10px 14px 12px 46px;
    border-top: 1px solid var(--gs-line, rgba(40,34,24,.08));
    border-bottom: 1px solid var(--gs-line, rgba(40,34,24,.1));
    background: color-mix(in srgb, var(--gs-panel-2, #f7f1e6) 58%, var(--gs-panel, #fff));
}
.gest-st-panel.is-loading, .gest-st-panel.is-error {
    min-height: 48px; display: flex; align-items: center; gap: 10px;
    color: var(--gs-ink-faint, #8a8175); font-size: 12px;
}
.gest-st-panel.is-error button {
    border: 0; background: transparent; color: var(--gs-gold-b, #a1823f); font: inherit; font-weight: 650; cursor: pointer;
}
.gest-st-head { display: flex; align-items: center; gap: 9px; min-height: 27px; margin-bottom: 5px; }
.gest-st-title { color: var(--gs-ink, #282828); font-size: 12px; font-weight: 700; }
.gest-st-total { color: var(--gs-ink-faint, #8a8175); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.gest-st-bar { width: 90px; height: 5px; overflow: hidden; margin-left: 3px; border-radius: 3px; background: var(--gs-line, rgba(40,34,24,.12)); }
.gest-st-list { list-style: none; margin: 0; padding: 0; }
.gest-st-row {
    min-height: 35px; display: flex; align-items: center; gap: 8px; padding: 3px 5px;
    border-radius: 7px; color: var(--gs-ink, #282828); font-size: 12px;
}
.gest-st-row:hover { background: color-mix(in srgb, var(--gs-panel, #fff) 72%, transparent); }
.gest-st-check {
    flex: 0 0 auto; width: 21px; height: 21px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--gs-line-strong, rgba(40,34,24,.25)); border-radius: 5px;
    background: var(--gs-panel, #fff); color: #fff; font: 800 12px/1 Inter, sans-serif; cursor: pointer;
}
.gest-st-row.done .gest-st-check { border-color: var(--tst-vert, #20b36b); background: var(--tst-vert, #20b36b); }
.gest-st-row.done .gest-st-text { color: var(--gs-ink-faint, #8a8175); text-decoration: line-through; }
.gest-st-text { min-width: 100px; flex: 1 1 auto; line-height: 1.35; }
.gest-st-meta { flex: 0 1 auto; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gs-ink-faint, #8a8175); font-size: 10.5px; }
.gest-st-actions { flex: 0 0 auto; display: flex; gap: 2px; opacity: .45; }
.gest-st-row:hover .gest-st-actions, .gest-st-actions:focus-within { opacity: 1; }
.gest-st-actions button, .gest-st-edit button, .gest-st-add button {
    min-width: 28px; height: 27px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px;
    background: transparent; color: var(--gs-ink-dim, #655f55); font: 600 11px/1 Inter, sans-serif; cursor: pointer;
}
.gest-st-actions button:hover { border-color: var(--gs-line, rgba(40,34,24,.12)); background: var(--gs-panel, #fff); }
.gest-st-actions button.danger:hover { color: var(--tst-rouge, #d64545); }
.gest-st-edit { width: 100%; display: flex; align-items: center; gap: 6px; }
.gest-st-edit input, .gest-st-add input {
    min-width: 0; height: 31px; box-sizing: border-box; margin: 0; padding: 0 9px;
    border: 1px solid var(--gs-line, rgba(40,34,24,.12)); border-radius: 7px;
    background: var(--gs-panel, #fff); color: var(--gs-ink, #282828); font: inherit; text-transform: none;
}
.gest-st-edit input { flex: 1 1 auto; }
.gest-st-edit button[type="submit"], .gest-st-add button[type="submit"] {
    border-color: var(--gs-line-strong, rgba(168,134,63,.3)); background: var(--gs-accent-soft, rgba(168,134,63,.13));
}
.gest-st-add { display: flex; align-items: center; gap: 8px; min-height: 36px; margin-top: 4px; padding: 3px 5px; color: var(--gs-gold-b, #a1823f); }
.gest-st-add input { flex: 0 1 430px; }
.gest-st-empty { padding: 5px; color: var(--gs-ink-faint, #8a8175); font-size: 11px; font-style: italic; }
.gest2 .gest-crayon { right: 36px; opacity: .36; border-color: transparent; }
/* Troisieme echelon — ticket kTZGzFEmux1DIyGckvu7. La bulle reste a 7, le
   crayon a 36 : les deux gestes deja connus ne bougent pas. */
.gest2 .gest-poubelle { right: 65px; opacity: .36; border-color: transparent; }
.gest2 .gest-discussion {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; display: grid; place-items: center; padding: 0;
    border: 1px solid transparent; border-radius: 7px; background: transparent;
    color: var(--gs-ink-faint, #8a8175); cursor: pointer; opacity: .62;
}
.gest2 .gest-ligne:hover .gest-crayon,
.gest2 .gest-ligne:hover .gest-poubelle,
.gest2 .gest-ligne:hover .gest-discussion { opacity: 1; }
.gest2 .gest-discussion:hover { border-color: var(--gs-line-strong, rgba(168,134,63,.32)); background: var(--gs-panel, #fff); }
.gest2 .gest-ajout { min-height: 39px; border-radius: 0 0 10px 10px; padding-left: 22px; }
.gest2 .gest-pied { margin-top: 6px; }

/* La liste personnelle suit la meme grammaire : une rangee calme et utile,
   pas une pile de cartes flottantes. */
.tasks-card {
    min-height: 58px; border-radius: 10px; padding: 9px 12px;
    box-shadow: none; transition: background .12s ease, border-color .12s ease;
}
.tasks-card:hover { box-shadow: none; border-color: var(--gs-line-strong, rgba(168,134,63,.26)); }
.tasks-card.tasks-dock-selected { background: var(--gs-accent-soft, rgba(168,134,63,.13)); border-color: var(--gs-gold-b, #a1823f); }
.tasks-card-discussion { min-width: 31px; height: 29px; display: grid; place-items: center; padding: 0; font-size: 13px; }
/* 🗑️ de carte — ticket kTZGzFEmux1DIyGckvu7. DANS LE FLUX, a cote de la bulle,
   et surtout PAS en absolu dans le coin haut-droit ou vivent deja le 📌 et le
   ✏️ : ce coin a sa reserve calculee au pixel contre la bande d'avatars
   (.tasks-card-assignees:not(:empty){margin-right:42px}), et un troisieme
   bouton la ferait deborder sur un visage. La bulle avait tranche la meme
   question dans l'autre sens, pour la meme raison, et on la suit.
   Efface au repos, comme ses voisins : la carte reste calme tant qu'on ne la
   survole pas. Rouge au survol DIRECT seulement. */
.tasks-card-arch {
    min-width: 31px; height: 29px; display: grid; place-items: center; padding: 0;
    border: 1px solid transparent; border-radius: 7px; background: transparent;
    color: var(--gs-ink-faint, #8a8175); cursor: pointer; font-size: 13px;
    opacity: 0; transition: opacity .12s ease, color .12s ease,
                            background .12s ease, border-color .12s ease;
}
.tasks-card:hover .tasks-card-arch, .tasks-card-arch:focus-visible { opacity: .62; }
.tasks-card-arch:hover {
    opacity: 1;
    color: var(--tst-rouge, #d64545);
    background: color-mix(in srgb, var(--tst-rouge, #d64545) 9%, transparent);
    border-color: color-mix(in srgb, var(--tst-rouge, #d64545) 38%, transparent);
}
.tasks-card-arch:focus-visible {
    outline: none; opacity: 1;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tst-rouge, #d64545) 28%, transparent);
}
/* En cueillette, la carte entiere est une case a cocher : le 🗑️ ne doit pas
   agir au milieu d'une selection. Meme parti que le ✅ et le 📌. */
.tasks-card-picking .tasks-card-arch { display: none; }
@media (prefers-reduced-motion: reduce) {
    .tasks-card-arch { transition: none; }
}
/* La cueillette range aussi par lot : le bouton porte la meme couleur d'alerte
   au survol que la poubelle de rangee, pour qu'on lise « destructif » dans les
   deux endroits avec le meme reflexe. */
.tasks-pickbar .tpb-arch:hover {
    color: var(--tst-rouge, #d64545);
    border-color: color-mix(in srgb, var(--tst-rouge, #d64545) 38%, transparent);
}

/* Le quai est la continuation de la rangee : deux sections et une seule
   elevation. Sa largeur est definie une seule fois dans le bloc canonique du
   quai, plus bas, afin que le responsive et le panneau ne divergent pas. */
.dock-head { min-height: 46px; padding: 8px 12px; }
.dock-title { font-size: 12px; color: var(--gs-ink-faint, #8a8175); }
.dock-body { padding: 0; }
.tasks-detail { padding: 0 20px 28px; color: var(--gs-ink, #282828); }
.tasks-detail-hero { padding: 20px 0 12px; }
.tasks-detail-context {
    margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--gs-ink-faint, #8a8175); font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
}
.tasks-detail-hero .tasks-detail-title {
    margin: 0; font-family: Outfit, Inter, sans-serif; font-size: 23px; line-height: 1.2;
    letter-spacing: -.025em; color: var(--gs-ink, #282828);
}
.tasks-detail-status-row { margin-bottom: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--gs-line, rgba(40,34,24,.08)); }
.tasks-detail-desc {
    margin: 14px 0 16px; padding: 13px 14px; border: 1px solid var(--gs-line, rgba(40,34,24,.08));
    border-left: 2px solid var(--gs-gold-b, #a1823f); border-radius: 9px;
    background: var(--gs-panel-2, #f7f1e6); color: var(--gs-ink-dim, #5f594f);
}
.tasks-detail-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0; }
.tasks-detail-field {
    min-width: 0; padding: 10px 11px; border: 1px solid var(--gs-line, rgba(40,34,24,.08));
    border-radius: 9px; background: var(--gs-panel, #fff);
}
.tasks-detail-field label { font-size: 9px; letter-spacing: .08em; }
.tasks-detail-actions { align-items: center; padding-top: 4px; }
.tasks-detail-more { position: relative; }
.tasks-detail-more > summary {
    min-height: 34px; display: flex; align-items: center; padding: 0 11px;
    border: 1px solid var(--gs-line, rgba(40,34,24,.1)); border-radius: 8px;
    color: var(--gs-ink-dim, #6b6357); font-size: 11px; cursor: pointer; list-style: none;
}
.tasks-detail-more > summary::-webkit-details-marker { display: none; }
.tasks-detail-more > div {
    /* Ancré à GAUCHE du bouton : depuis qu'Archiver est sur la rangée, « Plus
       d'options » passe à la ligne et se retrouve au bord gauche du panneau —
       ancré à droite, le menu sortait de l'écran (capture du 11/09, 13 h 31). */
    position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 4;
    width: 250px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; gap: 4px; padding: 6px;
    border: 1px solid var(--gs-line, rgba(40,34,24,.1)); border-radius: 10px;
    background: var(--gs-panel, #fff); box-shadow: 0 14px 38px rgba(30,24,16,.18);
}
.tasks-detail-more > div .btn { width: 100%; justify-content: flex-start; text-align: left; }
.tasks-detail-discussion .tasks-comments-title { font-family: Outfit, Inter, sans-serif; font-size: 15px; }

body[data-gtheme="dark"] .gest2-hero {
    background: radial-gradient(circle at 93% 8%, rgba(221,203,164,.12), transparent 25%), linear-gradient(135deg, #2b2823, #24211d);
}
body[data-gtheme="dark"] .gest2 .gest-portee { background: rgba(20,18,15,.35); border: 1px solid rgba(221,203,164,.14); }
body[data-gtheme="dark"] .gest2 .gest-outils { background: rgba(32,29,25,.92); }
body[data-gtheme="dark"] .gest2-menu-pop,
body[data-gtheme="dark"] .tasks-detail-more > div { background: #2b2823; border-color: rgba(221,203,164,.15); }
body[data-gtheme="dark"] .gest2 .gest-tab { background: #2b2823; }
body[data-gtheme="dark"] .gest2 .gest-entete { background: #24211d; }
body[data-gtheme="dark"] .gest2 .gest-ligne:hover > * { background: rgba(221,203,164,.07); }
body[data-gtheme="dark"] .gest-st-panel { background: rgba(255,255,255,.025); }
body[data-gtheme="dark"] .gest-st-row:hover { background: rgba(255,255,255,.04); }
body[data-gtheme="dark"] .tasks-detail-field { background: #2b2823; border-color: rgba(221,203,164,.12); }

@media (max-width: 900px) {
    .gest2-hero { padding: 16px 16px 0; }
    .gest2-hero-main { flex-direction: column; gap: 12px; }
    .gest2 .gest-portee { width: 100%; max-width: none; box-sizing: border-box; }
    .gest2 .gest-outils { flex-wrap: wrap; }
    .gest2-search-slot { order: 3; flex-basis: 100%; max-width: none; }
    .gest2 .gest-chiffres { overflow-x: auto; white-space: nowrap; }
    .gest2-summary-tri { display: none; }
}
@media (max-width: 720px) {
    .tasks-list.tasks-list-large { padding: 10px; }
    .gest2-hero { margin-bottom: 8px; border-radius: 13px; }
    .gest2-hero h2 { font-size: 24px; }
    .gest2-hero p { display: none; }
    .gest2-views { margin-top: 12px; gap: 18px; overflow-x: auto; }
    .gest2 .gest-neuf { flex: 1; }
    .gest2 .gest-outil { padding: 0 8px; }
    .gest2 .gest-chiffres { margin-bottom: 18px; }
    .gest2-summary-title { display: none; }
    .gest2 .gest-tete { align-items: flex-start; flex-wrap: wrap; }
    .gest2 .gest-tete-id { flex-basis: calc(100% - 48px); }
    .gest2 .gest-tete-barre { width: 110px; margin-left: 17px; }
    .gest2 .gest-ligne, .gest2 .gest-pied { grid-template-columns: 5px 1fr auto; }
    .gest2 .gest-c-titre { min-height: 45px; }
    .gest2 .gest-c-qui { min-height: 34px; padding-left: 12px; }
    .gest2 .gest-c-date { min-height: 34px; padding-right: 12px; }
    .gest2 .gest-c-statut { min-height: 38px; }
    .gest-st-panel { padding: 9px 10px 11px 18px; }
    .gest-st-meta { display: none; }
    .gest-st-actions { opacity: 1; }
    .gest-st-add input { flex: 1 1 auto; }
    .tasks-dock { --quai-l: 100vw; }
    .tasks-detail-fields { grid-template-columns: 1fr; }
    .tasks-detail { padding-left: 15px; padding-right: 15px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ÉDITEUR DE STATUTS — définir ses colonnes, puis les poser
   ═══════════════════════════════════════════════════════════════════
   Deux écrans, un seul préfixe `.tstx` : la liste éditable dans la fiche
   projet, et le menu de choix sur une tâche. Comme pour `.gest`, le
   préfixe est VÉRIFIÉ par un test — l'affichage classique ne doit pas
   pouvoir être repeint par une règle qui déborde.
   Les teintes viennent des `.tstatut-<couleur>` définies plus haut :
   aucune valeur hexadécimale n'est réécrite ici, sinon le thème sombre
   et l'éditeur divergeraient au premier ajout de couleur. */

.tstx-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

.tstx-ligne {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 6px 8px; border: 1px solid var(--border-color, #e3e5ea);
    border-radius: 8px; background: var(--card-bg, #fff);
}
/* Un statut qui termine la tâche se lit du coin de l'œil : c'est la
   propriété qui a des conséquences (sortie des listes, fin des alertes),
   pas le nom qu'on lui donne. */
.tstx-fini { border-left: 3px solid var(--tst-vert); }

.tstx-pastille {
    width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,.18); cursor: pointer; padding: 0;
}
.tstx-nom {
    flex: 1 1 140px; min-width: 120px; padding: 5px 8px; font-size: 13px;
    border: 1px solid var(--border-color, #e3e5ea); border-radius: 6px;
    background: var(--input-bg, #fff); color: inherit;
}
.tstx-done { display: flex; align-items: center; gap: 4px; font-size: 12px; opacity: .85; cursor: pointer; }
.tstx-done input { margin: 0; }
.tstx-approval {
    display: flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer;
    padding: 4px 7px; border-radius: 7px; color: #72581f;
    background: rgba(168,134,63,.10); border: 1px dashed rgba(168,134,63,.38);
}
.tstx-approval input { margin: 0; }
body[data-gtheme="dark"] .tstx-approval { color: #F0D99E; background: rgba(168,134,63,.16); border-color: rgba(221,203,164,.42); }
.tstx-flow-lead { margin: 7px 0 12px; padding: 11px 12px; border-radius: 9px; background: rgba(168,134,63,.08); }
.tstx-flow-lead > label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; }
.tstx-flow-lead select { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--border-color, #e3e5ea); border-radius: 7px; background: var(--input-bg, #fff); color: inherit; }
body[data-gtheme="dark"] .tstx-flow-lead { background: rgba(221,203,164,.08); }

/* Le nombre de tâches qui portent le statut. Discret tant qu'il vaut
   quelque chose, effacé quand il vaut zéro — l'information utile est
   « celui-ci est utilisé », pas « celui-là ne l'est pas ». */
.tstx-usage {
    font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 10px;
    background: color-mix(in srgb, currentColor 10%, transparent);
}
.tstx-usage-vide { opacity: .4; font-weight: 400; }

.tstx-bt {
    background: none; border: none; cursor: pointer; font-size: 13px;
    opacity: .6; padding: 2px 4px; line-height: 1; color: inherit;
}
.tstx-bt:hover:not(:disabled) { opacity: 1; }
.tstx-bt:disabled { opacity: .2; cursor: default; }
.tstx-sup:hover { color: var(--tst-rouge); }

.tstx-nuancier {
    flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px;
    padding: 6px 0 2px; border-top: 1px dashed var(--border-color, #e3e5ea);
}
.tstx-teinte {
    width: 20px; height: 20px; border-radius: 50%; padding: 0;
    border: 2px solid transparent; cursor: pointer;
}
.tstx-teinte.on { border-color: var(--text-color, #16181D); }

.tstx-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.tstx-reset {
    background: none; border: none; cursor: pointer; font-size: 12px;
    opacity: .65; text-decoration: underline; color: inherit; padding: 0;
}
.tstx-reset:hover { opacity: 1; }

.tstx-avert { font-size: 12px; color: var(--tst-orange); margin-top: 2px; }
.tstx-avert div { margin-top: 3px; }

/* --- Le menu de choix, sur la fiche d'une tâche --- */
.tstx-declencheur {
    display: inline-flex; align-items: center; gap: 3px;
    background: none; border: none; padding: 0; cursor: pointer; color: inherit;
}
.tstx-caret { font-size: 10px; opacity: .5; }
.tstx-declencheur:hover .tstx-caret { opacity: 1; }

.tstx-choix { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.tstx-opt {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 10px; border-radius: 8px; cursor: pointer; text-align: left;
    border: 1px solid var(--border-color, #e3e5ea); background: var(--card-bg, #fff);
    color: inherit;
}
.tstx-opt:hover { border-color: var(--text-color, #16181D); }
.tstx-opt.on { border-color: var(--text-color, #16181D); border-width: 2px; padding: 6px 9px; }
.tstx-opt-fin { font-size: 11px; opacity: .55; margin-left: auto; }
.tstx-opt-validation {
    margin-left: auto; font-size: 10.5px; font-weight: 700; color: #72581f;
    white-space: nowrap;
}
body[data-gtheme="dark"] .tstx-opt-validation { color: #F0D99E; }

/* Sur mobile la ligne s'empile plutôt que de comprimer le champ de nom
   jusqu'à l'illisible — c'est le seul champ qu'on vient y saisir. */
@media (max-width: 620px) {
    .tstx-nom { flex: 1 1 100%; }
    .tstx-usage { margin-left: auto; }
}
/* === fin ÉDITEUR DE STATUTS === */

.tasks-chip-urgent { background: #FEE2E2; color: #991B1B; }
.tasks-chip-high   { background: #FFEDD5; color: #9A3412; }
.tasks-chip-low    { background: #D1FAE5; color: #065F46; }
.tasks-chip-normal { background: #E0E7FF; color: #3730A3; }
.tasks-chip-done   { background: #D1FAE5; color: #065F46; }
.tasks-chip-open   { background: #E0E7FF; color: #3730A3; }
.tasks-chip-in_progress { background: #FEF3C7; color: #92400E; }
.tasks-chip-project { background: rgba(221,203,164,0.4); color: var(--chanv-terre); }
.tasks-chip-pending {
    background: #F3EDE0; color: #6F5521;
    border: 1px dashed rgba(168, 134, 63, .62);
}
/* Seule puce cliquable de la rangée : elle part vers Basecamp, d'où le
   soulignement au survol pour la distinguer des étiquettes inertes. */
.tasks-chip-basecamp { background: #E6F0EC; color: #1D6152; text-decoration: none; cursor: pointer; }
.tasks-chip-basecamp:hover { background: #D5E7E1; text-decoration: underline; }
.tasks-due-late { background: #FEE2E2 !important; color: #991B1B !important; }

.tasks-card-assignees {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}
.tasks-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--chanv-beige, #DDCBA4);
    border: 2px solid white;
    box-shadow: 0 0 0 1px #e2e2e2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    color: var(--chanv-terre, #555);
    margin-left: -6px;
}
.tasks-avatar:first-child { margin-left: 0; }
.tasks-avatar-letter { background: var(--chanv-beige, #DDCBA4); }

/* Form modal */
.form-row { display: flex; gap: 14px; }
.form-row .form-group { flex: 1; }

.tasks-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
    min-height: 32px;
}
.tasks-no-selected { color: #aaa; font-size: 12px; font-style: italic; padding: 6px 0; }
.tasks-assign-me {
    background: rgba(221,203,164,0.3);
    border: none;
    color: var(--chanv-terre, #555);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
    cursor: pointer;
    margin-left: 8px;
    font-family: inherit;
    transition: background 0.15s;
}
.tasks-assign-me:hover { background: var(--chanv-beige, #DDCBA4); }
.tasks-chip {
    background: var(--chanv-beige, #DDCBA4);
    color: var(--chanv-terre);
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tasks-chip:hover { background: #C9A876; }
.tasks-chip-x { font-size: 14px; line-height: 1; }
.tasks-assignee-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-top: 6px;
}
/* Groupes d'employés en tête du picker : un raccourci vers des personnes, pas
   une catégorie à part. Le liseré et le fond très légers les distinguent sans
   les séparer — cliquer un groupe produit exactement le même résultat que
   cliquer ses membres un par un. */
.tasks-group-item { font-weight: 600; background: rgba(168,134,63,.06); border-left: 3px solid rgba(168,134,63,.45); }
.tasks-group-item small { font-weight: 400; opacity: .6; margin-left: 4px; }
.tasks-group-note { font-size: .74rem; color: var(--gs-muted, #8a7a5c); margin-top: 6px; line-height: 1.45; }
body[data-gtheme="dark"] .tasks-group-item { background: rgba(221,203,164,.07); border-left-color: rgba(221,203,164,.35); }
.tasks-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.1s;
}
.tasks-user-item:last-child { border-bottom: none; }
.tasks-user-item:hover { background: #fafafa; }
.tasks-user-photo {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--chanv-beige, #DDCBA4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chanv-terre);
    font-weight: 700;
    font-size: 13px;
}
.tasks-user-info { flex: 1; min-width: 0; }
.tasks-user-name { font-weight: 600; font-size: 13px; color: #222; }
.tasks-user-email { font-size: 11px; color: #999; }
.tasks-empty-list { padding: 18px; text-align: center; color: #999; font-size: 12px; }

/* Detail modal */
.tasks-detail-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.tasks-detail-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--chanv-terre);
    margin: 0 0 14px 0;
    line-height: 1.3;
}
.tasks-detail-desc {
    background: #fafafa;
    padding: 12px 14px;
    border-radius: 8px;
    color: #444;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
    border-left: 3px solid var(--chanv-beige);
}
.tasks-detail-fields { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 16px; }
.tasks-detail-field { flex: 1; min-width: 180px; }
.tasks-detail-field label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}
.tasks-detail-field > div { font-size: 13px; color: #444; }
.tasks-detail-assignees {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tasks-detail-assignee {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.tasks-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.btn-danger {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FCA5A5;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.btn-danger:hover { background: #FCA5A5; }

.tasks-comments-title {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 14px;
    color: #444;
}
.tasks-comments { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.tasks-comments-empty {
    text-align: center;
    color: #aaa;
    font-style: italic;
    font-size: 13px;
    padding: 14px;
}
.tasks-comment {
    background: #fafafa;
    border-radius: 8px;
    padding: 10px 12px;
}
.tasks-comment-hdr {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 12px;
}
/* Tenue alignée sur la règle plus bas dans ce fichier (celle qui gagne) —
   ticket EKnEKCjOEpeaNmdRQobG. */
.tasks-comment-date { color: #6f6a60; font-size: 12.5px; }
.tasks-comment-content {
    font-size: 13px;
    color: #444;
    line-height: 1.4;
    white-space: pre-wrap;
}
.tasks-comment-form {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.tasks-comment-form textarea {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    min-height: 40px;
    outline: none;
}
.tasks-comment-form textarea:focus { border-color: var(--chanv-terre); }

/* @mentions dans les commentaires */
.tasks-comment-input-wrap { position: relative; flex: 1; }
.tasks-comment-input-wrap textarea { width: 100%; box-sizing: border-box; }
.tasks-mention {
    background: rgba(99,102,241,0.12);
    color: #4338CA;
    font-weight: 600;
    border-radius: 4px;
    padding: 0 3px;
}

/* --- Firestore Monitor Section --- */
.monitor-firestore-section {
    grid-column: 1 / -1;
    margin-top: 8px;
}
.monitor-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #f0f0f0);
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.monitor-firestore-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.monitor-fs-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--card-bg, #2a2a2a);
    border: 1px solid var(--border-color, #3a3a3a);
    border-left: 3px solid #f59e0b;
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.monitor-fs-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    border-color: #f59e0b;
}
.fs-monitor-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.fs-mon-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fs-mon-label {
    font-size: 10px;
    color: var(--text-secondary, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.fs-mon-value {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #f0f0f0);
}

/* ============================================================
   LECLAUDE — Bulletin interne magazine
   ============================================================ */

/* View container */
/* `inset: 0` + z-index 1000 : LECLAUDE recouvre la coque, tabbar comprise. La
   seule sortie est le ← de la .lc-topbar — qui, sans réserve, se retrouvait sous
   l'horloge/l'encoche en PWA : on pouvait rester coincé dans le bulletin.
   Le bas est porté ICI (conteneur défilant : la réserve devient de la marge en
   fin de fil, le dernier article n'est plus mangé par la barre gestuelle) ;
   .lc-editor-banner est en `position: fixed` et porte déjà la sienne, aucun
   double comptage. Le haut est porté par la topbar seule, voir plus bas.

   24/08 — ticket x8dAZBiscvy3BAXYM8HP (D. Lefebvre) : cette réserve ne couvrait
   QUE la barre gestuelle. Le bandeau éditeur (fixed, bottom:0) et l'ancien
   panneau d'administration flottant se posaient donc par-dessus la fin du fil —
   c'est-à-dire par-dessus « Voir les éditions précédentes », dernier élément de
   <main>. Mesuré au navigateur, éditeur connecté : à 1440×900 le bouton était
   recouvert sur 21 de ses 48 px ; à 412×900 sur 59 px par le bandeau (qui passe
   à 105 px de haut en s'enroulant) ET sur 48 px par le panneau pleine largeur —
   le clic au centre du bouton n'atteignait plus le bouton.
   Le panneau a depuis cédé la place au tiroir .lc-adrawer, qui ne flotte que
   le temps qu'on l'ouvre : il ne reste donc que le bandeau à réserver.
   --lc-fond est mesuré par _lcReserverLeFond() ; max() plutôt qu'une addition :
   la hauteur du bandeau inclut DÉJÀ la réserve gestuelle, et vaut 0 hors
   brouillon — où l'on retombe exactement sur le comportement d'avant. */
.leclaude-view {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #f5f5f0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: #1a1a1a;
    padding-bottom: max(var(--lc-fond, 0px), env(safe-area-inset-bottom));
}

/* ---------- TOP BAR ---------- */
/* height inclut la réserve (box-sizing: border-box global) : la barre grandit
   sous la barre d'état, sa rangée utile garde ses 52px. */
.lc-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: env(safe-area-inset-top) 16px 0;
    height: calc(52px + env(safe-area-inset-top));
    background: #1a1a1a;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
}
.lc-topbar-back {
    background: none; border: none; color: #fff; font-size: 18px;
    cursor: pointer; padding: 6px 10px; border-radius: 6px;
    transition: background .2s; justify-self: start;
    display: flex; align-items: center; gap: 4px;
}
.lc-topbar-back:hover { background: rgba(255,255,255,0.1); }
.lc-topbar-brand {
    font-size: 16px; font-weight: 800; letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center; white-space: nowrap;
}
.lc-plus { color: #E3000B; font-weight: 900; }
.lc-topbar-actions {
    justify-self: end; display: flex; align-items: center; gap: 8px;
}
.lc-topbar-btn {
    background: none; border: none;
    color: rgba(255,255,255,0.7); padding: 6px; border-radius: 50%; cursor: pointer;
    font-size: 14px; transition: all .2s;
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
}
.lc-topbar-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.lc-topbar-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* Language switch */
.lc-lang-switch { display: flex; gap: 2px; background: rgba(255,255,255,0.1); border-radius: 6px; padding: 2px; }
.lc-lang-btn {
    background: none; border: none; color: rgba(255,255,255,0.5);
    padding: 4px 10px; font-size: 12px; font-weight: 700;
    cursor: pointer; border-radius: 4px; transition: all .2s;
    letter-spacing: 1px;
}
.lc-lang-btn.active { background: #E3000B; color: #fff; }
.lc-lang-btn:hover:not(.active) { color: #fff; }

/* ---------- LAYOUT ---------- */
.lc-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: calc(100vh - 52px);
}

/* ---------- SIDEBAR ---------- */
.lc-sidebar {
    background: #fff;
    border-right: 1px solid #e0e0e0;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
/* Watermark emblème Chanv dans le sidebar */
.lc-sidebar::after {
    content: '';
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 45%;
    aspect-ratio: 1;
    max-width: 140px;
    background: url('/images/chanv-emblem-white.svg') center/contain no-repeat;
    opacity: 0.025;
    pointer-events: none;
    filter: invert(1);
    z-index: 0;
}
/* Pied de sidebar – identité Groupe Chanv */
.lc-sidebar-footer {
    margin-top: auto;
    padding: 16px 20px;
    border-top: 1px solid #e8e8e8;
    position: relative;
    z-index: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.lc-sidebar-footer-emblem {
    width: 18px;
    height: 18px;
    filter: invert(1);
    opacity: 0.4;
}
.lc-sidebar-footer-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #999;
    text-transform: uppercase;
}
/* Carré rouge façon La Presse : LE / CLAUDE empilés dans un carré parfait */
.lc-logo-block {
    background: #E3000B;
    aspect-ratio: 1 / 1;
    padding: 22px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
}
.lc-logo-text {
    font-size: 54px;
    font-weight: 900;
    letter-spacing: 0.5px;
    line-height: 1.0;
    color: #fff;
    /* Inter plafonne à 900 : le contour épaissit les lettres (effet extra-black) */
    -webkit-text-stroke: 2.5px #fff;
    text-transform: uppercase;
    display: block;
}
.lc-logo-subtitle {
    display: block;
    align-self: stretch;
    text-align: center;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
}
.lc-sidebar-meta {
    padding: 12px 20px 10px;
    border-bottom: 1px solid #ddd;
}
.lc-date {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #1a1a1a;
    margin-bottom: 4px;
}
.lc-edition-label {
    font-size: 8px;
    letter-spacing: 1.5px;
    color: #aaa;
    line-height: 1.5;
}
.lc-edition-number {
    font-size: 9px;
    font-weight: 700;
    color: #888;
    letter-spacing: 1.5px;
    margin-bottom: 1px;
}

/* Sidebar sections */
.lc-sidebar-section {
    padding: 20px;
    border-bottom: 1px solid #eee;
}
.lc-sidebar-heading {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #1a1a1a;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lc-heading-marker {
    width: 16px; height: 16px;
    background: #E3000B;
    display: inline-block;
    flex-shrink: 0;
}
.lc-marker-agenda {
    background: none;
    width: 18px; height: 18px;
}

/* Brief items — journalistic sommaire */
.lc-brief-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: background .2s;
    cursor: pointer;
}
.lc-brief-item:last-child { border-bottom: none; }
.lc-brief-item:hover { background: rgba(227,0,11,0.03); }
.lc-brief-bullet {
    width: 5px;
    height: 5px;
    background: #1a1a1a;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}
.lc-brief-title {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    line-height: 1.35;
    letter-spacing: 0.3px;
    color: #1a1a1a;
    cursor: pointer;
    transition: color .2s;
}
.lc-brief-title:hover {
    color: #E3000B;
}
.lc-brief-text {
    font-size: 11px;
    color: #888;
    margin: 2px 0 0;
    line-height: 1.4;
}
.lc-brief-separator {
    display: none;
}
.lc-agenda-link {
    font-size: 11px;
    font-weight: 700;
    color: #E3000B;
    letter-spacing: 1px;
    cursor: pointer;
    transition: opacity .2s;
}
.lc-agenda-link:hover { opacity: 0.7; }

/* Popup overlay */
.lc-popup-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    animation: lc-fadeIn .2s ease;
}
.lc-popup {
    background: #fff; border-radius: 12px; padding: 32px;
    max-width: 420px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    text-align: center;
}
.lc-popup-title { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.lc-popup-msg { font-size: 14px; color: #555; line-height: 1.5; margin-bottom: 24px; }
.lc-popup-actions { display: flex; gap: 12px; justify-content: center; }
.lc-popup-btn {
    padding: 10px 24px; border-radius: 8px; font-size: 13px;
    font-weight: 700; cursor: pointer; border: none;
    text-decoration: none; display: inline-block; transition: all .2s;
}
.lc-popup-btn-primary { background: #E3000B; color: #fff; }
.lc-popup-btn-primary:hover { background: #c5000a; transform: translateY(-1px); }
.lc-popup-btn-cancel { background: #f0f0f0; color: #333; }
.lc-popup-btn-cancel:hover { background: #e0e0e0; }
@keyframes lc-fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Agenda items */
.lc-agenda-item {
    margin-bottom: 12px;
    padding-left: 12px;
    border-left: 3px solid #1a1a1a;
}
.lc-agenda-text {
    font-size: 13px;
    margin: 0 0 2px;
    line-height: 1.4;
    font-weight: 500;
}
.lc-agenda-date {
    font-size: 11px;
    color: #888;
    text-transform: capitalize;
}
.lc-agenda-link {
    display: block;
    margin-top: 16px;
}

/* ---------- MAIN AREA ---------- */
.lc-main {
    background: #f5f5f0;
}

/* Sub-header bar */
.lc-subheader-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background: rgba(26, 26, 26, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 8px 24px;
}
.lc-subheader-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

/* ---------- HERO ---------- */
.lc-hero {
    position: relative;
    min-height: 620px;
    background: linear-gradient(135deg, #2d5016 0%, #4a7c28 30%, #6b9e3a 60%, #8fbc5a 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.lc-hero.has-image {
    background-size: cover;
    background-position: center;
}
.lc-hero.lc-repo-enabled { cursor: grab; }
.lc-hero.lc-repositioning { cursor: grabbing; }
.lc-hero.lc-repo-enabled:hover .lc-repo-hint { opacity: 1; }
.lc-hero-overlay {
    width: 100%;
    padding: 48px 40px 40px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}
.lc-hero-title {
    font-size: 72px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 18px;
    line-height: 1.0;
    text-transform: uppercase;
    letter-spacing: 1px;
    max-width: 950px;
}
.lc-hero-subtitle {
    font-size: 20px;
    color: rgba(255,255,255,0.85);
    margin: 0 0 28px;
    line-height: 1.5;
    max-width: 720px;
}
.lc-hero-cta {
    /* Plein par défaut (demande édito) : rouge de marque, texte blanc ;
       hover = rouge plus foncé. (Avant : contour → plein au survol.) */
    background: #E3000B;
    border: 2px solid #E3000B;
    color: #fff;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all .3s;
    text-transform: uppercase;
}
.lc-hero-cta:hover {
    background: #B50009;
    border-color: #B50009;
    color: #fff;
}

/* ---------- COLONNE MONDE DU CHANVRE (dans le sidebar, façon La Presse) ---------- */
.lc-chanvre-col {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
.lc-chanvre-col .lc-card {
    height: auto;
    flex: 1;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    border-left: none;
    border-right: none;
}
.lc-chanvre-col .lc-card .lc-card-body { flex: 1; }

/* En bref dans la colonne de gauche (desktop) */
.lc-briefs-slot {
    position: relative;
    z-index: 1;
    background: #fff;
    border-top: 2px solid #1a1a1a;
}

/* ---------- BANDEAU BAS DE PAGE : À venir (+ En bref sur mobile) ---------- */
.lc-bottom-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2px;
    background: #fff;
    border-top: 2px solid #1a1a1a;
}
.lc-bottom-info .lc-sidebar-section {
    padding: 24px 28px;
}
.lc-bottom-info .lc-sidebar-section + .lc-sidebar-section {
    border-left: 1px solid #e8e8e8;
}

/* Formats colonne (chanvre) */
.lc-card-col-top .lc-card-img-wrap,
.lc-card-col-top .lc-card-img-placeholder,
.lc-card-col-bottom .lc-card-img-wrap,
.lc-card-col-bottom .lc-card-img-placeholder {
    height: auto;
    flex: 1;
    min-height: 220px;
}
.lc-card-body.lc-card-col-bottom { flex-direction: column-reverse; }
.lc-card-col-bottom .lc-card-text { padding-top: 50px; } /* dégage la barre de catégorie */

/* ---------- GRID 2×2 ---------- */
.lc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

/* Culture d'entreprise : pleine largeur en bas de page, un peu plus haute */
.lc-card-full { grid-column: 1 / -1; height: 440px; }

/* Formats bande (culture) */
.lc-card-body.lc-card-band-left,
.lc-card-body.lc-card-band-right { flex-direction: row; }
.lc-card-body.lc-card-band-right { flex-direction: row-reverse; }
.lc-card-band-left .lc-card-img-wrap,
.lc-card-band-right .lc-card-img-wrap,
.lc-card-band-left .lc-card-img-placeholder,
.lc-card-band-right .lc-card-img-placeholder {
    width: 55%;
    height: 100%;
    flex-shrink: 0;
}
.lc-card-band-left .lc-card-text,
.lc-card-band-right .lc-card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 40px 32px;
}
.lc-card-band-left .lc-card-title,
.lc-card-band-right .lc-card-title { font-size: 26px; }

/* En mode « image pleine » sans image : le placeholder remplit toute la carte */
.lc-card-overlay .lc-card-img-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
}

/* Position du texte en mode « image pleine » (overlay) */
.lc-card-overlay .lc-card-text.lc-tpos-center {
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.55));
}
.lc-card-overlay .lc-card-text.lc-tpos-top {
    top: 0;
    bottom: auto;
    padding-top: 54px; /* sous la barre de catégorie */
    background: linear-gradient(rgba(0,0,0,0.7), transparent);
}
.lc-card-overlay .lc-card-text.lc-tpos-center.lc-text-black {
    background: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.75));
}
.lc-card-overlay .lc-card-text.lc-tpos-top.lc-text-black {
    background: linear-gradient(rgba(255,255,255,0.85), transparent);
}

/* Paysage / tablette : colonne plus étroite, logo qui ne déborde plus */
@media (max-width: 1200px) {
    .lc-logo-text { font-size: 42px; -webkit-text-stroke: 2px #fff; }
    .lc-chanvre-col .lc-card { min-height: 340px; }
    .lc-hero-title { font-size: 52px; }
    .lc-card-full { height: 380px; }
}
@media (max-width: 768px) {
    .lc-card-full { height: auto; min-height: 300px; }
    .lc-card-body.lc-card-band-left,
    .lc-card-body.lc-card-band-right { flex-direction: column; }
    .lc-card-band-left .lc-card-img-wrap,
    .lc-card-band-right .lc-card-img-wrap,
    .lc-card-band-left .lc-card-img-placeholder,
    .lc-card-band-right .lc-card-img-placeholder { width: 100%; height: 160px; flex: none; }
    .lc-card-band-left .lc-card-text,
    .lc-card-band-right .lc-card-text { padding: 16px 20px; }
    /* Mobile : le format bande (Culture) s'empile comme les autres cartes —
       son titre reprend la même taille que les leurs (26px → 18px). */
    .lc-card-band-left .lc-card-title,
    .lc-card-band-right .lc-card-title { font-size: 18px; }
    .lc-bottom-info { grid-template-columns: 1fr; border-top-width: 1px; }
    .lc-bottom-info .lc-sidebar-section { padding: 16px; }
    .lc-bottom-info .lc-sidebar-section + .lc-sidebar-section { border-left: none; border-top: 1px solid #e8e8e8; }
}

/* ---------- CARD ---------- */
.lc-card {
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    border: 1px solid #e8e8e8;
    background: #fff;
    overflow: hidden;
    height: 320px;
}
.lc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 2;
}

/* Card category header — glassmorphism */
.lc-card-category {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase;
    background: rgba(26, 26, 26, 0.45);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Card body — fills the card */
.lc-card-body {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}
.lc-card-img-wrap {
    width: 100%;
    height: 200px;
    /* Hauteur d'image UNIFORME : sans flex-shrink:0, un résumé plus long
       comprimait l'image de SA carte — deux cartes côte à côte n'avaient
       pas la même zone d'image. */
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.lc-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform .4s;
    user-select: none;
}
.lc-card:hover .lc-card-img { transform: scale(1.05); }
.lc-card-img-wrap.lc-repositioning .lc-card-img { cursor: grabbing; transform: none; }
.lc-card-img-wrap.lc-repo-enabled { cursor: grab; }
.lc-card-img-wrap.lc-repo-enabled .lc-card-img { cursor: grab; }
.lc-card-img-wrap.lc-repositioning { cursor: grabbing; }
.lc-repo-hint {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.65); color: #fff; font-size: 10px; padding: 3px 10px;
    border-radius: 10px; pointer-events: none; z-index: 5; white-space: nowrap;
    opacity: 0; transition: opacity .2s;
}
.lc-card-img-wrap.lc-repo-enabled:hover .lc-repo-hint { opacity: 1; }

.lc-card-img-placeholder {
    width: 100%;
    height: 200px;
    flex-shrink: 0; /* même règle que lc-card-img-wrap : zone d'image uniforme */
    background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #999;
}

/* Card text */
.lc-card-text {
    padding: 20px;
}
.lc-card-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 8px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}
.lc-card-subtitle {
    font-size: 13px;
    color: #666;
    margin: 0 0 12px;
    line-height: 1.5;
    /* Résumé borné à 2 lignes : la zone texte a une hauteur fixe (carte 320px
       − image 200px) — un résumé long poussait le « Lire la suite » hors carte. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lc-card-cta {
    font-size: 12px;
    font-weight: 700;
    color: #E3000B;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── Card layout: side-by-side ── */
.lc-card-body.lc-card-side {
    flex-direction: row;
}
.lc-card-side .lc-card-img-wrap {
    width: 45%;
    height: 100%;
    flex-shrink: 0;
}
.lc-card-side .lc-card-text {
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lc-card-side .lc-card-category {
    left: auto;
    right: 0;
    border-radius: 0;
}

/* ── Card layout: overlay ── */
.lc-card-body.lc-card-overlay {
    position: relative;
}
.lc-card-overlay .lc-card-img-wrap {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100%;
}
.lc-card-overlay .lc-card-text {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
}
.lc-card-overlay .lc-card-title { color: inherit; }
.lc-card-overlay .lc-card-subtitle { color: inherit; opacity: 0.85; }
.lc-card-overlay .lc-card-cta { color: inherit; opacity: 0.9; }

/* Overlay with black text */
.lc-card-overlay .lc-card-text.lc-text-black {
    background: linear-gradient(transparent, rgba(255,255,255,0.85));
    color: #1a1a1a;
}
.lc-card-overlay .lc-card-text.lc-text-black .lc-card-cta { color: #E3000B; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODÈLE DE MISE EN PAGE ORTHOGONAL
   Placement image (media) découplé de la largeur et du slot. Voir
   public/js/leclaude-layout.js (logique pure testée) + spec
   docs/superpowers/specs/2026-07-15-leclaude-mise-en-page-design.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* Image en bas (texte au-dessus) */
.lc-card-body.lc-media-bottom { flex-direction: column-reverse; }
.lc-media-bottom .lc-card-text { padding-top: 46px; } /* dégage la barre de catégorie */

/* Image à gauche / à droite */
.lc-card-body.lc-media-left { flex-direction: row; }
.lc-card-body.lc-media-right { flex-direction: row-reverse; }
.lc-media-left .lc-card-img-wrap, .lc-media-right .lc-card-img-wrap,
.lc-media-left .lc-card-img-placeholder, .lc-media-right .lc-card-img-placeholder {
    width: 45%;
    height: 100%;
    flex-shrink: 0;
}
.lc-media-left .lc-card-text, .lc-media-right .lc-card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Pleine largeur en image latérale = bande éditoriale (image plus généreuse) */
.lc-card-full .lc-media-left .lc-card-img-wrap, .lc-card-full .lc-media-right .lc-card-img-wrap,
.lc-card-full .lc-media-left .lc-card-img-placeholder, .lc-card-full .lc-media-right .lc-card-img-placeholder {
    width: 55%;
}
.lc-card-full .lc-media-left .lc-card-text, .lc-card-full .lc-media-right .lc-card-text {
    padding: 56px 40px 32px;
}
.lc-card-full .lc-media-left .lc-card-title, .lc-card-full .lc-media-right .lc-card-title { font-size: 26px; }

/* Habillage magazine (wrap) : image INCRUSTÉE dans le texte, qui coule autour
   puis revient dessous — demandé par l'éditrice (left/right restent les
   colonnes historiques pour ne pas changer les éditions publiées). */
.lc-card-body.lc-media-wrap-left, .lc-card-body.lc-media-wrap-right {
    display: block;
    padding-top: 46px; /* dégage la barre de catégorie (absolute) */
}
.lc-card-body.lc-media-wrap-left::after, .lc-card-body.lc-media-wrap-right::after {
    content: ''; display: block; clear: both;
}
.lc-media-wrap-left .lc-card-img-wrap, .lc-media-wrap-right .lc-card-img-wrap,
.lc-media-wrap-left .lc-card-img-placeholder, .lc-media-wrap-right .lc-card-img-placeholder {
    width: 45%;
    max-height: 360px;
    overflow: hidden;
    border-radius: 6px;
}
.lc-media-wrap-left .lc-card-img-wrap, .lc-media-wrap-left .lc-card-img-placeholder { float: left; margin: 4px 18px 10px 20px; }
.lc-media-wrap-right .lc-card-img-wrap, .lc-media-wrap-right .lc-card-img-placeholder { float: right; margin: 4px 20px 10px 18px; }
.lc-media-wrap-left .lc-card-img, .lc-media-wrap-right .lc-card-img {
    width: 100%; height: auto; display: block; /* hauteur naturelle (pas 100% colonne) */
}
.lc-media-wrap-left .lc-card-text, .lc-media-wrap-right .lc-card-text {
    display: block; /* le flex column empêchait les lignes de contourner le float */
}

/* Carte pleine largeur, image en haut/bas : l'image occupe l'espace disponible
   (sinon une image de 200px flotte dans une carte de 440px) */
.lc-card-full > .lc-card-body:not(.lc-media-left):not(.lc-media-right):not(.lc-card-overlay) .lc-card-img-wrap,
.lc-card-full > .lc-card-body:not(.lc-media-left):not(.lc-media-right):not(.lc-card-overlay) .lc-card-img-placeholder {
    height: auto;
    flex: 1 1 auto;
    min-height: 240px;
}

/* Colonne « à la une » : l'image remplit la hauteur de la colonne */
.lc-chanvre-col .lc-card-body:not(.lc-card-overlay) .lc-card-img-wrap,
.lc-chanvre-col .lc-card-body:not(.lc-card-overlay) .lc-card-img-placeholder {
    height: auto;
    flex: 1 1 auto;
    min-height: 220px;
}

/* ── Contrôles d'édition sur carte : réordonnancement + accès popover ── */
.lc-card-controls {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 11;
    display: flex;
    gap: 4px;
    background: rgba(0,0,0,0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 4px;
}
.lc-card-ctl {
    width: 30px; height: 28px;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: rgba(255,255,255,0.75);
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.lc-card-ctl:hover { background: rgba(255,255,255,0.14); color: #fff; }
.lc-drag-handle { cursor: grab; }
.lc-drag-handle:active { cursor: grabbing; }
.lc-card.lc-dragging { opacity: 0.45; }
.lc-card.lc-drag-over { outline: 3px solid #E3000B; outline-offset: -3px; }

/* ── Popover « Mise en page » (axes orthogonaux, lisible clair/sombre) ── */
.lc-layout-popover {
    position: fixed; /* ancré à la fenêtre : robuste quel que soit le conteneur de défilement */
    z-index: 3000;
    min-width: 210px;
    max-width: min(320px, 92vw);
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.22);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lc-lp-seg { display: flex; flex-direction: column; gap: 6px; }
.lc-lp-label {
    font-size: 10px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: #999;
}
.lc-lp-row { display: flex; flex-wrap: wrap; gap: 5px; }
.lc-lp-btn {
    width: 36px; height: 32px;
    border: 1px solid #d8d8d8;
    background: #f6f6f6;
    color: #444;
    border-radius: 7px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.lc-lp-btn:hover { background: #ececec; border-color: #bbb; }
.lc-lp-btn.active { background: #E3000B; border-color: #E3000B; color: #fff; }
.lc-lp-pin {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d8d8d8;
    background: #f6f6f6;
    color: #1a1a1a;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px; font-weight: 700;
    transition: all 0.15s;
}
.lc-lp-pin:hover { background: #ececec; }
.lc-lp-pin.active { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }

body[data-gtheme="dark"] .lc-layout-popover {
    background: #1f1f1f; color: #f0f0f0; border-color: rgba(255,255,255,0.14);
    box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}
body[data-gtheme="dark"] .lc-lp-label { color: rgba(255,255,255,0.5); }
body[data-gtheme="dark"] .lc-lp-btn {
    background: #2b2b2b; border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.8);
}
body[data-gtheme="dark"] .lc-lp-btn:hover { background: #363636; border-color: rgba(255,255,255,0.28); }
body[data-gtheme="dark"] .lc-lp-btn.active { background: #E3000B; border-color: #E3000B; color: #fff; }
body[data-gtheme="dark"] .lc-lp-pin {
    background: #2b2b2b; border-color: rgba(255,255,255,0.14); color: #f0f0f0;
}
body[data-gtheme="dark"] .lc-lp-pin:hover { background: #363636; }
body[data-gtheme="dark"] .lc-lp-pin.active { background: #f0f0f0; border-color: #f0f0f0; color: #1a1a1a; }

/* Dégradation mobile de la mise en page orthogonale. IMPORTANT : placée APRÈS
   les règles de base .lc-media-* ci-dessus — à spécificité égale, l'ordre source
   décide, donc ces surcharges mobiles DOIVENT venir après pour l'emporter. */
@media (max-width: 768px) {
    /* Images latérales (media left/right) → empilées en une colonne */
    .lc-card-body.lc-media-left, .lc-card-body.lc-media-right { flex-direction: column; }
    .lc-media-wrap-left .lc-card-img-wrap, .lc-media-wrap-right .lc-card-img-wrap,
    .lc-media-wrap-left .lc-card-img-placeholder, .lc-media-wrap-right .lc-card-img-placeholder {
        float: none; width: 100%; margin: 0 0 10px 0; max-height: none;
    }
    .lc-media-left .lc-card-img-wrap, .lc-media-right .lc-card-img-wrap,
    .lc-media-left .lc-card-img-placeholder, .lc-media-right .lc-card-img-placeholder {
        width: 100%; height: 160px; flex: none;
    }
    .lc-card-full .lc-media-left .lc-card-img-wrap, .lc-card-full .lc-media-right .lc-card-img-wrap,
    .lc-card-full .lc-media-left .lc-card-img-placeholder, .lc-card-full .lc-media-right .lc-card-img-placeholder {
        width: 100%;
    }
    .lc-media-left .lc-card-text, .lc-media-right .lc-card-text { padding: 16px 20px; }
    /* Carré orphelin promu pleine largeur : même hauteur d'image que les autres
       cartes sur mobile. On ne vise QUE les cartes promues (.lc-card-promoted),
       PAS les vrais « large » (à la une, culture media-top) qui gardent leur
       proéminence — sinon on rabote une carte qui s'affichait bien. */
    .lc-card-promoted > .lc-card-body:not(.lc-media-left):not(.lc-media-right):not(.lc-card-overlay) .lc-card-img-wrap,
    .lc-card-promoted > .lc-card-body:not(.lc-media-left):not(.lc-media-right):not(.lc-card-overlay) .lc-card-img-placeholder {
        height: 160px; flex: none; min-height: 0;
    }
}

/* ── Alignement du résumé de carte (text_align) ── */
.lc-card-text.lc-talign-left { text-align: left; align-items: flex-start; }
.lc-card-text.lc-talign-center { text-align: center; align-items: center; }
.lc-card-text.lc-talign-right { text-align: right; align-items: flex-end; }
/* Prime sur le text-align imposé en dur par .lc-tpos-center (image pleine, texte
   centré) : même spécificité (0,3,0) mais déclaré APRÈS → l'alignement explicite
   choisi par l'éditrice l'emporte, y compris le retour à gauche. */
.lc-card-overlay .lc-card-text.lc-talign-left { text-align: left; }
.lc-card-overlay .lc-card-text.lc-talign-center { text-align: center; }
.lc-card-overlay .lc-card-text.lc-talign-right { text-align: right; }
/* left = défaut (aucune classe) */

/* ── Article masqué (réversible) : grisé + badge — mode édition seulement ── */
.lc-card.lc-card-hidden { opacity: 0.5; filter: grayscale(0.6); transition: opacity .2s; }
.lc-card.lc-card-hidden:hover { opacity: 0.8; }
.lc-hidden-badge {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 12;
    display: flex; align-items: center; gap: 8px;
    background: rgba(0,0,0,0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 5px 8px 5px 10px;
}
.lc-hidden-label {
    font-size: 10px; font-weight: 800; letter-spacing: 1px;
    color: #fff; text-transform: uppercase;
}
.lc-hidden-show-btn {
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px; font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}
.lc-hidden-show-btn:hover { background: #E3000B; border-color: #E3000B; }

/* ── Éditeur « En bref » (inline sidebar, mode édition) ── */
.lc-brief-edit-row {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}
.lc-brief-select { flex: 1; min-width: 0; font-size: 13px; padding: 6px 8px; }
.lc-brief-mv, .lc-brief-del {
    width: 26px; height: 28px; flex: none;
    border: 1px solid #ddd; background: #f6f6f6; color: #555;
    border-radius: 5px; cursor: pointer; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.lc-brief-mv:hover { background: #ececec; }
.lc-brief-del:hover { background: #ffebee; color: #c62828; border-color: #ffcdd2; }
.lc-brief-add-btn {
    width: 100%; margin-top: 8px;
    border: 1px dashed #ccc; background: transparent; color: #666;
    border-radius: 6px; padding: 8px; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.lc-brief-add-btn:hover { border-color: #E3000B; color: #E3000B; background: rgba(227,0,11,0.04); }

/* ── Menu déroulant de la barre d'outils de rédaction (taille / police) ── */
.lc-tb-select {
    height: 30px;
    border: 1px solid #ddd;
    background: #f6f6f6;
    color: #333;
    border-radius: 5px;
    font-size: 12px;
    padding: 0 6px;
    cursor: pointer;
    max-width: 130px;
}
.lc-tb-select:hover { background: #eee; border-color: #ccc; }

/* Dark mode */
body[data-gtheme="dark"] .lc-brief-edit-row { border-color: rgba(255,255,255,0.08); }
body[data-gtheme="dark"] .lc-brief-mv,
body[data-gtheme="dark"] .lc-brief-del,
body[data-gtheme="dark"] .lc-tb-select {
    background: #2b2b2b; border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.82);
}
body[data-gtheme="dark"] .lc-brief-mv:hover,
body[data-gtheme="dark"] .lc-tb-select:hover { background: #363636; }
body[data-gtheme="dark"] .lc-brief-add-btn { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); }

/* ── Card layout editor controls ── */
.lc-layout-picker {
    position: absolute;
    bottom: 8px; left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 4px;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 4px;
}
.lc-layout-btn {
    width: 32px; height: 28px;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: rgba(255,255,255,0.6);
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.lc-layout-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.lc-layout-btn.active {
    background: #E3000B;
    border-color: #E3000B;
    color: #fff;
}
.lc-color-toggle {
    width: 24px; height: 24px;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 50%;
    cursor: pointer;
    margin-left: 4px;
    transition: all 0.15s;
}
.lc-color-toggle:hover { border-color: #fff; }
.lc-color-toggle.lc-ct-white { background: #fff; }
.lc-color-toggle.lc-ct-black { background: #1a1a1a; }

/* ── Brief CTA ── */
.lc-brief-cta {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #E3000B;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
}
.lc-brief-cta:hover { opacity: 0.7; }

/* ---------- ARCHIVES LINK ---------- */
/* Deux boutons désormais : « Voir les éditions précédentes » pour tous, et
   « ⚙️ ADMIN » pour les seuls éditeurs. flex-wrap : sur un écran étroit ils
   passent l'un sous l'autre plutôt que de déborder. */
.lc-archives-link {
    padding: 40px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
/* Volontairement en retrait : c'est une porte de service, pas l'objet de la page. */
.lc-admin-btn {
    border-color: #bbb;
    color: #777;
    padding: 12px 20px;
    font-size: 12px;
}
.lc-admin-btn:hover { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.lc-archives-btn {
    background: none;
    border: 2px solid #1a1a1a;
    color: #1a1a1a;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all .3s;
}
.lc-archives-btn:hover {
    background: #1a1a1a;
    color: #fff;
}

/* ---------- ARTICLE VIEW ---------- */
.lc-article-view {
    background: #fff;
    min-height: calc(100vh - 52px);
}
.lc-article-topbar {
    display: none; /* Replaced by inline hero navigation */
}

/* ── Article Hero (magazine style) ── */
.lc-art-hero {
    position: relative;
    min-height: 380px;
    background: #1a1a1a;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}
.lc-art-hero.has-bg {
    min-height: 420px;
}
.lc-art-hero-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 60px 48px 40px;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
}
.lc-art-hero.has-bg .lc-art-hero-overlay {
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.45) 55%, transparent 100%);
}
.lc-art-category-tag {
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 3px;
    margin-bottom: 16px;
}
.lc-art-title {
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    max-width: 700px;
}
.lc-art-subtitle {
    font-size: 18px;
    color: rgba(255,255,255,0.85);
    margin: 0 0 16px;
    line-height: 1.5;
    max-width: 600px;
}
.lc-art-date {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    letter-spacing: 1.5px;
}

/* ── Article Body ──
   Largeur de lecture (retour Dany, 27/08 : « largeur vs La Presse »). Le grief
   n'était PAS la longueur de ligne — mesurée sur la capture, la colonne tenait
   déjà 84 caractères, exactement comme La Presse — mais la PROPORTION : corps
   figé à 720px centré sous un hero pleine largeur, donc un ruban de texte à
   25% de la fenêtre (contre 58% chez La Presse) noyé dans le blanc sur un
   écran large. La recette La Presse est « type plus gros + colonne plus
   large » : on monte les deux ensemble pour occuper l'écran SANS allonger la
   ligne au-delà du confortable (~90 car.).
   Les images de l'éditrice sont en % (lc-img-md 50%, lc-img-full 100%,
   habillage 45%) : elles suivent proportionnellement, la composition est
   conservée telle quelle. Mobile/tablette gardent leurs tailles propres
   (media queries 768px et 480px plus bas). ── */
.lc-art-body-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 48px 32px 80px;
}
.lc-art-body {
    font-size: 19px;
    line-height: 1.8;
    color: #333;
}
.lc-art-body p {
    margin-bottom: 22px;
}
.lc-art-body p:first-child {
    font-size: 21px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.65;
}
.lc-art-body strong {
    font-weight: 700;
    color: #1a1a1a;
}
.lc-art-body h1, .lc-art-body h2, .lc-art-body h3 {
    color: #1a1a1a;
    margin-top: 36px;
    margin-bottom: 14px;
}
.lc-art-body h1 { font-size: 28px; }
.lc-art-body h2 { font-size: 22px; }
.lc-art-body h3 { font-size: 18px; }
.lc-art-body img {
    max-width: 100%;
    border-radius: 4px;
    margin: 24px 0;
}

/* ── Back link ── */
.lc-art-back-link {
    display: inline-block;
    margin-top: 48px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #E3000B;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}
.lc-art-back-link:hover {
    color: #a00008;
}

/* ---------- EDITOR BANNER ---------- */
.lc-editor-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: #fef3cd;
    border-top: 3px solid #ffc107;
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.lc-editor-badge {
    background: #ffc107;
    color: #1a1a1a;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}
.lc-editor-info {
    font-size: 13px;
    color: #555;
    flex: 1;
}
.lc-editor-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Editor buttons */
.lc-editor-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.lc-btn-submissions { background: #e3f2fd; color: #1565c0; }
.lc-btn-submissions:hover { background: #bbdefb; }
.lc-btn-generate { background: #f3e5f5; color: #7b1fa2; }
.lc-btn-generate:hover { background: #e1bee7; }
.lc-btn-publish { background: #2e7d32; color: #fff; }
.lc-btn-publish:hover { background: #1b5e20; }
.lc-btn-add { background: #e3f2fd; color: #1565c0; }
.lc-btn-add:hover { background: #bbdefb; }
.lc-btn-dismiss { background: #ffebee; color: #c62828; }
.lc-btn-dismiss:hover { background: #ffcdd2; }
.lc-btn-upload { background: #fff3e0; color: #e65100; }
.lc-btn-upload:hover { background: #ffe0b2; }
.lc-btn-import { background: #f5f5f5; color: #666; }
.lc-btn-import:hover { background: #eee; }
.lc-btn-save { background: #2e7d32; color: #fff; width: 100%; margin-top: 16px; padding: 12px; font-size: 15px; }
.lc-btn-save:hover { background: #1b5e20; }
/* Bouton désactivé (traitement en cours) : grisé + curseur bloqué, pour signaler
   clairement à l'utilisateur qu'une action est en cours et qu'il n'a rien à
   re-cliquer. Placé APRÈS les variantes/hover pour l'emporter à spécificité
   égale ; le :hover désactivé est neutralisé aussi. */
.lc-editor-btn:disabled,
.lc-editor-btn:disabled:hover {
    background: #cfcfcf;
    color: #7a7a7a;
    cursor: not-allowed;
    opacity: 0.75;
    box-shadow: none;
    transform: none;
}
body[data-gtheme="dark"] .lc-editor-btn:disabled,
body[data-gtheme="dark"] .lc-editor-btn:disabled:hover {
    background: #3a352d;
    color: rgba(255,255,255,0.38);
}

.lc-badge {
    background: #1565c0;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
}

/* ---------- EDITOR FORM ---------- */
.lc-editor-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888;
    margin: 20px 0 6px;
}
.lc-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color .2s;
    box-sizing: border-box;
}
.lc-input:focus { border-color: #E3000B; outline: none; }
.lc-input-full { width: 100%; }
/* ── Rich Editor (WYSIWYG) ── */
.lc-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 10px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: 0;
    z-index: 5;
}
.lc-tb-btn {
    padding: 5px 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    color: #333;
    transition: all .15s;
    line-height: 1;
    min-width: 30px;
    text-align: center;
}
.lc-tb-btn:hover { background: #eee; border-color: #ccc; }
.lc-tb-btn.active { background: #E3000B; color: #fff; border-color: #E3000B; }
.lc-tb-sep { width: 1px; background: #ddd; margin: 2px 4px; align-self: stretch; }
.lc-editor-content {
    width: 100%;
    padding: 18px;
    border: 1px solid #ddd;
    border-radius: 0 0 8px 8px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
    min-height: 300px;
    max-height: 60vh;
    overflow-y: auto;
    box-sizing: border-box;
    outline: none;
    color: #1a1a1a;
    background: #fff;
}
/* Color picker in toolbar */
.lc-tb-color-input {
    width: 28px; height: 28px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 0; cursor: pointer;
    background: transparent;
}
/* Font-size select in toolbar */
.lc-tb-size-select {
    height: 28px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    padding: 0 4px;
}

/* ---------- TÂCHES v2 : projets, listes, regroupements ---------- */
.tasks-projects-row{display:flex;gap:10px;flex-wrap:wrap;padding:12px 24px;align-items:center;
    background:rgba(40,34,24,.03);border-bottom:1px solid rgba(40,34,24,.1)}
body[data-gtheme="dark"] .tasks-projects-row{background:rgba(221,203,164,.04)}
.tasks-projects-row:empty{display:none}
/* Forme DA (02/09, demande Mathieu) : les pilules 99px sortaient de la
   grammaire des boutons de l'app (7px en gestion, 10px pour .btn). Même
   gabarit que les boutons gestion : rectangle 7px, fond panneau, liséré. */
.tasks-proj-chip{border:1px solid var(--gs-line, rgba(40,34,24,.12));
    background:var(--gs-panel,#fff);border-radius:7px;
    padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;color:inherit;
    font-family:inherit;transition:all .15s}
.tasks-proj-chip:hover{background:rgba(168,134,63,.1)}
.tasks-proj-chip.on{background:var(--chanv-terre,#282828);color:#fff;border-color:var(--chanv-terre,#282828)}
.tasks-proj-chip.tasks-proj-chanvre.on{background:rgba(45,106,36,.9);border-color:transparent}
.tasks-proj-chip.tasks-proj-operations.on{background:rgba(21,87,153,.9);border-color:transparent}
.tasks-proj-chip.tasks-proj-innovation.on{background:rgba(94,53,177,.9);border-color:transparent}
.tasks-proj-chip.tasks-proj-culture.on{background:rgba(198,93,7,.9);border-color:transparent}
.tasks-proj-chip{box-sizing:border-box;white-space:nowrap;line-height:1.2;height:36px;
    display:inline-flex;align-items:center;gap:6px}
.tasks-proj-spacer{flex:1}
/* Les boutons d'action : même taille, même forme DA que les bascules */
.tasks-row-btn{height:36px;padding:0 16px;font-size:13px;white-space:nowrap;border-radius:7px;
    display:inline-flex;align-items:center;gap:6px;box-sizing:border-box}
/* Lisibilité des chips inactifs (le texte se perdait dans le fond sombre) */
.tasks-proj-chip{color:#4d463b}
body[data-gtheme="dark"] .tasks-projects-row .tasks-proj-chip{color:rgba(255,255,255,.78)}
/* Compteur détaché du libellé : « Projets (36) » se lit comme une seule
   étiquette et le nombre s'y noie. En pastille, il se repère du coin de l'œil. */
.tasks-chip-count{display:inline-flex;align-items:center;justify-content:center;
    min-width:20px;height:20px;padding:0 6px;margin-left:2px;border-radius:99px;
    font-size:11.5px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
    background:rgba(40,34,24,.09);color:inherit}
.tasks-proj-chip.on .tasks-chip-count{background:rgba(255,255,255,.22)}
body[data-gtheme="dark"] .tasks-chip-count{background:rgba(255,255,255,.14)}

/* « ➕ Nouveau projet » de la rangée : SUPPRIMÉ (02/09). La création de
   projet vit dans le rail gauche (.trail-new), rendu plus visible. */
/* Actions secondaires (Duplications, Créer un groupe) : même gabarit que les
   bascules, sans le remplissage — elles agissent, elles ne sélectionnent pas. */
.tasks-projects-row .tasks-row-group,
.tasks-projects-row .tasks-row-dup{height:36px;padding:0 14px;font-size:13px}
/* Ce bouton a été dessiné pour un bandeau SOMBRE (blanc sur blanc translucide).
   Déplacé dans la barre d'actions CLAIRE, ses couleurs ne l'ont pas suivi :
   contraste mesuré 1,00 — le libellé était invisible. On le raccorde au gabarit
   des autres actions secondaires. */
.tasks-projects-row .tasks-row-dup{background:none;border:1px solid rgba(40,34,24,.15);
    /* 7px et non 99px : même forme que .tasks-proj-chip — la pilule détonnait
       (capture Mathieu 02/09, revenue le soir même : un premier fix en règle
       faible sur .tasks-row-dup seul perdait la spécificité contre CELLE-CI). */
    color:#4d463b;border-radius:7px;font-weight:600;
    /* inline-flex + gap : le gabarit d'origine collait l'icône au libellé. */
    display:inline-flex;align-items:center;gap:6px}
.tasks-projects-row .tasks-row-dup:hover{background:rgba(168,134,63,.1)}
body[data-gtheme="dark"] .tasks-projects-row .tasks-row-dup{color:rgba(255,255,255,.78);
    border-color:rgba(221,203,164,.25)}
/* Sélecteur d'icône (dropdown du picker global) — width:auto : la classe
   globale .emoji-picker-btn force 36px et éjectait le caret hors du bouton */
.tasks-emoji-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:auto;min-width:74px;height:42px;padding:0 12px 0 14px;
    border:1px solid rgba(40,34,24,.2);border-radius:10px;background:none;cursor:pointer;
    font-size:19px;font-family:inherit;line-height:1;box-sizing:border-box}
.tasks-emoji-btn:hover{border-color:#A8863F;background:rgba(168,134,63,.07)}
.tasks-emoji-caret{font-size:10px;opacity:.6;transform:translateY(1px)}
body[data-gtheme="dark"] .tasks-emoji-btn{border-color:rgba(221,203,164,.25);color:rgba(255,255,255,.88);background:none}
/* La modale projet respire : champs pleine largeur */
#projectFormModal input[type="text"],
#projectFormModal textarea{width:100%;box-sizing:border-box}
#projectFormModal textarea{min-height:64px;resize:vertical}
/* Grille de cartes projets (façon Basecamp) */
.tasks-proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:10px 2px 22px}
.tasks-proj-grid>*{min-width:0} /* mobile : une carte ne déborde jamais de la grille */
.tasks-proj-card{max-width:100%;overflow:hidden}
.tpc-name{overflow-wrap:break-word}
/* Hauteur régulière des cartes : nom plafonné à 2 lignes (jamais de débordement) */
.tpc-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tpc-meta{flex-wrap:wrap}
.tasks-proj-grid-sub{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.tasks-proj-card{position:relative;color:#2b2620;background:var(--chanv-blanc,#fff);border:1px solid rgba(40,34,24,.13);
    border-radius:14px;padding:14px 16px 12px;cursor:pointer;height:150px;
    border-top:4px solid rgba(21,87,153,.7);box-shadow:0 3px 12px rgba(40,34,24,.06);
    transition:transform .12s,box-shadow .12s;display:flex;flex-direction:column;gap:6px}
.tasks-proj-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(40,34,24,.13)}
.tasks-proj-card.tasks-proj-chanvre{border-top-color:rgba(45,106,36,.75)}
.tasks-proj-card.tasks-proj-operations{border-top-color:rgba(21,87,153,.75)}
.tasks-proj-card.tasks-proj-innovation{border-top-color:rgba(94,53,177,.75)}
.tasks-proj-card.tasks-proj-culture{border-top-color:rgba(198,93,7,.75)}
.tasks-proj-card-sub{height:120px;padding:11px 13px 9px}
.tpc-head{display:flex;align-items:center;gap:8px;padding-right:22px}
.tasks-color-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;
    margin-right:2px;vertical-align:baseline;box-shadow:0 0 0 2px rgba(255,255,255,.15)}
.tasks-crumb .tasks-color-dot{margin-right:6px}
.tpc-icon{font-size:17px}
.tpc-name{font-weight:750;font-size:14px;line-height:1.25;color:inherit;text-decoration:none}
.tpc-desc{font-size:12px;opacity:.6;line-height:1.4;overflow:hidden;display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical}
.tpc-meta{margin-top:auto;display:flex;gap:12px;font-size:11px;opacity:.55;
    font-family:ui-monospace,'SF Mono',monospace}
/* Les trois boutons du coin haut-droit s'échelonnent de droite à gauche :
   ⋮ (8px) · ★ (34px) · 📁 (58px). Le pas de ~24px est celui que ★/📁 avaient
   déjà entre eux ; le ⋮, ajouté plus tard tout en bas du fichier, était resté
   à right:8px et tombait donc SUR l'étoile. */
.tpc-fav{position:absolute;top:8px;right:34px;border:none;background:none;cursor:pointer;
    font-size:16px;color:#b9a56f;opacity:.5;padding:2px}
.tpc-fav:hover{opacity:1}
.tpc-fav.on{opacity:1;color:#D9A521}
/* #1 Groupes de projets privés (dossiers) */
.tpc-group{position:absolute;top:8px;right:58px;border:none;background:none;cursor:pointer;font-size:14px;opacity:.4;padding:2px}
.tpc-group:hover{opacity:1}
/* 84px = les trois boutons + une respiration, pour que le titre ne glisse pas
   dessous. Le ⋮ est transparent hors survol mais occupe toujours sa place. */
.tasks-proj-card .tpc-head{padding-right:84px}
/* Deux cartes ne portent PAS les trois boutons et gardent donc la géométrie
   d'avant — sinon on leur réserverait 84px pour rien. Doublement classées
   (.tasks-proj-card.tasks-proj-card-…) pour l'emporter quel que soit l'ordre,
   y compris sur la règle mobile plus bas.
   · sous-cartes : 📁 et ⋮ sont conditionnés par !sub, seule ★ est rendue ;
   · archivées/masquées : aucun bouton, juste un titre. */
.tasks-proj-card.tasks-proj-card-sub .tpc-fav{right:10px}
.tasks-proj-card.tasks-proj-card-sub .tpc-head{padding-right:46px}
.tasks-proj-card.tasks-proj-card-archived .tpc-head{padding-right:46px}
/* Dossiers : un vrai « dossier » qui CONTIENT des projets (onglet + corps rempli).
   Couleur pilotée par --fc (r g b) → teintes dérivées, lisibles clair ET sombre. */
.tasks-folder{position:relative;margin:26px 0 18px;--fc:168 134 63}
/* Dossiers repliés : grille (plusieurs par ligne) au lieu d'un empilement */
.tasks-folders-grid{display:flex;flex-wrap:wrap;gap:30px 22px;align-items:flex-start;margin:8px 0 12px}
.tasks-folders-grid .tasks-folder{margin:14px 0 0}
.tasks-folders-grid .tasks-folder-closed{width:300px;max-width:44vw}
.tasks-folder.tasks-proj-chanvre{--fc:45 106 36}
.tasks-folder.tasks-proj-operations{--fc:21 87 153}
.tasks-folder.tasks-proj-innovation{--fc:94 53 177}
.tasks-folder.tasks-proj-culture{--fc:198 93 7}
/* Onglet du dossier (haut-gauche) avec pente droite façon languette */
.tasks-folder-tab{display:inline-flex;align-items:center;gap:10px;position:relative;z-index:2;
    margin-left:8px;padding:9px 22px 12px 15px;min-width:132px;cursor:pointer;
    font-weight:750;font-size:15px;color:inherit;
    background:rgb(var(--fc) / 0.20);border:1px solid rgb(var(--fc) / 0.42);border-bottom:none;
    border-radius:13px 5px 0 0;box-shadow:inset 0 3px 0 rgb(var(--fc) / 0.9)}
.tasks-folder-tab::after{content:"";position:absolute;right:-13px;top:-1px;bottom:0;width:26px;z-index:-1;
    background:rgb(var(--fc) / 0.20);border-top:1px solid rgb(var(--fc) / 0.42);border-right:1px solid rgb(var(--fc) / 0.42);
    border-radius:0 10px 0 0;transform:skewX(24deg);transform-origin:bottom left}
.tasks-folder-tab:hover,.tasks-folder-tab:hover::after{background:rgb(var(--fc) / 0.28)}
/* Corps du dossier : rempli, contient les cartes de projets */
.tasks-folder-body{position:relative;z-index:1;margin-top:-1px;padding:16px;min-height:64px;
    background:rgb(var(--fc) / 0.07);border:1px solid rgb(var(--fc) / 0.32);border-radius:3px 16px 16px 16px;
    box-shadow:0 8px 22px rgba(40,34,24,.08),inset 0 1px 0 rgb(var(--fc) / 0.12)}
/* Dossier FERMÉ : grande carte (≈ double largeur, triple hauteur du repli d'avant),
   image bien visible si présente + effet « pile de projets rangés dedans ». */
.tasks-folder-closed{position:relative;width:300px;max-width:100%;height:158px;margin-top:-1px;cursor:pointer;overflow:hidden;
    border:1px solid rgb(var(--fc) / 0.34);border-radius:3px 16px 16px 16px;background:rgb(var(--fc) / 0.1);
    box-shadow:0 8px 20px rgba(40,34,24,.14),6px 7px 0 -2px rgb(var(--fc) / 0.18),12px 14px 0 -4px rgb(var(--fc) / 0.1)}
.tasks-folder-closed:hover{filter:brightness(1.04)}
.tfc-cover{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;padding:6px;box-sizing:border-box}
/* Refonte 21/07 : carte repliée SANS languette — coins réguliers, infos par-dessus */
.tfc-flat{margin-top:0 !important;border-radius:14px !important}
.tfc-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
    padding:8px 9px 14px 12px;border-radius:14px 14px 0 0;
    background:linear-gradient(rgba(10,8,5,.52),rgba(10,8,5,0))}
.tfc-title{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden}
.tfc-name{font-size:13.5px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.65);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfc-n{flex-shrink:0;background:rgba(255,255,255,.24);color:#fff;border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:800}
.tfc-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.tfc-gear,.tfc-chev{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
    border:none;border-radius:999px;background:rgba(10,8,5,.32);color:#fff;font-size:12.5px;cursor:pointer}
.tfc-gear:hover{background:rgba(10,8,5,.55)}
.tfc-count{display:none}
body[data-gtheme="dark"] .tasks-folder-closed{background:rgb(var(--fc) / 0.16);
    box-shadow:0 8px 20px rgba(0,0,0,.4),6px 7px 0 -2px rgb(var(--fc) / 0.2),12px 14px 0 -4px rgb(var(--fc) / 0.12)}
.tgh-icon{font-size:19px}
.tgh-img{display:inline-block;width:28px;height:28px;border-radius:7px;background-size:cover;background-position:center;background-color:rgb(var(--fc) / 0.25);flex-shrink:0}
.tgh-name{font-weight:750;font-size:15px}
.tgh-count{font-size:11px;opacity:.75;font-family:ui-monospace,monospace;background:rgb(var(--fc) / 0.22);border-radius:999px;padding:2px 9px;font-weight:700}
.tgh-manage{margin-left:auto;border:none;background:none;cursor:pointer;font-size:14px;opacity:.55;padding:2px}
.tgh-manage:hover{opacity:1}
.tgh-chev{opacity:.6;font-size:13px}
.tasks-group-empty{grid-column:1/-1;font-size:12.5px;opacity:.6;padding:10px 4px}
/* Dark mode : teintes du dossier renforcées (le corps doit rester visible) */
body[data-gtheme="dark"] .tasks-folder-tab,body[data-gtheme="dark"] .tasks-folder-tab::after{background:rgb(var(--fc) / 0.34)}
body[data-gtheme="dark"] .tasks-folder-tab:hover,body[data-gtheme="dark"] .tasks-folder-tab:hover::after{background:rgb(var(--fc) / 0.44)}
body[data-gtheme="dark"] .tasks-folder-body{background:rgb(var(--fc) / 0.13);box-shadow:0 8px 22px rgba(0,0,0,.34),inset 0 1px 0 rgb(var(--fc) / 0.16)}
/* Mobile : dossiers de projet en grille 2 par ligne + pile allégée (sinon le
   décalage 3D déborde et rend « cassé » sur les petites cartes). */
@media (max-width:640px){
    .tasks-folders-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 12px;align-items:start}
    .tasks-folders-grid .tasks-folder{margin:10px 0 0;min-width:0}
    .tasks-folders-grid .tasks-folder-closed{width:100%;max-width:100%}
    .tasks-folder-closed{height:120px;border-radius:3px 14px 14px 14px;
        box-shadow:0 5px 14px rgba(40,34,24,.14),4px 5px 0 -2px rgb(var(--fc) / 0.16)}
    body[data-gtheme="dark"] .tasks-folder-closed{box-shadow:0 5px 14px rgba(0,0,0,.4),4px 5px 0 -2px rgb(var(--fc) / 0.2)}
    .tasks-folder-tab{min-width:0;max-width:100%;margin-left:3px;padding:7px 15px 10px 11px;font-size:13px;gap:6px;overflow:hidden}
    .tasks-folder-tab .tgh-name{font-size:13px;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .tasks-folder-tab .tgh-count{padding:2px 7px}
    .tasks-folder-tab .tgh-manage{margin-left:auto}

    .tfc-bigicon{font-size:40px}
    .tasks-folder-body{padding:12px}
}
.tasks-groups-actions{margin:12px 2px}
.tasks-gcolors{display:flex;gap:8px;margin-top:4px}
.tasks-gcolor{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.tasks-gcolor.tasks-proj-chanvre{background:rgba(45,106,36,.9)}
.tasks-gcolor.tasks-proj-operations{background:rgba(21,87,153,.9)}
.tasks-gcolor.tasks-proj-innovation{background:rgba(94,53,177,.9)}
.tasks-gcolor.tasks-proj-culture{background:rgba(198,93,7,.9)}
.tasks-gcolor.on{border-color:#33302a;box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.tasks-form-label{display:block;font-size:12px;font-weight:600;opacity:.7;margin:0 0 3px}
/* Onglet CRM masqué tant que l'accès n'est pas confirmé (Super Admin ou rôle __crm).
   Révélé par l'ajout de la classe body.crm-access dans Shell.init. */
body:not(.crm-access) [data-gs-route="crm"]{display:none !important}
body:not(.plan-access) [data-gs-route="plan"]{display:none !important}
body:not(.agri-access) [data-gs-route="agriculture"]{display:none !important}
body:not(.amb-access) [data-gs-route="ambassadeurs"]{display:none !important}
body:not(.lt-access) [data-gs-route="ligne-du-temps"]{display:none !important}
/* Ligne « Nouveau groupe de tâches » (formulaire de tâche) */
.tasks-newgroup-row{display:flex;gap:8px;align-items:center}
/* Image de groupe : fichier OU « Depuis Studio » */
.tasks-group-img-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tasks-group-studio-pick{margin-top:6px}
.tasks-group-studio-pick:not(:empty){display:flex;align-items:center;gap:8px;font-size:12px;background:rgb(168 134 63 / .12);border-radius:8px;padding:5px 8px}
.tasks-group-studio-pick img{width:34px;height:34px;object-fit:cover;border-radius:5px}
.tgs-clear{border:none;background:none;cursor:pointer;opacity:.55;font-size:12px;margin-left:auto;color:inherit}
.tgs-clear:hover{opacity:1}
.tasks-newgroup-row input{flex:1;min-width:0}
body[data-gtheme="dark"] .tasks-gcolor.on{border-color:#DDCBA4}
/* #6 Sélecteurs d'emplacement (projet → liste → groupe) au formulaire de tâche */
.tasks-loc-pickers{display:flex;flex-direction:column;gap:7px}
.tasks-loc-pickers select{width:100%}
/* Fil d'Ariane vue projet */
.tasks-crumb{display:flex;align-items:center;gap:8px;font-size:13px;margin:2px 2px 12px;flex-wrap:wrap}
.tasks-crumb{color:#4d463b}
body[data-gtheme="dark"] .tasks-crumb{color:rgba(255,255,255,.82)}
.tasks-crumb button{border:none;background:none;cursor:pointer;color:inherit;opacity:.6;
    font-family:inherit;font-size:13px;font-weight:600;padding:3px 6px;border-radius:6px}
.tasks-crumb button:hover{opacity:1;background:rgba(168,134,63,.12)}
.tasks-crumb span{opacity:.4}
.tasks-crumb strong{font-weight:750}
/* « Également, mettre en bold le retour » — ticket gGCVa (D. Lefebvre, 22/08).
   Retour partageait le gris des segments de chemin (600 / opacité .6) alors
   qu'il n'est pas un segment : c'est le seul BOUTON D'ACTION de la barre, et
   celui qu'on vise le plus souvent. Il prend donc le poids des feuilles (750),
   qui est déjà le « fort » du fil, et sort du gris sans devenir criard. */
.tasks-crumb button[data-crumb-back]{font-weight:750;opacity:.85}
/* Fil d'Ariane du module : reste collé en haut pendant le scroll. Réservé à la
   fiche tâche jusqu'au ticket gGCVa (D. Lefebvre) — « il faudrait que ceci
   reste toujours là même quand on scroll », capture du hall de projet à
   l'appui ; crumb() le pose maintenant par défaut sur les huit vues.
   #tasksList est le conteneur scrollable (overflow-y:auto, padding-top:16px) ;
   le box-shadow négatif peint ce padding pour qu'aucun contenu ne dépasse au-dessus
   du breadcrumb collé. Fond = celui de .tasks-view (clair #f7f7f5 / sombre #201d19). */
.tasks-crumb-sticky{
    position: sticky;
    top: 0;
    z-index: 6;
    margin: 0 0 12px;
    padding: 8px 2px;
    background: #f7f7f5;
    box-shadow: 0 -18px 0 0 #f7f7f5, 0 6px 10px -8px rgba(0,0,0,.14);
    transition: transform .22s ease;
}
/* « Hide / show au scroll. Quand on scroll Up il réapparaît peu importe la
   position dans la page » — réponse faite à D. Lefebvre le 22/08 (gGCVa).
   On descend : la barre s'efface et rend sa ligne au contenu. On remonte, ne
   serait-ce que d'un cran : elle revient, sans qu'il faille atteindre le haut.
   Le décalage supplémentaire de 14 px emmène aussi l'ombre portée hors champ —
   à -100 % pile, elle laisserait un trait gris en haut du conteneur.
   La classe est portée par #tasksList : voir armerFilCollant (tasks.js). */
#tasksList.tasks-crumb-away .tasks-crumb-sticky{
    transform: translateY(calc(-100% - 14px));
}
/* Réglage système « moins d'animations » : l'escamotage reste, le glissement
   part. La barre disparaît et revient franchement, sans mouvement. */
@media (prefers-reduced-motion: reduce) {
    .tasks-crumb-sticky{ transition: none; }
}
body[data-gtheme="dark"] .tasks-crumb-sticky{
    background: #201d19;
    box-shadow: 0 -18px 0 0 #201d19, 0 6px 10px -8px rgba(0,0,0,.4);
}
.tasks-newsub-btn{margin:2px 0 10px}
/* Titres de sections de l'espace projet (Tâches / Babillard / …) */
.tasks-section-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:750;
    margin:30px 2px 4px;color:#33302a}
body[data-gtheme="dark"] .tasks-section-title{color:rgba(255,255,255,.9)}
/* Babillard : rangées de fils */
.tasks-board-list{display:flex;flex-direction:column;gap:4px;margin:8px 0 4px}
/* Rangées de fils et de documents : ce sont de VRAIS liens depuis le ticket
   Z0vjLu (⌘/Ctrl+clic, clic du milieu, « ouvrir dans un nouvel onglet »). Les
   deux déclarations ci-dessous neutralisent le style d'ancre par défaut — la
   rangée doit rester identique à l'œil, qu'elle soit <a> ou <button>. */
.tasks-board-row{display:flex;align-items:center;gap:12px;text-align:left;width:100%;
    border:1px solid rgba(40,34,24,.1);background:var(--chanv-blanc,#fff);border-radius:12px;
    padding:11px 14px;cursor:pointer;font-family:inherit;color:#2b2620;transition:all .12s;
    text-decoration:none;box-sizing:border-box}
.tasks-board-row:hover{border-color:rgba(168,134,63,.45);box-shadow:0 3px 10px rgba(40,34,24,.08)}
body[data-gtheme="dark"] .tasks-board-row{background:#2b2823;border-color:rgba(221,203,164,.14);color:rgba(255,255,255,.88)}
body[data-gtheme="dark"] .tasks-board-row:hover{border-color:rgba(221,203,164,.35)}
.tbr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tbr-title{font-weight:700;font-size:14px}
/* Ticket EKnEKCjOEpeaNmdRQobG — « date et heure plus visible partout dans
   basecamp ». La méta portait `opacity:.6`, et une opacité sur le PARENT
   plafonne tout ce qu'il contient : la date, imbriquée dedans, ne pouvait pas
   être remontée sans éclaircir aussi l'auteur et l'aperçu. On exprime donc la
   même pâleur en `color` (l'opacité restait multipliée par la couleur sombre
   déjà posée en thème foncé — d'où une méta à ~.36 au lieu de .6 là-bas).
   Effet de bord assumé : la pastille `.tbr-cat`, qui a ses propres couleurs,
   n'est plus délavée par l'opacité du parent — elle sort à sa teinte réelle. */
.tbr-meta{font-size:12px;color:#7b746a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* La date et l'heure, partout dans Basecamp : une balise à elles, plus dense
   que la méta qui l'entoure, en chiffres tabulaires et jamais coupée en deux. */
.tasks-date{color:#4a4238;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbr-cat{border:1px solid rgba(168,134,63,.4);border-radius:99px;padding:0 7px;font-size:10.5px;
    color:#8a6d1f;text-transform:uppercase;letter-spacing:.04em}
body[data-gtheme="dark"] .tbr-cat{color:#D9BC77;border-color:rgba(221,203,164,.35)}
.tbr-count{background:rgba(21,87,153,.85);color:#fff;border-radius:99px;min-width:22px;height:22px;
    display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0}
.tasks-board-empty{font-size:13px;opacity:.55;font-style:italic;padding:10px 4px 4px}
.tasks-rec-pill{font-family:ui-monospace,'SF Mono',monospace;font-size:9.5px;letter-spacing:.06em;
    text-transform:uppercase;border:1px solid rgba(168,134,63,.45);color:#8a6d1f;
    border-radius:99px;padding:2px 8px;flex-shrink:0}
body[data-gtheme="dark"] .tasks-rec-pill{color:#D9BC77;border-color:rgba(221,203,164,.35)}
#listFormModal select{width:100%;box-sizing:border-box}
/* Kanban */
.tasks-viewtoggle{display:inline-flex;gap:0;margin-left:14px;border:1px solid rgba(168,134,63,.35);
    border-radius:99px;overflow:hidden;font-size:12px}
.tasks-viewtoggle button{border:none;background:none;cursor:pointer;padding:5px 14px;
    font-family:inherit;font-size:12px;font-weight:600;color:inherit;opacity:.6}
.tasks-viewtoggle button.on{background:rgba(168,134,63,.18);opacity:1}
.tasks-kanban-wrap{overflow-x:auto;padding-bottom:8px;margin:12px 0 20px}
.tasks-kanban{display:flex;gap:14px;align-items:flex-start;min-width:min-content}
.tasks-kcol{width:270px;flex-shrink:0;background:rgba(40,34,24,.04);border:1px solid rgba(40,34,24,.1);
    border-radius:13px;padding:10px}
body[data-gtheme="dark"] .tasks-kcol{background:rgba(221,203,164,.05);border-color:rgba(221,203,164,.13)}
.tasks-kcol-over{border-color:#A8863F;background:rgba(168,134,63,.08)}
.tasks-kcol-head{display:flex;align-items:center;gap:8px;padding:2px 4px 10px}
.tkh-name{font-weight:750;font-size:13px;flex:1;text-transform:uppercase;letter-spacing:.04em}
.tkh-n{font-family:ui-monospace,'SF Mono',monospace;font-size:11px;opacity:.55}
.tasks-kcol-body{display:flex;flex-direction:column;gap:8px;min-height:60px}
.tasks-kcard{background:var(--chanv-blanc,#fff);border:1px solid rgba(40,34,24,.13);border-radius:10px;
    padding:10px 12px;cursor:grab;transition:box-shadow .12s}
body[data-gtheme="dark"] .tasks-kcard{background:#2b2823;border-color:rgba(221,203,164,.15)}
.tasks-kcard:hover{box-shadow:0 4px 12px rgba(40,34,24,.14)}
.tasks-kcard-drag{opacity:.4}
.tasks-kcard-done{opacity:.55}
.tasks-kcard-title{font-size:13px;font-weight:600;line-height:1.35}
.tasks-kcard-meta{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.tasks-kcard-who{display:flex}
.tasks-kcard-who .tasks-avatar{width:20px;height:20px;font-size:9px;margin-left:-5px}
.tasks-kcol-new{flex-shrink:0;align-self:flex-start;border:1px dashed rgba(168,134,63,.4);background:none;
    border-radius:13px;padding:12px 18px;font-size:13px;font-weight:600;color:#8a6d1f;
    cursor:pointer;font-family:inherit;margin-top:2px}
.tasks-kcol-new:hover{border-color:#A8863F;background:rgba(168,134,63,.07)}
body[data-gtheme="dark"] .tasks-kcol-new{color:#D9BC77;border-color:rgba(221,203,164,.3)}
.tasks-kcol .tasks-addtask-row{margin-top:2px;padding:6px}
/* Terminées non rangées : un pied de colonne discret, pas une carte de plus. */
.tasks-kcol-donetoggle{display:block;width:100%;margin-top:6px;padding:5px 6px;border:0;
    background:none;cursor:pointer;font-size:.78rem;color:#8a8a8a;text-align:center;border-radius:6px}
.tasks-kcol-donetoggle:hover{background:rgba(168,134,63,.08);color:#A8863F}
body[data-gtheme="dark"] .tasks-kcol-donetoggle{color:#9b9b9b}
body[data-gtheme="dark"] .tasks-kcol-donetoggle:hover{background:rgba(221,203,164,.08);color:#D9BC77}

/* Docs & fichiers */
.tasks-docs-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
/* .tasks-manage-btn porte margin-left:auto (fil d'Ariane) — ici on groupe à gauche */
.tasks-docs-actions .tasks-manage-btn,
.tasks-section-title .tasks-manage-btn{margin-left:0}
.tasks-docs-actions .tasks-manage-btn{background:rgba(168,134,63,.1);border-color:rgba(168,134,63,.35);
    padding:8px 16px;font-size:13px}
.tasks-docs-actions .tasks-manage-btn:hover{background:rgba(168,134,63,.2)}
body[data-gtheme="dark"] .tasks-docs-actions .tasks-manage-btn{background:rgba(221,203,164,.08)}
body[data-gtheme="dark"] .tasks-docs-actions .tasks-manage-btn:hover{background:rgba(221,203,164,.15)}
.tasks-docs-folders{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 14px}
/* Rangée d'un élément Docs + ses actions (ticket ra8UMdPN). Les boutons sont
   SŒURS de la rangée et non dedans : la rangée est un <a>/<button>, imbriquer
   un bouton dedans est invalide. Ils restent visibles (atténués) plutôt que
   révélés au survol — sur tablette et mobile, il n'y a pas de survol. */
.tasks-doc-item{display:flex;align-items:center;gap:6px}
.tasks-doc-item .tasks-board-row{flex:1;min-width:0}
.tasks-doc-acts{display:flex;gap:2px;flex-shrink:0}
.tdoc-act{background:none;border:none;cursor:pointer;font-size:15px;line-height:1;
    padding:7px;border-radius:9px;opacity:.5;transition:opacity .12s,background .12s}
.tdoc-act:hover,.tdoc-act:focus-visible{opacity:1;background:rgba(168,134,63,.14)}
.tdoc-act.tdoc-del:hover,.tdoc-act.tdoc-del:focus-visible{background:rgba(179,64,47,.14)}
body[data-gtheme="dark"] .tdoc-act:hover,body[data-gtheme="dark"] .tdoc-act:focus-visible{background:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .tdoc-act.tdoc-del:hover,body[data-gtheme="dark"] .tdoc-act.tdoc-del:focus-visible{background:rgba(224,131,111,.2)}
/* Pastille de version : un fichier remplacé le dit sans qu'on ait à l'ouvrir. */
.tbr-ver{font-family:ui-monospace,'SF Mono',monospace;font-size:10.5px;font-weight:700;
    border:1px solid rgba(168,134,63,.45);color:#8a6d1f;border-radius:99px;padding:2px 8px;flex-shrink:0}
body[data-gtheme="dark"] .tbr-ver{color:#D9BC77;border-color:rgba(221,203,164,.35)}
/* Historique des versions (réutilise l'habillage de la modale destructive). */
.tdv-box{max-width:520px}
.tdv-list{display:flex;flex-direction:column;gap:6px;margin:14px 0 4px;max-height:52vh;overflow-y:auto}
.tdv-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
    border:1px solid rgba(40,34,24,.1)}
.tdv-row.on{border-color:rgba(168,134,63,.5);background:rgba(168,134,63,.07)}
body[data-gtheme="dark"] .tdv-row{border-color:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .tdv-row.on{border-color:rgba(221,203,164,.4);background:rgba(221,203,164,.08)}
.tdv-no{font-family:ui-monospace,'SF Mono',monospace;font-size:11px;font-weight:700;opacity:.7;flex-shrink:0;min-width:26px}
.tdv-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tdv-name{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tasks-doc-icon{font-size:19px;width:34px;height:34px;display:grid;place-items:center;
    background:rgba(168,134,63,.1);border-radius:9px;flex-shrink:0}
body[data-gtheme="dark"] .tasks-doc-icon{background:rgba(221,203,164,.09)}
/* Fil de post */
.tasks-post-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.tasks-post-title{margin:0 0 2px;font-size:20px}
.tasks-post-body{font-size:14.5px;line-height:1.6;white-space:normal}
/* Toggles d'outils (⚙️ Gérer) */
.tasks-tools-rows{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.tasks-tool-row{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.tasks-tool-row input{width:16px;height:16px}
.tasks-tool-row em{font-size:10.5px;font-style:normal;opacity:.55;border:1px solid rgba(128,116,94,.4);
    border-radius:99px;padding:1px 7px;margin-left:4px;text-transform:uppercase;letter-spacing:.05em}
.tasks-tool-off{opacity:.5;cursor:default}
/* Cartes de modérateurs (⚙️ Gérer) */
.tasks-mod-card{border:1px solid rgba(40,34,24,.14);border-radius:12px;padding:12px 14px;margin-top:10px}
body[data-gtheme="dark"] .tasks-mod-card{border-color:rgba(221,203,164,.18)}
.tasks-mod-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tasks-mod-rights{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 14px}
.tasks-mod-rights .tasks-tool-row{font-size:13px}
#projModPick{padding:8px 10px;border-radius:8px;border:1px solid rgba(40,34,24,.2);font-size:13px;
    background:none;color:inherit;box-sizing:border-box}
body[data-gtheme="dark"] #projModPick{border-color:rgba(221,203,164,.25);background:#2b2823}
/* Zone danger des modales projet/liste : de l'air quand les boutons passent
   sur deux lignes (l'Archiver se collait à Annuler/Sauvegarder) */
#projectFormModal .modal-actions,
#listFormModal .modal-actions,
#docFormModal .modal-actions,
#postFormModal .modal-actions,
#linkFormModal .modal-actions,
#folderFormModal .modal-actions,
#columnFormModal .modal-actions{gap:12px;align-items:center;margin-top:20px}
/* Zone danger : structurellement séparée des actions (filet + air garanti),
   fini le pari sur le row-gap d'un flex qui replie */
.tasks-danger-zone{margin-top:26px;padding-top:18px;border-top:1px solid rgba(179,64,47,.25)}
.tasks-danger-zone.hidden{display:none}
body[data-gtheme="dark"] .tasks-danger-zone{border-top-color:rgba(224,131,111,.3)}
/* Espace de travail d'une tâche (vue pleine page, pas une modale) */
.tasks-workspace{width:100%;max-width:none;box-sizing:border-box;background:var(--chanv-blanc,#fff);
    border:1px solid rgba(40,34,24,.12);border-radius:16px;padding:28px 34px;
    box-shadow:0 6px 24px rgba(40,34,24,.07)}
/* Le texte long reste lisible même en pleine largeur */
.tasks-workspace .tasks-detail-desc,
.tasks-workspace .tasks-comment-content,
.tasks-workspace .tasks-post-body{max-width:78ch}
body[data-gtheme="dark"] .tasks-workspace{background:#26221b;border-color:rgba(221,203,164,.14);
    box-shadow:0 6px 24px rgba(0,0,0,.35)}
.tasks-crumb-dim{opacity:.55}
/* Fil de discussion façon Basecamp */
.tasks-comment{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid rgba(40,34,24,.09)}
.tasks-comment:last-child{border-bottom:none}
body[data-gtheme="dark"] .tasks-comment{border-bottom-color:rgba(221,203,164,.12)}
.tasks-comment-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;
    display:grid;place-items:center;font-weight:700}
.tasks-comment-main{flex:1;min-width:0}
.tasks-comment-hdr{display:flex;align-items:baseline;gap:10px;margin-bottom:3px}
.tasks-comment-hdr strong{font-size:14px}
/* Ticket EKnEKCjOEpeaNmdRQobG — règle GAGNANTE pour l'en-tête de commentaire
   (l'autre, plus haut dans ce fichier, est tenue alignée). `opacity` retirée :
   elle plafonnait la <time class="tasks-date"> imbriquée. Ce qui reste ici ne
   colore plus que le « · modifié ». */
.tasks-comment-date{font-size:12.5px;color:#6f6a60}
.tasks-comment-content{font-size:14px;line-height:1.55}
.tasks-comment-form{display:flex;gap:10px;align-items:flex-end;margin-top:16px}
.tasks-comment-form textarea{width:100%;box-sizing:border-box}
@media (max-width:640px){ .tasks-workspace{padding:18px 16px;border-radius:12px} }
.tasks-manage-btn{margin-left:auto;border:1px solid rgba(168,134,63,.4);background:none;box-sizing:border-box;
    border-radius:99px;padding:5px 14px;font-size:12.5px;font-weight:600;cursor:pointer;
    color:#8a6d1f;font-family:inherit;opacity:1!important}
.tasks-manage-btn:hover{background:rgba(168,134,63,.1)}
body[data-gtheme="dark"] .tasks-manage-btn{color:#D9BC77;border-color:rgba(221,203,164,.35)}
body[data-gtheme="dark"] .tasks-manage-btn:hover{background:rgba(221,203,164,.08)}
/* Chips membres sélectionnés (formulaire projet) */
.tasks-selected-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(168,134,63,.12);
    border:1px solid rgba(168,134,63,.3);border-radius:99px;padding:3px 10px;font-size:12.5px;
    margin:0 6px 6px 0}
.tasks-selected-chip button{border:none;background:none;cursor:pointer;font-size:11px;opacity:.6;padding:0}
.tasks-selected-chip button:hover{opacity:1}
body[data-gtheme="dark"] .tasks-proj-card{background:#2b2823;border-color:rgba(221,203,164,.16);color:rgba(255,255,255,.88)}
body[data-gtheme="dark"] .tasks-proj-card.tasks-proj-chanvre{border-top-color:rgba(96,180,80,.95)}
body[data-gtheme="dark"] .tasks-proj-card.tasks-proj-operations{border-top-color:rgba(95,160,220,.95)}
body[data-gtheme="dark"] .tasks-proj-card.tasks-proj-innovation{border-top-color:rgba(160,120,230,.95)}
body[data-gtheme="dark"] .tasks-proj-card.tasks-proj-culture{border-top-color:rgba(235,140,60,.95)}
body[data-gtheme="dark"] .tpc-desc{opacity:.65}
body[data-gtheme="dark"] .tpc-meta{opacity:.6}
body[data-gtheme="dark"] .tasks-proj-card:hover{box-shadow:0 8px 22px rgba(0,0,0,.4)}
body[data-gtheme="dark"] .tasks-crumb button:hover{background:rgba(221,203,164,.12)}
body[data-gtheme="dark"] .tasks-selected-chip{background:rgba(221,203,164,.1);border-color:rgba(221,203,164,.3)}
.tasks-proj-sep{width:1px;height:20px;background:rgba(40,34,24,.18);margin:0 2px;flex-shrink:0}
/* En-tête de section (« PRISES DE COMMANDES… »). Ces titres servent de REPÈRE
   VISUEL pour naviguer dans une longue liste : ils étaient à 10,5 px et surtout
   à opacity .55, ce qui les rendait flous quelle que soit leur taille. On
   agrandit ET on remplace l'opacité par une vraie couleur — un texte délavé
   reste illisible même en plus gros. Casse et interlettrage conservés : c'est
   la signature visuelle de ces titres. */
.tasks-group-label{font-family:ui-monospace,'SF Mono',monospace;font-size:13px;font-weight:800;
    letter-spacing:.08em;text-transform:uppercase;color:#6b5a3a;opacity:1;margin:22px 4px 10px;
    display:flex;align-items:center;gap:10px}
.tasks-group-label::after{content:"";flex:1;height:1px;background:rgba(40,34,24,.14)}
/* Le compteur reste secondaire, mais lisible. */
.tasks-group-label .tgl-n{opacity:1;color:#9a8663;font-weight:700}
/* « Hors section » : une étiquette de service, pas un vrai groupe. Elle doit
   se voir — c'est tout l'intérêt, ces tâches étaient anonymes — sans se faire
   passer pour une journée du calendrier. D'où le trait discontinu et la
   couleur en retrait. */
.tasks-group-label--loose{color:#9a8663;font-weight:700;opacity:.85}
.tasks-group-label--loose::after{background:repeating-linear-gradient(90deg,
    rgba(40,34,24,.18) 0 4px,transparent 4px 8px)}
body[data-gtheme="dark"] .tasks-group-label--loose{color:rgba(221,203,164,.72)}
body[data-gtheme="dark"] .tasks-group-label--loose::after{background:repeating-linear-gradient(90deg,
    rgba(221,203,164,.2) 0 4px,transparent 4px 8px)}
.tasks-group-overdue{color:#b3402f;opacity:.9}
/* Bloc de liste : l'en-tête et ses tâches dans la MÊME carte */
.tasks-list-block{background:var(--chanv-blanc,#fff);border:1px solid rgba(40,34,24,.12);
    border-radius:14px;margin:14px 0;overflow:hidden;box-shadow:0 3px 12px rgba(40,34,24,.05)}
body[data-gtheme="dark"] .tasks-list-block{background:#26221b;border-color:rgba(221,203,164,.15);
    box-shadow:0 3px 12px rgba(0,0,0,.3)}
.tasks-list-body{padding:6px 14px 12px;display:flex;flex-direction:column;gap:8px}
.tasks-list-body .tasks-group-label{margin:12px 2px 2px}
.tasks-list-body .tasks-card{box-shadow:none;border-color:rgba(40,34,24,.1)}
body[data-gtheme="dark"] .tasks-list-body .tasks-card{border-color:rgba(221,203,164,.12);background:#2b2823}
/* `flex-wrap` à TOUTES les largeurs, plus seulement sous 640px (ticket
   OSJJdECp9cCEncCRIiJt) : « Groupe de tâches » remplace « Section » et la
   rangée porte jusqu'à huit outils en `white-space:nowrap`. Sans repli, une
   fenêtre étroite-mais-pas-mobile (tablette, écran partagé, zoom 150 %)
   poussait la corbeille hors du cadre — soit la panne du ticket, en pire :
   un bouton non pas mal nommé, mais absent pour de bon. Une rangée qui tient
   ne se replie pas ; c'est exactement ce qu'on veut. */
.tasks-list-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:12px 16px;
    background:rgba(168,134,63,.09);border-bottom:1px solid rgba(168,134,63,.2)}
.tasks-list-head .tlh-name{font-weight:750;font-size:14.5px;color:#33302a}
body[data-gtheme="dark"] .tasks-list-head .tlh-name{color:rgba(255,255,255,.9)}
.tasks-list-head .tlh-prog{flex:1;max-width:220px;height:5px;border-radius:99px;background:rgba(40,34,24,.12);overflow:hidden;min-width:60px}
.tasks-list-head .tlh-count.tlh-empty{margin-left:auto;font-family:inherit;letter-spacing:0;font-style:italic}
body[data-gtheme="dark"] .tasks-list-head .tlh-count{color:rgba(255,255,255,.55);opacity:1}
body[data-gtheme="dark"] .tasks-group-label{color:rgba(255,255,255,.88);opacity:1}
.tasks-list-head .tlh-prog i{display:block;height:100%;background:#A8863F;border-radius:99px}
.tasks-list-head .tlh-count{font-family:ui-monospace,'SF Mono',monospace;font-size:11px;opacity:.6}
.tasks-list-head .tlh-newtask{margin-left:0;background:rgba(168,134,63,.12);border-color:rgba(168,134,63,.45);
    font-weight:700;padding:6px 14px;white-space:nowrap}
.tasks-list-head .tlh-newtask:hover{background:rgba(168,134,63,.22)}
body[data-gtheme="dark"] .tasks-list-head .tlh-newtask{background:rgba(221,203,164,.1)}
/* « + tâche » / « + section », la paire que D. Gauthier a dessinée dans
   l'en-tête (ticket 0JYxOEpmiR4wyTI6tgs0). Même gabarit que .tlh-newtask —
   même hauteur, même nowrap — mais en TRAIT, pas en plein : créer une tâche
   reste le geste courant, structurer la liste est le geste rare. Deux pleins
   côte à côte se disputeraient l'œil et on ne saurait plus lequel est le
   défaut. `margin-left:0` annule le `margin-left:auto` de .tasks-manage-btn,
   qui séparerait les deux boutons de toute la largeur de l'en-tête. */
.tasks-list-head .tlh-newsection{margin-left:0;background:none;border-color:rgba(168,134,63,.4);
    font-weight:650;padding:6px 12px;white-space:nowrap}
.tasks-list-head .tlh-newsection:hover{background:rgba(168,134,63,.12)}
.tasks-list-head .tlh-newsection:disabled{opacity:.45;cursor:default;background:none}
body[data-gtheme="dark"] .tasks-list-head .tlh-newsection:hover{background:rgba(221,203,164,.08)}
.tasks-addtask-row{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
    border:1px dashed rgba(168,134,63,.35);background:none;border-radius:9px;padding:9px;
    font-size:12.5px;font-weight:600;color:#8a6d1f;cursor:pointer;font-family:inherit;margin-top:4px}
.tasks-addtask-row:hover{border-color:#A8863F;background:rgba(168,134,63,.07)}
body[data-gtheme="dark"] .tasks-addtask-row{color:#D9BC77;border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .tasks-addtask-row:hover{background:rgba(221,203,164,.07)}
.tasks-list-head .tlh-add{border:none;background:none;cursor:pointer;font-size:13px;opacity:var(--tk-op-3,.6);padding:2px 6px;border-radius:6px}
.tasks-list-head .tlh-add:hover{opacity:1;background:rgba(168,134,63,.15)}
/* La rangée d'outils de l'en-tête hérite sa couleur de .tasks-list-head, qui
   n'en avait aucune en sombre : elle retombait sur l'encre CLAIRE du <body>
   (#282828, jamais redéfinie en sombre — chaque composant pose la sienne).
   Ses enfants nommés (.tlh-name, .tlh-count) avaient été rattrapés un par un ;
   la rangée elle-même, non, donc ✏️ 🔁 ✨ 🗑️ héritaient d'un gris anthracite
   sur fond #26221b — 1,05:1. On donne son encre au conteneur plutôt qu'à
   chaque bouton : les suivants naîtront lisibles. */
body[data-gtheme="dark"] .tasks-list-head{color:rgba(255,255,255,.88)}

/* ---- L'ÉTAGE GROUPE : responsable, jalon, attente ----
   Trois pastilles qui n'existent QUE si la donnée existe. Les 650 groupes
   actuels n'ont ni responsable ni dépendance : leur en-tête ne bouge pas.
   Le vert et l'ambre disent deux choses différentes — franchi / on attend —
   et jamais par la couleur seule : chaque pastille porte son signe (✓, 🔒)
   pour rester lisible en cas de daltonisme comme en impression. */
.tasks-list-head .tlh-lead{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;
    padding:3px 9px;border-radius:99px;background:rgba(40,34,24,.07);color:#5a5248;white-space:nowrap}
body[data-gtheme="dark"] .tasks-list-head .tlh-lead{background:rgba(255,255,255,.08);color:rgba(255,255,255,.72)}
.tasks-list-head .tlh-jalon{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
    padding:3px 9px;border-radius:99px;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.tasks-list-head .tlh-jalon--ok{background:rgba(46,125,77,.13);color:#2E7D4D}
.tasks-list-head .tlh-jalon--lock{background:rgba(168,134,63,.16);color:#8a6d1f}
body[data-gtheme="dark"] .tasks-list-head .tlh-jalon--ok{background:rgba(93,190,133,.16);color:#7FD3A0}
body[data-gtheme="dark"] .tasks-list-head .tlh-jalon--lock{background:rgba(221,203,164,.14);color:#D9BC77}
/* Le bouton est présent dès qu'on a le droit de trancher, discret tant que le
   groupe n'est pas complet : « terminée » se décide, mais on n'invite pas à
   décider trop tôt. Il s'allume — pas il apparaît — quand tout est fait. */
.tasks-list-head .tlh-validate{white-space:nowrap;padding:6px 12px;font-weight:700;
    background:none;border-color:rgba(46,125,77,.35);color:#2E7D4D;opacity:.55}
.tasks-list-head .tlh-validate:hover{opacity:1;background:rgba(46,125,77,.1)}
.tasks-list-head .tlh-validate--pret{opacity:1;background:rgba(46,125,77,.12);border-color:rgba(46,125,77,.6)}
body[data-gtheme="dark"] .tasks-list-head .tlh-validate{color:#7FD3A0;border-color:rgba(127,211,160,.35)}
body[data-gtheme="dark"] .tasks-list-head .tlh-validate--pret{background:rgba(127,211,160,.14);border-color:rgba(127,211,160,.6)}
/* La suppression voisine trois actions bénignes (masquer, dupliquer, Gandalf).
   Un filet la détache et le survol vire au rouge : le geste destructeur ne doit
   pas se confondre avec ses voisins au moment du clic. Ticket lCmSa8 (D. Gauthier). */
.tasks-list-head .tlh-del{margin-left:4px;padding-left:9px;border-left:1px solid rgba(168,134,63,.28);opacity:var(--tk-op-5,.45)}
.tasks-list-head .tlh-del:hover{opacity:1;background:rgba(197,58,58,.14)}
body[data-gtheme="dark"] .tasks-list-head .tlh-del{border-left-color:rgba(221,203,164,.24)}
/* Le même 🗑️, au fil d'Ariane d'un TABLEAU À PART — il y remplace ⚙️ Gérer,
   dont la zone de danger archivait le classeur entier (ticket 0hcjaRe3,
   D. Paquette). Il porte ici son libellé plutôt qu'une icône seule : c'est la
   seule action de la page, elle n'a pas de voisines dont se distinguer. Rouge
   au survol comme sa jumelle, pour la même raison. */
.tasks-crumb .tlh-del{color:#a33;border-color:rgba(197,58,58,.35)}
.tasks-crumb .tlh-del:hover{background:rgba(197,58,58,.14);border-color:rgba(197,58,58,.6)}
body[data-gtheme="dark"] .tasks-crumb .tlh-del{color:#e79a9a}
.tasks-newlist-btn{display:block;margin:22px auto 8px;border:1px dashed rgba(168,134,63,.55);
    background:none;border-radius:10px;padding:9px 20px;font-size:13px;font-weight:600;
    color:#8a6d1f;cursor:pointer;font-family:inherit}
.tasks-newlist-btn:hover{border-color:#A8863F;color:#A8863F;background:rgba(168,134,63,.07)}
body[data-gtheme="dark"] .tasks-newlist-btn{color:#D9BC77;border-color:rgba(221,203,164,.4)}
body[data-gtheme="dark"] .tasks-newlist-btn:hover{color:#E8CD8C;background:rgba(221,203,164,.08)}
/* Rangées de groupes (modale liste) */
.tasks-group-row{display:flex;gap:8px;margin-top:8px;align-items:center}
.tasks-group-row input{flex:1;box-sizing:border-box}
.tasks-group-row-del{border:none;background:none;cursor:pointer;font-size:13px;opacity:.55;padding:4px 8px;border-radius:6px}
.tasks-group-row-del:hover{opacity:1;background:rgba(200,60,50,.15)}
.tasks-list-groups-hint{font-size:12px;opacity:.55;margin:2px 0 4px}
#listFormModal input[type="text"]{width:100%;box-sizing:border-box}
/* « Où ranger cette liste ? » — deux destinations NOMMÉES, pas une case à
   cocher. Le ticket du 21 août n'était pas un geste manquant mais un mot :
   « Ça crée un groupe de tâche dans mon tableau Publications alors que je
   veux un autre tableau complètement de tâche. » Une case « tableau à part »
   se serait lue après coup ; deux cartes côte à côte se lisent avant. */
.tasks-place-choice{display:grid;gap:8px}
.tasks-place-opt{display:flex;gap:10px;align-items:flex-start;cursor:pointer;
    padding:10px 12px;border:1px solid rgba(60,45,20,.18);border-radius:10px;transition:border-color .15s,background .15s}
.tasks-place-opt:hover{border-color:rgba(60,45,20,.36);background:rgba(60,45,20,.03)}
.tasks-place-opt input[type="radio"]{margin:3px 0 0;flex:none;width:auto}
.tasks-place-opt:has(input:checked){border-color:#2D6A24;background:rgba(45,106,36,.07)}
.tpo-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.tpo-title{font-weight:600;font-size:13.5px}
.tpo-hint{opacity:.6;font-size:11.5px;line-height:1.35}
body[data-gtheme="dark"] .tasks-place-opt{border-color:rgba(221,203,164,.18)}
body[data-gtheme="dark"] .tasks-place-opt:hover{border-color:rgba(221,203,164,.38);background:rgba(221,203,164,.05)}
body[data-gtheme="dark"] .tasks-place-opt:has(input:checked){border-color:#7FBF6B;background:rgba(127,191,107,.1)}
body[data-gtheme="dark"] .tasks-projects-row{border-bottom-color:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .tasks-proj-sep{background:rgba(221,203,164,.22)}
body[data-gtheme="dark"] .tasks-proj-chip{border-color:rgba(221,203,164,.22)}
body[data-gtheme="dark"] .tasks-proj-chip.on{background:rgba(221,203,164,.85);color:#211e19;border-color:transparent}
body[data-gtheme="dark"] .tasks-proj-chip.tasks-proj-chanvre.on{background:rgba(45,106,36,.85);color:#fff}
body[data-gtheme="dark"] .tasks-proj-chip.tasks-proj-operations.on{background:rgba(21,87,153,.85);color:#fff}
body[data-gtheme="dark"] .tasks-proj-chip.tasks-proj-innovation.on{background:rgba(94,53,177,.85);color:#fff}
body[data-gtheme="dark"] .tasks-proj-chip.tasks-proj-culture.on{background:rgba(198,93,7,.85);color:#fff}
body[data-gtheme="dark"] .tasks-group-label::after{background:rgba(221,203,164,.15)}
body[data-gtheme="dark"] .tasks-group-overdue{color:#F1A9A0}
body[data-gtheme="dark"] .tasks-list-head{background:rgba(221,203,164,.07);border-color:rgba(221,203,164,.2)}
body[data-gtheme="dark"] .tasks-list-head .tlh-prog{background:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .tasks-newlist-btn{border-color:rgba(221,203,164,.3)}

/* ---------- CARTE DE PROFIL (survol + clic) ---------- */
[data-user-card]{cursor:pointer}
.ucard{background:var(--chanv-blanc,#fff);color:#2b2620;border:1px solid rgba(40,34,24,.15);
    border-radius:14px;padding:14px 16px;box-shadow:0 14px 40px rgba(0,0,0,.22);width:280px;box-sizing:border-box}
body[data-gtheme="dark"] .ucard{background:#2b2823;color:rgba(255,255,255,.9);
    border-color:rgba(221,203,164,.22);box-shadow:0 14px 40px rgba(0,0,0,.55)}
.ucard-hover{position:fixed;z-index:2350;animation:ucardIn .12s ease-out}
@keyframes ucardIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ucard-hover{animation:none}}
.ucard-head{display:flex;align-items:center;gap:12px}
.ucard-photo{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;
    display:grid;place-items:center;font-size:20px;font-weight:700;
    background:rgba(168,134,63,.2)}
.ucard-name{font-weight:750;font-size:15px}
.ucard-role{font-size:12px;opacity:.6;margin-top:1px}
.ucard-vacation{font-size:12px;color:#b8860b;margin-top:2px}
body[data-gtheme="dark"] .ucard-vacation{color:#e0b64d}
.ucard-phrase{font-size:12.5px;font-style:italic;opacity:.7;margin-top:10px;
    border-top:1px solid rgba(128,116,94,.2);padding-top:8px;text-align:center}
.ucard-actions{margin-top:12px}
.ucard-actions .btn{width:100%;font-size:13px;padding:8px 12px}
.ucard-overlay{position:fixed;inset:0;z-index:2360;display:flex;align-items:center;
    justify-content:center;background:rgba(15,12,8,.5)}
.ucard-modal{position:relative;width:320px}
.ucard-close{position:absolute;top:10px;right:12px;border:none;background:none;
    cursor:pointer;font-size:13px;opacity:.5;color:inherit}
.ucard-close:hover{opacity:1}

/* ---------- COMPOSEUR GANDALF (surfaces d'écriture partagées) ---------- */
.gc-composer{border:1px solid rgba(40,34,24,.16);border-radius:14px;padding:10px 12px;
    background:var(--chanv-blanc,#fff);margin-top:14px}
.gc-composer.gc-dropping{border-color:#A8863F;background:rgba(168,134,63,.06)}
body[data-gtheme="dark"] .gc-composer{background:#2b2823;border-color:rgba(221,203,164,.18)}
.gc-input-wrap{position:relative}
.gc-input{width:100%;box-sizing:border-box;border:none;background:none;resize:none;
    font-family:inherit;font-size:14px;color:inherit;outline:none;min-height:44px;line-height:1.5}
.gc-input::placeholder{opacity:.5}
.gc-quote-bar{display:flex;align-items:center;gap:8px;font-size:12.5px;
    border-left:3px solid rgba(168,134,63,.55);background:rgba(40,34,24,.05);
    border-radius:8px;padding:6px 10px;margin-bottom:8px}
.gc-quote-bar strong{flex-shrink:0}
.gc-quote-bar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.65}
.gc-quote-bar button{border:none;background:none;cursor:pointer;opacity:.6;font-size:11px}
.gc-quote-bar button:hover{opacity:1}
.gc-quote-bar.hidden{display:none}
body[data-gtheme="dark"] .gc-quote-bar{background:rgba(221,203,164,.08)}
.gc-chips{display:flex;flex-wrap:wrap;gap:6px}
.gc-chips:not(:empty){margin-bottom:8px}
.gc-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;
    border:1px solid rgba(168,134,63,.35);background:rgba(168,134,63,.08);
    border-radius:99px;padding:4px 10px;max-width:260px}
.gc-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-chip button{border:none;background:none;cursor:pointer;font-size:10px;opacity:.6;padding:0}
.gc-chip button:hover{opacity:1}
/* Fichier joint AVANT que la tâche n'existe : il part à l'enregistrement.
   Le pointillé dit « pas encore déposé » sans crier à l'erreur. */
.gc-chip-pending{border-style:dashed;opacity:.85}
/* Envoi refusé (trop gros, réseau) : le fichier reste là, nouvel essai à
   l'enregistrement — surtout ne pas le faire disparaître en silence. */
.gc-chip-error{border-color:rgba(190,60,50,.55);background:rgba(190,60,50,.08)}
.gc-toolbar{display:flex;align-items:center;gap:6px;border-top:1px solid rgba(40,34,24,.1);
    padding-top:8px;margin-top:6px;flex-wrap:wrap}
body[data-gtheme="dark"] .gc-toolbar{border-top-color:rgba(221,203,164,.12)}
.gc-tb{border:none;background:none;cursor:pointer;font-size:15px;font-weight:700;
    padding:5px 8px;border-radius:8px;color:inherit;opacity:.7;font-family:inherit}
.gc-tb:hover{opacity:1;background:rgba(168,134,63,.12)}
.gc-tb-status{font-size:13px;margin-left:4px}
.gc-send{margin-left:auto;padding:6px 18px;border-radius:99px;font-size:13px}
/* Dropdowns emoji / gif / mentions */
.gc-emoji-dd,.gc-gif-dd,.gc-mention-dd{position:absolute;bottom:calc(100% + 6px);left:0;z-index:40;
    background:var(--chanv-blanc,#fff);border:1px solid rgba(40,34,24,.16);border-radius:12px;
    box-shadow:0 12px 34px rgba(0,0,0,.18);padding:8px;max-width:min(340px,90vw)}
body[data-gtheme="dark"] .gc-emoji-dd,body[data-gtheme="dark"] .gc-gif-dd,body[data-gtheme="dark"] .gc-mention-dd{
    background:#2b2823;border-color:rgba(221,203,164,.2);box-shadow:0 12px 34px rgba(0,0,0,.5)}
.gc-emoji-dd{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:220px;overflow-y:auto}
.gc-emoji-dd.hidden,.gc-gif-dd.hidden,.gc-mention-dd.hidden{display:none}
.gc-emoji-dd button{border:none;background:none;cursor:pointer;font-size:17px;padding:4px;border-radius:6px}
.gc-emoji-dd button:hover{background:rgba(168,134,63,.15)}
.gc-gif-dd{width:min(340px,90vw)}
.gc-gif-search{width:100%;box-sizing:border-box;margin-bottom:8px;padding:7px 10px;
    border:1px solid rgba(40,34,24,.15);border-radius:8px;font-size:13px;background:none;color:inherit}
.gc-gif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:240px;overflow-y:auto;font-size:12px}
.gc-gif-grid img{width:100%;height:76px;object-fit:cover;border-radius:8px;cursor:pointer}
.gc-gif-grid img:hover{outline:2px solid #A8863F}
.gc-mention-dd{display:flex;flex-direction:column;min-width:220px;max-height:264px;overflow-y:auto}
.gc-mention-dd button{border:none;background:none;cursor:pointer;text-align:left;
    padding:7px 10px;border-radius:8px;font-size:13px;color:inherit;font-family:inherit;
    display:flex;align-items:center;gap:9px;width:100%}
.gc-mention-dd button:hover{background:rgba(168,134,63,.12)}
/* Le VISAGE de la personne, comme dans le chat : « @da » propose six noms qui
   se ressemblent (Daniel, Danny, Dany, Daphnée…) et la photo les départage
   d'un coup d'œil, là où le nom seul se lit lettre à lettre. Repli sur
   l'initiale quand l'annuaire n'a pas d'avatar. */
.gc-mention-dd .gc-mention-face{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:0 0 24px}
.gc-mention-dd .gc-mention-initiale{display:inline-flex;align-items:center;justify-content:center;
    background:var(--gs-accent,#A8863F);color:#fff;font-weight:700;font-size:11px}
.gc-mention-dd .gc-mention-nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* La ligne visée AUX FLÈCHES (ticket A. Veyrine vdpk6Op6, 21/08 : « rendre la
   navigation au clavier possible dans la sélection des noms de tags »). Même
   teinte que le survol, en un peu plus marqué : au clavier, rien d'autre ne dit
   ce qu'Entrée va choisir. Jumelle de `.gc-rp-dd-sel` de la palette de
   réaction, qui naviguait déjà. */
.gc-mention-dd button.gc-mention-sel{background:rgba(168,134,63,.2)}
body[data-gtheme="dark"] .gc-mention-dd button.gc-mention-sel{background:rgba(221,203,164,.2)}
/* Contraste élevé / « pas seulement la couleur » : un liseré, pour qui ne
   distingue pas deux fonds voisins. */
@media (prefers-contrast: more){
    .gc-mention-dd button.gc-mention-sel{outline:2px solid currentColor;outline-offset:-2px}
}
/* Rendu des pièces jointes dans les fils */
.gc-atts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.gc-att{border:1px solid rgba(40,34,24,.14);border-radius:10px;overflow:hidden;cursor:pointer;
    background:none;padding:0;font-family:inherit;color:inherit;text-decoration:none;
    display:flex;flex-direction:column;max-width:220px}
.gc-att:hover{border-color:rgba(168,134,63,.5)}
body[data-gtheme="dark"] .gc-att{border-color:rgba(221,203,164,.18)}
.gc-att-cap{font-size:11px;padding:5px 9px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
/* Une PHOTO se regarde sans cliquer (ticket vW7CZcWB, L. Bussière) : la tuile
   de 220×130 en object-fit:cover rognait une photo de téléphone en bandeau
   illisible. Même cadre que le carrousel (≥2 images), et l'image entière. */
.gc-att-img{max-width:min(340px,62vw)}
.gc-att-img img{width:auto;max-width:min(340px,62vw);height:auto;max-height:300px;
    object-fit:contain;display:block;background:rgba(128,128,128,.1)}
.gc-att-img .gc-att-cap{max-width:min(340px,62vw)}
/* …mais une photo dans une FICHE n'est pas une photo dans une bulle.
   Ces 340 px viennent de la conversation : .chat-att-img vaut 280 et
   .gc-inline-img 340, tous deux calés sur « 80 % de la colonne d'un message ».
   La fiche, elle, est une PAGE : son texte court jusqu'à 78 caractères (~650 px)
   et sa colonne fait 1324 px (1440 − marges de .tasks-list − padding de
   .tasks-workspace). Une photo de 24 Mpx y restait à 340 px, soit la moitié du
   paragraphe posé juste à côté d'elle — ticket AFwHo2H1, L. Bussière.
   Le zoom du navigateur n'explique pas ce ticket : il multiplie le plafond et
   la colonne par le même facteur, donc il ne change jamais ce rapport.
   600 px : au plus près des ~650 px du texte, et la plus grande valeur qui
   laisse encore DEUX photos côte à côte sur un portable 1366 (2×600+10 ≤ 1250)
   — le côte-à-côte gagné au ticket Daphnée ne doit pas se reperdre ici.
   90vw et non 62vw : sur un téléphone, l'ancienne règle laissait un tiers de
   l'écran vide à droite de la photo.
   La hauteur suit (300 → 70vh) : sinon un portrait reste bridé à 225 px de
   large, c'est la hauteur qui le contraint, jamais la largeur. */
.tasks-workspace .gc-att-img,
.tasks-workspace .gc-att-img .gc-att-cap{max-width:min(600px,90vw)}
.tasks-workspace .gc-att-img img{max-width:min(600px,90vw);max-height:min(70vh,720px)}
.gc-att-file{flex-direction:row;align-items:center;gap:8px;padding:8px 12px;font-size:12.5px}
.gc-att-file small{opacity:.55}
/* PDF : aperçu de la première page (ticket Benjamin — « voir les pièces
   attachées, pas seulement lorsque c'est en photo »). L'état PAR DÉFAUT est
   l'ancienne pastille de texte : tant que la vignette n'est pas rendue — elle
   ne l'est qu'à l'approche du viewport — ou si elle échoue (CDN bloqué, PDF
   chiffré), on n'affiche rien de cassé, juste ce qu'on affichait avant. */
.gc-att-pdf{flex-direction:row;align-items:center;gap:8px;padding:8px 12px;font-size:12.5px}
.gc-att-pdf small{opacity:.55}
.gc-att-pdfpage{display:none}
.gc-att-pdf-ready{flex-direction:column;align-items:stretch;gap:0;padding:0;
    max-width:min(340px,62vw)}
.gc-att-pdf-ready .gc-att-pdfpage{display:block;width:100%;height:190px;
    object-fit:cover;object-position:top center;background:#fff;
    border-bottom:1px solid rgba(40,34,24,.10)}
.gc-att-pdf-ready .gc-att-cap{max-width:min(340px,62vw);white-space:normal}
/* Même raison que pour les photos, en plus mesuré : ses manifestes et bons de
   livraison sont des lettres 8,5×11 en portrait. À 340 px de large, les 190 px
   de haut ne montrent que l'en-tête. À 480/340, on voit le haut de page en
   entier — destinataire, numéro de lot, quantités — sans ouvrir le fichier.
   On garde le recadrage par le HAUT : c'est là que se trouve ce qu'on cherche,
   et une page entière mise à l'échelle serait illisible de toute façon. */
.tasks-workspace .gc-att-pdf-ready,
.tasks-workspace .gc-att-pdf-ready .gc-att-cap{max-width:min(480px,90vw)}
.tasks-workspace .gc-att-pdf-ready .gc-att-pdfpage{height:340px}
.gc-att-proj{cursor:pointer}
.gc-att-proj:hover .gc-att-cap{color:#A8863F}
.gc-att-go{opacity:.55}
.gc-att-proj img{width:100%;max-width:220px;height:90px;object-fit:cover;display:block}
.gc-att-broken{opacity:.4}
/* Citation dans un commentaire + bouton citer */
.gc-quote{border-left:3px solid rgba(168,134,63,.5);background:rgba(40,34,24,.05);
    border-radius:0 8px 8px 0;padding:4px 10px;margin:2px 0 6px;font-size:12px}
body[data-gtheme="dark"] .gc-quote{background:rgba(221,203,164,.07)}
.gc-quote-author{font-weight:700;margin-right:6px}
.gc-quote-text{opacity:.65}
/* Vignette d'une image CITÉE (jeton [img:…] d'une capture collée) — posée ici,
   c'est composer.js qui l'écrit, et réduite plus bas pour les bandeaux d'une
   seule ligne (« réponse à »), qu'elle épaissirait.
   · 40px : en dessous, une capture d'écran n'est plus qu'une tache grise ;
     au-dessus, la citation cesse d'être un rappel et mange le message.
   · contain, pas cover : une capture est large — rognée, il n'en reste qu'une
     bande qu'on ne reconnaît pas ; ici on la voit en entier.
   · pointer-events:none : une citation est UN bloc cliquable (elle ramène au
     message d'origine). Sans ça le clic tombe sur l'image et la visionneuse
     s'ouvre à la place, sur la mauvaise image (ImgGallery remonte à la bulle). */
.gc-quote-thumb{height:40px;width:auto;max-width:150px;object-fit:contain;
    border-radius:4px;vertical-align:middle;margin-right:4px;
    background:rgba(40,34,24,.08);pointer-events:none}
.gc-quote-bar .gc-quote-thumb{height:20px;max-width:80px}
body[data-gtheme="dark"] .gc-quote-thumb{background:rgba(221,203,164,.1)}
.tasks-comment-tools{margin-left:auto;display:flex;gap:2px}
.tasks-comment-quote-btn{border:none;background:none;cursor:pointer;font-size:12px;
    opacity:0;padding:1px 5px;border-radius:5px}
.tasks-comment:hover .tasks-comment-quote-btn{opacity:.6}
@media (hover:none){.tasks-comment-quote-btn{opacity:.6}} /* tactile : citer atteignable */
.tasks-comment-quote-btn:hover{opacity:1!important;background:rgba(168,134,63,.15)}
.tasks-comment-deleted{opacity:.5;font-size:13px}
/* Modifier un commentaire = le champ du composeur (ticket ZvSISxOd, D. Paquette,
   25/08 : « on ne voit pas la même chose que quand on écrit »). Le <textarea>
   porte DÉSORMAIS `.gc-input` et l'enveloppe `.gc-composer` : cadre, fond, thème
   sombre et barre d'outils arrivent tels quels, sans une seule déclaration
   recopiée.
   Cette règle-ci ne garde donc AUCUNE des propriétés d'apparence d'avant —
   bordure, `font-size:13.5px`, `min-height:64px`, `resize:vertical`. Elle vient
   APRÈS `.gc-input` (ligne 9009) et, à égalité de spécificité, aurait gagné : les
   réintroduire redonnerait la petite boîte à ascenseur du ticket. Elle ne subsiste
   que comme repère pour le JS et les tests. */
.tasks-comment-editbox{overflow-y:auto}
/* `.gc-composer` s'écarte de ce qui le précède ; ici il EST le contenu du
   commentaire et n'a personne à qui échapper. */
.tasks-comment-editwrap{margin-top:0}
/* Réactions des commentaires */
.gc-reacts{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;position:relative}
.gc-react{border:1px solid rgba(40,34,24,.15);background:rgba(40,34,24,.03);border-radius:99px;
    padding:2px 9px;font-size:12px;cursor:pointer;font-family:inherit;color:inherit}
.gc-react:hover{border-color:rgba(168,134,63,.5)}
.gc-react-mine{border-color:#A8863F;background:rgba(168,134,63,.14)}
.gc-react-add{opacity:0;transition:opacity .15s}
.tasks-comment:hover .gc-react-add{opacity:.6}
@media (hover:none){.gc-react-add{opacity:.6}} /* tactile : réagir atteignable */
.gc-react-add:hover{opacity:1!important}
.gc-react-palette{position:absolute;bottom:calc(100% + 4px);left:0;z-index:45;display:flex;gap:2px;
    background:var(--chanv-blanc,#fff);border:1px solid rgba(40,34,24,.18);border-radius:99px;
    padding:4px 8px;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.gc-react-palette button{border:none;background:none;cursor:pointer;font-size:16px;padding:2px 4px;border-radius:6px}
.gc-react-palette button:hover{background:rgba(168,134,63,.15);transform:scale(1.15)}
body[data-gtheme="dark"] .gc-react{border-color:rgba(221,203,164,.2);background:rgba(221,203,164,.05)}
body[data-gtheme="dark"] .gc-react-mine{border-color:#D9BC77;background:rgba(221,203,164,.15)}
body[data-gtheme="dark"] .gc-react-palette{background:#2b2823;border-color:rgba(221,203,164,.25);box-shadow:0 8px 22px rgba(0,0,0,.5)}
/* --- Réaction TEXTE (le « boost » de Basecamp) -------------------------
   La pastille de mots partage la rangée des emojis : .gc-reacts enveloppe
   déjà (flex-wrap), un texte de 20 caractères passe donc à la ligne au lieu
   de casser la rangée — et l'ellipse borne les noms de mention, qui eux ne
   sont pas plafonnés. Toute couleur a sa valeur en clair AVANT la reprise en
   sombre : rien n'est défini uniquement dans un bloc de thème. */
.gc-treact{max-width:min(100%,26em);display:inline-flex;align-items:center;min-width:0}
.gc-treact-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* Celle des autres ne se retire pas : le curseur ne doit pas le laisser croire. */
.gc-treact:not(.gc-react-mine){cursor:default}
.gc-treact-mention{background:rgba(99,102,241,.12);color:#4338CA;font-weight:600;border-radius:4px;padding:0 3px}
body[data-gtheme="dark"] .gc-treact-mention{background:rgba(99,102,241,.24);color:#A5B4FC}
/* La palette qui accueille le champ passe en colonne et perd sa forme de
   gélule : une zone de saisie dans une pilule ne tient pas. */
.gc-react-palette-withtext{flex-direction:column;align-items:stretch;gap:6px;border-radius:14px;padding:6px 8px;
    width:max-content;min-width:min(280px,100%);max-width:min(340px,100%)}
.gc-rp-emojis{display:flex;gap:2px;align-items:center}
/* En mode « toutes les catégories », c'est la RANGÉE d'emojis qui défile —
   pas la palette, sinon le champ texte défilerait hors de vue. */
.gc-react-palette-full .gc-rp-emojis{max-width:min(330px,100%);max-height:200px;overflow-y:auto;flex-wrap:wrap}
/* Le sélecteur COMBINÉ porte aussi la largeur, sinon elle est perdue :
   `.gc-react-palette-full` (plus bas dans ce fichier) pose `max-width:340px`
   avec la même spécificité qu'une classe que `.gc-react-palette-withtext`
   (`min(340px,100%)`) — à égalité, la dernière écrite gagne, et la palette
   reprenait 340 px pleins. À 375 px la palette + champ débordait alors de la
   page (mesuré : bord droit 406, scrollWidth 406 pour 375 de large), la
   colonne d'emojis de droite hors écran, là où la palette d'AVANT le lot
   tenait sans défilement horizontal. */
.gc-react-palette-withtext.gc-react-palette-full{max-height:none;overflow:visible;max-width:min(340px,100%)}
/* La liste de mentions et le ➤ reprennent LEURS styles : `.gc-react-palette
   button` (une classe + un type) bat `.gc-mention-dd button` et `.gc-rp-send`
   (une classe), et la palette est plus bas dans le fichier. Sans ces trois
   règles, les lignes du menu @ s'affichaient en 16 px serrés au lieu de 13 px
   aérés — sans rapport avec la MÊME liste dans le composeur juste en dessous —
   et grossissaient de 15 % au survol, tout comme le ➤ désactivé. */
.gc-react-palette .gc-mention-dd button{font-size:13px;padding:7px 10px;border-radius:8px}
.gc-react-palette .gc-mention-dd button:hover{transform:none;background:rgba(168,134,63,.12)}
.gc-react-palette .gc-rp-send{font-size:15px}
.gc-react-palette .gc-rp-send:hover{transform:none}
.gc-rp-text{position:relative;display:flex;flex-direction:column;gap:4px}
.gc-rp-row{display:flex;align-items:center;gap:6px}
.gc-rp-input{flex:1;min-width:120px;font-family:inherit;font-size:13px;color:inherit;background:none;
    border:1px solid rgba(40,34,24,.22);border-radius:99px;padding:4px 10px}
.gc-rp-input:focus{outline:none;border-color:#A8863F}
.gc-rp-count{font-size:11px;min-width:2.5ch;text-align:right;opacity:.6;font-variant-numeric:tabular-nums;color:inherit}
.gc-rp-count-over{color:#C0392B;opacity:1;font-weight:700}
.gc-rp-send{border:none;background:none;cursor:pointer;font-size:15px;padding:2px 4px;border-radius:6px;color:#A8863F}
.gc-rp-send:disabled{opacity:.35;cursor:default}
/* La liste de mentions s'ouvre VERS LE BAS : vers le haut elle recouvrirait
   la rangée d'emojis et sortirait du fil sur un commentaire de tête. */
.gc-rp-dd{bottom:auto;top:calc(100% + 4px);max-height:180px;overflow-y:auto}
.gc-rp-dd button.gc-rp-dd-sel{background:rgba(168,134,63,.18)}
.gc-rp-err{font-size:11.5px;line-height:1.35;color:#C0392B}
.gc-rp-busy{opacity:.6;pointer-events:none}
body[data-gtheme="dark"] .gc-rp-input{border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .gc-rp-input:focus{border-color:#D9BC77}
body[data-gtheme="dark"] .gc-rp-send{color:#D9BC77}
body[data-gtheme="dark"] .gc-rp-count-over,body[data-gtheme="dark"] .gc-rp-err{color:#F1948A}
body[data-gtheme="dark"] .gc-rp-dd button.gc-rp-dd-sel{background:rgba(221,203,164,.18)}
.gc-attachzone{border:1px dashed rgba(168,134,63,.4);border-radius:10px;padding:10px 12px}
.gc-attachzone.gc-dropping{border-color:#A8863F;background:rgba(168,134,63,.06)}
.gc-tb-label{font-size:12px;font-weight:600}
body[data-gtheme="dark"] .gc-attachzone{border-color:rgba(221,203,164,.3)}

/* ---------- LEVIER DE MIGRATION (panneau Gestion) ---------- */
.migration-lever-box{max-width:640px}
.migration-hint{font-size:13px;color:#777;line-height:1.5}
.migration-switch{display:flex;gap:0;border:2px solid var(--chanv-fibre);border-radius:14px;
    overflow:hidden;margin:14px 0 20px;width:fit-content}
.migration-engine{border:none;background:none;cursor:pointer;font-family:inherit;
    font-size:16px;font-weight:700;padding:14px 28px;color:#888;transition:all .2s}
.migration-engine.active{background:var(--chanv-terre);color:#fff}
.migration-sub{margin:18px 0 8px;font-size:13.5px}
.migration-sub small{font-weight:400;opacity:.6}
.migration-overrides{display:flex;flex-direction:column;gap:8px}
.migration-override-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:8px 12px;background:var(--chanv-fibre);border-radius:10px;font-size:13.5px}
.mo-select{padding:6px 10px;border-radius:8px;border:1px solid rgba(0,0,0,.15);font-size:12.5px}
.migration-actions{display:flex;align-items:center;gap:12px;margin-top:16px}
.migration-status{font-size:13px;color:#777}
.migration-history{display:flex;flex-direction:column;gap:5px;font-size:12px;max-height:180px;overflow-y:auto}
.mig-hist-row code{font-size:10.5px;opacity:.7}
body[data-gtheme="dark"] .migration-switch{border-color:rgba(221,203,164,.2)}
body[data-gtheme="dark"] .migration-engine.active{background:rgba(221,203,164,.85);color:#211e19}
body[data-gtheme="dark"] .migration-override-row{background:rgba(221,203,164,.08)}
body[data-gtheme="dark"] .migration-hint,
body[data-gtheme="dark"] .migration-status{color:rgba(255,255,255,.55)}
body[data-gtheme="dark"] .mo-select{background:#2b2823;color:rgba(255,255,255,.85);border-color:rgba(221,203,164,.2)}

/* ---------- LECLAUDIFIER + articles custom (éditrice) ---------- */
.lc-card-add-article {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; min-height: 220px; cursor: pointer;
    border: 2px dashed rgba(40, 34, 24, 0.25); border-radius: 12px;
    background: rgba(40, 34, 24, 0.03); color: #6b6459;
    font-family: inherit; font-size: 15px; font-weight: 700;
    transition: all 0.2s ease;
}
.lc-card-add-article:hover { border-color: #E3000B; color: #E3000B; background: rgba(227, 0, 11, 0.04); }
.lc-add-plus { font-size: 30px; }
.lc-custom-color-row { display: flex; gap: 10px; margin: 4px 0 14px; }
.lc-color-swatch {
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    border: 3px solid transparent; padding: 0; transition: transform 0.15s;
}
.lc-color-swatch:hover { transform: scale(1.1); }
.lc-color-swatch.active { border-color: #1a1a1a; box-shadow: 0 0 0 2px #fff inset; }
.lc-btn-delete-article { margin-left: 10px; color: #b3402f; border-color: #b3402f; }
.lc-leclaudifier-panel { border-color: #e8d9b8; background: linear-gradient(135deg, #fffcf4 0%, #faf3e0 100%); }
.lc-leclaudifier-panel .lc-ai-panel-title { color: #8a6d1f; }

/* Overlays de comparaison / d'intégration */
.lc-compare-overlay {
    /* AU-DESSUS de tout LECLAUDE (popups à 10000) : la modale d'intégration
       apparaissait DERRIÈRE l'éditeur — l'éditrice ne la voyait jamais. */
    position: fixed; inset: 0; z-index: 10050;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 12, 8, 0.6); padding: 18px;
}
.lc-compare-box {
    background: #fff; color: #1a1a1a; border-radius: 14px;
    width: min(1100px, 96vw); max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}
.lc-compare-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); font-size: 15px;
}
.lc-compare-close { border: none; background: none; cursor: pointer; font-size: 16px; padding: 4px 8px; }
.lc-compare-cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    overflow-y: auto; flex: 1;
}
.lc-compare-col { padding: 16px 18px; min-width: 0; }
.lc-compare-col + .lc-compare-col { border-left: 1px solid rgba(0, 0, 0, 0.08); background: #fffcf4; }
.lc-compare-col-head {
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    color: #8a6d1f; margin-bottom: 10px;
}
.lc-compare-title { font-size: 20px; margin: 0 0 6px; }
.lc-compare-subtitle { font-size: 14px; color: #666; margin: 0 0 12px; }
.lc-compare-actions {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 12px 18px; border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.lc-integrate-box { width: min(560px, 96vw); }
.lc-integrate-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.lc-integrate-opt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; line-height: 1.45; }
.lc-integrate-opt input { margin-top: 3px; width: 16px; height: 16px; }
.lc-integrate-opt em { color: #b3402f; font-size: 12.5px; font-style: normal; }
.lc-integrate-opt-off { opacity: 0.5; cursor: default; }
.lc-integrate-status { font-size: 13px; color: #666; min-height: 18px; }
@media (max-width: 720px) {
    .lc-compare-cols { grid-template-columns: 1fr; }
    .lc-compare-col + .lc-compare-col { border-left: none; border-top: 2px solid #e8d9b8; }
}
/* Dark mode (coquille du hub) */
body[data-gtheme="dark"] .lc-compare-box { background: #211e19; color: rgba(255,255,255,.88); }
body[data-gtheme="dark"] .lc-compare-head,
body[data-gtheme="dark"] .lc-compare-actions { border-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .lc-compare-col + .lc-compare-col { border-color: rgba(221,203,164,.14); background: rgba(221,203,164,.06); }
body[data-gtheme="dark"] .lc-compare-subtitle,
body[data-gtheme="dark"] .lc-integrate-status { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .lc-compare-close { color: rgba(255,255,255,.6); }
body[data-gtheme="dark"] .lc-card-add-article { border-color: rgba(221,203,164,.3); background: rgba(221,203,164,.05); color: rgba(255,255,255,.6); }

/* ---------- ASSISTANT IA (Mot de la semaine) ---------- */
.lc-ai-panel {
    margin: 18px 0;
    padding: 16px;
    border: 1px solid #e3ddf5;
    border-radius: 10px;
    background: linear-gradient(135deg, #faf9ff 0%, #f4f1fc 100%);
}
.lc-ai-panel-title {
    font-size: 14px;
    font-weight: 800;
    color: #5e35b1;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.lc-ai-panel-hint {
    font-size: 12px;
    color: #777;
    margin: 0 0 10px;
    line-height: 1.4;
}
.lc-ai-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d9d2ef;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    color: #1a1a1a;
    background: #fff;
    resize: vertical;
    outline: none;
}
.lc-ai-input:focus { border-color: #5e35b1; }
.lc-ai-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.lc-ai-btn {
    border: 1px solid #d9d2ef;
    background: #fff;
    color: #4a3f6b;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.lc-ai-btn:hover:not(:disabled) { background: #ede9fa; border-color: #5e35b1; }
.lc-ai-btn:disabled { opacity: 0.5; cursor: wait; }
.lc-ai-btn-primary {
    background: #5e35b1;
    border-color: #5e35b1;
    color: #fff;
}
.lc-ai-btn-primary:hover:not(:disabled) { background: #4a2a8f; }
.lc-ai-btn-undo { border-style: dashed; color: #888; }
.lc-ai-status {
    font-size: 12px;
    color: #5e35b1;
    margin-top: 8px;
    min-height: 16px;
}
.lc-editor-content:focus { border-color: #E3000B; }
.lc-editor-content h3 { font-size: 18px; font-weight: 800; margin: 20px 0 8px; }
.lc-editor-content h4 { font-size: 15px; font-weight: 700; margin: 16px 0 6px; }
.lc-editor-content blockquote {
    border-left: 3px solid #E3000B;
    padding: 8px 16px;
    margin: 12px 0;
    color: #555;
    font-style: italic;
    background: #fafafa;
    border-radius: 0 4px 4px 0;
}
.lc-editor-content ul, .lc-editor-content ol { padding-left: 24px; margin: 8px 0; }
.lc-editor-content li { margin-bottom: 4px; }
.lc-editor-content hr { border: none; border-top: 1px solid #e0e0e0; margin: 16px 0; }
.lc-editor-content img {
    max-width: 100%;
    border-radius: 6px;
    margin: 8px 0;
    cursor: default;
}

/* ── Inline images in articles ── */
.lc-inline-img {
    margin: 20px 0;
    text-align: center;
}
.lc-inline-img img {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform .2s, box-shadow .2s;
}
.lc-inline-img img:hover { transform: scale(1.01); box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
.lc-inline-img figcaption {
    font-size: 12px;
    color: #888;
    margin-top: 8px;
    font-style: italic;
}

/* ── Vidéo inline (corps d'article, depuis Studio Chanv) ── */
.lc-inline-video {
    margin: 20px 0;
    text-align: center;
}
.lc-inline-video video {
    width: 100%;
    max-width: 100%;
    max-height: 480px;
    border-radius: 8px;
    background: #000;
    display: inline-block;
    vertical-align: top;
}
.lc-inline-video.lc-img-left { text-align: left; }
.lc-inline-video.lc-img-center { text-align: center; }
.lc-inline-video.lc-img-right { text-align: right; }
.lc-inline-video.lc-img-sm video { max-width: 40%; }
.lc-inline-video.lc-img-md video { max-width: 60%; }
.lc-inline-video.lc-img-lg video { max-width: 80%; }
.lc-inline-video.lc-img-full video { max-width: 100%; }
.lc-inline-video.lc-img-selected { outline: 2px solid #E3000B; outline-offset: 2px; border-radius: 8px; }

/* Badge ▶ sur une tuile VIDÉO du picker Studio */
.gsp-asset { position: relative; }
.gsp-asset-video {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    pointer-events: none;
}

/* ── Inline image toolbar (editor) ── */
.lc-img-toolbar {
    position: absolute;
    display: flex;
    gap: 3px;
    padding: 5px 6px;
    background: #222;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 20;
    transform: translateX(-50%);
    animation: lc-fadeIn .15s ease;
}
.lc-img-toolbar::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #222;
}
.lc-img-tb-btn {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #ccc;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .12s;
}
.lc-img-tb-btn:hover { background: #444; color: #fff; }
.lc-img-tb-btn.active { background: #E3000B; color: #fff; border-color: #E3000B; }
.lc-img-tb-sep { width: 1px; background: #444; margin: 2px 3px; align-self: stretch; }
.lc-img-tb-btn.danger:hover { background: #c00; color: #fff; }
/* Selected image highlight */
.lc-editor-content figure.lc-img-selected {
    outline: 2px solid #E3000B;
    outline-offset: 3px;
    border-radius: 8px;
}
/* Alignment classes */
.lc-inline-img.lc-img-left { text-align: left; }

/* ── Habillage : gauche/droite FLOTTENT la figure entière (image + légende) —
   le texte de l'article coule autour puis revient dessous. S'applique dans
   l'ÉDITEUR et dans le RENDU publié (mêmes classes dans body_html). ── */
figure.lc-inline-img.lc-img-left  { float: left;  margin: 6px 20px 10px 0; clear: left; }
figure.lc-inline-img.lc-img-right { float: right; margin: 6px 0 10px 20px; clear: right; }
/* En float, la largeur vient de la FIGURE (une figure flottée « pleine
   largeur » n'aurait aucun sens → 45 % par défaut) ; l'img la remplit. */
figure.lc-inline-img.lc-img-left, figure.lc-inline-img.lc-img-right { width: 45%; }
figure.lc-inline-img.lc-img-left.lc-img-sm,  figure.lc-inline-img.lc-img-right.lc-img-sm  { width: 33%; }
figure.lc-inline-img.lc-img-left.lc-img-md,  figure.lc-inline-img.lc-img-right.lc-img-md  { width: 50%; }
figure.lc-inline-img.lc-img-left.lc-img-lg,  figure.lc-inline-img.lc-img-right.lc-img-lg  { width: 60%; }
figure.lc-inline-img.lc-img-left img, figure.lc-inline-img.lc-img-right img { max-width: 100% !important; width: 100%; }
/* Redimensionner ne doit JAMAIS rogner (retour Sarah-Jane) : en habillage ou en
   taille S/M/L, l'image garde ses PROPORTIONS entières — le max-height:400 +
   object-fit:cover de base coupait le haut/bas des images hautes réduites. */
figure.lc-inline-img.lc-img-left img, figure.lc-inline-img.lc-img-right img,
.lc-inline-img.lc-img-sm img, .lc-inline-img.lc-img-md img, .lc-inline-img.lc-img-lg img {
    height: auto !important;
    max-height: none !important;
    object-fit: initial !important;
}
@media (max-width: 640px) {
    figure.lc-inline-img.lc-img-left, figure.lc-inline-img.lc-img-right { float: none; width: 100%; margin: 8px 0; }
}
.lc-inline-img.lc-img-center { text-align: center; }
.lc-inline-img.lc-img-right { text-align: right; }
/* Size classes */
.lc-inline-img.lc-img-sm img { max-width: 33%; }
.lc-inline-img.lc-img-md img { max-width: 50%; }
.lc-inline-img.lc-img-lg img { max-width: 75%; }
.lc-inline-img.lc-img-full img { max-width: 100%; }

/* ── Data tables in articles ── */
.lc-art-body table.lc-data-table,
.lc-editor-content table.lc-data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 14px;
    line-height: 1.5;
}
.lc-data-table thead {
    background: #f5f5f0;
}
.lc-data-table th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #888;
    padding: 10px 14px;
    border-bottom: 2px solid #e0e0e0;
    white-space: nowrap;
}
.lc-data-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    color: #333;
}
.lc-data-table tbody tr:last-child td {
    border-bottom: none;
}
.lc-data-table tbody tr:hover {
    background: #fafaf5;
}
@media (max-width: 768px) {
    .lc-data-table { font-size: 12px; }
    .lc-data-table th,
    .lc-data-table td { padding: 8px 10px; }
}
@media (max-width: 480px) {
    .lc-art-body table.lc-data-table,
    .lc-editor-content table.lc-data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .lc-data-table { font-size: 11px; }
}

/* ── "Le mot de" — Invitation Banner ── */
.lc-mot-de-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    margin: 0 0 4px;
    background: linear-gradient(135deg, #f5f0eb 0%, #ede7e0 100%);
    border-left: 4px solid #E3000B;
    font-size: 14px;
    color: #333;
    animation: lc-fadeIn .3s ease;
}
.lc-mot-de-banner-icon {
    font-size: 22px;
    flex-shrink: 0;
}
.lc-mot-de-banner-btn {
    margin-left: auto;
    flex-shrink: 0;
    padding: 8px 18px;
    background: #E3000B;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.lc-mot-de-banner-btn:hover { background: #b0000a; }
.lc-mot-de-banner-btn-edit {
    background: #555;
}
.lc-mot-de-banner-btn-edit:hover { background: #333; }

/* ==================== COMMENTAIRES ==================== */
.lc-comments {
    margin-top: 48px;
    border-top: 2px solid #1a1a1a;
    padding-top: 24px;
}
.lc-comments-heading {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin: 0 0 18px;
}
.lc-comment-composer {
    background: #fafaf5;
    border: 1px solid #e8e8e0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 26px;
}
.lc-comment-name-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
}
.lc-comment-name-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
}
.lc-comment-write-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.lc-comment-textarea {
    flex: 1;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    background: #fff;
    box-sizing: border-box;
}
.lc-comment-submit-row {
    text-align: right;
    margin-top: 10px;
}
.lc-comment-submit {
    background: #E3000B;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.lc-comment-submit:disabled { opacity: 0.6; cursor: default; }
.lc-comment {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
}
.lc-comment-reply {
    margin-left: 46px;
    border-bottom: none;
    padding-top: 4px;
}
.lc-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lc-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lc-comment-avatar-initials {
    background: #e8e2d3;
    color: #6b5f48;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.lc-comment-content { flex: 1; min-width: 0; }
.lc-comment-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.lc-comment-author { font-size: 13.5px; font-weight: 800; }
.lc-comment-guest-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #999;
    background: #f0ede4;
    border-radius: 6px;
    padding: 1px 7px;
}
.lc-comment-date { font-size: 11px; color: #999; }
.lc-comment-body {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.lc-comment-actions { margin-top: 6px; display: flex; gap: 14px; }
.lc-comment-action {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    color: #888;
    cursor: pointer;
}
.lc-comment-action:hover { color: #1a1a1a; }
.lc-comment-delete:hover { color: #E3000B; }
.lc-comment-reply-box { margin-top: 10px; display: flex; gap: 10px; align-items: flex-start; }
.lc-comment-reply-box .lc-comment-textarea { min-height: 44px; }
.lc-comments-empty { color: #999; font-size: 14px; font-style: italic; }
@media (max-width: 768px) {
    .lc-comment-reply { margin-left: 24px; }
    .lc-comment-composer { padding: 10px 12px; }
}

/* ── "Le mot de" — Card in grid ── */
/* Mot de l'employé — intégré en OUVERTURE de l'édito (voir viewLeclaudeHero) */
.lc-edito-mot-de {
    background: #fffdf6;
    border-left: 3px solid #E3000B;
    padding: 26px 30px;
    margin: 0 0 34px;
}
.lc-edito-mot-de-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #E3000B;
    margin-bottom: 10px;
}
.lc-edito-mot-de-title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 16px;
    line-height: 1.25;
}
.lc-edito-mot-de img { max-width: 100%; height: auto; }
/* Photo de l'article : flottée en haut à droite, proportion originale plafonnée en hauteur */
.lc-edito-mot-de-photo {
    float: right;
    width: auto !important;
    height: auto;
    max-width: 42% !important;
    max-height: 320px;
    margin: 4px 0 16px 24px;
    border-radius: 6px;
}
.lc-edito-mot-de-photo-placeholder {
    float: right;
    width: 38%;
    aspect-ratio: 4 / 3;
    margin: 4px 0 16px 24px;
    border: 2px dashed #d8cfba;
    border-radius: 6px;
    background: #faf6ec;
    color: #a9997a;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
}
.lc-mot-de-photo-editable { cursor: pointer; }
.lc-mot-de-photo-editable:hover { outline: 3px solid rgba(227, 0, 11, 0.4); outline-offset: 2px; }
@media (max-width: 768px) {
    .lc-edito-mot-de-photo,
    .lc-edito-mot-de-photo-placeholder {
        float: none;
        display: block;
        max-width: 100% !important;
        width: auto;
        margin: 0 auto 16px;
    }
}
/* Zone photo de l'éditeur invité */
.lc-mot-de-photo-zone {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.lc-mot-de-photo-preview {
    max-width: 180px;
    max-height: 120px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}
.lc-edito-mot-de-signature {
    font-style: italic;
    color: #666;
    margin: 18px 0 0;
}
.lc-edito-mot-de-sep {
    border: none;
    border-top: 2px solid #1a1a1a;
    width: 90px;
    margin: 0 auto 36px;
}

.lc-mot-de-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 32px;
    margin: 0;
    background: #fffdf6;
    color: #1a1a1a;
    border-top: 3px solid #E3000B;
    border-bottom: 1px solid #e8e2d3;
    cursor: pointer;
    transition: background .2s;
}
.lc-mot-de-card:hover {
    background: #fbf5e8;
}
.lc-mot-de-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #E3000B;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
}
.lc-mot-de-content {
    flex: 1;
    min-width: 0;
}
.lc-mot-de-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #E3000B;
    margin-bottom: 4px;
}
.lc-mot-de-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 6px;
    line-height: 1.2;
}
.lc-mot-de-excerpt {
    font-size: 13px;
    font-style: italic;
    color: #777;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── "Le mot de" — Editor (Writing form) ── */
.lc-mot-de-editor-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 32px 80px;
}
.lc-mot-de-editor-header {
    margin-bottom: 32px;
}
.lc-mot-de-editor-title {
    font-size: 28px;
    font-weight: 900;
    color: #1a1a1a;
    margin: 16px 0 8px;
}
.lc-mot-de-editor-sub {
    font-size: 15px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.lc-editor-upload-zone {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.lc-editor-preview-img {
    max-width: 300px;
    max-height: 200px;
    border-radius: 6px;
    object-fit: cover;
}
.lc-editor-file-input { display: none; }
.lc-edit-section-btn {
    margin-top: 32px;
    padding: 12px 24px;
    background: #fef3cd;
    border: 2px solid #ffc107;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    /* Le SEUL bouton de l'app à porter un fond clair EN DUR dans les deux
       thèmes. Il comptait sur le noir système faute de `color` — or ce repli
       disparaît en sombre depuis le 12/09 (voir `:where(… button)` en tête de
       fichier), et il aurait alors hérité d'une encre claire sur son jaune
       pâle. On lui pose son encre : c'est de toute façon ce qu'il aurait dû
       déclarer, un fond choisi appelle une couleur choisie. */
    color: var(--chanv-terre, #282828);
}
.lc-edit-section-btn:hover { background: #ffc107; }

/* ---------- TIROIR ADMIN ----------
   Remplace la boîte « Administration LECLAUDE » qui flottait en permanence
   au-dessus du bas du bulletin (elle recouvrait « Voir les éditions
   précédentes » — ticket x8dAZ). Patron repris de .gnotif-drawer, le tiroir
   des notifications, qui est le modèle le mieux argumenté de la maison.

   z-index 120 : la valeur du tiroir des notifications. Elle suffit ICI parce
   que le tiroir est enfant de .leclaude-view (z-index 1000) et ne concourt donc
   qu'avec le mobilier de LECLAUDE — bandeau éditeur 60, ancien panneau 65. */
.lc-adrawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 119;
    background: rgba(20, 17, 12, .34);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.lc-adrawer-scrim.hidden { display: none; }

.lc-adrawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 120;
    width: min(432px, 92vw);
    background: #fff;
    border-left: 1px solid #e0e0e0;
    box-shadow: -24px 0 60px -30px rgba(0,0,0,.4);
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
/* visibility retardée d'exactement la durée de la glissade : le tiroir sort de
   l'ordre de tabulation UNE FOIS fermé, sans que l'animation soit coupée.
   `display: none` est réservé au voile — il tuerait la transition. */
.lc-adrawer.hidden {
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .3s, visibility 0s .3s;
}
@media (prefers-reduced-motion: reduce) { .lc-adrawer { transition: none; } }

/* La réserve d'encoche est portée par l'EN-TÊTE, pas par le panneau : le tiroir
   doit continuer de peindre sous la barre d'état, c'est son CONTENU qui
   descend. Hors PWA l'inset vaut 0, donc pas de media query. */
.lc-adrawer-head {
    padding: calc(18px + env(safe-area-inset-top)) 18px 0;
    flex-shrink: 0;
}
.lc-adrawer-head-row { display: flex; align-items: flex-start; gap: 10px; }
.lc-adrawer-head h2 {
    margin: 0; flex: 1; line-height: 1.1;
    font-size: 25px; font-weight: 800; letter-spacing: -.015em; color: #1a1a1a;
}
.lc-adrawer-x {
    border: 1px solid #e0e0e0; background: #f7f7f5; border-radius: 11px;
    color: #666; cursor: pointer; display: grid; place-items: center;
    width: 42px; height: 42px; padding: 0; flex: none;
}
.lc-adrawer-x svg { width: 17px; height: 17px; }
.lc-adrawer-x:hover { color: #1a1a1a; border-color: #bbb; }
.lc-adrawer-sub { margin: 6px 0 0; font-size: 13px; color: #777; }

/* Réserve gestuelle en BAS : le tiroir descend à bottom:0 (LECLAUDE recouvre la
   tabbar, il n'y a rien en dessous à préserver), c'est donc au fil défilant de
   la porter — un seul niveau, comme partout ailleurs. */
.lc-adrawer-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
}
.lc-adrawer-bloc { margin-top: 22px; border-top: 1px solid #eee; padding-top: 16px; }
.lc-adrawer-bloc:first-child, .lc-adrawer-bascule { margin-top: 0; border-top: 0; padding-top: 0; }
.lc-adrawer-h5 {
    font-size: 13px; font-weight: 700; letter-spacing: .5px;
    color: #555; margin: 0 0 10px;
}
.lc-adrawer-bloc.hidden { display: none; }

/* Bascule brouillon ⇄ publié : l'action principale du tiroir. */
.lc-adrawer-act {
    display: block; width: 100%; text-align: left;
    padding: 14px 16px; margin-bottom: 8px;
    border: 2px solid #1a1a1a; background: none; color: #1a1a1a;
    border-radius: 10px; cursor: pointer;
    font-size: 14px; font-weight: 700; letter-spacing: .3px;
    transition: all .2s;
}
.lc-adrawer-act:hover { background: #1a1a1a; color: #fff; }
.lc-adrawer-act small { display: block; font-weight: 500; letter-spacing: 0; opacity: .65; margin-top: 3px; }
.lc-adrawer-danger .lc-adrawer-act { border-color: #c0000a; color: #c0000a; }
.lc-adrawer-danger .lc-adrawer-act:hover { background: #c0000a; color: #fff; }
.lc-editor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
.lc-no-editors { color: #999; font-size: 13px; }
.lc-add-editor {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.lc-add-editor .lc-input { flex: 1; }

/* ---------- DRAG & DROP ---------- */
.lc-droppable {
    position: relative;
    transition: border-color .2s;
}
.lc-drag-over {
    border: 3px dashed #E3000B !important;
    opacity: 0.7;
}

/* ---------- SUBMISSIONS ---------- */
.lc-submission-card {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}
.lc-submission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.lc-submission-date { font-size: 12px; color: #999; }
.lc-submission-text {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 12px;
}
.lc-submission-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.lc-submission-actions .lc-input {
    width: auto;
    padding: 6px 10px;
    font-size: 12px;
}
.lc-submissions-empty {
    text-align: center;
    color: #999;
    font-size: 16px;
    padding: 60px 0;
}

/* ---------- ARCHIVES ---------- */
.lc-archive-card {
    padding: 16px 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lc-archive-card:hover {
    background: #f5f5f0;
    border-color: #E3000B;
}
.lc-archive-card h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}
.lc-archive-dates {
    font-size: 12px;
    color: #888;
}

/* ---------- RESPONSIVE ---------- */

/* ── Tablette / paysage ── */
@media (max-width: 1024px) {
    .lc-layout { grid-template-columns: 220px 1fr; }
    .lc-hero { min-height: 480px; }
    .lc-hero-title { font-size: 42px; }
    .lc-hero-subtitle { font-size: 15px; }
    /* Contenu du carré rouge centré (LE/CLAUDE reste empilé, aligné à gauche dans son bloc) */
    .lc-logo-block { padding: 16px; gap: 10px; align-items: center; }
    .lc-logo-text { font-size: 34px; -webkit-text-stroke: 1.5px #fff; }
    .lc-chanvre-col .lc-card { min-height: 300px; }
    .lc-card { height: 280px; }
    .lc-card-full { height: 320px; }
    .lc-art-title { font-size: 34px; }
    .lc-art-hero-overlay { padding: 40px 32px 32px; }
    .lc-art-body-wrap { padding: 36px 24px 60px; }
    .lc-studio-modal { width: min(94vw, 840px); }
}

/* ── Mobile / Petit tablet ── */
@media (max-width: 768px) {
    /* Topbar compact */
    .lc-topbar {
        grid-template-columns: auto 1fr auto;
        padding: env(safe-area-inset-top) 10px 0;
        height: calc(46px + env(safe-area-inset-top));
        gap: 6px;
    }
    .lc-topbar-brand {
        font-size: 12px;
        letter-spacing: 1.5px;
    }
    .lc-topbar-back { font-size: 16px; padding: 4px 6px; }
    .lc-topbar-btn { width: 30px; height: 30px; }
    .lc-topbar-btn svg { width: 15px; height: 15px; }
    .lc-lang-switch { padding: 1px; gap: 1px; }
    .lc-lang-btn { padding: 3px 7px; font-size: 10px; }

    /* Layout single-column */
    .lc-layout {
        grid-template-columns: 1fr;
    }

    /* Sidebar → en-tête : logo LE/CLAUDE empilé à gauche (70%),
       bloc date/édition à droite (30%), comme la maquette desktop */
    .lc-sidebar {
        display: grid;
        grid-template-columns: 7fr 3fr;
        align-items: stretch;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        overflow: visible;
    }
    .lc-sidebar::after { display: none; } /* Hide watermark on mobile */
    .lc-sidebar-footer { display: none; }
    .lc-chanvre-col { display: none; } /* la carte chanvre rejoint le flux principal */

    .lc-logo-block {
        aspect-ratio: auto;
        padding: 18px 16px;
        align-items: flex-start;
        text-align: left;
        gap: 8px;
        justify-content: center;
    }
    .lc-logo-text { font-size: 34px; letter-spacing: 0.5px; -webkit-text-stroke: 1.5px #fff; }
    .lc-logo-subtitle { font-size: 7px; letter-spacing: 2px; align-self: flex-start; text-align: left; }
    .lc-sidebar-meta {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 10px 12px;
        border-bottom: none;
        border-left: 1px solid #eee;
    }
    .lc-edition-number { font-size: 12px; }
    .lc-date { font-size: 10px; letter-spacing: 1px; margin-bottom: 0; }
    .lc-edition-label { font-size: 7px; }
    .lc-sidebar-section { padding: 10px 16px; }
    .lc-sidebar-heading { font-size: 11px; margin: 0 0 10px; cursor: pointer; position: relative; }
    .lc-sidebar-heading::after {
        content: '▾';
        position: absolute; right: 0; top: 50%; transform: translateY(-50%);
        font-size: 14px; color: #999; transition: transform 0.2s;
    }
    .lc-sidebar-heading.lc-collapsed::after { transform: translateY(-50%) rotate(-90deg); }
    .lc-sidebar-content.lc-hidden { display: none; }

    /* Grid single-column */
    .lc-grid {
        grid-template-columns: 1fr;
    }

    /* Hero compact — height:auto + padding haut : le titre de la Une ne doit
       jamais être coupé sous la barre « Actualités Chanv » */
    .lc-hero {
        min-height: 440px;
        height: auto;
    }
    .lc-hero-title { font-size: 34px; max-width: 100%; }
    .lc-hero-subtitle { font-size: 14px; max-width: 100%; }
    .lc-hero-overlay { padding: 76px 16px 20px; }
    .lc-hero-cta { padding: 8px 16px; font-size: 11px; }

    /* Cards compact */
    .lc-card { height: auto; }
    .lc-card-img-wrap { height: 160px; }
    .lc-card-info { padding: 12px; }
    .lc-card-title { font-size: 15px; }
    .lc-card-excerpt { font-size: 12px; }

    /* Side layout → column on mobile */
    .lc-card-body.lc-card-side { flex-direction: column; }
    .lc-card-side .lc-card-img-wrap { width: 100%; height: 160px; }
    .lc-card-side .lc-card-text { width: 100%; }

    /* Overlay : tous les enfants sont en absolu — sans hauteur minimum,
       la carte s'effondre à ~0 et la section disparaît sur mobile */
    .lc-card-body.lc-card-overlay { min-height: 300px; }
    .lc-card-overlay .lc-card-img-wrap { height: 100%; }

    /* Layout picker */
    .lc-layout-picker { bottom: 4px; }

    /* Article hero mobile */
    .lc-art-hero { min-height: 260px; }
    .lc-art-hero.has-bg { min-height: 280px; }
    .lc-art-hero-overlay { padding: 24px 16px 20px; }
    .lc-art-title { font-size: 24px; max-width: 100%; letter-spacing: 0; }
    .lc-art-subtitle { font-size: 14px; max-width: 100%; }
    .lc-art-category-tag { font-size: 9px; padding: 3px 8px; }

    /* Article body mobile */
    .lc-art-body-wrap { padding: 24px 16px 60px; }
    .lc-art-body { font-size: 15px; line-height: 1.75; }
    .lc-art-body p:first-child { font-size: 16px; }
    .lc-art-body h1 { font-size: 22px; }
    .lc-art-body h2 { font-size: 18px; }
    .lc-art-body h3 { font-size: 16px; }

    /* Editor banner mobile */
    .lc-editor-banner {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 12px;
        gap: 8px;
    }
    .lc-editor-badge { font-size: 10px; text-align: center; }
    .lc-editor-info { font-size: 11px; }
    .lc-editor-actions {
        flex-wrap: wrap;
        gap: 6px;
    }
    .lc-editor-btn { padding: 6px 10px; font-size: 11px; }

    /* Editor toolbar scroll on mobile */
    .lc-editor-toolbar {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 6px 8px;
    }
    .lc-editor-toolbar::-webkit-scrollbar { display: none; }
    .lc-tb-btn { flex-shrink: 0; padding: 4px 8px; font-size: 12px; min-width: 28px; }
    .lc-editor-content { min-height: 200px; padding: 12px; font-size: 14px; }

    /* Tiroir admin plein écran : 432 px sur un téléphone de 375, ce n'est plus
       un tiroir. Contrairement au tiroir des notifications, il descend jusqu'en
       bas — LECLAUDE recouvre la tabbar, il n'y a rien à laisser atteignable
       en dessous. */
    .lc-adrawer { width: 100%; border-left: 0; }
    .lc-adrawer-head h2 { font-size: 21px; }

    /* Article content (old) */
    .lc-article-content { padding: 16px 12px 60px; }

    /* Studio picker fullscreen */
    .lc-studio-modal {
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        height: 100vh;
    }
    .lc-studio-projects {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .lc-studio-assets {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 6px;
    }
    .lc-studio-body { padding: 12px; }
    .lc-studio-header { padding: 12px 14px; }

    /* Inline image toolbar */
    .lc-inline-img-toolbar {
        transform: scale(0.9);
    }

    /* Archives */
    .lc-archive-card { padding: 10px; }

    /* Le mot de — mobile */
    .lc-mot-de-banner { flex-wrap: wrap; padding: 12px 14px; font-size: 13px; }
    .lc-mot-de-banner-btn { margin-left: 0; width: 100%; text-align: center; margin-top: 8px; }
    .lc-mot-de-card { padding: 16px; gap: 14px; }
    .lc-mot-de-avatar { width: 44px; height: 44px; font-size: 16px; }
    .lc-mot-de-title { font-size: 15px; }
    .lc-mot-de-editor-wrap { padding: 24px 16px 60px; }
    .lc-mot-de-editor-title { font-size: 22px; }
}

/* ── Petit mobile ── */
@media (max-width: 480px) {
    .lc-topbar-brand { font-size: 10px; letter-spacing: 1px; }
    .lc-topbar { height: calc(42px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0; }
    .lc-lang-btn { padding: 2px 5px; font-size: 9px; }

    .lc-logo-text { font-size: 20px; letter-spacing: 1px; }
    .lc-logo-subtitle { font-size: 7px; }
    .lc-logo-block { padding: 18px 12px 14px; }

    .lc-hero { min-height: 180px; }
    .lc-hero-title { font-size: 18px; }
    .lc-hero-subtitle { font-size: 12px; }

    .lc-art-hero { min-height: 200px; }
    .lc-art-title { font-size: 20px; }
    .lc-art-subtitle { font-size: 13px; }
    .lc-art-body-wrap { padding: 16px 12px 60px; }
    .lc-art-body { font-size: 14px; }
    .lc-art-body p:first-child { font-size: 15px; }

    .lc-card-img-wrap { height: 140px; }
    .lc-card-info { padding: 10px; }
    .lc-card-title { font-size: 14px; }

    .lc-editor-banner { padding: 8px 10px; }
    .lc-editor-btn { padding: 5px 8px; font-size: 10px; }

    .lc-studio-projects { grid-template-columns: 1fr; }
    .lc-studio-assets { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}

/* ==================== STUDIO CHANV PICKER ==================== */
.lc-studio-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lc-fadeIn .2s ease;
}
@keyframes lc-fadeIn { from { opacity: 0; } to { opacity: 1; } }

.lc-studio-modal {
    background: #1e1e1e;
    border-radius: 16px;
    width: min(90vw, 840px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    border: 1px solid #333;
    overflow: hidden;
}
.lc-studio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #333;
}
.lc-studio-header h3 {
    margin: 0;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}
.lc-studio-close {
    background: none;
    border: none;
    color: #888;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all .15s;
}
.lc-studio-close:hover { color: #fff; background: #333; }

.lc-studio-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.lc-studio-back {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 0;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .15s;
}
.lc-studio-back:hover { color: #fff; }

.lc-studio-projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.lc-studio-project-card {
    background: #2a2a2a;
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    border: 1px solid #3a3a3a;
    transition: all .2s;
}
.lc-studio-project-card:hover {
    border-color: #667eea;
    background: #2e2e3e;
    transform: translateY(-2px);
}
.lc-studio-project-card h4 {
    margin: 0 0 6px;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
}
.lc-studio-project-card span {
    font-size: 12px;
    color: #888;
}

.lc-studio-assets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.lc-studio-asset {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .2s;
}
.lc-studio-asset:hover {
    border-color: #667eea;
    transform: scale(1.03);
}
.lc-studio-asset img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lc-studio-asset-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #fff;
    font-size: 11px;
    padding: 16px 6px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-studio-loading {
    text-align: center;
    color: #888;
    padding: 40px;
    font-size: 14px;
}
.lc-studio-empty {
    text-align: center;
    color: #666;
    padding: 40px;
    font-size: 14px;
}

.lc-studio-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #333;
}
.lc-studio-upload-btn {
    background: #667eea;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all .15s;
    white-space: nowrap;
}
.lc-studio-upload-btn:hover { background: #5a6fd6; }

/* ── Image Loading Overlay ── */
.lc-image-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: all;
}
.lc-image-loading-overlay.visible { opacity: 1; }

.lc-image-loading-box {
    background: #fff;
    border-radius: 16px;
    padding: 40px 48px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.lc-image-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #eee;
    border-top-color: #E3000B;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: lc-spin 0.8s linear infinite;
}
@keyframes lc-spin { to { transform: rotate(360deg); } }

.lc-image-loading-text {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
}
.lc-image-loading-sub {
    font-size: 13px;
    color: #888;
}

/* ═══════════ CHAT : PICKER EMOJI / GIF ═══════════ */
/* Desktop : bulle AU-DESSUS de la barre de saisie (order:-1 dans le flex-column),
   comme avant. Sur mobile (≤768) elle repasse SOUS l'input (voir plus bas). */
.chat-picker{order:-1;max-height:260px;overflow-y:auto;background:var(--chanv-blanc);
    border:1px solid rgba(40,34,24,.12);border-radius:14px;margin:0 0 8px;padding:10px;
    box-shadow:0 8px 24px rgba(40,34,24,.12)}
@media (max-width:768px){
    /* Mobile : le panneau prend la place du clavier, SOUS la barre de saisie */
    .chat-picker{order:0;margin:6px 0 0;max-height:min(46vh,300px)}
}
.chat-picker-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    color:rgba(40,38,34,.5);margin:8px 4px 4px}
.chat-picker-cat:first-child{margin-top:0}
.chat-emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:2px}
.chat-emoji{border:none;background:none;font-size:20px;padding:4px;border-radius:8px;cursor:pointer;line-height:1.2}
.chat-emoji:hover{background:rgba(168,134,63,.15)}
.chat-gif-search{width:100%;border:1px solid rgba(40,34,24,.15);border-radius:10px;
    padding:8px 12px;font-size:13px;margin-bottom:8px;background:#FBF9F4}
.chat-gif-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px}
.chat-gif-item{width:100%;height:90px;object-fit:cover;border-radius:10px;cursor:pointer;
    transition:transform .12s ease,box-shadow .12s ease}
.chat-gif-item:hover{transform:scale(1.04);box-shadow:0 4px 12px rgba(40,34,24,.25)}
.chat-gif-btn{font-size:10.5px;font-weight:800;letter-spacing:.04em}
.chat-att-gif{max-width:260px;max-height:220px;border-radius:12px;display:block}
.chat-gif-credit{font-size:10px;color:rgba(40,38,34,.4);text-align:right;margin-top:6px}

/* =====================================================================
   MODE SOMBRE — surcharges body[data-gtheme="dark"]
   Palette shell : fond #201d19, panneaux #2b2823 / #332f28,
   texte rgba(255,255,255,.92/.62/.40), lignes rgba(221,203,164,.14),
   accent or #DDCBA4, ombres rgba(0,0,0,.3).
   Uniquement des surcharges — les règles claires restent intactes.
   L'ancienne UI standalone (main-header, dropdown avatar, chatbot flottant,
   login/loader) est masquée sous body.shell-on : volontairement ignorée.
   ===================================================================== */

/* ---- Grille Apps (tuiles, catégories, notices) ---- */
body[data-gtheme="dark"] .app-tile {
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
    color: rgba(255,255,255,.92);
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
body[data-gtheme="dark"] .app-tile:hover {
    border-color: rgba(221,203,164,.35);
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
body[data-gtheme="dark"] .app-desc { color: rgba(255,255,255,.62); }
body[data-gtheme="dark"] .app-icon-image { background: #332f28; }
body[data-gtheme="dark"] .app-icon-image::after {
    background: linear-gradient(to bottom, transparent, #2b2823);
}
body[data-gtheme="dark"] .category-header {
    color: rgba(255,255,255,.92);
    border-bottom-color: rgba(221,203,164,.28);
}
body[data-gtheme="dark"] .restricted-notice {
    background: #2b2823;
    border-color: rgba(221,203,164,.25);
}
body[data-gtheme="dark"] .restricted-notice h3 { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .restricted-notice p { color: rgba(255,255,255,.62); }

/* ---- Modales & formulaires partagés ---- */
body[data-gtheme="dark"] .modal-content {
    background: #2b2823;
    color: rgba(255,255,255,.85);
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
body[data-gtheme="dark"] .modal-content label { color: rgba(255,255,255,.62); }
body[data-gtheme="dark"] .modal-content input,
body[data-gtheme="dark"] .modal-content select,
body[data-gtheme="dark"] .modal-content textarea {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .modal-content input::placeholder,
body[data-gtheme="dark"] .modal-content textarea::placeholder { color: rgba(255,255,255,.40); }
body[data-gtheme="dark"] .modal-content input:focus,
body[data-gtheme="dark"] .modal-content textarea:focus { border-color: rgba(221,203,164,.45); }
body[data-gtheme="dark"] .close-modal { color: rgba(255,255,255,.5); }
/* Paramètres utilisateur (Gestion → Utilisateurs et Rôles) : les noms codaient
   var(--chanv-terre) en dur → noir sur modale sombre, illisible. */
body[data-gtheme="dark"] .settings-app-name { color: rgba(255,255,255,.88); }
body[data-gtheme="dark"] .settings-app-icon { background: rgba(221,203,164,.12); }
body[data-gtheme="dark"] .settings-app-row { border-bottom-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .settings-tabs { background: rgba(221,203,164,.1); }
body[data-gtheme="dark"] .settings-tab { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .settings-tab:hover { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .settings-tab.active { background: rgba(221,203,164,.85); color: #211e19; }
body[data-gtheme="dark"] .settings-section-hint { color: rgba(255,255,255,.5); }
body[data-gtheme="dark"] .settings-skill-row { background: rgba(221,203,164,.08); }
body[data-gtheme="dark"] .settings-skill-name { color: rgba(255,255,255,.88); }
body[data-gtheme="dark"] .settings-skill-desc { color: rgba(255,255,255,.55); }
/* En-tête du profil : le fond cream (--chanv-fibre) est fixe → en dark, le nom
   passait en blanc sur clair. On teinte l'en-tête en sombre pour rester cohérent
   avec la modale et garder le nom lisible. */
body[data-gtheme="dark"] .settings-user-header { background: rgba(221,203,164,.09); }
body[data-gtheme="dark"] .settings-user-info h3 { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .settings-user-info p { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .toggle-label { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .form-hint { color: rgba(255,255,255,.40); }
body[data-gtheme="dark"] .admin-tabs { border-bottom-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .tab-btn { color: rgba(255,255,255,.5); }
body[data-gtheme="dark"] .tab-btn.active {
    color: rgba(255,255,255,.92);
    border-bottom-color: #DDCBA4;
}

/* ---- Tables & boutons d'administration (Gestion) ---- */
body[data-gtheme="dark"] .admin-table-wrapper {
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .admin-table th {
    background: #332f28;
    color: rgba(255,255,255,.5);
}
body[data-gtheme="dark"] .admin-table td { border-bottom-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .user-name { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .user-avatar { background: #332f28; }
body[data-gtheme="dark"] .role-select {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .btn-settings,
body[data-gtheme="dark"] .btn-icon,
body[data-gtheme="dark"] .btn-action {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .btn-settings:hover,
body[data-gtheme="dark"] .btn-icon:hover,
body[data-gtheme="dark"] .btn-action:hover {
    background: rgba(221,203,164,.13);
    border-color: rgba(221,203,164,.3);
}
body[data-gtheme="dark"] .btn-icon-danger:hover {
    background: rgba(204,107,90,.2);
    border-color: rgba(204,107,90,.45);
}
body[data-gtheme="dark"] .skill-tool-row { background: #332f28; }
body[data-gtheme="dark"] .skill-tool-name code {
    background: rgba(221,203,164,.15);
    color: #DDCBA4;
}
body[data-gtheme="dark"] .skill-tool-desc { color: rgba(255,255,255,.62); }
body[data-gtheme="dark"] .skill-tools-readonly summary { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .access-badge.public { background: rgba(44,122,123,.25); color: #7EDCE2; }
body[data-gtheme="dark"] .access-badge.restreint { background: rgba(197,48,48,.2); color: #FCA5A5; }

/* ---- Emoji picker (formulaires & composer) ---- */
body[data-gtheme="dark"] .emoji-picker-btn {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
}
body[data-gtheme="dark"] .emoji-picker-btn:hover { background: rgba(221,203,164,.13); }
body[data-gtheme="dark"] .emoji-picker-dropdown {
    background: #2b2823;
    border-color: rgba(221,203,164,.16);
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
body[data-gtheme="dark"] .emoji-picker-item:hover { background: rgba(221,203,164,.13); }

/* ---- Badges feedback & bannières ---- */
body[data-gtheme="dark"] .basecamp-banner[data-level="info"] { background: rgba(59,130,246,.16); color: #93C5FD; }
body[data-gtheme="dark"] .basecamp-banner[data-level="warn"] { background: rgba(245,158,11,.16); color: #FCD34D; }
body[data-gtheme="dark"] .fb-status-pending { background: rgba(245,158,11,.16); color: #FCD34D; }
body[data-gtheme="dark"] .fb-status-error { background: rgba(220,38,38,.18); color: #FCA5A5; }
body[data-gtheme="dark"] .fb-type-bug { background: rgba(220,38,38,.18); color: #FCA5A5; }
body[data-gtheme="dark"] .fb-type-feature { background: rgba(99,102,241,.2); color: #A5B4FC; }

/* ---- Onboarding & anniversaire ---- */
body[data-gtheme="dark"] .onboarding-card {
    background: #2b2823;
    color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .onboarding-title { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .onboarding-body { color: rgba(255,255,255,.62); }
body[data-gtheme="dark"] .onboarding-body strong { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .onboarding-image { background: #332f28; }
body[data-gtheme="dark"] .onboarding-footer { border-top-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .onboarding-dot { background: rgba(255,255,255,.2); }
body[data-gtheme="dark"] .birthday-card { background: #2b2823; }
body[data-gtheme="dark"] .birthday-title { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .birthday-message { color: rgba(255,255,255,.62); }

/* ---- Signalement de bug ---- */
body[data-gtheme="dark"] .bug-report-btn {
    background: #2b2823;
    border-color: rgba(221,203,164,.16);
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
body[data-gtheme="dark"] .bug-report-btn span { color: rgba(255,255,255,.7); }
body[data-gtheme="dark"] .bug-report-modal {
    background: #2b2823;
    color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .bug-report-header { border-bottom-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .bug-type-toggle { background: #201d19; }
body[data-gtheme="dark"] .bug-type-btn { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .bug-type-btn:hover {
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.05);
}
body[data-gtheme="dark"] .bug-type-btn.active {
    background: #332f28;
    color: rgba(255,255,255,.92);
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
body[data-gtheme="dark"] .bug-report-body label { color: rgba(255,255,255,.5); }
body[data-gtheme="dark"] .bug-report-body textarea,
body[data-gtheme="dark"] .bug-report-body input,
body[data-gtheme="dark"] .bug-report-body select {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .bug-screenshot-paste {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .bug-screenshot-paste:hover:not(:disabled) {
    background: rgba(255,255,255,.05);
}
body[data-gtheme="dark"] .bug-screenshot-hint { color: rgba(255,255,255,.5); }

/* ---- Actu / Changelog ---- */
body[data-gtheme="dark"] .changelog-card {
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
body[data-gtheme="dark"] .changelog-card:hover {
    border-color: rgba(221,203,164,.35);
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
body[data-gtheme="dark"] .changelog-card-badge {
    background: #332f28;
    color: #DDCBA4;
}
body[data-gtheme="dark"] .changelog-card-badge.custom { background: rgba(46,125,50,.25); color: #A5D6A7; }
body[data-gtheme="dark"] .changelog-card-period { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .changelog-card-preview { color: rgba(255,255,255,.62); }
body[data-gtheme="dark"] .changelog-card-stats { color: rgba(255,255,255,.40); }
body[data-gtheme="dark"] .changelog-card-footer { border-top-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .changelog-empty {
    background: #2b2823;
    border-color: rgba(221,203,164,.25);
}
body[data-gtheme="dark"] .changelog-empty h3 { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .changelog-admin-controls { border-top-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .changelog-generate-form { background: #332f28; }
body[data-gtheme="dark"] .changelog-generate-form label { color: rgba(255,255,255,.62); }
body[data-gtheme="dark"] .changelog-date-input,
body[data-gtheme="dark"] .changelog-lang-select {
    background: #2b2823;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .changelog-stat-pill {
    background: #332f28;
    color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .changelog-detail-dates { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .changelog-article {
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
    color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .changelog-article h1 { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .changelog-article h2 { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .changelog-article h3 { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .changelog-token-warning {
    background: rgba(245,158,11,.14);
    border-color: rgba(245,158,11,.35);
    color: #FCD34D;
}

/* ---- Mes tickets ---- */
body[data-gtheme="dark"] .mytickets-title { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .mytickets-filter {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.7);
}
body[data-gtheme="dark"] .mytickets-filter:hover {
    border-color: rgba(221,203,164,.4);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .mytickets-filter.active {
    background: #DDCBA4;
    color: #201d19;
    border-color: #DDCBA4;
}
body[data-gtheme="dark"] .mytickets-loading,
body[data-gtheme="dark"] .mytickets-empty {
    background: #2b2823;
    color: rgba(255,255,255,.5);
}
body[data-gtheme="dark"] .mt-card {
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .mt-card:hover {
    border-color: rgba(221,203,164,.4);
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
body[data-gtheme="dark"] .mt-card-message { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .mt-card-machine { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .mt-card-bclink { color: #DDCBA4; }
body[data-gtheme="dark"] .mt-badge-feature { background: rgba(245,158,11,.16); color: #FCD34D; }
body[data-gtheme="dark"] .mt-badge-bug { background: rgba(220,38,38,.18); color: #FCA5A5; }
body[data-gtheme="dark"] .mt-badge-support { background: rgba(99,102,241,.2); color: #A5B4FC; }
body[data-gtheme="dark"] .mt-badge-open { background: rgba(16,185,129,.16); color: #6EE7B7; }
body[data-gtheme="dark"] .mt-badge-resolved { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
body[data-gtheme="dark"] .mt-detail { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .mt-detail-title { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .mt-detail-meta {
    background: #332f28;
    color: rgba(255,255,255,.7);
}
body[data-gtheme="dark"] .mt-detail-meta a { color: #DDCBA4; }
body[data-gtheme="dark"] .mt-detail-message { background: #332f28; }
body[data-gtheme="dark"] .mt-cadrage { background: rgba(224,164,88,.14); }
body[data-gtheme="dark"] .mt-cadrage-title { color: #E8C288; }
body[data-gtheme="dark"] .mt-cadrage-status,
body[data-gtheme="dark"] .mt-cadrage-meta { color: #DBA96A; }
body[data-gtheme="dark"] .mt-cadrage-link { color: #E8C288; }
body[data-gtheme="dark"] .mt-comments-title { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .mt-comment { background: #332f28; }
body[data-gtheme="dark"] .mt-comment-author { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .mt-comment-text { color: rgba(255,255,255,.75); }
body[data-gtheme="dark"] .mt-add-comment textarea {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .mt-resolved-note {
    background: #332f28;
    color: rgba(255,255,255,.6);
}

/* ---- Drive ACL (tab Agent IA de Gestion) ---- */
body[data-gtheme="dark"] .drive-acl-table-wrapper {
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .drive-acl-table thead th {
    background: #332f28;
    color: rgba(255,255,255,.7);
    border-bottom-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .drive-acl-row td { border-bottom-color: rgba(255,255,255,.06); }
body[data-gtheme="dark"] .drive-acl-row:hover { background: rgba(221,203,164,.08); }
body[data-gtheme="dark"] .drive-acl-name { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .drive-acl-tag.group { background: rgba(221,203,164,.15); color: #DDCBA4; }
body[data-gtheme="dark"] .drive-acl-tag.email { background: rgba(96,165,250,.16); color: #93C5FD; }

/* ---- Vue Plan (bâtiment + capteurs) ---- */
body[data-gtheme="dark"] .plan-view {
    background: #2b2823;
    box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
body[data-gtheme="dark"] .plan-tabs {
    background: #201d19;
    border-bottom-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .plan-tab { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .plan-tab:hover {
    color: rgba(255,255,255,.85);
    background: rgba(221,203,164,.13);
}
body[data-gtheme="dark"] .plan-tab-active {
    color: rgba(255,255,255,.92);
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
    border-bottom-color: #2b2823;
}
body[data-gtheme="dark"] .plan-toolbar {
    background: #201d19;
    border-bottom-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .plan-btn {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .plan-btn:hover {
    background: rgba(221,203,164,.2);
    border-color: rgba(221,203,164,.4);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .plan-btn-primary {
    background: #DDCBA4;
    border-color: #DDCBA4;
    color: #201d19;
}
body[data-gtheme="dark"] .plan-btn-primary:hover { background: #c2ac7c; }
body[data-gtheme="dark"] .plan-status {
    color: rgba(255,255,255,.55);
    border-bottom-color: rgba(255,255,255,.06);
}
/* Statuts pastel → translucides lisibles sur sombre */
body[data-gtheme="dark"] .plan-status-warn { color: #E8C288; background: rgba(224,164,88,.14); }
body[data-gtheme="dark"] .plan-status-err { color: #F1A9A0; background: rgba(204,107,90,.16); }
body[data-gtheme="dark"] .plan-stage {
    background:
        linear-gradient(45deg, #26231e 25%, transparent 25%),
        linear-gradient(-45deg, #26231e 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #26231e 75%),
        linear-gradient(-45deg, transparent 75%, #26231e 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, 10px 0px;
    background-color: #201d19;
}
body[data-gtheme="dark"] .plan-marker-bubble {
    background: #332f28;
    color: rgba(255,255,255,.85);
    border-color: rgba(221,203,164,.2);
}
body[data-gtheme="dark"] .plan-marker-bubble::after { border-top-color: #332f28; }
body[data-gtheme="dark"] .plan-marker-name { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .plan-marker-time { color: rgba(255,255,255,.5); }
body[data-gtheme="dark"] .plan-tray {
    background: rgba(43,40,35,.97);
    border-color: rgba(221,203,164,.2);
    box-shadow: 0 4px 20px rgba(0,0,0,.45);
}
body[data-gtheme="dark"] .plan-tray-title { color: rgba(255,255,255,.62); }
body[data-gtheme="dark"] .plan-tray-item { background: #332f28; }
body[data-gtheme="dark"] .plan-tray-item:hover { background: rgba(221,203,164,.22); }
body[data-gtheme="dark"] .plan-tray-name { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .plan-tray-temp { color: rgba(255,255,255,.62); }

/* ---- Messages (chat employés) ---- */
body[data-gtheme="dark"] .btn-chat,
body[data-gtheme="dark"] .btn-tasks {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .btn-chat:hover,
body[data-gtheme="dark"] .btn-tasks:hover { background: rgba(221,203,164,.2); }
body[data-gtheme="dark"] .chat-view { background: #201d19; }
body[data-gtheme="dark"] .chat-sidebar {
    background: #2b2823;
    border-right-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .chat-sidebar-actions { border-bottom-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .chat-conv-item { border-bottom-color: rgba(255,255,255,.05); }
body[data-gtheme="dark"] .chat-conv-item:hover { background: #332f28; }
body[data-gtheme="dark"] .chat-conv-active { background: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .chat-conv-active:hover { background: rgba(221,203,164,.18); }
body[data-gtheme="dark"] .chat-conv-name { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .chat-conv-unread .chat-conv-name { color: rgba(255,255,255,.95); }
body[data-gtheme="dark"] .chat-conv-preview { color: rgba(255,255,255,.5); }
body[data-gtheme="dark"] .chat-conv-unread .chat-conv-preview { color: rgba(255,255,255,.75); }
/* Pendant sombre du fond de non-lu (voir le commentaire l. 5787). Sur fond
   #2b2823 l'or #A8863F disparaît : on prend le beige, comme le reste du thème. */
body[data-gtheme="dark"] .chat-conv-item.chat-conv-unread { background: rgba(221,203,164,.15); box-shadow: inset 4px 0 var(--chanv-beige); }
body[data-gtheme="dark"] .chat-conv-item.chat-conv-unread:hover { background: rgba(221,203,164,.22); }
body[data-gtheme="dark"] .chat-pane { background: #2b2823; }
body[data-gtheme="dark"] .chat-pane-header { border-bottom-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .chat-pane-name { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .chat-messages { background: #201d19; }
body[data-gtheme="dark"] .chat-day-sep { color: rgba(255,255,255,.40); }
body[data-gtheme="dark"] .chat-day-sep::before,
body[data-gtheme="dark"] .chat-day-sep::after { background: rgba(255,255,255,.1); }
body[data-gtheme="dark"] .chat-msg-author { color: rgba(255,255,255,.85); }
/* L'ENCRE PAR DÉFAUT DE LA BULLE — la cause, pas le symptôme.
   `body` pose `color: var(--text-main)` (#282828) et le thème sombre ne
   redéfinit JAMAIS --text-main (même constat que pour `.wswnw-wrap`). Tout ce
   qui ne redéclare pas sa couleur reste donc écrit en quasi-noir.
   `.chat-msg-content` s'en sort : il repose la sienne juste en dessous. Mais la
   bulle en contient BIEN D'AUTRES à côté de lui (chat.js:2071) —
   `${quoteHtml}${_callHtml || contentHtml}${gifHtml}${attHtml}${taskCardHtml}` —
   et ceux-là héritaient du noir : bulle d'appel (« Appel terminé · 3 min »,
   « Appel en cours »), transcription d'un vocal, carte de tâche partagée, replis
   vidéo, boutons `color:inherit` (.chat-call-tr, .chat-genmedia-btn). Leurs
   règles sombres n'habillaient que le FOND et la BORDURE — l'encre était
   oubliée à chaque fois. Sur rgba(221,203,164,.08) au-dessus de #201d19 :
   ~1,1:1. Illisible. Seul « Appel manqué » échappait au défaut, parce qu'il
   déclare sa propre couleur.
   Une couleur héritée sur la bulle répare la FAMILLE ENTIÈRE, celle d'aujourd'hui
   et celle de demain, plutôt que N règles à rattraper une par une (même choix
   que `:where(… button){color:inherit}` en tête de fichier pour les boutons
   nus). L'héritage étant toujours plus faible qu'une
   déclaration directe, tout ce qui pose déjà sa teinte continue de gagner :
   .chat-msg-content et sa variante `own`, la bulle Gandalf (#C7D2FE), la
   citation, .chat-att-file, « Appel manqué ». Rien ne change pour eux.
   Ticket es01rvOlfZ5tm0bajx92 (T. Matteucci, 21/09, capture à l'appui). */
body[data-gtheme="dark"] .chat-msg-bubble { color: rgba(255,255,255,.88); }
body[data-gtheme="dark"] .chat-msg-content {
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
    color: rgba(255,255,255,.88);
}
body[data-gtheme="dark"] .chat-msg-own .chat-msg-content {
    background: #443e33;
    border-color: #443e33;
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .chat-msg-bot .chat-msg-content {
    background: rgba(99,102,241,.12);
    border-color: rgba(99,102,241,.3);
    color: #C7D2FE;
}
body[data-gtheme="dark"] .chat-reaction { background: #332f28; border-color: rgba(221,203,164,.16); }
body[data-gtheme="dark"] .chat-reaction span { color: rgba(255,255,255,.6); }
body[data-gtheme="dark"] .chat-reaction:hover { background: #3a352c; }
body[data-gtheme="dark"] .chat-reaction-mine { background: #4a4130; border-color: var(--chanv-or,#A8863F); }
body[data-gtheme="dark"] .chat-reaction-mine span { color: #DDCBA4; }
body[data-gtheme="dark"] .chat-react-palette { background: #2b2823; border-color: rgba(221,203,164,.18); }
body[data-gtheme="dark"] .chat-react-choice:hover { background: #3a352c; }
body[data-gtheme="dark"] .chat-typing-txt { color: rgba(255,255,255,.5); }
body[data-gtheme="dark"] .chat-composer {
    background: #2b2823;
    border-top-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .chat-composer textarea {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .chat-composer textarea::placeholder { color: rgba(255,255,255,.40); }
body[data-gtheme="dark"] .chat-composer textarea:focus { border-color: rgba(221,203,164,.45); }
body[data-gtheme="dark"] .chat-tool-btn {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
}
body[data-gtheme="dark"] .chat-tool-btn:hover {
    background: rgba(221,203,164,.13);
    border-color: rgba(221,203,164,.3);
}
body[data-gtheme="dark"] .chat-attach-preview {
    background: #332f28;
    border-color: rgba(221,203,164,.25);
}
body[data-gtheme="dark"] .chat-att-img { background: #332f28; }
body[data-gtheme="dark"] .chat-att-file {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .chat-att-file:hover {
    background: rgba(221,203,164,.13);
    border-color: rgba(221,203,164,.4);
}
body[data-gtheme="dark"] .chat-pane.chat-dropping::after {
    background: rgba(32,29,25,.92);
    border-color: #DDCBA4;
    color: #DDCBA4;
}
/* Modale nouvelle conversation */
body[data-gtheme="dark"] .chat-type-toggle { background: #201d19; }
body[data-gtheme="dark"] .chat-type-btn { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .chat-type-btn.active {
    background: #332f28;
    color: rgba(255,255,255,.92);
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
body[data-gtheme="dark"] .chat-users-list { border-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .chat-user-item { border-bottom-color: rgba(255,255,255,.05); }
body[data-gtheme="dark"] .chat-user-item:hover { background: #332f28; }
body[data-gtheme="dark"] .chat-user-name { color: rgba(255,255,255,.85); }

/* ---- Pickers emoji / GIF du chat ---- */
body[data-gtheme="dark"] .chat-picker {
    background: #2b2823;
    border-color: rgba(221,203,164,.14);
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
body[data-gtheme="dark"] .chat-picker-cat { color: rgba(255,255,255,.40); }
body[data-gtheme="dark"] .chat-gif-search {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .chat-gif-search::placeholder { color: rgba(255,255,255,.40); }
body[data-gtheme="dark"] .chat-gif-credit { color: rgba(255,255,255,.35); }

/* ---- Vue Tâches ---- */
body[data-gtheme="dark"] .tasks-view { background: #201d19; color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .tasks-toolbar {
    background: #2b2823;
    border-bottom-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .tasks-filter-group { background: #201d19; }
body[data-gtheme="dark"] .tasks-filter,
body[data-gtheme="dark"] .tasks-status { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .tasks-filter.active,
body[data-gtheme="dark"] .tasks-status.active {
    background: #332f28;
    color: rgba(255,255,255,.92);
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
body[data-gtheme="dark"] .tasks-search {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .tasks-search::placeholder { color: rgba(255,255,255,.40); }
body[data-gtheme="dark"] .tasks-status-line {
    background: #2b2823;
    border-bottom-color: rgba(255,255,255,.05);
    color: rgba(255,255,255,.40);
}
body[data-gtheme="dark"] .tasks-loading,
body[data-gtheme="dark"] .tasks-empty {
    background: #2b2823;
    color: rgba(255,255,255,.5);
}
/* Bordure gauche = couleur de priorité : on ne touche que les 3 autres côtés */
body[data-gtheme="dark"] .tasks-card {
    background: #2b2823;
    border-top-color: rgba(221,203,164,.14);
    border-right-color: rgba(221,203,164,.14);
    border-bottom-color: rgba(221,203,164,.14);
}
body[data-gtheme="dark"] .tasks-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.4); }
body[data-gtheme="dark"] .tasks-card-title { color: rgba(255,255,255,.9); }
body[data-gtheme="dark"] .tasks-card-desc { color: rgba(255,255,255,.55); }
body[data-gtheme="dark"] .tasks-meta-chip {
    background: #332f28;
    color: rgba(255,255,255,.7);
}
/* Chips statut/priorité : variantes translucides sur sombre */
body[data-gtheme="dark"] .tasks-chip-urgent { background: rgba(220,38,38,.18); color: #FCA5A5; }
body[data-gtheme="dark"] .tasks-chip-high { background: rgba(234,88,12,.18); color: #FDBA74; }
body[data-gtheme="dark"] .tasks-chip-low { background: rgba(16,185,129,.16); color: #6EE7B7; }
body[data-gtheme="dark"] .tasks-chip-normal { background: rgba(99,102,241,.2); color: #A5B4FC; }
body[data-gtheme="dark"] .tasks-chip-done { background: rgba(16,185,129,.16); color: #6EE7B7; }
body[data-gtheme="dark"] .tasks-chip-open { background: rgba(99,102,241,.2); color: #A5B4FC; }
body[data-gtheme="dark"] .tasks-chip-in_progress { background: rgba(245,158,11,.16); color: #FCD34D; }
body[data-gtheme="dark"] .tasks-chip-project { background: rgba(221,203,164,.2); color: #DDCBA4; }
body[data-gtheme="dark"] .tasks-chip-pending { background: rgba(168,134,63,.16); color: #F0D99E; border-color: rgba(221,203,164,.46); }
body[data-gtheme="dark"] .tasks-chip-basecamp { background: rgba(29,97,82,.28); color: #7FD3BE; }
body[data-gtheme="dark"] .tasks-chip-basecamp:hover { background: rgba(29,97,82,.4); }
body[data-gtheme="dark"] .tasks-due-late { background: rgba(220,38,38,.18) !important; color: #FCA5A5 !important; }
body[data-gtheme="dark"] .tasks-avatar {
    border-color: #2b2823;
    box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}
/* Détail & commentaires */
body[data-gtheme="dark"] .tasks-detail-title { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .tasks-detail-desc {
    background: #332f28;
    color: rgba(255,255,255,.75);
}
body[data-gtheme="dark"] .tasks-detail-field label { color: rgba(255,255,255,.45); }
body[data-gtheme="dark"] .tasks-detail-field > div { color: rgba(255,255,255,.75); }
body[data-gtheme="dark"] .tasks-comments-title { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .tasks-comment { background: #332f28; }
body[data-gtheme="dark"] .tasks-comment-content { color: rgba(255,255,255,.75); }
body[data-gtheme="dark"] .tasks-comment-form textarea {
    background: #332f28;
    border-color: rgba(221,203,164,.16);
    color: rgba(255,255,255,.92);
}
body[data-gtheme="dark"] .tasks-assignee-list { border-color: rgba(221,203,164,.14); }
body[data-gtheme="dark"] .tasks-user-item { border-bottom-color: rgba(255,255,255,.05); }
body[data-gtheme="dark"] .tasks-user-item:hover { background: #332f28; }
body[data-gtheme="dark"] .tasks-user-name { color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .tasks-mention {
    background: rgba(99,102,241,.2);
    color: #A5B4FC;
}
body[data-gtheme="dark"] .btn-danger {
    background: rgba(204,107,90,.16);
    color: #F1A9A0;
    border-color: rgba(204,107,90,.4);
}
body[data-gtheme="dark"] .btn-danger:hover { background: rgba(204,107,90,.3); }


/* ═══════════ CHAT : ÉDITION / SUPPRESSION + RESPONSIVE ═══════════ */
/* Ligne bulle + outils : les outils sont COLLÉS à la bulle concernée (avant :
   absolute au bord de la ligne → à l'opposé de la bulle alignée). */
.chat-msg-line{display:flex;align-items:center;gap:6px;max-width:80%}
.chat-msg-own .chat-msg-line{flex-direction:row-reverse}   /* bulle à droite, outils à sa gauche */
.chat-msg-bubble{min-width:0}
.chat-msg-tools{display:none;gap:2px;flex-shrink:0;
    background:var(--chanv-blanc);border:1px solid rgba(40,34,24,.12);border-radius:8px;
    padding:2px 4px;box-shadow:0 2px 8px rgba(40,34,24,.12);z-index:5}
/* Les outils n'apparaissent qu'au CLIC sur le message (avant : au survol → trop). */
.chat-msg.chat-msg-active .chat-msg-tools{display:inline-flex}
.chat-msg-active .chat-msg-content{outline:2px solid rgba(168,134,63,.35);outline-offset:1px}
.chat-msg-bubble{cursor:default} /* le clic ouvre les outils, mais la bulle ne doit pas SEMBLER cliquable */
.cmt-btn{border:none;background:none;cursor:pointer;font-size:13px;padding:2px 4px;border-radius:5px;line-height:1}
.cmt-btn:hover{background:rgba(168,134,63,.15)}
.chat-msg-deleted{font-style:italic;opacity:.55}
.chat-msg-edited{font-size:11px;opacity:.55;font-style:italic}
/* Traduction temporaire d'un message (perso) */
.chat-msg-trbanner{margin-top:5px;font-size:11px;opacity:.7;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.chat-msg-truntr{border:none;background:none;cursor:pointer;color:inherit;font:inherit;font-size:11px;opacity:.9;padding:0;text-decoration:underline}
.chat-msg-truntr:hover{opacity:1}
body[data-gtheme="dark"] .chat-msg-tools{background:#2b2823;border-color:rgba(221,203,164,.18)}

/* ═══════════ CHAT : CITATION / RÉPONSE ═══════════ */
/* Bloc citation dans la bulle : rappel du message d'origine, cliquable */
.chat-quote{display:flex;flex-direction:column;gap:1px;cursor:pointer;
    border-left:3px solid rgba(168,134,63,.55);border-radius:6px;
    background:rgba(40,34,24,.06);padding:4px 8px;margin-bottom:5px;max-width:100%;
    color:#33302a}   /* hors de .chat-msg-content : la couleur n'est pas héritée de la bulle */
.chat-quote:hover{background:rgba(40,34,24,.1)}
.cq-author{font-size:11px;font-weight:700;opacity:.8}
.cq-text{font-size:12px;opacity:.7;overflow:hidden;text-overflow:ellipsis;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body[data-gtheme="dark"] .chat-quote{background:rgba(221,203,164,.1);color:rgba(255,255,255,.85)}
body[data-gtheme="dark"] .chat-quote:hover{background:rgba(221,203,164,.16)}
/* Bandeau « réponse à » au-dessus du composeur */
.chat-reply-bar{display:flex;align-items:center;gap:6px;padding:6px 10px;
    border-left:3px solid rgba(168,134,63,.55);border-radius:8px;
    background:rgba(40,34,24,.06);margin-bottom:6px;font-size:12px}
.chat-reply-bar.hidden{display:none}
.crb-author{font-weight:700;flex-shrink:0}
.crb-text{opacity:.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.crb-text .gc-quote-thumb{height:20px;max-width:80px}  /* bandeau d'une ligne : la vignette ne l'épaissit pas */
body[data-gtheme="dark"] .chat-reply-bar{background:rgba(221,203,164,.08)}
body[data-gtheme="dark"] .crb-author{color:#DDCBA4} /* citation lisible en dark (était noir sur noir) */
body[data-gtheme="dark"] .crb-text{color:rgba(255,255,255,.88)}
/* Message d'origine mis en évidence après un clic sur une citation */
.chat-msg-flash .chat-msg-bubble{animation:chatQuoteFlash 1.5s ease}
@keyframes chatQuoteFlash{0%,60%{box-shadow:0 0 0 3px rgba(168,134,63,.45)}100%{box-shadow:none}}

/* ═══════════ STUDIO PICKER (composant partagé chat / IA / LECLAUDE) ═══════════ */
.gsp-overlay{position:fixed;inset:0;z-index:2300;/* > .modal-overlay (2000) : le Composeur vit dans des modales */display:flex;align-items:center;justify-content:center;
    background:rgba(15,12,8,.55);padding:16px}
.gsp-modal{background:#fff;color:#33302a;border-radius:16px;width:min(720px,94vw);
    max-height:84vh;display:flex;flex-direction:column;overflow:hidden;
    box-shadow:0 24px 80px rgba(0,0,0,.35)}
/* ≤640px la modale passe en 100dvh depuis y=0 et l'overlay perd son padding :
   le fil d'Ariane et le ✕ — seule sortie du picker — se retrouvaient sous la
   barre d'état. Réserve déclarée dans le bloc de BASE : hors PWA l'inset vaut
   0, donc rien ne bouge sur bureau, et aucune media query ne peut l'oublier. */
.gsp-header{display:flex;align-items:center;gap:8px;
    padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
    border-bottom:1px solid rgba(40,34,24,.1)}
.gsp-logo{font-size:18px;flex-shrink:0}
.gsp-crumbs{flex:1;min-width:0;display:flex;align-items:center;gap:2px;overflow-x:auto;
    scrollbar-width:none;white-space:nowrap}
.gsp-crumbs::-webkit-scrollbar{display:none}
.gsp-crumb{border:none;background:none;cursor:pointer;font-size:13.5px;font-weight:600;
    color:inherit;opacity:.6;padding:4px 6px;border-radius:6px;flex-shrink:0}
.gsp-crumb:hover{opacity:1;background:rgba(168,134,63,.12)}
.gsp-crumb-here{opacity:1;cursor:default}
.gsp-crumb-here:hover{background:none}
.gsp-crumb-sep{opacity:.35;font-size:13px;flex-shrink:0}
.gsp-icon-btn{border:none;background:none;cursor:pointer;font-size:15px;color:inherit;
    padding:4px 8px;border-radius:8px;flex-shrink:0;line-height:1}
.gsp-icon-btn:hover{background:rgba(168,134,63,.15)}
.gsp-icon-btn.hidden{display:none}
.gsp-searchrow{padding:10px 16px 0}
.gsp-search{width:100%;box-sizing:border-box;border:1px solid rgba(40,34,24,.15);
    border-radius:10px;padding:8px 12px;font-size:14px;background:rgba(40,34,24,.03);color:inherit;outline:none}
.gsp-search:focus{border-color:rgba(168,134,63,.55)}
.gsp-body{overflow-y:auto;padding:12px 16px 16px;flex:1}
.gsp-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    opacity:.5;margin:10px 2px 8px}
.gsp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.gsp-tile{border:1px solid rgba(40,34,24,.12);border-radius:12px;padding:0;overflow:hidden;
    cursor:pointer;background:none;text-align:left;color:inherit;display:flex;flex-direction:column;
    transition:transform .12s,box-shadow .12s}
.gsp-tile:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(40,34,24,.14)}
.gsp-tile-cover{aspect-ratio:4/3;background:rgba(128,128,128,.1);display:flex;
    align-items:center;justify-content:center;overflow:hidden}
.gsp-tile-cover img{width:100%;height:100%;object-fit:cover;display:block}
.gsp-tile-emoji{font-size:26px;opacity:.7}
.gsp-tile-name{padding:8px 10px 2px;font-size:12.5px;font-weight:600;overflow:hidden;
    text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gsp-tile-meta{padding:0 10px 9px;font-size:11px;opacity:.55;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
.gsp-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.gsp-asset{border:1px solid rgba(40,34,24,.12);border-radius:10px;padding:0;overflow:hidden;
    cursor:pointer;background:none;transition:transform .12s,box-shadow .12s}
.gsp-asset:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(40,34,24,.18)}
.gsp-asset img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.gsp-actionrow{margin:2px 2px 10px}
.gsp-action-btn{border:1px solid rgba(168,134,63,.45);background:rgba(168,134,63,.1);color:inherit;
    border-radius:10px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer}
.gsp-action-btn:hover{background:rgba(168,134,63,.2)}
.gsp-loading,.gsp-empty,.gsp-error{padding:26px 8px;text-align:center;font-size:13.5px;opacity:.6}
.gsp-error{color:#b3402f;opacity:1}
/* Dark mode */
body[data-gtheme="dark"] .gsp-modal{background:#211e19;color:rgba(255,255,255,.88)}
body[data-gtheme="dark"] .gsp-header{border-bottom-color:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .gsp-search{background:rgba(221,203,164,.06);border-color:rgba(221,203,164,.18)}
body[data-gtheme="dark"] .gsp-tile,
body[data-gtheme="dark"] .gsp-asset{border-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .gsp-tile:hover,
body[data-gtheme="dark"] .gsp-asset:hover{box-shadow:0 4px 14px rgba(0,0,0,.5)}
body[data-gtheme="dark"] .gsp-tile-cover{background:rgba(221,203,164,.07)}
body[data-gtheme="dark"] .gsp-crumb:hover{background:rgba(221,203,164,.12)}
body[data-gtheme="dark"] .gsp-icon-btn:hover{background:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .gsp-action-btn{background:rgba(221,203,164,.1);border-color:rgba(221,203,164,.3)}
/* Multi-sélection : état sélectionné (✓) + bandeau de sélection */
.gsp-asset{position:relative}
.gsp-asset-sel{outline:2.5px solid #A8863F;outline-offset:-2px}
.gsp-asset-check{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;
    background:#A8863F;color:#fff;font-size:12px;font-weight:800;display:none;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.gsp-asset-sel .gsp-asset-check{display:flex}
.gsp-tray{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px;
    border-top:1px solid rgba(40,34,24,.1);background:rgba(168,134,63,.06)}
.gsp-tray.hidden{display:none}
.gsp-tray-thumbs{display:flex;gap:8px;overflow-x:auto;flex:1;scrollbar-width:thin;padding:2px}
.gsp-tray-thumb{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:8px;overflow:hidden;cursor:pointer;border:1px solid rgba(40,34,24,.15)}
.gsp-tray-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gsp-tray-x{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(20,15,8,.55);color:#fff;font-size:13px;font-weight:800}
.gsp-tray-thumb:hover .gsp-tray-x{display:flex}
.gsp-tray-send{flex:0 0 auto;border:none;cursor:pointer;background:#A8863F;color:#fff;font-weight:700;border-radius:999px;padding:9px 20px;font-size:14px;white-space:nowrap}
.gsp-tray-send:hover{background:#96762f}
body[data-gtheme="dark"] .gsp-tray{border-top-color:rgba(221,203,164,.14);background:rgba(221,203,164,.05)}
body[data-gtheme="dark"] .gsp-asset-sel{outline-color:#DDCBA4}
body[data-gtheme="dark"] .gsp-asset-check{background:#DDCBA4;color:#2b2415}
body[data-gtheme="dark"] .gsp-tray-send{background:#DDCBA4;color:#2b2415}
body[data-gtheme="dark"] .gsp-tray-send:hover{background:#EBD9B4}
body[data-gtheme="dark"] .gsp-action-btn:hover{background:rgba(221,203,164,.18)}
body[data-gtheme="dark"] .gsp-error{color:#F1A9A0}
/* --- Mini Studio : cartes de marque (3 brand guides) --- */
.gsp-brands{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:6px}
.gsp-brand{position:relative;border:none;border-radius:14px;cursor:pointer;overflow:hidden;
    aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    padding:14px;transition:transform .12s ease,box-shadow .12s ease;box-shadow:0 2px 8px rgba(40,34,24,.12)}
.gsp-brand:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(40,34,24,.22)}
.gsp-brand-deco{position:absolute;left:0;right:0;bottom:0;height:4px;opacity:.9}
.gsp-brand-logo{max-width:74%;max-height:60%;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.18))}
/* Le logo se suffit à lui-même : le nom ne s'affiche QUE si le logo échoue. */
.gsp-brand-name{display:none;font-size:13.5px;font-weight:700;letter-spacing:.02em;text-align:center;opacity:.92}
.gsp-brand-noimg .gsp-brand-logo{display:none}
.gsp-brand-noimg .gsp-brand-name{display:block}
/* --- Chips (catégories / sections de marque) --- */
.gsp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.gsp-brand-tabs{position:sticky;top:0;z-index:1;padding-bottom:4px;background:inherit}
.gsp-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(40,34,24,.16);
    background:rgba(168,134,63,.07);color:inherit;cursor:pointer;border-radius:20px;
    padding:7px 13px;font-size:12.5px;font-weight:600;transition:background .12s ease,border-color .12s ease}
.gsp-chip:hover{background:rgba(168,134,63,.16)}
.gsp-chip.on{background:rgba(168,134,63,.9);border-color:rgba(168,134,63,.9);color:#2b2415}
.gsp-chip small{font-size:10.5px;font-weight:600;opacity:.55}
.gsp-chip.on small{opacity:.7}
.gsp-byproject{margin-top:16px}
.gsp-byproject .gsp-action-btn{width:100%;justify-content:center;display:flex}
/* légende sous les vignettes (recherche IA / catégorie) */
.gsp-asset{display:flex;flex-direction:column}
.gsp-asset-cap{padding:5px 7px 6px;font-size:10.5px;font-weight:500;line-height:1.25;text-align:left;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.7}
.gsp-asset-broken img{display:none}
.gsp-asset-broken::before{content:"🚫";display:flex;align-items:center;justify-content:center;aspect-ratio:1;font-size:20px;opacity:.4}
.gsp-tile-broken img{display:none}
.gsp-tile-broken::before{content:"🎬";font-size:26px;opacity:.5}
body[data-gtheme="dark"] .gsp-chip{border-color:rgba(221,203,164,.2);background:rgba(221,203,164,.08)}
body[data-gtheme="dark"] .gsp-chip:hover{background:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .gsp-chip.on{background:rgba(221,203,164,.85);border-color:rgba(221,203,164,.85);color:#221e19}
body[data-gtheme="dark"] .gsp-brand{box-shadow:0 2px 10px rgba(0,0,0,.4)}
body[data-gtheme="dark"] .gsp-brand:hover{box-shadow:0 8px 24px rgba(0,0,0,.6)}
@media (max-width:640px){
    .gsp-overlay{padding:0}
    .gsp-modal{width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
    /* Pendant du padding-top de .gsp-header : en plein écran, la dernière
       rangée de vignettes finissait sous la barre gestuelle. */
    .gsp-body{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
    .gsp-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
    .gsp-brands{gap:8px}
    .gsp-brand{aspect-ratio:1;padding:10px}
}

@media (max-width: 640px){
    /* Composeur sur UNE SEULE ligne façon Messenger : outils (repliables au focus)
       · champ (pill) · emoji · envoi. Le repli .tools-collapsed remplace les 4
       outils par la flèche › et libère toute la place au champ dès qu'on écrit. */
    .chat-composer-row{gap:6px;flex-wrap:nowrap;align-items:center}
    .chat-composer textarea{flex:1 1 auto;order:0;font-size:16px;min-height:44px;min-width:0;padding:10px 16px;border-radius:22px}
    .chat-tools-left{gap:4px}
    .chat-tool-btn{width:38px;height:38px;min-width:38px;padding:0;font-size:17px;flex:0 0 auto}
    .chat-send{width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;flex:0 0 auto;margin-left:2px}
    /* Mobile : outils au tap sur le message aussi (via .chat-msg-active) */
    .chat-msg-tools{position:static;box-shadow:none;border:none;background:none;margin-left:4px}
    .chat-msg.chat-msg-active .chat-msg-tools{display:inline-flex}
}

/* ══════════ Tâches : archivés retrouvables + terminées repliées ══════════ */
.tasks-archived-zone{margin:34px 0 10px}
.tasks-archived-toggle{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
    background:none;border:1px dashed rgba(107,90,58,.35);border-radius:10px;padding:10px 14px;
    font-size:.92rem;font-weight:600;color:#8a7a5c;cursor:pointer;transition:all .15s}
.tasks-archived-toggle:hover{border-color:#A8863F;color:#A8863F;background:rgba(168,134,63,.06)}
.tasks-archived-toggle .tat-chev{margin-left:auto;font-size:.85rem}
body[data-gtheme="dark"] .tasks-archived-toggle{color:#b8a985;border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .tasks-archived-toggle:hover{color:#E8CD8C;background:rgba(221,203,164,.07)}
/* #3 — listes masquées de MA vue (tickets A. Ryan / D. Paquette 17/08).
   Repliées, jamais perdues : chaque ligne garde son nom et son décompte pour
   qu'on reconnaisse ce qu'on a rangé avant de le rappeler. */
.tasks-hiddenlists{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.tasks-hiddenlist-row{display:flex;align-items:center;gap:10px;padding:8px 12px;
    border:1px solid rgba(107,90,58,.18);border-radius:9px;background:rgba(107,90,58,.03)}
.tasks-hiddenlist-row .tlh-name{opacity:.8}
.tasks-hiddenlist-row .tlh-count{margin-left:auto;font-size:.85rem;opacity:.7}
body[data-gtheme="dark"] .tasks-hiddenlist-row{border-color:rgba(221,203,164,.18);background:rgba(221,203,164,.04)}
.tasks-proj-grid-archived{margin-top:12px}
.tasks-proj-card-archived{opacity:.72;cursor:default;filter:saturate(.5);height:auto;min-height:96px}
.tasks-proj-card-archived:hover{transform:none;box-shadow:none}
.tpc-unarchive{margin-top:10px}
.tasks-done-fold{margin-top:10px;border-top:1px dashed rgba(107,90,58,.25);padding-top:6px}
.tasks-done-fold summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
    padding:7px 4px;font-size:.88rem;font-weight:600;color:#8a7a5c;user-select:none}
.tasks-done-fold summary::-webkit-details-marker{display:none}
.tasks-done-fold summary::before{content:'▸';font-size:.8rem;transition:transform .15s}
.tasks-done-fold[open] summary::before{transform:rotate(90deg)}
.tasks-done-fold summary:hover{color:#A8863F}
.tasks-done-fold-body{opacity:.78}
/* 📦 « Archiver les terminées » : posé au bout du repli, visible AU REPOS
   (opacité .7) et non révélé par le survol — une action cachée derrière le
   survol « ne fonctionne pas », c'est la leçon du renommage de section. */
.tasks-done-fold summary .tdf-arch{margin-left:auto;opacity:var(--tk-op-2,.7);font-size:14px;
    border:none;background:none;cursor:pointer;padding:2px 6px;border-radius:6px;color:inherit}
.tasks-done-fold summary .tdf-arch:hover{opacity:1;background:rgba(107,90,58,.14)}
body[data-gtheme="dark"] .tasks-done-fold summary .tdf-arch:hover{background:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .tasks-done-fold{border-top-color:rgba(221,203,164,.22)}
body[data-gtheme="dark"] .tasks-done-fold summary{color:#b8a985}
body[data-gtheme="dark"] .tasks-done-fold summary:hover{color:#E8CD8C}

/* Fiche tâche : échéance bien visible */
.tasks-due-big{font-weight:750;font-size:1.02rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tasks-due-big.overdue{color:#b3261e}
.tasks-due-big .tasks-due-rel{font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:999px;
    background:rgba(168,134,63,.14);color:#8a6d2f;white-space:nowrap}
.tasks-due-big.overdue .tasks-due-rel{background:rgba(179,38,30,.12);color:#b3261e}
.tasks-due-none{opacity:.55;font-style:italic}
body[data-gtheme="dark"] .tasks-due-big.overdue{color:#ff8a80}
body[data-gtheme="dark"] .tasks-due-big .tasks-due-rel{background:rgba(221,203,164,.15);color:#E8CD8C}
body[data-gtheme="dark"] .tasks-due-big.overdue .tasks-due-rel{background:rgba(255,138,128,.15);color:#ff8a80}

/* ══════════ LE HALL : accueil visuel d'un projet (cartes-outils) ══════════ */
.hall-hero{text-align:center;padding:26px 18px 20px;background:#fff;border:1px solid rgba(107,90,58,.16);
    border-radius:18px;box-shadow:0 8px 26px rgba(60,48,25,.07);margin-bottom:20px;position:relative}
.hall-ico{font-size:2.2rem;line-height:1}
.hall-name{font-size:1.55rem;font-weight:800;margin:4px 0 2px}
.hall-desc{color:#8a7a5c;font-size:.95rem;max-width:52ch;margin:0 auto}
.hall-people{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:14px;flex-wrap:wrap}
.hall-av{width:32px;height:32px;border-radius:50%;background:#6d5a3a;color:#fff;display:inline-flex;
    align-items:center;justify-content:center;font-size:.72rem;font-weight:800;cursor:pointer;border:2px solid #fff;
    box-shadow:0 1px 4px rgba(0,0,0,.18);overflow:hidden}
.hall-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.hall-av-more{background:#a8946e;cursor:default}
.hall-invite{border:1px dashed rgba(107,90,58,.4);background:none;border-radius:999px;padding:5px 14px;
    font-size:.8rem;font-weight:600;color:#8a7a5c;cursor:pointer;transition:all .15s}
.hall-invite:hover{border-color:#A8863F;color:#A8863F}
.hall-activity{margin-top:10px;font-size:.78rem;color:#a8946e;min-height:1em}
.hall-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* Journal du projet, sous les outils du hall (ticket kVzny5n) : une colonne
   qui se lit, pas une carte de plus dans la grille. */
.hall-feed{margin-top:18px}
.hall-feed:empty{display:none}
.hall-feed-head{display:flex;align-items:baseline;gap:10px;font-weight:800;font-size:.9rem;
    padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid rgba(107,90,58,.16)}
.hall-feed-actors{margin-left:auto;font-weight:600;font-size:.76rem;color:#a8946e}
.hall-feed-empty{font-size:.82rem;color:#a8946e;padding:6px 0}
.hall-feed-day{margin-top:12px}
.hall-feed-date{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:#a8946e;margin-bottom:4px}
.hall-feed-row{display:flex;align-items:baseline;gap:8px;padding:3px 0;font-size:.84rem;line-height:1.45}
.hfr-ico{flex:0 0 auto}
.hfr-h{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:.74rem;color:#a8946e}
.hfr-txt{min-width:0}
.hfr-txt a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hfr-txt a:hover{color:#A8863F}
.hfr-txt i{opacity:.7;font-style:normal}
body[data-gtheme="dark"] .hall-feed-head{border-bottom-color:rgba(221,203,164,.18)}
.hall-grid>*{min-width:0} /* un long titre de tâche ne doit jamais élargir sa carte (Studio coupé) */
@media(max-width:1000px){.hall-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hall-grid{grid-template-columns:1fr 1fr;gap:10px}}
.hall-card{background:#fff;border:1px solid rgba(107,90,58,.16);border-radius:14px;padding:14px 15px 12px;
    min-height:140px;display:flex;flex-direction:column;gap:9px;cursor:pointer;transition:transform .12s, box-shadow .12s}
.hall-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(60,48,25,.12)}
.hc-head{display:flex;align-items:center;gap:9px;font-weight:800;font-size:.98rem;
    border-bottom:1px solid rgba(107,90,58,.14);padding-bottom:9px}
.hc-ico{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
    font-size:.9rem;color:#fff;flex:none}
.hc-green{background:#2D6A24}.hc-blue{background:#155799}.hc-yellow{background:#C9A227}
.hc-cyan{background:#0E7C86}.hc-violet{background:#5E35B1}.hc-red{background:#C0392B}.hc-brown{background:#6d5a3a}
.hc-badge{margin-left:auto;background:#b3261e;color:#fff;font-size:.68rem;border-radius:999px;padding:1px 8px;font-weight:800}
/* Renommage inline de la carte Tâches (✎ visible pour les gestionnaires) */
.hc-edit{border:none;background:none;cursor:pointer;font-size:.78rem;opacity:0;padding:2px 5px;border-radius:6px;color:inherit;transition:opacity .12s}
.hall-card:hover .hc-edit{opacity:.55}
.hc-edit:hover{opacity:1;background:rgba(168,134,63,.14)}
.hc-edit-input{flex:1;min-width:0;border:1px solid rgba(168,134,63,.5);border-radius:8px;padding:4px 8px;font:inherit;font-size:.9rem;background:#fff;color:inherit;outline:none}
.hc-edit-ok,.hc-edit-cancel{border:none;cursor:pointer;border-radius:7px;padding:4px 8px;font-weight:800;font-size:.8rem}
.hc-edit-ok{background:#A8863F;color:#fff}
.hc-edit-cancel{background:rgba(40,34,24,.08);color:inherit}
body[data-gtheme="dark"] .hc-edit-input{background:#2E271E;border-color:rgba(221,203,164,.35)}
body[data-gtheme="dark"] .hc-edit-cancel{background:rgba(221,203,164,.12)}
@media (pointer:coarse){.hall-card .hc-edit{opacity:.45}} /* mobile : pas de hover */
.hc-peek{display:flex;flex-direction:column;gap:6px;font-size:.8rem;color:#6d5f49;flex:1}
.hc-row{display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hc-row>span,.hc-row>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hc-row.late{color:#b3261e;font-weight:600}
.hc-row.hc-muted{opacity:.6;font-style:italic}
.hc-row.hc-link:hover{color:#A8863F;text-decoration:underline}
.hc-dot{width:7px;height:7px;border-radius:50%;background:#2D6A24;flex:none}
.hc-dot.o{background:#C65D07}.hc-dot.r{background:#b3261e}
.hc-bar{height:5px;border-radius:4px;background:#EFE7D4;overflow:hidden}
.hc-bar i{display:block;height:100%;background:#2D6A24}
.hc-more{margin-top:auto;color:#A8863F;font-weight:700;font-size:.76rem}
body[data-gtheme="dark"] .hall-hero,body[data-gtheme="dark"] .hall-card{background:#241F19;border-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .hall-name{color:#EFE7D6}
body[data-gtheme="dark"] .hall-desc,body[data-gtheme="dark"] .hc-peek,
body[data-gtheme="dark"] .hall-hero-hint{color:#b8a985}
body[data-gtheme="dark"] .hall-av{border-color:#241F19}
body[data-gtheme="dark"] .hc-head{color:#EFE7D6;border-bottom-color:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .hc-bar{background:#2E271E}
body[data-gtheme="dark"] .hc-more{color:#D9BC77}
body[data-gtheme="dark"] .hc-row.late{color:#ff8a80}
body[data-gtheme="dark"] .hall-card:hover{box-shadow:0 10px 24px rgba(0,0,0,.4)}

/* ── Calendrier du projet ── */
.cal-head{display:flex;align-items:center;gap:10px;margin:6px 0 14px}
.cal-month{font-size:1.15rem}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{text-align:center;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8a7a5c;padding:4px 0}
.cal-cell{background:#fff;border:1px solid rgba(107,90,58,.14);border-radius:10px;min-height:92px;padding:6px;display:flex;flex-direction:column;gap:3px}
.cal-out{opacity:.45}
.cal-today{border-color:#A8863F;box-shadow:inset 0 0 0 1px #A8863F}
.cal-day{font-size:.75rem;font-weight:700;color:#8a7a5c}
.cal-today .cal-day{color:#A8863F}
.cal-task{font-size:.7rem;font-weight:600;background:rgba(45,106,36,.12);color:#2D6A24;border-radius:6px;
    padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cal-task.late{background:rgba(179,38,30,.12);color:#b3261e}
.cal-task.done{background:#EFE7D4;color:#8a7a5c;text-decoration:line-through}
.cal-more{font-size:.68rem;color:#8a7a5c;font-weight:700}
@media(max-width:700px){.cal-cell{min-height:64px}.cal-task{font-size:.62rem}}
body[data-gtheme="dark"] .cal-cell{background:#241F19;border-color:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .cal-day,body[data-gtheme="dark"] .cal-dow,body[data-gtheme="dark"] .cal-more{color:#b8a985}
body[data-gtheme="dark"] .cal-task{background:rgba(96,158,86,.18);color:#9fd48f}
body[data-gtheme="dark"] .cal-task.late{background:rgba(255,138,128,.16);color:#ff8a80}
body[data-gtheme="dark"] .cal-task.done{background:#2E271E;color:#8a7a5c}
body[data-gtheme="dark"] .cal-today{border-color:#D9BC77;box-shadow:inset 0 0 0 1px #D9BC77}

/* ── Ordre des cartes (⚙️ Gérer) ── */
.tasks-order-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tasks-order-chip{border:1px solid rgba(107,90,58,.3);border-radius:999px;padding:6px 14px;font-size:.82rem;
    font-weight:600;background:#fff;cursor:grab;user-select:none}
.tasks-order-chip.dragging{opacity:.4}
body[data-gtheme="dark"] .tasks-order-chip{background:#241F19;border-color:rgba(221,203,164,.3);color:#EFE7D6}

/* Cartes sous-projet du hall : de vrais espaces, avec leur couleur */
.hall-card-sub{border-top:3px solid rgba(107,90,58,.4)}
.hall-card-sub.tasks-proj-chanvre{border-top-color:rgba(45,106,36,.8)}
.hall-card-sub.tasks-proj-operations{border-top-color:rgba(21,87,153,.8)}
.hall-card-sub.tasks-proj-innovation{border-top-color:rgba(94,53,177,.8)}
.hall-card-sub.tasks-proj-culture{border-top-color:rgba(198,93,7,.8)}
.hc-sub{background:var(--chip,#EFE7D4);font-size:1.05rem}
.hall-card-new{border-style:dashed;display:flex;align-items:center;justify-content:center;min-height:140px;
    color:#8a7a5c;font-weight:700}
.hall-card-new:hover{color:#A8863F;border-color:#A8863F}
body[data-gtheme="dark"] .hall-card-new{color:#b8a985}
body[data-gtheme="dark"] .hall-card-new:hover{color:#E8CD8C;border-color:#E8CD8C}
body[data-gtheme="dark"] .hc-sub{background:#2E271E}
.hall-hero{border-top:4px solid rgba(107,90,58,.4)}
.hall-hero.tasks-proj-chanvre{border-top-color:rgba(45,106,36,.8)}
.hall-hero.tasks-proj-operations{border-top-color:rgba(21,87,153,.8)}
.hall-hero.tasks-proj-innovation{border-top-color:rgba(94,53,177,.8)}
.hall-hero.tasks-proj-culture{border-top-color:rgba(198,93,7,.8)}

/* Hero du hall : boutons Nouvelle tâche / Nouvelle liste / Nouveau classeur,
   l'aide qui les départage, et la modale « Où créer ? » */
.hall-hero-actions{margin-top:10px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
/* L'aide n'est pas décorative : sans elle, « classeur » se lisait comme « la
   façon de créer un contenant », et on obtenait un projet complet pour ranger
   trois tâches (tickets du 20 août, D. Paquette et T. Matteucci). */
.hall-hero-hint{margin-top:8px;font-size:.78rem;line-height:1.55;color:#8a7a5c;max-width:52ch;
    margin-inline:auto;text-align:center}
.tasks-scope-q{color:#8a7a5c;margin:4px 0 14px}
.tasks-scope-btns{display:flex;flex-direction:column;gap:10px}
/* Espace entre les choix (picker groupe / créer où / traduire) et « Annuler »
   — sinon le bouton d'action se colle/chevauche la dernière option. */
.tasks-scope-btns + .modal-actions{margin-top:16px}
.tasks-scope-btns .btn{width:100%}
body[data-gtheme="dark"] .tasks-scope-q{color:#b8a985}
/* Au repos, ces trois boutons étaient à `opacity:0` : la seule façon de
   découvrir qu'on peut renommer une section était de survoler sa ligne au
   pixel près. D. Paquette avait DEMANDÉ le renommage (« Est-ce qu'on pourra
   aussi le renommer, pas juste les supprimer ? », 19/08) et écrivait cinq
   jours plus tard « je ne peux pas nommer mes groupes de tâches, l'option ne
   fonctionne pas » : une option invisible ne fonctionne pas, en effet.
   On reprend les valeurs que le tactile utilisait DÉJÀ trois lignes plus bas —
   la hiérarchie ➕ / ✏️ / 🗑️ y était déjà pesée — et le survol continue de les
   porter à pleine opacité. */
/* …et ils n'avaient JAMAIS reçu leur habillage : `.tlh-add` n'est stylé que
   sous `.tasks-list-head`, or ces boutons-ci vivent dans `.tasks-list-body`.
   Ils s'affichaient donc en boutons NATIFS — cadre gris en relief de 2 px sur
   fond #efefef, au milieu d'une étiquette en petites capitales. Invisible tant
   qu'ils étaient à `opacity:0` ; les rendre visibles a mis le défaut au jour.
   Mesuré au banc (/tmp/section_banc.html) : border 2px outset, fond
   rgb(239,239,239), quand la rangée de l'en-tête est à border:none/fond
   transparent. On reprend EXACTEMENT la règle de l'en-tête. */
.tasks-group-label .tlh-add{border:none;background:none;cursor:pointer;font-size:13px;
    padding:2px 6px;border-radius:6px;line-height:1}
.tasks-group-label .tlh-add:hover{background:rgba(168,134,63,.15)}
.tgl-add,.tgl-ren,.tgl-mov,.tgl-del{margin-left:6px;transition:opacity .12s}
.tgl-add{opacity:var(--tk-op-1,.7)}.tgl-ren{opacity:var(--tk-op-3,.55)}
.tgl-mov{opacity:var(--tk-op-4,.5)}.tgl-del{opacity:var(--tk-op-5,.45)}
.tasks-group-label:hover .tgl-add,.tasks-group-label:hover .tgl-ren,
.tasks-group-label:hover .tgl-mov,.tasks-group-label:hover .tgl-del{opacity:1}
/* La hiérarchie tient au repos partout : la corbeille reste plus discrète que
   le ➕, et un appui malheureux passe de toute façon par la modale de
   confirmation ; le ✏️ se range entre les deux — il ne détruit rien, mais on
   le cherche moins souvent que le ➕. Ces valeurs étaient réservées au tactile
   (`@media(hover:none)`) tant que le repos était à zéro ; elles sont
   maintenant la règle, et le survol reste l'exception qui les porte à 1. */

/* ── Les mêmes rangs, en mode sombre ─────────────────────────────────────
   « On voit mal les icônes dans le haut quand le mode sombre est actif » —
   12/09, capture de l'en-tête « SAMEDI 12 SEPTEMBRE ».
   Une opacité n'est pas une couleur : elle rapproche l'encre du FOND, quel
   qu'il soit. Sur crème, .45 donne du gris moyen très lisible ; sur le panneau
   #26221b, la même valeur donne 3,7:1 — le rang le plus discret (🗑️) passait
   sous le seuil de 4,5:1 alors qu'il est identique en clair. C'est la leçon
   déjà écrite deux fois dans ce fichier : au-dessus, pour le titre de ces
   mêmes groupes (« un texte délavé reste illisible même en plus gros »), et
   sur --g-ink-faint (« sur fond sombre, la même opacité rend un texte bien
   plus faible »).
   On garde donc les CINQ rangs — l'ordre ➕ ✅ ✏️ 📍 🗑️ ne bouge pas — en
   remontant le plancher : le plus discret des cinq tient maintenant 5,4:1.
   Par variable, et non par une règle sombre en plus : une règle
   `body[data-gtheme="dark"] … .tgl-del` serait plus spécifique que le
   `:hover` du groupe et figerait les icônes à leur valeur de repos. */
body[data-gtheme="dark"]{
    --tk-op-1:.86;   /* ➕ créer ici          */
    --tk-op-2:.80;   /* ✅ tout valider       */
    --tk-op-3:.74;   /* ✏️ renommer           */
    --tk-op-4:.68;   /* 📍 déplacer           */
    --tk-op-5:.62;   /* 🗑️ supprimer          */
    --tk-op-grip:.75;/* ⠿ poignée de glisser  */
}

/* Renommage sur place : l'entête de section devient un champ, sans que la
   ligne change de hauteur — sinon toute la liste saute au moment du clic. */
.tasks-rensection-inline{display:inline-flex;gap:6px;align-items:center;width:100%;max-width:520px}
.tasks-rensection-inline input{flex:1;min-width:0;font:inherit;padding:2px 8px;
    border:1px solid #d8cdb5;border-radius:6px;background:#fff}
.tasks-rensection-inline .btn{padding:3px 10px;font-size:.85em}
body[data-gtheme="dark"] .tasks-rensection-inline input{background:#241f1a;border-color:#4a4036;color:#e8dfd0}

/* CRÉATION d'une section : le même mini-formulaire que le renommage ci-dessus,
   et il doit s'y RESSEMBLER — c'est le même objet qu'on nomme. Il vivait en
   style en dur dans startAddSectionInline ; il en sort parce qu'il ne se pose
   plus à la place du bouton (dans le corps, en pleine largeur) mais au bas de
   la liste, où il lui faut sa marge et son cadre pointillé pour se distinguer
   des cartes. Ticket 0JYxOEpmiR4wyTI6tgs0. */
.tasks-addsection-inline{display:flex;gap:8px;align-items:center;margin-top:4px;
    padding:8px;border:1px dashed rgba(168,134,63,.45);border-radius:9px;
    background:rgba(168,134,63,.05)}
.tasks-addsection-inline input{flex:1;min-width:0;font:inherit;padding:5px 9px;
    border:1px solid #d8cdb5;border-radius:6px;background:#fff}
.tasks-addsection-inline .btn{padding:4px 12px;font-size:.85em;white-space:nowrap}
body[data-gtheme="dark"] .tasks-addsection-inline{border-color:rgba(221,203,164,.32);background:rgba(221,203,164,.04)}
body[data-gtheme="dark"] .tasks-addsection-inline input{background:#241f1a;border-color:#4a4036;color:#e8dfd0}

/* Liste vide : sans les deux barres pleine largeur qui l'occupaient, le corps
   se réduisait à une zone de dépôt de 2 px — un en-tête posé sur une carte
   coupée. La phrase remplit le vide ET dit où sont partis les boutons. */
.tasks-list-empty-hint{margin:4px 2px;padding:10px 4px;text-align:center;
    font-size:12.5px;font-style:italic;color:#8a7c5e;opacity:.85}
body[data-gtheme="dark"] .tasks-list-empty-hint{color:rgba(255,255,255,.45)}

/* ══════════ RÉUNIONS : module natif (ex-Planificateur) ══════════ */
#reunions-view{max-width:1100px;margin:0 auto;padding:18px 20px 60px;width:100%}
.rn-toolbar{display:flex;align-items:center;gap:10px;margin:6px 0 18px;flex-wrap:wrap}
.rn-range{font-size:1.05rem}
.rn-days{display:flex;flex-direction:column;gap:16px}
.rn-day{background:#fff;border:1px solid rgba(107,90,58,.16);border-radius:14px;padding:12px 16px}
.rn-day.rn-today{border-color:#A8863F;box-shadow:inset 0 0 0 1px #A8863F}
.rn-day-head{font-weight:800;font-size:.95rem;display:flex;align-items:center;gap:8px;
    border-bottom:1px solid rgba(107,90,58,.14);padding-bottom:8px;margin-bottom:8px}
.rn-empty{color:#8a7a5c;font-style:italic;font-size:.85rem;padding:4px 0}
.rn-row{display:flex;align-items:center;gap:14px;padding:10px 8px;border-radius:10px;cursor:pointer;transition:background .12s}
.rn-row:hover{background:rgba(168,134,63,.07)}
.rn-row.rn-done{opacity:.55}
.rn-time{font-weight:800;font-size:.95rem;min-width:64px;display:flex;flex-direction:column}
.rn-time .rn-dur{font-weight:600;font-size:.7rem;color:#8a7a5c}
.rn-main{flex:1;min-width:0}
.rn-subject{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rn-detail{font-size:.8rem;color:#8a7a5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rn-avs{display:flex}
.rn-av{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-8px}
.rn-av:first-child{margin-left:0}
.rn-av-ph{background:#6d5a3a;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800}
.rn-join{white-space:nowrap}
.rn-types{display:flex;gap:8px;flex-wrap:wrap}
.rn-type{border:1px solid rgba(107,90,58,.3);border-radius:999px;padding:7px 14px;background:none;
    font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s;color:inherit}
.rn-type.on{background:#A8863F;border-color:#A8863F;color:#fff}
/* Présence (RSVP) — ticket 11FqbT3VZnCSnIkRSAOQ. Les boutons réutilisent
   .rn-type (mêmes pastilles que le sélecteur de type) ; seule la couleur de
   l'état actif change, pour que « je ne peux pas » ne s'allume pas en doré
   comme une confirmation. Couleurs posées par CLASSE, jamais en ligne — un
   style en ligne resterait clair en thème sombre (cf. bug mnuNfs). */
.rn-rsvp{margin:2px 0 4px}
.rn-rsvp-btn.on{background:#A8863F;border-color:#A8863F;color:#fff}
.rn-rsvp-btn[data-rsvp="declined"].on{background:#b3261e;border-color:#b3261e}
.rn-rsvp-btn[data-rsvp="tentative"].on{background:#8a7a5c;border-color:#8a7a5c}
.rn-rsvp-btn:disabled{opacity:.55;cursor:progress}
.rn-rsvp-hint{font-size:.8rem;opacity:.8;margin-top:2px}
.rn-rsvp-badge{font-size:.8em;opacity:.9;margin-left:2px}
/* Réunion déclinée : elle RESTE dans l'agenda (sinon impossible de se raviser
   depuis GANDALF), mais barrée et pâlie — elle ne compte plus. */
.rn-row.rn-refusee{opacity:.5}
.rn-row.rn-refusee .rn-subject{text-decoration:line-through}
.rn-form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:560px){.rn-form-grid{grid-template-columns:1fr}}
.rn-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.rn-chip{background:rgba(168,134,63,.12);border-radius:999px;padding:4px 12px;font-size:.82rem;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.rn-chip button{border:none;background:none;cursor:pointer;font-size:.75rem;opacity:.6;color:inherit}
.rn-chip button:hover{opacity:1}
.rn-chip-muted{opacity:.6;font-style:italic}
.rn-userlist{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.rn-user{text-align:left;border:1px solid rgba(107,90,58,.18);border-radius:8px;padding:7px 12px;background:none;
    cursor:pointer;font-size:.85rem;color:inherit;transition:background .12s}
.rn-user:hover{background:rgba(168,134,63,.08)}
.rn-user-mail{opacity:.5;font-size:.75rem;margin-left:6px}
.rn-meet-opt{display:flex;align-items:center;gap:9px;margin:6px 0 4px;cursor:pointer;font-size:.9rem}
/* Bug support mnuNfs (17/08) : la règle générique input{width:100%} étirait la checkbox
   et poussait son libellé à l'extrême droite — le formulaire semblait « sans texte ». */
.rn-meet-opt input[type="checkbox"]{width:auto;margin:0;flex:0 0 auto}
.rn-conflicts{background:rgba(179,38,30,.09);border-left:3px solid #b3261e;color:#b3261e;
    border-radius:8px;padding:10px 14px;font-size:.85rem;margin-top:10px}
/* Aperçu de récurrence — ticket LF0mQs3j (D. Gauthier, 24/08). La couleur passe
   par une CLASSE, jamais par un style en ligne : un gris posé en dur reste
   sombre en thème sombre, et un style en ligne bat toute règle. Ce fichier
   porte déjà la cicatrice de ce genre d'oubli — voir le rattrapage
   `body[data-gtheme="dark"] label` (bug mnuNfs) juste en dessous. */
.rn-recur-hint{font-size:.82rem;color:#6d5f49;margin:8px 0 14px;line-height:1.5}
.rn-recur-hint.rn-recur-err{color:#b3261e}
.rn-d-meta{color:#6d5f49;font-size:.92rem;margin:4px 0}
.rn-d-desc{margin:12px 0;line-height:1.55}
.rn-d-label{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a7a5c;margin:14px 0 6px}
.rn-d-attendees{display:flex;flex-wrap:wrap;gap:6px}
.rn-d-links{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
body[data-gtheme="dark"] .rn-day{background:#241F19;border-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .rn-day.rn-today{border-color:#D9BC77;box-shadow:inset 0 0 0 1px #D9BC77}
body[data-gtheme="dark"] .rn-day-head{color:#EFE7D6;border-bottom-color:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .rn-subject{color:#EFE7D6}
body[data-gtheme="dark"] .rn-time{color:#EFE7D6}
body[data-gtheme="dark"] .rn-detail,body[data-gtheme="dark"] .rn-empty,body[data-gtheme="dark"] .rn-time .rn-dur,
body[data-gtheme="dark"] .rn-d-meta,body[data-gtheme="dark"] .rn-d-label{color:#b8a985}
body[data-gtheme="dark"] .rn-av{border-color:#241F19}
body[data-gtheme="dark"] .rn-chip{background:rgba(221,203,164,.14);color:#EFE7D6}
body[data-gtheme="dark"] .rn-type{border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .rn-type.on{background:#D9BC77;border-color:#D9BC77;color:#241F19}
body[data-gtheme="dark"] .rn-user{border-color:rgba(221,203,164,.18)}
body[data-gtheme="dark"] .rn-conflicts{background:rgba(255,138,128,.1);color:#ff8a80;border-left-color:#ff8a80}
body[data-gtheme="dark"] .rn-recur-hint{color:#b8a985}
body[data-gtheme="dark"] .rn-recur-hint.rn-recur-err{color:#ff8a80}
/* Bug support mnuNfs (17/08) : les <label> génériques restaient #666 en mode sombre
   (quasi noir sur noir). Même teinte que .rn-d-label dark. */
body[data-gtheme="dark"] label{color:#b8a985}
body[data-gtheme="dark"] .rn-meet-opt{color:#EFE7D6}

/* ══════════ P3 Messages ↔ Tâches : carte de tâche + partage ══════════ */
.chat-taskcard{display:flex;align-items:center;gap:10px;margin-top:6px;padding:10px 14px;
    border:1px solid rgba(107,90,58,.25);border-left:3px solid #2D6A24;border-radius:10px;
    background:rgba(45,106,36,.06);cursor:pointer;transition:background .12s;min-width:220px}
.chat-taskcard:hover{background:rgba(45,106,36,.12)}
.ctc-ico{font-size:1.05rem;flex:none}
.ctc-main{flex:1;min-width:0;display:flex;flex-direction:column}
.ctc-title{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctc-meta{font-size:.75rem;opacity:.65}
.ctc-go{color:#A8863F;font-weight:700}
body[data-gtheme="dark"] .chat-taskcard{background:rgba(96,158,86,.1);border-color:rgba(221,203,164,.22);border-left-color:#609e56}
body[data-gtheme="dark"] .chat-taskcard:hover{background:rgba(96,158,86,.18)}
.tasks-share-list{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}
.tasks-share-row{text-align:left;border:1px solid rgba(107,90,58,.2);border-radius:10px;padding:10px 14px;
    background:none;cursor:pointer;font-size:.9rem;font-weight:600;color:inherit;transition:background .12s}
.tasks-share-row:hover{background:rgba(168,134,63,.08)}
body[data-gtheme="dark"] .tasks-share-row{border-color:rgba(221,203,164,.2)}

/* Confirmations LECLAUDE stylées (remplacent les confirm() natifs) */
.lc-confirm-warning{line-height:1.6}
.lc-confirm-danger{color:#c62828;font-weight:700}
.lc-btn-danger{background:#c62828!important;color:#fff!important;border:none!important}

/* Outils de message au SURVOL (desktop) — plus besoin de cliquer la bulle,
   indispensable pour les images/vocaux dont le clic a déjà un rôle */
@media (hover:hover){
    .chat-msg:hover .chat-msg-tools{display:inline-flex}
}
/* Vocal : bouton 📝 + transcription privée */
.chat-att-voice{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chat-transcribe-btn{flex:none}
.chat-transcript{flex-basis:100%;font-size:.85rem;font-style:italic;line-height:1.5;
    background:rgba(168,134,63,.08);border-left:3px solid #A8863F;border-radius:8px;padding:8px 12px;margin-top:4px}
.chat-transcript .ct-note{display:block;font-size:.7rem;font-style:normal;opacity:.55;margin-top:4px}
body[data-gtheme="dark"] .chat-transcript{background:rgba(221,203,164,.08);border-left-color:#D9BC77}

/* ══════════ SUPPORT IT : demandes + stats ══════════ */
#support-view{max-width:1000px;margin:0 auto;padding:18px 20px 60px;width:100%}
.sup-toolbar{display:flex;align-items:center;gap:10px;margin:6px 0 18px;flex-wrap:wrap}
.sup-filters{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.sup-filters input{flex:1;min-width:200px;padding:9px 12px;border-radius:10px;border:1px solid rgba(107,90,58,.25);background:transparent;color:inherit}
/* ── Deuxième rangée : par personne ──
   La voie dit QUAND on s'en occupe, la personne dit QUI. Deux axes, deux
   rangées, mais la MÊME puce : c'est le même geste de filtre, il doit avoir la
   même forme. L'avatar porte la reconnaissance — d'où le retrait à gauche pour
   qu'il ne flotte pas au milieu du rembourrage prévu pour du texte. */
.sup-people{margin-top:-4px}
.sup-people .tasks-proj-chip{display:inline-flex;align-items:center;gap:6px}
.sup-people .tasks-proj-chip.has-av{padding-left:5px}
.sup-people .sup-av{width:21px;height:21px}
.sup-people .sup-av-l{font-size:.64rem}
.sup-list{display:flex;flex-direction:column;gap:8px}
.sup-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid rgba(107,90,58,.16);
    border-radius:12px;padding:12px 16px;cursor:pointer;transition:transform .1s, box-shadow .1s}
.sup-row:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(60,48,25,.1)}
.sup-row.sup-done{opacity:.6}
.sup-badge{font-size:1.1rem;flex:none}
.sup-main{flex:1;min-width:0;display:flex;flex-direction:column}
.sup-msg{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── Réponse non lue SUR une demande ──
   Allumé quand une notification non lue nomme cette demande-là
   (modules/support.js, _nonLus). Le point vit DANS la ligne du sujet, pas en
   bout de rangée : c'est le sujet qu'on parcourt des yeux, et sous 860px la
   colonne de droite repasse sous le texte (ux-refresh.css) — un point posé là
   descendrait hors du champ de lecture au moment où l'écran est le plus étroit.
   Même rouge que les pastilles du rail (--gs-crit), avec un repli en dur au cas
   où la ligne serait peinte avant que le thème n'ait posé ses variables. */
.sup-dot{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;
    background:var(--gs-crit,#b3261e);vertical-align:.08em;flex:none}
.sup-row.sup-unread .sup-msg{font-weight:800}
/* ── Pastille de FILE : « il y a du neuf là-dedans, et c'est à toi » ──
   Posée à côté du compteur de volume, jamais à sa place : les deux chiffres ne
   répondent pas à la même question (combien de demandes ici / combien
   m'attendent). D'où deux objets de deux couleurs, et un seul qui crie.
   Même rouge et même gabarit que la pastille du rail (.gshell-badge), pour que
   l'œil reconnaisse le signal qu'il vient de suivre depuis la tuile du hub. */
.sup-chip-unread{display:inline-flex;align-items:center;justify-content:center;
    min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:99px;
    font-size:11px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
    background:var(--gs-crit,#b3261e);color:#fff;flex:none}
/* La puce elle-même se teinte : sur une barre de cinq, la pastille seule se
   rate quand le regard balaie les libellés et non leur bord droit. */
.sup-chip-hot{border-color:rgba(179,38,30,.38)}
.sup-chip-hot:not(.on){background:rgba(179,38,30,.07)}
/* Sélectionnée, la puce est déjà pleine : la pastille rouge sur fond foncé
   perdrait son contraste, on la repasse en blanc sur texte rouge. */
.tasks-proj-chip.on .sup-chip-unread{background:#fff;color:var(--gs-crit,#b3261e)}

/* ── LE CHEMIN ROUGE DES MENTIONS (module Projets) ──────────────────────
   « Un chemin de pastille rouge comme on possède déjà dans Support IT »
   (T. Matteucci, 25/09/2026) : MÊME rouge, MÊME gabarit que la pastille du
   rail (.gshell-badge) et que la file de Support (.sup-chip-unread), pour que
   l'œil reconnaisse à chaque étage le signal qu'il suit depuis le rail.
   Posées et retirées par tasks.js (arobasesPeindre) ; la règle est dans
   tasks-mentions.js. Jetons --gs-* seulement : le mode sombre suit seul. */
.arobase-n{display:inline-flex;align-items:center;justify-content:center;flex:none;
    min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:99px;
    font-size:11px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
    background:var(--gs-crit,#b3261e);color:#fff;vertical-align:middle}
/* Sélectionnée, une puce est déjà pleine : blanc sur rouge, comme Support. */
.tasks-proj-chip.on .arobase-n,.gest2-views button.on .arobase-n{background:#fff;color:var(--gs-crit,#b3261e)}
/* Les onglets de l'Atelier héritent d'une vieille règle `.gest2-views span`
   (opacité .58, retrait, gris) écrite pour leurs anciens libellés : la
   pastille en sortait délavée, comme éteinte — constaté au navigateur. */
nav.gest2-views span.arobase-n{opacity:1;padding:0 5px;font-size:11px;color:#fff;position:static}
/* Dans le panneau, la pastille se range AVANT le compte neutre des tâches :
   le libellé garde sa place et son ellipse. */
.trail-node .arobase-n{margin-left:auto}
.trail-node .arobase-n + .trail-n{margin-left:6px}
/* Le point d'une rangée : la chose elle-même (tâche, fil, document). */
.arobase-point{display:inline-block;flex:none;width:8px;height:8px;margin-right:7px;border-radius:50%;
    background:var(--gs-crit,#b3261e);vertical-align:.08em}
/* La bulle 💬 d'une rangée s'allume : c'est le raccourci vers le fil. Pleine
   opacité même hors survol — un chemin qui ne se montre qu'au survol n'en est
   pas un. */
.gest-discussion.arobase-chaud,.tasks-card-discussion.arobase-chaud{position:relative;opacity:1!important;
    color:var(--gs-crit,#b3261e);border-color:rgba(179,38,30,.38)}
.gest2 .gest-discussion.arobase-chaud{position:absolute}
.gest-discussion.arobase-chaud::after,.tasks-card-discussion.arobase-chaud::after{content:'';position:absolute;
    top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--gs-crit,#b3261e);
    box-shadow:0 0 0 2px var(--gs-panel,#fff)}
/* LE commentaire : liseré et voile rouges tant qu'il n'est pas lu.
   Deux classes, deux rôles :
   · `.arobase-suivi` RESTE après lecture : elle porte la transition — quand
     `.arobase-attente` part, la marque s'efface en fondu sous les yeux de qui
     lit, elle ne saute pas ;
   · `.arobase-attente` porte la couleur, et elle seule s'en va.
   Spécificité volontairement haute (id + attribut) : la fiche remet fond,
   ombre et arrondi à zéro sur `body.shell-on #tasksView .td-detail
   .tasks-comment` (tasks-desktop.css), et le téléphone sur `#tasksView
   .tasks-comment` (tasks-mobile.css) — sans ça, la marque serait posée mais
   invisible (constaté au navigateur le 25/09). */
#tasksView .tasks-comment.arobase-suivi[data-comment-id]{transition:background-color 1.4s ease,box-shadow 1.4s ease}
#tasksView .tasks-comment.arobase-suivi.arobase-attente[data-comment-id],
body.shell-on #tasksView .tasks-comment.arobase-suivi.arobase-attente[data-comment-id]{
    background:rgba(179,38,30,.07);box-shadow:inset 3px 0 0 var(--gs-crit,#b3261e)}
/* Fils À PLAT — la fiche d'une tâche sur ordinateur, tout fil sur
   téléphone : le commentaire n'y a ni fond ni retrait, le liseré toucherait
   l'avatar. Le voile déborde donc de 12 px, compensés par autant de retrait :
   le texte ne bouge pas d'un pixel, ni à l'allumage ni à l'extinction.
   Ailleurs (babillard, document), le commentaire est déjà une carte : il
   garde sa largeur, comme ses voisins. */
body.shell-on #tasksView .td-detail .tasks-comment.arobase-suivi[data-comment-id]{margin-left:-12px;margin-right:-12px;
    padding-left:12px;padding-right:12px;border-radius:10px}
@media(max-width:860px){#tasksView .tasks-comment.arobase-suivi[data-comment-id]{margin-left:-12px;margin-right:-12px;
    padding-left:12px;padding-right:12px;border-radius:10px}}
/* Téléphone (et fiches sans lien « Discussion ») : la puce qui mène au fil. */
.arobase-saut{display:inline-flex;align-items:center;gap:6px;margin:8px 0 4px;padding:5px 11px;min-height:32px;
    border:1px solid rgba(179,38,30,.38);border-radius:99px;background:rgba(179,38,30,.07);
    color:var(--gs-crit,#b3261e);font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}
.arobase-saut:hover{background:rgba(179,38,30,.12)}
@media (prefers-reduced-motion: reduce){#tasksView .tasks-comment.arobase-suivi[data-comment-id]{transition:none}}
.sup-meta{font-size:.78rem;color:#8a7a5c}
.sup-status{font-size:.72rem;font-weight:800;border-radius:999px;padding:3px 10px;background:#EFE7D4;color:#8a7a5c;white-space:nowrap}
.sup-status.on{background:rgba(179,38,30,.13);color:#b3261e}
/* ── Voies de triage : Urgent · En cours · Plus tard ──
   Deux contrôles pour deux gestes distincts :
   · .sup-tri-btn  — dans la LISTE, ranger sans ouvrir. On n'affiche que les
     deux autres voies, donc un seul appui suffit. Le libellé disparaît sous
     860px (le vrai « mobile » du projet) ; l'emoji et aria-label restent.
   · .sup-segs     — dans le DÉTAIL, un sélecteur à trois positions pleine
     largeur, segments en flex:1 : même cible au pouce qu'à la souris. */
.sup-tri-moves{display:inline-flex;gap:4px;flex:none}
.sup-tri-btn{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:.72rem;font-weight:700;
    line-height:1;padding:6px 9px;min-height:32px;border-radius:999px;cursor:pointer;white-space:nowrap;
    border:1px solid rgba(107,90,58,.22);background:transparent;color:#6b5a3a;transition:background .13s,border-color .13s}
.sup-tri-btn:hover{background:rgba(168,134,63,.14);border-color:rgba(168,134,63,.5)}
.sup-tri-btn:disabled{opacity:.45;cursor:progress}
.sup-triage{margin:0 0 12px}
.sup-segs{display:flex;border:1px solid rgba(107,90,58,.22);border-radius:12px;overflow:hidden;
    background:rgba(168,134,63,.05)}
.sup-seg{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 6px;
    min-height:42px;font:inherit;font-size:.78rem;font-weight:700;color:#6b5a3a;cursor:pointer;
    border:0;border-right:1px solid rgba(107,90,58,.16);background:transparent;white-space:nowrap}
.sup-seg:last-child{border-right:0}
.sup-seg:hover{background:rgba(168,134,63,.12)}
.sup-seg.on,.sup-seg.on:hover{background:var(--chanv-terre,#282828);color:#fff}
.sup-seg:disabled{cursor:progress;opacity:.55}
.sup-d-meta{color:#8a7a5c;font-size:.85rem;margin:4px 0 10px}
.sup-target-picker{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:8px;
    margin:0 0 12px;padding:10px 12px;border:1px solid rgba(107,90,58,.18);border-radius:10px;background:rgba(168,134,63,.05)}
.sup-target-picker label{font-size:.78rem;font-weight:700;color:#6b5a3a}
.sup-target-picker select{min-width:0;padding:8px 10px;border:1px solid rgba(107,90,58,.25);border-radius:8px;background:var(--surface,#fff);color:inherit}
@media(max-width:620px){.sup-target-picker{grid-template-columns:1fr}.sup-target-picker .btn{width:100%}}
/* ── Mobile ──
   Cet écran n'avait AUCUNE règle sous 860px : une demande tenait sur une seule
   ligne coupée à l'ellipse, et la colonne d'actions écrasait le texte. On passe
   la ligne en deux étages — le message respire sur deux lignes, les actions
   descendent dessous et deviennent atteignables au pouce. 860px est le vrai
   « mobile » du projet (shell + CRM). */
@media(max-width:860px){
    #support-view{padding:14px 12px 60px}
    .sup-row{flex-wrap:wrap;row-gap:10px;padding:12px 14px}
    .sup-msg{white-space:normal;overflow:hidden;text-overflow:clip;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    .sup-tri-moves{order:2;flex:1 1 auto}
    .sup-tri-btn{flex:1 1 0;justify-content:center;min-width:46px;min-height:38px}
    .sup-tri-lbl{display:none}
    .sup-row-right{order:3;flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap;flex:0 1 auto}
    .sup-filters input{flex:1 1 100%}
}
/* Environnement du signalement — réservé aux admins, et volontairement discret :
   on le lit quand on cherche, il ne doit pas concurrencer la demande elle-même. */
.sup-d-env{color:#8a7a5c;font-size:.74rem;opacity:.75;margin:-6px 0 10px;
    font-family:ui-monospace,'SF Mono',monospace}
body[data-gtheme="dark"] .sup-d-env{color:#b8a985}
.sup-d-msg{background:rgba(168,134,63,.07);border-radius:10px;padding:12px 14px;line-height:1.55;margin-bottom:12px;white-space:pre-wrap}
.sup-comments{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;max-height:240px;overflow-y:auto}
.sup-comment{background:#F5F0E4;border-radius:10px;padding:9px 12px;font-size:.88rem;line-height:1.5}
.sup-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
@media(max-width:620px){.sup-stats-grid{grid-template-columns:1fr 1fr}}
.sup-stat{background:#fff;border:1px solid rgba(107,90,58,.16);border-radius:14px;padding:16px;text-align:center}
.sup-stat-n{font-size:1.8rem;font-weight:800}
.sup-stat-l{font-size:.78rem;color:#8a7a5c;text-transform:uppercase;letter-spacing:.06em}
.sup-charts{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:720px){.sup-charts{grid-template-columns:1fr}}
.sup-charts h3{font-size:.95rem;margin:0 0 10px}
.sup-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:.82rem}
.sup-bar-name{width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.sup-bar{flex:1;height:8px;border-radius:6px;background:#EFE7D4;overflow:hidden}
.sup-bar i{display:block;height:100%;background:#A8863F}
.sup-bar-n{width:34px;text-align:right;font-weight:700}
/* La ligne « Autres » n'est pas une application : c'est le reste, rendu visible
   pour que la troncature cesse d'être muette. On la distingue sans la cacher. */
.sup-bar-rest{opacity:.65;font-style:italic}
.sup-bar-rest .sup-bar i{background:#C9BCA0}
.sup-cout-ia{margin-top:28px;padding-top:18px;border-top:1px dashed rgba(107,90,58,.25)}
.sup-cout-ia>h3{font-size:1.05rem;margin:0 0 14px}
.sup-bar-usd{width:92px}
.sup-stats-note{font-size:.8rem;color:#8a7a5c;margin:-10px 0 18px}
body[data-gtheme="dark"] .sup-row,body[data-gtheme="dark"] .sup-stat{background:#241F19;border-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .sup-msg,body[data-gtheme="dark"] .sup-stat-n{color:#EFE7D6}
body[data-gtheme="dark"] .sup-meta,body[data-gtheme="dark"] .sup-stat-l,body[data-gtheme="dark"] .sup-d-meta{color:#b8a985}
body[data-gtheme="dark"] .sup-status{background:#2E271E;color:#b8a985}
body[data-gtheme="dark"] .sup-status.on{background:rgba(255,138,128,.16);color:#ff8a80}
body[data-gtheme="dark"] .sup-comment{background:#2E271E;color:#EFE7D6}
body[data-gtheme="dark"] .sup-d-msg{background:rgba(221,203,164,.08)}
body[data-gtheme="dark"] .sup-tri-btn{border-color:rgba(221,203,164,.28);color:#DDCBA4}
body[data-gtheme="dark"] .sup-tri-btn:hover{background:rgba(221,203,164,.12);border-color:rgba(221,203,164,.5)}
body[data-gtheme="dark"] .sup-segs{background:rgba(221,203,164,.06);border-color:rgba(221,203,164,.18)}
body[data-gtheme="dark"] .sup-seg{color:#DDCBA4;border-right-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .sup-seg:hover{background:rgba(221,203,164,.12)}
body[data-gtheme="dark"] .sup-seg.on,body[data-gtheme="dark"] .sup-seg.on:hover{background:rgba(221,203,164,.85);color:#211e19}
body[data-gtheme="dark"] .sup-target-picker{background:rgba(221,203,164,.06);border-color:rgba(221,203,164,.18)}
body[data-gtheme="dark"] .sup-target-picker label{color:#d9bc77}
body[data-gtheme="dark"] .sup-target-picker select{background:#241F19;border-color:rgba(221,203,164,.25)}
body[data-gtheme="dark"] .sup-bar{background:#2E271E}
body[data-gtheme="dark"] .sup-bar i{background:#D9BC77}
body[data-gtheme="dark"] .sup-charts h3,
body[data-gtheme="dark"] .sup-bar-name,
body[data-gtheme="dark"] .sup-bar-n{color:#EFE7D6}
body[data-gtheme="dark"] .sup-stats-note{color:#b8a985}
body[data-gtheme="dark"] .sup-bar-rest .sup-bar i{background:#8a7a5c}

/* ── Support IT : prise en charge, états, conversation, traduction ── */
/* États : accent à gauche + pastille de statut colorée (« change de couleur ») */
.sup-row{border-left:3px solid transparent}
.sup-row.st-on{border-left-color:#b3261e}
.sup-row.st-prog{border-left-color:#c8891f;background:#FBF6EA}
.sup-row.st-done{border-left-color:#2d7d46}
.sup-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.sup-status.prog{background:rgba(200,137,31,.16);color:#a86a12}
.sup-status.done{background:rgba(45,125,70,.15);color:#2d7d46}
/* Avatars (liste + fil) */
.sup-av{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.sup-av img{width:100%;height:100%;object-fit:cover}
.sup-av-l{background:#A8863F;color:#fff;font-size:.72rem;font-weight:800}
/* Puce « responsable » dans une ligne */
.sup-assignee{display:inline-flex;align-items:center;gap:6px;margin-top:5px;font-size:.78rem;font-weight:700;color:#a86a12;background:rgba(200,137,31,.1);border-radius:999px;padding:2px 9px 2px 3px;width:fit-content}
.sup-assignee .sup-av{width:19px;height:19px}
.sup-assignee .sup-av-l{font-size:.62rem}
/* Bouton « Je m'en occupe » / « Relais » — pastille contour discrète
   (ne doit pas voler la vedette au statut ni ressembler au CTA principal). */
.sup-claim-btn{border:1px solid rgba(168,134,63,.5);cursor:pointer;font-size:.76rem;font-weight:800;border-radius:999px;padding:5px 12px;background:transparent;color:#8a6d1f;white-space:nowrap}
.sup-claim-btn:hover{background:rgba(168,134,63,.12)}
.sup-claim-btn.is-relay{border-color:rgba(200,137,31,.5);color:#a86a12}
.sup-claim-btn.is-relay:hover{background:rgba(200,137,31,.14)}
/* Détail : en-tête + bouton traduire */
.sup-d-top{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.sup-d-top h3{margin:0;font-size:1.05rem}
.sup-d-link{display:inline-block;margin:6px 8px 0 0;font-size:.85rem;padding:6px 12px}
.sup-tr-btn{border:1px solid rgba(107,90,58,.3);background:transparent;color:#8a7a5c;cursor:pointer;font-size:.76rem;font-weight:700;border-radius:999px;padding:5px 12px;white-space:nowrap}
.sup-tr-btn:hover{background:rgba(168,134,63,.1)}
.sup-tr-btn.on{background:rgba(168,134,63,.16);color:#8a6d1f;border-color:transparent}
/* Fil de conversation à bulles */
.sup-thread{display:flex;flex-direction:column;gap:12px;margin:8px 0 14px;max-height:46vh;overflow-y:auto;padding:6px 2px}
.sup-bubble-row{display:flex;gap:8px;align-items:flex-end}
.sup-bubble-row.me{flex-direction:row-reverse}
.sup-bubble{max-width:78%;background:#F5F0E4;border-radius:14px;padding:8px 12px}
.sup-bubble-row.me .sup-bubble{background:rgba(168,134,63,.16)}
.sup-bubble-head{font-size:.72rem;font-weight:800;color:#8a7a5c;margin-bottom:2px;display:flex;gap:8px;align-items:baseline}
.sup-bubble-row.me .sup-bubble-head{flex-direction:row-reverse}
.sup-bubble-time{font-weight:600;opacity:.7;font-size:.68rem}
.sup-bubble-text{font-size:.9rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:#2B2620}
/* Zone de réponse */
.sup-reply{display:flex;gap:8px;align-items:flex-end;margin-bottom:12px}
/* Ticket spMJx212 (A. Veyrine) : « élargir la zone où l'on tape le texte […]
   il peut arriver qu'il y ait de longs textes explicatifs ». 44 px, c'est UNE
   ligne visible : on écrivait dix lignes par une lucarne, sur le seul écran où
   l'on se relit avant d'envoyer. Le plancher passe à quatre lignes, et le
   champ grandit ensuite tout seul (support.js) jusqu'à SUP_REPLY_MAX_H — d'où
   le max-height jumeau ici, à la même valeur : le CSS borne la boîte, le JS
   borne la hauteur calculée, et les deux doivent s'arrêter ensemble. */
.sup-reply textarea{flex:1;resize:vertical;min-height:96px;max-height:320px;overflow-y:auto;line-height:1.5}
.sup-reply .btn{padding:10px 16px;font-size:1.05rem}
.sup-d-actions{justify-content:space-between}
.sup-d-actions-l{display:inline-flex;gap:8px;flex-wrap:wrap}
/* Dark */
body[data-gtheme="dark"] .sup-row.st-prog{background:#26201A}
body[data-gtheme="dark"] .sup-status.prog{background:rgba(217,188,119,.16);color:#E6C879}
body[data-gtheme="dark"] .sup-status.done{background:rgba(127,196,122,.16);color:#8fd08a}
body[data-gtheme="dark"] .sup-assignee{color:#E6C879;background:rgba(217,188,119,.12)}
body[data-gtheme="dark"] .sup-claim-btn{border-color:rgba(221,203,164,.4);color:#DDCBA4}
body[data-gtheme="dark"] .sup-claim-btn:hover{background:rgba(221,203,164,.12)}
body[data-gtheme="dark"] .sup-claim-btn.is-relay{border-color:rgba(217,188,119,.5);color:#E6C879}
body[data-gtheme="dark"] .sup-tr-btn{color:#b8a985;border-color:rgba(221,203,164,.28)}
body[data-gtheme="dark"] .sup-tr-btn.on{background:rgba(221,203,164,.16);color:#DDCBA4}
body[data-gtheme="dark"] .sup-bubble{background:#2E271E}
body[data-gtheme="dark"] .sup-bubble-row.me .sup-bubble{background:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .sup-bubble-text{color:#EFE7D6}
body[data-gtheme="dark"] .sup-bubble-head{color:#b8a985}

/* ══════════ SUPPORT IT : console opérationnelle 2026 ══════════ */
#support-view{max-width:1180px;padding:14px 24px 64px}
.sup-toolbar{justify-content:space-between;gap:16px;margin:4px 0 18px;padding-bottom:14px;border-bottom:1px solid rgba(107,90,58,.14)}
.sup-tabs{display:flex;align-items:center;gap:5px;padding:3px;border:1px solid rgba(107,90,58,.16);border-radius:8px;background:#fff}
.sup-tabs .tasks-proj-chip{min-height:35px;margin:0;border:0;border-radius:6px;padding:7px 13px}
.sup-tabs .tasks-proj-chip.on{background:#2d352f;color:#fff;box-shadow:none}
.sup-toolbar>.btn{min-height:42px;border-radius:7px;padding:9px 16px}

.sup-console{display:flex;flex-direction:column;gap:12px}
.sup-workbar{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:12px;align-items:end}
.sup-search-wrap{position:relative;display:block}
.sup-search-wrap>span{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:1.25rem;color:#69736c;pointer-events:none}
.sup-search-wrap input{width:100%;height:44px;margin:0;padding:9px 42px;border:1px solid #cfd6d1;border-radius:7px;background:#fff;color:#29312b;font:inherit;font-size:.88rem}
.sup-search-wrap input:focus{outline:2px solid rgba(58,105,72,.16);border-color:#52785d}
.sup-search-clear{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#667069;font-size:1.15rem;cursor:pointer}
.sup-search-clear:hover{background:#edf0ed}
.sup-sort-wrap{display:flex;align-items:center;gap:8px;color:#68726a;font-size:.74rem;font-weight:700}
.sup-sort-wrap select{height:44px;min-width:205px;margin:0;padding:8px 32px 8px 11px;border:1px solid #cfd6d1;border-radius:7px;background:#fff;color:#29312b;font:inherit;font-size:.8rem}

.sup-filter-panel{border:1px solid #dde3de;border-radius:8px;background:#f5f7f5;overflow:hidden}
.sup-filter-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:center;min-height:50px;padding:8px 12px;border-bottom:1px solid #e1e5e2}
.sup-filter-row:last-child{border-bottom:0}
.sup-filter-label{color:#6b756d;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0}
.sup-filter-options{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.sup-filter-options .tasks-proj-chip{min-height:32px;margin:0;padding:5px 9px;border:1px solid transparent;border-radius:6px;background:transparent;color:#4e5851;font-size:.72rem}
.sup-filter-options .tasks-proj-chip:hover{background:#fff;border-color:#d2d9d3}
.sup-filter-options .tasks-proj-chip.on{background:#2f4936;color:#fff;border-color:#2f4936}
.sup-filter-options .tasks-chip-count{min-width:20px;border-radius:4px;padding:1px 5px;background:rgba(0,0,0,.07)}
.sup-filter-options .tasks-proj-chip.on .tasks-chip-count{background:rgba(255,255,255,.17)}
.sup-people{margin:0}
.sup-people .tasks-proj-chip.has-av{padding-left:4px}

.sup-result-bar{display:flex;align-items:center;justify-content:space-between;min-height:32px;color:#68726a;font-size:.76rem}
.sup-result-bar strong{color:#29312b}
.sup-refresh{width:32px;height:32px;display:grid;place-items:center;border:1px solid #d6ddd7;border-radius:6px;background:#fff;color:#465149;font-size:1rem;cursor:pointer}
.sup-refresh:hover{background:#f2f4f2;border-color:#aab5ac}

.sup-list{gap:0;border:1px solid #dce2dd;border-radius:8px;overflow:hidden;background:#fff}
.sup-list-head,.sup-row{display:grid;grid-template-columns:105px minmax(260px,1fr) minmax(320px,auto);gap:14px;align-items:center}
.sup-list-head{min-height:39px;padding:0 15px;border:1px solid #dce2dd;border-bottom:0;border-radius:8px 8px 0 0;background:#f3f5f3;color:#6e7870;font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:0}
.sup-list-head+.sup-list{border-radius:0 0 8px 8px}
.sup-row{min-height:88px;padding:13px 15px;border:0;border-bottom:1px solid #e8ece9;border-left:3px solid transparent;border-radius:0;background:#fff;box-shadow:none;transform:none}
.sup-row:last-child{border-bottom:0}
.sup-row:hover{background:#fafbfa;box-shadow:none;transform:none}
.sup-row.sup-done{opacity:.68}
.sup-kind{width:max-content;display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:5px;background:#eef1ef;color:#566159;font-size:.65rem;font-weight:800}
.sup-kind.sup-feature{background:#f0eafe;color:#6540a6}
.sup-kind.sup-bug{background:#feeceb;color:#9e3732}
.sup-main{gap:3px}
.sup-msg{color:#252d27;font-size:.9rem;font-weight:700;line-height:1.35;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sup-meta{display:flex;align-items:center;gap:0;color:#747e76;font-size:.7rem;white-space:nowrap;overflow:hidden}
.sup-meta>span,.sup-meta>time{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sup-meta>span+span::before,.sup-meta>time::before{content:'·';margin:0 6px;color:#a9b0aa}
.sup-assignee{margin-top:4px;border-radius:5px;padding:2px 7px 2px 3px}
.sup-row-right{min-width:0;align-items:flex-end;gap:8px}
.sup-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0}
.sup-tri-moves{gap:5px}
.sup-tri-btn,.sup-claim-btn{min-height:32px;border-radius:6px;padding:6px 9px;font-size:.68rem}
.sup-claim-btn{border-color:#d7bf88;background:#fff9ec;color:#7a5a18}
.sup-claim-btn:hover{background:#f8edcf}
.sup-claim-btn.is-relay{border-color:#c9d8e7;background:#f3f8fc;color:#355d83}
.sup-open-row{width:24px;height:24px;display:grid;place-items:center;color:#8d968f;font-size:1.2rem}
.sup-status{border-radius:5px;padding:3px 7px}
.sup-row.st-on{border-left-color:#c53a31}
.sup-row.st-prog{border-left-color:#ca8a19;background:#fffbf3}
.sup-row.st-done{border-left-color:#318452}

.sup-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:4px;color:#667069;font-size:.75rem}
.sup-pagination button{width:36px;height:36px;display:grid;place-items:center;border:1px solid #d2d9d3;border-radius:6px;background:#fff;color:#344038;font:inherit;font-size:1rem;cursor:pointer}
.sup-pagination button:hover:not(:disabled){background:#f2f5f2;border-color:#9da99f}
.sup-pagination button:disabled{opacity:.4;cursor:not-allowed}
#supBody[aria-busy="true"] .sup-console{opacity:.62;pointer-events:none}

body[data-gtheme="dark"] .sup-tabs,
body[data-gtheme="dark"] .sup-search-wrap input,
body[data-gtheme="dark"] .sup-sort-wrap select,
body[data-gtheme="dark"] .sup-filter-panel,
body[data-gtheme="dark"] .sup-list,
body[data-gtheme="dark"] .sup-row,
body[data-gtheme="dark"] .sup-refresh,
body[data-gtheme="dark"] .sup-pagination button{background:#241f19;border-color:rgba(221,203,164,.16);color:#efe7d6}
body[data-gtheme="dark"] .sup-filter-panel,
body[data-gtheme="dark"] .sup-list-head{background:#201c17;border-color:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .sup-filter-row,
body[data-gtheme="dark"] .sup-row{border-bottom-color:rgba(221,203,164,.1)}
body[data-gtheme="dark"] .sup-tabs .tasks-proj-chip.on,
body[data-gtheme="dark"] .sup-filter-options .tasks-proj-chip.on{background:#d9bc77;color:#211e19}
body[data-gtheme="dark"] .sup-row:hover{background:#2a241e}
body[data-gtheme="dark"] .sup-row.st-prog{background:#282117}
body[data-gtheme="dark"] .sup-result-bar strong,
body[data-gtheme="dark"] .sup-msg{color:#efe7d6}
body[data-gtheme="dark"] .sup-sort-wrap,
body[data-gtheme="dark"] .sup-filter-label,
body[data-gtheme="dark"] .sup-result-bar,
body[data-gtheme="dark"] .sup-list-head,
body[data-gtheme="dark"] .sup-meta{color:#b8a985}
body[data-gtheme="dark"] .sup-claim-btn{background:rgba(217,188,119,.1)}
body[data-gtheme="dark"] .sup-claim-btn.is-relay{background:rgba(93,148,197,.12);border-color:rgba(93,148,197,.35);color:#91bde3}

@media(max-width:920px){
    .sup-list-head,.sup-row{grid-template-columns:90px minmax(220px,1fr) minmax(250px,auto)}
    .sup-tri-lbl{display:none}
    .sup-tri-btn{width:34px;padding:6px;justify-content:center}
}
@media(max-width:700px){
    #support-view{padding:10px 12px 60px}
    .sup-toolbar{align-items:stretch;flex-direction:column}
    .sup-tabs{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
    .sup-tabs .tasks-proj-chip{padding:6px 4px;font-size:.69rem}
    .sup-toolbar>.btn{width:100%}
    .sup-workbar{grid-template-columns:1fr}
    .sup-sort-wrap{justify-content:space-between}
    .sup-sort-wrap select{min-width:0;width:68%}
    .sup-filter-row{grid-template-columns:1fr;gap:5px;padding:8px}
    .sup-filter-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
    .sup-filter-options .tasks-proj-chip{justify-content:center;min-width:0;padding:5px 3px}
    .sup-people .sup-filter-options{display:flex;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
    .sup-list-head{display:none}
    .sup-list{gap:8px;border:0;border-radius:0;background:transparent;overflow:visible}
    .sup-list-head+.sup-list{border-radius:0}
    .sup-row{display:grid;grid-template-columns:auto minmax(0,1fr);flex-wrap:wrap;gap:8px 10px;min-height:0;padding:12px;border:1px solid #dce2dd;border-left-width:3px;border-radius:7px}
    .sup-kind{grid-column:1;grid-row:1}
    .sup-main{grid-column:1/-1;grid-row:2}
    .sup-row-right{display:contents}
    .sup-row-actions{grid-column:1/-1;grid-row:3;justify-content:flex-end;flex-wrap:wrap}
    .sup-status{grid-column:2;grid-row:1;align-self:center;justify-self:end}
    .sup-meta{flex-wrap:wrap;white-space:normal}
    .sup-assignee{display:none}
    .sup-claim-btn{min-height:36px}
    body[data-gtheme="dark"] .sup-list{background:transparent;border:0}
}

/* ══════════ PALANTIR : services + alertes + machines ══════════ */
#palantir-view{max-width:1100px;margin:0 auto;padding:18px 20px 60px;width:100%}
.pal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.pal-card{background:#fff;border:1px solid rgba(107,90,58,.16);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:7px}
.pal-card.pal-bad{border-color:rgba(179,38,30,.5);box-shadow:inset 3px 0 0 #b3261e}
.pal-card-head{display:flex;align-items:center;gap:8px;font-size:.95rem}
.pal-spark{width:60px;height:20px;margin-left:auto}
.pal-spark polyline{fill:none;stroke:#A8863F;stroke-width:1.5}
.pal-metrics{display:flex;gap:14px;font-size:.82rem;font-weight:600;flex-wrap:wrap}
.pal-metrics .pal-err{color:#b3261e}
.pal-meta{font-size:.76rem;color:#8a7a5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-meta-full{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4;margin:2px 0}
body[data-gtheme="dark"] .pal-card{background:#241F19;border-color:rgba(221,203,164,.16);color:#EFE7D6}
body[data-gtheme="dark"] .pal-meta{color:#b8a985}
body[data-gtheme="dark"] .pal-spark polyline{stroke:#D9BC77}

/* ══════════ Étiquettes QR — AVERY 22805 (24 × 1.5"×1.5", Letter) ══════════ */
#averyPrintSheet{display:none}
/* Tout ce bloc est porté par `html.avery-impression`, posée par palantir.js le
   temps du window.print() des étiquettes — et par rien d'autre. Sans cette
   garde, `body *{visibility:hidden}` s'appliquait à TOUTE impression du hub :
   la règle ne concurrençait aucune autre déclaration de visibility, donc elle
   l'emportait toujours, et l'aperçu de document sortait en pages blanches
   (visibility:hidden garde la boîte dans le flux — le navigateur pagine, puis
   n'encre rien). Ne jamais retirer la classe des sélecteurs ci-dessous. */
@media print{
    html.avery-impression body *{visibility:hidden !important}
    html.avery-impression body{background:#fff !important;margin:0 !important;padding:0 !important}
    html.avery-impression #averyPrintSheet,html.avery-impression #averyPrintSheet *{visibility:visible !important}
    html.avery-impression #averyPrintSheet{display:grid !important;
        grid-template-columns:repeat(4,1.8125in);grid-template-rows:repeat(6,1.6875in);gap:0;
        padding-top:.4375in;padding-left:.625in;
        position:fixed;top:0;left:0;width:8.5in;height:11in;background:#fff;z-index:99999}
    .avery-label{width:1.8125in;height:1.6875in;display:flex;flex-direction:column;align-items:center;
        justify-content:center;text-align:center;overflow:hidden;box-sizing:border-box;page-break-inside:avoid}
    .avery-qr img,.avery-qr canvas{width:76px !important;height:76px !important}
    .avery-name{margin-top:2px;font-family:Arial,sans-serif;font-size:6.5pt;font-weight:700;color:#000;
        line-height:1.1;word-break:break-all;max-width:1.3in;overflow:hidden}
    @page{size:letter;margin:0}
}

/* Étiquettes : rangées de sélection + grille de placement (feuille entamée) */
.pal-lbl-row{display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left}
.pal-lbl-row .pal-lbl-name{flex:1;font-weight:600;text-align:left}
.pal-place-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0}
.pal-place-cell{aspect-ratio:1.07;border:1.5px dashed rgba(107,90,58,.35);border-radius:8px;background:none;
    cursor:pointer;font-size:.68rem;font-weight:700;color:inherit;overflow:hidden;padding:2px;transition:all .12s}
.pal-place-cell .pal-place-num{opacity:.35;font-size:.8rem}
.pal-place-cell.filled{border-style:solid;border-color:#2D6A24;background:rgba(45,106,36,.1);color:#2D6A24}
.pal-place-cell.blocked{border-style:solid;border-color:rgba(179,38,30,.5);background:rgba(179,38,30,.08);color:#b3261e;font-size:1rem}
.pal-place-cell:hover{transform:scale(1.04)}
body[data-gtheme="dark"] .pal-place-cell{border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .pal-place-cell.filled{border-color:#609e56;background:rgba(96,158,86,.15);color:#9fd48f}
body[data-gtheme="dark"] .pal-place-cell.blocked{border-color:#ff8a80;background:rgba(255,138,128,.12);color:#ff8a80}

/* Notes : vue lecture + éditeur */
.note-view-date{font-size:.78rem;color:#8a7a5c;margin:-6px 0 14px}
#noteViewTitle{color:#33302a}
.note-view-body{line-height:1.7;padding:4px 2px;color:#33302a}
.note-view-body h2,.note-view-body h3{margin:14px 0 6px}
.note-view-body ul{padding-left:22px}
.note-view-body blockquote{border-left:3px solid #A8863F;margin:8px 0;padding:4px 12px;opacity:.85}
.note-view-body code{background:rgba(168,134,63,.12);border-radius:4px;padding:1px 5px}
/* Liens : or Chanv (le bleu par défaut jure avec le thème) */
.note-view-body a{color:#8a6d2f;text-decoration:underline;text-underline-offset:2px}
.note-view-body a:hover{color:#A8863F}
.note-toolbar{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}
.note-toolbar button{border:1px solid rgba(107,90,58,.25);background:none;border-radius:8px;
    min-width:32px;height:30px;padding:0 10px;cursor:pointer;font-size:.85rem;color:inherit;transition:all .12s}
.note-toolbar button:hover{border-color:#A8863F;color:#A8863F}
body[data-gtheme="dark"] .note-view-date{color:#b8a985}
body[data-gtheme="dark"] .note-toolbar button{border-color:rgba(221,203,164,.25)}
body[data-gtheme="dark"] .note-view-body code{background:rgba(221,203,164,.14)}
body[data-gtheme="dark"] #noteViewTitle{color:rgba(255,255,255,.95)}
body[data-gtheme="dark"] .note-view-body{color:rgba(255,255,255,.9)}
body[data-gtheme="dark"] .note-view-body a{color:#DDCBA4}
body[data-gtheme="dark"] .note-view-body a:hover{color:#EBD9B4}

/* Chat : recherche de conversations + bande mobile de navigation */
.chat-search-row{padding:0 12px 10px}
.chat-search-row input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:10px;
    border:1px solid rgba(107,90,58,.25);background:transparent;color:inherit;font-size:.9rem}
.chat-conv-strip{display:none}
@media (max-width:860px){
    body.shell-on .chat-view.show-pane .chat-conv-strip{display:flex;gap:4px;overflow-x:auto;
        padding:6px 10px;border-bottom:1px solid rgba(107,90,58,.15);-webkit-overflow-scrolling:touch;
        scrollbar-width:none;flex:none}
    .chat-conv-strip::-webkit-scrollbar{display:none}
    .chat-strip-item{display:flex;flex-direction:column;align-items:center;gap:2px;border:none;
        background:none;padding:4px 6px;border-radius:10px;min-width:52px;cursor:pointer;position:relative;opacity:.75}
    .chat-strip-item.on{opacity:1;background:rgba(168,134,63,.14)}
    .chat-strip-item.unread::after{content:'';position:absolute;top:3px;right:8px;width:8px;height:8px;
        border-radius:50%;background:#b3261e}
    /* La vignette non lue se teinte elle aussi (ticket J6U7z72o9lkT9ZpQq9rX) :
       la bande mobile n'avait que le point ci-dessus, et `opacity:.75` la
       rendait même PLUS pâle que les conversations déjà lues d'à côté —
       exactement l'inverse du signal voulu. Teinte plus discrète qu'en pleine
       page : ici la sélection (`.on`) doit rester lisible, d'où le `:not(.on)`
       qui lui laisse la main — la vignette ouverte n'est de toute façon plus
       non lue une fois `markRead()` passé. */
    .chat-strip-item.unread:not(.on){opacity:1;
        background:color-mix(in srgb,var(--gs-accent,#A8863F) 10%,transparent)}
    .chat-strip-item.unread .chat-strip-name{font-weight:800}
    .chat-strip-item .chat-conv-avatar,.chat-strip-item img{width:34px !important;height:34px !important}
    .chat-strip-name{font-size:.62rem;font-weight:600;color:inherit;white-space:nowrap}
}
body[data-gtheme="dark"] .chat-search-row input{border-color:rgba(221,203,164,.25)}
body[data-gtheme="dark"] .chat-conv-strip{border-bottom-color:rgba(221,203,164,.15)}

/* Accès par application (Gestion → Utilisateurs) */
.app-roles-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:16px}
.app-role-col{background:#fff;border:1px solid rgba(107,90,58,.18);border-radius:14px;padding:12px}
.app-role-col-off{opacity:.65}
.app-role-head{font-weight:800;font-size:.85rem;border-bottom:1px solid rgba(107,90,58,.15);padding-bottom:8px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
/* La colonne « Non visible » liste tout l'annuaire depuis qu'elle ne ment
   plus : elle défile au lieu d'étirer la planche sur trois écrans. */
.app-role-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:28px;max-height:320px;overflow-y:auto;align-content:flex-start}
.app-role-chip{background:rgba(168,134,63,.12);border-radius:999px;padding:4px 10px;font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.app-role-chip button{border:none;background:none;cursor:pointer;font-size:.72rem;opacity:.55;color:inherit}
.app-role-chip button:hover{opacity:1;color:#b3261e}
.app-role-empty{opacity:.4;font-size:.85rem}
.app-role-add{position:relative;margin-top:10px}
.app-role-add input{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:9px;border:1px dashed rgba(107,90,58,.35);background:transparent;color:inherit;font-size:.82rem}
.app-role-suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid rgba(107,90,58,.25);border-radius:10px;box-shadow:0 10px 24px rgba(60,48,25,.15);z-index:30;overflow:hidden}
.app-role-suggest button{display:block;width:100%;text-align:left;border:none;background:none;padding:8px 12px;cursor:pointer;font-size:.85rem;color:inherit}
.app-role-suggest button:hover{background:rgba(168,134,63,.1)}
.app-role-suggest small{opacity:.5;margin-left:6px}
body[data-gtheme="dark"] .app-role-col,body[data-gtheme="dark"] .app-role-suggest{background:#241F19;border-color:rgba(221,203,164,.18)}
body[data-gtheme="dark"] .app-role-chip{background:rgba(221,203,164,.14)}

/* Drag & drop des puces de rôle entre colonnes */
.app-role-chip[draggable="true"]{cursor:grab}
.app-role-chip.dragging{opacity:.45;cursor:grabbing}
.app-roles-columns.drag-on .app-role-col{outline:2px dashed rgba(168,134,63,.35);outline-offset:-2px}
.app-role-col.drop-ready{outline:2px solid rgba(168,134,63,.85);outline-offset:-2px;background:rgba(168,134,63,.07)}
body[data-gtheme="dark"] .app-roles-columns.drag-on .app-role-col{outline-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .app-role-col.drop-ready{outline-color:rgba(221,203,164,.8);background:rgba(221,203,164,.08)}

/* ── Page Note (lecture/édition en place, plus de modal) ── */
.note-page{max-width:820px;margin:0 auto;padding:4px 2px 40px}
.note-page-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;
    padding-bottom:14px;border-bottom:1px solid rgba(107,90,58,.15)}
.note-page-bar .btn{margin:0}
.note-page-spacer{flex:1}
.note-page .note-view-date{margin:0;white-space:nowrap}
.note-read h1{font-size:1.5rem;line-height:1.3;margin:0 0 14px;text-wrap:balance}
.note-read .note-view-body{max-width:72ch;font-size:1.02rem}
.note-edit textarea{width:100%;box-sizing:border-box;min-height:62vh;resize:vertical;
    line-height:1.6;font-size:.98rem;padding:14px;border-radius:12px}
.note-edit-preview{min-height:62vh;border:1px solid rgba(107,90,58,.2);border-radius:12px;
    padding:14px;box-sizing:border-box;max-width:none}
/* Notes en ÉDITION ENRICHIE (ticket dkkKQW9 — « version code » à l'édition).
   L'éditeur occupe la page comme le textarea qu'il remplace (62vh) et grandit
   librement : une note est une page, pas un champ de message — le plafond de
   220px des composeurs ne vaut pas ici. */
.note-edit .grt-editor{min-height:62vh;max-height:none;
    font-size:.98rem;line-height:1.6;padding:14px}
.note-edit .grt-wrap{border:1px solid rgba(107,90,58,.25);border-radius:12px;background:#fff}
body[data-gtheme="dark"] .note-edit .grt-wrap{border-color:rgba(221,203,164,.25);background:#2f2b24}
/* La barre héritée (marqueurs bruts + Aperçu) s'escamote derrière le tiroir
   « Aa » ; le micro 🎤 reste, et le tiroir vit dans #noteFmtSlot. */
.note-edit-rich .note-toolbar > button:not(#noteMicBtn){display:none}
.note-fmt-slot{display:inline-flex;align-items:center}
body[data-gtheme="dark"] .note-page-bar{border-bottom-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .note-edit-preview{border-color:rgba(221,203,164,.2)}

/* Pièces jointes des notes (📎 réutilise GandalfComposer) */
.note-edit-att{margin-top:12px}
.note-view-att{margin-top:20px}
.note-view-att:empty{display:none}
.note-view-att .gc-atts{margin-top:0}

/* Confirmation stylée des notes (pas de confirm() natif) */
.note-confirm-overlay{position:fixed;inset:0;background:rgba(30,25,15,.45);z-index:10060;
    display:grid;place-items:center;padding:20px}
.note-confirm-box{background:#fff;border-radius:16px;padding:22px;max-width:420px;width:100%;
    box-shadow:0 18px 50px rgba(30,25,15,.3)}
.note-confirm-msg{font-weight:600;line-height:1.5;margin-bottom:18px}
.note-confirm-actions{display:flex;gap:10px;justify-content:flex-end}
.note-confirm-actions .btn{margin:0}
body[data-gtheme="dark"] .note-confirm-box{background:#2a241c;color:#EDE4D2}

/* Palette de réactions étendue (+) des fils */
.gc-react-palette-full{max-width:340px;max-height:220px;overflow-y:auto;flex-wrap:wrap;display:flex}

/* Sections de la liste de conversations + épingle */
.chat-convs-sec{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    opacity:.5;padding:12px 14px 4px;user-select:none}
.chat-conv-item{position:relative}
.chat-conv-pin{position:absolute;right:8px;bottom:6px;border:none;background:none;cursor:pointer;
    font-size:12px;opacity:0;transition:opacity .12s;padding:3px;filter:grayscale(1)}
.chat-conv-item:hover .chat-conv-pin{opacity:.6}
@media (hover:none){.chat-conv-pin{opacity:.5}} /* tactile : épingle atteignable au doigt */
.chat-conv-pin:hover{opacity:1!important}
.chat-conv-pin.on{opacity:.9;filter:none}
/* Sourdine personnelle, posée à gauche de l'épingle (celle-ci est à right:8px,
   la pastille de non-lus à right:12px mais centrée verticalement — 30px dégage
   les deux). Une conversation en sourdine doit SE VOIR sans survol : sinon on
   oublie l'avoir mutée et on s'étonne du silence. D'où `.on` toujours opaque,
   comme pour l'épingle. */
.chat-conv-mute{position:absolute;right:30px;bottom:6px;border:none;background:none;cursor:pointer;
    font-size:12px;opacity:0;transition:opacity .12s;padding:3px;filter:grayscale(1)}
.chat-conv-item:hover .chat-conv-mute{opacity:.6}
@media (hover:none){.chat-conv-mute{opacity:.5}} /* tactile : atteignable au doigt */
.chat-conv-mute:hover{opacity:1!important}
.chat-conv-mute.on{opacity:.9;filter:none}

/* Épingle personnelle des tâches */
.tasks-card{position:relative}
.tasks-card-pin{position:absolute;top:6px;right:8px;border:none;background:none;cursor:pointer;
    font-size:12px;opacity:0;transition:opacity .12s;padding:3px;filter:grayscale(1);z-index:2}
.tasks-card:hover .tasks-card-pin{opacity:.55}
.tasks-card-pin:hover{opacity:1!important}
.tasks-card-pin.on{opacity:.95;filter:none}
.tasks-card-pinned{border-left:3px solid #A8863F}
.tasks-group-pinned{color:#A8863F}
/* ✏️ Édition rapide — voisin de l'épingle, mêmes manières : effacé au repos,
   il apparaît quand la carte est survolée. Il se place À GAUCHE du 📌 (right
   plus grand) pour ne pas déplacer une épingle que les doigts connaissent.
   L'échelon de 22px est celui qu'a fixé le ticket de D. Lefebvre sur les cartes
   de projet (« UX étoile et 3 points overlap ») — deux boutons de cette taille
   ne se chevauchent pas à 22px. */
.tasks-card-qe{position:absolute;top:6px;right:30px;border:none;background:none;cursor:pointer;
    font-size:12px;opacity:0;transition:opacity .12s;padding:3px;filter:grayscale(1);z-index:2}
.tasks-card:hover .tasks-card-qe{opacity:.55}
.tasks-card-qe:hover{opacity:1!important;filter:none}
/* LA RÉSERVE. Sans elle, le coin haut-droit est déjà pris : .tasks-card est en
   align-items:flex-start, donc la bande d'avatars est collée en HAUT et son
   bord droit tombe à 15px du bord de la carte (bordure 1 + padding 14) — juste
   sous un 📌 qui va de 8px à ~26px. L'épingle recouvrait donc le coin de
   l'avatar le plus à droite sur TOUTE carte assignée, et le ✏️ serait tombé
   en plein milieu d'un visage.
   Même remède que .tpc-head sur les cartes de projet : on donne au groupe de
   boutons sa propre colonne. 42px = le ✏️ finit vers 48-50px, plus une marge.
   :not(:empty) — une carte sans assigné n'a rien à protéger, et lui prendre
   42px de titre pour un vide serait payer une réserve inutile. */
.tasks-card-assignees:not(:empty){margin-right:42px}

/* Séparateur personnes | salons dans la bande mobile */
.chat-strip-sep{flex:none;width:5px;height:5px;border-radius:1px;transform:rotate(45deg);
    background:#A8863F;opacity:.55;margin:0 8px;align-self:center}

/* =====================================================================
   Tâches — passe RESPONSIVE mobile (projets, listes, cartes, hall)
   ===================================================================== */
@media (max-width: 640px) {
    /* La zone respire moins mais chaque pixel sert au contenu */
    .tasks-list{padding:10px 10px 90px}
    .tasks-header{padding:10px 12px;gap:10px}
    /* En-tête compact : le bouton Duplications se réduit à l'icône 🔁 sur mobile */
    .tasks-dupmgr-btn span{display:none}
    .tasks-dupmgr-btn{padding:7px 11px}

    /* Fil d'Ariane : une ligne défilable au doigt, jamais d'empilement */
    .tasks-crumb{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
        scrollbar-width:none;padding-bottom:2px}
    .tasks-crumb::-webkit-scrollbar{display:none}
    .tasks-crumb>*{flex-shrink:0}

    /* PANNE — « 🌐 Toutes » était hors de l'écran ET inatteignable.
       Les boutons du groupe sont en `white-space:nowrap` et le groupe n'a
       pas de `flex-wrap` : ~424 px demandés pour ~332 disponibles sur un
       téléphone de 380. Les ~92 px qui débordaient tombaient dans un
       `.tasks-view` en `position:fixed` sans défilement horizontal — donc
       PERDUS, pas seulement coupés. Le dernier filtre n'était atteignable
       par aucun geste.
       Même correctif que le fil d'Ariane juste au-dessus : chaque groupe
       devient une ligne qu'on pousse du doigt. On ne l'empile pas — quatre
       pilules sur deux lignes coûtent une rangée entière pour un réglage
       qu'on ne touche qu'une fois.
       `min-width:0` est indispensable, et sur LES DEUX niveaux — mesuré :
       posé sur le seul groupe, il ne changeait rien (420 px de contenu dans
       420 px de boîte, donc rien à faire défiler). Un élément flex a
       `min-width:auto`, et pour un conteneur qui passe à la ligne cette
       taille minimale vaut la largeur de son élément le plus large : sans
       `min-width:0`, `.tasks-filters` refusait de descendre sous les 420 px
       du groupe, et le `max-width:100%` du groupe se mesurait donc sur un
       parent déjà trop large. Les deux, ou aucun des deux.
       Padding porté à 4 px pour que l'ombre de la pilule active
       (`0 1px 3px`) ne soit pas rognée par le conteneur qui défile. */
    .tasks-filters{min-width:0;max-width:100%}
    .tasks-filter-group{min-width:0;max-width:100%;padding:4px;
        overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
        scrollbar-width:none}
    .tasks-filter-group::-webkit-scrollbar{display:none}
    .tasks-filter-group>*{flex-shrink:0}

    /* Grille projets : 2 colonnes compactes */
    .tasks-proj-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .tasks-proj-card{padding:11px 12px 9px;height:132px}
    .tasks-proj-card-archived{height:auto;min-height:84px}
    .tpc-desc{display:none} /* la description attend le tap — le nom prime */
    /* Deux cartes par rangée : ~165px de large. Réserver 84px pour trois
       boutons ne laisserait qu'une poignée de caractères au titre — et ici le
       ⋮ ne se cache pas au repos (@media hover:none). Le 📁 s'efface donc :
       « Ranger dans un groupe » est déjà la 2e entrée de son menu ⋮, on ne perd
       aucun geste. Restent ⋮ + ★, d'où 56px. */
    .tasks-proj-card .tpc-group{display:none}
    .tasks-proj-card .tpc-head{padding-right:56px}
    /* « Voir plus de caractères pour voir c'est quelle liste » — D. Gauthier,
       ticket cSIkRIO0DMLlkW2qIKcZ, capture iPhone 414px.
       Le compte, MESURÉ sur sa capture (et non déduit : la première version de
       ce correctif tablait sur une carte de 190px et se trompait de 13px).
       Ses projets sont DANS UN GROUPE, et .tasks-folder-body ajoute 12px de
       padding de chaque côté : 414 − 20 (.tasks-list) − 2 (bordure du groupe)
       − 24 (folder-body) − 4 (marge de grille) − 10 (gap) = 354, soit 177px
       par carte — et non 190. Sa boîte de contenu fait 151.
       L'en-tête en cédait 56 à la réserve des boutons ci-dessus et 51 à la
       décoration (pastille 10+2, deux gaps de 8, emoji ~23) — il ne restait
       que 44px au nom. Une capitale de ce titre mesure 8.5px (« ACTIO » =
       42.7px pour 5 lettres) : 5 caractères par ligne, sur 2 lignes.
       « ACTIONS » sortait en « ACTIO / NS… » — on ne reconnaît plus la liste.
       On rend d'abord la LARGEUR — la décoration retombe à ~34px sans rien
       perdre : la pastille de couleur reste cliquable (c'est le seul chemin
       vers la palette pour qui ne gère pas le projet) et l'emoji reste
       identifiable. PUIS on ouvre une 3e ligne : la description est masquée
       deux règles plus haut, la place est là. On passe ainsi de ~10 à ~21
       caractères — la hauteur de carte suit (104 → 132px, cf. plus bas).
       La réserve de 56px n'est PAS réduite : ★ est ancrée à right:34px et son
       glyphe court jusqu'à ~52px du bord ; descendre à 48 ferait passer le
       titre SOUS l'étoile pour un caractère de gain.
       Trois lignes possibles : la pastille et l'emoji se calent sur la
       PREMIÈRE. align-items:center les ferait flotter en face de la 2e, à
       côté de rien. 17.5px = la hauteur d'une ligne de nom (14 × 1.25) : on
       la donne à l'emoji pour qu'il se centre dans la ligne 1, et la pastille
       (8px) descend de (17.5−8)/2 ≈ 5px pour s'y centrer aussi. */
    .tasks-proj-card .tpc-head{gap:5px;align-items:flex-start}
    .tasks-proj-card .tasks-color-dot{width:8px;height:8px;margin-right:0;
        margin-top:5px;position:relative}
    .tasks-proj-card .tpc-icon{font-size:14px;line-height:17.5px}
    .tasks-proj-card .tpc-name{-webkit-line-clamp:3}
    /* La pastille rétrécit à l'œil, pas au doigt : 15×22px de zone tactile
       contre 10×10 avant. Elle déborde de sa boîte sans rien reprendre au nom
       et sans mordre sur l'emoji (7.5px de demi-largeur pour un gap de 5px).
       Ça compte : cette pastille est le SEUL chemin vers la palette pour qui
       ne « gère » pas le projet — le ⋮ n'offre la couleur qu'aux gestionnaires,
       via ⚙️ Gérer le projet. */
    .tasks-proj-card .tasks-color-dot::after{content:'';position:absolute;
        top:50%;left:50%;width:15px;height:22px;transform:translate(-50%,-50%)}
    /* Les ~21 caractères ci-dessus suffisent à 59 % des 163 projets du hub
       (médiane : 19 caractères). Pour les autres, rétrécir la police et
       ajouter une 4e ligne ne suffisait pas — capture Android du 30/08,
       viewport 412px : « BLEUH - COMMUNICATIONS ET MARKETING » sortait en
       « BLEUH - / COMMU / NICATIO / NS ET… ». Quatre lignes ne servent à
       rien quand chacune ne porte que 8 caractères.
       La place perdue n'était pas dans la police, elle était dans la MISE
       EN PAGE : sur 151px de boîte, la réserve des boutons en prend 56 et
       la décoration ~34 — il n'en restait que 62 au texte, moins de la
       moitié de la carte. Or ★ et ⋮ sont ancrés à top:8px : ils n'occupent
       que la PREMIÈRE ligne. Leur réserver une colonne sur toute la hauteur,
       c'était payer quatre fois un obstacle qui n'existe qu'une seule.
       Le nom passe donc à la ligne (flex-wrap) et prend la boîte entière :
       la pastille et l'emoji gardent la ligne 1 — ils courent jusqu'à 28px
       du bord gauche, l'étoile commence à 122, aucun risque de collision —
       et le nom déroule dessous sur toute la largeur. 151 ÷ 7.3 = 20
       caractères par ligne au lieu de 8, soit ~60 sur trois lignes contre
       32 sur quatre : une 3e ligne pleine vaut mieux qu'une 4e étranglée.
       ~98 % des noms du hub passent alors en entier (le plus long en fait
       73), contre 87 % annoncés — et réellement bien moins.
       On ne touche PAS à la réserve de 56px de la variante courte : là, le
       titre reste À CÔTÉ des boutons et elle le protège encore.
       Hauteur : 25 de chrome + 15 (ligne emoji) + 2 (row-gap) + 45 (3 × 15)
       + 6 de gap + 28 pour .tpc-meta sur deux lignes = 121 ≤ 132. */
    .tasks-proj-card.tpc-nom-long .tpc-head{flex-wrap:wrap;gap:2px 5px;padding-right:0}
    .tasks-proj-card.tpc-nom-long .tpc-name{flex:0 0 100%;font-size:12px;-webkit-line-clamp:3}
    .tasks-proj-card.tpc-nom-long .tpc-icon{font-size:13px;line-height:15px}
    .tasks-proj-card.tpc-nom-long .tasks-color-dot{margin-top:3.5px}

    /* En-tête de liste : le nom garde sa ligne, actions en dessous */
    .tasks-list-head{flex-wrap:wrap;gap:8px;padding:10px 12px}
    .tasks-list-head .tlh-name{flex:1 1 100%;font-size:14px}
    .tasks-list-head .tlh-prog{max-width:none;flex:1;min-width:50px}
    /* L'en-tête porte un bouton de plus depuis le ticket 0JYxOEpmiR4wyTI6tgs0
       (« Section » a rejoint « Nouvelle tâche »). Le nom occupe déjà sa ligne
       entière ici ; on resserre la paire pour qu'elle tienne sur la seconde
       avec les icônes, au lieu d'en pousser une sur une troisième. */
    .tasks-list-head .tlh-newtask,
    .tasks-list-head .tlh-newsection{padding:5px 10px;font-size:12px}
    .tasks-list-body{padding:6px 8px 10px}

    /* Cartes : plus denses, avatars discrets */
    .tasks-card{padding:10px 10px;gap:9px}
    .tasks-card-title{font-size:14px}
    .tasks-card-desc{font-size:12px}
    .tasks-card-assignees{transform:scale(.88);transform-origin:top right}
    /* `.tasks-card-pin{opacity:.4}` vivait ici. Déplacé dans le bloc
       `hover:none and pointer:coarse` juste après cette passe : le
       déclencheur est l'absence de SURVOL, pas la largeur de la fenêtre.
       Écrit en largeur, il réparait le téléphone et laissait l'épingle
       invisible au doigt sur tablette (641–860 px), et il la laissait
       allumée sans raison dans une fenêtre étroite pilotée à la souris. */

    /* Hall : cartes-outils sur UNE colonne pleine largeur (lisible), hero compact */
    .hall-grid{grid-template-columns:1fr;gap:10px}
    .hall-hero{padding:18px 14px}
    .hall-name{font-size:1.25rem}

    /* Bascule Listes/Tableau + titre : empilables sans déborder */
    .tasks-section-title{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
    .tasks-viewtoggle{margin-left:0}

    /* Kanban : colonnes défilables horizontalement d'un doigt */
    .tasks-kanban-wrap{-webkit-overflow-scrolling:touch}
}

/* =====================================================================
   Tâches — TACTILE (et non « petit écran »)
   =====================================================================
   `hover:none and pointer:coarse` interroge l'ENTRÉE, pas la largeur. C'est
   la bonne question, et le fichier le sait déjà : `.chat-conv-pin` s'en sert
   (~l.12710) tandis que `.tasks-card-pin` a été écrit en `max-width:640px`
   — donc réparé sur téléphone et cassé sur tablette, pour le même geste.
   Une fenêtre étroite sur un portable n'a aucun de ces problèmes ; une
   tablette large les a tous.

   iOS AGRANDIT LA PAGE à la mise au point de tout champ sous 16 px, et ne
   revient jamais en arrière : on se retrouve à faire défiler
   horizontalement pour relire ce qu'on vient de taper. La règle est écrite
   noir sur blanc six mille lignes plus haut, sur le composeur du chat
   (« < 16px = auto-zoom iOS au focus », ~l.6037) — elle n'avait simplement
   jamais été appliquée aux Tâches, dont tous les champs sont à 13 px.

   Les surfaces sont NOMMÉES une par une. `.modal-overlay` seul aurait
   couvert d'un coup les formulaires de TOUT le hub (CRM, docs, réglages) :
   ce n'est pas cette réparation-là, et elle se demande à part. */
@media (hover: none) and (pointer: coarse) {
    .tasks-view input, .tasks-view textarea, .tasks-view select,
    #taskFormModal input, #taskFormModal textarea, #taskFormModal select,
    #projectFormModal input, #projectFormModal textarea, #projectFormModal select,
    .gest-pop input, .gest-pop textarea, .gest-pop select,
    .tasks-color-pop input,
    .tasks-search {
        font-size: 16px;
    }
    /* Même geste, même règle : l'épingle de carte était rendue tactile par
       une requête de LARGEUR (~l.12762), donc invisible au doigt entre 641
       et 860 px. On la rend visible partout où il n'y a pas de survol. */
    .tasks-card-pin { opacity: .4; }
    /* Le ✏️ d'édition rapide arrive de la branche dev, où il était rendu
       tactile par la même requête de largeur que l'épingle. Il hérite donc du
       même correctif plutôt que du défaut : sans survol, un bouton à
       `opacity:0` n'existe pas — et sur tablette large, la largeur ne le
       disait pas. */
    .tasks-card-qe { opacity: .4; }
}
@media (max-width: 400px) {
    .tasks-proj-grid{grid-template-columns:1fr}
}

/* Palantir — carte Budget GCP (bas des moniteurs) */
.pal-budget-sec{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    opacity:.55;margin:18px 2px 8px}
.pal-budget-nums{display:flex;align-items:baseline;gap:6px;margin:8px 0 6px;flex-wrap:wrap}
.pal-budget-cost{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}
.pal-budget-of{opacity:.55;font-size:.85rem}
.pal-budget-pct{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
.pal-budget-bar{height:7px;border-radius:99px;background:rgba(40,34,24,.12);overflow:hidden}
.pal-budget-bar i{display:block;height:100%;border-radius:99px;background:#6E8A63}
.pal-budget-warn .pal-budget-bar i{background:#BC7E29}
.pal-budget-warn .pal-budget-pct{color:#BC7E29}
.pal-budget-crit .pal-budget-bar i{background:#B85443}
.pal-budget-crit .pal-budget-pct{color:#B85443}
body[data-gtheme="dark"] .pal-budget-bar{background:rgba(221,203,164,.16)}

/* =====================================================================
   DARK MODE — passe lisibilité : scrollbars + textes sombres sur fond sombre
   ===================================================================== */
/* Scrollbars : la barre blanche jurait sur le fond sombre */
body[data-gtheme="dark"]{scrollbar-color:rgba(221,203,164,.28) transparent}
body[data-gtheme="dark"] *{scrollbar-color:rgba(221,203,164,.28) transparent}
body[data-gtheme="dark"] ::-webkit-scrollbar{width:9px;height:9px}
body[data-gtheme="dark"] ::-webkit-scrollbar-track{background:transparent}
body[data-gtheme="dark"] ::-webkit-scrollbar-thumb{background:rgba(221,203,164,.24);border-radius:99px}
body[data-gtheme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(221,203,164,.4)}

/* Textes codés sombres → encre claire quand le fond devient sombre */
body[data-gtheme="dark"] .tasks-section-title{color:rgba(255,255,255,.9)}
body[data-gtheme="dark"] .tasks-proj-chip{color:rgba(237,228,210,.85);border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .tasks-proj-chip.on{color:#f2ead8}
body[data-gtheme="dark"] .chat-quote{color:rgba(237,228,210,.8)}
body[data-gtheme="dark"] .mt-detail{color:rgba(237,228,210,.88)}
body[data-gtheme="dark"] .note-toolbar button{color:rgba(237,228,210,.85);border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .tlh-count{color:rgba(237,228,210,.7)}
body[data-gtheme="dark"] .tasks-crumb button{color:rgba(237,228,210,.8)}

/* Palantir — fenêtre détail (clic sur une carte) */
.pal-clickable{cursor:pointer;transition:transform .1s,box-shadow .12s}
.pal-clickable:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(40,34,24,.14)}
.pal-detail-overlay{position:fixed;inset:0;background:rgba(30,25,15,.5);z-index:10060;
    display:grid;place-items:center;padding:16px}
.pal-detail-box{background:#fff;border-radius:16px;max-width:760px;width:100%;max-height:86vh;
    display:flex;flex-direction:column;box-shadow:0 22px 60px rgba(30,25,15,.35)}
.pal-detail-head{display:flex;align-items:center;gap:10px;padding:16px 18px;
    border-bottom:1px solid rgba(107,90,58,.15);font-size:1.05rem}
.pal-detail-x{margin-left:auto;border:none;background:none;cursor:pointer;font-size:15px;opacity:.5;padding:4px}
.pal-detail-x:hover{opacity:1}
.pal-detail-body{padding:14px 18px 18px;overflow-y:auto}
.pal-detail-stats{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;margin-bottom:10px;opacity:.85}
.pal-detail-chart{display:flex;align-items:flex-end;gap:2px;height:120px;
    border-bottom:1px solid rgba(107,90,58,.2);padding-bottom:1px;margin-bottom:14px}
.pal-detail-chart i{flex:1;min-width:2px;background:rgba(168,134,63,.45);border-radius:2px 2px 0 0}
.pal-detail-chart i:hover{background:#A8863F}
.pal-detail-chart i.peak{background:#B85443}
.pal-detail-table-wrap{overflow-x:auto}
.pal-detail-table{width:100%;border-collapse:collapse;font-size:.82rem;font-variant-numeric:tabular-nums}
.pal-detail-table th{text-align:left;padding:6px 8px;border-bottom:1px solid rgba(107,90,58,.2);
    font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;opacity:.6}
.pal-detail-table td{padding:5px 8px;border-bottom:1px solid rgba(107,90,58,.08)}
.pal-detail-table tr.peak td{background:rgba(184,84,67,.09);font-weight:700}
body[data-gtheme="dark"] .pal-detail-box{background:#26221b;color:#EDE4D2}
body[data-gtheme="dark"] .pal-detail-head{border-bottom-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .pal-detail-table th{border-bottom-color:rgba(221,203,164,.2)}
body[data-gtheme="dark"] .pal-detail-table td{border-bottom-color:rgba(221,203,164,.08)}
/* --- Fenêtre de détail enrichie (statut, projection, tendances, seuil) --- */
.pal-detail-status{border-radius:12px;padding:12px 14px;margin-bottom:12px;border:1px solid rgba(107,90,58,.18);
    border-left-width:4px;background:rgba(168,134,63,.06)}
.pal-detail-status .pds-big{font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.pal-detail-status .pds-big small{font-size:.9rem;font-weight:600;opacity:.6}
.pal-detail-status .pds-sub{font-size:.85rem;opacity:.8;margin-top:2px}
.pal-detail-status .pds-bar{height:7px;border-radius:4px;background:rgba(107,90,58,.15);margin-top:9px;overflow:hidden}
.pal-detail-status .pds-bar span{display:block;height:100%;background:currentColor;opacity:.75;border-radius:4px}
.pal-tone-ok{border-left-color:#2D6A24;color:#2D6A24}
.pal-tone-mid{border-left-color:#A8863F;color:#8a6d2f}
.pal-tone-warn{border-left-color:#d98a2b;color:#b5701a}
.pal-tone-crit{border-left-color:#B85443;color:#a8412f}
.pal-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.pal-detail-kpis{margin-bottom:12px}
.pal-chip{font-size:.78rem;padding:4px 10px;border-radius:999px;background:rgba(168,134,63,.1);
    border:1px solid rgba(107,90,58,.15);font-variant-numeric:tabular-nums;color:inherit}
.pal-chip b{font-weight:750}
.pal-chip.up,.pal-chip.bad{background:rgba(184,84,67,.12);border-color:rgba(184,84,67,.3);color:#a8412f}
.pal-chip.down,.pal-chip.good{background:rgba(45,106,36,.12);border-color:rgba(45,106,36,.3);color:#2D6A24}
.pal-detail-proj{border:1px dashed rgba(168,134,63,.4);border-radius:12px;padding:11px 13px;margin-bottom:12px;background:rgba(168,134,63,.05)}
.pal-detail-proj .pdp-title{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.65;margin-bottom:7px}
.pal-detail-graninfo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.pal-gran-toggle{display:inline-flex;border:1px solid rgba(107,90,58,.25);border-radius:8px;overflow:hidden}
.pal-gran-toggle button{border:none;background:none;cursor:pointer;font:inherit;font-size:.78rem;padding:4px 12px;color:inherit;opacity:.7}
.pal-gran-toggle button.on{background:rgba(168,134,63,.85);color:#2b2415;opacity:1;font-weight:650}
.pal-thr-legend{font-size:.75rem;opacity:.7}
.pal-detail-chart{position:relative}
.pal-thr-line{position:absolute;left:0;right:0;height:0;border-top:2px dashed rgba(184,84,67,.7);pointer-events:none;z-index:1}
.pal-detail-chart i.pal-bar-ok{background:rgba(45,106,36,.5)}
.pal-detail-chart i.pal-bar-mid{background:rgba(168,134,63,.6)}
.pal-detail-chart i.pal-bar-warn{background:#d98a2b}
.pal-detail-chart i.pal-bar-crit,.pal-detail-chart i.pal-bar-peak{background:#B85443}
.pal-detail-chart i:hover{filter:brightness(1.15)}
body[data-gtheme="dark"] .pal-detail-status{background:rgba(221,203,164,.07);border-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .pal-tone-ok{color:#9fd48f}
body[data-gtheme="dark"] .pal-tone-mid{color:#DDCBA4}
body[data-gtheme="dark"] .pal-tone-warn{color:#e0a03a}
body[data-gtheme="dark"] .pal-tone-crit{color:#ff8a80}
body[data-gtheme="dark"] .pal-chip{background:rgba(221,203,164,.1);border-color:rgba(221,203,164,.18)}
body[data-gtheme="dark"] .pal-chip.up,body[data-gtheme="dark"] .pal-chip.bad{background:rgba(255,138,128,.14);border-color:rgba(255,138,128,.35);color:#ff8a80}
body[data-gtheme="dark"] .pal-chip.down,body[data-gtheme="dark"] .pal-chip.good{background:rgba(96,158,86,.15);border-color:rgba(96,158,86,.35);color:#9fd48f}
body[data-gtheme="dark"] .pal-detail-proj{background:rgba(221,203,164,.05);border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .pal-gran-toggle{border-color:rgba(221,203,164,.25)}
body[data-gtheme="dark"] .pal-gran-toggle button.on{background:rgba(221,203,164,.85);color:#221e19}
body[data-gtheme="dark"] .pal-detail-chart i.pal-bar-ok{background:rgba(96,158,86,.5)}
/* --- Bandeau « nouvelle version disponible » (onglets ouverts) --- */
/* Le bouton « Recharger » est la seule action : posé à 20px du bord physique, sa
   moitié basse tombait dans la bande gestuelle (34px iOS, ~48px Android 15) et
   l'utilisateur restait sur une version périmée. */
.gv-update-banner{position:fixed;bottom:max(20px, calc(env(safe-area-inset-bottom) + 12px));left:50%;transform:translateX(-50%);z-index:99999;
    display:flex;align-items:center;gap:14px;padding:11px 13px 11px 20px;border-radius:999px;
    background:#33302a;color:#fff;box-shadow:0 10px 32px rgba(0,0,0,.35);font-size:.9rem;
    max-width:calc(100vw - 24px);animation:gvFadeIn .3s ease}
.gv-update-banner button{border:none;cursor:pointer;background:#DDCBA4;color:#2b2415;font-weight:750;
    border-radius:999px;padding:8px 18px;font-size:.85rem;white-space:nowrap;flex-shrink:0}
.gv-update-banner button:hover{background:#EBD9B4}
/* ✕ de fermeture (ticket 19/08 : en bas d'écran mobile, le bandeau masquait les
   boutons Enregistrer/Soumettre). Discret face à la pilule « Rafraîchir » — et
   fermer n'est qu'une sieste : le bandeau revient après 2 min sans refresh. */
.gv-update-banner button.gv-update-close{background:none;color:#fff;opacity:.65;
    font-weight:400;font-size:1rem;line-height:1;padding:6px 8px;margin-left:-6px}
.gv-update-banner button.gv-update-close:hover{background:rgba(255,255,255,.14);opacity:1}
@keyframes gvFadeIn{from{opacity:0}to{opacity:1}}
@media (max-width:640px){.gv-update-banner{left:12px;right:12px;transform:none;bottom:max(12px, calc(env(safe-area-inset-bottom) + 8px));border-radius:14px;justify-content:space-between}}

/* Menu ⋯ des messages (façon Basecamp) : flottant, zéro reflow */
.chat-msg-dots{border:none;background:none;cursor:pointer;font-size:15px;line-height:1;
    padding:1px 6px;border-radius:7px;color:inherit;opacity:0;transition:opacity .12s;vertical-align:middle}
.chat-msg:hover .chat-msg-dots{opacity:.55}
.chat-msg-dots:hover{opacity:1!important;background:rgba(168,134,63,.15)}
.chat-msg-line{display:flex;align-items:flex-start;gap:6px}
/* .chat-msg-meta est en display:contents sur bureau : le ⋯ n'est donc plus
   enfant DIRECT de la ligne au sens des sélecteurs (display:contents retire la
   boîte, pas le nœud). Sans la 2e branche, le décalage se perdait. */
.chat-msg-line>.chat-msg-dots,
.chat-msg-meta>.chat-msg-dots{margin-top:4px}
@media (hover:none){.chat-msg-dots{opacity:.75}} /* tactile : toujours BIEN visible (pas de survol au doigt) */
.chat-msg-menu{position:fixed;z-index:10070;background:#fff;border:1px solid rgba(107,90,58,.2);
    border-radius:14px;box-shadow:0 14px 40px rgba(30,25,15,.25);padding:8px;min-width:190px}
.cmm-reacts{display:flex;gap:2px;padding:2px 2px 8px;border-bottom:1px solid rgba(107,90,58,.14);margin-bottom:6px}
.cmm-reacts button{border:none;background:none;font-size:17px;padding:4px;border-radius:8px;cursor:pointer;line-height:1}
.cmm-reacts button:hover{background:rgba(168,134,63,.15);transform:scale(1.15)}
.cmm-item{display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
    font-size:13.5px;padding:8px 10px;border-radius:9px;color:inherit;font-family:inherit}
.cmm-item:hover{background:rgba(168,134,63,.12)}
.cmm-danger{color:#b3261e}
body[data-gtheme="dark"] .chat-msg-menu{background:#2b2823;border-color:rgba(221,203,164,.2);color:#EDE4D2}
body[data-gtheme="dark"] .cmm-reacts{border-bottom-color:rgba(221,203,164,.15)}
body[data-gtheme="dark"] .cmm-danger{color:#ff8a80}

/* Popover « qui a réagi » */
.chat-react-who{position:fixed;z-index:10070;background:#fff;border:1px solid rgba(107,90,58,.2);
    border-radius:12px;box-shadow:0 10px 28px rgba(30,25,15,.22);padding:8px 12px;
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:280px;font-size:13px}
.crw-emoji{font-size:17px}
.crw-name{background:rgba(168,134,63,.12);border-radius:999px;padding:2px 9px;font-weight:600}
/* « Réagir aussi » : le clic sur la pastille d'un autre montre désormais les
   noms au lieu d'ajouter la sienne (ticket rbGAOKdGZiPWkEwW5wcZ) — ce bouton
   est ce qui empêche ce choix de coûter un geste à qui voulait juste dire
   « moi aussi ». Il vit dans la MÊME rangée que les noms. */
.crw-join{border:1px solid rgba(107,90,58,.25);background:none;color:inherit;cursor:pointer;
    border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:600;font-family:inherit;white-space:nowrap}
.crw-join:hover{background:rgba(168,134,63,.15)}
body[data-gtheme="dark"] .chat-react-who{background:#2b2823;border-color:rgba(221,203,164,.2);color:#EDE4D2}
body[data-gtheme="dark"] .crw-name{background:rgba(221,203,164,.15)}
body[data-gtheme="dark"] .crw-join{border-color:rgba(221,203,164,.28)}
body[data-gtheme="dark"] .crw-join:hover{background:rgba(221,203,164,.15)}


/* Dark mode — 2e passe lisibilité (heures, méta, séparateurs, bande convs) */
body[data-gtheme="dark"] .chat-msg-time{color:rgba(255,255,255,.6)}
body[data-gtheme="dark"] .chat-msg-dots{color:rgba(255,255,255,.9)}
body[data-gtheme="dark"] .chat-msg:hover .chat-msg-dots{opacity:.8}
body[data-gtheme="dark"] .chat-day-sep{color:rgba(255,255,255,.6)}
body[data-gtheme="dark"] .chat-strip-name{color:rgba(255,255,255,.72)}
body[data-gtheme="dark"] .chat-conv-time,body[data-gtheme="dark"] .chat-conv-preview{color:rgba(255,255,255,.62)}
body[data-gtheme="dark"] .chat-pane-subtitle{color:rgba(255,255,255,.62)}
body[data-gtheme="dark"] .chat-msg-edited{color:rgba(255,255,255,.55)}
body[data-gtheme="dark"] .tasks-comment-date,body[data-gtheme="dark"] .note-date,
body[data-gtheme="dark"] .tbr-meta,body[data-gtheme="dark"] .pal-meta,
body[data-gtheme="dark"] .sup-meta{color:rgba(255,255,255,.6)}
/* Ticket EKnEKCjOEpeaNmdRQobG — la date et l'heure ressortent de la méta qui
   les porte, en clair COMME en sombre : sans ça, le thème foncé rendait le
   correctif invisible. */
body[data-gtheme="dark"] .tasks-date{color:rgba(255,255,255,.9)}
body[data-gtheme="dark"] .tasks-card-desc{color:rgba(255,255,255,.68)}
/* Deux règles sombres existent pour ce sélecteur (l'autre plus haut) : les
   garder ALIGNÉES, sinon la dernière chargée gagne en silence. */
body[data-gtheme="dark"] .tasks-group-label{color:rgba(255,255,255,.88)}
body[data-gtheme="dark"] .tasks-group-label .tgl-n{color:rgba(221,203,164,.75)}

/* Palantir — environnement indisponible (accès restreint) */
.pal-unavail{padding:22px 18px;text-align:center;color:var(--gs-ink-faint,#8a7a5c);font-size:.9rem;
    background:rgba(168,134,63,.06);border:1px dashed rgba(168,134,63,.35);border-radius:12px;margin:4px 0}
body[data-gtheme="dark"] .pal-unavail{background:rgba(221,203,164,.06);border-color:rgba(221,203,164,.3);color:rgba(255,255,255,.55)}

/* 🔁 Duplication — formulaire à la carte */
.dup-modal .dup-body{display:flex;flex-direction:column;gap:14px;max-height:62vh;overflow-y:auto;padding:2px 2px 4px}
.dup-field{display:flex;flex-direction:column;gap:6px}
.dup-field>label{font-weight:650;font-size:.9rem}
.dup-field>label small{font-weight:400;opacity:.55;font-size:.78rem}
.dup-field select,.dup-field input[type=text],.dup-field input[type=date],#dupFixedDate{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:9px;border:1px solid rgba(107,90,58,.25);background:transparent;color:inherit;font-family:inherit;font-size:.9rem}
.dup-radios{display:flex;gap:14px;flex-wrap:wrap;font-size:.88rem}
.dup-radios label{display:inline-flex;align-items:center;gap:5px;font-weight:500;cursor:pointer}
.dup-check{display:flex;align-items:center;gap:7px;font-size:.86rem;font-weight:500;cursor:pointer}
.dup-adddate{align-self:flex-start;border:1px dashed rgba(168,134,63,.4);background:none;color:inherit;border-radius:8px;padding:5px 11px;cursor:pointer;font-size:.82rem}
.dup-adddate:hover{background:rgba(168,134,63,.08)}
.dup-date-row{display:flex;gap:6px;align-items:center;margin-bottom:5px}
.dup-date-row input{flex:1}
.dup-x{border:none;background:none;cursor:pointer;opacity:.5;font-size:.85rem;padding:2px 6px}
.dup-x:hover{opacity:1;color:#b3261e}
.dup-hint{font-size:.72rem;opacity:.55;font-family:ui-monospace,'SF Mono',monospace}
.dup-namepreview{font-size:.82rem;color:#A8863F;font-weight:600;margin-top:3px}
.dup-summary{background:rgba(168,134,63,.09);border-radius:10px;padding:11px 13px;font-size:.85rem}
.dup-summary:empty{display:none}
.dup-preview-list{margin-top:6px;font-size:.8rem;opacity:.85;max-height:150px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.dup-due{opacity:.6;font-size:.75rem}
body[data-gtheme="dark"] .dup-field select,body[data-gtheme="dark"] .dup-field input,body[data-gtheme="dark"] #dupFixedDate{border-color:rgba(221,203,164,.28)}
body[data-gtheme="dark"] .dup-namepreview{color:#DDCBA4}
body[data-gtheme="dark"] .dup-summary{background:rgba(221,203,164,.08)}

/* 🔁 Duplication — corrections layout (surcharge les règles globales label/input) */
.dup-modal .dup-check,.dup-modal .dup-radios label{display:inline-flex!important;align-items:center;gap:7px;
    text-transform:none;font-weight:500;color:inherit;margin-bottom:0;font-size:.86rem;cursor:pointer}
.dup-modal input[type="checkbox"],.dup-modal input[type="radio"]{width:auto!important;padding:0!important;margin:0!important;flex:none;min-width:0}
.dup-modal .dup-checks{display:flex;flex-direction:column;gap:8px;margin-top:4px}
/* Générateur de dates */
.dup-gen{background:rgba(168,134,63,.06);border:1px solid rgba(168,134,63,.2);border-radius:10px;padding:11px 12px;display:flex;flex-direction:column;gap:9px;margin-bottom:8px}
.dup-gen-freq{width:100%}
.dup-days{display:flex;gap:5px;flex-wrap:wrap}
.dup-day{width:34px;height:34px;border-radius:9px;border:1px solid rgba(107,90,58,.3);background:transparent;color:inherit;cursor:pointer;font-size:.8rem;font-weight:600}
.dup-day.on{background:var(--chanv-blanc,#A8863F);background:#A8863F;color:#fff;border-color:#A8863F}
.dup-gen-range{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.85rem}
.dup-gen-range input{flex:1;min-width:120px}
.dup-gen-btn{align-self:flex-start;border:none;background:#A8863F;color:#fff;border-radius:9px;padding:7px 14px;cursor:pointer;font-size:.84rem;font-weight:600}
.dup-gen-btn:hover{background:#96762f}
.dup-or{text-align:center;font-size:.75rem;opacity:.5;margin:2px 0}
body[data-gtheme="dark"] .dup-gen{background:rgba(221,203,164,.07);border-color:rgba(221,203,164,.22)}
body[data-gtheme="dark"] .dup-day{border-color:rgba(221,203,164,.3)}
body[data-gtheme="dark"] .dup-day.on{background:#DDCBA4;color:#241f16;border-color:#DDCBA4}

/* 🔁 Duplication — réassignation à une personne (P3) */
.dup-reassign{position:relative;margin-top:8px;display:flex;flex-direction:column;gap:7px}
.dup-reassign input[type="text"]{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:9px;border:1px solid rgba(107,90,58,.25);background:transparent;color:inherit;font-size:.86rem}
.dup-reassign-suggest{position:absolute;left:0;right:0;top:38px;z-index:20;background:#fff;border:1px solid rgba(107,90,58,.25);border-radius:10px;box-shadow:0 10px 24px rgba(60,48,25,.15);overflow:hidden}
.dup-reassign-suggest button{display:block;width:100%;text-align:left;border:none;background:none;padding:8px 12px;cursor:pointer;font-size:.85rem;color:inherit}
.dup-reassign-suggest button:hover{background:rgba(168,134,63,.1)}
.dup-reassign-suggest small{opacity:.5;margin-left:6px}
.dup-reassign-empty{padding:8px 12px;opacity:.5;font-size:.82rem}
.dup-reassign-chips{display:flex;flex-wrap:wrap;gap:6px}
.dup-chip{background:rgba(168,134,63,.14);border-radius:999px;padding:3px 10px;font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.dup-chip button{border:none;background:none;cursor:pointer;font-size:.7rem;opacity:.55;color:inherit;padding:0}
.dup-chip button:hover{opacity:1;color:#b3261e}
body[data-gtheme="dark"] .dup-reassign input[type="text"],body[data-gtheme="dark"] .dup-reassign-suggest{background:#241F19;border-color:rgba(221,203,164,.25)}
body[data-gtheme="dark"] .dup-chip{background:rgba(221,203,164,.16)}

/* 👥 Import Basecamp — champs d'alias personnes */
.bc-alias-input{box-sizing:border-box;padding:8px 10px;border-radius:9px;border:1px solid rgba(107,90,58,.25);background:transparent;color:inherit;font-family:inherit;font-size:.86rem}
body[data-gtheme="dark"] .bc-alias-input{background:#241F19;border-color:rgba(221,203,164,.25)}

/* 🎤 Dictée vocale des notes (#10) */
#noteMicBtn.recording{background:rgba(220,38,38,.14);border-radius:6px;animation:noteMicPulse 1.1s ease-in-out infinite}
@keyframes noteMicPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* 🌐 Traduction temporaire d'une tâche (#11) */
.tasks-tr-banner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.82rem;background:rgba(168,134,63,.12);border:1px solid rgba(168,134,63,.3);border-radius:8px;padding:5px 10px;margin:2px 0 10px}
.tasks-tr-revert{border:none;background:none;cursor:pointer;color:inherit;font-weight:600;text-decoration:underline;padding:0;font-size:.82rem}
body[data-gtheme="dark"] .tasks-tr-banner{background:rgba(221,203,164,.14);border-color:rgba(221,203,164,.3)}

/* 🔁 Duplication — récurrence durable (P6) */
.dup-gen-durable{border-top:1px dashed rgba(168,134,63,.3);margin-top:9px;padding-top:9px;display:flex;flex-direction:column;gap:8px}
.dup-gen-end{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.82rem}
.dup-gen-end label{display:inline-flex;align-items:center;gap:5px}
.dup-gen-end input[type="number"]{width:52px;padding:4px 6px}
.dup-gen-end input[type="date"]{width:auto;padding:4px 6px}
.dup-activate-btn{background:#2d6a24;align-self:flex-start}
.dup-activate-btn:hover{background:#255a1e}
body[data-gtheme="dark"] .dup-activate-btn{background:#4c8f41}

/* 🗂️ Onglets de tâches ouvertes (réordonnables, façon onglets de navigateur) */
.tasks-tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 24px 0;flex-shrink:0;scrollbar-width:none}
.tasks-tabs::-webkit-scrollbar{display:none}
.tasks-tabs.hidden{display:none}
.tasks-tab{display:flex;align-items:center;gap:6px;flex:0 0 auto;max-width:200px;padding:7px 8px 7px 12px;
    border-radius:10px 10px 0 0;background:rgba(107,90,58,.08);border:1px solid transparent;border-bottom:none;
    cursor:pointer;font-size:.84rem;color:inherit;user-select:none;transition:background .12s}
.tasks-tab:hover{background:rgba(107,90,58,.14)}
.tasks-tab.on{background:var(--chanv-blanc,#fff);border-color:rgba(107,90,58,.18);font-weight:600}
.tasks-tab-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tasks-tab-close{border:none;background:none;cursor:pointer;font-size:.7rem;opacity:.5;color:inherit;
    padding:2px 5px;border-radius:6px;flex:none;line-height:1}
.tasks-tab-close:hover{opacity:1;background:rgba(179,38,30,.12);color:#b3261e}
.tasks-tab.dragging{opacity:.45}
.tasks-tab.drop-before{box-shadow:-2px 0 0 0 var(--chanv-terre,#A8863F)}
body[data-gtheme="dark"] .tasks-tab{background:rgba(221,203,164,.08)}
body[data-gtheme="dark"] .tasks-tab.on{background:#2b2823;border-color:rgba(221,203,164,.18)}
@media (max-width:640px){ .tasks-tabs{padding:6px 12px 0} }

/* ✅ Indicateur de tâche clôturée (haut = bannière, bas = note ; piloté par le statut) */
.tasks-closed-banner{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:11px 14px;
    border-radius:10px;background:rgba(45,106,36,.12);color:#2d6a24;font-size:.95rem;
    border:1px solid rgba(45,106,36,.28)}
.tasks-closed-note{margin:12px 0 0;padding:9px 12px;text-align:center;font-size:.85rem;font-weight:500;
    color:#2d6a24;background:rgba(45,106,36,.08);border-radius:8px}
body[data-gtheme="dark"] .tasks-closed-banner{background:rgba(76,143,65,.18);color:#8fd47f;border-color:rgba(76,143,65,.32)}
body[data-gtheme="dark"] .tasks-closed-note{background:rgba(76,143,65,.12);color:#8fd47f}

/* 🔒 Clôture réservée aux responsables (ticket UF9lybOVYExRuRNmjwss).
   NEUTRE, pas rouge : rien n'est cassé et personne n'a fait d'erreur — c'est
   une règle de l'équipe qu'on énonce. Le rouge de l'échec était justement ce
   qu'on venait de supprimer. */
.tasks-close-note{display:flex;align-items:center;justify-content:center;gap:8px;
    margin:10px 0 0;padding:9px 12px;text-align:center;font-size:.85rem;font-weight:500;
    color:#6b5a3a;background:rgba(168,134,63,.10);border-radius:8px;line-height:1.4}
.tasks-close-note .gicon{flex-shrink:0;opacity:.8}
body[data-gtheme="dark"] .tasks-close-note{background:rgba(221,203,164,.10);color:rgba(255,255,255,.74)}
/* Le bouton qui explique au lieu d'échouer : visiblement en retrait, mais NI
   grisé NI `disabled` — il reste cliquable, et son clic affiche la phrase.
   Un bouton désactivé ne répond rien du tout, ce qui laisse croire à une panne. */
.tasks-close-locked{opacity:.75}
.tasks-close-locked:hover{opacity:1}
/* La case à cocher d'une carte dont la clôture ne m'appartient pas : un trait
   pointillé, assez pour prévenir sans transformer la liste en mur de cadenas.
   Le clic, lui, part quand même au serveur — voir renderTaskCard. */
.tasks-check-locked .tasks-check-box{border-style:dashed;opacity:.6}
/* 📦 Tâche archivée — même gabarit que la bannière de clôture, mais en gris :
   « archivée » n'est pas « faite », et les deux bannières peuvent s'empiler
   (une tâche cochée PUIS rangée). Le vert seul les rendrait indistinctes. */
.tasks-archived-banner{background:rgba(40,34,24,.07);color:#5c5140;border-color:rgba(40,34,24,.18)}
body[data-gtheme="dark"] .tasks-archived-banner{background:rgba(221,203,164,.10);color:rgba(255,255,255,.72);
    border-color:rgba(221,203,164,.22)}

/* 🔁 Gestion des duplications récurrentes (panneau + cartes de règles) */
.tasks-dupmgr-btn{margin-left:auto;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
    color:#fff;border-radius:9px;padding:7px 13px;cursor:pointer;font-size:.86rem;font-weight:600;white-space:nowrap;transition:background .15s}
.tasks-dupmgr-btn:hover{background:rgba(255,255,255,.22)}
.dupmgr-sub{font-size:.84rem;opacity:.72;margin:2px 0 14px;line-height:1.45}
.dupmgr-toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-bottom:14px}
.dupmgr-scope,.dupmgr-states{display:inline-flex;gap:6px;flex-wrap:wrap}
.dupmgr-tab,.dupmgr-state{border:1px solid rgba(107,90,58,.25);background:transparent;color:inherit;border-radius:999px;
    padding:5px 12px;cursor:pointer;font-size:.8rem;font-weight:600;transition:all .13s}
.dupmgr-tab:hover,.dupmgr-state:hover{border-color:#A8863F;color:#A8863F}
.dupmgr-tab.active,.dupmgr-state.active{background:#A8863F;color:#fff;border-color:#A8863F}
.dupmgr-list{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;padding:2px}
.dupmgr-empty{padding:26px 16px;text-align:center;opacity:.55;font-size:.9rem}
.dupmgr-card{border:1px solid rgba(107,90,58,.18);border-radius:12px;padding:12px 14px;background:rgba(168,134,63,.04)}
.dupmgr-card-stopped{opacity:.62}
.dupmgr-card-head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.dupmgr-desc{font-weight:700;font-size:.95rem}
.dupmgr-badge{font-size:.72rem;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap}
.dupmgr-badge-active{background:rgba(45,106,36,.14);color:#2d6a24}
.dupmgr-badge-paused{background:rgba(168,134,63,.16);color:#8a6d1f}
.dupmgr-badge-stopped{background:rgba(107,90,58,.14);color:#7a6a52}
.dupmgr-meta{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:8px;font-size:.8rem;opacity:.82}
.dupmgr-err{margin-top:8px;font-size:.8rem;color:#b3261e;background:rgba(179,38,30,.08);border-radius:8px;padding:6px 10px}
.dupmgr-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.dupmgr-act{padding:6px 11px!important;font-size:.8rem!important;margin:0!important}
.dupmgr-edit{margin-top:11px;border-top:1px dashed rgba(168,134,63,.3);padding-top:11px;display:flex;flex-direction:column;gap:8px}
.dupmgr-edit-title{font-size:.85rem;font-weight:600}
.dupmgr-radio{display:flex;align-items:center;gap:7px;font-size:.85rem;flex-wrap:wrap}
.dupmgr-radio input[type="radio"]{width:auto!important;padding:0!important;margin:0;flex:none;min-width:0}
.dupmgr-count{width:60px!important;padding:4px 6px;min-width:0}
.dupmgr-until{width:auto!important;padding:4px 6px;min-width:0}
.dupmgr-edit-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
body[data-gtheme="dark"] .dupmgr-card{background:rgba(221,203,164,.05);border-color:rgba(221,203,164,.16)}
body[data-gtheme="dark"] .dupmgr-tab,body[data-gtheme="dark"] .dupmgr-state{border-color:rgba(221,203,164,.25)}
body[data-gtheme="dark"] .dupmgr-badge-active{background:rgba(76,143,65,.2);color:#8fd47f}
body[data-gtheme="dark"] .dupmgr-badge-paused{background:rgba(221,203,164,.16);color:#e0c98a}
body[data-gtheme="dark"] .dupmgr-badge-stopped{background:rgba(221,203,164,.1);color:#b8a985}
body[data-gtheme="dark"] .dupmgr-edit{border-top-color:rgba(221,203,164,.25)}
body[data-gtheme="dark"] .dupmgr-err{color:#ff8a80;background:rgba(179,38,30,.16)}

/* ===== Carte de validation de duplication (garde-fou IA) ===== */
.dup-confirm-card{margin:10px 0;border:1px solid rgba(40,40,40,.14);border-radius:14px;background:#faf8f4;overflow:hidden;max-width:560px}
.dupc-loading,.dupc-closed{padding:14px 16px;font-size:.9rem;color:#6b6b6b}
.dupc-head{display:flex;align-items:center;gap:8px;padding:11px 15px;background:linear-gradient(90deg,rgba(232,165,62,.14),rgba(232,165,62,.04));border-bottom:1px solid rgba(40,40,40,.08)}
.dupc-ico{font-size:1.15rem}
.dupc-title{font-weight:700;font-size:.95rem;color:#282828}
.dupc-body{padding:12px 15px}
.dupc-meta{font-size:.9rem;color:#333;margin-bottom:6px}
.dupc-dest{font-size:.85rem;color:#555;margin:2px 0 8px}
.dupc-sub,.dupc-dates{font-size:.82rem;color:#666;margin-top:6px}
.dupc-table-wrap{max-height:230px;overflow:auto;border:1px solid rgba(40,40,40,.1);border-radius:8px;margin-top:6px}
.dupc-table{width:100%;border-collapse:collapse;font-size:.83rem}
.dupc-table th{position:sticky;top:0;background:#f0ece4;text-align:left;padding:6px 9px;font-weight:600;color:#555;border-bottom:1px solid rgba(40,40,40,.1)}
.dupc-table td{padding:5px 9px;border-bottom:1px solid rgba(40,40,40,.05)}
.dupc-table td.dupc-due{white-space:nowrap;color:#777;text-align:right;font-variant-numeric:tabular-nums}
.dupc-more{font-size:.8rem;color:#888;margin-top:5px;font-style:italic}
.dupc-warns{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.dupc-warn{font-size:.78rem;color:#9a6a00;background:rgba(232,165,62,.14);padding:2px 8px;border-radius:6px}
.dupc-diff{display:flex;flex-direction:column;gap:5px}
.dupc-diff-row{display:flex;gap:8px;align-items:baseline;font-size:.86rem}
.dupc-diff-lbl{min-width:52px;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:#999}
.dupc-diff-after{font-weight:600;color:#2d6a24}
.dupc-actions{display:flex;gap:8px;flex-wrap:wrap;padding:11px 15px;border-top:1px solid rgba(40,40,40,.08);background:rgba(40,40,40,.02)}
.dupc-btn{font-size:.85rem;padding:7px 14px}
.dup-confirm-card.dupc-busy{opacity:.7;pointer-events:none}
.dupc-done{padding:13px 16px;font-size:.9rem;color:#2d6a24;background:rgba(45,106,36,.07)}
.dupc-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dupc-link{font-size:.8rem;background:rgba(45,106,36,.1);color:#2d6a24;padding:3px 9px;border-radius:6px;text-decoration:none}
.dupc-link:hover{background:rgba(45,106,36,.2)}
body[data-gtheme="dark"] .dup-confirm-card{background:#26241f;border-color:rgba(255,255,255,.12)}
body[data-gtheme="dark"] .dupc-head{background:linear-gradient(90deg,rgba(232,165,62,.18),rgba(232,165,62,.03));border-color:rgba(255,255,255,.08)}
body[data-gtheme="dark"] .dupc-title{color:#f0ece4}
body[data-gtheme="dark"] .dupc-meta{color:#ddd}
body[data-gtheme="dark"] .dupc-dest{color:#b8b2a6}
body[data-gtheme="dark"] .dupc-sub,body[data-gtheme="dark"] .dupc-dates,body[data-gtheme="dark"] .dupc-loading,body[data-gtheme="dark"] .dupc-closed{color:#9a948a}
body[data-gtheme="dark"] .dupc-table-wrap{border-color:rgba(255,255,255,.1)}
body[data-gtheme="dark"] .dupc-table th{background:#2f2c26;color:#c5bfb3;border-color:rgba(255,255,255,.1)}
body[data-gtheme="dark"] .dupc-table td{border-color:rgba(255,255,255,.06)}
body[data-gtheme="dark"] .dupc-table td.dupc-due{color:#9a948a}
body[data-gtheme="dark"] .dupc-actions{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.08)}
body[data-gtheme="dark"] .dupc-diff-after{color:#6fbf60}
body[data-gtheme="dark"] .dupc-done{color:#8fd67f;background:rgba(45,106,36,.15)}
body[data-gtheme="dark"] .dupc-link{background:rgba(111,191,96,.14);color:#8fd67f}

/* ===== Projet archivé : actions (désarchiver / supprimer définitivement) ===== */
.tpc-arch-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tpc-delete{background:transparent;border:1px solid rgba(180,40,40,.4);color:#b42828;padding:5px 9px;line-height:1;border-radius:8px;cursor:pointer;font-size:14px}
.tpc-delete:hover{background:rgba(180,40,40,.1)}
body[data-gtheme="dark"] .tpc-delete{border-color:rgba(240,120,120,.4);color:#f08a8a}
body[data-gtheme="dark"] .tpc-delete:hover{background:rgba(240,120,120,.12)}

/* ===== Modale de confirmation destructive ===== */
.tasks-danger-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px}
.tasks-danger-box{background:#fff;border-radius:14px;max-width:440px;width:100%;padding:22px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.tdm-title{font-weight:700;font-size:1.05rem;color:#b42828;margin-bottom:10px}
.tdm-msg{font-size:.92rem;color:#444;line-height:1.5;margin-bottom:18px}
.tdm-actions{display:flex;gap:10px;justify-content:flex-end}
/* Choix de destination (déplacer une section) : un bouton par tableau,
   alignés à gauche et tronqués proprement — certains noms de listes sont longs. */
.tdm-choices{display:flex;flex-direction:column;gap:8px;margin:0 0 16px;max-height:46vh;overflow-y:auto}
.tdm-choices .btn{justify-content:flex-start;text-align:left;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;display:block}
/* Destination en LISTE DÉROULANTE (déplacer une liste vers un autre tableau,
   ticket OtoWOKJGhKE56ckmLdlw) : les cibles se comptent ici en dizaines de
   tableaux, pas en deux ou trois listes voisines comme au-dessus — une
   colonne de boutons dépasserait la fenêtre. */
.tdm-field{display:block;margin:0 0 18px}
.tdm-field>span{display:block;font-size:.82rem;color:#6b6355;margin-bottom:6px}
.tdm-field select{width:100%;padding:9px 10px;border-radius:9px;
    border:1px solid rgba(40,34,24,.18);background:#fff;color:#282828;font:520 13px/1.2 Inter,sans-serif}
body[data-gtheme="dark"] .tdm-field>span{color:#b9b1a3}
body[data-gtheme="dark"] .tdm-field select{background:#312e28;color:#ece5d8;border-color:rgba(236,229,216,.18)}
body[data-gtheme="dark"] .tasks-danger-box{background:#26241f;box-shadow:0 12px 40px rgba(0,0,0,.5)}
body[data-gtheme="dark"] .tdm-title{color:#f08a8a}
body[data-gtheme="dark"] .tdm-msg{color:#c5bfb3}

/* ===== Panneau d'ÉDITION RAPIDE (ticket aXnmJLYV, D. Paquette) =====
   Même châssis que la boîte de confirmation ci-dessus — c'est le vocabulaire
   des fenêtres construites à la volée dans tasks.js. La liste d'assignés
   réutilise .tasks-selected-list / .tasks-chip / .tasks-assignee-list du
   formulaire complet : rien à restyler, rien à tenir en double.
   align-items:flex-start plutôt que center : la liste de personnes fait
   grandir la boîte, et une boîte centrée qui grandit fait sauter le titre
   sous le curseur pendant qu'on tape. */
.tasks-qe-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;
    align-items:flex-start;justify-content:center;z-index:10000;padding:6vh 20px 20px;overflow-y:auto}
.tasks-qe-box{background:#fff;border-radius:14px;max-width:420px;width:100%;padding:20px;
    box-shadow:0 12px 40px rgba(0,0,0,.25)}
.tqe-head{font-weight:700;font-size:1.02rem;margin-bottom:14px;color:#282218}
.tqe-label{display:block;font-size:.78rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.02em;color:#8a8272;margin:12px 0 5px}
.tqe-label:first-of-type{margin-top:0}
.tqe-input{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid #e3dccb;
    border-radius:8px;font-size:.93rem;font-family:inherit;background:#fff;color:#282218}
.tqe-input:focus{outline:none;border-color:#A8863F;box-shadow:0 0 0 3px rgba(168,134,63,.14)}
.tasks-qe-box .tasks-assignee-list{max-height:190px}
.tqe-actions{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.tqe-spacer{flex:1}
/* Une porte, pas un bouton : le panneau est partiel par choix, il doit dire
   où trouver les champs qu'il n'a pas. */
.tqe-full{border:none;background:none;cursor:pointer;padding:0;font-size:.84rem;
    color:#8a8272;text-decoration:underline;font-family:inherit}
.tqe-full:hover{color:#A8863F}
body[data-gtheme="dark"] .tasks-qe-box{background:#26241f;box-shadow:0 12px 40px rgba(0,0,0,.5)}
body[data-gtheme="dark"] .tqe-head{color:#ddcba4}
body[data-gtheme="dark"] .tqe-label{color:#a89f8d}
body[data-gtheme="dark"] .tqe-input{background:#2b2823;border-color:rgba(221,203,164,.22);color:#e7e0d2}
body[data-gtheme="dark"] .tqe-full{color:#a89f8d}
@media (max-width:640px){
    .tasks-qe-overlay{padding:0;align-items:flex-end}
    .tasks-qe-box{max-width:none;border-radius:14px 14px 0 0;padding:18px 16px 22px}
    .tqe-actions{flex-wrap:wrap}
}

/* ===== Surbrillance d'une liste ciblée depuis le fil d'Ariane ===== */
@keyframes tasksListFlash{0%{box-shadow:0 0 0 3px rgba(232,165,62,0)}25%{box-shadow:0 0 0 3px rgba(232,165,62,.6)}100%{box-shadow:0 0 0 3px rgba(232,165,62,0)}}
.tasks-list-flash{animation:tasksListFlash 1.5s ease-out;border-radius:12px}
.tasks-ask-gandalf{white-space:nowrap}

/* =====================================================================
   Verrou biométrique GANDALF — overlay plein écran (app native uniquement)
   Voir public/js/app-lock.js. Révélé par l'attribut data-glock-armed posé
   sur <html> (jamais posé hors natif) — anti-flash : le CSS peut couvrir
   le contenu dès la première frame, avant même que le JS ait pu toucher
   le DOM. z-index=100010 : au-dessus de tout l'existant (max audité :
   100003, pastille pwa-install). OPAQUE (pas de rgba) : le contenu
   dessous doit être réellement masqué, jamais entr'aperçu.
   ===================================================================== */
#gAppLock {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100010;
    background: #FFFFFF;
}
html[data-glock-armed] #gAppLock {
    display: flex;
}
body[data-gtheme="dark"] #gAppLock {
    background: #201d19;
}
.glock-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 24px;
}
.glock-logo {
    font-size: 52px;
    line-height: 1;
}
.glock-title {
    font-size: 16px;
    font-weight: 600;
    color: #2D2A26;
}
body[data-gtheme="dark"] .glock-title {
    color: #EFE6D6;
}

/* =====================================================================
   DocViewer — visualiseur de documents intégré (Messages + Tâches)
   ===================================================================== */
.dv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 14, 0.72);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10060;
    padding: 14px;
}
.dv-overlay.open { display: flex; }
.dv-modal {
    background: #faf7f1;
    border-radius: 16px;
    width: min(1040px, 100%);
    height: min(92vh, 1100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.dv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #F1EADA;
    border-bottom: 1px solid rgba(120, 100, 70, 0.25);
    flex-shrink: 0;
}
.dv-name {
    font-size: 13px;
    font-weight: 700;
    color: #282828;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dv-actions { display: flex; gap: 6px; flex-shrink: 0; }
.dv-actions button {
    background: none;
    border: 1px solid rgba(120, 100, 70, 0.3);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 14px;
    cursor: pointer;
    color: #282828;
}
.dv-actions button:hover { background: rgba(40, 40, 40, 0.08); }
.dv-actions button[disabled] { opacity: 0.35; cursor: default; }
.dv-actions button[disabled]:hover { background: none; }
/* Le niveau de zoom sert aussi de bouton « revenir à 100 % ». Largeur fixe et
   chiffres tabulaires : sans ça, l'en-tête tressaute à chaque palier. */
.dv-zoom-level { min-width: 54px; font-variant-numeric: tabular-nums; }
@media (max-width: 430px) { .dv-zoom-level { display: none; } }
/* Rotation appliquée : les deux flèches restent allumées tant que le document
   n'est pas revenu à l'orientation du fichier. Sans ce repère, on ne sait plus
   si ce qu'on voit est le document ou son réglage d'affichage. */
.dv-actions button.dv-actif {
    background: rgba(168, 134, 63, 0.16);
    border-color: rgba(168, 134, 63, 0.55);
}
body[data-gtheme="dark"] .dv-actions button.dv-actif {
    background: rgba(221, 203, 164, 0.18);
    border-color: rgba(221, 203, 164, 0.5);
}
/* Deux boutons de plus dans un en-tête déjà chargé : sur un écran étroit, la
   barre poussait le nom du fichier jusqu'à le faire disparaître. On resserre
   les commandes plutôt que d'en sacrifier une, et le nom garde sa place. */
@media (max-width: 560px) {
    .dv-actions { gap: 4px; }
    .dv-actions button { padding: 4px 7px; }
}
.dv-name { min-width: 0; }
.dv-body {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
}
.dv-loading, .dv-error {
    text-align: center;
    padding: 40px 16px;
    color: #6b6151;
    font-size: 14px;
}
.dv-error button {
    border: 1px solid rgba(120, 100, 70, 0.35);
    background: white;
    border-radius: 8px;
    padding: 6px 14px;
    cursor: pointer;
    font-family: inherit;
}
.dv-pdf { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* Page zoomée : deux verrous à lever, sinon le zoom ne se voit pas.
   1. `max-width: 100%` ci-dessous ramènerait le canvas à la largeur du cadre,
      annulant l'agrandissement en silence.
   2. `align-items: center` sur un contenu plus large que son conteneur pousse
      le débordement des DEUX côtés : la moitié gauche devient inatteignable au
      défilement. `safe center` centre tant que ça tient et bascule en début de
      ligne au-delà ; `flex-start` est le repli pour les moteurs qui l'ignorent. */
.dv-pdf-zoom {
    align-items: flex-start;
    align-items: safe center;
    min-width: min-content;
}
.dv-pdf-zoom .dv-page { max-width: none; }
.dv-page {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    background: white;
    max-width: 100%;
    height: auto;
}
.dv-pagecount {
    text-align: center;
    font-size: 11px;
    color: #6b6151;
    padding: 10px 0 4px;
}
.dv-doc {
    background: white;
    border-radius: 10px;
    padding: 28px clamp(16px, 5vw, 48px);
    max-width: 860px;
    margin: 0 auto;
    line-height: 1.65;
    color: #23201b;
    font-size: 15px;
}
.dv-doc h1, .dv-doc h2, .dv-doc h3 { margin: 1em 0 0.4em; line-height: 1.25; }
.dv-doc p { margin: 0 0 0.7em; }
.dv-doc img { max-width: 100%; height: auto; }
.dv-doc table { border-collapse: collapse; width: 100%; margin: 10px 0; }
.dv-doc td, .dv-doc th { border: 1px solid rgba(120, 100, 70, 0.3); padding: 5px 9px; font-size: 13px; }
.dv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.dv-tab {
    border: 1px solid rgba(120, 100, 70, 0.3);
    background: white;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    color: #282828;
}
.dv-tab.active { background: #282828; color: #fff; border-color: #282828; }
.dv-sheet { overflow: auto; background: white; border-radius: 10px; padding: 8px; }
.dv-sheet table { border-collapse: collapse; font-size: 12.5px; }
.dv-sheet td { border: 1px solid rgba(120, 100, 70, 0.25); padding: 4px 8px; white-space: nowrap; }
.dv-text {
    background: white;
    border-radius: 10px;
    padding: 16px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    color: #23201b;
}
@media (max-width: 640px) {
    /* Sur mobile la modale devient une VRAIE surface plein écran (100 %/100 %,
       rayon 0) et le padding:14px de l'overlay — seule marge qui la tenait à
       l'écart des bords — est annulé. En PWA, l'en-tête et son ✕ atterrissaient
       donc sous la barre d'état : plus moyen de fermer le visualiseur.
       UN SEUL niveau par bord : le haut sur l'en-tête (son fond continue sous la
       barre d'état, seul son contenu descend), le bas et les côtés sur la modale
       (le corps défilant est déjà raccourci d'autant). */
    .dv-overlay { padding: 0; }
    .dv-modal {
        width: 100%; height: 100%; border-radius: 0;
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    .dv-header { padding-top: calc(10px + env(safe-area-inset-top)); }
}
/* — thème sombre — */
body[data-gtheme="dark"] .dv-modal { background: #201d19; }
body[data-gtheme="dark"] .dv-header { background: #2b2823; border-bottom-color: rgba(221, 203, 164, 0.16); }
body[data-gtheme="dark"] .dv-name,
body[data-gtheme="dark"] .dv-actions button { color: rgba(255, 255, 255, 0.85); }
body[data-gtheme="dark"] .dv-actions button { border-color: rgba(221, 203, 164, 0.25); }
body[data-gtheme="dark"] .dv-actions button:hover { background: rgba(221, 203, 164, 0.13); }
body[data-gtheme="dark"] .dv-loading, body[data-gtheme="dark"] .dv-error, body[data-gtheme="dark"] .dv-pagecount { color: rgba(255, 255, 255, 0.5); }
body[data-gtheme="dark"] .dv-tab { background: #2b2823; color: rgba(255, 255, 255, 0.8); border-color: rgba(221, 203, 164, 0.2); }
body[data-gtheme="dark"] .dv-tab.active { background: #DDCBA4; color: #201d19; border-color: #DDCBA4; }
/* Documents/tableaux/texte restent sur fond BLANC en sombre : fidèle au fichier
   (un PDF/Word est un objet blanc) et lisible sans réécrire les couleurs du contenu. */
.dv-err-detail { display: inline-block; margin-top: 10px; opacity: 0.6; font-size: 11px; }

/* =====================================================================
   Appels — bulles dans Messages + overlay d'appel entrant (UX Messenger)
   ===================================================================== */
.chat-pane-call {
    background: none;
    border: none;
    font-size: 17px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
}
.chat-pane-call:hover { background: rgba(120, 100, 70, 0.12); }
.chat-call-bubble {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(120, 100, 70, 0.08);
    border: 1px solid rgba(120, 100, 70, 0.2);
    font-size: 13.5px;
}
.chat-call-bubble .chat-call-ic { font-size: 16px; }
.chat-call-live { border-color: #2e7d4f; background: rgba(46, 125, 79, 0.1); }
.chat-call-missed { border-color: rgba(179, 64, 46, 0.5); color: #b3402e; }
.ucard-modal .btn + .btn { margin-top: 8px; }
.chat-pane-title-clickable { cursor: pointer; border-radius: 10px; }
.chat-pane-title-clickable:hover { background: rgba(102, 126, 234, 0.08); }
/* Affordance TACTILE. Le :hover ci-dessus est le seul indice que cet en-tête
   ouvre la liste des membres — et il ne se déclenche jamais au doigt. Le « +N »
   de convDisplayName() passait donc pour du texte tronqué, sans moyen apparent
   de savoir qui étaient ces N personnes (ticket 8cy1sB99J6vxkkbpS9z1). */
.chat-pane-chevron { margin-left: 5px; color: #667eea; font-weight: 700; }
.chat-pane-title-clickable:active { background: rgba(102, 126, 234, 0.14); }
.chat-members-modal {
    max-width: 420px; width: min(92vw, 420px); max-height: 70vh;
    display: flex; flex-direction: column;
    background: #fff; color: #282828;
    border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
    margin-top: 8vh;
}
body[data-gtheme="dark"] .chat-members-modal { background: #332f28; color: #f0ead9; }
.chat-members-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
/* h3 en flex:1 pour que le crayon et la croix restent COLLÉS à droite : avec
   space-between et trois enfants, le crayon serait allé se planter au milieu. */
.chat-members-head h3 { margin: 0; font-size: 16px; flex: 1; }
.chat-members-close, .chat-members-rename { background: none; border: none; font-size: 16px; cursor: pointer; color: inherit; opacity: 0.7; }
.chat-members-close:hover, .chat-members-rename:hover { opacity: 1; }
/* Cible tactile confortable : le crayon est le geste que L. Nolet réclamait le
   09/09, et il se clique sur un téléphone, en champ. */
.chat-members-rename { padding: 4px 8px; margin-right: 2px; }
.chat-members-rename[hidden] { display: none; }
.chat-members-list { overflow-y: auto; padding: 0 10px 12px; }
.chat-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 12px; }
.chat-member-row:hover { background: rgba(102, 126, 234, 0.07); }
.cm-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.cm-initial { display: inline-flex; align-items: center; justify-content: center; background: rgba(102, 126, 234, 0.22); font-weight: 700; }
.cm-name { font-weight: 600; font-size: 14px; }
.cm-mail { font-size: 12px; opacity: 0.65; }
/* Le ✕ « retirer de la conversation », poussé à droite de la ligne. Le bloc
   nom+courriel prend la place restante et tronque : une adresse longue
   (prenom.nom@lafeuilleverte.ca) repoussait sinon le bouton hors du panneau. */
.cm-txt { flex: 1; min-width: 0; }
.cm-name, .cm-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-remove {
    flex: none; margin-left: auto; background: none; border: none; cursor: pointer;
    color: inherit; font-size: 14px; line-height: 1; padding: 6px 8px; border-radius: 8px;
    opacity: 0; transition: opacity 0.12s ease, background 0.12s ease;
}
/* Discret au repos, franc au survol — la liste reste d'abord un annuaire.
   Sur écran tactile (pas de survol) et au clavier, il est toujours visible :
   sinon le bouton n'existerait tout simplement pas sur téléphone. */
.chat-member-row:hover .cm-remove, .cm-remove:focus-visible { opacity: 0.75; }
.cm-remove:hover { opacity: 1; background: rgba(220, 53, 69, 0.14); color: #dc3545; }
.cm-remove:disabled { opacity: 0.35; cursor: default; background: none; }
@media (hover: none) { .cm-remove { opacity: 0.6; } }

/* ── Annonce globale (📣) : popup centré, aux couleurs de l'app, 2 thèmes ── */
.gannounce-overlay {
    /* AU-DESSUS de la salle d'appel (10070) : Dany n'a pas vu l'annonce test
       parce qu'il était en réunion — le popup passait dessous. */
    position: fixed; inset: 0; z-index: 10090;
    background: rgba(30, 26, 20, 0.55); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    /* Une annonce s'ouvre PAR-DESSUS tout, sans qu'on l'ait demandée : si son
       bouton « OK » ou son titre tombe sous une barre système, on ne peut plus
       s'en débarrasser. Réserve aux deux bouts. */
    padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
}
.gannounce-card {
    background: #FDFBF6; color: #282828;
    border: 1px solid rgba(168, 134, 63, 0.35);
    border-top: 4px solid #A8863F;
    border-radius: 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    max-width: 520px; width: min(94vw, 520px);
    /* La carte ne déborde jamais de l'écran — le corps défile. Le `100%` la
       borne à la boîte de CONTENU de l'overlay, insets déduits ; le 88vh reste
       en repli pour les moteurs sans dvh, qui jetteraient tout le min(). */
    max-height: 88vh;
    max-height: min(88dvh, 100%);
    padding: 22px 24px; display: flex; flex-direction: column; gap: 10px;
}
.gannounce-head { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em; }
.gannounce-author { font-size: 0.82rem; font-weight: 700; color: #8a7a5c; text-transform: uppercase; letter-spacing: 0.06em; }
.gannounce-msg { font-size: 0.98rem; line-height: 1.55; overflow-wrap: break-word; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
.gannounce-ok { align-self: flex-end; margin-top: 6px; }
.gannounce-hint { font-size: 0.82rem; color: #8a7a5c; }

/* ── Pièce jointe de l'annonce (22/09/2026) ──────────────────────────────
   Melissa avait un PLAN de stationnement annoté. Un texte qui décrit une zone
   jaune ne remplace pas le plan : l'image doit être VISIBLE dans le popup,
   sans clic, sinon elle n'existe pas.
   `flex: 0 0 auto` + `max-height` en vh : c'est le TEXTE qui cède et défile
   quand la place manque, pas l'image qui se réduit à une bande illisible. */
.gannounce-att { flex: 0 0 auto; min-height: 0; }
.gannounce-img {
    display: block; width: 100%; max-height: 38vh; object-fit: contain;
    border-radius: 12px; border: 1px solid rgba(107, 90, 58, 0.22);
    background: rgba(107, 90, 58, 0.06); cursor: zoom-in;
}
/* Le PDF ne s'affiche pas dans la carte : il s'ouvre. Un bouton franc vaut
   mieux qu'une vignette qu'on croit cliquable sans savoir ce qu'elle fera. */
.gannounce-file { display: inline-flex; align-items: center; gap: 8px; }
.gannounce-att-name { font-size: 0.82rem; color: #8a7a5c; overflow-wrap: anywhere; }
/* Aperçu dans le composeur : plus petit, on y vérifie le cadrage, pas le détail. */
.gannounce-att--compose .gannounce-img { max-height: 22vh; cursor: default; }
.gannounce-file-input { display: none; }
.gannounce-when, .gannounce-attach-btn, .gannounce-audience, .gannounce-groups {
    border: 1px solid rgba(107, 90, 58, 0.3); border-radius: 10px;
    padding: 8px 10px; font: inherit; background: #fff; color: inherit;
}
.gannounce-attach-btn, .gannounce-groups { cursor: pointer; }
/* Le menu des listes peut porter des noms longs : il prend la place
   disponible plutot que de pousser le bouton hors de la carte. */
.gannounce-audience { flex: 1 1 12rem; min-width: 0; max-width: 22rem; }
.gannounce-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; cursor: pointer; }
.gannounce-when-lbl { font-size: 0.82rem; color: #8a7a5c; }
.gannounce-input {
    width: 100%; resize: vertical; min-height: 110px;
    border: 1px solid rgba(107, 90, 58, 0.3); border-radius: 12px;
    padding: 10px 12px; font: inherit; background: #fff; color: inherit;
}
.gannounce-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gannounce-duration {
    border: 1px solid rgba(107, 90, 58, 0.3); border-radius: 10px;
    padding: 8px 10px; font: inherit; background: #fff; color: inherit;
}
.gannounce-send { margin-left: auto; }
body[data-gtheme="dark"] .gannounce-card { background: #332f28; color: #f0ead9; border-color: rgba(221, 203, 164, 0.28); border-top-color: #D9BC77; }
body[data-gtheme="dark"] .gannounce-author, body[data-gtheme="dark"] .gannounce-hint { color: #b8a985; }
body[data-gtheme="dark"] .gannounce-input, body[data-gtheme="dark"] .gannounce-duration,
body[data-gtheme="dark"] .gannounce-when, body[data-gtheme="dark"] .gannounce-attach-btn,
body[data-gtheme="dark"] .gannounce-audience, body[data-gtheme="dark"] .gannounce-groups { background: #241F19; color: #f0ead9; border-color: rgba(221, 203, 164, 0.25); }
body[data-gtheme="dark"] .gannounce-att-name, body[data-gtheme="dark"] .gannounce-when-lbl { color: #b8a985; }
body[data-gtheme="dark"] .gannounce-img { border-color: rgba(221, 203, 164, 0.22); background: rgba(221, 203, 164, 0.07); }

/* Vue riche du composeur : le jeton [img:…] s'affiche comme vignette */
.gc-rich-mirror {
    position: absolute; inset: 0; z-index: 0;
    white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
    overflow: hidden; pointer-events: none;
    background: transparent;
}
.gc-rich-wrap > textarea { position: relative; z-index: 1; width: 100%; }
.gc-rich-wrap.gc-rich-on > textarea {
    color: transparent !important;
    background: transparent !important;
}
.gc-rich-token {
    /* SEULE l'image se voit (contain, à gauche) — pas de fond ni de cadre sur
       toute la largeur du jeton : fini la « traîne » grise étirée. */
    background-size: contain; background-repeat: no-repeat; background-position: left center;
    color: transparent !important;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.chat-bot-link { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(102, 126, 234, 0.5); }

/* Liens dans les messages de conversation — thème CLAIR : ils prennent la
   couleur du TEXTE de leur bulle (blanc sur mes bulles sombres, noir sur les
   bulles claires reçues) et restent SOULIGNÉS pour rester identifiables. Le
   bleu navigateur par défaut était illisible sur les bulles sombres. En thème
   sombre, la règle plus spécifique body[data-gtheme="dark"] .chat-msg-content a
   (juste en dessous) garde le beige lisible — pas de régression. */
.chat-msg-own .chat-msg-content a,
.chat-msg-other .chat-msg-content a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: currentColor;
    word-break: break-word;
}

/* Liens dans les CONTENUS (messages, commentaires, notes, tickets) : le bleu
   navigateur est illisible sur fond sombre → blanc cassé souligné. */
body[data-gtheme="dark"] .chat-msg-content a,
body[data-gtheme="dark"] .tasks-comment-content a,
body[data-gtheme="dark"] .tasks-detail-desc a,
body[data-gtheme="dark"] .note-view-body a,
body[data-gtheme="dark"] .sup-thread a,
body[data-gtheme="dark"] .ai-msg a,
body[data-gtheme="dark"] #changelog-article a,
body[data-gtheme="dark"] .gannounce-msg a {
    color: #F0EAD9;
    text-decoration: underline;
    text-decoration-color: rgba(240, 234, 217, 0.5);
}

.groom-tr-lang { font-size: 10px; opacity: .55; font-style: normal; margin-left: 5px;
    background: rgba(221, 203, 164, 0.16); border-radius: 999px; padding: 1px 6px; cursor: help; }
/* 🏕️ Mini-import Basecamp personnel (modale Réglages) */
.bcm-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
.bcm-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--gs-line, #E3DCCB);
    border-radius: 10px; cursor: pointer; font-size: 14px; }
/* La règle globale `input { width:100% … }` étire la case sur toute la rangée
   et écrase le nom (largeur 0 + overflow:hidden) — même piège que .dup-modal. */
.bcm-row input[type="checkbox"] { width: auto !important; flex: none; padding: 0 !important; margin: 0 !important; min-width: 0; }
.bcm-row:hover { border-color: var(--gs-accent, #A8863F); }
.bcm-row.bcm-done { opacity: .55; cursor: default; }
.bcm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcm-badge { flex-shrink: 0; font-size: 11px; border-radius: 999px; padding: 2px 9px; background: rgba(168, 134, 63, 0.14); }
.bcm-badge.bcm-ok { background: rgba(90, 160, 90, 0.16); }
.bcm-status { margin-top: 10px; font-size: 13px; opacity: .8; }

.tasks-icon-none { font-size: 12px; opacity: .6; font-style: italic; }
.rn-gcal-badge { font-size: 12px; opacity: .8; margin-left: 4px; }
.rn-gcal-note { opacity: .8; font-style: italic; margin-top: 8px; }

/* ✉️ Bouton d'envoi de brouillon Gmail sous un message de l'Assistant */
.ai-draft-send {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 8px; padding: 10px 12px; border-radius: 12px;
    border: 1px solid rgba(168, 134, 63, 0.35);
    background: rgba(168, 134, 63, 0.08);
}
.ai-draft-send-info { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ai-draft-send-btn {
    border: none; border-radius: 999px; padding: 8px 16px; cursor: pointer;
    font-weight: 700; font-size: 13px; font-family: inherit;
    background: #A8863F; color: #FFF8EA; transition: transform .12s, filter .12s;
}
.ai-draft-send-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ai-draft-send-btn:disabled { opacity: .6; cursor: default; transform: none; }
.ai-draft-send-gmail { font-size: 12px; opacity: .75; }
.ai-draft-sent { border-color: rgba(90, 160, 90, 0.45); background: rgba(90, 160, 90, 0.10); }
body[data-gtheme="dark"] .ai-draft-send { background: rgba(221, 203, 164, 0.07); border-color: rgba(221, 203, 164, 0.3); }
body[data-gtheme="dark"] .ai-draft-send-btn { background: #DDCBA4; color: #2A2415; }
body[data-gtheme="dark"] .ai-draft-sent { border-color: rgba(140, 200, 140, 0.4); background: rgba(140, 200, 140, 0.08); }

.gc-inline-img {
    /* ⚠️ pas de % dans max-width : ici la bulle est en inline-block
       (shrink-to-fit), où un % est cyclique → ignoré au calcul intrinsèque, et
       la bulle se dimensionnait sur la largeur NATURELLE de la capture
       (immense vide à droite de l'image). Le calc vw n'est pas cyclique ;
       80vw − 110px = place réelle de la bulle mobile (70vw débordait de la
       colonne, ticket UsmGYJdaaacT7i75uldt).
       NB : .chat-att-img ne suit PLUS cette approche — sa bulle à lui est un
       élément FLEX, et l'arithmétique de viewport s'y trompait de 57 px
       (ticket SHPiB). Voir .chat-att-imgwrap. Si cette bulle-ci devenait un
       jour flex, le même partage conteneur/image s'appliquerait. */
    display: block; max-width: min(340px, calc(80vw - 110px)); max-height: 300px;
    border-radius: 10px; margin: 6px 0; cursor: zoom-in;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
/* ── Visionneuse-galerie partagée (messages, commentaires, notes, articles,
   CRM, Agent IA) — public/js/img-gallery.js ───────────────────────────────
   z-index 10065 : au-dessus des overlays de contenu (doc-viewer, détails…),
   sous la salle d'appel (10080) et l'annonce globale (10090). Le suffixe
   « -overlay » est requis : version-check.js diffère le rechargement
   automatique tant qu'un overlay est ouvert. Voile sombre dans les deux
   thèmes (comme la lightbox qu'elle remplace). */
.gimg-gallery-overlay {
    position: fixed; inset: 0; z-index: 10065;
    background: rgba(20, 18, 14, 0.94); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    overscroll-behavior: contain;
    -webkit-user-select: none; user-select: none;
}
.gimg-track {
    display: flex; width: 100%; height: 100%;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior: contain; touch-action: pan-x pinch-zoom;
}
.gimg-track::-webkit-scrollbar { display: none; }
.gimg-slide {
    flex: 0 0 100%; min-width: 100%; scroll-snap-align: center;
    display: flex; align-items: center; justify-content: center; position: relative;
    padding: 56px 12px 44px;
}
.gimg-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.gimg-slide:not(.is-ready) .gimg-img { display: none; }
.gimg-state {
    position: absolute; color: #fff; font-size: 14px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.gimg-retry {
    border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px;
    background: transparent; color: #fff; padding: 6px 14px;
    font: inherit; font-size: 13px; cursor: pointer;
}
.gimg-close {
    z-index: 2; /* au-dessus des diapos (positionnées, postérieures dans le DOM) */
    position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px;
    width: 40px; height: 40px; border: none; border-radius: 50%;
    background: rgba(20, 18, 14, 0.55); color: #fff; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.gimg-count {
    z-index: 2; /* au-dessus des diapos (positionnées, postérieures dans le DOM) */
    position: fixed; top: max(20px, calc(env(safe-area-inset-top) + 6px)); left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 18, 14, 0.55); color: #fff;
    font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 10px;
    pointer-events: none;
}
.gimg-nav {
    z-index: 2; /* au-dessus des diapos (positionnées, postérieures dans le DOM) */
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: none; border-radius: 50%;
    background: rgba(20, 18, 14, 0.55); color: #fff; font-size: 26px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.gimg-prev { left: 12px; }
.gimg-next { right: 12px; }
.gimg-nav[disabled] { opacity: 0.25; cursor: default; }
@media (hover: none) { .gimg-nav { display: none; } } /* tactile : on glisse */
.gimg-dots {
    z-index: 2; /* au-dessus des diapos (positionnées, postérieures dans le DOM) */
    position: fixed; bottom: max(14px, env(safe-area-inset-bottom));
    left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
.gimg-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.gimg-dot.on { background: #fff; }
.gimg-dl {
    z-index: 2; /* au-dessus des diapos (positionnées, postérieures dans le DOM) */
    position: fixed; bottom: max(30px, calc(env(safe-area-inset-bottom) + 16px)); left: 50%;
    transform: translateX(-50%); border: none; border-radius: 999px;
    background: rgba(255, 255, 255, 0.15); color: #fff; padding: 8px 16px;
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.gimg-dl.hidden { display: none; }
.gimg-solo .gimg-nav, .gimg-solo .gimg-count, .gimg-solo .gimg-dots { display: none; }

/* ── WSWNW — bilan hebdomadaire (What · So What · Now What) ── */
.wswnw-wrap { max-width: 860px; margin: 0 auto; padding: 20px 16px 60px; }
.wswnw-hero {
    background: linear-gradient(135deg, var(--chanv-terre, #282828), #4a3e2a);
    color: #fff; border-radius: 16px; padding: 26px 28px 22px; margin-bottom: 18px;
    position: relative; overflow: hidden;
}
.wswnw-hero h2 { margin: 10px 0 8px; font-size: 24px; font-family: 'Outfit', sans-serif; }
.wswnw-hero p { margin: 0; font-size: 13.5px; line-height: 1.55; opacity: 0.85; max-width: 640px; }
.wswnw-hero-line {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 10px; font-weight: 800; letter-spacing: 0.18em; opacity: 0.7;
}
.wswnw-hero-line::before, .wswnw-hero-line::after { content: none; }
.wswnw-hero-line span { position: relative; padding: 0 2px; }
.wswnw-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.wswnw-tab {
    flex: 1; padding: 9px 12px; border: 1px solid #e8e2d6; border-radius: 10px;
    background: #faf7f0; color: #6b5a3a; font-family: inherit; font-size: 13.5px;
    font-weight: 600; cursor: pointer;
}
.wswnw-tab.on { background: var(--chanv-terre, #282828); border-color: var(--chanv-terre, #282828); color: #fff; }
.wswnw-card {
    background: #fff; border: 1px solid #e8e2d6; border-left: 4px solid var(--chanv-beige, #DDCBA4);
    border-radius: 12px; padding: 16px 18px; margin-bottom: 12px;
}
.wswnw-label { display: block; font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.wswnw-label span { font-weight: 500; font-size: 13px; opacity: 0.75; }
.wswnw-label-sub { font-weight: 600; font-size: 13px; margin-top: 10px; }
.wswnw-card textarea {
    width: 100%; box-sizing: border-box; resize: none; overflow: hidden;
    border: 1px solid rgba(107, 90, 58, 0.25); border-radius: 10px;
    padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.5;
    background: transparent; color: inherit;
}
.wswnw-card textarea[readonly] { opacity: 0.85; border-style: dashed; }
.wswnw-ta-tools { display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; }
.wswnw-polish-btn, .wswnw-revert-btn {
    border: 1px solid rgba(168, 134, 63, 0.4); border-radius: 999px;
    background: rgba(168, 134, 63, 0.08); color: #6b5a3a;
    padding: 4px 12px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.wswnw-polish-btn:hover, .wswnw-revert-btn:hover { background: rgba(168, 134, 63, 0.16); }
.wswnw-polish-btn:disabled { opacity: 0.6; cursor: wait; }
.wswnw-polish-note { font-size: 11.5px; opacity: 0.55; }
.wswnw-locked-banner {
    background: rgba(107, 90, 58, 0.1); border: 1px solid rgba(107, 90, 58, 0.3);
    border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; margin-bottom: 12px;
}
body[data-gtheme="dark"] .wswnw-polish-btn, body[data-gtheme="dark"] .wswnw-revert-btn {
    border-color: rgba(221, 203, 164, 0.3); background: rgba(221, 203, 164, 0.08); color: #d9c9a5;
}
body[data-gtheme="dark"] .wswnw-locked-banner { background: rgba(221, 203, 164, 0.08); border-color: rgba(221, 203, 164, 0.25); }
.wswnw-meta { display: flex; gap: 18px; font-size: 13.5px; font-weight: 600; margin-bottom: 12px; flex-wrap: wrap; }
.wswnw-prefill-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wswnw-prefill-hint { font-size: 12.5px; opacity: 0.7; flex: 1; min-width: 220px; }
.wswnw-radio-row { display: flex; gap: 22px; margin: 4px 0 6px; }
.wswnw-radio { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.wswnw-actions { display: flex; align-items: center; gap: 16px; margin: 18px 0 8px; }
.wswnw-weekend { font-size: 13.5px; opacity: 0.75; font-weight: 600; }
.wswnw-done-banner {
    background: rgba(45, 125, 70, 0.1); border: 1px solid rgba(45, 125, 70, 0.35);
    color: #2d7d46; border-radius: 10px; padding: 10px 14px; font-size: 13.5px;
    font-weight: 600; margin-bottom: 12px;
}
/* Rattrapage d'un vendredi oublié : ni une erreur (rouge) ni un succès (vert) —
   une échéance encore ouverte, donc le même ambre que le reste des rappels. */
.wswnw-catchup-banner {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: rgba(168, 134, 63, 0.12); border: 1px solid rgba(168, 134, 63, 0.4);
    border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 12px;
}
.wswnw-catchup-banner > span { flex: 1; min-width: 240px; }
.wswnw-catchup-banner .btn { flex: none; }
body[data-gtheme="dark"] .wswnw-catchup-banner {
    background: rgba(221, 203, 164, 0.1); border-color: rgba(221, 203, 164, 0.32); color: #ddcba4;
}
.wswnw-history { font-size: 12.5px; opacity: 0.65; margin-top: 6px; }
.wswnw-loading { text-align: center; padding: 50px 20px; opacity: 0.65; }
.wswnw-review-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wswnw-week-pick {
    border: 1px solid rgba(107, 90, 58, 0.3); border-radius: 10px;
    padding: 8px 10px; font: inherit; background: transparent; color: inherit;
}
.wswnw-counts { font-weight: 700; font-size: 13.5px; margin-right: auto; }
.wswnw-missing {
    background: rgba(200, 137, 31, 0.1); border: 1px solid rgba(200, 137, 31, 0.35);
    border-radius: 10px; padding: 9px 14px; font-size: 13px; margin-bottom: 12px;
}
.wswnw-synth { border-left-color: #A8863F; font-size: 14px; line-height: 1.6; }
.wswnw-synth.stale { opacity: 0.75; }
.wswnw-stale-note { font-size: 12.5px; font-weight: 700; color: #a86a12; margin-bottom: 8px; }
.wswnw-sub-list { margin-top: 6px; }
.wswnw-sub-row {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #e8e2d6; border-radius: 10px;
    padding: 11px 14px; margin-bottom: 6px; cursor: pointer;
}
.wswnw-sub-row:hover { border-color: var(--chanv-beige, #DDCBA4); }
.wswnw-sub-row.warn { border-left: 4px solid #b3402e; }
.wswnw-sub-name { font-weight: 700; font-size: 14px; }
.wswnw-sub-when { font-size: 12px; opacity: 0.6; }
.wswnw-sub-detail {
    background: #faf7f0; border: 1px solid #eee4d2; border-radius: 10px;
    padding: 12px 16px; margin: -2px 0 10px; font-size: 14px; line-height: 1.55;
}
.wswnw-sub-detail h4 { margin: 10px 0 4px; font-size: 12px; letter-spacing: 0.08em; opacity: 0.7; }

/* Sections WHAT / SO WHAT / NOW WHAT — séparations NETTES pour la lecture de
   David (retour 24/07). Étiquette colorée par section + trait de séparation. */
.wswnw-sec { padding: 14px 0 2px; border-top: 2px solid rgba(107, 90, 58, 0.16); }
.wswnw-sec:first-of-type { border-top: none; padding-top: 4px; }
.wswnw-sec > h4 {
    display: inline-block; margin: 0 0 9px; padding: 4px 13px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.12em; opacity: 1;
    color: #fff; border-radius: 999px;
}
.wswnw-sec-what > h4 { background: #155799; }
.wswnw-sec-so   > h4 { background: #A8863F; }
.wswnw-sec-now  > h4 { background: #2d7d46; }
.wswnw-sec > div { font-size: 14px; line-height: 1.6; }
.wswnw-sec-confidence {
    margin-top: 16px; padding-top: 12px; border-top: 2px solid rgba(107, 90, 58, 0.16);
    font-size: 12.5px; font-weight: 700; opacity: 0.8;
}
/* Bouton « Synthèse IA de cette fiche » en tête de chaque bilan */
.wswnw-person-synth-row { margin: 0 0 6px; }
.wswnw-person-synth-btn {
    border: 1.5px solid rgba(168, 134, 63, 0.55); border-radius: 999px;
    background: rgba(168, 134, 63, 0.12); color: #6b5a3a;
    padding: 6px 16px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
    transition: background 0.15s;
}
.wswnw-person-synth-btn:hover { background: rgba(168, 134, 63, 0.22); }
.wswnw-person-synth-btn:disabled { opacity: 0.6; cursor: wait; }
.wswnw-person-synth-box { margin: 8px 0 4px; }
body[data-gtheme="dark"] .wswnw-person-synth-btn {
    border-color: rgba(221, 203, 164, 0.35); background: rgba(221, 203, 164, 0.1); color: #d9c9a5;
}
body[data-gtheme="dark"] .wswnw-sec,
body[data-gtheme="dark"] .wswnw-sec-confidence { border-top-color: rgba(221, 203, 164, 0.18); }
.wswnw-solution { background: rgba(168, 134, 63, 0.08); border-radius: 8px; padding: 8px 12px; margin-top: 8px; }
/* Vendredi non soumis : libellé de nav en alerte (le badge « ! » est déjà rouge) */
.gshell-item-due { color: var(--gs-crit, #b3402e) !important; font-weight: 700; }
/* Thème sombre */
body[data-gtheme="dark"] .wswnw-tab { background: #241F19; border-color: rgba(221, 203, 164, 0.2); color: #d9c9a5; }
body[data-gtheme="dark"] .wswnw-tab.on { background: #D9BC77; border-color: #D9BC77; color: #241F19; }
body[data-gtheme="dark"] .wswnw-card,
body[data-gtheme="dark"] .wswnw-sub-row { background: #2A251D; border-color: rgba(221, 203, 164, 0.16); }
body[data-gtheme="dark"] .wswnw-sub-detail { background: #241F19; border-color: rgba(221, 203, 164, 0.12); }
body[data-gtheme="dark"] .wswnw-card textarea,
body[data-gtheme="dark"] .wswnw-week-pick { border-color: rgba(221, 203, 164, 0.25); }
body[data-gtheme="dark"] .wswnw-done-banner { background: rgba(129, 199, 132, 0.1); border-color: rgba(129, 199, 132, 0.3); color: #81c784; }
/* Le dark mode du hub ne redéfinit pas --text-main (#282828) : chaque app doit
   reposer une couleur de texte claire. WSWNW ne le faisait pas → texte quasi-noir
   sur cartes sombres = « écriture illisible » (retour David 24/07). Une couleur
   héritée claire sur .wswnw-wrap répare tous les textes qui n'imposent pas déjà la
   leur : textareas (color:inherit), labels, sections du bilan, bannières, liste
   « manquants »… Les onglets/boutons/pastilles gardent leur couleur (l'héritage est
   toujours plus faible qu'une déclaration directe). */
body[data-gtheme="dark"] .wswnw-wrap { color: #e8dcc4; }
body[data-gtheme="dark"] .wswnw-missing { background: rgba(200, 137, 31, 0.14); border-color: rgba(200, 137, 31, 0.4); }
body[data-gtheme="dark"] .wswnw-stale-note { color: #e0a03a; }

/* ── Onglet Managers : nommer un lecteur et lui donner ses gens ──
   Mêmes jetons de couleur que le reste du module (bordures #e8e2d6, fonds
   #faf7f0, encre #6b5a3a) : un second jeu à tenir aurait dérivé au premier
   ajustement du thème. */
.wswnw-scope-note {
    margin: 0 0 10px; padding: 7px 12px; border-radius: 9px;
    background: rgba(168, 134, 63, 0.1); border: 1px solid rgba(168, 134, 63, 0.3);
    font-size: 12.5px;
}
body[data-gtheme="dark"] .wswnw-scope-note { background: rgba(221, 203, 164, 0.1); border-color: rgba(221, 203, 164, 0.28); }
.wswnw-mgr { display: flex; flex-direction: column; gap: 14px; }
.wswnw-mgr-add {
    background: #faf7f0; border: 1px solid #e8e2d6; border-radius: 12px; padding: 14px 16px;
}
.wswnw-mgr-add h3 { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.wswnw-mgr-add p { margin: 0 0 10px; font-size: 13px; opacity: 0.8; }
.wswnw-mgr-warn { margin: 8px 0 0; font-size: 12.5px; color: #a8863f; }
.wswnw-mgr-list { display: flex; flex-direction: column; gap: 10px; }
.wswnw-mgr-card {
    background: #fff; border: 1px solid #e8e2d6; border-left: 4px solid var(--chanv-beige, #DDCBA4);
    border-radius: 12px; padding: 14px 16px;
}
.wswnw-mgr-card > header { display: flex; align-items: center; gap: 10px; }
.wswnw-mgr-card > header > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wswnw-mgr-card > header strong { font-size: 14.5px; }
.wswnw-mgr-card > header small { font-size: 12px; opacity: 0.7; overflow-wrap: anywhere; }
.wswnw-mgr-del {
    flex: 0 0 auto; border: 1px solid rgba(179, 64, 46, 0.35); border-radius: 999px;
    background: rgba(179, 64, 46, 0.07); color: var(--gs-crit, #b3402e);
    padding: 4px 12px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.wswnw-mgr-people { margin-top: 10px; }
.wswnw-mgr-people > small { display: block; font-size: 12px; font-weight: 700; opacity: 0.7; margin-bottom: 6px; }
.wswnw-mgr-empty { margin: 0 0 8px; font-size: 13px; opacity: 0.7; }
.wswnw-mgr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.wswnw-chip {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0;
    background: rgba(168, 134, 63, 0.1); border: 1px solid rgba(168, 134, 63, 0.35);
    border-radius: 999px; padding: 3px 5px 3px 10px; font-size: 12.5px; overflow-wrap: anywhere;
}
.wswnw-chip-x {
    flex: 0 0 auto; width: 18px; height: 18px; border: 0; border-radius: 50%;
    background: rgba(107, 90, 58, 0.14); color: inherit; font-size: 13px; line-height: 1;
    cursor: pointer; padding: 0;
}
.wswnw-chip-x:hover { background: rgba(179, 64, 46, 0.2); }

/* Sélecteur de personnes. La liste FLOTTE (position:absolute) : dans le flux,
   elle poussait la carte suivante à chaque frappe et la page sautait. */
.wswnw-pick { position: relative; }
.wswnw-pick__q {
    width: 100%; box-sizing: border-box; border: 1px solid rgba(107, 90, 58, 0.25);
    border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13.5px;
    background: #fff; color: inherit;
}
.wswnw-pick__list {
    position: absolute; z-index: 30; top: 100%; left: 0; right: 0; margin-top: 4px;
    max-height: 244px; overflow-y: auto; background: #fff;
    border: 1px solid #e8e2d6; border-radius: 12px; box-shadow: 0 10px 28px rgba(40, 40, 40, 0.14);
    padding: 4px;
}
.wswnw-pick__list[hidden] { display: none; }
.wswnw-pick__opt { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px; cursor: pointer; }
/* Survol et ligne visée au clavier se ressemblent volontairement : c'est la
   même notion pour la personne qui regarde l'écran. */
.wswnw-pick__opt:hover, .wswnw-pick__opt.is-active { background: rgba(168, 134, 63, 0.12); }
.wswnw-pick__opt.is-active { box-shadow: inset 0 0 0 1px rgba(168, 134, 63, 0.5); }
.wswnw-pick__ph {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; background: rgba(168, 134, 63, 0.16);
    font-size: 11px; font-weight: 700;
}
.wswnw-pick__who { display: flex; flex-direction: column; min-width: 0; }
.wswnw-pick__nom { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wswnw-pick__ml { font-size: 11.5px; opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wswnw-pick__none { font-size: 12.5px; opacity: 0.7; padding: 8px 9px; }

body[data-gtheme="dark"] .wswnw-mgr-add { background: #241F19; border-color: rgba(221, 203, 164, 0.16); }
body[data-gtheme="dark"] .wswnw-mgr-card { background: #2A251D; border-color: rgba(221, 203, 164, 0.16); }
body[data-gtheme="dark"] .wswnw-pick__q,
body[data-gtheme="dark"] .wswnw-pick__list { background: #241F19; border-color: rgba(221, 203, 164, 0.25); color: #e8dcc4; }
body[data-gtheme="dark"] .wswnw-pick__list { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
body[data-gtheme="dark"] .wswnw-pick__opt:hover,
body[data-gtheme="dark"] .wswnw-pick__opt.is-active { background: rgba(221, 203, 164, 0.14); }
body[data-gtheme="dark"] .wswnw-chip { background: rgba(221, 203, 164, 0.12); border-color: rgba(221, 203, 164, 0.3); }
body[data-gtheme="dark"] .wswnw-chip-x { background: rgba(221, 203, 164, 0.18); }
body[data-gtheme="dark"] .wswnw-mgr-warn { color: #e0a03a; }

/* ── Carrousel d'images (≥2 dans un même message/commentaire) ──
   Le cadre est dimensionné en JS sur la 1re image ET sur la place réellement
   disponible (_sizeCarousel, composer.js) : sans ça une capture en portrait
   laissait deux bandes vides et le cadre, large de 70vw, débordait de la
   colonne des messages sur mobile. Ces valeurs ne servent qu'avant le
   chargement de la première image. */
.gc-carousel { position: relative; width: min(340px, 62vw); max-width: 100%; margin: 6px 0; }
.gc-car-track {
    display: flex; overflow-x: auto; height: 100%;
    scroll-snap-type: x mandatory;
    border-radius: 10px; scrollbar-width: none;
}
.gc-car-track::-webkit-scrollbar { display: none; }
.gc-car-slide {
    flex: 0 0 100%; min-width: 100%;
    scroll-snap-align: center;
    display: flex; align-items: center; justify-content: center;
    background: rgba(120, 100, 70, 0.08);
}
.gc-car-slide img {
    max-width: 100%; max-height: 300px; height: auto;
    margin: 0; border-radius: 0; box-shadow: none;
    object-fit: contain; min-width: 0; min-height: 0;
}
/* Cadre calé sur l'image : elle occupe tout le cadre, plus de bandes vides. */
.gc-carousel[data-sized] .gc-car-slide img {
    width: 100%; height: 100%; max-height: none;
}
.gc-car-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border: none; border-radius: 50%;
    background: rgba(20, 18, 14, 0.5); color: #fff;
    font-size: 18px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s;
}
.gc-carousel:hover .gc-car-nav { opacity: 1; }
.gc-car-prev { left: 6px; }
.gc-car-next { right: 6px; }
@media (hover: none) { .gc-car-nav { display: none; } } /* tactile : on glisse */
.gc-car-count {
    position: absolute; top: 6px; right: 8px;
    background: rgba(20, 18, 14, 0.55); color: #fff;
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
    pointer-events: none;
}
.gc-car-dots { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; pointer-events: none; }
.gc-car-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); }
.gc-car-dot.on { background: #fff; }

.chat-call-tr {
    background: rgba(102, 126, 234, 0.14); border: none; cursor: pointer;
    padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: inherit;
}
.chat-call-tr:hover { background: rgba(102, 126, 234, 0.3); }
.chat-transcript-modal { max-width: 640px; width: min(94vw, 640px); max-height: 80vh; }
.chat-transcript-list { padding: 0 16px 16px; }
.chat-tr-turn { margin: 0 0 10px; font-size: 0.92rem; line-height: 1.5; }
.chat-tr-turn b { display: block; font-size: 0.8rem; opacity: 0.75; margin-bottom: 2px; }

.chat-genmedia-actions { display: flex; gap: 6px; margin-top: 6px; }
.chat-genmedia-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(102, 126, 234, 0.14);
    color: inherit; text-decoration: none;
    border: none; cursor: pointer;
    padding: 4px 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
}
.chat-genmedia-btn:hover { background: rgba(102, 126, 234, 0.32); }
body[data-gtheme="dark"] .chat-genmedia-btn { background: rgba(102, 126, 234, 0.28); }
body[data-gtheme="dark"] .chat-genmedia-btn:hover { background: rgba(102, 126, 234, 0.45); }

.chat-call-join {
    background: #2e7d4f;
    color: #fff !important;
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12.5px;
}
.chat-call-end {
    background: none;
    border: 1px solid rgba(120, 100, 70, 0.3);
    border-radius: 8px;
    cursor: pointer;
    padding: 2px 8px;
}
.gcall-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 13, 10, 0.72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10080;
    padding: 20px;
}
.gcall-card {
    background: #201d19;
    color: rgba(255, 255, 255, 0.92);
    border-radius: 22px;
    padding: 34px 30px 26px;
    width: min(360px, 100%);
    text-align: center;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
    animation: gcallPulse 1.6s ease-in-out infinite;
}
@keyframes gcallPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.015); }
}
@media (prefers-reduced-motion: reduce) { .gcall-card { animation: none; } }
.gcall-avatar {
    width: 84px; height: 84px;
    border-radius: 50%;
    margin: 0 auto 14px;
    background: #332f28;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px;
    overflow: hidden;
}
.gcall-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gcall-name { font-size: 20px; font-weight: 750; margin-bottom: 4px; }
.gcall-sub { font-size: 13px; color: rgba(255, 255, 255, 0.55); margin-bottom: 22px; }
.gcall-actions { display: flex; gap: 12px; justify-content: center; }
.gcall-actions button {
    border: none;
    border-radius: 999px;
    padding: 12px 26px;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.gcall-answer { background: #2e7d4f; color: #fff; }
.gcall-answer:hover { background: #256742; }
.gcall-decline { background: #b3402e; color: #fff; }
.gcall-decline:hover { background: #96331f; }
body[data-gtheme="dark"] .chat-pane-call:hover { background: rgba(221, 203, 164, 0.13); }
body[data-gtheme="dark"] .chat-call-bubble { background: rgba(221, 203, 164, 0.08); border-color: rgba(221, 203, 164, 0.2); }
body[data-gtheme="dark"] .chat-call-live { border-color: #6fbf8f; background: rgba(111, 191, 143, 0.12); }
body[data-gtheme="dark"] .chat-call-missed { color: #e07a5f; border-color: rgba(224, 122, 95, 0.5); }

/* Vidéos en pièces jointes / générées — lecteurs inline (Messages + Tâches) */
.chat-att-videowrap, .gc-att-videowrap { max-width: 380px; }
.chat-att-video, .gc-att-video {
    width: 100%;
    border-radius: 12px;
    background: #000;
    display: block;
}
.gc-att-videowrap .gc-att-cap { display: block; font-size: 11px; margin-top: 4px; opacity: 0.7; }

/* Repli quand le navigateur refuse la source (conteneur ou codec inconnu) :
   un message et de quoi télécharger, au lieu d'un lecteur figé à 0:00. */
.chat-att-vidfail, .gc-att-vidfail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 12px;
    border: 1px dashed rgba(128, 128, 128, 0.45);
    background: rgba(128, 128, 128, 0.07);
}
/* [hidden] doit l'emporter : .chat-att-file pose display:inline-flex, qui sinon
   écrase le display:none que l'attribut apporte par défaut. */
.chat-att-vidfail[hidden], .gc-att-vidfail[hidden],
.chat-att-vidfail .chat-att-file[hidden], .gc-att-vidfail-dl[hidden] { display: none; }
.chat-att-video[hidden], .gc-att-video[hidden] { display: none; }
.chat-att-vidfail-msg, .gc-att-vidfail-msg { font-size: 12.5px; line-height: 1.45; opacity: 0.85; }
.gc-att-vidfail-dl {
    align-self: flex-start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1px solid rgba(128, 128, 128, 0.4);
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.gc-att-vidfail-dl:hover { background: rgba(128, 128, 128, 0.14); }
body[data-gtheme="dark"] .chat-att-vidfail, body[data-gtheme="dark"] .gc-att-vidfail {
    border-color: rgba(221, 203, 164, 0.28);
    background: rgba(221, 203, 164, 0.07);
}

/* =====================================================================
   CallRoom — salle d'appel intégrée (Phase 2 visio)
   ===================================================================== */
.groom-overlay {
    position: fixed;
    inset: 0;
    background: #14110d;
    z-index: 10070;
    display: flex;
}
/* PWA plein écran (viewport-fit=cover + apple-mobile-web-app-status-bar-style
   black-translucent) : la salle est un overlay `inset: 0`, elle occupe donc TOUT
   l'écran — encoche / Dynamic Island comprise en haut, barre gestuelle comprise
   en bas. Sans réserve, le titre passait SOUS l'horloge iOS et la rangée
   🎙 📷 👤 🖐 sous la barre d'accueil : boutons difficiles voire impossibles à
   toucher (signalé le 2026-08-18, capture à l'appui).
   UN SEUL niveau porte chaque inset — convention maison, cf.
   test/chat-composer-safearea.test.js : deux niveaux s'ADDITIONNENT (max() ne
   déduit pas l'inset du parent) et creusent du vide mort.
   · bas + côtés → la COQUE. Tout ce qui vit en bas (contrôles, badge de nom,
     incrustation « moi », panneau transcript) descend de .groom-body, dont la
     hauteur est déjà réduite d'autant : rien d'autre à retoucher.
   · haut → l'EN-TÊTE seul. Son fond continue sous la barre d'état (plus propre
     qu'une bande vide) ; seul son contenu descend. */
.groom-shell {
    display: flex; flex-direction: column; width: 100%; height: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
.groom-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
    background: #201d19;
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}
.groom-title { font-weight: 750; font-size: 14px; }
.groom-banner {
    font-size: 11.5px;
    background: rgba(224, 164, 74, 0.18);
    color: #e0a44a;
    border: 1px solid rgba(224, 164, 74, 0.4);
    padding: 2px 10px;
    border-radius: 999px;
    animation: groomBlink 2s ease-in-out infinite;
}
@keyframes groomBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .groom-banner { animation: none; } }
.groom-actions { margin-left: auto; display: flex; gap: 8px; }
.groom-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
}
.groom-btn:hover { background: rgba(255, 255, 255, 0.15); }
.groom-btn.on { background: #e0a44a; border-color: #e0a44a; color: #201d19; font-weight: 700; }
.groom-btn-danger { background: #b3402e; border-color: #b3402e; }
.groom-btn-danger:hover { background: #96331f; }
.groom-body { flex: 1; display: flex; min-height: 0; }
.groom-stage { flex: 1; min-width: 0; position: relative; }
.groom-stage iframe { width: 100%; height: 100%; border: none; }

/* Panneau d'état de la salle — « où j'en suis » entre le clic et la présence
   réelle. Couvre la grille : tant qu'il est là, l'utilisateur sait qu'il n'est
   pas (encore) dans l'appel, au lieu de fixer un rectangle noir. */
.groom-conn {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(18, 16, 14, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.groom-conn[hidden] { display: none; }
.groom-conn-card {
    max-width: 380px;
    text-align: center;
    color: #f3efe7;
}
.groom-conn-spin {
    width: 30px;
    height: 30px;
    margin: 0 auto 14px;
    border: 3px solid rgba(224, 164, 74, 0.28);
    border-top-color: #e0a44a;
    border-radius: 50%;
    animation: groomConnSpin 0.85s linear infinite;
}
@keyframes groomConnSpin { to { transform: rotate(360deg); } }
.groom-conn-msg { font-size: 1.02rem; font-weight: 650; line-height: 1.35; }
.groom-conn-hint {
    margin-top: 8px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(243, 239, 231, 0.72);
}
.groom-conn-hint[hidden] { display: none; }
.groom-conn-act {
    margin-top: 16px;
    padding: 9px 20px;
    border: none;
    border-radius: 999px;
    background: #e0a44a;
    color: #201d19;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}
.groom-conn-act:hover { background: #eab463; }
.groom-conn-act[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
    .groom-conn-spin { animation-duration: 2.4s; }
}

/* ── Salon d'attente de l'appelant ──
   Pendant que ça sonne, l'appelant voit QUI il appelle et CE QUI se passe
   (« ça sonne… », « X décroche… », « X a refusé », « pas de réponse ») au lieu
   de fixer sa propre vignette en silence. */
.groom-wait {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(18, 16, 14, 0.86);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.groom-wait[hidden] { display: none; }
.groom-wait-card { max-width: 400px; text-align: center; color: #f3efe7; }
.groom-wait-faces { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; }
.groom-wait-face {
    width: 72px; height: 72px;
    border-radius: 50%;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: rgba(224, 164, 74, 0.2);
    color: #e0a44a;
    font-size: 1.7rem; font-weight: 750;
    border: 2px solid rgba(224, 164, 74, 0.55);
    animation: groomWaitPulse 2s ease-in-out infinite;
}
.groom-wait-face img { width: 100%; height: 100%; object-fit: cover; }
@keyframes groomWaitPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224, 164, 74, 0.45); }
    50% { box-shadow: 0 0 0 12px rgba(224, 164, 74, 0); }
}
@media (prefers-reduced-motion: reduce) { .groom-wait-face { animation: none; } }
.groom-wait-msg { font-size: 1.08rem; font-weight: 700; line-height: 1.35; }
.groom-wait-sub {
    margin-top: 8px;
    min-height: 1.3em;
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgba(243, 239, 231, 0.75);
}
.groom-wait-hang { margin-top: 18px; padding: 9px 22px; border-radius: 999px; font-size: 0.92rem; }

/* Lien pair mort : le bouton « ↻ Reconnecter » vit dans le badge d'état. */
.groom-tile-retry {
    margin-left: 8px;
    padding: 2px 10px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 11.5px;
    cursor: pointer;
    font-family: inherit;
}
.groom-tile-retry:hover { background: rgba(255, 255, 255, 0.24); }

/* Fenêtre d'appel DÉTACHÉE (desktop) : la salle est le seul contenu du popup. */
.groom-popup-body { margin: 0; overflow: hidden; background: #14110d; }
.groom-popup-body .groom-overlay { position: fixed; inset: 0; }

.groom-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    gap: 6px;
}
.groom-loading a { color: #DDCBA4; }
.groom-transcript {
    width: min(340px, 38vw);
    background: #1b1815;
    border-left: 1px solid rgba(221, 203, 164, 0.15);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.groom-tr-head {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    border-bottom: 1px solid rgba(221, 203, 164, 0.12);
}
.groom-tr-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}
.groom-tr-seg { margin-bottom: 8px; }
.groom-tr-seg b { color: #DDCBA4; font-weight: 700; }
@media (max-width: 720px) {
    .groom-body { flex-direction: column; }
    .groom-transcript { width: 100%; height: 32vh; border-left: none; border-top: 1px solid rgba(221, 203, 164, 0.15); }
    .groom-btn span { display: none; }
}

/* Grille vidéo de la salle native (mesh) */
.groom-grid {
    display: grid;
    gap: 8px;
    padding: 10px;
    height: 100%;
    grid-template-columns: 1fr;
    align-items: stretch;
}
.groom-grid { position: relative; }
/* MA caméra en INCRUSTATION (coin bas-droit) dès qu'un autre participant est là */
.groom-grid.pip-self .groom-tile[data-self="1"] {
    position: absolute; right: 14px; bottom: 14px; z-index: 6;
    width: clamp(120px, 22%, 240px); height: auto; aspect-ratio: 16/10;
    border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.groom-tile.groom-leader .groom-tile-name::before { content: '👑 '; }
.groom-tile.groom-hand-up::after {
    content: '🖐'; position: absolute; top: 8px; left: 8px; z-index: 4;
    font-size: 1.4rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    animation: groomHand 1.2s ease-in-out infinite;
}
@keyframes groomHand { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(12deg); } }
.groom-mod {
    position: absolute; top: 8px; right: 8px; z-index: 5;
    display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s;
}
.groom-tile:hover .groom-mod { opacity: 1; }
/* Tactile : l'hôte doit pouvoir modérer (couper micro/cam, éjecter) au doigt. */
@media (hover: none) { .groom-mod { opacity: 1; } }
.groom-mod button {
    width: 30px; height: 30px; border: none; border-radius: 8px; cursor: pointer;
    background: rgba(20, 18, 14, 0.65); color: #fff; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.groom-mod button:hover { background: rgba(179, 38, 30, 0.8); }

/* ══ 👑 Modération : UN point, puis des MOTS (31/08) ══
   Cette rangée affichait 🎙 📷 👑 ⛔ en clair. Sur tactile, @media (hover:none)
   ci-dessus la rend permanente — si bien que 🎙 et 📷 apparaissaient DEUX FOIS
   à l'écran en même temps : une fois dans mes contrôles pour « mon micro / ma
   caméra », une fois ici pour « couper les SIENS ». Même glyphe, cible opposée,
   et l'un est une bascule d'état quand l'autre est un ordre irréversible.
   Signalé par T. Matteucci le 31/08, capture à l'appui.
   Un pictogramme ne dit jamais À QUI il s'applique. Seuls des mots le disent :
   la rangée se réduit donc à ⋯ et les quatre actions passent dans une feuille
   qui les ÉCRIT, sous le nom de la personne visée. Bénéfice second : ⛔ n'est
   plus à un doigt d'écart en permanence, et une grille à quatre ne porte plus
   seize boutons. */
.groom-mod-more {
    width: 30px; height: 30px;
    border: none; border-radius: 999px; cursor: pointer;
    background: rgba(20, 18, 14, 0.7); color: #fff;
    font-size: 17px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.groom-sheet {
    position: fixed; inset: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
    background: rgba(12, 10, 8, 0.55);
}
/* La feuille est en flex : sans cette ligne, `display` écraserait l'attribut
   [hidden] et elle resterait ouverte en permanence, par-dessus tout l'appel. */
.groom-sheet[hidden] { display: none; }
.groom-sheet-card {
    display: flex; flex-direction: column; gap: 3px;
    width: 100%; max-width: 330px; padding: 12px;
    background: #241f19;
    border: 1px solid rgba(221, 203, 164, 0.28);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
}
.groom-sheet-head {
    font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
    color: #b8a985; padding: 2px 6px;
}
.groom-sheet-who {
    font-weight: 750; font-size: 15px; color: #EFE7D6;
    padding: 0 6px 9px; margin-bottom: 3px;
    border-bottom: 1px solid rgba(221, 203, 164, 0.14);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.groom-sheet-item {
    display: flex; align-items: center; gap: 9px;
    min-height: 46px; padding: 0 12px;
    border: none; border-radius: 10px; cursor: pointer;
    background: transparent; color: #EFE7D6;
    font-size: 14px; text-align: left;
}
.groom-sheet-item:hover { background: rgba(221, 203, 164, 0.14); }
.groom-sheet-danger { color: #ff9d8e; }
.groom-sheet-danger:hover { background: rgba(179, 64, 46, 0.32); }
.groom-sheet-cancel { justify-content: center; color: #b8a985; margin-top: 2px; }
@media (max-width: 720px) {
    /* Sur téléphone la feuille descend AU POUCE, comme toute feuille native.
       Elle porte ici son PROPRE inset bas — ce n'est pas un double comptage :
       posée sur .groom-overlay en `position: fixed`, elle échappe au padding
       de .groom-shell, qui ne la protège donc pas de la barre gestuelle. */
    .groom-sheet { align-items: flex-end; padding: 0; }
    .groom-sheet-card {
        max-width: none;
        border-radius: 18px 18px 0 0;
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }
}
.groom-tile-status {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(20, 18, 14, 0.55); color: #fff; font-weight: 700; font-size: 0.9rem;
    border-radius: inherit; text-align: center; padding: 8px;
}
.groom-tile-status.hidden { display: none; }
.groom-tile-failed { outline: 2px solid #b3261e; }
/* 🧙 Tuile « webcam » de Gandalf (mode réunion) */
.groom-tile--gandalf { outline: 2px solid rgba(120, 170, 255, 0.55); box-shadow: 0 0 24px rgba(120, 170, 255, 0.35); }
.groom-gandalf-cam { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.groom-gandalf-live {
    position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 5px;
    background: rgba(20, 18, 14, 0.6); color: #7fffa8; font-weight: 700; font-size: 0.72rem;
    padding: 3px 9px; border-radius: 999px; letter-spacing: .3px;
}
.groom-gandalf-live::before { content: ''; } /* le point ● est dans le texte */
.groom-tr-rec { padding: 18px 14px; text-align: center; font-weight: 600; color: var(--crm-ink, #e8e2d4); line-height: 1.5; }
.groom-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.groom-grid[data-count="3"], .groom-grid[data-count="4"] { grid-template-columns: 1fr 1fr; }
.groom-grid[data-count="5"], .groom-grid[data-count="6"] { grid-template-columns: 1fr 1fr 1fr; }
.groom-grid[data-count="7"], .groom-grid[data-count="8"], .groom-grid[data-count="9"] { grid-template-columns: 1fr 1fr 1fr; }
.groom-tile.self-hidden { display: none; }
.groom-tile {
    position: relative;
    background: #0d0b09;
    border-radius: 14px;
    overflow: hidden;
    min-height: 120px;
}
.groom-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Retour caméra en MIROIR — ticket pG5eJqas (T. Matteucci, 24/08) :
   « Durant les appels vidéos, le retour de la web cam semble inversé. »
   Il ne l'était pas : il ne l'était PAS ASSEZ. Meet, Zoom, Teams et FaceTime
   miroitent tous l'aperçu de sa propre caméra, parce qu'on se regarde comme
   dans un miroir — lever la main droite doit lever la main de droite. Sans
   miroir, chaque geste part du mauvais côté et on se sent inversé.
   Ce qu'on ENVOIE n'est pas touché : _setOutgoingVideo() passe la piste brute
   à replaceTrack(), aucun canvas ne relit cette balise. Miroiter les flux
   DISTANTS, à l'inverse, retournerait le texte que les autres nous montrent.

   :not(.groom-sharing) est la vraie raison d'être de ce sélecteur — la tuile
   locale sert aussi d'aperçu au partage d'écran (call-room.js, toggleScreen
   pose screenStream sur CETTE vidéo). Miroiter son propre écran mettrait tout
   son texte à l'envers pour lui seul.

   :not(.groom-rear) est la même idée pour l'objectif ARRIÈRE du téléphone
   (call-room.js, flipCam). Cet objectif ne filme pas son visage mais ce qu'on
   montre — une étiquette, un écran, un plant : le miroiter mettrait à l'envers
   la seule chose qu'on voulait faire voir. La classe est posée d'après le
   facingMode RÉELLEMENT rapporté par la piste, jamais d'après l'intention :
   une webcam desktop n'en rapporte aucun et reste donc miroitée. */
.groom-tile[data-self]:not(.groom-rear):not(.groom-sharing) video { transform: scaleX(-1); }

.groom-tile-name {
    position: absolute;
    left: 8px; bottom: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11.5px;
    padding: 2px 9px;
    border-radius: 999px;
}
.groom-controls {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}
.groom-ctl {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(30, 27, 22, 0.85);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.55;
}
.groom-ctl.on { opacity: 1; background: rgba(46, 125, 79, 0.85); border-color: rgba(46, 125, 79, 0.9); }
.groom-ctl:hover { transform: scale(1.06); }
/* 🔄 pendant la bascule d'objectif : le temps que la caméra se rouvre, un
   second clic lancerait un getUserMedia concurrent et perdrait la piste. */
.groom-ctl[disabled] { opacity: 0.35; cursor: progress; }
.groom-ctl[disabled]:hover { transform: none; }

/* ══ ▴ L'ONGLET des réglages secondaires ══
   Invisible partout sauf sur téléphone debout : ailleurs les six boutons
   tiennent en rangée et un tiroir ne serait qu'un geste de plus pour rien. */
.groom-more { display: none; position: relative; font-size: 15px; opacity: 1; }
.groom-more > span { display: block; transition: transform 0.18s ease; }
.groom-controls.deplie .groom-more > span { transform: rotate(180deg); }

/* LA PASTILLE — c'est elle qui rend le repli honnête. Un réglage plié mais
   ACTIF (main levée, partage en cours, objectif arrière, vignette masquée)
   disparaîtrait sans laisser de trace : on lève la main et on l'oublie.
   En :has() pur, donc rien à tenir à jour — tout futur .groom-ctl-2 allumé
   l'allumera de lui-même, sans une ligne de JS.
   #groomSelf est l'exception de polarité : son .on est l'état NORMAL (vignette
   affichée), c'est son ABSENCE qui mérite la pastille. */
.groom-controls:not(.deplie):has(.groom-ctl-2.on:not(.hidden):not(#groomSelf)) .groom-more::after,
.groom-controls:not(.deplie):has(#groomSelf.groom-ctl-2:not(.on)) .groom-more::after {
    content: '';
    position: absolute; top: 5px; right: 5px;
    width: 9px; height: 9px; border-radius: 50%;
    background: #D9BC77;
    box-shadow: 0 0 0 2px rgba(30, 27, 22, 0.95);
}
@keyframes groomDeplie { from { opacity: 0; transform: translateY(10px); } }

/* ══ Téléphone : les contrôles passent en COLONNE À GAUCHE (31/08) ══
   « En bas à droite il y a déjà le retour de notre propre caméra. » — et la
   rangée centrée lui rentrait dedans. Mesuré sur un écran de 360 px : six
   boutons de 46 px espacés de 10 font 326 px de large, l'incrustation « moi »
   occupe x 226→346, et elle porte z-index 6 contre 5. 👤 et 🖐 n'étaient donc
   pas seulement cachés : la balise <video> AVALAIT LE TOUCHER. Inatteignables.
   Le défaut est antérieur au 🔄 (à cinq boutons, 🖐 était déjà couvert à 100 %
   et 👤 à 72 %) ; le septième bouton l'a seulement rendu flagrant.

   La gauche est le seul bord encore libre : bas-droite à l'incrustation,
   haut-droite à la modération (.groom-mod), bas-gauche au badge de nom
   (.groom-tile-name). D'où une colonne CENTRÉE en hauteur, qui ne croise
   aucun des trois.

   column-reverse : 🎙 se retrouve EN BAS, sous le pouce. C'est le bouton
   qu'on cherche en urgence au milieu d'un appel ; le laisser en haut d'une
   colonne de 326 px, c'est le mettre hors de portée. L'ordre du DOM ne change
   pas (le focus clavier reste ▴→🎙→📷→🔄→🖥→👤→🖐) et ces boutons sont des
   bascules indépendantes : aucune séquence ne porte de sens.

   Aucun env(safe-area-*) ici : .groom-shell les porte déjà et deux niveaux
   s'ADDITIONNENT — convention maison, cf. test/call-room-safearea.test.js.

   ══ ET LA COLONNE SE REPLIE (31/08, second passage) ══
   « Un onglet qui se déplie plutôt ? Ce serait bien plus simple. » Six boutons
   posés en permanence sur le visage d'en face, c'était encore trop : la colonne
   réglait le chevauchement, pas l'encombrement.

   Se replient : 🔄 🖥 👤 🖐 — quatre réglages qu'on touche une fois par appel.
   Restent dehors : 🎙 et 📷. Ce ne sont pas que des commandes, ce sont les deux
   seuls TÉMOINS de ce qu'on diffuse (.groom-ctl.on). Les replier supprimerait
   la réponse à « suis-je coupé ? », qu'on se repose vingt fois par appel, et
   mettrait le geste d'urgence à deux touchers. Trois éléments demeurent donc :
   ▴, 🎙, 📷 — 158 px au lieu de 326.

   ANCRAGE PAR LE BAS, et c'est tout l'intérêt du column-reverse ici : ▴ et 🎙
   sont les deux plus bas et ne bougent PAS quand le tiroir s'ouvre, il pousse
   vers le haut. Un onglet qui se dérobe au second toucher serait pire que pas
   d'onglet. D'où `bottom: calc(50% - 79px)` plutôt qu'un centrage : 79 px, la
   moitié de la colonne repliée, pour qu'AU REPOS elle paraisse centrée. */
@media (max-width: 720px) and (min-height: 480px) {
    /* min-height écarte le paysage : un téléphone couché fait au plus 428 px
       de haut, la colonne y serait plus haute que la scène. Il garde la
       rangée — et donc pas d'onglet non plus, la largeur ne manque pas. */
    .groom-controls {
        top: auto;
        /* 79 = (3 × 46 + 2 × 10) / 2, la demi-hauteur du repli ▴ 🎙 📷. Le bord
           BAS est fixe : le tiroir s'ouvre vers le haut, l'onglet ne fuit pas. */
        bottom: calc(50% - 79px);
        left: 12px;
        right: auto;
        transform: none;              /* annule le translateX(-50%) du bureau */
        flex-flow: column-reverse wrap;
        align-content: flex-start;
        /* Transcript ouvert = scène amputée de 32vh. Sans plafond la colonne
           déployée déborderait sous l'en-tête ; avec, elle repart en seconde
           colonne vers la droite plutôt que de sortir de l'écran.
           50% + 79 - 10 = tout l'espace au-dessus du bord bas, moins la marge. */
        max-height: calc(50% + 69px);
    }
    /* flex, pas block : le ▴ est seul dans un rond de 46 px et un <button> ne
       centre pas verticalement un enfant en display:block. */
    .groom-more { display: flex; align-items: center; justify-content: center; }
    .groom-controls:not(.deplie) .groom-ctl-2 { display: none; }
    .groom-controls.deplie .groom-ctl-2 { animation: groomDeplie 0.18s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
    .groom-controls.deplie .groom-ctl-2 { animation: none; }
    .groom-more > span { transition: none; }
}
.groom-stage { position: relative; }


/* ══════════ Salle d'appel : habillage IDENTITÉ GANDALF ══════════
   Surfaces brun chaud, doré Chanv (#DDCBA4/#D9BC77), pilules — la salle
   reste sombre (standard visio) mais parle la même langue que l'app. */
.groom-overlay { background: linear-gradient(135deg, #201d19 0%, #2a251e 55%, #201d19 100%); }
.groom-header {
    background: rgba(42, 37, 30, 0.92);
    border-bottom: 1px solid rgba(221, 203, 164, 0.16);
    color: #EFE7D6;
}
.groom-title { color: #EFE7D6; letter-spacing: 0.01em; }
.groom-banner {
    background: rgba(217, 188, 119, 0.16);
    color: #D9BC77;
    border-color: rgba(217, 188, 119, 0.45);
}
.groom-btn {
    border-radius: 999px;
    border-color: rgba(221, 203, 164, 0.3);
    color: #EFE7D6;
    background: rgba(221, 203, 164, 0.08);
    font-weight: 600;
}
.groom-btn:hover { background: rgba(221, 203, 164, 0.18); }
.groom-btn.on { background: #DDCBA4; border-color: #DDCBA4; color: #282828; }
.groom-btn-danger { background: rgba(179, 64, 46, 0.85); border-color: rgba(179, 64, 46, 0.9); color: #fff; }
.groom-ctl {
    border-color: rgba(221, 203, 164, 0.35);
    background: rgba(42, 37, 30, 0.9);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.groom-ctl.on { background: #DDCBA4; border-color: #DDCBA4; color: #282828; opacity: 1; }
.groom-tile {
    background: #2a251e;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(221, 203, 164, 0.12);
}
.groom-tile video { border-radius: 0; }
.groom-tile-name {
    background: rgba(32, 29, 25, 0.75);
    color: #EFE7D6;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 700;
    left: 10px; bottom: 10px;
    backdrop-filter: blur(4px);
}
.groom-grid.pip-self .groom-tile[data-self="1"] { border: 2px solid rgba(221, 203, 164, 0.55); }
.groom-mod button { border-radius: 999px; background: rgba(42, 37, 30, 0.8); }
.groom-mod button:hover { background: #DDCBA4; color: #282828; }
.groom-tile-status { background: rgba(32, 29, 25, 0.68); color: #EFE7D6; }
.groom-transcript {
    background: #241F19;
    border-left: 1px solid rgba(221, 203, 164, 0.14);
}
.groom-tr-head { color: #D9BC77; font-weight: 800; }
.groom-tr-seg { color: #EFE7D6; }
.groom-tr-seg b { color: #b8a985; font-weight: 700; }


/* ══════════ Flèches ← de retour : VISIBLES partout (retour Dany 20/07) ══════════
   Cible toutes les classes de retour de l'app — pastille contrastée, bord
   doré, taille de cible confortable, lisible clair ET sombre. */
.chat-pane-back, .tasks-back, .actu-back, .chat-back,
.lc-topbar-back, .changelog-detail-back, .ai-sidebar-back {
    background: rgba(168, 134, 63, 0.14) !important;
    border: 1.5px solid rgba(168, 134, 63, 0.55) !important;
    color: #6b5a3a !important;
    border-radius: 12px !important;
    min-width: 40px; min-height: 36px;
    font-size: 17px !important;
    font-weight: 800 !important;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.chat-pane-back:hover, .tasks-back:hover, .actu-back:hover, .chat-back:hover,
.lc-topbar-back:hover, .changelog-detail-back:hover, .ai-sidebar-back:hover {
    background: rgba(168, 134, 63, 0.28) !important;
    transform: translateX(-2px);
}
body[data-gtheme="dark"] .chat-pane-back, body[data-gtheme="dark"] .tasks-back,
body[data-gtheme="dark"] .actu-back, body[data-gtheme="dark"] .chat-back,
body[data-gtheme="dark"] .lc-topbar-back, body[data-gtheme="dark"] .changelog-detail-back,
body[data-gtheme="dark"] .ai-sidebar-back {
    background: rgba(221, 203, 164, 0.14) !important;
    border-color: rgba(221, 203, 164, 0.5) !important;
    color: #DDCBA4 !important;
}

/* Exception : la sidebar de l'Agent IA est TOUJOURS sombre (fond terre), même
   en thème clair → le brun foncé « clair » ci-dessus y était illisible. Ce
   bouton garde la variante beige-sur-sombre dans LES DEUX thèmes. */
.ai-sidebar .ai-sidebar-back {
    background: rgba(221, 203, 164, 0.14) !important;
    border-color: rgba(221, 203, 164, 0.5) !important;
    color: #DDCBA4 !important;
}
.ai-sidebar .ai-sidebar-back:hover {
    background: rgba(221, 203, 164, 0.26) !important;
}

/* Exception : le bloc générique ci-dessus gonflait le Retour de la vue Tâches
   (17px / 800 / min-height 36px) — il sortait de l'en-tête, ajoutait une ligne
   et rognait la fenêtre des projets (ticket Thierry 21/08). On réintègre CE
   bouton en pilule sobre ; le fond/bord dorés de Dany restent, les autres
   boutons retour ne bougent pas. */
.tasks-back {
    font-size: 13px !important;
    font-weight: 600 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    border-width: 1px !important;
}

/* ── Ligne d'action unifiée des Tâches (David #1-5) ── */
.tasks-search-inline {
    width: 180px; max-width: 32vw;
    transition: width 0.2s;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
}
.tasks-search-inline:focus { width: 280px; }
/* Le fantôme de la rangée : en vues « Mes tâches » et Gestion, la recherche
   appartient à la barre de la VUE (bindMine/bindGestion). Quand elle transite
   par la rangée le temps d'un rendu, elle attend cachée — c'était le champ qui
   « apparaît et disparaît rapidement » à côté des onglets (Mathieu, 02/09).
   Scopé à la rangée : remontée dans sa barre, elle réapparaît sans nettoyage. */
.tasks-projects-row .tasks-search-parked { display: none; }
#tasksProjectsRow { flex-wrap: wrap; row-gap: 6px; }

/* ── La même rangée, sur mobile ──
   Elle n'avait AUCUNE règle responsive. `.tasks-proj-spacer{flex:1}` est un
   ressort dessiné pour un écran large : il pousse les actions à droite quand
   tout tient sur une ligne. Sous 768px il avale la place restante et laisse
   « Nouveau projet » seul sur sa propre ligne pendant que la recherche est
   écrasée à 32vw — exactement la capture du ticket.
   On retire le ressort et on assume trois étages lisibles :
   bascules de vue · recherche · actions. */
@media (max-width: 768px) {
    .tasks-projects-row { padding: 10px 12px; gap: 8px; row-gap: 8px; }
    .tasks-proj-spacer { display: none; }
    /* Pleine largeur AU FOCUS AUSSI : la règle de bureau la ramène à 280px,
       la boîte changerait donc de taille en pleine frappe. */
    .tasks-search-inline,
    .tasks-search-inline:focus { width: 100%; max-width: none; flex: 1 1 100%; }
    /* 40px : une cible au pouce. 36px est une hauteur de souris. */
    .tasks-projects-row .tasks-proj-chip,
    .tasks-projects-row .tasks-row-btn,
    .tasks-projects-row .tasks-row-dup { height: 40px; }
}

/* Palette de la pastille de couleur (David #7) */
.tasks-color-dot { cursor: pointer; }
.tasks-color-dot:hover { transform: scale(1.35); box-shadow: 0 0 0 3px rgba(168, 134, 63, 0.25); }
.tasks-color-pop {
    position: fixed; z-index: 9000;
    display: flex; gap: 8px; padding: 10px 12px;
    background: #FDFBF6; border: 1px solid rgba(168, 134, 63, 0.35);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.tasks-color-pop button {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7); cursor: pointer;
}
.tasks-color-pop button:hover { transform: scale(1.15); }
body[data-gtheme="dark"] .tasks-color-pop { background: #332f28; border-color: rgba(221, 203, 164, 0.3); }

/* #8-9 (David) : la rangée compteur disparaît quand vide (le nb vit dans la carte projet) */
.tasks-status-line:empty { display: none; }

/* Recherche dans la visionneuse de transcription */
.chat-tr-search {
    margin: 0 16px 10px; padding: 8px 14px;
    border-radius: 999px; border: 1px solid rgba(107, 90, 58, 0.3);
    font: inherit; font-size: 13px; background: transparent; color: inherit;
}
.chat-tr-turn mark { background: rgba(217, 188, 119, 0.45); color: inherit; border-radius: 3px; padding: 0 2px; }
/* Le texte de la visionneuse est déjà clair (il hérite de .chat-members-modal),
   mais le contour du champ — un brun sombre à 30 % — disparaissait sur le
   panneau #332f28 : le champ de recherche ne se voyait plus. Même relecture du
   ticket es01rvOlfZ5tm0bajx92, qui demandait de vérifier les transcriptions. */
body[data-gtheme="dark"] .chat-tr-search { border-color: rgba(221, 203, 164, 0.3); }

/* Carte fantôme « Créer un groupe » : MÊME silhouette que les dossiers fermés
   (languette 13px/5px en haut-gauche + corps 300×158) mais en pointillés. */
.tasks-folder-ghost { cursor: pointer; }
.tasks-folder-ghost .tfg-tab {
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; z-index: 2;
    margin-left: 8px; padding: 9px 22px 12px 15px; min-width: 60px;
    font-weight: 750; font-size: 15px; color: #8a7a5c;
    border: 2px dashed rgba(168, 134, 63, 0.45); border-bottom: none;
    border-radius: 13px 5px 0 0;
}
.tasks-folder-ghost .tfg-body {
    display: flex; align-items: center; justify-content: center;
    width: 300px; max-width: 44vw; height: 158px; margin-top: -1px;
    border: 2px dashed rgba(168, 134, 63, 0.45);
    border-radius: 0 14px 14px 14px;
    color: #8a7a5c; font-weight: 700; font-size: 0.98rem;
    transition: background 0.15s, border-color 0.15s;
}
.tasks-folder-ghost:hover .tfg-body,
.tasks-folder-ghost:hover .tfg-tab { background: rgba(168, 134, 63, 0.09); border-color: rgba(168, 134, 63, 0.7); }
body[data-gtheme="dark"] .tasks-folder-ghost .tfg-tab,
body[data-gtheme="dark"] .tasks-folder-ghost .tfg-body { border-color: rgba(221, 203, 164, 0.32); color: #b8a985; }
body[data-gtheme="dark"] .tasks-folder-ghost:hover .tfg-tab,
body[data-gtheme="dark"] .tasks-folder-ghost:hover .tfg-body { background: rgba(221, 203, 164, 0.07); border-color: rgba(221, 203, 164, 0.55); }

/* 📅 Agenda du jour (Aujourd'hui) */
.today-agenda { background: rgba(168, 134, 63, 0.07); border: 1px solid rgba(168, 134, 63, 0.2); border-radius: 14px; padding: 12px 14px; margin: 10px 0; }
.today-agenda .ta-head { font-weight: 800; font-size: 0.9rem; margin-bottom: 8px; }
.today-agenda .ta-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 0.9rem; }
.today-agenda .ta-time { font-weight: 700; min-width: 52px; color: #8a7a5c; font-variant-numeric: tabular-nums; }
.today-agenda .ta-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-agenda .ta-meet { text-decoration: none; }
body[data-gtheme="dark"] .today-agenda { background: rgba(221, 203, 164, 0.06); border-color: rgba(221, 203, 164, 0.18); }
body[data-gtheme="dark"] .today-agenda .ta-time { color: #b8a985; }

/* 📧 Courriels (Aujourd'hui) */
.today-agenda .ta-mail { text-decoration: none; color: inherit; border-radius: 8px; padding: 4px 6px; }
.today-agenda .ta-mail:hover { background: rgba(168, 134, 63, 0.1); }
.today-agenda .ta-unread .ta-title { font-weight: 700; }
.today-agenda .ta-x { margin-left: auto; background: none; border: none; cursor: pointer; opacity: 0.6; }
.today-agenda .ta-x:hover { opacity: 1; }

/* Carte découverte + rangées courriel : texte TOUJOURS lisible */
.today-agenda .ta-head { color: inherit; display: flex; align-items: center; gap: 6px; }
.today-agenda .ta-row .ta-title { color: inherit; opacity: 0.92; }
.today-recent-item .trm-ava { font-size: 18px; }

/* 📬 Invitation Gmail (Aujourd'hui) — chaleureuse et fun */
.gm-discover {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; margin: 10px 0;
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(221, 203, 164, 0.22), rgba(168, 134, 63, 0.12) 60%, rgba(221, 203, 164, 0.18));
    border: 1px solid rgba(168, 134, 63, 0.35);
}
.gm-discover .gmd-emoji { font-size: 34px; transform: rotate(-8deg); filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2)); }
.gm-discover:hover .gmd-emoji { animation: gmdWiggle 0.6s ease-in-out; }
@keyframes gmdWiggle { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(6deg) scale(1.1); } }
.gm-discover .gmd-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gm-discover .gmd-txt b { font-size: 0.98rem; color: inherit; }
.gm-discover .gmd-txt span { font-size: 0.83rem; opacity: 0.8; }
.gm-discover .gmd-cta { white-space: nowrap; border-radius: 999px; font-size: 13px; }
.gm-discover .ta-x { background: none; border: none; cursor: pointer; opacity: 0.5; font-size: 14px; }
.gm-discover .ta-x:hover { opacity: 1; }
.gm-discover .gmd-txt b { color: #3a3226; }
.gm-discover .gmd-txt span { color: #6b5a3a; opacity: 1; }
body[data-gtheme="dark"] .gm-discover {
    background: linear-gradient(120deg, rgba(221, 203, 164, 0.12), rgba(217, 188, 119, 0.06) 60%, rgba(221, 203, 164, 0.1));
    border-color: rgba(221, 203, 164, 0.3);
}
body[data-gtheme="dark"] .gm-discover .gmd-txt b { color: #F0EAD9; }
body[data-gtheme="dark"] .gm-discover .gmd-txt span { color: #b8a985; }
body[data-gtheme="dark"] .gm-discover .ta-x { color: #b8a985; }
@media (prefers-reduced-motion: reduce) { .gm-discover:hover .gmd-emoji { animation: none; } }
/* Mobile : l'invitation s'empile proprement — texte à côté de l'enveloppe,
   bouton pleine largeur dessous, ✕ ancré au coin (fini la colonne étrange). */
@media (max-width: 640px) {
    .gm-discover { flex-wrap: wrap; position: relative; padding-right: 16px; }
    .gm-discover .gmd-emoji { font-size: 30px; }
    .gm-discover .gmd-txt { flex: 1 1 0; min-width: 0; padding-right: 26px; }
    .gm-discover .gmd-cta { flex: 1 1 100%; margin-top: 8px; padding: 10px; text-align: center; justify-content: center; }
    .gm-discover .ta-x { position: absolute; top: 10px; right: 10px; }
}

/* Lignes COURRIEL du panneau récents : même gabarit que les messages */
.today-recent-item.trm-mail { text-decoration: none; display: flex; align-items: center; gap: 10px; overflow: hidden; }
/* PAS de color:inherit ici : les .trm-name/.trm-preview de shell.css portent
   déjà les bonnes couleurs de thème (var(--gs-ink)) — les écraser rendait le
   texte noir sur fond sombre en dark. L'ancre reset juste sa couleur de lien. */
.today-recent-item.trm-mail, .today-recent-item.trm-mail:visited { color: var(--gs-ink, #333); }
.today-recent-item.trm-mail .trm-body { min-width: 0; flex: 1; }
.today-recent-item.trm-mail .trm-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trm-mailava {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--gs-panel-2, #E9E2D0); color: var(--gs-ink, #4A4238);
}
.trm-mailava svg { width: 17px; height: 17px; display: block; }
body[data-gtheme="dark"] .trm-mailava { background: rgba(221, 203, 164, 0.16); color: #DDCBA4; }

/* Carte fantôme « Créer un groupe » alignée sur les cartes sans languette */
.tasks-folder-ghost .tfg-tab{display:none}
.tasks-folder-ghost .tfg-body{border-radius:14px}

/* Panneau images par langue (LECLAUDE) */
.lc-langimg-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 20px; }
.lc-langimg-modal { background: #fff; color: #1a1a1a; width: 100%; max-width: 480px; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.lc-langimg-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; font-weight: 700; border-bottom: 1px solid rgba(0,0,0,.1); }
.lc-langimg-close { background: none; border: none; font-size: 18px; cursor: pointer; color: inherit; }
.lc-langimg-rows { padding: 8px 12px 16px; }
.lc-langimg-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid rgba(0,0,0,.06); }
.lc-langimg-row:last-child { border-bottom: none; }
.lc-langimg-thumb { width: 84px; height: 52px; object-fit: cover; border-radius: 6px; background: #eee; flex: none; }
.lc-langimg-empty { display: flex; align-items: center; justify-content: center; font-size: 10px; color: #999; text-align: center; }
.lc-langimg-meta { flex: 1; display: flex; flex-direction: column; }
.lc-langimg-lang { font-weight: 700; }
.lc-langimg-sub { font-size: 12px; color: #888; }
.lc-langimg-actions { display: flex; gap: 6px; }
.lc-langimg-choose, .lc-langimg-reset { border: 1px solid rgba(0,0,0,.15); background: #f5f5f0; color: #1a1a1a; border-radius: 6px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.lc-langimg-badge { position: absolute; top: 8px; right: 8px; font-size: 12px; background: rgba(0,0,0,.55); color: #fff; border-radius: 10px; padding: 1px 6px; z-index: 3; }
@media (prefers-color-scheme: dark) {
  .lc-langimg-modal { background: #1f1f24; color: #eee; }
  .lc-langimg-choose, .lc-langimg-reset { background: #2c2c33; color: #eee; border-color: rgba(255,255,255,.15); }
  .lc-langimg-sub { color: #aaa; }
}
body[data-gtheme="dark"] .lc-langimg-modal { background: #1f1f24; color: #eee; }
body[data-gtheme="dark"] .lc-langimg-choose, body[data-gtheme="dark"] .lc-langimg-reset { background: #2c2c33; color: #eee; border-color: rgba(255,255,255,.15); }
body[data-gtheme="dark"] .lc-langimg-sub { color: #aaa; }


/* ── Habillage d'image DANS le texte des articles (éditeur + rendu publié).
   Classes posées par la mini-barre au clic sur une image dans l'éditeur. ── */
img.lc-float-left, img.lc-float-right {
    width: 45%;
    height: auto;
    border-radius: 6px;
}
img.lc-float-left  { float: left;  margin: 4px 18px 8px 0; }
img.lc-float-right { float: right; margin: 4px 0 8px 18px; }
@media (max-width: 640px) {
    img.lc-float-left, img.lc-float-right { float: none; width: 100%; margin: 8px 0; }
}
/* Sélection dans l'éditeur */
.lc-editor-content img { cursor: pointer; }
.lc-editor-content img.lc-img-selected { outline: 2px solid var(--chanv-terre, #8a6d3b); outline-offset: 2px; }
/* Mini-barre flottante */
.lc-imgfloat-bar {
    position: absolute;
    z-index: 10000;
    display: flex;
    gap: 4px;
    padding: 5px 6px;
    background: var(--chanv-blanc, #fff);
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.lc-imgfloat-btn {
    border: 1px solid transparent;
    background: transparent;
    font-size: 16px;
    line-height: 1;
    padding: 6px 9px;
    border-radius: 7px;
    cursor: pointer;
}
.lc-imgfloat-btn:hover { background: rgba(0,0,0,.06); }
.lc-imgfloat-btn.active { border-color: var(--chanv-terre, #8a6d3b); background: rgba(138,109,59,.12); }
body[data-gtheme="dark"] .lc-imgfloat-bar { background: #2a2620; border-color: rgba(255,255,255,.14); }
body[data-gtheme="dark"] .lc-imgfloat-btn:hover { background: rgba(255,255,255,.08); }


/* Heure PAR MESSAGE sur les messages groupés (comme Basecamp) — discrète,
   alignée à la bulle. La rupture de groupe à 15 min remet l'en-tête complète. */
.chat-msg-time-grouped {
    font-size: 11px;
    color: rgba(0,0,0,.55);
    /* Au PIED de la bulle, pas en son milieu. Centrée, elle atterrissait en
       plein travers d'une bulle haute — sur une capture d'écran jointe, l'heure
       s'affichait au milieu de l'image (ticket SHPiB, T. Matteucci). Sur une
       bulle d'une ligne, les deux réglages donnent le même résultat. */
    align-self: flex-end;
    margin-left: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
body[data-gtheme="dark"] .chat-msg-time-grouped { color: rgba(255,255,255,.35); }


/* ── Liens dans les articles LECLAUDE : élégants (soulignés, couleur du
   texte — pas de bleu/violet navigateur). Vaut pour les liens auto-détectés
   (lc-link) ET les <a> déjà présents dans le contenu. ── */
.lc-art-body a, .lc-card-text a, a.lc-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2.5px;
    text-decoration-color: rgba(0,0,0,.45);
    word-break: break-word;
    transition: text-decoration-color .15s;
}
.lc-art-body a:hover, .lc-card-text a:hover, a.lc-link:hover {
    text-decoration-thickness: 2px;
    text-decoration-color: #E3000B; /* rouge de marque au survol */
}
.lc-art-body a:visited, .lc-card-text a:visited, a.lc-link:visited { color: inherit; }
body[data-gtheme="dark"] .lc-art-body a, body[data-gtheme="dark"] .lc-card-text a, body[data-gtheme="dark"] a.lc-link {
    text-decoration-color: rgba(255,255,255,.4);
}


/* ── Images inline PAR LANGUE : badge 🌐 en édition quand une variante EN/ES
   existe, et rangée EN/ES du sous-panneau de la barre d'image. ── */
.lc-editor-content figure.lc-inline-img { position: relative; }
.lc-editor-content figure.lc-inline-img:has(img[data-src-en], img[data-src-es])::after {
    content: '🌐';
    position: absolute;
    top: 6px; right: 6px;
    font-size: 14px;
    background: rgba(255,255,255,.85);
    border-radius: 50%;
    padding: 2px 4px;
    pointer-events: none;
}
.lc-img-tb-langrow { display: flex; gap: 4px; align-items: center; }


/* ══════════ LECLAUDE — Statistiques de lecture (Super Admin) ══════════
   Préfixe lc-stat-* volontairement distinct de .sup-* : le magazine LECLAUDE
   est TOUJOURS sur fond clair (.leclaude-view), même en thème sombre — les
   surcharges body[data-gtheme="dark"] de .sup-* y donneraient du texte clair
   sur fond clair. Aucune variante sombre ici, c'est voulu. */
.lc-stat-pick { margin-bottom: 20px; font-size: 13px; color: #555; }
.lc-stat-pick select { margin-left: 8px; }
.lc-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
@media (max-width: 620px) { .lc-stats-grid { grid-template-columns: 1fr 1fr; } }
.lc-stat { background: #fff; border: 1px solid rgba(107,90,58,.16); border-radius: 14px; padding: 16px; text-align: center; }
.lc-stat-n { font-size: 1.8rem; font-weight: 800; color: #1a1a1a; line-height: 1.15; }
.lc-stat-l { font-size: .74rem; color: #8a7a5c; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.lc-stat-h { font-size: .72rem; color: #a9998a; margin-top: 3px; }
.lc-stat-block { margin-bottom: 28px; }
.lc-stat-h3 { font-size: .95rem; font-weight: 700; margin: 0 0 10px; color: #1a1a1a; }
.lc-stat-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 720px) { .lc-stat-two { grid-template-columns: 1fr; } }
.lc-stat-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .82rem; color: #1a1a1a; }
.lc-stat-bar-name { width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.lc-stat-bar { flex: 1; height: 8px; border-radius: 6px; background: #EFE7D4; overflow: hidden; }
.lc-stat-bar i { display: block; height: 100%; background: #A8863F; }
.lc-stat-bar-n { width: 92px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.lc-stat-empty { font-size: .85rem; color: #8a7a5c; font-style: italic; }
.lc-stat-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.lc-stat-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #8a7a5c; border-bottom: 1px solid rgba(107,90,58,.18); padding: 6px 8px; }
.lc-stat-table td { padding: 7px 8px; border-bottom: 1px solid rgba(107,90,58,.08); font-variant-numeric: tabular-nums; }
.lc-stat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-stat-chip { background: #EFE7D4; color: #6b5a3a; border-radius: 999px; padding: 4px 11px; font-size: .78rem; }

/* ══════════ Mentions @ (composeur + bulles) ══════════ */
.chat-mention-pop {
    position: absolute; bottom: calc(100% + 8px); left: 12px;
    min-width: 240px; max-width: min(330px, calc(100% - 24px));
    background: #fff; border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16); z-index: 60; padding: 4px;
    max-height: 262px; overflow-y: auto;
}
.chat-mention-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border: 0; background: none; border-radius: 9px;
    cursor: pointer; font-size: .92rem; color: inherit; text-align: left;
}
.chat-mention-item.is-active, .chat-mention-item:hover { background: rgba(0, 0, 0, .06); }
.chat-mention-item img, .chat-mention-init {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 26px;
}
.chat-mention-init {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gs-accent, #A8863F); color: #fff; font-weight: 700; font-size: .8rem;
}
.chat-mention-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-gtheme="dark"] .chat-mention-pop { background: #23262b; border-color: rgba(255, 255, 255, .14); box-shadow: 0 8px 28px rgba(0, 0, 0, .5); }
body[data-gtheme="dark"] .chat-mention-item.is-active, body[data-gtheme="dark"] .chat-mention-item:hover { background: rgba(255, 255, 255, .09); }

/* Pastille @Nom dans les bulles — @moi ressort davantage */
.chat-mention { background: rgba(168, 134, 63, .16); color: #7a5f22; border-radius: 6px; padding: 0 4px; font-weight: 600; }
.chat-mention-me { background: rgba(245, 166, 35, .30); color: #8a5a00; }
body[data-gtheme="dark"] .chat-mention { background: rgba(212, 181, 116, .20); color: #e8cf9a; }
body[data-gtheme="dark"] .chat-mention-me { background: rgba(245, 166, 35, .32); color: #ffd98a; }
/* Dans MA bulle (fond accent) : rester lisible dans les deux thèmes.
   Même règle pour la vignette du quai (.gq-msg-moi, fond terre). */
.chat-msg-own .chat-mention, .chat-msg-own .chat-mention-me,
.gq-msg-moi .chat-mention, .gq-msg-moi .chat-mention-me { background: rgba(255, 255, 255, .28); color: inherit; }

/* ══════════ Projet disparu (lien mort) — clin d'œil GANDALF ══════════ */
.tasks-vanished { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 26px 16px 46px; }
.tasks-vanished img { width: min(430px, 88vw); border-radius: 16px; box-shadow: 0 14px 40px rgba(0, 0, 0, .38); }
.tasks-vanished h2 { margin: 8px 0 0; font-size: 1.45rem; letter-spacing: .05em; }
.tasks-vanished p { margin: 0; max-width: 48ch; opacity: .85; line-height: 1.5; }
.tasks-vanished .tv-back { margin-top: 10px; padding: 11px 24px; border: 0; border-radius: 999px; background: var(--gs-accent, #A8863F); color: #fff; font-weight: 600; cursor: pointer; font-size: .95rem; }
.tasks-vanished .tv-back:hover { filter: brightness(1.08); }

/* ══════════ GIFs maison (bac commun injecté dans le flux GIPHY) ══════════ */
.chat-gif-ours { position: relative; display: inline-block; }
.chat-gif-ours-badge {
    position: absolute; top: 4px; left: 4px; font-size: .72rem;
    background: rgba(0, 0, 0, .55); border-radius: 6px; padding: 1px 4px; pointer-events: none;
}
.chat-gif-ours-del {
    position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
    border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff;
    font-size: .85rem; line-height: 1; cursor: pointer; display: none;
}
.chat-gif-ours:hover .chat-gif-ours-del { display: block; }
.chat-gif-add-link { cursor: pointer; color: var(--gs-accent, #A8863F); font-weight: 600; }
.chat-gif-add-link:hover { text-decoration: underline; }

/* ---------- Sous-tâches (checklist enrichi) ---------- */
.tasks-subtasks { margin: 18px 0 4px; }
.tasks-subtasks-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tasks-subtasks-title { font-weight: 600; }
.tasks-subtasks-count { font-size: 12px; color: var(--g-muted); }
.tasks-subtasks-bar { height: 6px; border-radius: 3px; background: var(--gs-line, #e6e6e6); overflow: hidden; margin-bottom: 10px; }
.tasks-subtasks-bar-fill { height: 100%; background: var(--gs-accent, #4a9e6f); transition: width .2s ease; }
.tasks-subtasks-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.tasks-subtask { display: flex; align-items: center; gap: 8px; padding: 4px 2px; border-radius: 6px; }
.tasks-subtask:hover { background: var(--g-hover); }
.tasks-subtask-text { flex: 1; }
.tasks-subtask.done .tasks-subtask-text { text-decoration: line-through; color: var(--g-muted); }
.tasks-subtask-check, .tasks-subtask-del { background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px; }
/* Visibles AU REPOS (25/08). « On n'est pas capable de modifier des sous-tâches »
   (D. Paquette) : le texte n'était effectivement pas éditable — mais ✕ et ↑↓
   existaient depuis toujours, à opacity:0 jusqu'au survol. Sur sa capture
   d'écran, aucune ligne ne montre la moindre action. Une fonction qu'on ne voit
   pas se signale comme une fonction absente : c'est la troisième fois (cf. le
   ✅ des bandeaux le 25/08, et les .tgl-* re-demandés cinq jours après leur
   livraison). Assez discret pour ne pas encombrer, jamais nul.

   Fusion 27/08 : la règle vient de dev, la variable de dev-mon. dev nomme le
   gris `--gs-muted`, qui n'est déclaré NULLE PART et ne tenait que par son
   repli ; dev-mon déclare `--g-muted` (4 fois). Garder `--gs-` ici aurait figé
   ces lignes sur un gris en dur, hors du système de couleurs de la coquille. */
.tasks-subtask-del { color: var(--g-muted, #8a8a8a); opacity: .45; transition: opacity .15s; }
.tasks-subtask:hover .tasks-subtask-del { opacity: 1; }
.tasks-subtask-del:hover { opacity: 1; }
.tasks-subtask-due { font-size: 11px; color: var(--g-muted, #8a8a8a); white-space: nowrap; }
.tasks-avatar-xs { width: 18px; height: 18px; font-size: 10px; }
.tasks-subtask-add { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tasks-subtask-add input[type="text"] { flex: 1; min-width: 160px; }
/* display:none, et pas visibility/opacity : c'est ce qui retire réellement
   les trois champs de l'arbre d'accessibilité et de l'ordre de tabulation.
   Masqués autrement, ils resteraient atteignables au clavier — invisibles. */
.tasks-subtask-add.is-collapsed { display: none; }
.tasks-subtask-toggle { margin-left: auto; background: none; border: 1px dashed rgba(107,90,58,.4);
    border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
    color: var(--gs-muted, #8a7a5c); transition: border-color .15s, color .15s; }
.tasks-subtask-toggle:hover { border-color: #A8863F; color: #A8863F; }
.tasks-subtask-badge { display: inline-flex; align-items: center; gap: 3px; }
.tasks-subtask-move { background: none; border: none; cursor: pointer; color: var(--g-muted, #8a8a8a); opacity: .38; transition: opacity .15s; font-size: 13px; line-height: 1; padding: 2px; }
.tasks-subtask:hover .tasks-subtask-move { opacity: .7; }
.tasks-subtask-move:disabled { opacity: .15; cursor: default; }
.tasks-subtask:hover .tasks-subtask-move:disabled { opacity: .15; }
.tasks-subtask-move:not(:disabled):hover { opacity: 1; }

/* ✏️ Modifier une sous-tâche — le geste qui manquait (ticket DMI8OHLU, 25/08) */
.tasks-subtask-edit-open { background: none; border: none; cursor: pointer; font-size: 13px;
    line-height: 1; padding: 2px 3px; border-radius: 5px; opacity: .5; transition: opacity .15s; }
.tasks-subtask:hover .tasks-subtask-edit-open { opacity: .85; }
.tasks-subtask-edit-open:hover { opacity: 1; background: rgba(168,134,63,.14); }

/* 💬 Le fil d'une sous-tâche (ticket 7PQdMqUE, D. Paquette, 29/09) : @,
   fichiers et commentaires passent par le composeur de la fiche. Visible
   d'emblée dès qu'un commentaire existe — sinon discret comme ✏️. */
.tasks-subtask-comments, .gest-st-comments { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
    background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; line-height: 1;
    padding: 2px 5px; color: var(--g-muted, #8a8a8a); font: 600 11px/1 Inter, sans-serif; opacity: .5; transition: opacity .15s; }
.tasks-subtask-comments svg, .gest-st-comments svg { width: 13px; height: 13px; }
.tasks-subtask:hover .tasks-subtask-comments, .gest-st-row:hover .gest-st-comments { opacity: .85; }
.tasks-subtask-comments.has-comments, .gest-st-comments.has-comments { opacity: 1; color: #A8863F; }
.tasks-subtask-comments:hover, .gest-st-comments:hover { opacity: 1; background: rgba(168,134,63,.14); }
.tasks-subtask-comments.is-active { opacity: 1; color: #A8863F; border-color: rgba(168,134,63,.45); background: rgba(168,134,63,.10); }
.tasks-subtask-thread { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
    margin: 4px 0 8px; padding: 7px 10px; border-radius: 8px; background: rgba(168,134,63,.10); font-size: .86rem; }
.tasks-subtask-thread-all { background: none; border: none; cursor: pointer; color: #A8863F; font-weight: 600; font-size: .82rem; padding: 2px 4px; }
.tasks-subtask-thread-all:hover { text-decoration: underline; }
.tasks-subtask-thread-note { margin: 8px 0 4px; font-size: .8rem; color: var(--g-muted, #8a8a8a); }
.tasks-comment-subtask { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 2px 0 4px;
    padding: 2px 8px; border: none; border-radius: 999px; background: rgba(168,134,63,.12); color: #8a6d2f;
    font-size: .76rem; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-comment-subtask:hover { background: rgba(168,134,63,.22); }

/* La ligne devient un formulaire, sur place : on garde sa position dans la
   liste et sa progression sous les yeux — modifier n'est pas quitter la fiche. */
.tasks-subtask.is-editing { background: rgba(168,134,63,.07); padding: 6px 4px; }
.tasks-subtask-edit { display: flex; gap: 6px; align-items: center; width: 100%; flex-wrap: wrap; }
/* `width: auto` contre la règle générique `input { width: 100% }` (ligne 1070,
   déjà citée le 17/08 pour la même raison) : sans elle, chaque champ réclame
   toute la largeur et la ligne s'empile sur quatre étages — une correction de
   faute de frappe déplacerait alors tout le reste de la liste sous les yeux. */
.tasks-subtask-edit .tasks-subtask-edit-text { flex: 1 1 150px; width: auto; min-width: 110px; }
.tasks-subtask-edit .tasks-subtask-edit-assignee { flex: 0 1 170px; width: auto; }
.tasks-subtask-edit .tasks-subtask-edit-assignee[multiple], .tasks-subtask-add #taskSubtaskAssignee[multiple] { height: auto; min-height: 66px; padding: 2px; font-size: 12px; }
.tasks-subtask-edit .tasks-subtask-edit-due { flex: 0 0 auto; width: auto; }
.tasks-subtask-edit .btn { flex: 0 0 auto; padding: 5px 12px; font-size: .84rem; }

/* Tactile : aucun survol n'existe ici. Sans ce bloc, les quatre actions d'une
   ligne resteraient invisibles à VIE sur iPad — le défaut même corrigé le
   matin du 25/08 pour le glisser (É. Bouchard). Cibles ≥ 34 px, alignées sur
   l'audit tactile plus bas dans ce fichier. */
@media (pointer: coarse) {
    .tasks-subtask-del, .tasks-subtask-edit-open { opacity: .9; }
    .tasks-subtask-move { opacity: .65; }
    .tasks-subtask-move:disabled { opacity: .18; }
    .tasks-subtask-del, .tasks-subtask-edit-open, .tasks-subtask-move,
    .tasks-subtask-check { min-width: 34px; min-height: 34px; }
    .tasks-subtask-comments, .gest-st-comments { opacity: .9; min-width: 34px; min-height: 34px; justify-content: center; }
}

/* --- Dépendances et validation (passe C) ---------------------------------
   Le bloc dépendances reprend la métrique des sous-tâches : c'est la même
   nature d'objet (une liste courte, rattachée à la tâche, éditable sur place),
   et deux échelles différentes côte à côte se liraient comme deux niveaux
   d'importance qui n'existent pas.
   Une exception assumée : `.tasks-dep-del` reste VISIBLE (opacité basse) au
   lieu de n'apparaître qu'au survol comme `.tasks-subtask-del`. Au doigt, il
   n'y a pas de survol — la croix des sous-tâches est donc introuvable sur
   mobile. On ne recopie pas ce défaut dans du code neuf. */
.tasks-deps { margin: 18px 0 4px; }
.tasks-deps-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.tasks-deps-title { font-weight: 600; }
.tasks-deps-count { font-size: 12px; color: var(--g-muted); }
.tasks-deps-count.bloque { color: #b4443a; background: rgba(180,68,58,.10); border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.tasks-deps-count.prete { color: #4f765b; background: rgba(79,118,91,.11); border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.tasks-deps-mode { margin: -1px 0 10px; font-size: 11px; color: var(--g-muted); }
.tasks-deps-section-label { margin: 12px 0 5px; color: var(--g-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tasks-deps-hint { font-size: 12px; color: var(--g-muted); margin-bottom: 6px; }
.tasks-deps-empty { font-size: 13px; color: var(--g-muted); font-style: italic; }
.tasks-deps-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.tasks-dep { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; border-left: 3px solid transparent; }
.tasks-dep:hover { background: var(--g-hover); }
.tasks-dep.bloque { border-left-color: #b4443a; }
.tasks-dep-flag { font-size: 13px; line-height: 1; }
.tasks-dep-titre { flex: 1; text-align: left; background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--gs-line, #ddd); text-underline-offset: 3px; }
.tasks-dep-titre:hover { text-decoration-color: currentColor; }
.tasks-dep-titre.morte { cursor: default; font-style: italic; color: var(--g-muted); text-decoration: none; }
.tasks-dep-etat { white-space: nowrap; font-size: 12px; }
.tasks-dep-morte, .tasks-dep-attente { font-size: 12px; font-style: italic; color: var(--g-muted); }
.tasks-dep-del { background: none; border: none; cursor: pointer; font-size: 14px; line-height: 1; padding: 4px; color: var(--g-muted); opacity: .45; transition: opacity .15s; }
.tasks-dep-del:hover { opacity: 1; }
.tasks-deps-verrou { margin-top: 8px; padding: 8px 11px; border-radius: 8px; font-size: 13px;
    background: rgba(180,68,58,.09); color: #963a31; border: 1px solid rgba(180,68,58,.20); }
.tasks-deps-aval { margin-top: 8px; font-size: 12px; color: var(--g-muted); }
.tasks-dep-add { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tasks-dep-add select { flex: 1; min-width: 180px; }
.tasks-deps-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.tasks-deps-forms .tasks-dep-add { margin-top: 0; }
.tasks-deps-forms .tasks-dep-add .btn { width: 100%; }

.tasks-pending { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px;
    background: rgba(214,158,46,.10); border: 1px solid rgba(214,158,46,.28); }
/* Quand c'est MA signature qu'on attend, la bordure se ferme : le bandeau
   n'annonce plus un état, il demande un geste. */
.tasks-pending.mienne { border-color: rgba(214,158,46,.65); box-shadow: 0 0 0 3px rgba(214,158,46,.12); }
.tasks-pending-head { font-size: 14px; margin-bottom: 4px; }
.tasks-pending-who { font-size: 14px; }
.tasks-pending-note { margin-top: 5px; font-style: italic; color: var(--g-muted); }
.tasks-pending-when, .tasks-pending-qui { margin-top: 4px; font-size: 12px; color: var(--g-muted); }
.tasks-pending-yours { margin-top: 7px; font-weight: 600; color: #8a6212; }
.tasks-pending-wait { margin-top: 7px; font-size: 13px; color: var(--g-muted); }
.tasks-pending-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.tasks-pending-actions input[type="text"] { flex: 1; min-width: 190px; }

body[data-gtheme="dark"] .tasks-deps-count.bloque { color: #ff9b90; background: rgba(180,68,58,.22); }
body[data-gtheme="dark"] .tasks-deps-count.prete { color: #a9d5b3; background: rgba(79,118,91,.26); }
body[data-gtheme="dark"] .tasks-deps-verrou { background: rgba(180,68,58,.18); color: #ff9b90; border-color: rgba(180,68,58,.34); }
@media (max-width: 640px) { .tasks-deps-forms { grid-template-columns: 1fr; } }
body[data-gtheme="dark"] .tasks-dep.bloque { border-left-color: #ff9b90; }
body[data-gtheme="dark"] .tasks-pending { background: rgba(214,158,46,.14); border-color: rgba(214,158,46,.34); }
body[data-gtheme="dark"] .tasks-pending.mienne { border-color: rgba(240,190,90,.70); box-shadow: 0 0 0 3px rgba(214,158,46,.16); }
body[data-gtheme="dark"] .tasks-pending-yours { color: #f0be5a; }

/* Cibles tactiles chat (audit 2026-08-03 S18/S21/S25) : en tactile, les
   cibles réactions/pièces jointes montent à ≥40px — alignées sur le
   composeur (38-44px). Le desktop garde ses tailles compactes. */
@media (hover: none) {
    .chat-msg-dots,
    .cmm-reacts button,
    .chat-react-choice,
    .chat-attach-x {
        min-height: 40px;
        min-width: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .chat-react-palette-full { gap: 6px; width: min(320px, calc(100vw - 16px)); }
    .chat-emoji-grid { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
    .cmm-reacts { flex-wrap: wrap; }
    .chat-msg-menu { max-width: min(320px, calc(100vw - 16px)); }
}

/* Bandeau d'échec d'envoi (audit S28) — visible clair ET sombre */
/* Envoi instantané : la bulle est posée AVANT la réponse du serveur. Elle reste
   légèrement en retrait tant qu'elle est « en vol », et le ⏳ tient la place de
   l'heure (qui n'existe pas encore). À la confirmation, rien ne bouge dans la
   mise en page : seuls l'opacité et ce petit marqueur changent. */
.chat-msg-pending .chat-msg-content,
.chat-msg-pending .chat-msg-bubble { opacity: .62; }
.chat-msg-sending { font-size: 11px; opacity: .7; }
.chat-msg-failed .chat-msg-content {
    outline: 1px solid color-mix(in srgb, #c0392b 55%, transparent);
    outline-offset: 1px;
}

.chat-send-fail {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; margin: 0 8px 4px;
    border-radius: 10px; font-size: 13px;
    background: color-mix(in srgb, #c0392b 12%, #fff);
    border: 1px solid color-mix(in srgb, #c0392b 45%, transparent);
}
.chat-send-fail span { flex: 1; min-width: 0; }
.chat-send-fail-online { outline: 2px solid #2e7d32; }
.chat-send-fail-x { background: none; border: none; cursor: pointer; min-width: 40px; min-height: 40px; }
body[data-gtheme="dark"] .chat-send-fail {
    background: color-mix(in srgb, #c0392b 25%, #332f28);
    border-color: color-mix(in srgb, #c0392b 55%, transparent);
    color: #f2e6da;
}

/* Repli hors shell natif (PWA plein écran) : le composeur se protège
   lui-même de la barre gestuelle (audit S32). Sans effet quand le
   conteneur .chat-view.show-pane applique déjà l'inset (shell natif). */
.chat-composer { --chat-composer-pb: 12px; padding-bottom: max(var(--chat-composer-pb, 0px), env(safe-area-inset-bottom)); }

/* =====================================================================
   ÉDITEUR DE TEXTE ENRICHI DES MESSAGES (GandalfRichText — js/richtext.js)
   Deux familles :
     .grt-bar / .grt-editor  → la SAISIE (WYSIWYG dans le composeur du chat)
     .grt-*  sous .chat-msg-content → le RENDU dans les bulles
   Le mode sombre est obligatoire ici : le hub bascule via
   body[data-gtheme="dark"] et n'utilise pas prefers-color-scheme.
   ===================================================================== */

/* ── Saisie ── */
.grt-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:0}
/* Le <textarea> reste la source de vérité de la valeur, mais il ne doit jamais
   se voir. `clip` masque bien la BOÎTE — pas le CURSEUR : iOS le dessinait à la
   position naturelle du champ, c'est-à-dire juste sous la zone d'édition, d'où
   un curseur bleu flottant hors du cadre.
   `caret-color: transparent` supprime précisément ce curseur, et l'ancrage
   top/left dans un .grt-wrap positionné évite qu'il se place ailleurs.
   On n'utilise PAS `left:-9999px` : cela créerait un débordement horizontal. */
.grt-wrap{position:relative}
.grt-hidden-source{position:absolute!important;top:0!important;left:0!important;
    width:1px!important;height:1px!important;
    padding:0!important;margin:0!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
    caret-color:transparent!important;color:transparent!important;pointer-events:none!important}
.grt-bar{display:flex;align-items:center;gap:1px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;padding:3px 2px;margin-bottom:2px}
.grt-bar::-webkit-scrollbar{display:none}
.grt-btn{flex:0 0 auto;min-width:30px;height:30px;padding:0 6px;border:1px solid transparent;
    background:none;border-radius:7px;cursor:pointer;font-family:inherit;font-size:13px;
    line-height:1;color:#4d463b;opacity:.65;transition:opacity .12s,background .12s}
.grt-btn:hover{opacity:1;background:rgba(168,134,63,.12)}
.grt-btn[aria-pressed="true"]{opacity:1;background:rgba(168,134,63,.18);border-color:rgba(168,134,63,.5);color:#8a6d2f}
.grt-sep{flex:0 0 auto;width:1px;height:18px;background:rgba(0,0,0,.12);margin:0 4px}
.grt-editor{min-height:38px;max-height:220px;overflow-y:auto;padding:8px 10px;outline:none;
    border-radius:10px;font-family:inherit;font-size:14px;line-height:1.45;color:#2b2620;
    background:transparent;word-break:break-word}
.grt-editor:focus{outline:none}
/* Invite en :AFTER et non en :before — ticket LNOfWZLWj4oe7fxLk8UJ.
   Un pseudo-élément `:before` en flux occupe le début de la ligne : le caret,
   qui vit à l'offset 0 du contenu, se peint donc APRÈS le texte de l'invite.
   En `:after` l'ordre s'inverse — caret au tout début, invite juste derrière,
   ce que demande le ticket. On reste en FLUX (plutôt que `position:absolute`)
   pour que l'invite continue de passer à la ligne et de faire grandir le champ
   sur mobile, où « Ajouter un commentaire… » tient sur deux lignes.
   Contrepartie : l'invite doit rester sur la même ligne que le caret, donc
   l'éditeur doit être RÉELLEMENT vide — c'est le rôle de `normaliserSiVide()`
   dans richtext.js, sans quoi un résidu `<div><br></div>` la repousserait
   dessous. Les deux moitiés du correctif se tiennent. */
.grt-editor.grt-empty:after{content:attr(data-placeholder);opacity:.45;pointer-events:none}
/* iOS zoome sur tout champ < 16px : on neutralise ça sur mobile. */
@media (max-width:640px){ .grt-editor{font-size:16px} .grt-btn{min-width:34px;height:34px} }

body[data-gtheme="dark"] .grt-btn{color:rgba(255,255,255,.75)}
body[data-gtheme="dark"] .grt-btn:hover{background:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .grt-btn[aria-pressed="true"]{background:rgba(221,203,164,.2);
    border-color:rgba(221,203,164,.45);color:#ddcba4}
body[data-gtheme="dark"] .grt-sep{background:rgba(221,203,164,.18)}
body[data-gtheme="dark"] .grt-editor{color:rgba(255,255,255,.9)}

/* ── Mise en forme : saisie ET rendu partagent la même allure ──
   LES QUATRE SURFACES QUI AFFICHENT DU GMK1 (GandalfRichText.render) :
   bulles du chat, commentaires de tâche, description de tâche, et depuis le
   ticket dvR8pctH2SR8HbRJ7f2U les NOTES PARTAGÉES de la fiche magasin. Elles
   n'ont jamais eu de raison de différer — mais les règles ci-dessous ne
   nommaient que le chat. Un courriel collé depuis Gmail dans un commentaire
   perdait donc TOUTE sa structure : ni marge entre paragraphes, ni liste, ni
   citation, ni code (ticket jfKfoBS).
   :is() plutôt qu'une liste dupliquée : sa spécificité est celle de son
   argument le plus fort, donc (0,2,0) — EXACTEMENT celle de l'ancien
   « .chat-msg-content .grt-* ». Rien ne change pour le chat.
   Une cinquième surface s'ajoute ICI, et dans TOUTES les règles du bloc :
   une seule oubliée, et cette surface-là perd une seule chose (les listes, ou
   les citations…) — le genre de défaut qu'on ne voit qu'en production. C'est
   pour ça que test/richtext-surfaces-css.test.js compare les 24 groupes entre
   eux plutôt que de faire confiance. */
.grt-editor blockquote,:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) .grt-quote{border-left:3px solid rgba(168,134,63,.55);
    margin:5px 0;padding:1px 0 1px 10px;color:inherit;opacity:.9}
.grt-editor ul,.grt-editor ol,:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) :is(.grt-ul,.grt-ol){margin:4px 0;padding-left:22px}
.grt-editor li,:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) li{margin:1px 0}
/* ── CASES À COCHER (ticket dkkKQW9w, D. Paquette, 25/08) ──────────────────
   « Quand on veut éditer une note ou en écrire une, on tombe dans une version
   code plutôt que dans une boîte de rédaction. » Sa note EST une liste de
   choses à faire : la barre des Notes écrit « - [ ] » depuis toujours, et rien
   dans GANDALF ne savait l'afficher autrement qu'en toutes lettres.
   La case est un `::before` posé dans la gouttière de 22px de la liste — pas
   un <input>, qui serait un nœud éditable de plus à faire survivre au
   contenteditable, au collage et à la sérialisation. L'état vit sur le <li>.
   Une seule règle pour l'éditeur ET pour l'affichage : c'est la même chose
   vue de deux endroits, et les laisser diverger est précisément le défaut que
   ce ticket et les deux précédents décrivent. */
.grt-editor li.grt-task,
:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) li.grt-task{
    list-style:none;position:relative}
.grt-editor li.grt-task::before,
:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) li.grt-task::before{
    content:'☐';position:absolute;left:-19px;width:16px;text-align:center;
    font-size:1.05em;line-height:inherit;opacity:.75}
/* Le curseur « main » SEULEMENT là où cliquer fait quelque chose. Dans un
   message déjà envoyé ou un commentaire publié, la case est un compte rendu,
   pas une commande : promettre un clic qui n'arrive pas est la même tromperie
   que le reste de ce ticket, en plus petit. */
.grt-editor li.grt-task::before{cursor:pointer}
.grt-editor li.grt-task-on::before,
:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) li.grt-task-on::before{
    content:'☑';opacity:1;color:#1c6b3a}
/* Cochée = faite. Le texte s'efface sans disparaître : on doit pouvoir relire
   ce qu'on a terminé, et voir d'un coup d'œil ce qui reste. */
.grt-editor li.grt-task-on,
:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) li.grt-task-on{
    opacity:.62;text-decoration:line-through;text-decoration-color:rgba(120,110,90,.5)}
body[data-gtheme="dark"] .grt-editor li.grt-task-on::before,
body[data-gtheme="dark"] :is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) li.grt-task-on::before{
    color:#7ee0a4}
.grt-editor code,:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) .grt-code{background:rgba(120,110,90,.14);padding:1px 5px;
    border-radius:5px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.92em}
.grt-editor pre,:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) .grt-pre{background:rgba(120,110,90,.12);padding:8px 10px;
    border-radius:8px;overflow-x:auto;margin:5px 0}
.grt-editor pre code,:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) .grt-pre code{background:none;padding:0}
.grt-editor mark,:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) .grt-mark{background:rgba(255,214,102,.55);color:inherit;
    padding:0 2px;border-radius:3px}
/* Surligneur couleurs (spec 2026-08-17, ticket tnOlYluI) — allowlist, clair/sombre.
   !important : sinon le jaune générique « .grt-editor mark » ci-dessus gagne
   en spécificité dans l'éditeur. Classes globales : chat, commentaires,
   descriptions de tâches partagent le même rendu. */
.grt-mark-vert{background:rgba(105,219,124,.45)!important;color:inherit}
.grt-mark-bleu{background:rgba(102,178,255,.45)!important;color:inherit}
.grt-mark-rose{background:rgba(255,128,171,.45)!important;color:inherit}
body[data-gtheme="dark"] .grt-mark-vert{background:rgba(105,219,124,.28)!important;color:#fff}
body[data-gtheme="dark"] .grt-mark-bleu{background:rgba(102,178,255,.28)!important;color:#fff}
body[data-gtheme="dark"] .grt-mark-rose{background:rgba(255,128,171,.30)!important;color:#fff}
/* Split-button surligneur de la barre grt */
.grt-hl{display:inline-flex;position:relative;align-items:center}
.grt-hl-arrow{padding:0 3px;font-size:10px;min-width:0}
.grt-hl-pop{position:absolute;top:100%;left:0;display:flex;gap:5px;padding:6px;background:var(--bg-card,#fff);
    border:1px solid rgba(0,0,0,.14);border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.18);z-index:40}
body[data-gtheme="dark"] .grt-hl-pop{background:#2a2a2e;border-color:rgba(255,255,255,.14)}
/* `hidden` perd contre le display:flex ci-dessus : sans cette règle, les quatre
   pastilles restent ouvertes par-dessus la zone de saisie dès que la barre est
   dépliée (ticket UGDah5nuoEbIlcDLS2LE). Seul ▾ doit les montrer. */
.grt-hl-pop[hidden]{display:none}
.grt-hl-swatch{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.18);cursor:pointer;padding:0}
.grt-hl-aucun{background:transparent;color:inherit;font-size:12px;line-height:1;opacity:.75}
.grt-hl-aucun:hover{opacity:1}

/* ── Réglages de caractère : couleur, taille, police, graisse ───────────
   VOLONTAIREMENT NON PORTÉES par une liste de surfaces. Les autres classes
   du rendu sont préfixées par la liste des surfaces — chat, commentaires,
   description de tâche, notes CRM — parce qu'elles datent d'un temps où l'on
   connaissait les quatre endroits qui rendaient du GMK (et le test
   test/richtext-surfaces-css.test.js veille à ce que les 24 règles nomment
   toutes la même liste). Le popup d'annonce en est un cinquième, et la
   prochaine surface serait un sixième oubli — un texte qui s'affiche en noir
   alors que son auteur l'a mis en rouge, sans rien dans la console pour le
   dire. Le préfixe `grt-` est assez distinctif pour se passer de portée.
   Tailles en `em` : elles se composent proprement dans un titre ou une
   citation, là où des `px` écraseraient la mise en page d'accueil. */
.grt-c-rouge{color:#c62828}
.grt-c-orange{color:#d84315}
.grt-c-vert{color:#2e7d32}
.grt-c-bleu{color:#1565c0}
.grt-c-violet{color:#6a1b9a}
.grt-c-gris{color:#5f6368}
body[data-gtheme="dark"] .grt-c-rouge{color:#ff8a80}
body[data-gtheme="dark"] .grt-c-orange{color:#ffab91}
body[data-gtheme="dark"] .grt-c-vert{color:#a5d6a7}
body[data-gtheme="dark"] .grt-c-bleu{color:#90caf9}
body[data-gtheme="dark"] .grt-c-violet{color:#ce93d8}
body[data-gtheme="dark"] .grt-c-gris{color:#b0b3b8}
.grt-z-xs{font-size:.78em}
.grt-z-sm{font-size:.89em}
.grt-z-lg{font-size:1.16em}
.grt-z-xl{font-size:1.38em}
.grt-z-xxl{font-size:1.72em}
.grt-f-titre{font-family:Outfit,Inter,system-ui,sans-serif}
.grt-f-serif{font-family:Georgia,"Times New Roman",serif}
.grt-f-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.grt-g-maigre{font-weight:300}
.grt-g-demi{font-weight:600}
.grt-g-noir{font-weight:900}

/* Panneau 🎨 de la barre grt (opt-in : `mountEditor(ta,{styles:true})`) */
.grt-sty{display:inline-flex;position:relative;align-items:center}
.grt-sty-pop{position:absolute;top:100%;left:0;display:flex;flex-direction:column;gap:6px;padding:8px;
    background:var(--bg-card,#fff);border:1px solid rgba(0,0,0,.14);border-radius:10px;
    box-shadow:0 6px 18px rgba(0,0,0,.2);z-index:41;min-width:15rem}
body[data-gtheme="dark"] .grt-sty-pop{background:#2a2a2e;border-color:rgba(255,255,255,.14)}
.grt-sty-pop[hidden]{display:none}           /* même piège que .grt-hl-pop */
.grt-sty-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.grt-sty-lbl{flex:0 0 4.6rem;font-size:11px;opacity:.7;text-transform:uppercase;letter-spacing:.03em}
.grt-sty-chip{border:1px solid rgba(0,0,0,.16);background:transparent;border-radius:7px;padding:2px 7px;
    font-size:12px;line-height:1.5;cursor:pointer;color:inherit}
.grt-sty-chip:hover{background:rgba(120,110,90,.14)}
body[data-gtheme="dark"] .grt-sty-chip{border-color:rgba(255,255,255,.2)}
/* Les pastilles de couleur montrent la lettre A teintée : un carré plein ne
   dirait pas si la couleur s'applique au texte ou au fond — c'est la
   confusion exacte qu'on a avec le surligneur juste à côté. */
.grt-sty-dot{width:1.9rem;text-align:center;font-weight:800;padding:2px 0}
.grt-editor h1,.grt-editor h2,.grt-editor h3,:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) .grt-h{font-size:1.08em;
    font-weight:750;margin:6px 0 2px;line-height:1.3}
.grt-editor hr,:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) .grt-hr{border:none;border-top:1px solid rgba(120,110,90,.28);margin:8px 0}
:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) .grt-p{margin:0}
:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) .grt-p + .grt-p{margin-top:3px}
/* La ligne vide que l'auteur a réellement tapée (richtext.js → .grt-blank).
   Pas une marge : un vrai trou, qui ne fusionne pas avec les marges voisines
   et reste proportionnel au corps du texte. */
:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) .grt-blank{height:.7em}
.grt-editor img.grt-img,:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) img.grt-img{max-width:100%;border-radius:8px;vertical-align:middle}
/* DANS L'ÉDITEUR seulement — jamais à l'affichage, où l'image doit être grande.
   Le champ est borné à 220 px : une image en pleine largeur les prend tous, et
   le texte qu'on est venu corriger sort de l'écran. Constaté en photographiant
   le banc du ticket ZvSISxOd, sur le contenu même de Daphnée (une image suivie
   de trois lignes) — et le champ d'ÉCRITURE avait déjà le défaut, à l'identique.
   On la ramène donc à une vignette des deux côtés à la fois : écrire et
   modifier doivent rester le même geste, y compris sur ce point. */
.grt-editor img.grt-img{max-height:140px;width:auto}
/* Image collée dont l'envoi est EN COURS. On affiche l'aperçu local aussitôt —
   au lieu du jeton `[img:…]`, que personne n'a tapé et qui inquiète — et on
   signale l'attente : voile pulsant + liseré. Pas de pseudo-élément possible
   sur une <img> (élément remplacé), le signal passe donc par l'image même. */
.grt-editor img.grt-img-pending{outline:2px dashed rgba(168,134,63,.75);outline-offset:2px;
    animation:grtImgPending 1.1s ease-in-out infinite}
@keyframes grtImgPending{0%,100%{opacity:.4}50%{opacity:.72}}
@media (prefers-reduced-motion:reduce){
    .grt-editor img.grt-img-pending{animation:none;opacity:.55}
}
/* RETIRER une vignette posée dans le texte (ticket rELQ7AN8RAfBxmZxQ6Fq).
   Le ✕ est posé dans .grt-wrap — déjà `position:relative` — et JAMAIS dans la
   surface éditable : ce qui vit dans l'éditeur repart dans le texte sérialisé.
   D'où le positionnement en pixels, calculé par richtext.js à chaque survol,
   défilement et redimensionnement. */
.grt-editor img.grt-img{cursor:pointer}      /* la vignette se désigne au clic */
.grt-editor img.grt-img-vise{outline:2px solid rgba(168,134,63,.9);outline-offset:2px}
.grt-img-del{position:absolute;z-index:6;width:22px;height:22px;padding:0;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.85);border-radius:50%;
    background:rgba(40,40,40,.86);color:#fff;font-size:.72rem;line-height:1;
    cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.grt-img-del[hidden]{display:none}           /* `hidden` perd contre display:flex */
.grt-img-del:hover{background:#b85443}
.grt-img-del:focus-visible{outline:2px solid #a8863f;outline-offset:2px}
/* Pointeur grossier (mobile, tablette) : pas de survol pour révéler le ✕, il
   n'apparaît qu'après un appui sur la vignette — donc il doit être atteignable
   au doigt. */
@media (pointer:coarse){ .grt-img-del{width:28px;height:28px;font-size:.82rem} }
:is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) .grt-link{text-decoration:underline}

body[data-gtheme="dark"] .grt-editor code,
body[data-gtheme="dark"] :is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) .grt-code,
body[data-gtheme="dark"] .grt-editor pre,
body[data-gtheme="dark"] :is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) .grt-pre{background:rgba(221,203,164,.12)}
body[data-gtheme="dark"] .grt-editor mark,
body[data-gtheme="dark"] :is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) .grt-mark{background:rgba(255,214,102,.34);color:#fff}
body[data-gtheme="dark"] .grt-editor hr,
body[data-gtheme="dark"] :is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) .grt-hr{border-top-color:rgba(221,203,164,.25)}
body[data-gtheme="dark"] .grt-editor blockquote,
body[data-gtheme="dark"] :is(.chat-msg-content,.tasks-comment-content,.tasks-detail-desc,.crm-note__body,.gannounce-msg) .grt-quote{border-left-color:rgba(221,203,164,.5)}

/* ── Balayage des lignes « Messages et courriels » (vue Aujourd'hui) ──
   Droite = marquer lu · Gauche = masquer.
   Le repère est RÉVÉLÉ sous la ligne pendant le geste : l'utilisateur voit ce
   qui va se passer et peut faire marche arrière tant qu'il n'a pas relâché.
   Il ne s'allume (opacité pleine) qu'une fois le seuil de validation franchi. */
.trm-swipe { position: relative; }
.trm-swipe-act {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: space-between; padding: 0 18px; border-radius: 12px;
    pointer-events: none; opacity: 0; transition: opacity .12s ease;
    font-size: 13px; font-weight: 700; letter-spacing: .01em;
}
.trm-swipe-act .trm-swipe-read { color: #1c6b3a; }
.trm-swipe-act .trm-swipe-hide { color: #8a5a2f; margin-left: auto; }
/* Seul le côté vers lequel on glisse est visible. */
.trm-sw-right .trm-swipe-act { opacity: .5; background: rgba(46,160,90,.14); }
.trm-sw-left  .trm-swipe-act { opacity: .5; background: rgba(168,134,63,.14); }
.trm-sw-right .trm-swipe-hide, .trm-sw-left .trm-swipe-read { visibility: hidden; }
/* Seuil franchi : le geste est « armé », relâcher validera. */
.trm-sw-armed.trm-sw-right .trm-swipe-act { opacity: 1; background: rgba(46,160,90,.22); }
.trm-sw-armed.trm-sw-left  .trm-swipe-act { opacity: 1; background: rgba(168,134,63,.22); }

body[data-gtheme="dark"] .trm-swipe-act .trm-swipe-read { color: #7ee0a4; }
body[data-gtheme="dark"] .trm-swipe-act .trm-swipe-hide { color: #ddcba4; }
body[data-gtheme="dark"] .trm-sw-right .trm-swipe-act { background: rgba(46,160,90,.2); }
body[data-gtheme="dark"] .trm-sw-left  .trm-swipe-act { background: rgba(221,203,164,.16); }
body[data-gtheme="dark"] .trm-sw-armed.trm-sw-right .trm-swipe-act { background: rgba(46,160,90,.3); }
body[data-gtheme="dark"] .trm-sw-armed.trm-sw-left  .trm-swipe-act { background: rgba(221,203,164,.24); }

/* ── Composeur du chat AVEC éditeur enrichi (maquette 2026-08-13) ─────
   Rangée 1 : le CHAMP, large et redimensionnable.
   Rangée 2 : outils ronds · séparateur · bouton « Aa » … emoji · envoi.
   La mise en forme n'occupe plus de place en permanence : elle vit dans une
   infobulle ouverte par « Aa ». Le composeur redevient calme au repos.
   Tout est gardé par :has(.grt-editor) — sans éditeur enrichi monté, la
   disposition d'origine reste intacte. */
.chat-composer .grt-wrap { flex: 1 1 auto; min-width: 0; }
.chat-composer .grt-editor {
    border: 1px solid rgba(168,134,63,.55); border-radius: 14px; background: #fff;
    padding: 14px 16px; font-size: 15px; line-height: 1.5; color: #2b2620;
    min-height: 96px; max-height: 40vh; overflow-y: auto;
    resize: vertical;            /* poignée en bas à droite, comme la maquette */
}
.chat-composer .grt-editor:focus { border-color: var(--chanv-or, #A8863F); box-shadow: 0 0 0 3px rgba(168,134,63,.10); }
body[data-gtheme="dark"] .chat-composer .grt-editor {
    background: #2b2823; border-color: rgba(221,203,164,.3); color: rgba(255,255,255,.92);
}

/* Disposition en deux rangées, à toutes les largeurs. */
.chat-composer-row:has(.grt-editor) { flex-wrap: wrap; align-items: center; row-gap: 10px; }
.chat-composer-row:has(.grt-editor) .grt-wrap { flex: 0 0 100%; order: 0; }
.chat-composer-row:has(.grt-editor) .chat-tools-expand,
.chat-composer-row:has(.grt-editor) .chat-tools-left,
.chat-composer-row:has(.grt-editor) .chat-fmt-slot,
.chat-composer-row:has(.grt-editor) .chat-rec-bar { order: 1; }
/* Emoji et envoi calés à DROITE. On fait absorber l'espace libre par le bloc
   de mise en forme plutôt que par une marge auto sur l'emoji : cette marge
   consommait toute la place et poussait le bouton d'envoi à la ligne suivante,
   seul et aligné à gauche, dès que la rangée devenait étroite. */
.chat-composer-row:has(.grt-editor) .chat-fmt-slot { flex: 1 1 auto; }
.chat-composer-row:has(.grt-editor) #chatEmojiBtn { order: 2; }
.chat-composer-row:has(.grt-editor) .chat-send { order: 3; }

/* Outils ronds façon maquette. */
.chat-composer-row:has(.grt-editor) .chat-tool-btn {
    width: 42px; height: 42px; min-width: 42px; padding: 0; border-radius: 50%;
    border: 1px solid rgba(40,34,24,.16); background: #fff; font-size: 17px;
}
.chat-composer-row:has(.grt-editor) .chat-tool-btn:hover { border-color: var(--chanv-or, #A8863F); }
body[data-gtheme="dark"] .chat-composer-row:has(.grt-editor) .chat-tool-btn {
    background: #2b2823; border-color: rgba(221,203,164,.22);
}
/* Bouton d'envoi : disque plein, la seule couleur pleine du composeur. */
.chat-composer-row:has(.grt-editor) .chat-send {
    width: 52px; height: 52px; min-width: 52px; padding: 0; border-radius: 50%;
    font-size: 20px; display: flex; align-items: center; justify-content: center;
}

/* ── Bouton « Aa » + infobulle de mise en forme ── */
.chat-fmt-slot { display: inline-flex; align-items: center; gap: 10px; }
/* Filet de séparation entre les outils et la mise en forme (maquette). */
.chat-fmt-slot::before {
    content: ''; width: 1px; height: 24px; background: rgba(40,34,24,.16);
}
body[data-gtheme="dark"] .chat-fmt-slot::before { background: rgba(221,203,164,.22); }
.grt-fmt { position: relative; display: inline-flex; }
.grt-fmt-btn {
    width: 42px; height: 42px; border: 1px solid transparent; border-radius: 12px;
    background: none; cursor: pointer; font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px; font-weight: 700; color: #6b5a3a; line-height: 1;
    transition: background .12s, color .12s;
}
.grt-fmt-btn:hover { background: rgba(168,134,63,.10); }
.grt-fmt-btn.on { background: rgba(168,134,63,.16); color: var(--chanv-or, #A8863F); }
body[data-gtheme="dark"] .grt-fmt-btn { color: #ddcba4; }
body[data-gtheme="dark"] .grt-fmt-btn:hover { background: rgba(221,203,164,.12); }
body[data-gtheme="dark"] .grt-fmt-btn.on { background: rgba(221,203,164,.2); color: #E8CD8C; }

/* L'infobulle s'ouvre AU-DESSUS du bouton : sous le champ, elle recouvrirait
   le texte qu'on est en train de mettre en forme. */
.grt-bar.grt-pop {
    position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    z-index: 40; display: flex; align-items: center; gap: 2px;
    background: #fff; border-radius: 14px; padding: 8px 10px;
    box-shadow: 0 8px 28px rgba(40,34,24,.16); border: 1px solid rgba(40,34,24,.08);
    overflow: visible;
}
.grt-bar.grt-pop[hidden] { display: none; }
/* Petite flèche vers le bouton — l'infobulle doit dire d'où elle vient. */
.grt-bar.grt-pop::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 7px solid transparent; border-top-color: #fff;
}
body[data-gtheme="dark"] .grt-bar.grt-pop { background: #2f2b24; border-color: rgba(221,203,164,.16); }
body[data-gtheme="dark"] .grt-bar.grt-pop::after { border-top-color: #2f2b24; }
.grt-bar.grt-pop .grt-btn { min-width: 36px; height: 36px; font-size: 15px; }

/* Barre ÉPINGLÉE — bouton « Aa » laissé enfoncé (ticket wxXoS9hLPmLKilnedbVN).
   Elle quitte l'infobulle pour une rangée EN FLUX juste au-dessus du champ :
   une infobulle laissée ouverte en permanence recouvrirait le texte qu'on met
   en forme. Même allure que la barre de la description de tâche, qui est
   dépliée depuis toujours — les deux surfaces se ressemblent enfin. */
.grt-bar.grt-bar-fixe {
    position: static; transform: none; box-shadow: none; background: none;
    border: 0; border-bottom: 1px solid rgba(40,34,24,.08); border-radius: 0;
    padding: 2px 2px 4px; margin-bottom: 4px; z-index: auto;
    /* `overflow-x:auto` (barre de base) ROGNERAIT les pastilles du surligneur,
       qui se déploient sous leur bouton : c'est déjà pour ça que la variante
       infobulle repasse en `visible`. */
    overflow: visible;
}
.grt-bar.grt-bar-fixe::after { content: none; }
body[data-gtheme="dark"] .grt-bar.grt-bar-fixe { border-bottom-color: rgba(221,203,164,.16); }

@media (max-width: 640px) {
    /* Mobile : mêmes rangées, tailles resserrées pour que la rangée d'outils
       tienne sur UNE ligne. Sans ce resserrement, emoji et envoi passaient à la
       ligne suivante et le bouton d'envoi se retrouvait seul, aligné à gauche. */
    .chat-composer .grt-editor { font-size: 16px; min-height: 80px; padding: 12px 14px; }
    .chat-composer-row:has(.grt-editor) { column-gap: 4px; }
    .chat-composer-row:has(.grt-editor) .chat-tools-left { gap: 4px; }
    .chat-composer-row:has(.grt-editor) .chat-tool-btn { width: 34px; height: 34px; min-width: 34px; font-size: 15px; }
    .chat-composer-row:has(.grt-editor) .chat-send { width: 42px; height: 42px; min-width: 42px; font-size: 17px; }
    .chat-composer-row:has(.grt-editor) .chat-fmt-slot { gap: 6px; min-width: 0; }
    .grt-fmt-btn { width: 34px; height: 34px; font-size: 16px; }
    /* L'infobulle ne doit jamais déborder de l'écran sur un petit mobile. */
    .grt-bar.grt-pop { left: 0; transform: none; max-width: calc(100vw - 32px); overflow-x: auto; }
    .grt-bar.grt-pop::after { left: 20px; transform: none; }
}

/* Enregistrement vocal : la règle d'origine masquait « .chat-composer textarea »,
   qui n'est plus la surface visible — l'éditeur enrichi restait donc affiché EN
   MÊME TEMPS que la barre rouge d'enregistrement. */
.chat-composer.is-recording .grt-wrap,
.chat-composer.is-recording .grt-bar { display: none; }
/* Envoi en cours : `disabled` n'existe pas sur un contenteditable — l'adaptateur
   pose cette classe pour que l'état soit VISIBLE autant que réel. */
.chat-composer .grt-editor.grt-disabled { opacity: .55; pointer-events: none; }

/* ── Réordonner les tâches par glisser-déposer (vue Listes) ───────────
   Une zone de dépôt = une SECTION. Le curseur « grab » n'apparaît qu'au
   survol : afficher une poignée permanente alourdirait des listes déjà
   denses, et toute la carte est saisissable. */
.tasks-dropzone { min-height: 2px; }
/* Une section VIDE se réduisait à ces 2 px — une cible que la souris ne peut
   pas viser, et qui ne se voit pas. Déposer une tâche sur une journée sans
   tâche était donc impossible : le geste n'atteignait aucune zone, aucun
   `drop` ne partait, et la carte reprenait sa place au rendu suivant.
   Ticket J5soN (D. Paquette) — cible visée : « VENDREDI 28 AOÛT 0 ».
   Le temps du glisser SEULEMENT (classe posée par bindTaskReorder), toute
   section vide s'ouvre en une bande franche et pointillée. Hors glisser la
   règle ne s'applique pas : les 18 groupes-jour du calendrier de production
   ne laissent aucun trou dans la page. */
.tasks-dragging .tasks-dropzone:empty {
    min-height: 40px;
    box-shadow: inset 0 0 0 1px rgba(168,134,63,.30);
    border-radius: 10px;
}
body[data-gtheme="dark"] .tasks-dragging .tasks-dropzone:empty {
    box-shadow: inset 0 0 0 1px rgba(221,203,164,.30);
}
.tasks-card[draggable="true"] { cursor: grab; }
.tasks-card[draggable="true"]:active { cursor: grabbing; }
/* La carte saisie reste visible (on doit voir CE qu'on déplace) mais s'efface
   assez pour que l'aperçu d'insertion derrière elle se lise. */
.tasks-card-dragging {
    opacity: .45; transform: scale(.985);
    box-shadow: 0 6px 18px rgba(40,34,24,.16);
}
/* Section active : un liseré discret confirme où le dépôt aura lieu. */
.tasks-dropzone.tasks-dz-over {
    background: rgba(168,134,63,.05);
    box-shadow: inset 0 0 0 1px rgba(168,134,63,.28);
    border-radius: 10px;
}
body[data-gtheme="dark"] .tasks-card-dragging { box-shadow: 0 6px 18px rgba(0,0,0,.45); }
body[data-gtheme="dark"] .tasks-dropzone.tasks-dz-over {
    background: rgba(221,203,164,.06);
    box-shadow: inset 0 0 0 1px rgba(221,203,164,.3);
}
/* Pointeur grossier (tactile) : le glisser HTML5 n'y est pas fiable et
   entrerait en conflit avec le défilement. On neutralise proprement plutôt
   que d'offrir un geste qui échoue une fois sur deux. */
@media (pointer: coarse) {
    .tasks-card[draggable="true"] { cursor: default; }
}

/* ── Le même geste dans l'ATELIER, en rangées ─────────────────────────
   Ticket 1pYYD42BtgYw1TX3z4zu : le tableau d'un projet dessine la même
   hiérarchie liste → groupe, mais en rangées de tableau. Mêmes signaux,
   mêmes teintes, mêmes seuils que les cartes ci-dessus — un utilisateur
   qui passe d'un écran à l'autre ne réapprend rien. La classe d'état
   `.tasks-dragging` est DÉLIBÉRÉMENT partagée : il n'y a qu'un glisser en
   cours à la fois, deux noms pour cela seraient deux vérités possibles. */
.gest-ligne[draggable="true"] { cursor: grab; }
.gest-ligne[draggable="true"]:active { cursor: grabbing; }
.gest-ligne-dragging { opacity: .45; }
.gest-dropzone { min-height: 2px; }
/* Un groupe VIDE se réduit à ces 2 px : invisible, donc invisable. Le temps
   du glisser seulement, il s'ouvre en une bande franche — sans quoi ranger
   une tâche dans une semaine encore vide serait impossible. */
.tasks-dragging .gest-dropzone:empty {
    min-height: 40px;
    box-shadow: inset 0 0 0 1px rgba(168,134,63,.30);
    border-radius: 8px;
}
.gest-dropzone.gest-dz-over {
    background: rgba(168,134,63,.05);
    box-shadow: inset 0 0 0 1px rgba(168,134,63,.28);
    border-radius: 8px;
}
body[data-gtheme="dark"] .tasks-dragging .gest-dropzone:empty {
    box-shadow: inset 0 0 0 1px rgba(221,203,164,.30);
}
body[data-gtheme="dark"] .gest-dropzone.gest-dz-over {
    background: rgba(221,203,164,.06);
    box-shadow: inset 0 0 0 1px rgba(221,203,164,.3);
}
/* ── LE BANDEAU D'UNE LISTE EST UNE CIBLE ────────────────────────────
   Ticket ybJTST4q6s6oGjFhspfl : les listes du tableau sont repliées par
   défaut, et une liste repliée n'affiche que son bandeau. Il reçoit donc
   la tâche (voir bindGestionGlisser), et il doit le DIRE — une cible
   muette ne vaut pas mieux que pas de cible.
   Le liseré d'attente ne vit que pendant le glisser : en peindre un en
   permanence sur chaque liste ferait un tableau de cadres.
   Spécificité volontairement montée à quatre classes : le fond du
   bandeau est posé plus bas dans cette feuille (`.gest2 .gest-list-head`)
   et l'emporterait autrement. */
.tasks-dragging .gest2 .gest-list-head.gest-tete-depot {
    box-shadow: inset 0 0 0 1px rgba(168,134,63,.22);
}
.gest2 .gest-list-head.gest-tete-depot.gest-dz-over {
    background: rgba(168,134,63,.12);
    box-shadow: inset 0 0 0 2px rgba(168,134,63,.45);
}
body[data-gtheme="dark"] .gest2 .gest-list-head.gest-tete-depot.gest-dz-over {
    background: rgba(221,203,164,.12);
    box-shadow: inset 0 0 0 2px rgba(221,203,164,.42);
}
/* Le bandeau d'un GROUPE reçoit lui aussi (ticket ZqWwWBKnmRd6aMJXc1wp) :
   replié, il est la seule trace du groupe à l'écran. Mêmes signaux que
   celui d'une liste ; même spécificité, pour la même raison. */
.tasks-dragging .gest2 .gest-list-section-head.gest-tete-depot {
    box-shadow: inset 0 0 0 1px rgba(168,134,63,.22);
}
.gest2 .gest-list-section-head.gest-tete-depot.gest-dz-over {
    background: rgba(168,134,63,.12);
    box-shadow: inset 0 0 0 2px rgba(168,134,63,.45);
}
body[data-gtheme="dark"] .gest2 .gest-list-section-head.gest-tete-depot.gest-dz-over {
    background: rgba(221,203,164,.12);
    box-shadow: inset 0 0 0 2px rgba(221,203,164,.42);
}
@media (pointer: coarse) {
    .gest-ligne[draggable="true"] { cursor: default; }
}

/* ── 📍 LE REPLI TACTILE ──────────────────────────────────────────────
   Le bloc ci-dessus neutralisait le curseur de glisser sur tactile, et
   s'arrêtait là. Constat juste, conclusion incomplète : sur iPad il ne
   restait AUCUN moyen de changer une tâche de journée. Le geste ne marchait
   pas, ne disait pas pourquoi, et n'avait pas de remplaçant — É. Bouchard a
   fini par ouvrir un ticket (yNgRMbOQF6uzAOaciExY, 25/08) en décrivant
   exactement ça : ça ne bouge pas, et rien ne l'explique.
   Le bouton est TOUJOURS dans le HTML ; seule cette règle décide de le
   montrer. Pas de détection d'appareil en JavaScript — un portable à écran
   tactile répond à `pointer: coarse` par sa souris et garde donc les deux
   gestes, et un iPad branché à un clavier ne perd rien non plus.
   Caché par défaut plutôt que montré partout : sur un poste à souris, le
   glisser reste le geste, et une troisième icône dans le coin d'une carte
   volerait la place de l'épingle et du crayon. */
.tasks-card-move { display: none; }
@media (pointer: coarse) {
    .tasks-card-move {
        display: block; position: absolute; top: 6px; right: 52px;
        border: none; background: none; cursor: pointer; z-index: 2;
        font-size: 12px; padding: 3px; opacity: .45; filter: grayscale(1);
    }
    .tasks-card-move:active { opacity: 1; filter: none; }
    /* Trois boutons dans le coin, plus 22px que la réserve d'origine ne
       prévoyait pas : sans ça, le 📍 retomberait sur le premier avatar. */
    .tasks-card-assignees:not(:empty) { margin-right: 64px; }
    /* En cueillette, la carte entière EST la case à cocher : un bouton qui
       ouvrirait une modale au milieu d'une sélection est un piège. Même
       traitement que le crayon. */
    .tasks-card-picking .tasks-card-move { display: none; }
}

/* ── Vue Projets : en-têtes de section, tri, bascule, menu ⋮ ──────────
   Ces titres structurent la page (« ⭐ Favoris », « 📁 Tous les projets ») :
   ils sont volontairement PLUS LISIBLES que les étiquettes de groupe
   (.tasks-group-label, petites et en majuscules) — ce ne sont pas des
   étiquettes, ce sont des repères de navigation. */
.tasks-sec-head { display: flex; align-items: center; gap: 10px; margin: 26px 2px 12px; }
/* nowrap + flex-shrink:0 : le filet extensible (.tsh-rule) comprimait le
   titre jusqu'à le couper en deux lignes, alors que la place ne manquait pas. */
.tsh-title { font-size: 17px; font-weight: 750; color: #2b2620; letter-spacing: -.01em;
    white-space: nowrap; flex: 0 0 auto; }
.tsh-count { font-size: 13px; font-weight: 700; color: #9a8663; }
.tsh-rule { flex: 1; height: 1px; background: rgba(40,34,24,.12); }
/* width:auto + flex:0 0 auto — une règle GLOBALE `input, select { width:100% }`
   (style.css ~1047) faisait occuper au menu toute la largeur restante, et le
   filet se retrouvait à 0 px. */
.tsh-sort {
    font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 9px;
    border: 1px solid rgba(40,34,24,.16); background: #fff; color: #4d463b; cursor: pointer;
    width: auto; flex: 0 0 auto;
}
.tsh-views { display: inline-flex; gap: 2px; border: 1px solid rgba(40,34,24,.16); border-radius: 9px; padding: 2px; background: #fff; }
.tsh-view {
    border: none; background: none; cursor: pointer; border-radius: 7px;
    width: 30px; height: 26px; font-size: 14px; color: #7a6c55;
}
.tsh-view.on { background: rgba(168,134,63,.16); color: var(--chanv-or, #A8863F); }
/* Pastilles d'état des résultats de recherche : même bouton que .tsh-view, mais
   avec un libellé. La largeur fixe de 30px ci-dessus est faite pour un glyphe
   seul (▦ ☰) et rognerait « À faire ». Tout le reste — survol, état .on, mode
   sombre — est hérité de .tsh-view, exprès : deux jeux de règles finiraient
   par diverger. */
.tsh-view-txt { width: auto; padding: 0 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
body[data-gtheme="dark"] .tsh-title { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .tsh-rule { background: rgba(221,203,164,.16); }
body[data-gtheme="dark"] .tsh-sort,
body[data-gtheme="dark"] .tsh-views { background: #2b2823; border-color: rgba(221,203,164,.22); color: rgba(255,255,255,.85); }
body[data-gtheme="dark"] .tsh-view { color: rgba(255,255,255,.65); }
body[data-gtheme="dark"] .tsh-view.on { background: rgba(221,203,164,.2); color: #E8CD8C; }

/* Menu ⋮ — le bouton n'apparaît qu'au survol de la carte pour ne pas alourdir
   une grille déjà dense ; il reste visible tant que son menu est ouvert. */
.tpc-more {
    position: absolute; top: 10px; right: 8px; z-index: 3;
    border: none; background: none; cursor: pointer; font-size: 17px; line-height: 1;
    color: #7a6c55; opacity: 0; transition: opacity .12s; padding: 2px 4px; border-radius: 6px;
}
.tasks-proj-card:hover .tpc-more,
.tasks-proj-row:hover .tpc-more,
.tpc-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .tpc-more { opacity: 1; } }
.tpc-more:hover { background: rgba(40,34,24,.07); }
.tpc-menu {
    position: absolute; top: 34px; right: 6px; z-index: 20; min-width: 210px;
    background: #fff; border: 1px solid rgba(40,34,24,.12); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(40,34,24,.18); padding: 6px; display: flex; flex-direction: column;
}
.tpc-menu button {
    text-align: left; border: none; background: none; cursor: pointer; font: inherit;
    font-size: 13.5px; padding: 9px 10px; border-radius: 8px; color: #2b2620;
}
.tpc-menu button:hover { background: rgba(168,134,63,.1); }
.tpc-menu .tpc-menu-danger { color: #b3402f; }
.tpc-menu .tpc-menu-danger:hover { background: rgba(179,64,47,.09); }
body[data-gtheme="dark"] .tpc-menu { background: #2f2b24; border-color: rgba(221,203,164,.16); }
body[data-gtheme="dark"] .tpc-menu button { color: rgba(255,255,255,.9); }
body[data-gtheme="dark"] .tpc-menu button:hover { background: rgba(221,203,164,.12); }

/* ── Mode LISTE : une rangée par projet, beaucoup plus dense ── */
.tasks-proj-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 2px 22px; }
.tasks-proj-row {
    position: relative; display: flex; align-items: center; gap: 10px;
    background: var(--chanv-blanc, #fff); border: 1px solid rgba(40,34,24,.13);
    border-left: 4px solid rgba(21,87,153,.7); border-radius: 10px;
    padding: 11px 14px; cursor: pointer; transition: box-shadow .12s, transform .12s;
}
.tasks-proj-row:hover { transform: translateX(2px); box-shadow: 0 4px 14px rgba(40,34,24,.10); }
.tasks-proj-row.tasks-proj-chanvre { border-left-color: rgba(45,106,36,.75); }
.tasks-proj-row.tasks-proj-operations { border-left-color: rgba(21,87,153,.75); }
.tasks-proj-row.tasks-proj-innovation { border-left-color: rgba(94,53,177,.75); }
.tasks-proj-row.tasks-proj-culture { border-left-color: rgba(198,93,7,.75); }
.tpr-icon { font-size: 16px; }
.tpr-name { font-weight: 750; font-size: 14px; white-space: nowrap; }
.tpr-desc { flex: 1; min-width: 0; font-size: 13px; color: #7a6c55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpr-meta { font-size: 12.5px; color: #9a8663; white-space: nowrap; }
.tasks-proj-row .tpc-fav, .tasks-proj-row .tpc-group { position: static; }
.tasks-proj-row .tpc-more { position: static; }
body[data-gtheme="dark"] .tasks-proj-row { background: #26221b; border-color: rgba(221,203,164,.16); }
body[data-gtheme="dark"] .tpr-name { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .tpr-desc { color: rgba(255,255,255,.6); }
@media (max-width: 640px) {
    .tpr-desc { display: none; }        /* la description mangerait toute la ligne */
    .tasks-sec-head { flex-wrap: wrap; row-gap: 8px; }
}

/* ── Résultats de recherche de la grille : tâches, listes, groupes ──
   La barre du module ne filtrait que les projets déjà en mémoire ; ces
   rangées portent ce qui vient du serveur (ticket wmhXQ1n9U428ZpAWxmuJ,
   Daphnée). Même dessin que .tasks-proj-row — c'est la même grammaire de
   liste — mais le TITRE peut être long (une tâche n'est pas un nom de
   tableau) : il prend la largeur et s'ellipse, et c'est la méta qui reste
   à taille fixe. */
.tasks-hits { margin-bottom: 6px; }
.tasks-hits-msg { padding: 14px 4px; color: #9a8663; font-size: 13px; }
.tasks-hits-rows { display: flex; flex-direction: column; gap: 6px; margin: 10px 2px 22px; }
.tasks-hit {
    display: flex; align-items: center; gap: 10px;
    background: var(--chanv-blanc, #fff); border: 1px solid rgba(40,34,24,.13);
    border-left: 4px solid rgba(168,134,63,.7); border-radius: 10px;
    padding: 11px 14px; cursor: pointer; transition: box-shadow .12s, transform .12s;
}
.tasks-hit:hover { transform: translateX(2px); box-shadow: 0 4px 14px rgba(40,34,24,.10); }
.tasks-hit .th-ic { font-size: 15px; flex: 0 0 auto; }
.tasks-hit .th-name {
    flex: 1; min-width: 0; font-weight: 700; font-size: 13.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tasks-hit .th-meta { font-size: 12.5px; color: #9a8663; white-space: nowrap; flex: 0 0 auto; }
.tasks-hit .th-due {
    font-family: ui-monospace, monospace; font-size: 11.5px; color: #7a6c55;
    white-space: nowrap; flex: 0 0 auto;
}
/* Résultat archivé : liseré gris au lieu du doré, et titre légèrement estompé.
   La ligne reste parfaitement lisible et cliquable — on la range visuellement,
   on ne la cache pas (c'est tout le sujet du ticket Ekdh1bn6lc3pcoQm5Uj4). */
.tasks-hit-archived { border-left-color: rgba(40,34,24,.28); }
.tasks-hit-archived .th-name { font-weight: 600; opacity: .78; }
body[data-gtheme="dark"] .tasks-hit { background: #26221b; border-color: rgba(221,203,164,.16); }
body[data-gtheme="dark"] .tasks-hit-archived { border-left-color: rgba(221,203,164,.3); }
body[data-gtheme="dark"] .tasks-hit .th-name { color: rgba(255,255,255,.92); }
body[data-gtheme="dark"] .tasks-hit .th-meta,
body[data-gtheme="dark"] .tasks-hit .th-due { color: rgba(255,255,255,.6); }

/* Tiroir « 🔎 Affiner » des résultats de recherche — personne assignée, tableau,
   intervalle de dates (ticket rbZ68KC6jz32ktISkdO6, D. Paquette, 01/09).
   `wrap` et non une rangée qui déborde : sur un portable, cinq contrôles ne
   tiennent pas en largeur, et un tiroir qui se coupe cache justement le filtre
   qu'on vient de poser. */
.tasks-hits-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    margin: 10px 2px 2px; padding: 10px 12px;
    background: rgba(168,134,63,.06); border: 1px solid rgba(40,34,24,.11);
    border-radius: 10px;
}
.tasks-hits-filters .thf-item { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.tasks-hits-filters .thf-lab { font-size: 12px; color: #9a8663; white-space: nowrap; }
.tasks-hits-filters select,
.tasks-hits-filters input[type="date"] {
    font: inherit; font-size: 12.5px; padding: 4px 8px; max-width: 190px;
    border: 1px solid rgba(40,34,24,.16); border-radius: 8px;
    background: #fff; color: inherit; cursor: pointer;
}
/* La date native de Chrome ne rétrécit pas sous ~130 px sans tronquer son
   propre texte : on lui laisse sa place plutôt qu'un champ illisible. */
.tasks-hits-filters input[type="date"] { min-width: 132px; cursor: text; }
.tasks-hits-filters .thf-reset {
    margin-left: auto; font: inherit; font-size: 12px; padding: 4px 10px;
    border: 1px solid rgba(40,34,24,.16); border-radius: 8px;
    background: #fff; color: #9a8663; cursor: pointer;
}
.tasks-hits-filters .thf-reset:hover { color: #6d4d1f; border-color: rgba(168,134,63,.6); }
/* Le bouton du tiroir s'allume quand il cache des filtres posés — sinon on
   cherche longtemps pourquoi la liste est courte. */
.tsh-refine.on { background: rgba(168,134,63,.18); font-weight: 700; }
body[data-gtheme="dark"] .tasks-hits-filters {
    background: rgba(221,203,164,.05); border-color: rgba(221,203,164,.16);
}
body[data-gtheme="dark"] .tasks-hits-filters .thf-lab,
body[data-gtheme="dark"] .tasks-hits-filters .thf-reset { color: rgba(255,255,255,.62); }
body[data-gtheme="dark"] .tasks-hits-filters select,
body[data-gtheme="dark"] .tasks-hits-filters input[type="date"],
body[data-gtheme="dark"] .tasks-hits-filters .thf-reset {
    background: #2b2823; border-color: rgba(221,203,164,.22); color: rgba(255,255,255,.85);
}
body[data-gtheme="dark"] .tsh-refine.on { background: rgba(221,203,164,.22); }
@media (max-width: 640px) {
    /* Chaque filtre sur sa ligne, étiquette à gauche : empilés à moitié, les
       <select> se réduisaient à quelques pixels et devenaient inutilisables. */
    .tasks-hits-filters { gap: 8px; }
    .tasks-hits-filters .thf-item { width: 100%; }
    .tasks-hits-filters select { flex: 1; max-width: none; }
    .tasks-hits-filters .thf-reset { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
    /* Le nom de projet passe à la ligne plutôt que d'écraser le titre. */
    .tasks-hit { flex-wrap: wrap; row-gap: 4px; }
    .tasks-hit .th-name { flex: 1 1 100%; white-space: normal; }
}

/* Barre d'outils du chat TOUJOURS déployée avec l'éditeur enrichi : le champ
   ayant sa propre rangée, replier les outils ne lui rend aucune largeur — la
   flèche « › » n'aurait plus qu'un effet : masquer des boutons utiles. */
.chat-composer-row:has(.grt-editor) .chat-tools-expand { display: none !important; }
.chat-composer-row:has(.grt-editor).tools-collapsed .chat-tools-left { display: inline-flex !important; }

/* CLAVIER OUVERT : la barre gestuelle de l'iPhone est recouverte, donc toute
   réserve `env(safe-area-inset-bottom)` devient un ESPACE VIDE où l'on voit le
   fond pointillé de la page.
   Deux réserves existent, à des niveaux différents :
     1. le composeur lui-même (style.css) — traité ici ;
     2. le CONTENEUR `.chat-view.show-pane` (css/shell.css, conversation
        ouverte) — c'est LA cause principale du liseré signalé, traitée dans
        shell.css où la règle d'origine est définie. */
body.kb-open .chat-composer { padding-bottom: var(--chat-composer-pb, 12px); }

/* =====================================================================
   GRANDEURS D'UNIFORME — modale du formulaire + récapitulatif de commande
   ===================================================================== */
.us-overlay {
    position: fixed; inset: 0; z-index: 9600;
    background: rgba(20, 18, 14, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    /* Clavier ouvert sur iPhone : la modale doit rester atteignable. */
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    /* Pendant du padding-bottom : l'inset BAS était réservé, pas le haut — et
       ce déséquilibre remontait la modale centrée d'autant. Sur un écran à
       Dynamic Island, son bord haut arrivait sous l'heure. */
    padding-top: calc(16px + env(safe-area-inset-top));
    overflow-y: auto;
}
.us-modal {
    background: var(--card-bg, #fff);
    color: var(--text, #1c1a17);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    width: 100%; max-width: 440px;
    /* `100%` = boîte de CONTENU de .us-overlay, insets déduits : sans cette
       borne, une modale de 90vh dépasse la zone sûre, et comme l'overlay est
       en align-items:center le débordement part aussi vers le HAUT — donc sous
       l'encoche, et hors d'atteinte du défilement. Le 90vh reste en repli
       explicite : sur un moteur sans dvh tout le min() serait jeté. */
    max-height: 90vh;
    max-height: min(90dvh, 100%);
    overflow-y: auto;
    padding: 22px 22px 18px;
}
.us-modal-wide { max-width: 900px; }
.us-title { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; }
.us-intro { margin: 0 0 18px; font-size: .88rem; line-height: 1.45; opacity: .78; }

.us-fields { display: flex; flex-direction: column; gap: 14px; }
.us-field { display: flex; flex-direction: column; gap: 6px; }
.us-label { font-size: .85rem; font-weight: 600; }
/* `width` explicite : une règle globale `input, select { width: 100% }`
   étirait le select sur toute la largeur de la page. */
.us-field select {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px; font-size: 1rem;
    border: 1px solid var(--border, #d9d2c4); border-radius: 10px;
    background: var(--input-bg, #fff); color: inherit;
}
.us-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.us-note { margin: 10px 0 0; font-size: .76rem; opacity: .6; text-align: right; }

/* Totaux : le tableau qu'on transmet au fournisseur. */
.us-totals { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.us-tot {
    flex: 1 1 190px; min-width: 150px;
    border: 1px solid var(--border, #e3ddd0); border-radius: 12px; padding: 10px 12px;
}
.us-tot-h { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; opacity: .65; margin-bottom: 6px; }
.us-tot-l { display: flex; justify-content: space-between; padding: 3px 0; font-size: .92rem; }
.us-tot-l span { font-variant-numeric: tabular-nums; opacity: .75; }
.us-tot-empty { font-size: .84rem; opacity: .5; font-style: italic; }

.us-table-wrap { overflow-x: auto; max-height: 46vh; overflow-y: auto; border: 1px solid var(--border, #e3ddd0); border-radius: 12px; }
.us-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.us-table th, .us-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border, #eee7db); white-space: nowrap; }
.us-table thead th { position: sticky; top: 0; background: var(--card-bg, #fff); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; z-index: 1; }
.us-table tbody tr:last-child td { border-bottom: 0; }
/* Qui n'a pas encore répondu : c'est la relance à faire avant de commander. */
.us-missing td { opacity: .5; }
.us-dept { display: block; font-size: .74rem; opacity: .6; }

@media (max-width: 600px) {
    .us-modal { padding: 18px 16px 14px; border-radius: 14px; }
    .us-actions .btn { flex: 1 1 auto; }
}

/* Rappel : la saisie vit dans Gestion Employés, pas ici. */
.us-hint { margin: -8px 0 16px; font-size: .8rem; opacity: .6; font-style: italic; }
/* Taille présente sur une fiche mais absente de la charte actuelle : comptée
   quand même (la charte a pu changer après la saisie), signalée comme telle. */
.us-tot-l.us-hors b::after { content: ' ⚠'; opacity: .7; font-size: .8em; }
.us-tot-l.us-hors { opacity: .75; }

/* Poignées de réorganisation (listes et groupes de tâches).
   Le glisser part de la POIGNÉE et non du bloc : un bloc de liste contient déjà
   des cartes déplaçables, et rendre le bloc lui-même « draggable » ferait
   démarrer les deux glissers en même temps. */
.tasks-grip{
    display:inline-flex;align-items:center;justify-content:center;
    width:20px;height:22px;margin-right:2px;flex:0 0 auto;
    cursor:grab;user-select:none;
    color:rgba(40,34,24,.62);font-size:13px;line-height:1;letter-spacing:-1px;
    border-radius:5px;transition:color .12s, background .12s;
}
.tasks-grip:active{cursor:grabbing}
.tasks-grip:hover{color:rgba(40,34,24,.82);background:rgba(168,134,63,.12)}
/* Discrète au repos, franche au survol du bloc : elle ne doit pas concurrencer
   le titre, mais rester trouvable sans chercher.

   12/09, second temps. Le thème sombre corrigé (plus bas), la même mesure
   passée sur le thème CLAIR a donné 1,28:1 au repos — plus faible encore que
   le sombre AVANT correction. Personne ne l'avait signalé : on ne signale pas
   ce qu'on ne voit pas, la poignée passait pour une absence de poignée.

   Ici c'est l'arithmétique qui commande, pas le goût. Écrasée à opacity .45,
   l'encre du hub plafonne à 2,70:1 sur ce fond — à PLEINE alpha, c'est-à-dire
   qu'aucun choix de couleur ne la fait passer. Du noir pur y arriverait
   (3,30:1), mais il ne resterait plus rien au-dessus : au survol de la rangée
   la poignée sauterait à 19:1, l'élément le plus noir de la ligne qu'elle est
   censée servir. C'est donc la SECONDE atténuation qu'il faut lever, pas
   seulement la première — d'où les deux à la fois : encre .28 → .62, opacité
   de repos .45 → .8. Produit .496, soit 3,05:1 sur l'en-tête de liste : le
   seuil des composants d'interface, celui visé en sombre.

   Les deux thèmes lisent désormais la même échelle :
       repos 3,05:1 · survol de la rangée ~4,4:1 · survol de la poignée ~8,4:1
   Elle reste l'élément le plus discret de la rangée (le compteur est à
   3,52:1, le titre à 6,67:1) — discrète, donc, mais plus invisible.

   Le survol DIRECT monte de .6 à .82 pour la même raison de rang : le repos
   venait de le rejoindre, et une poignée qui ne répond pas quand on la touche
   ne se distingue plus d'une poignée morte. */
.tasks-list-head .tasks-grip,
.tasks-group-label .tasks-grip{opacity:var(--tk-op-grip,.8)}
.tasks-list-head:hover .tasks-grip,
.tasks-group-label:hover .tasks-grip{opacity:1}
/* Deux atténuations qui se MULTIPLIENT : la couleur à .32 d'alpha, puis
   l'opacité de repos. En sombre le produit tombait à .144 — une poignée à
   1,6:1, c'est-à-dire absente, alors qu'elle est le seul moyen de réordonner
   un groupe. Discrète reste la consigne : on vise le seuil des CONTRÔLES
   (3:1), pas celui du texte, et le survol continue de la porter franchement.

   Ces deux règles-ci sont aussi ce qui ISOLE le sombre du thème clair : elles
   l'emportent en spécificité sur `.tasks-grip` et `.tasks-grip:hover`, donc la
   remontée d'encre faite plus haut pour le clair ne le traverse pas. Même
   chose pour l'opacité, que --tk-op-grip redéfinit à .75 dans le bloc de
   jetons. Toucher au clair sans toucher au sombre reste possible ici — mais
   ça tient à ces trois déclarations, pas au hasard. */
body[data-gtheme="dark"] .tasks-grip{color:rgba(255,255,255,.45)}
body[data-gtheme="dark"] .tasks-grip:hover{color:rgba(255,255,255,.7);background:rgba(221,203,164,.12)}

/* Bloc en cours de déplacement : on le distingue sans le faire disparaître —
   il sert de repère pour viser la nouvelle position. */
/* Une SECTION réunit l'étiquette d'un groupe et ses tâches. Simple conteneur :
   sans display propre, le flux vertical reste celui d'avant le regroupement.
   Il existe pour que le groupe se déplace AVEC son contenu. */
.tasks-section{display:block}
.tasks-block-dragging{opacity:.55;outline:2px dashed rgba(168,134,63,.65);outline-offset:2px;border-radius:10px}

/* Cible tactile : sur mobile la poignée doit rester attrapable sans zoomer. */
@media (pointer:coarse){ .tasks-grip{width:30px;height:30px;font-size:15px} }

/* =====================================================================
   LE CORPS DES TÂCHES EN TROIS COLONNES — rail · contenu · quai
   =====================================================================
   Ce que l'écran faisait jusqu'ici : grille de projets → hall de cartes →
   listes → tâche, chaque écran REMPLAÇANT le précédent dans #tasksList. On
   ne voyait donc jamais où on était, et ouvrir une tâche détruisait la liste
   qu'on lisait. La barre d'onglets #tasksTabs était un pansement sur ce
   défaut-là, pas une navigation.
   Deux surfaces neuves le corrigent : un ARBRE permanent à gauche, un QUAI
   à droite. Comme elles ne portent aucun héritage, elles sont écrites
   entièrement sur les jetons du socle (--gs-*, --s-*, --t-*, --r-*, --e-*),
   qui dormaient depuis leur déclaration : c'est leur premier client réel.
   Le thème sombre suit sans une règle de plus — les --gs-* basculent seuls
   sur body.shell-on[data-gtheme="dark"].
   ===================================================================== */
.tasks-body {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    position: relative;   /* ancre du quai quand il passe en superposition */
}
/* #tasksList garde flex:1 et son plafond de 1440px : dans une rangée flex,
   `margin:0 auto` le centre dans la place RESTANTE, ce qui est exactement le
   comportement voulu quand le rail et le quai sont ouverts. */
.tasks-body > .tasks-list {
    min-width: 0;
    /* Les media queries lisaient la fenêtre entière. Or, dans Projet, la
       largeur utile est celle qui RESTE après le shell et le rail interne.
       Ce conteneur permet aux colonnes de répondre à cette vraie mesure. */
    container: tasks-main / inline-size;
}

/* ── LE PANNEAU : un sélecteur d'espace, puis le contenu de CET espace ──
   PASSE 0 (concept I, approuvé le 21/08). L'arbre des 22 espaces est parti
   dans le sélecteur ; ce qui reste ici est le contenu direct de l'espace
   choisi — deux à huit lignes au lieu de vingt-deux à quarante.
   « ton panel est très très laid visuellement (on dirait windows millenium) »
   — la critique portait sur un SÉLECTEUR déguisé en ARBRE : 236 px de colonne
   permanente, six triangles et sept noms tronqués sur vingt-deux, pour
   exprimer une valeur unique. */
.tasks-rail {
    flex: 0 0 236px;
    width: 236px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--gs-panel, #fff);
    /* Explicite, comme le fond : tout texte ajouté ici demain hériterait
       sinon du gris d'encre du corps — invisible en thème sombre. */
    color: var(--gs-ink, #282828);
    border-right: 1px solid var(--gs-line, rgba(40, 34, 24, .12));
    padding: var(--s-3, 12px) var(--s-2, 8px) var(--s-6, 32px);
    font-size: var(--t-base, 13px);
    line-height: var(--lh-base, 1.45);
    -webkit-user-select: none;
    user-select: none;
}
.tasks-rail:empty { display: none; }   /* avant le premier rendu : pas de colonne vide */
/* Replié : 236 px imposés à qui n'en veut pas, c'est 236 px de moins pour le
   tableau. Il ne reste QUE de quoi le rouvrir — un panneau replié qui
   garderait des icônes cliquables serait un troisième état à apprendre. */
.tasks-rail.trail-pli {
    flex: 0 0 40px;
    width: 40px;
    padding: var(--s-3, 12px) var(--s-1, 4px);
}
.trail-deplier,
.trail-h-btn {
    border: 1px solid transparent;
    background: none;
    border-radius: var(--r-sm, 6px);
    color: var(--gs-ink-faint, rgba(40, 38, 34, .44));
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 6px;
}
.trail-deplier { width: 32px; height: 32px; }
/* Mesuré au banc : 21 × 26 px au repos — sous la cible tactile de la maison.
   Le panneau est masqué sur téléphone, mais pas sur une tablette de 900 px. */
@media (hover: none) and (pointer: coarse) {
    .trail-deplier, .trail-h-btn { min-width: 44px; min-height: 44px; }
}
.trail-deplier:hover,
.trail-h-btn:hover { background: var(--gs-panel-2, #f7f1e6); color: var(--gs-ink, #282828); }
.trail-deplier:focus-visible,
.trail-h-btn:focus-visible { outline: none; box-shadow: var(--e-focus, 0 0 0 3px rgba(168, 134, 63, .28)); }

.trail-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2, 8px);
    padding: 0 var(--s-1, 4px) var(--s-2, 8px) var(--s-2, 8px);
}
.trail-h-lbl {
    font-size: var(--t-xs, 11px);
    font-weight: var(--w-semi, 600);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gs-ink-faint, rgba(40, 38, 34, .44));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* LE SÉLECTEUR — en haut du panneau, la place exacte de la pilule
   « [M] Maison d'Herbes ⌄ » de la référence Monday 01. Pas dans l'en-tête :
   l'en-tête, chez Monday, porte le nom du TABLEAU. */
.trail-esp-row { display: flex; gap: 6px; align-items: center; margin-bottom: var(--s-1, 4px); }
.trail-esp {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--s-2, 8px);
    height: 40px;                 /* hauteur de frappe confortable, tactile compris */
    padding: 0 8px 0 8px;
    background: var(--gs-panel-2, #f7f1e6);
    border: 1px solid var(--gs-line, rgba(40, 34, 24, .12));
    border-radius: var(--r-sm, 6px);
    font: inherit;
    font-weight: var(--w-semi, 600);
    color: var(--gs-ink, #282828);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--dur-fast, .12s) var(--ease, ease), background var(--dur-fast, .12s) var(--ease, ease);
}
.trail-esp:hover { border-color: var(--gs-line-strong, rgba(40, 34, 24, .28)); background: var(--gs-panel, #fff); }
.trail-esp:focus-visible { outline: none; box-shadow: var(--e-focus, 0 0 0 3px rgba(168, 134, 63, .28)); }
/* L'émoji posé sur un carré à fond doux : il retrouve une taille et un
   alignement constants, là où un émoji nu ballotte d'une ligne à l'autre. */
.tesp-ico {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: var(--r-sm, 6px);
    display: grid; place-items: center;
    font-size: 14px;
    background: var(--gs-accent-soft, rgba(168, 134, 63, .13));
}
.tesp-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tesp-chev { flex: 0 0 auto; font-size: 9px; color: var(--gs-ink-faint, rgba(40, 38, 34, .44)); }

.trail-sec {
    font-size: var(--t-xs, 11px);
    font-weight: var(--w-semi, 600);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gs-ink-faint, rgba(40, 38, 34, .44));
    padding: var(--s-4, 16px) var(--s-2, 8px) var(--s-1, 4px);
}
.trail-sec:first-child { padding-top: var(--s-1, 4px); }

.trail-node {
    display: flex;
    align-items: center;
    gap: var(--s-2, 8px);
    padding: 5px var(--s-2, 8px);
    border-radius: var(--r-sm, 6px);
    color: var(--gs-ink, #282828);
    cursor: pointer;
    position: relative;
    /* Le nom d'un tableau peut être long ; le panneau ne défile jamais
       horizontalement — on coupe, l'infobulle porte le nom entier. Ici la
       troncature est sans conséquence : on ne CHOISIT plus son espace dans
       cette liste, c'est le rôle du sélecteur au-dessus. */
    white-space: nowrap;
    overflow: hidden;
}
.trail-node:hover { background: var(--gs-panel-2, #f7f1e6); }
.trail-node:focus-visible { outline: none; box-shadow: var(--e-focus, 0 0 0 3px rgba(168, 134, 63, .28)); }
.trail-node.on {
    background: var(--gs-accent-soft, rgba(168, 134, 63, .13));
    font-weight: var(--w-semi, 600);
    /* Jamais la couleur seule : le filet doré porte le signe. */
    box-shadow: inset 3px 0 0 var(--gs-gold-b, #a1823f);
}
.trail-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trail-ico { flex: 0 0 auto; font-size: var(--t-md, 14px); }
.trail-n {
    flex: 0 0 auto;
    font-size: var(--t-xs, 11px);
    color: var(--gs-ink-faint, rgba(40, 38, 34, .44));
    font-variant-numeric: tabular-nums;
}
.trail-empty {
    padding: var(--s-2, 8px);
    color: var(--gs-ink-faint, rgba(40, 38, 34, .44));
    font-size: var(--t-sm, 12px);
}
.trail-sep {
    height: 1px;
    background: var(--gs-line, rgba(40, 34, 24, .12));
    margin: var(--s-3, 12px) var(--s-2, 8px);
}

/* ── LE CHANGEMENT RAPIDE D'ESPACE : 380 px, les noms ENTIERS ──────
   C'est la raison d'être de la chose. À 155 px de large — ce qui restait au
   nom dans l'ancien arbre — sept noms sur vingt-deux étaient coupés, et il
   fallait les PARCOURIR pour choisir. Monday tronque aussi (référence 01) :
   la faute n'est donc pas de tronquer, c'est de tronquer une liste dont la
   lecture EST le geste qu'on demande.
   `position: fixed` : le panneau de gauche défile, ce menu ne doit pas
   partir avec lui. */
.tesp-pop {
    position: fixed;
    z-index: 2600;
    width: 380px;
    max-width: calc(100vw - 16px);
    background: var(--gs-panel, #fff);
    color: var(--gs-ink, #282828);   /* jamais l'héritage : voir .tasks-rail */
    border: 1px solid var(--gs-line, rgba(40, 34, 24, .12));
    border-radius: var(--r-lg, 14px);
    box-shadow: 0 18px 44px rgba(24, 20, 14, .22);
    overflow: hidden;
    font-size: var(--t-base, 13px);
}
.tesp-ch { padding: var(--s-3, 12px); border-bottom: 1px solid var(--gs-line, rgba(40, 34, 24, .12)); }
/* Une <input> NUE hériterait des règles de formulaire de la maison
   (`input{width:100%;padding:12px}`) : classe explicite, valeurs explicites.
   Même leçon que le « Masquer les terminées » de la barre Gestion. */
.tesp-pop .tesp-input {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 10px;
    border-radius: var(--r-sm, 6px);
    border: 1px solid var(--gs-line, rgba(40, 34, 24, .12));
    background: var(--gs-panel-2, #f7f1e6);
    font: inherit;
    color: var(--gs-ink, #282828);
    text-transform: none;
}
.tesp-pop .tesp-input:focus {
    outline: none;
    box-shadow: var(--e-focus, 0 0 0 3px rgba(168, 134, 63, .28));
    border-color: var(--gs-line-strong, rgba(40, 34, 24, .28));
}
.tesp-sec {
    font-size: var(--t-xs, 11px);
    font-weight: var(--w-semi, 600);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gs-ink-faint, rgba(40, 38, 34, .44));
    padding: var(--s-3, 12px) var(--s-3, 12px) 4px;
}
.tesp-liste { max-height: min(52vh, 420px); overflow-y: auto; padding-bottom: var(--s-2, 8px); }
.tesp-it {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px var(--s-3, 12px);
    cursor: pointer;
    border-left: 2px solid transparent;
    color: var(--gs-ink, #282828);
}
.tesp-it:hover { background: var(--gs-panel-2, #f7f1e6); }
.tesp-it:focus-visible { outline: none; box-shadow: var(--e-focus, 0 0 0 3px rgba(168, 134, 63, .28)); }
.tesp-it.on {
    background: var(--gs-accent-soft, rgba(168, 134, 63, .13));
    border-left-color: var(--gs-gold-b, #a1823f);
}
.tesp-it-ico {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: var(--r-sm, 6px);
    display: grid; place-items: center;
    font-size: 14px;
    background: var(--gs-panel-2, #f7f1e6);
}
.tesp-it.on .tesp-it-ico { background: var(--gs-accent-soft, rgba(168, 134, 63, .13)); }
/* AUCUN text-overflow ici, et c'est délibéré : c'est tout l'intérêt du menu. */
.tesp-it-nom { flex: 1 1 auto; min-width: 0; font-size: var(--t-md, 14px); line-height: 1.35; }
.tesp-it.on .tesp-it-nom { font-weight: var(--w-semi, 600); }
.tesp-it-nom small {
    display: block;
    font-size: var(--t-xs, 11px);
    color: var(--gs-ink-faint, rgba(40, 38, 34, .44));
    margin-top: 1px;
}
.tesp-it-manage {
    flex: 0 0 auto; width: 32px; height: 30px; padding: 0; border: 0;
    border-radius: var(--r-sm, 6px); background: transparent;
    color: var(--gs-ink-faint, rgba(40, 38, 34, .5)); cursor: pointer;
    font: 700 13px/1 Inter, sans-serif;
}
.tesp-it-manage:hover, .tesp-it-manage:focus-visible {
    background: var(--gs-accent-soft, rgba(168, 134, 63, .13));
    color: var(--gs-ink, #282828); outline: none;
}
.tesp-vide { padding: var(--s-4, 16px) var(--s-3, 12px); color: var(--gs-ink-faint, rgba(40, 38, 34, .44)); }
.tesp-pied { border-top: 1px solid var(--gs-line, rgba(40, 34, 24, .12)); }
.tesp-archives {
    width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; border: 0; border-top: 1px solid var(--gs-line, rgba(40, 34, 24, .08));
    background: transparent; color: var(--gs-ink-dim, #655f55); cursor: pointer;
    font: 600 var(--t-base, 13px)/1.2 Inter, sans-serif; text-align: left;
}
.tesp-archives span:last-child { margin-left: auto; }
.tesp-archives:hover { background: var(--gs-panel-2, #f7f1e6); color: var(--gs-ink, #282828); }
@media (hover: none) and (pointer: coarse) {
    .tesp-it { min-height: 44px; }        /* la cible tactile de la maison */
}

/* Le bandeau de portée sans limite : il DIT qu'il n'y en a pas, et combien
   ça fait. Le taire est ce qui a produit les dix-neuf projets d'un coup. */
.gest-portee-tousesp { border-left-color: var(--gs-ink-faint, rgba(40, 38, 34, .44)); }
.gest-portee-n {
    font-size: 11px;
    letter-spacing: .04em;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}
/* L'AVEU DE L'ÉCHANTILLON. Sans portée, la route ne renvoie que les 200 tâches
   les plus récentes : les totaux disparaissent et cette phrase prend leur
   place. Elle est LISIBLE, pas estompée à .6 comme le compte qu'elle remplace —
   c'est un avertissement, et un avertissement qu'on doit deviner ne sert à
   personne. `color` explicite pour la même raison que .gest-portee : aucun des
   deux blocs sombres de shell.css ne pose `color` sur body. */
.gest-portee-part {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--gs-ink, #282828);
}

/* ── LE QUAI : le détail d'une tâche, sans perdre la liste ────────── */
/* LA LARGEUR — le quai reste un panneau de consultation, pas une deuxième
   page. Le premier essai montait jusqu'à 1 400 px : il avalait le tableau et
   détruisait justement le contexte que le quai doit préserver. `clamp` garde
   une mesure utile et prévisible sur les grands écrans :
     · 420 px plancher — assez pour les champs et la discussion ;
     · 34vw — une part qui suit l'écran sans dominer le tableau ;
     · 460 px plafond — la largeur validée d'un vrai panneau latéral.
   UNE VARIABLE, et non la valeur écrite deux fois : `flex-basis` et `width`
   doivent rester d'accord, et deux `clamp` jumeaux finissent toujours par
   diverger d'un chiffre à la première retouche. */
.tasks-dock {
    --quai-l: clamp(420px, 34vw, 460px);
    flex: 0 0 var(--quai-l);
    width: var(--quai-l);
    overflow-y: auto;
    background: var(--gs-panel, #fff);
    border-left: 1px solid var(--gs-line, rgba(40, 34, 24, .12));
    box-shadow: var(--e-2, 0 4px 16px rgba(40, 34, 24, .09));
    animation: dockIn var(--dur-base, .18s) var(--ease, ease);
}
@keyframes dockIn { from { transform: translateX(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tasks-dock { animation: none; } }

.dock-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--s-2, 8px);
    min-height: 46px;
    padding: 8px 12px;
    background: var(--gs-panel, #fff);
    border-bottom: 1px solid var(--gs-line, rgba(40, 34, 24, .12));
}
/* Le titre du quai porte le TITRE DE LA TÂCHE, pas une étiquette de section :
   pas de capitales forcées. Vu en capture — « CHOIX DE LA DIRECTION
   ARTISTIQUE » criait, et un titre long en capitales devient illisible bien
   avant de tenir dans la largeur. */
.dock-title {
    flex: 1;
    min-width: 0;
    font-size: var(--t-sm, 12px);
    font-weight: var(--w-medium, 500);
    color: var(--gs-ink-faint, rgba(40, 38, 34, .44));
    line-height: var(--lh-tight, 1.25);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dock-btn {
    flex: 0 0 auto;
    border: 1px solid var(--gs-line, rgba(40, 34, 24, .12));
    background: var(--gs-panel-2, #f7f1e6);
    color: var(--gs-ink, #282828);
    border-radius: var(--r-sm, 6px);
    width: 28px;
    height: 28px;
    line-height: 1;
    cursor: pointer;
    font-size: var(--t-md, 14px);
}
.dock-btn:hover { background: var(--gs-accent-soft, rgba(168, 134, 63, .13)); }
.dock-btn:focus-visible { outline: none; box-shadow: var(--e-focus, 0 0 0 3px rgba(168, 134, 63, .28)); }
/* ‹ retour : n'existe qu'en mobile (bloc M2 plus bas) — au bureau ⤢ et ✕
   suffisent, le quai n'occupe jamais tout l'écran. */
.dock-back { display: none; }
.dock-body { padding: 0; }
/* Rangée M2 (Terminer / Commenter) : redondante au bureau avec les actions
   de bas de fiche — n'a de sens qu'en feuillet plein écran mobile. */
.tasks-detail-quick { display: none; }
/* La prose garde une longueur de lecture bornée. Avec le plafond actuel du
   quai cette garde ne mord pas ; elle protège le texte si le panneau devait
   un jour s'élargir de nouveau.
   SCOPÉ SOUS .dock-body : #taskDetailBody est le MÊME nœud en pleine page
   (voir openDock, un id et non une classe). Une règle nue déplacerait donc
   aussi une vue que cette décision ne touche pas. */
.dock-body .tasks-detail-desc,
.dock-body .tasks-comment-content { max-width: 680px; }

/* Le ⤢ d'une carte : « ouvrir à droite », sans quitter la liste.
   DANS LE FLUX, dernier enfant de la carte — la première version le posait en
   absolu en haut à droite et il se superposait à l'avatar de l'assigné. Aucun
   test ne pouvait le voir : il a fallu une capture. Une place réservée à la
   fin de la rangée ne peut, elle, chevaucher personne.
   Contrairement à Monday, il reste visible à demi au repos plutôt que révélé
   au survol seulement — même choix que le ⤢ de la vue Gestion (~ligne 7054) :
   un bouton qui n'existe qu'au survol n'existe pas au doigt, et ne se
   découvre jamais. Le survol de la carte le fait ressortir. */
/* Le glyphe est ⤢, pas ⊕ : dans cette app ⊕ et ➕ veulent dire AJOUTER
   (« ➕ Nouvelle tâche », « ➕ Ajouter un groupe »). La vue Gestion nomme déjà
   « ouvrir » avec ⤢ — un geste, un signe, partout le même. */
.tasks-card-dock {
    flex: 0 0 auto;
    align-self: center;
    /* Bordé DÈS LE REPOS : c'est ce qui le fait lire comme un bouton plutôt
       que comme un caractère décoratif au bout de la rangée. */
    border: 1px solid var(--gs-line, rgba(40, 34, 24, .12));
    background: none;
    min-width: 31px;
    height: 29px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: var(--r-sm, 6px);
    cursor: pointer;
    font-size: var(--t-base, 13px);
    line-height: 1;
    color: var(--gs-ink-dim, rgba(40, 38, 34, .66));
    opacity: .72;
    transition: opacity var(--dur-fast, .12s) var(--ease, ease),
                background var(--dur-fast, .12s) var(--ease, ease);
}
.tasks-card:hover .tasks-card-dock {
    opacity: 1;
    background: var(--gs-panel-2, #f7f1e6);
}
.tasks-card-dock:hover { background: var(--gs-accent-soft, rgba(168, 134, 63, .13)); opacity: 1; }
.tasks-card-dock:focus-visible { outline: none; opacity: 1; box-shadow: var(--e-focus, 0 0 0 3px rgba(168, 134, 63, .28)); }

/* ── Écrans étroits ──────────────────────────────────────────────────
   Sous 1400px, la place ne suffit plus pour trois colonnes côte à côte : le
   quai passe EN SUPERPOSITION au lieu de comprimer la liste jusqu'à
   l'illisible. Sous 860px, le panneau se réduit à UNE BARRE : le sélecteur
   d'espace, et rien d'autre.

   POURQUOI 1400 ET PLUS 1180. Ce seuil n'est pas un goût, c'est une addition,
   et la décision 2 en a changé un terme. Le quai avait un plancher de 420 px :
   236 (panneau) + 420 + 525 de liste tenaient dans 1181 px. Son plancher est
   maintenant 560 px, donc au même 1181 px la liste tombe à 385 px — un tableau
   à six colonnes dans 385 px, c'est l'illisible que cette règle existe pour
   éviter. En gardant 600 px de liste comme minimum décent : 236 + 560 + 600
   = 1396, arrondi à 1400.
   Élargir le quai SANS remonter ce seuil aurait donc réparé l'écran de 2 016 px
   en cassant ceux de 1 200 à 1 400. Les deux nombres sont un seul réglage.

   POURQUOI IL NE DISPARAÎT PLUS COMPLÈTEMENT. Jusqu'à la passe 0, le panneau
   n'était que de la navigation : le cacher sur téléphone ne coûtait qu'un
   raccourci. Depuis, l'espace est une PORTÉE — il décide de ce que les trois
   vues montrent. Cacher le sélecteur enfermerait le téléphone dans l'espace
   choisi au bureau, sans un seul chemin pour en sortir. On garde donc la
   pièce qui commande, on retire le reste.

   La disposition définitive du téléphone appartient au concept H (le tiroir ☰
   voté, la feuille qui monte du bas) — cette barre est le minimum honnête en
   attendant, pas le dessin final. */
@media (max-width: 1400px) {
    .tasks-dock {
        position: absolute;
        top: 0; right: 0; bottom: 0;
        /* Au-dessus de la barre sticky « Personne · Filtrer · Trier » du
           tableau (z-index 8) : à 6, ses libellés traversaient le quai et se
           superposaient aux commentaires en défilant. */
        z-index: 9;
        box-shadow: var(--e-3, 0 16px 48px rgba(40, 34, 24, .15));
    }
}
@media (max-width: 1000px) { .tasks-rail { flex-basis: 200px; width: 200px; } }
@media (max-width: 860px) {
    .tasks-body { flex-wrap: wrap; }
    .tasks-rail {
        flex: 1 0 100%;
        width: auto;
        max-height: none;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--gs-line, rgba(40, 34, 24, .12));
        padding: var(--s-2, 8px);
    }
    /* Seul le sélecteur survit. `> *` et non une liste de classes : une
       section ajoutée demain au panneau ne réapparaîtra pas ici par oubli. */
    .tasks-rail > *:not(.trail-esp-row) { display: none; }
    /* Replié au bureau, on arrive ici avec le SEUL bouton de réouverture dans
       le panneau — que la règle ci-dessus masquerait. On le rend : un écran
       sans aucun chemin vers le sélecteur est exactement ce qu'on évite. */
    .tasks-rail.trail-pli { flex: 1 0 100%; width: auto; padding: var(--s-2, 8px); }
    .tasks-rail.trail-pli > .trail-deplier { display: block; }
    .trail-esp { height: 44px; }               /* la cible tactile de la maison */
    .tasks-dock { flex-basis: 100%; width: 100%; }
}

/* ── IMPRESSION DE LA VISIONNEUSE ──────────────────────────────────────
   Posée sur <html> le temps du window.print(), la classe dv-impression fait
   disparaître l'application et laisse le document occuper la page.

   Pourquoi masquer `body > *` plutôt que styler la visionneuse seule : elle est
   en position:fixed dans un overlay, donc sans cela le navigateur n'imprime que
   ce qui tient dans une hauteur d'écran — une page, puis du blanc. En la
   rendant `static`, on rend sa hauteur réelle au flux et le navigateur pagine.

   Les PDF SONT censés s'imprimer depuis leur fichier d'origine via une iframe
   (voir doc-viewer.js) — mais ce chemin peut échouer (CSP, WebView), et on
   retombe alors ICI, sur les <canvas> du rendu écran. Ce repli DOIT donc rendre
   le bon nombre de feuilles : c'est ce qui avait été négligé (bogue signalé par
   Mathieu le 26/08 — un PDF de 3 pages en sortait 5, une blanche devant et une
   derrière). Mesuré au compteur de pages, pas déduit : voir
   test/doc-viewer-impression.test.js. */
@media print {
    html.dv-impression, html.dv-impression body {
        height: auto !important; overflow: visible !important; background: #fff !important;
    }
    html.dv-impression body > *:not(.dv-overlay) { display: none !important; }
    html.dv-impression .dv-overlay {
        position: static !important; display: block !important;
        background: none !important; backdrop-filter: none !important; padding: 0 !important;
    }
    html.dv-impression .dv-modal {
        position: static !important; max-width: none !important; max-height: none !important;
        width: auto !important; height: auto !important;
        box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
    }
    /* Les boutons n'ont rien à faire sur papier ; le nom du fichier, si —
       il identifie la feuille une fois détachée de l'écran. */
    html.dv-impression .dv-actions { display: none !important; }
    html.dv-impression .dv-header { border: 0 !important; padding: 0 0 8pt !important; }
    /* SAUF POUR UN PDF, où l'en-tête entière disparaît : c'était la feuille
       blanche DE DEVANT. Ses 26 px occupent le haut de la première feuille, et
       la page de document qui suit porte `break-inside: avoid` en occupant une
       feuille ENTIÈRE : elle ne peut plus tenir dessous, elle bascule sur la
       feuille suivante, et la feuille 1 ne porte plus que le nom du fichier.
       C'est exactement ce que montrait la capture de Mathieu.
       Mesuré : en-tête affichée, 1/2/3/10 pages sortent sur 2/3/4/11 feuilles ;
       masquée, sur 1/2/3/10.
       Le masquage est RESTREINT au PDF parce qu'il n'apporte rien ailleurs :
       un docx, un tableur ou du texte s'écoulent et absorbent l'en-tête sans
       changer de compte (mesuré identique, 5/40/200 paragraphes → 1/2/7
       feuilles avec comme sans). Le masquer partout perdrait l'identification
       du document sur le papier pour un gain nul. */
    html.dv-impression .dv-modal:has(.dv-pdf) .dv-header { display: none !important; }
    html.dv-impression .dv-body {
        overflow: visible !important; max-height: none !important; height: auto !important;
        padding: 0 !important;
    }
    /* LA FEUILLE BLANCHE DE DERRIÈRE VENAIT D'ICI. Les 12 px qui séparent les
       pages sont un repère D'ÉCRAN ; sur papier ils s'ajoutent à une page déjà
       pleine et débordent sur la feuille suivante. Mesuré : avec le gap,
       1/2/3/10 pages sortent sur 1/3/4/11 feuilles ; à 0, sur 1/2/3/10.
       (Ce n'est PAS le rapport d'aspect du canvas qui était en cause — cette
       piste-là a été mesurée et écartée.) */
    html.dv-impression .dv-pdf { gap: 0 !important; }
    /* Une page de document par feuille, sans qu'elle se coupe en deux.

       Le plafond de HAUTEUR n'est pas décoratif : `max-width: 100%` seul laisse
       la hauteur suivre le rapport d'aspect, et sur une feuille PAYSAGE la page
       dépasse alors la zone imprimable et déborde sur une seconde feuille.
       Mesuré en paysage sans `max-height`, 1/3/10 pages sortent sur 2/5/19
       feuilles ; avec, sur 1/3/10. En portrait (Lettre, A4, A5) il ne change
       rien — c'est le paysage qui le justifie. `object-fit: contain` garde la
       page proportionnée si un moteur résout la boîte autrement. */
    html.dv-impression .dv-page { break-inside: avoid; page-break-inside: avoid;
        width: auto !important; height: auto !important;
        max-width: 100% !important; max-height: 100vh !important;
        object-fit: contain; }
    /* Un saut AVANT chaque page sauf la première, plutôt qu'un saut APRÈS
       chaque page qu'il faudrait ensuite annuler sur la dernière : il n'existe
       alors, PAR CONSTRUCTION, aucun saut de fin susceptible de fabriquer une
       feuille vide. L'ancienne paire de règles :last-child / :last-of-type
       n'avait plus rien à annuler et a disparu — et avec elle le piège de
       :last-child, qui est structurel : `display:none` ne retire pas un élément
       du calcul, si bien qu'un frère masqué après les canvas (le .dv-error
       qu'ajoute renderPdf au-delà de 120 pages) suffisait à le faire manquer. */
    html.dv-impression .dv-page + .dv-page { break-before: page; page-break-before: always; }
    /* Un tableau de plusieurs pages garde ses en-têtes en haut de chaque feuille. */
    html.dv-impression .dv-body table { break-inside: auto; }
    html.dv-impression .dv-body thead { display: table-header-group; }
    html.dv-impression .dv-body tr { break-inside: avoid; page-break-inside: avoid; }
    /* Le compte de pages et les messages d'erreur sont de l'écran, pas du papier. */
    html.dv-impression .dv-pagecount, html.dv-impression .dv-error { display: none !important; }
}

/* ── « Aller à un groupe » ─────────────────────────────────────────────
   Voisin de la bascule Listes/Tableau, même vocabulaire visuel : contour doré
   discret, pilule, 12 px. Il ne s'affiche qu'à partir de deux groupes. */
.tasks-listjump{position:relative;display:inline-block;margin-left:8px;font-size:12px}
.tasks-listjump>summary{list-style:none;cursor:pointer;padding:5px 12px;
    border:1px solid rgba(168,134,63,.35);border-radius:99px;font-weight:600;
    display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tasks-listjump>summary::-webkit-details-marker{display:none}
.tasks-listjump>summary:hover{background:rgba(168,134,63,.10)}
.tasks-listjump[open]>summary{background:rgba(168,134,63,.18)}
.tasks-listjump .tlj-chev{opacity:.55;font-size:10px}
.tasks-listjump[open] .tlj-chev{transform:rotate(180deg)}
/* Le menu FLOTTE : posé dans le flux, il pousserait la première liste vers le
   bas à chaque ouverture — l'écran bougerait sous les yeux au moment précis où
   l'on cherche un repère. */
.tasks-listjump-menu{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:270px;
    max-width:min(420px,90vw);max-height:min(60vh,420px);overflow-y:auto;
    background:var(--chanv-blanc,#fff);border:1px solid rgba(40,34,24,.14);border-radius:12px;
    box-shadow:0 2px 4px rgba(40,34,24,.05),0 18px 40px -18px rgba(40,34,24,.30);padding:5px}
body[data-gtheme="dark"] .tasks-listjump-menu{background:#2b2823;border-color:rgba(221,203,164,.18)}
.tasks-listjump-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
    background:none;border:0;cursor:pointer;font-family:inherit;font-size:12.5px;color:inherit;
    padding:8px 10px;border-radius:8px}
.tasks-listjump-menu button:hover{background:rgba(168,134,63,.12)}
.tasks-listjump-menu .tlj-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
/* Chiffres alignés : on compare des avancements d'un coup d'œil. */
.tasks-listjump-menu .tlj-count{font-family:ui-monospace,'SF Mono',monospace;font-size:11px;
    opacity:.55;flex-shrink:0;font-variant-numeric:tabular-nums}
/* Écran étroit : ancré à DROITE et non à gauche. Aligné à gauche, le menu
   (270 px au minimum) sortait de l'écran par la droite sur téléphone — la moitié
   des noms devenait illisible, et les avancements disparaissaient. */
@media (max-width: 640px) {
    .tasks-listjump-menu{left:auto;right:0;min-width:min(270px,calc(100vw - 32px))}
}

/* ═══════════ ☑️ CUEILLETTE — cocher plusieurs tâches, les déplacer d'un geste ═══════════
   Ticket kaaR5QvsfiFp5TtlM1jP (D. Paquette, 24/08). Hors cueillette, RIEN ici
   ne s'applique : aucune classe n'est posée sur les cartes tant que le mode est
   éteint, et l'écran habituel ne change pas d'un pixel. */
.tasks-card-picking{cursor:pointer;user-select:none}
/* Le curseur « main » doit valoir pour toute la carte, titre compris : en
   cueillette le titre n'est plus un lien, et un curseur de texte au-dessus
   d'une zone qui coche est un mensonge d'un pixel de haut. */
.tasks-card-picking .tasks-card-title{cursor:pointer;pointer-events:none}
/* 📌 et ✏️ DISPARAISSENT pendant la cueillette. Les garder inertes et pâles
   (premier essai) mettait deux glyphes morts à côté de la seule marque qui
   compte, dans le coin même où on va poser la pastille ✔ — et comme ils sont
   en position:absolute, les cacher ne décale rien.
   Le ✅/⬜ de complétion RESTE, lui : il dit si la tâche est faite, une
   information qu'on veut voir en choisissant. Il est seulement rendu inerte. */
.tasks-card-picking .tasks-card-pin,
.tasks-card-picking .tasks-card-qe{display:none}
.tasks-card-picking .tasks-card-check{pointer-events:none;opacity:.45}
.tasks-card-picking:hover{border-color:rgba(168,134,63,.55);background:rgba(168,134,63,.05)}
/* LA CARTE COCHÉE. Premier essai : un liseré de 3px en ombre interne, pour ne
   pas se battre avec la couleur de priorité. À la capture, on ne distinguait
   PAS les cartes choisies des autres — ce qui vide le geste de son sens. Il en
   faut donc trois d'un coup, qui se voient de loin : le fond teinté, la bande
   de gauche, et l'anneau. */
.tasks-card-picked{border-color:#A8863F;background:rgba(168,134,63,.13);
    box-shadow:inset 5px 0 0 #A8863F,0 0 0 2px rgba(168,134,63,.45)}
body[data-gtheme="dark"] .tasks-card-picked{background:#3a3226}
/* La pastille ✔ prend la place laissée par 📌 : dans la carte, jamais dessous
   le texte (le coin haut-gauche est occupé par le ✅ de complétion). */
.tasks-card-picked::after{content:'✔';position:absolute;top:6px;right:8px;z-index:2;
    width:16px;height:16px;border-radius:50%;background:#A8863F;color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:10px;font-weight:700;line-height:1;pointer-events:none}

/* La barre : posée sur <body>, donc jamais emportée par un re-rendu de la
   liste, et toujours atteignable même après avoir fait défiler 137 cartes.
   Le padding-bottom du safe-area tient compte de la barre d'onglets iOS. */
/* Centrée par `inset-inline:0 + margin:auto`, PAS par `left:50% + translateX`.
   Avec left:50%, la largeur disponible d'un élément fixed n'est plus que la
   moitié DROITE de l'écran : mesuré à 490px sur un écran de 980, pour une barre
   qui en demande 618 — elle se cassait en deux lignes au milieu d'un vide. */
.tasks-pickbar{position:fixed;left:0;right:0;margin:0 auto;width:max-content;
    bottom:calc(18px + env(safe-area-inset-bottom,0px));
    z-index:60;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
    max-width:min(860px,calc(100vw - 24px));padding:10px 14px;border-radius:14px;
    background:var(--chanv-blanc,#fff);border:1px solid rgba(40,34,24,.14);
    box-shadow:0 2px 4px rgba(40,34,24,.06),0 18px 44px -16px rgba(40,34,24,.42)}
body[data-gtheme="dark"] .tasks-pickbar{background:#2b2823;border-color:rgba(221,203,164,.18)}
.tasks-pickbar .tpb-count{font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums;
    padding-right:4px;border-right:1px solid rgba(40,34,24,.12)}
body[data-gtheme="dark"] .tasks-pickbar .tpb-count{border-right-color:rgba(221,203,164,.16)}
.tasks-pickbar button{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:6px}
.tasks-pickbar button .gicon{width:16px;height:16px;flex-shrink:0}
#tasksMoveModal .close-modal{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;background:none;font-size:24px}
#tasksMoveModal .modal-content{border-radius:8px}
#tasksMoveModal h3{padding-right:36px;margin-bottom:16px}
#tasksMoveModal label{display:block}
.tasks-pickbar .btn[disabled]{opacity:.45;cursor:not-allowed}
/* La puce d'entrée, allumée pendant la cueillette — mêmes manières que les
   autres puces de la rangée d'actions. */
.tasks-row-pick.on{background:rgba(168,134,63,.16);border-color:#A8863F;font-weight:700}
@media (max-width: 640px) {
    .tasks-pickbar{gap:7px;padding:9px 10px;bottom:calc(70px + env(safe-area-inset-bottom,0px))}
    .tasks-pickbar button{font-size:12px}
}

/* ═══════════ ✅ TOUT VALIDER — clore un tableau, une section, une sélection ═══════════
   « Manque toujours un petit bouton ou une coche ici. » — Thierry, 25/08, en
   montrant le bandeau d'un tableau.

   VISIBLE AU REPOS, délibérément. Le bloc `.tgl-*` quelques centaines de lignes
   plus haut raconte déjà ce qui arrive quand on cache une action derrière le
   survol : D. Paquette a redemandé le renommage de section cinq jours après
   l'avoir obtenu, parce qu'il était à `opacity:0`. On ne recommence pas ce
   trajet pour une coche qu'on vient justement de nous réclamer. */
.tasks-list-head .tlh-done{margin-left:8px;opacity:var(--tk-op-2,.72);font-size:14px}
.tasks-list-head .tlh-done:hover{opacity:1;background:rgba(45,106,36,.16)}
.tasks-group-label .tlh-done{margin-left:6px;opacity:var(--tk-op-2,.62);transition:opacity .12s;
    border:none;background:none;cursor:pointer;padding:2px 5px;border-radius:6px}
.tasks-group-label:hover .tlh-done{opacity:1}
.tasks-group-label .tlh-done:hover{background:rgba(45,106,36,.16)}
body[data-gtheme="dark"] .tasks-list-head .tlh-done:hover,
body[data-gtheme="dark"] .tasks-group-label .tlh-done:hover{background:rgba(120,190,100,.2)}
/* La nuance sous le message de confirmation : ce qui est validé, ce qui ne
   l'est pas. Plus petit que le message, jamais gris au point d'être sauté —
   c'est la phrase qui évite de terminer 137 tâches en croyant en clore 12. */
.tdm-note{font-size:.82rem;color:#6b6355;line-height:1.45;margin:-8px 0 18px;
    padding:8px 10px;border-left:3px solid rgba(168,134,63,.5);
    background:rgba(168,134,63,.08);border-radius:0 6px 6px 0}
body[data-gtheme="dark"] .tdm-note{color:#b9b1a3;background:rgba(221,203,164,.07);
    border-left-color:rgba(221,203,164,.4)}

/* ═════════ ATELIER GANDALF — reprise fidèle de la maquette J ═════════
   Le grand bandeau décoratif de la première implémentation repoussait le
   travail et n'existait pas dans la maquette validée. Le contexte redevient
   un en-tête de tableau compact; les vues secondaires ont désormais un vrai
   contenu au lieu de libellés décoratifs. */
.gest2-boardhead {
    padding: 18px 20px 0;
    border-bottom: 1px solid var(--gs-line, rgba(40,34,24,.1));
    background: var(--gs-panel, #fff);
    border-radius: 10px 10px 0 0;
}
.gest2-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gest2-title-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.gest2-title-row h2 {
    margin: 0; font: 700 27px/1.15 Outfit, Inter, sans-serif;
    letter-spacing: -.03em; color: var(--gs-ink, #282828);
}
.gest2-title-main > span { color: var(--gs-ink-faint, #8a8175); font-size: 11px; white-space: nowrap; }
.gest2-manage {
    flex: 0 0 auto; min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px;
    border: 1px solid var(--gs-line, rgba(40,34,24,.12)); border-radius: 7px;
    background: var(--gs-panel-2, #f7f1e6); color: var(--gs-ink-dim, #655f55);
    font: 600 12px/1 Inter, sans-serif; cursor: pointer;
}
.gest2-manage:hover { border-color: var(--gs-line-strong, rgba(168,134,63,.32)); color: var(--gs-ink, #282828); }
.gest2-boardhead .gest2-views { margin-top: 8px; }
.gest2-boardhead .gest2-views button {
    min-height: 34px; padding: 7px 1px 8px; border: 0; border-bottom: 2px solid transparent;
    background: transparent; color: var(--gs-ink-faint, #8a8175); font: inherit; cursor: pointer;
}
.gest2-boardhead .gest2-views button:hover { color: var(--gs-ink, #282828); }
.gest2-boardhead .gest2-views button.on {
    border-bottom-color: var(--gs-gold-b, #a1823f); color: var(--gs-ink, #282828); font-weight: 650;
}
/* Sépare les vues des TÂCHES (Tableau, Calendrier, Chronologie) des outils du
   projet (Échanges, Documents), qui quittent le tableau. Le gap de .gest2-views
   vaut 24px : on ne rogne que de part et d'autre du trait. */
.gest2-boardhead .gest2-views .gest2-views-sep {
    width: 1px; height: 13px; margin: 0 -6px;
    background: var(--gs-line-strong, rgba(168,134,63,.32));
}

.gest2 .gest-outils {
    position: relative; top: auto; z-index: 6;
    min-height: 50px; padding: 7px 20px; margin: 0 0 9px;
    border: 0; border-bottom: 1px solid var(--gs-line, rgba(40,34,24,.1));
    border-radius: 0 0 10px 10px;background: var(--gs-panel, #fff); backdrop-filter: none;
    box-shadow: 0 5px 18px rgba(40,34,24,.035);
}
.gest2 .gest-neuf {
    min-height: 36px; padding: 0 14px; border-radius: 6px; box-shadow: none;
    /* encre DA de la base .gest-neuf — plus de doré ici (02/09) */
}
.gest2-search-slot { flex: 0 1 310px; max-width: 310px; }
.gest2-search-slot .gest2-search-input { height: 36px; border-radius: 6px; }
.gest2 .gest-outil, .gest2-menu > summary { min-height: 36px; border-radius: 6px; }
.gest2-menu-pop { max-height: min(420px, 70vh); overflow-y: auto; }
.gest2-grouping {
    display: flex; align-items: center; gap: 6px; min-height: 40px;
    margin-bottom: 11px; color: var(--gs-ink-faint, #8a8175); font-size: 11px;
}
.gest2-grouping b { color: var(--gs-ink-dim, #655f55); font-weight: 600; }
.gest2-grouping i { font-style: normal; opacity: .55; }
.gest2-grouping .late { color: var(--tst-rouge); }
.gest2-grouping .gest2-summary-tri { margin-left: auto; }
.gest2 .gest-groupe { margin-bottom: 22px; }
.gest2 .gest-tete { min-height: 36px; padding-bottom: 4px; }
.gest2 .gest-etats { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gest2 .gest-etat {
    display: inline-flex; align-items: center; gap: 4px; min-height: 23px;
    padding: 0 7px; border-radius: 999px; background: var(--gs-panel-2, #f7f1e6);
    color: var(--gs-ink-dim, #655f55); font-size: 10.5px; white-space: nowrap;
}
.gest2 .gest-etat i { width: 7px; height: 7px; border-radius: 50%; }
.gest2 .gest-etat b { color: var(--gs-ink, #282828); font-variant-numeric: tabular-nums; }
.gest2 .gest-groupe.replie { margin-bottom: 12px; }
.gest2 .gest-groupe.replie .gest-tete {
    min-height: 58px; padding: 10px 14px; border: 1px solid var(--gs-line, rgba(40,34,24,.1));
    border-radius: 10px; background: color-mix(in srgb, var(--gs-panel, #fff) 86%, transparent);
    box-shadow: 0 4px 18px rgba(40,34,24,.045);
}
.gest2 .gest-groupe.replie .gest-tete:hover {
    border-color: var(--gs-line-strong, rgba(168,134,63,.32));
    box-shadow: 0 7px 24px rgba(40,34,24,.075);
}
body[data-gtheme="dark"] .gest2 .gest-groupe.replie .gest-tete {
    background: rgba(255,255,255,.035); box-shadow: 0 5px 20px rgba(0,0,0,.14);
}
.gest2 .gest-groupe:not(.replie) .gest-etats { display: none; }
.gest2 .gest-tab { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
.gest2 .gest-entete { background: transparent; }
.gest2 .gest-ajout { border-radius: 0; }

/* Projet → liste → groupe. Les listes sont de vrais panneaux de travail,
   pas une seconde répétition du nom du projet. */
.gest2 .gest-list-summary { min-height: 40px; display: flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 0 2px; color: var(--gs-ink-faint, #8a8175); font-size: 11px; }
.gest2 .gest-list-summary b { color: var(--gs-ink-dim, #655f55); font-weight: 600; }
.gest2 .gest-list-summary i { font-style: normal; opacity: .55; }
.gest2 .gest-list-summary > button { margin-left: auto; min-height: 32px; padding: 0 11px; border: 1px solid var(--gs-line-strong, rgba(168,134,63,.32)); border-radius: 7px; background: var(--gs-panel, #fff); color: var(--gs-gold-b, #a1823f); font: 650 11px/1 Inter, sans-serif; cursor: pointer; }
.gest2 .gest-list-card { overflow: hidden; margin-bottom: 16px; border: 1px solid var(--gs-line, rgba(40,34,24,.11)); border-radius: 10px; background: var(--gs-panel, #fff); box-shadow: 0 6px 22px rgba(40,34,24,.045); }
.gest2 .gest-list-head { min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 14px; border-left: 4px solid var(--gest-teinte); background: color-mix(in srgb, var(--gs-panel, #fff) 96%, var(--gs-gold-b, #a1823f)); }
.gest2 .gest-list-main { min-width: 180px; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: var(--gs-ink, #282828); font: 650 13px/1.2 Outfit, Inter, sans-serif; text-align: left; cursor: pointer; }
.gest2 .gest-list-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gest2 .gest-list-chevron { width: 12px; color: var(--gs-ink-faint, #8a8175); text-align: center; }
.gest2 .gest-list-health { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 10px; }
.gest2 .gest-list-health .late { color: var(--tst-rouge, #c94855); }
.gest2 .gest-list-health .pending { color: var(--tst-bleu, #4d8fff); }
.gest2 .gest-list-progress { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.gest2 .gest-list-progress > i { width: 112px; height: 5px; overflow: hidden; border-radius: 999px; background: var(--gs-line, rgba(40,34,24,.12)); }
.gest2 .gest-list-progress > i > b { display: block; height: 100%; border-radius: inherit; background: var(--tst-vert, #19bd72); }
.gest2 .gest-list-progress small { min-width: 58px; color: var(--gs-ink-faint, #8a8175); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.gest2 .gest-list-actions { display: inline-flex; align-items: center; gap: 5px; }
.gest2 .gest-list-actions button, .gest2 .gest-list-section-head button { min-height: 30px; padding: 0 9px; border: 1px solid var(--gs-line, rgba(40,34,24,.12)); border-radius: 7px; background: var(--gs-panel, #fff); color: var(--gs-ink-dim, #655f55); font: 600 10px/1 Inter, sans-serif; cursor: pointer; }
.gest2 .gest-list-actions button:hover, .gest2 .gest-list-section-head button:hover { border-color: var(--gs-line-strong, rgba(168,134,63,.32)); color: var(--gs-ink, #282828); }
.gest2 .gest-list-actions .gest-list-more { width: 34px; padding: 0; }
.gest2 .gest-list-body > .gest-entete { border-top: 1px solid var(--gs-line, rgba(40,34,24,.08)); }
.gest2 .gest-list-section { border-top: 1px solid var(--gs-line, rgba(40,34,24,.08)); }
.gest2 .gest-list-section:first-of-type { border-top: 0; }
.gest2 .gest-list-section-head { min-height: 39px; display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 18px; background: var(--gs-panel-2, #f7f1e6); color: var(--gs-ink-dim, #655f55); cursor: pointer; }
/* Le nom du groupe s'étire : compteur, mini-barre et n/n se rangent en
   colonnes au bord droit, alignés d'un groupe à l'autre (02/09). */
.gest2 .gest-list-section-head strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 10px/1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.gest2 .gest-list-section-head small, .gest2 .gest-list-section-head > span:not(.gest-list-chevron):not(.gest-list-mini) { font-variant-numeric: tabular-nums; }
.gest2 .gest-list-section-head > span:not(.gest-list-chevron):not(.gest-list-mini) { color: var(--gs-ink-faint, #8a8175); font-size: 10px; }
.gest2 .gest-list-mini { width: 54px; height: 3px; overflow: hidden; border-radius: 99px; background: var(--gs-line, rgba(40,34,24,.12)); }
.gest2 .gest-list-mini i { display: block; height: 100%; background: var(--tst-vert, #19bd72); }
.gest2 .gest-list-section-head small { color: var(--gs-ink-faint, #8a8175); font-size: 9px; }
/* `auto` sur le PREMIER bouton seulement (ticket NfziUiuZmIvG4kOEh4vh) :
   l'en-tête en porte deux depuis que le 🗑️ y est. Sur `button` tout court,
   le second bouton reprenait tout l'espace libre et poussait le ➕ contre le
   compteur, avec un trou au milieu de la rangée. */
.gest2 .gest-list-section-head button:first-of-type { margin-left: auto; }
.gest2 .gest-list-section-head .gest-list-section-del { width: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.gest2 .gest-list-section-head .gest-list-section-del:hover { border-color: var(--tst-rouge, #e5484d); color: var(--tst-rouge, #e5484d); }
.gest2 .gest-list-section-head .gest-list-section-del .gicon { width: 13px; height: 13px; }
.gest2 .gest-list-section-body .gest-ligne:last-child { border-bottom: 0; }
.gest2 .gest-list-empty { min-height: 112px; display: grid; place-content: center; gap: 5px; text-align: center; color: var(--gs-ink-faint, #8a8175); }
.gest2 .gest-list-empty strong { color: var(--gs-ink-dim, #655f55); font-size: 12px; }
.gest2 .gest-list-empty span { font-size: 10.5px; }

/* Respiration générale du canevas de travail. Les panneaux latéraux gardent
   leurs propres gouttières; celle-ci évite que le fil d'Ariane, les onglets et
   le premier groupe touchent les bords du contenu central. */
.tasks-list.tasks-list-large .gest2 { padding: 16px 22px 44px; box-sizing: border-box; }
@media (max-width: 900px) {
    .tasks-list.tasks-list-large .gest2 { padding: 12px 14px 34px; }
    .gest2-boardhead { padding: 14px 14px 0; }
    .gest2 .gest-outils { padding: 7px 14px; }
    .gest2 .gest-etats { display: none; }
    .gest2-manage { width: 36px; justify-content: center; padding: 0; }
    .gest2-manage-label { display: none; }
}

/* Calendrier et chronologie partagent les mêmes tâches filtrées que la table.
   Ils sont donc de vraies lectures parallèles, pas deux captures décoratives. */
.gest-calendar, .gest-timeline {
    margin-top: 12px; border: 1px solid var(--gs-line, rgba(40,34,24,.1));
    border-radius: 10px; background: var(--gs-panel, #fff); overflow: hidden;
}
.gest-view-head {
    min-height: 52px; display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; padding: 0 12px; border-bottom: 1px solid var(--gs-line, rgba(40,34,24,.1));
}
.gest-view-head h3 { margin: 0; font: 650 15px/1.2 Outfit, Inter, sans-serif; }
.gest-view-nav { display: flex; gap: 4px; }
.gest-view-nav button {
    min-width: 34px; height: 32px; padding: 0 9px; border: 1px solid var(--gs-line, rgba(40,34,24,.1));
    border-radius: 6px; background: transparent; color: inherit; cursor: pointer;
}
.gest-view-nav button:hover { background: var(--gs-panel-2, #f7f1e6); }
.gest-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); min-width: 700px; }
.gest-cal-week {
    padding: 7px 9px; border-bottom: 1px solid var(--gs-line, rgba(40,34,24,.1));
    color: var(--gs-ink-faint, #8a8175); font-size: 9px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
.gest-cal-day {
    position: relative; min-height: 104px; padding: 7px; border-right: 1px solid var(--gs-line, rgba(40,34,24,.08));
    border-bottom: 1px solid var(--gs-line, rgba(40,34,24,.08)); background: var(--gs-panel, #fff);
}
.gest-cal-day:nth-child(7n) { border-right: 0; }
.gest-cal-day.hors { background: color-mix(in srgb, var(--gs-panel-2, #f7f1e6) 55%, transparent); }
.gest-cal-day.hors .gest-cal-num { opacity: .42; }
.gest-cal-num {
    width: 24px; height: 24px; display: grid; place-items: center; margin-left: auto;
    border-radius: 50%; color: var(--gs-ink-dim, #655f55); font-size: 10px; font-variant-numeric: tabular-nums;
}
.gest-cal-day.auj .gest-cal-num { background: var(--gs-gold-b, #a1823f); color: #fff; font-weight: 700; }
.gest-cal-items { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.gest-cal-task {
    width: 100%; height: 23px; overflow: hidden; padding: 0 6px; border: 0; border-left: 3px solid currentColor;
    border-radius: 4px; color: var(--gs-ink, #282828); font: 500 10px/1 Inter, sans-serif;
    text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.gest-cal-more { color: var(--gs-ink-faint, #8a8175); font-size: 9px; font-weight: 700; }

/* MON AGENDA (ticket 1zrBuHeh1pIJNKzLpI18) — mes rendez-vous dans les
   calendriers de tâches. Pointillé bleu-gris et heure en gras : on ne doit
   jamais les prendre pour une tâche (aplat, filet plein à la couleur du statut). */
.gest-agenda-bascule {
    justify-self: end; height: 32px; padding: 0 10px; border: 1px solid var(--gs-line, rgba(40,34,24,.1));
    border-radius: 6px; background: transparent; color: var(--gs-ink-dim, #655f55);
    font: 600 12px/1 Inter, sans-serif; white-space: nowrap; cursor: pointer;
}
.gest-agenda-bascule { display: inline-flex; align-items: center; gap: 6px; }
.gest-agenda-bascule svg { width: 14px; height: 14px; flex: none; }
.gest-agenda-bascule:hover { background: var(--gs-panel-2, #f7f1e6); }
.gest-agenda-bascule.on { border-color: #4a6a8a; color: var(--gs-ink, #282828); background: rgba(74,106,138,.10); }
.gest-agenda-bascule:focus-visible { outline: 2px solid var(--gs-gold-b, #a1823f); outline-offset: 1px; }
.cal-head .gest-agenda-bascule { margin-left: auto; }
.gest-cal-rdv, .cal-rdv {
    width: 100%; overflow: hidden; border: 1px dashed #4a6a8a; border-radius: 4px;
    background: rgba(74,106,138,.08); color: var(--gs-ink, #282828); text-align: left;
    text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.gest-cal-rdv { height: 21px; padding: 0 6px; font: 500 10px/1 Inter, sans-serif; }
.cal-rdv { padding: 2px 6px; font: 500 .68rem/1.3 Inter, sans-serif; }
.gest-cal-rdv b, .cal-rdv b { font-weight: 700; font-variant-numeric: tabular-nums; }
.gest-cal-rdv:hover, .cal-rdv:hover { background: rgba(74,106,138,.16); }
.gest-cal-rdv:focus-visible, .cal-rdv:focus-visible { outline: 2px solid var(--gs-gold-b, #a1823f); outline-offset: 1px; }
.gest-jour-t.gest-jour-rdv { display: block; border-style: dashed; border-color: #4a6a8a; overflow-wrap: anywhere; }
.gest-jour-rdv b { margin-right: 6px; font-variant-numeric: tabular-nums; }
body[data-gtheme="dark"] .gest-agenda-bascule.on,
body[data-gtheme="dark"] .gest-cal-rdv,
body[data-gtheme="dark"] .cal-rdv,
body[data-gtheme="dark"] .gest-jour-t.gest-jour-rdv { border-color: #8fb0d0; }
body[data-gtheme="dark"] .gest-cal-rdv,
body[data-gtheme="dark"] .cal-rdv { background: rgba(143,176,208,.12); color: var(--gs-ink, #f0e8d8); }

/* LA JOURNÉE SÉLECTIONNÉE (14/09) — la case ouvre la journée dans le QUAI
   (#tasksDock), le panneau de droite du module : il sait déjà vivre à toutes
   les largeurs. Classes gest-jour-* PROPRES : les .rn-* de Réunions ont des
   tailles minuscules hors de #reunions-view. Le numéro et « +N » deviennent
   des boutons : on les remet à plat. */
/* Le quai ouvert (journée ou tâche) prend 420 à 460 px : sous 700 px de large,
   la grille était ROGNÉE par l'overflow:hidden du cadre — le samedi coupé, le
   dimanche invisible. Elle défile maintenant de côté, aucune journée ne disparaît. */
.gest-calendar { overflow-x: auto; }
.gest-cal-day[data-gest-jour] { cursor: pointer; }
.gest-cal-day.sel { box-shadow: inset 0 0 0 2px var(--gs-gold-b, #a1823f); }
button.gest-cal-num { border: 0; padding: 0; background: transparent; font-family: inherit; line-height: 1; cursor: pointer; }
button.gest-cal-num:hover { background: var(--gs-panel-2, #f7f1e6); color: var(--gs-ink, #282828); }
/* Hors du mois, le numéro est pâli par opacité : l'anneau de focus l'était avec lui. */
.gest-cal-day.hors button.gest-cal-num:focus-visible { opacity: 1; }
button.gest-cal-more {
    align-self: flex-start; min-width: 28px; min-height: 24px; margin: 0; padding: 2px 6px; border: 0; border-radius: 4px;
    background: transparent; font-family: inherit; font-size: 10px; line-height: 1.2; cursor: pointer;
}
button.gest-cal-more:hover { background: var(--gs-panel-2, #f7f1e6); color: var(--gs-ink, #282828); }
button.gest-cal-num:focus-visible, button.gest-cal-more:focus-visible, .gest-jour-t:focus-visible {
    outline: 2px solid var(--gs-gold-b, #a1823f); outline-offset: 1px;
}
/* Dans le quai : l'en-tête reprend .dock-head (collant en haut du quai qui défile). */
.gest-jour-tete { gap: 10px; padding: 10px 12px 10px 16px; }
.gest-jour-titres { flex: 1; min-width: 0; }
.gest-jour-titres span {
    display: block; color: var(--gs-ink-dim, #655f55); font-size: 9px; font-weight: 750;
    letter-spacing: .09em; text-transform: uppercase;
}
.gest-jour-titres h3 { margin: 2px 0 0; font: 700 17px/1.2 Outfit, Inter, sans-serif; color: var(--gs-ink, #282828); outline: none; }
.gest-jour-n {
    min-width: 30px; height: 26px; padding: 0 7px; display: grid; place-items: center; border-radius: 8px;
    background: var(--gs-accent-soft, rgba(168,134,63,.12)); color: var(--gs-ink, #282828); font-size: 12px;
}
.gest-jour-x { display: grid; place-items: center; }
.gest-jour-corps { padding: 4px 12px 16px; }
.gest-jour-groupe h4 {
    display: flex; justify-content: space-between; gap: 8px; margin: 14px 4px 6px;
    color: var(--gs-ink-dim, #655f55); font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
}
.gest-jour-groupe h4 span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gest-jour-t {
    width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0 0 5px; padding: 9px 10px;
    border: 1px solid var(--gs-line, rgba(40,34,24,.1)); border-radius: 8px; background: transparent;
    color: var(--gs-ink, #282828); font: 500 13px/1.3 Inter, sans-serif; text-align: left; cursor: pointer;
}
.gest-jour-t:hover { background: var(--gs-panel-2, #f7f1e6); }
.gest-jour-t.tasks-dock-selected {
    border-color: var(--gs-gold-b, #a1823f); box-shadow: inset 3px 0 0 var(--gs-gold-b, #a1823f);
}
.gest-jour-statut {
    display: inline-flex; align-items: center; gap: 6px; color: var(--gs-ink-dim, #655f55);
    font-size: 11px; font-weight: 600;
}
/* La couleur du statut dans une PASTILLE, le libellé en encre : un texte posé
   sur l'aplat du statut était illisible pour la moitié des teintes. */
.gest-jour-statut i { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.gest-jour-titre {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.gest-jour-qui { color: var(--gs-ink-dim, #655f55); font-size: 11.5px; }
.gest-jour-qui em { margin-right: 6px; color: var(--tst-rouge, #c0392b); font-style: normal; font-weight: 650; }
body[data-gtheme="dark"] .gest-jour-qui em { color: #ff8a98; }
/* Terminées : barrées et atténuées par la COULEUR, pas par l'opacité — une
   opacité de .6 faisait tomber le texte sous le contraste lisible. */
.gest-jour-t.fait .gest-jour-titre { color: var(--gs-ink-dim, #655f55); text-decoration: line-through; }
.gest-jour-vide { margin: 0; padding: 28px 12px; color: var(--gs-ink-dim, #655f55); font-size: 12px; text-align: center; }
/* « ‹ 14 sept. » : retour de la tâche à sa journée, visible partout. Sur le
   feuillet mobile, il remplace la flèche de fermeture. */
.dock-btn.dock-jour { width: auto; padding: 0 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dock-head:has(.dock-jour) > .dock-back { display: none !important; }
/* Leur halo de focus hérité de .dock-btn tombait à 1,35:1 : même contour plein que les lignes. */
.gest-jour-x:focus-visible, .dock-btn.dock-jour:focus-visible { outline: 2px solid var(--gs-gold-b, #a1823f); outline-offset: 1px; box-shadow: none; }
/* Le quai ouvert rogne #tasksList : le menu Filtrer s'ouvre vers la GAUCHE de son bouton, comme « ••• ». */
.gest2-menu[data-gest-menu-filtre] > .gest2-menu-pop { left: auto; right: 0; }
/* Quai ouvert entre ~1400 et 1800 px : la liste tombe sous 700 px et le dimanche
   partait dans un défilement de côté. Tant que chaque colonne garde ~75 px, la
   grille se resserre au lieu de défiler ; en dessous, elle défile. */
@container tasks-main (min-width: 540px) and (max-width: 760px) {
    .gest-cal-grid { min-width: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
/* Menu Filtrer › Tableaux : un nom long passe à la ligne DANS sa case. */
.gest2-menu-pop .gest-branche { height: auto; padding-block: 7px; gap: 10px; line-height: 1.25; }
.gest-branche .gest-outil-n { margin-right: 6px; font-style: normal; color: var(--gs-ink-dim, #655f55); font-size: 11px; }
.gest-branche > span { display: inline-flex; flex: none; align-items: center; }
.gest-view-note {
    padding: 10px 12px; border-top: 1px solid var(--gs-line, rgba(40,34,24,.1));
    color: var(--gs-ink-faint, #8a8175); font-size: 11px;
}
.gest-view-note b { color: var(--gs-ink, #282828); }
.gest-view-empty { min-height: 220px; display: grid; place-content: center; gap: 6px; text-align: center; }
.gest-view-empty span { color: var(--gs-ink-faint, #8a8175); font-size: 12px; }
.gest-time-scale, .gest-time-row {
    display: grid; grid-template-columns: minmax(190px, 28%) minmax(540px, 1fr) 66px; align-items: center;
}
.gest-time-scale { height: 42px; border-bottom: 1px solid var(--gs-line, rgba(40,34,24,.1)); }
.gest-time-scale > div { position: relative; height: 100%; }
.gest-time-scale > div::before {
    content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg,
        transparent 0, transparent calc(16.666% - 1px), var(--gs-line, rgba(40,34,24,.08)) calc(16.666% - 1px),
        var(--gs-line, rgba(40,34,24,.08)) 16.666%);
}
.gest-time-scale > div span {
    position: absolute; bottom: 8px; transform: translateX(-50%); color: var(--gs-ink-faint, #8a8175);
    font-size: 9px; white-space: nowrap;
}
.gest-time-row { min-height: 40px; border-bottom: 1px solid var(--gs-line, rgba(40,34,24,.07)); }
.gest-time-name {
    overflow: hidden; padding: 0 12px; border: 0; background: transparent; color: inherit;
    font: 550 11px/1.2 Inter, sans-serif; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.gest-time-name:hover { color: var(--gs-gold-b, #a1823f); }
.gest-time-track {
    position: relative; height: 22px; background: repeating-linear-gradient(90deg,
        transparent 0, transparent calc(16.666% - 1px), var(--gs-line, rgba(40,34,24,.07)) calc(16.666% - 1px),
        var(--gs-line, rgba(40,34,24,.07)) 16.666%);
}
.gest-time-bar {
    position: absolute; left: var(--left); top: 6px; width: var(--width); min-width: 8px; height: 10px;
    border: 0; border-radius: 999px; cursor: pointer;
}
.gest-time-bar.milestone { width: 11px; min-width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px; }
.gest-time-date { padding: 0 9px; color: var(--gs-ink-faint, #8a8175); font-size: 10px; text-align: right; }

/* Le rail Contenu reprend la maquette : un sélecteur d'espace, les tableaux,
   un repère coloré sobre et une seule action secondaire. */
.tasks-rail.tasks-rail--atelier {
    flex-basis: 218px; width: 218px; padding: 15px 12px 28px;
    background: var(--gs-panel, #fff);
}
.tasks-rail--atelier .trail-h { padding: 0 2px 8px 6px; }
.tasks-rail--atelier .trail-h-lbl { font-size: 9px; letter-spacing: .11em; }
.tasks-rail--atelier .trail-esp-row { margin-bottom: 19px; }
.tasks-rail--atelier .trail-esp { height: 42px; padding: 0 8px; border-radius: 8px; }
.tasks-rail--atelier .tesp-ico { width: 27px; height: 27px; border-radius: 7px; }
.tasks-rail--atelier .trail-sec { padding: 0 7px 7px; font-size: 9px; letter-spacing: .11em; }
.tasks-rail--atelier .trail-node-atelier {
    min-height: 36px; padding: 0 8px; gap: 9px; border-radius: 6px;
    color: var(--gs-ink-dim, #655f55);
}
.tasks-rail--atelier .trail-node-atelier.on {
    color: var(--gs-ink, #282828); background: var(--gs-accent-soft, rgba(168,134,63,.13));
    box-shadow: none; font-weight: 600;
}
/* Le tableau propre de l'espace : première ligne de « Contenu », séparée
   des enfants par un filet. Même gabarit qu'eux — c'est un tableau — mais
   son nom est celui du sélecteur juste au-dessus, et le filet dit « ici,
   lui-même ; en dessous, ce qu'il contient ». */
.trail-node-racine { font-weight: var(--w-semi, 600); }
.trail-node-racine .trail-label { font-weight: inherit; }
.trail-node-racine + .trail-node {
    margin-top: 6px; position: relative;
}
.trail-node-racine + .trail-node::before {
    content: ''; position: absolute; left: 8px; right: 8px; top: -4px; height: 1px;
    background: var(--gs-line, rgba(40, 34, 24, .12));
}
.trail-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 2px; background: var(--tst-gris); }
.trail-dot-jaune { background: var(--tst-jaune); }
.trail-dot-bleu { background: var(--tst-bleu); }
.trail-dot-violet { background: var(--tst-violet); }
.trail-dot-vert { background: var(--tst-vert); }
.trail-dot-orange { background: var(--tst-orange); }
.trail-dot-turquoise { background: var(--tst-turquoise); }

/* ── RANGER LES TABLEAUX À LA MAIN (ticket JyDNmYJBfCwgdpWtWSCq) ───────
   La poignée ne se montre qu'au survol et au focus clavier : affichée en
   permanence, elle ajouterait sept glyphes à un panneau de 236 px où le nom
   des tableaux est déjà tronqué. C'est `opacity` et non `display` : la ligne
   garde ses 9 px en toutes circonstances, sinon les noms sauteraient d'un
   cran à chaque survol — un panneau qui bouge sous le curseur. */
.trail-grip {
    flex: 0 0 auto;
    width: 9px;
    margin-left: -3px;
    font-size: 10px;
    line-height: 1;
    color: var(--gs-ink-faint, rgba(40, 38, 34, .44));
    opacity: 0;
    cursor: grab;
}
.trail-node-rangeable:hover .trail-grip,
.trail-node-rangeable:focus-visible .trail-grip,
.tasks-dragging .trail-node-rangeable .trail-grip { opacity: 1; }
.trail-node-dragging { opacity: .45; }
/* Pendant le geste, les lignes glissent à leur nouvelle place au lieu de s'y
   téléporter : dans une liste courte, un saut sec ne dit pas laquelle a
   bougé. Coupée pour qui a demandé moins d'animation. */
.trail-liste .trail-node { transition: transform .12s ease; }
@media (prefers-reduced-motion: reduce) {
    .trail-liste .trail-node { transition: none; }
}
/* L'en-tête « Contenu » porte maintenant le retour à l'alphabet, à droite. */
.trail-sec-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2, 8px); }
.trail-sec-btn {
    flex: 0 0 auto;
    border: 0; background: none; padding: 0 2px; cursor: pointer;
    font: inherit; font-size: inherit; letter-spacing: inherit;
    color: var(--gs-ink-faint, rgba(40, 38, 34, .44));
    text-transform: none;
}
.trail-sec-btn:hover { color: var(--gs-gold-b, #a1823f); }
.trail-sec-btn:focus-visible { outline: none; box-shadow: var(--e-focus, 0 0 0 3px rgba(168, 134, 63, .28)); border-radius: var(--r-sm, 6px); }
/* Seul point de création de projet depuis le retrait du bouton de la rangée
   (02/09) : il passe du gris fantôme à l'or DA en pointillé, même famille
   visuelle que « + Nouvelle liste ». */
.trail-new {
    width: 100%; min-height: 36px; margin-top: 8px; padding: 0 10px;
    border: 1px dashed rgba(168,134,63,.5); border-radius: 6px; background: transparent;
    color: #8a6d1f; font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.trail-new:hover { color: #A8863F; border-color: #A8863F; background: rgba(168,134,63,.08); }
body[data-gtheme="dark"] .trail-new { color: #D9BC77; border-color: rgba(221,203,164,.4); }
body[data-gtheme="dark"] .trail-new:hover { color: #E8CD8C; border-color: #D9BC77; background: rgba(221,203,164,.08); }

/* Une tâche sans sous-tâche n'affiche plus un titre et un minuscule bouton
   en pointillé : elle explique le geste et offre une vraie première action. */
/* Boîte visuelle : reste un conteneur unique à l'écran (bordure/fond), mais
   ce n'est plus elle qui porte `.tasks-subtasks-empty` — ce nom sert
   uniquement à masquer l'invite décorative en mobile (cf. M2 plus bas), et
   avaler le bouton `+` avec elle a longtemps empêché d'ajouter une première
   sous-tâche depuis un mobile. */
.tasks-subtasks-empty-box {
    margin-top: 8px; padding: 12px; border: 1px solid var(--gs-line, rgba(40,34,24,.1));
    border-radius: 9px; background: var(--gs-panel-2, #f7f1e6);
}
.tasks-subtasks-empty {
    display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px;
}
.tasks-subtasks-empty-icon {
    width: 32px; height: 32px; display: grid; place-items: center;
    border-radius: 8px; background: var(--gs-accent-soft, rgba(168,134,63,.13));
    color: var(--gs-gold-b, #a1823f); font-size: 16px;
}
.tasks-subtasks-empty strong, .tasks-subtasks-empty small { display: block; }
.tasks-subtasks-empty strong { margin: 1px 0 3px; font-size: 12px; }
.tasks-subtasks-empty small { color: var(--gs-ink-dim, #655f55); font-size: 10.5px; line-height: 1.45; }
.tasks-subtask-first {
    margin: 8px 0 0 44px; min-height: 32px;
    padding: 0 11px; border-style: solid; border-color: var(--gs-line-strong, rgba(168,134,63,.32));
    background: var(--gs-panel, #fff); color: var(--gs-ink, #282828); font-weight: 600;
}

/* L'ordre d'exécution reste visible, mais ses deux formulaires ne monopolisent
   plus le quai tant qu'on n'est pas en train de construire une chaîne. */
.tasks-deps-forms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tasks-dep-create { flex: 1 1 180px; min-width: 0; }
.tasks-dep-create > summary {
    min-height: 34px; display: flex; align-items: center; justify-content: center;
    padding: 0 9px; border: 1px dashed var(--gs-line-strong, rgba(168,134,63,.32));
    border-radius: 7px; color: var(--gs-ink-dim, #655f55); font-size: 10.5px;
    font-weight: 600; text-align: center; cursor: pointer; list-style: none;
}
.tasks-dep-create > summary::-webkit-details-marker { display: none; }
.tasks-dep-create[open] { flex-basis: 100%; }
.tasks-dep-create[open] > summary { justify-content: flex-start; background: var(--gs-panel-2, #f7f1e6); }
.tasks-dep-create .tasks-dep-add {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin: 7px 0 0;
}
.tasks-dep-create .tasks-dep-add select { min-width: 0; height: 36px; padding: 0 8px; }
.tasks-dep-create .tasks-dep-add .btn { width: auto; min-height: 36px; }

body[data-gtheme="dark"] .gest2-boardhead,
body[data-gtheme="dark"] .gest2 .gest-outils,
body[data-gtheme="dark"] .gest-calendar,
body[data-gtheme="dark"] .gest-timeline,
body[data-gtheme="dark"] .gest-cal-day,
body[data-gtheme="dark"] .gest2 .gest-list-card,
body[data-gtheme="dark"] .gest2 .gest-list-head { background: var(--gs-panel, #2b2823); }
/* Le contour de « Nouvelle liste » suit l'encre sombre — convention du
   fichier : toute règle qui pose une bordure claire en pose une ici. */
body[data-gtheme="dark"] .gest-new-list {
    border-color: rgba(240,232,216,.20); color: var(--gs-ink, #f0e8d8);
}

@media (max-width: 900px) {
    .gest2 .gest-outils { flex-wrap: wrap; }
    .gest2-search-slot { order: 3; flex-basis: 100%; max-width: none; }
    .gest2 .gest-list-head { flex-wrap: wrap; }
    .gest2 .gest-list-progress { margin-left: 0; }
    .gest2 .gest-list-actions { width: 100%; padding-left: 20px; }
}
@media (max-width: 720px) {
    .gest2-title-row h2 { font-size: 22px; }
    .gest2-boardhead .gest2-views { margin-top: 5px; }
    .gest2-grouping { overflow-x: auto; white-space: nowrap; }
    .tasks-subtasks-empty-box { padding: 10px; }
    .tasks-subtasks-empty { grid-template-columns: 30px minmax(0,1fr); }
    .tasks-subtask-first { margin-left: 40px; }
    .gest-calendar, .gest-timeline { overflow-x: auto; }
}

/* ========================================================================
   MON TRAVAIL — poste personnel, même famille visuelle que Gestion
   ======================================================================== */
.tasks-view--mine { background: var(--gs-panel, #fff); } /* même blanc que Gestion (02/09) */
.tasks-view--mine .tasks-list.tasks-list-large {
    padding: 20px 24px 48px;
    background: var(--gs-panel, #fff);
}
.tasks-rail--mine { padding: 18px 14px 30px; }
.tasks-rail--mine .trail-h { padding: 0 4px 13px 8px; }
.tasks-rail--mine .trail-h-lbl { font-size: 10px; letter-spacing: .12em; }
.tasks-rail--mine .trail-sec { padding: 8px 9px 7px; font-size: 9px; letter-spacing: .12em; }
.mine-rail-item {
    width: 100%; min-height: 38px; display: grid; grid-template-columns: 20px minmax(0,1fr) auto;
    align-items: center; gap: 7px; padding: 0 10px; margin: 2px 0; border: 0; border-radius: 8px;
    background: transparent; color: var(--gs-ink-dim, #655f55); font: inherit; text-align: left; cursor: pointer;
}
.mine-rail-item b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 520; }
.mine-rail-item small { color: var(--gs-ink-faint, #8a8175); font-size: 10px; font-variant-numeric: tabular-nums; }
.mine-rail-item:hover { background: var(--gs-panel-2, #f7f1e6); color: var(--gs-ink, #282828); }
.mine-rail-item.on {
    background: var(--gs-accent-soft, rgba(168,134,63,.13)); color: var(--gs-ink, #282828);
    box-shadow: inset 3px 0 var(--gs-gold-b, #a1823f); font-weight: 650;
}
.mine-rail-item.quick > span { font-size: 13px; color: var(--tst-bleu); }
.mine-rail-item.quick-overdue > span { color: var(--tst-rouge); }
.mine-rail-item.quick-pending > span { color: var(--tst-bleu); }
.mine-rail-item.quick-week > span { color: var(--tst-jaune); }
.mine-rail-rule { height: 1px; margin: 15px 9px 7px; background: var(--gs-line, rgba(40,34,24,.1)); }
.mine-rail-note {
    display: grid; gap: 4px; margin: 18px 6px 0; padding: 12px;
    border: 1px solid var(--gs-line, rgba(40,34,24,.1)); border-radius: 10px;
    background: var(--gs-panel-2, #f7f1e6); color: var(--gs-ink-dim, #655f55);
    font-size: 10.5px; line-height: 1.45;
}
.mine-rail-note b { color: var(--gs-ink, #282828); font-size: 11px; }

.mine-work { width: 100%; padding: 0; color: var(--gs-ink, #282828); }
.mine-boardhead {
    padding: 22px 24px 0; border: 1px solid var(--gs-line, rgba(40,34,24,.1));
    border-radius: 14px 14px 0 0; background:
        radial-gradient(circle at 96% 0, rgba(168,134,63,.12), transparent 190px),
        linear-gradient(120deg, var(--gs-panel, #fff), var(--gs-panel-2, #f7f1e6));
}
.mine-title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.mine-title-row h2 { margin: 7px 0 3px; font-family: Outfit, Inter, sans-serif; font-size: 30px; letter-spacing: -.025em; }
.mine-title-row p { margin: 0 0 17px; color: var(--gs-ink-faint, #8a8175); font-size: 12px; }
.mine-metrics { display: flex; align-items: center; gap: 7px; margin-bottom: 16px; }
.mine-metrics button {
    min-height: 30px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px;
    background: var(--gs-canvas, #f3eddf); color: var(--gs-ink-dim, #655f55); font: inherit; font-size: 10px; cursor: pointer;
}
.mine-metrics button:hover { border-color: var(--gs-line-strong, rgba(168,134,63,.32)); background: var(--gs-panel, #fff); }
.mine-metrics button b { color: var(--gs-ink, #282828); font-variant-numeric: tabular-nums; }
.mine-metrics button.late, .mine-metrics button.late b { color: var(--tst-rouge); }
.mine-metrics button.act, .mine-metrics button.act b { color: var(--gs-gold-b, #a1823f); }
.mine-metrics button.act { border-color: var(--gs-line-strong, rgba(168,134,63,.32)); background: var(--gs-accent-soft, rgba(168,134,63,.13)); }
/* Bloquée : « Attend 2 tâches » à côté du statut (plan du 11/09, écart 5). */
.tasks-chip-blocked { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; white-space: nowrap; font-size: 10.5px; background: #F6F0E4; color: #7A6A46; border: 1px solid rgba(168,134,63,.4); }
.tasks-chip-blocked .gicon { width: 11px; height: 11px; }
/* Mes sous-tâches, sous leur parente (Lot 4). */
.mine-sous { list-style: none; margin: 0; padding: 0 0 4px 46px; background: var(--gs-panel, #fff); border-bottom: 1px solid var(--gs-line, rgba(40,34,24,.08)); }
.mine-sous-ligne { min-height: 30px; display: flex; align-items: center; gap: 8px; padding: 2px 6px; font-size: 12px; color: var(--gs-ink, #282828); }
.mine-sous-ligne .gest-st-check { width: 18px; height: 18px; }
.mine-sous-ligne.done .gest-st-check { border-color: var(--tst-vert, #20b36b); background: var(--tst-vert, #20b36b); }
.mine-sous-ligne.done .mine-sous-texte { color: var(--gs-ink-faint, #8a8175); text-decoration: line-through; }
.mine-sous-texte { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-sous-date { flex: 0 0 auto; color: var(--gs-ink-faint, #8a8175); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.mine-sous-ligne.late .mine-sous-date { color: var(--tst-rouge); font-weight: 600; }
/* À valider — Tâche / Projet / Demande / Depuis / actions (Lots 2 et 3). */
.mine-valider { display: grid; margin: 0 0 40px; border: 1px solid var(--gs-line, rgba(40,34,24,.1)); border-radius: 12px; background: var(--gs-panel, #fff); overflow: hidden; }
.mine-valider-tete, .mine-valider-ligne { display: grid; grid-template-columns: minmax(220px, 1fr) 150px minmax(200px, 1.1fr) 96px auto; gap: 12px; align-items: center; padding: 0 14px; }
.mine-valider-tete { min-height: 34px; background: var(--gs-panel-2, #f7f1e6); color: var(--gs-ink-faint, #8a8175); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mine-valider-ligne { min-height: 52px; border-top: 1px solid var(--gs-line, rgba(40,34,24,.08)); font-size: 12.5px; }
.mine-valider-ligne:hover { background: color-mix(in srgb, var(--gs-panel-2, #f7f1e6) 55%, transparent); }
.mine-valider-titre { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--gs-ink, #282828); text-align: left; cursor: pointer; }
.mine-valider-titre:hover { text-decoration: underline; }
.mine-valider-proj { color: var(--gs-ink-dim, #655f55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-valider-dem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mine-valider-dem small { flex-basis: 100%; color: var(--gs-ink-faint, #8a8175); font-style: italic; }
.mine-valider-depuis { color: var(--gs-ink-faint, #8a8175); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mine-valider-acts { display: flex; gap: 6px; white-space: nowrap; }
.mine-valider-acts .btn-sm, .mine-valider-motif .btn-sm { min-height: 30px; padding: 0 12px; font-size: 12px; }
.mine-valider-motif { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; padding: 0 0 12px; }
.mine-valider-motif input { flex: 1 1 auto; min-height: 32px; padding: 0 10px; border: 1px solid var(--gs-line-strong, rgba(40,34,24,.25)); border-radius: 8px; font: inherit; font-size: 12.5px; }
.mine-empty-valider small { max-width: 520px; line-height: 1.5; }
/* Liste de contrôle par projet dans l'état vide (11/09) : les trois
   conditions pour qu'une tâche arrive ici, cochées ou non. */
.mine-valider-check { display: grid; gap: 10px; width: min(560px, 100%); margin-top: 10px; text-align: left; }
.mine-valider-check-proj { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid var(--gs-line, rgba(40,34,24,.1)); border-radius: 10px; background: var(--gs-panel-2, #f7f1e6); color: var(--gs-ink-dim, #655f55); font-size: 12px; line-height: 1.4; }
.mine-valider-check-proj b { color: var(--gs-ink, #282828); font: 650 13px Outfit, Inter, sans-serif; }
.mine-valider-check-proj span { display: flex; gap: 7px; align-items: flex-start; }
.mine-valider-check-proj i { flex: 0 0 16px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; margin-top: 1px; color: #fff; }
.mine-valider-check-proj i svg { width: 10px; height: 10px; }
.mine-valider-check-proj i.ok { background: var(--tst-vert); }
.mine-valider-check-proj i.ko { background: var(--tst-rouge); }
.mine-valider-check-proj i.nb { background: none; color: var(--gs-ink-faint, #8a8175); }
.mine-valider-check-proj i.nb svg { width: 14px; height: 14px; }
.mine-valider-check-proj .btn-sm { justify-self: start; margin-top: 4px; min-height: 30px; padding: 0 12px; font-size: 12px; }
body[data-gtheme="dark"] .mine-valider-check-proj { background: #2b2823; border-color: rgba(221,203,164,.15); }
@media (max-width: 900px) {
    .mine-valider-tete { display: none; }
    .mine-valider-ligne { grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; }
    .mine-valider-acts { justify-content: flex-start; }
}
.mine-views { margin-top: 0; }
.mine-views button { min-height: 38px; }
.mine-tools {
    min-height: 55px; padding: 8px 10px; gap: 7px; border: 1px solid var(--gs-line, rgba(40,34,24,.1));
    border-top: 0; background: var(--gs-panel, #fff); box-shadow: 0 8px 24px rgba(55,44,26,.04);
}
.mine-tools .gest-neuf { min-height: 38px; padding: 0 15px; border-radius: 8px; }
.mine-tools .gest2-menu > summary { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-tools .gest2-menu-pop { min-width: 230px; }
.mine-tools .gest2-menu-pop .gest-outil { justify-content: flex-start; }
.mine-tools .gest2-menu-pop .gest-outil b { margin-left: auto; }
.mine-pick-toggle { min-height: 36px; white-space: nowrap; }
.mine-pick-toggle.on {
    border-color: var(--gs-line-strong, rgba(168,134,63,.32));
    background: var(--gs-accent-soft, rgba(168,134,63,.13));
}
.mine-scope-note {
    margin-left: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 32px;
    padding: 0 10px; border-radius: 8px; background: var(--gs-panel-2, #f7f1e6);
    color: var(--gs-ink-dim, #655f55); font-size: 10.5px; white-space: nowrap;
}
.mine-scope-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--tst-bleu); }
.mine-content { padding: 18px 0 4px; }
.mine-summary {
    min-height: 30px; display: flex; align-items: center; gap: 9px; padding: 0 6px 9px;
    color: var(--gs-ink-faint, #8a8175); font-size: 10.5px;
}
.mine-summary i { font-style: normal; opacity: .5; }
.mine-summary b { margin-left: auto; font-weight: 550; }
.mine-summary button { border: 0; background: none; color: var(--gs-gold-b, #a1823f); font: inherit; cursor: pointer; }
/* `width: 100%` et non `max-content` : cet en-tete est le SEUL de la vue (il
   est sorti des groupes pour rester colle en haut), et il doit tomber au pixel
   sur les colonnes des lignes. En `max-content` il se dimensionnait sur son
   propre contenu — 1 206 px la ou les lignes en faisaient 1 155 — et aucun
   libelle ne surmontait plus sa colonne. */
.mine-sticky-cols {
    position: sticky; top: 0; z-index: 7; width: 100%;
    min-height: 32px; margin-bottom: 8px;
    border: 1px solid var(--gs-line, rgba(40,34,24,.1)); border-radius: 8px;
    background: color-mix(in srgb, var(--gs-panel, #fff) 96%, var(--gs-canvas, #f3eddf));
    box-shadow: 0 7px 18px rgba(50,39,20,.06);
}
/* --- UNE SEULE GRILLE POUR TOUTE LA PLANCHE (11/09) -----------------
   L'en-tete colle et TOUS les groupes partagent ces pistes. La regle vivait
   sur `.mine-groupe` seul : l'en-tete, qui n'est pas dans un groupe, gardait
   celles posees en ligne par gestColonnesGrille() (168/150/128/132) et ne
   surmontait aucune de ses colonnes. `!important` parce que la valeur en ligne
   gagnerait autrement — c'est aussi pour cela qu'on vise les elements plutot
   que d'hériter depuis `.mine-content`.

   `width: 100%` sur `.gest-tab` : la piste du titre est en `1fr`, et un `fr`
   n'a de sens que dans une largeur DEFINIE. `.gest-tab` etant `max-content`
   (regle generique, faite pour les vues aux colonnes fixes), chaque groupe se
   dimensionnait sur son propre titre le plus long : « En retard » avec une
   seule tache courte tombait a 844 px quand le groupe d'a cote, porteur d'un
   titre long, remplissait ses 1 155 px. Les groupes ne s'alignaient donc pas
   entre eux. Meme correctif que celui deja pose en etroit (~l. 7590). */
.mine-groupe, .mine-sticky-cols { --gest-cols: 6px minmax(300px,1fr) 150px 145px 120px 120px !important; }
.mine-groupe { margin-bottom: 20px; }
.mine-groupe .gest-tab { width: 100%; }
.mine-groupe-tete { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mine-groupe-tete:hover { background: color-mix(in srgb, var(--gs-panel, #fff) 36%, transparent); }
.mine-groupe .gest-nom { font-family: Outfit, Inter, sans-serif; font-size: 14px; }
.mine-groupe .gest-compte { background: transparent; }
.mine-progress { display: block; width: 118px; height: 5px; overflow: hidden; border-radius: 6px; background: var(--gs-line, rgba(40,34,24,.12)); }
.mine-progress i { display: block; height: 100%; border-radius: inherit; background: var(--tst-vert); }
.mine-groupe .gest-tab { border-radius: 10px; box-shadow: 0 7px 22px rgba(50,39,20,.035); }
.mine-groupe .gest-entete { background: color-mix(in srgb, var(--gs-panel, #fff) 92%, var(--gs-canvas, #f3eddf)); }
.mine-groupe .gest-ligne > * { min-height: 46px; }
.mine-groupe .gest-ligne.mine-picking { cursor: pointer; user-select: none; }
.mine-groupe .gest-ligne.mine-picking .gest-c-titre::after {
    content: ''; position: absolute; right: 12px; width: 17px; height: 17px;
    border: 1.5px solid var(--gs-line-strong, rgba(168,134,63,.38)); border-radius: 5px;
    background: var(--gs-panel, #fff); box-sizing: border-box;
}
.mine-groupe .gest-ligne.mine-picked > * {
    background: color-mix(in srgb, var(--gs-accent-soft, #eadfc5) 58%, var(--gs-panel, #fff));
}
.mine-groupe .gest-ligne.mine-picked .gest-c-titre::after {
    content: '✓'; display: grid; place-items: center;
    border-color: var(--gs-gold-b, #a1823f); background: var(--gs-gold-b, #a1823f);
    color: #fff; font-size: 11px; font-weight: 800;
}
.mine-groupe .gest-ligne.mine-picking .gest-c-titre > * { pointer-events: none; }
.mine-groupe .gest-c-proj { color: var(--gs-ink-dim, #655f55); }
.mine-groupe .gest-c-proj:not(:empty) { font-size: 10px; }
.mine-groupe .gest-c-proj:not(:empty)::before { content: ''; }
.mine-groupe .gest-c-date { font-size: 10.5px; }
.mine-groupe .gest-ligne.late .gest-c-date { color: var(--tst-rouge); font-weight: 650; }
.mine-empty {
    min-height: 220px; display: grid; place-content: center; justify-items: center; gap: 7px;
    border: 1px solid var(--gs-line, rgba(40,34,24,.1)); border-radius: 14px; background: var(--gs-panel, #fff);
    color: var(--gs-ink-faint, #8a8175); text-align: center;
}
.mine-empty > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--tst-vert); color: #fff; font-weight: 800; }
.mine-empty strong { color: var(--gs-ink, #282828); font: 650 16px Outfit, Inter, sans-serif; }
.mine-empty small { font-size: 11px; }

body[data-gtheme="dark"] .mine-boardhead,
body[data-gtheme="dark"] .mine-tools { background-color: var(--gs-panel, #2b2823); }

@media (max-width: 1180px) {
    /* L'en-tete suit le meme resserrement que les lignes, sinon il se decale
       d'un cran a 1 180 px — le defaut que la regle du dessus vient de fermer. */
    .mine-groupe, .mine-sticky-cols { --gest-cols: 6px minmax(270px,1fr) 132px 138px 112px 106px !important; }
    .mine-title-row { align-items: flex-start; }
    .mine-metrics { flex-wrap: wrap; justify-content: flex-end; }
}

/* Mes tâches mobile — cartes M1 (m1-mes-taches.svg) */
@media (max-width: 860px) {
    .tasks-view--mine .tasks-rail { display: none; }
    .tasks-view--mine .tasks-list.tasks-list-large { padding: 12px 12px 84px; }
    .mine-boardhead { padding: 17px 17px 0; border-radius: 12px 12px 0 0; }
    .mine-title-row { display: block; }
    .mine-title-row h2 { font-size: 25px; }
    .mine-metrics { justify-content: flex-start; margin-bottom: 12px; }
    /* L'item en 100% datait du wrap : en bande nowrap il devenait un bout de
       rangée hors écran (scrollbar masquée = introuvable). Largeur bornée. */
    .mine-tools .gest2-search-slot { order: 0; flex: 0 0 auto; width: 180px; min-width: 0; }
    .mine-scope-note { margin-left: 0; }
    .mine-summary { overflow-x: auto; white-space: nowrap; }
    .mine-summary b { margin-left: 10px; }
    .mine-sticky-cols { display: none; }
    .mine-groupe { --gest-cols: none !important; }
    .mine-groupe .gest-entete { display: none; }
    .mine-groupe .gest-tab { border: 0; background: transparent; box-shadow: none; overflow: visible; }
    .mine-groupe .gest-ligne {
        display: grid; grid-template-columns: 6px minmax(0,1fr) auto auto;
        grid-template-areas: 'bar titre titre qui' 'bar proj statut date';
        margin-bottom: 8px; border: 1px solid var(--gs-line, rgba(40,34,24,.1));
        border-radius: 10px; overflow: hidden; background: var(--gs-panel, #fff);
    }
    .mine-groupe .gest-c-bar { grid-area: bar; }
    .mine-groupe .gest-c-titre { grid-area: titre; min-height: 42px; }
    .mine-groupe .gest-c-proj { grid-area: proj; min-height: 34px; border-top: 1px solid var(--gs-line, rgba(40,34,24,.08)); }
    /* Le media générique 720 (~l.7540) éteint .gest-c-proj ; la maquette M1
       veut « projet · statut · échéance » en ligne 2 — on le rallume ici,
       avec le display de base des cellules (flex, cf. .gest-ligne > *). */
    .tasks-view--mine .gest-ligne .gest-c-proj { display: flex; }
    .mine-groupe .gest-c-statut { grid-area: statut; min-height: 34px; border-top: 1px solid var(--gs-line, rgba(40,34,24,.08)); }
    .mine-groupe .gest-c-date { grid-area: date; min-height: 34px; border-top: 1px solid var(--gs-line, rgba(40,34,24,.08)); }
    .tasks-view--mine .gest-ligne .gest-c-qui { grid-area: qui; justify-self: end; align-self: center; padding-right: 10px; }
    .tasks-view--mine .gest-ligne .tasks-avatar,
    .tasks-view--mine .gest-ligne .gest-plus { width: 24px; height: 24px; font-size: 10px; }
    .tasks-view--mine .gest-ligne .gest-plus { display: inline-grid; place-items: center; margin-left: 2px; }
    .mine-groupe .gest-st-panel { margin: -8px 0 9px 4px; border-radius: 0 0 10px 10px; }
    .mine-groupe .gest-tete-barre { margin-left: auto; }
    .mine-tools { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
    .mine-tools::-webkit-scrollbar { display: none; }
    /* Portée / Filtrer : le pop absolu vivait DANS le conteneur overflow-x
       ci-dessus — ouvert, il était clippé par la bande. Feuillet ancré à la
       fenêtre (aucun ancêtre transformé : .tasks-view est fixed, sans
       transform/filter — le fixed reste bien viewport). */
    .mine-tools .gest2-menu-pop {
        position: fixed; z-index: 1200; top: auto; left: 12px; right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        min-width: 0; max-height: min(420px, 60vh); overflow-y: auto;
        box-shadow: 0 -14px 38px rgba(30,24,16,.22);
    }
}

@media (hover: none) and (pointer: coarse) {
    .mine-rail-item,
    .mine-metrics button,
    .mine-views button,
    .mine-tools .gest-neuf,
    .mine-tools .gest-outil,
    .mine-tools .gest2-menu > summary,
    .mine-pick-toggle,
    .mine-groupe .gest-st-resume { min-height: 44px; }
    .mine-groupe .gest-st-check,
    .mine-groupe .gest-st-actions button { min-width: 44px; min-height: 44px; }
}

@media (max-width: 560px) {
    .tasks-projects-row { padding-left: 12px; padding-right: 12px; }
    .tasks-projects-row .tasks-row-dup { display: none; }
    .mine-title-row p { margin-bottom: 12px; }
    .mine-metrics button { padding: 0 8px; }
    /* (le flex 50% du wrap d'origine est mort avec la bande nowrap du 860) */
    .mine-tools .gest2-menu > summary { max-width: none; }
    .mine-scope-note { display: none; }
    .mine-groupe .gest-tete-barre { display: none; }
    .mine-groupe .gest-tete-pct { display: none; }
    .mine-groupe .gest-c-proj { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ========================================================================
   PROJET — cockpit opérationnel

   La vue de gestion avait toutes les données utiles, mais les laissait se
   perdre entre le titre et les groupes. Cette couche les rapproche du nom du
   tableau, garde les actions à portée pendant le défilement et rend l'état
   de chaque liste perceptible sans transformer l'écran en tableau de bord.
   ======================================================================== */
.gest2-boardhead {
    padding: 16px 18px 0;
    border: 1px solid var(--gs-line, rgba(40,34,24,.1));
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 10px 30px rgba(49,38,20,.045);
}
.gest2-title-row { align-items: center; gap: 22px; }
.gest2-title-main {
    flex: 1 1 320px; min-width: 220px; display: flex; align-items: center; gap: 11px;
}
.gest2-project-icon {
    flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center;
    border: 1px solid var(--gs-line, rgba(40,34,24,.1)); border-radius: 11px;
    background: linear-gradient(145deg, var(--gs-accent-soft, rgba(168,134,63,.13)), var(--gs-panel-2, #f7f1e6));
    color: var(--gs-gold-b, #a1823f); font-size: 19px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.gest2-title-copy { min-width: 0; display: grid; gap: 3px; }
.gest2-title-line { min-width: 0; display: flex; align-items: baseline; gap: 9px; }
.gest2-title-line h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gest2-title-count {
    flex: 0 0 auto; padding: 2px 7px; border-radius: 999px;
    background: var(--gs-panel-2, #f7f1e6); color: var(--gs-ink-faint, #8a8175);
    font-size: 10px; font-weight: 600; white-space: nowrap;
}
.gest2-title-description {
    max-width: 520px; overflow: hidden; color: var(--gs-ink-dim, #655f55);
    font-size: 10.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
}
.gest2-head-actions { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.gest2-health {
    min-height: 48px; display: flex; align-items: center; padding: 4px 5px;
    border: 1px solid var(--gs-line, rgba(40,34,24,.1)); border-radius: 11px;
    background: color-mix(in srgb, var(--gs-panel-2, #f7f1e6) 68%, var(--gs-panel, #fff));
}
.gest2-health-progress,
.gest2-health-stat { display: flex; align-items: center; gap: 8px; }
.gest2-health-progress { padding: 0 11px 0 3px; }
.gest2-health-progress > span:last-child,
.gest2-health-stat > span { display: grid; gap: 1px; }
.gest2-health small {
    color: var(--gs-ink-faint, #8a8175); font-size: 8.5px; font-weight: 600;
    letter-spacing: .045em; line-height: 1.15; text-transform: uppercase; white-space: nowrap;
}
.gest2-health-progress > span:last-child > b,
.gest2-health-stat b {
    color: var(--gs-ink, #282828); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.gest2-progress-ring {
    --gest2-progress: 0;
    position: relative; flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 50%; background: conic-gradient(var(--tst-vert, #19bd72) calc(var(--gest2-progress) * 1%), var(--gs-line, rgba(40,34,24,.12)) 0);
}
.gest2-progress-ring::after {
    content: ''; position: absolute; inset: 4px; border-radius: inherit; background: var(--gs-panel, #fff);
}
.gest2-progress-ring b {
    position: relative; z-index: 1; color: var(--gs-ink, #282828);
    font-size: 9px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.gest2-health-stat {
    min-width: 64px; min-height: 34px; padding: 0 10px;
    border-left: 1px solid var(--gs-line, rgba(40,34,24,.1));
}
.gest2-health-stat > i { width: 7px; height: 7px; border-radius: 50%; background: var(--gs-line-strong, #bbb); }
.gest2-health-stat > i.open { background: var(--tst-bleu, #4d8fff); }
.gest2-health-stat > i.late { background: var(--gs-line-strong, #bbb); }
.gest2-health-stat > i.unassigned { background: var(--gs-line-strong, #bbb); }
.gest2-health-stat.is-alert > i.late { background: var(--tst-rouge, #c94855); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tst-rouge, #c94855) 14%, transparent); }
.gest2-health-stat.is-warning > i.unassigned { background: var(--tst-orange, #e99b38); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tst-orange, #e99b38) 14%, transparent); }
.gest2-health-stat.is-alert b { color: var(--tst-rouge, #c94855); }
.gest2-health-stat.is-warning b { color: color-mix(in srgb, var(--tst-orange, #e99b38) 72%, var(--gs-ink, #282828)); }
.gest2-manage { min-height: 38px; border-radius: 9px; }
.gest2-manage .gicon { width: 15px; height: 15px; }
.gest2-boardhead .gest2-views { margin-top: 10px; padding-left: 53px; gap: 22px; }

/* La barre reste disponible lorsque les longues listes défilent. Le fond est
   opaque : les libellés du tableau ne doivent jamais transparaître dessous. */
.gest2 .gest-outils {
    position: sticky; top: -1px; z-index: 8; min-height: 52px;
    margin: 0 0 16px; padding: 7px 18px;
    border: 1px solid var(--gs-line, rgba(40,34,24,.1)); border-top: 0;
    border-radius: 0 0 14px 14px; background: var(--gs-panel, #fff);
    box-shadow: 0 9px 22px rgba(49,38,20,.065);
}
.gest2 .gest-neuf { min-height: 38px; padding: 0 16px; border-radius: 8px; font-weight: 700; }
.gest2-search-slot { flex: 1 1 260px; max-width: 430px; }
.gest2-search-slot::before { content: none; }
.gest2-search-slot .gest2-search-input { height: 38px; padding-left: 13px; border-radius: 8px; }
.gest2 .gest-outil,
.gest2-menu > summary { min-height: 38px; border-radius: 8px; font-weight: 600; }

/* Des panneaux plus calmes, mais dont les exceptions opérationnelles se voient
   immédiatement. Le texte reste toujours présent pour ne jamais dépendre de
   la couleur seule. */
.gest2 .gest-list-card {
    margin-bottom: 18px; border-radius: 13px;
    box-shadow: 0 8px 26px rgba(49,38,20,.055);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.gest2 .gest-list-card:hover { box-shadow: 0 12px 34px rgba(49,38,20,.085); }
.gest2 .gest-list-card.has-late { border-color: color-mix(in srgb, var(--tst-rouge, #c94855) 30%, var(--gs-line, rgba(40,34,24,.1))); }
.gest2 .gest-list-card.has-pending { border-color: color-mix(in srgb, var(--tst-bleu, #4d8fff) 25%, var(--gs-line, rgba(40,34,24,.1))); }
.gest2 .gest-list-card.is-complete { border-color: color-mix(in srgb, var(--tst-vert, #19bd72) 28%, var(--gs-line, rgba(40,34,24,.1))); }
.gest2 .gest-list-head {
    min-height: 60px; padding: 9px 12px 9px 15px;
    background: var(--gs-panel, #fff);
}
.gest2 .gest-list-health b {
    display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px;
    border-radius: 999px; font-size: 9.5px; font-weight: 700;
}
.gest2 .gest-list-health .late { background: color-mix(in srgb, var(--tst-rouge, #c94855) 10%, transparent); }
.gest2 .gest-list-health .pending { background: color-mix(in srgb, var(--tst-bleu, #4d8fff) 10%, transparent); }
.gest2 .gest-list-progress > i { width: 96px; height: 6px; }
.gest2 .gest-list-section-head {
    min-height: 41px; background: color-mix(in srgb, var(--gs-panel-2, #f7f1e6) 58%, var(--gs-panel, #fff));
}
.gest2 .gest-list-section-head button { opacity: .58; transition: opacity .14s ease, border-color .14s ease, background .14s ease; }
.gest2 .gest-list-section-head:hover button,
.gest2 .gest-list-section-head button:focus-visible { opacity: 1; }
.gest2 .gest-list-section-body .gest-ligne > * { min-height: 46px; }

/* Finition 02/09 (demande Mathieu) — plus d'air, moins d'aplats, des repères
   qu'on attrape sans lire. */
/* Les groupes ne posent plus un grand aplat beige : fond quasi neutre + fin
   liséré de la teinte de liste, l'étiquette porte l'information. */
.gest2 .gest-list-section-head {
    background: color-mix(in srgb, var(--gs-panel-2, #f7f1e6) 30%, var(--gs-panel, #fff));
    border-left: 3px solid color-mix(in srgb, var(--gest-teinte, #a1823f) 55%, transparent);
}
/* Séparation plus franche entre les listes. */
.gest2 .gest-list-card { margin-bottom: 26px; }
/* État de santé en toutes lettres dans l'en-tête de liste. */
.gest2 .gest-list-health .gest-sante { background: transparent; font-size: 11px; gap: 5px; letter-spacing: .01em; }
.gest-sante.ok { color: var(--tst-vert, #19bd72); }
.gest-sante.warn { color: var(--tst-rouge, #c94855); }
.gest-sante.pending { color: var(--tst-bleu, #4d8fff); }
.gest-sante.done { color: var(--tst-vert, #19bd72); opacity: .85; }
/* Rangée de synthèse à points colorés au-dessus des listes. */
.gest-stat { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--gs-ink-dim, #655f55); }
.gest-stat i { font-style: normal; font-size: 9px; line-height: 1; opacity: 1; }
.gest-stat.total i { color: var(--gs-ink-faint, #8a8175); }
.gest-stat.done i { color: var(--tst-vert, #19bd72); }
.gest-stat.late i { color: var(--tst-rouge, #c94855); }
.gest-stat.late { color: var(--tst-rouge, #c94855); }
.gest-stat.pending i { color: var(--tst-bleu, #4d8fff); }
.gest2 .gest-list-summary { gap: 14px; }
/* Nuancier fermé de la liste (menu •••) : 12 pastilles + retour automatique. */
.gest-color-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 10px 8px; max-width: 208px; }
.gest-color-dot {
    width: 22px; height: 22px; padding: 0; border: 2px solid transparent;
    border-radius: 50%; cursor: pointer; box-sizing: border-box;
}
.gest-color-dot:hover { transform: scale(1.12); }
.gest-color-dot.on { border-color: var(--gs-ink, #282828); box-shadow: 0 0 0 2px var(--gs-panel, #fff) inset; }
body[data-gtheme="dark"] .gest-color-dot.on { border-color: #fff; }
.gest-color-auto {
    min-height: 26px; padding: 0 9px; border: 1px dashed var(--gs-line-strong, rgba(168,134,63,.32));
    border-radius: 7px; background: transparent; color: var(--gs-ink-dim, #655f55);
    font: 600 11px/1 Inter, sans-serif; cursor: pointer;
}
.gest-color-auto:hover { background: var(--gs-panel-2, #f7f1e6); }

body[data-gtheme="dark"] .gest2-project-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
body[data-gtheme="dark"] .gest2-health { background: color-mix(in srgb, var(--gs-panel-2, #332f28) 72%, var(--gs-panel, #2b2823)); }

@media (max-width: 1280px) {
    .gest2-title-row { align-items: flex-start; }
    .gest2-head-actions { align-items: stretch; }
    .gest2-health-progress > span:last-child { display: none; }
    .gest2-health-progress { padding-right: 8px; }
    .gest2-health-stat { min-width: 54px; padding-inline: 8px; }
}

@media (max-width: 1040px) {
    .gest2-title-row { flex-wrap: wrap; }
    .gest2-head-actions { width: 100%; }
    .gest2-health { flex: 1 1 auto; }
    .gest2-health-progress > span:last-child { display: grid; }
    .gest2-boardhead .gest2-views { padding-left: 0; }
}

@media (max-width: 900px) {
    .gest2-boardhead { padding: 14px 14px 0; }
    .gest2 .gest-outils { padding: 8px 14px; }
    .gest2-head-actions { flex-wrap: wrap; }
    .gest2-health { order: 2; flex-basis: 100%; overflow-x: auto; }
    .gest2-manage { margin-left: auto; }
}

/* `.tasks-rail--atelier` est déclaré après l'ancien breakpoint mobile et sa
   spécificité lui rendait une largeur de bureau (218 px). Le contenu principal
   finissait comprimé dans les pixels restants. Le sélecteur prend sa ligne,
   puis le tableau retrouve toute la largeur. */
@media (max-width: 860px) {
    .tasks-rail.tasks-rail--atelier { flex: 1 0 100%; width: auto; padding: 8px; }
    .tasks-body > .tasks-list.tasks-list-large { flex: 1 0 100%; width: 100%; }
}

/* ── « J'arrive pas à scroll down sur toutes ces pages » (Mathieu, 02/09) ──
   Sous 860 px, `.tasks-body{flex-wrap:wrap}` empilait sélecteur et liste en
   LIGNES flex — et la hauteur d'une ligne suit son contenu : `.tasks-list`
   (le seul conteneur défilant) n'était plus jamais contraint, son
   overflow-y:auto ne s'armait pas, et tout ce qui dépassait tombait dans le
   `.tasks-view` fixe — inatteignable par aucun geste.
   En colonne, la mécanique de bureau se rejoue à la verticale : sélecteur en
   tête à hauteur de contenu, liste `flex:1 + min-height:0` qui défile. Les
   `flex: 1 0 100%` posés plus haut pour le mode wrap sont neutralisés — en
   colonne, ce 100 % se lirait « toute la HAUTEUR », et la liste pousserait
   le reste hors écran. Le quai n'est pas touché : overlay absolu (≤1400px). */
@media (max-width: 860px) {
    .tasks-body { flex-direction: column; flex-wrap: nowrap; }
    .tasks-body > .tasks-rail,
    .tasks-body > .tasks-rail.tasks-rail--atelier,
    .tasks-body > .tasks-rail.trail-pli { flex: 0 0 auto; }
    .tasks-body > .tasks-list,
    .tasks-body > .tasks-list.tasks-list-large { flex: 1 1 auto; min-height: 0; width: 100%; }
    /* « Pourquoi je vois Tâches › IT ? » — parce que la bande du sélecteur et
       le titre du tableau le disent déjà : trois IT l'un sous l'autre. Le fil
       d'ariane gest2 est un instrument de bureau, il descend de scène ici. */
}

@media (max-width: 620px) {
    .gest2-title-row { position: relative; }
    .gest2-title-main { min-width: 0; }
    .gest2-title-main { padding-right: 46px; }
    .gest2-project-icon { flex-basis: 38px; width: 38px; height: 38px; }
    .gest2-title-line { display: grid; gap: 3px; }
    .gest2-title-description { display: none; }
    .gest2-head-actions { display: block; width: 100%; }
    .gest2-manage { position: absolute; top: 0; right: 0; margin: 0; }
    .gest2-health { padding-inline: 2px; }
    .gest2-health-progress { padding-left: 2px; }
    .gest2-health-progress > span:last-child { display: none; }
    .gest2-health-stat { min-width: 50px; padding-inline: 7px; }
    .gest2-health-stat > i { display: none; }
    .gest2 .gest-outils { top: 0; }
    .gest2 .gest-outils > .gest-neuf { order: 0; flex: 1 1 100%; }
    .gest2 .gest-outils > .gest2-search-slot { order: 1; }
    .gest2 .gest-outils > .gest2-menu { order: 2; }
    .gest2 .gest-list-progress { width: 100%; padding-left: 20px; }
    .gest2 .gest-list-progress > i { flex: 1; width: auto; }
}

/* ========================================================================
   PROJET — direction légère validée

   La hiérarchie reste complète, mais l'écran n'essaie plus de tout montrer
   avec la même force : un en-tête sans carte, une seule ligne de progression,
   une liste ouverte par défaut et les actions rares derrière « ••• ».
   ======================================================================== */
/* Un SEUL fond de page pour les deux vues du module — et c'est le BLANC de
   Gestion qui gagne, pas le beige (précision Mathieu, 02/09 : « c'était
   l'inverse ») : Mes tâches (.tasks-view--mine) s'aligne sur ce panel. */
.tasks-view--gestion,
.tasks-view--gestion .tasks-body,
.tasks-view--gestion .tasks-list.tasks-list-large {
    background: var(--gs-panel, #fff);
}
.tasks-list.tasks-list-large .gest2 {
    width: 100%; padding: 34px clamp(24px, 3vw, 48px) 64px;
}
.gest2-boardhead {
    padding: 0; border: 0; border-radius: 0; box-shadow: none;
    background: transparent;
}
.gest2-title-row { align-items: flex-start; gap: 24px; }
.gest2-title-main { min-width: 0; display: block; }
.gest2-title-copy { display: grid; gap: 8px; }
.gest2-title-copy h2,
.gest2-title-row h2 {
    margin: 0; color: var(--gs-ink, #282828);
    font: 720 32px/1.12 Outfit, Inter, sans-serif; letter-spacing: -.035em;
}
.gest2-title-copy p {
    min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0;
    color: var(--gs-ink-dim, #655f55); font-size: 14.5px; line-height: 1.45;
}
.gest2-title-copy p i { font-style: normal; opacity: .55; }
.gest2-title-copy p span:last-child {
    max-width: 620px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gest2-head-actions {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px; overflow: visible;
}
.gest2-manage {
    width: 40px; min-height: 40px; justify-content: center; padding: 0;
    border-color: var(--gs-line, rgba(40,34,24,.12)); border-radius: 8px;
    background: transparent; color: var(--gs-ink-dim, #655f55);
    font: 750 15px/1 Inter, sans-serif; letter-spacing: .08em;
}
.gest2-manage:hover { background: var(--gs-panel-2, #f7f1e6); }

.gest2-progress-line {
    min-height: 48px; display: flex; align-items: center; gap: 16px;
    margin-top: 24px; color: var(--gs-ink-dim, #655f55); font-size: 14px;
}
.gest2-progress-track {
    flex: 0 1 220px; min-width: 130px; height: 6px; overflow: hidden;
    border-radius: 999px; background: var(--gs-line, rgba(40,34,24,.11));
}
.gest2-progress-track i {
    display: block; height: 100%; border-radius: inherit;
    background: var(--gs-gold-b, #a1823f);
}
.gest2-progress-line strong {
    color: var(--gs-ink-dim, #655f55); font-weight: 550; white-space: nowrap;
}
.gest2-progress-sep { width: 1px; height: 24px; background: var(--gs-line, rgba(40,34,24,.11)); }
.gest2-progress-late { color: var(--tst-rouge, #c94855); font-weight: 680; white-space: nowrap; }
.gest2-risks {
    min-height: 34px; padding: 0; border: 0; border-bottom: 1px solid currentColor;
    background: transparent; color: var(--gs-gold-b, #8f702f);
    font: 650 14px/1 Inter, sans-serif; cursor: pointer;
}
.gest2-risks:hover { color: var(--gs-ink, #282828); }
.gest2-risks.on { color: var(--tst-rouge, #c94855); }

.gest2-boardhead .gest2-views {
    min-height: 50px; gap: 32px; margin: 18px 0 0; padding: 0;
    border-bottom: 1px solid var(--gs-line, rgba(40,34,24,.1));
}
.gest2-boardhead .gest2-views button {
    min-height: 50px; padding: 12px 0 11px; color: var(--gs-ink-dim, #655f55);
    font-size: 15px;
}

.gest2 .gest-outils {
    position: relative; top: auto; z-index: 8; min-height: 72px;
    margin: 0 0 22px; padding: 14px 0 16px; gap: 10px;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.gest2 .gest-neuf {
    min-height: 44px; padding: 0 18px; border-radius: 8px;
    font-size: 14px; font-weight: 700; box-shadow: none;
}
.gest2-search-slot { flex: 1 1 360px; max-width: 440px; }
.gest2-search-slot .gest2-search-input {
    height: 44px; padding-left: 42px; border-radius: 8px;
    color: var(--gs-ink, #282828); font-size: 14px;
}
.gest2-search-slot::before { content: '⌕'; left: 15px; font-size: 17px; }
.gest2 .gest-outil,
.gest2-menu > summary {
    min-height: 44px; padding: 0 14px; border-radius: 8px;
    color: var(--gs-ink-dim, #655f55); font-size: 14px; font-weight: 520;
}
.gest2-more > summary { width: 44px; padding: 0; }
.gest2-menu-pop { margin-top: 6px; border-radius: 9px; box-shadow: 0 14px 36px rgba(40,34,24,.12); }

.gest2 .gest-list-summary {
    min-height: 38px; margin: 0 0 12px; padding: 0;
    color: var(--gs-ink-faint, #7c756a); font-size: 13px;
}
.gest2 .gest-list-summary > button {
    min-height: 36px; padding: 0 12px; border-color: var(--gs-line, rgba(40,34,24,.12));
    background: transparent; color: var(--gs-gold-b, #8f702f); font-size: 13px;
}
.gest2 .gest-list-card,
.gest2 .gest-list-card:hover,
.gest2 .gest-list-card.has-late,
.gest2 .gest-list-card.has-pending,
.gest2 .gest-list-card.is-complete {
    margin-bottom: 18px; overflow: visible; border: 1px solid var(--gs-line, rgba(40,34,24,.11));
    border-radius: 10px; background: var(--gs-panel, #fff); box-shadow: none;
    transform: none;
}
.gest2 .gest-list-head {
    min-height: 64px; padding: 0 16px; gap: 16px; border-left: 0;
    border-radius: 10px 10px 0 0; background: var(--gs-panel, #fff);
}
.gest2 .gest-list-card.replie .gest-list-head { border-radius: 10px; }
.gest2 .gest-list-main {
    /* flex:1 : le NOM absorbe l'espace libre, donc santé + compteurs +
       progression se calent au même bord droit d'une carte à l'autre —
       « les chiffres sont pas bien alignés » (capture 02/09). */
    min-width: 230px; flex: 1 1 auto; gap: 10px; color: var(--gs-ink, #282828);
    font: 680 16px/1.2 Outfit, Inter, sans-serif;
}
.gest2 .gest-list-health { flex: 0 0 auto; }
.gest2 .gest-list-progress small { text-align: right; font-variant-numeric: tabular-nums; }
.gest2 .gest-list-chevron { width: 16px; font-size: 15px; }
.gest2 .gest-list-main .gest-pastille { width: 4px; height: 22px; }
/* « Le nombre de tâches est pas centré dans sa case » — capture du 13/09, sur
   l'en-tête de liste d'un espace. Il ne l'était pas : mesuré au navigateur,
   1 px au-dessus du chiffre et 10 px en dessous, dans une pastille de 24.

   La cause tient à une ligne : on fixe une HAUTEUR sans dire où va le contenu.
   La pastille est un élément de flex (.gest-list-main et .gest-tete-id sont
   tous deux en display:flex), donc elle se comporte en bloc et `height: 24px`
   s'applique. Le texte, lui, ne fait qu'une ligne de 14,4 px posée en HAUT de
   la boîte — les 9,6 px restants tombent tous en dessous. `align-items` du
   parent centre la PASTILLE dans la rangée, jamais le chiffre dans la
   pastille : ce sont deux boîtes différentes.

   D'où le trio habituel de la maison, déjà écrit pour .tasks-chip-count :
   inline-flex + align-items + justify-content. Le second centre aussi le
   chiffre horizontalement, ce que `min-width: 24px` laissait à gauche sur les
   comptes à un chiffre.

   Vaut pour les trois endroits qui affichent cette pastille (en-tête de liste,
   en-tête de groupe de Gestion, en-tête de « Mon travail ») : même règle, même
   défaut, une seule correction. */
.gest2 .gest-compte {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 7px; font-size: 12px;
}
.gest2 .gest-list-health { gap: 8px; font-size: 12px; }
.gest2 .gest-list-health b {
    min-height: 0; padding: 0; border-radius: 0; background: transparent !important;
    font-size: 12px; font-weight: 650;
}
.gest2 .gest-list-progress { gap: 10px; }
.gest2 .gest-list-progress > i { width: 116px; height: 6px; }
.gest2 .gest-list-progress small { min-width: 72px; font-size: 12px; }

.gest-list-menu { position: relative; margin-left: 2px; }
.gest-list-menu > summary {
    width: 38px; min-height: 38px; display: grid; place-items: center;
    border: 0; border-radius: 8px; color: var(--gs-ink-dim, #655f55);
    font-weight: 800; letter-spacing: .1em; cursor: pointer; list-style: none;
}
.gest-list-menu > summary::-webkit-details-marker { display: none; }
.gest-list-menu > summary:hover,
.gest-list-menu[open] > summary { background: var(--gs-panel-2, #f7f1e6); }
.gest2 .gest-project-open { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.gest2 .gest-project-open:hover { color: var(--gs-accent); }
.gest2 .gest-project-open .gicon { flex: 0 0 15px; width: 15px; height: 15px; opacity: .6; }
.gest2 .gest-pick-check { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 6px; border: 0; border-radius: 4px; background: transparent; color: var(--gs-ink-dim); cursor: pointer; }
.gest2 .gest-pick-check[aria-pressed="true"] { color: var(--gs-accent); }
.gest2 .gest-ligne.mine-picking { cursor: pointer; user-select: none; }
body.shell-on #tasksView .gest2 .gest-ligne.mine-picked,
body.shell-on #tasksView .gest2 .gest-ligne.mine-picked > * { background: var(--gs-accent-soft); }
.gest2 .gest-section-menu { cursor: default; flex-shrink: 0; }
.gest2 .gest-section-menu :is([data-ren-section],[data-move-section],[data-del-section]) { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 40px; height: auto; padding: 10px; border: 0; opacity: 1; font: 500 13px/1.35 Inter, sans-serif; white-space: normal; text-align: left; }
.gest2 .gest-section-menu .gicon { width: 16px; height: 16px; flex-shrink: 0; }
.gest2 .gest-list-section-head .tasks-rensection-inline { display: flex; align-items: center; gap: 8px; width: 100%; }
.gest2 .gest-list-section-head .tasks-rensection-inline input { width: 0; flex: 1; min-width: 0; font-size: 16px; }
.gest2 .gest-list-section-head .tasks-rensection-inline button { margin: 0; min-height: 40px; opacity: 1; }
.gest-list-menu-pop {
    position: absolute; top: calc(100% + 5px); right: 0; z-index: 14;
    width: 210px; display: grid; gap: 3px; padding: 6px;
    border: 1px solid var(--gs-line, rgba(40,34,24,.12)); border-radius: 9px;
    background: var(--gs-panel, #fff); box-shadow: 0 14px 36px rgba(40,34,24,.13);
}
/* Les pastilles du nuancier sont EXCLUES : cette règle générique (0,1,1) est
   plus spécifique que .tstatut-* (0,1,0) — sans l'exclusion, son
   `background: transparent` rendait les 12 pastilles invisibles (capture du
   02/09 : « j'arrive toujours pas à changer les couleurs »). */
.gest-list-menu-pop button:not(.gest-color-dot):not(.gest-color-auto) {
    min-height: 38px; padding: 0 10px; border: 0; border-radius: 6px;
    background: transparent; color: var(--gs-ink, #282828);
    font: 520 13px/1.2 Inter, sans-serif; text-align: left; cursor: pointer;
}
.gest-list-menu-pop button:not(.gest-color-dot):not(.gest-color-auto):hover { background: var(--gs-panel-2, #f7f1e6); }

/* Ranger les listes depuis l'Atelier — ticket YK7nZEC6I9vuw4z2Qvop.
   La poignée se cale AVANT le titre, collée à lui : la gouttière de 16 px de
   l'en-tête la ferait flotter au milieu de nulle part, loin de la liste
   qu'elle déplace. Discrète au repos, franche au survol de la carte — même
   contrat que la poignée de la vue Listes, dont elle reprend la classe
   `.tasks-grip` et donc tout l'habillage, thème sombre compris. */
.gest2 .gest-list-grip { flex: 0 0 auto; margin-right: -10px; opacity: .55; }
.gest2 .gest-list-head:hover .gest-list-grip,
.gest2 .gest-list-grip:focus-visible { opacity: 1; }
/* Le glisser-déposer HTML5 n'existe pas au doigt : sur pointeur grossier la
   poignée ne serait qu'un ornement inerte. Les deux flèches du menu •••, elles,
   marchent partout — c'est le chemin qu'on laisse. */
@media (pointer: coarse) { .gest2 .gest-list-grip { display: none; } }

/* Ranger les groupes de tâches (les journées) — ticket x3vPdFVU8zckBIWBJgXO.
   Même contrat que la poignée de liste, un étage plus bas. Les flèches du
   menu ••• héritent des boutons bordés de l'en-tête de groupe (et du
   `margin-left: auto` du premier bouton) : on les ramène au gabarit du menu. */
.gest2 .gest-section-grip { flex: 0 0 auto; margin-right: -4px; opacity: .55; }
.gest2 .gest-list-section-head:hover .gest-section-grip,
.gest2 .gest-section-grip:focus-visible { opacity: 1; }
@media (pointer: coarse) { .gest2 .gest-section-grip { display: none; } }
.gest2 .gest-section-menu .gest-lbl { padding: 6px 10px 2px; font-size: 11px; }
.gest2 .gest-section-menu .gest-move-row button { margin: 0; min-height: 38px; border: 0; opacity: 1; }

.gest2 .gest-move-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.gest2 .gest-list-menu-pop .gest-move-row button {
    display: flex; align-items: center; justify-content: flex-start; gap: 5px; padding: 0 8px;
}
.gest2 .gest-list-menu-pop .gest-move-row button[disabled] { opacity: .38; cursor: default; }
.gest2 .gest-list-menu-pop .gest-move-row button[disabled]:hover { background: transparent; }

/* Sortir la liste du tableau — ticket OtoWOKJGhKE56ckmLdlw. Il suit les deux
   flèches parce qu'il complète la même phrase : « Déplacer la liste » — d'un
   rang, ou d'un tableau. Icône + libellé alignés comme les flèches au-dessus,
   et le texte se tronque proprement : « Déplacer vers un autre tableau… » tient
   mal dans 210 px en anglais comme en espagnol.
   Même raison qu'à la ligne du 🗑️ : le sélecteur nomme le `button`, sinon la
   règle générique du menu (0-3-1) l'emporte sur un 0-3-0. */
.gest2 .gest-list-menu-pop button.gest-list-elsewhere {
    display: flex; align-items: center; gap: 8px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gest2 .gest-list-menu-pop button.gest-list-elsewhere .gicon { width: 16px; height: 16px; flex-shrink: 0; }

/* Retirer la liste — ticket mBV6V83l3DDAIhthhHo3. Dernier du menu et détaché
   par un filet : au-dessus de lui, cinq gestes réversibles (créer un groupe,
   renommer, monter, descendre, recolorier). Le rouge n'arrive qu'au survol,
   pour ne pas crier depuis un menu qu'on ouvre le plus souvent pour changer
   une couleur — même contrat que le 🗑️ de la vue Listes (.tlh-del).

   Le sélecteur porte `button.gest-list-del` et non `.gest-list-del` seul : la
   règle générique du menu (`button:not(.gest-color-dot):not(.gest-color-auto)`,
   spécificité 0-3-1) pose `border: 0` et l'emporterait sur un 0-3-0 — le filet
   disparaîtrait sans rien dire. À spécificité égale, c'est l'ordre du fichier
   qui tranche, et cette règle vient après. */
.gest2 .gest-list-menu-pop button.gest-list-del {
    display: flex; align-items: center; gap: 8px;
    margin-top: 3px; padding-top: 3px;
    border-top: 1px solid var(--gs-line, rgba(40,34,24,.12));
    border-radius: 0 0 6px 6px; color: #a33;
}
.gest2 .gest-list-menu-pop button.gest-list-del .gicon { width: 16px; height: 16px; flex-shrink: 0; }
.gest2 .gest-list-menu-pop button.gest-list-del:hover { background: rgba(197,58,58,.14); }
body[data-gtheme="dark"] .gest2 .gest-list-menu-pop button.gest-list-del { color: #e79a9a; }

.gest2 .gest-list-body {
    overflow-x: auto; border-radius: 0 0 10px 10px;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--gs-gold-b, #a1823f) var(--gs-panel-2, #f7f1e6);
}
.gest2 .gest-list-body::-webkit-scrollbar { height: 10px; }
.gest2 .gest-list-body::-webkit-scrollbar-track { background: var(--gs-panel-2, #f7f1e6); }
.gest2 .gest-list-body::-webkit-scrollbar-thumb {
    border: 2px solid var(--gs-panel-2, #f7f1e6); border-radius: 999px;
    background: var(--gs-gold-b, #a1823f);
}
.gest2 .gest-list-body > .gest-entete {
    min-width: max-content; border-top: 1px solid var(--gs-line, rgba(40,34,24,.09));
}
.gest2 .gest-entete { background: var(--gs-panel, #fff); }
.gest2 .gest-h {
    min-height: 42px; display: flex; align-items: center; padding: 0 12px;
    color: var(--gs-ink-dim, #655f55); font-size: 12px;
    font-weight: 600; letter-spacing: 0; text-transform: none;
}
.gest2 .gest-list-section { border-top-color: var(--gs-line, rgba(40,34,24,.08)); }
.gest2 .gest-list-section-head {
    min-height: 50px; padding: 0 16px 0 20px; gap: 10px;
    background: color-mix(in srgb, var(--gs-panel-2, #f7f1e6) 24%, var(--gs-panel, #fff));
    color: var(--gs-ink-dim, #655f55);
}
.gest2 .gest-list-section-head strong {
    color: var(--gs-ink, #282828); font: 620 14px/1.25 Inter, sans-serif;
    letter-spacing: 0; text-transform: none;
}
.gest2 .gest-list-section-head > span:not(.gest-list-chevron):not(.gest-list-mini) { font-size: 12px; }
.gest2 .gest-list-mini { width: 72px; height: 4px; }
.gest2 .gest-list-section-head small { font-size: 11px; }
/* Le 🗑️ se découvre EXACTEMENT comme le ➕ (ticket NfziUiuZmIvG4kOEh4vh) :
   même taille, même apparition au survol de la rangée. Deux boutons voisins
   qui se révèlent différemment se liraient comme deux natures de geste. */
.gest2 .gest-list-section-head .gest-list-section-add,
.gest2 .gest-list-section-head .gest-list-section-del {
    width: 34px; min-height: 34px; padding: 0; opacity: 0;
    font-size: 17px; transition: opacity .14s ease, background .14s ease;
}
.gest2 .gest-list-section-head:hover .gest-list-section-add,
.gest2 .gest-list-section-head .gest-list-section-add:focus-visible,
.gest2 .gest-list-section-head:hover .gest-list-section-del,
.gest2 .gest-list-section-head .gest-list-section-del:focus-visible { opacity: 1; }
.gest2 .gest-list-section-head .gest-list-section-del .gicon { width: 15px; height: 15px; }
.gest2 .gest-ligne { color: var(--gs-ink, #282828); font-size: 14px; background: var(--gs-panel, #fff); }
.gest2 .gest-ligne > *,
.gest2 .gest-list-section-body .gest-ligne > * { min-height: 52px; padding-left: 12px; padding-right: 12px; }
/* La regle du dessus ecrasait la reserve posee plus haut (~l. 7909) sur la
   cellule du titre — meme specificite, declaree apres. Le crayon et la bulle
   de discussion, en absolu a droite, se retrouvaient PAR-DESSUS la fin du
   titre (constate le 11/09 dans « Mes taches », meme defaut en Gestion). On
   redonne la reserve, avec un selecteur plus precis.
   68 → 97 px le 21/09 : la poubelle est un troisieme bouton en absolu, et
   oublier CETTE regle-ci aurait ramene tel quel le defaut du 11/09. */
.gest2 .gest-ligne > .gest-c-titre { padding-right: 97px; }
.gest2 .gest-ligne:hover > * {
    background: color-mix(in srgb, var(--gs-panel-2, #f7f1e6) 38%, var(--gs-panel, #fff));
}
.gest2 .gest-titre-txt { font-weight: 540; }
.gest2 .gest-c-date,
.gest2 .gest-c-proj { font-size: 13px; }
.gest2 .gest-c-statut .tstatut,
.gest2 .gest-c-prio .tasks-meta-chip { font-size: 12px; }
/* Deux gestes, pas un — ticket J9Q7FNsGdNgaO04VfXob : « Ajouter une tâche » et
   « Groupe de tâches » se posent côte à côte au pied de la liste, comme dans
   l'en-tête de la vue Listes depuis le 28/08. `gap` plutôt qu'une marge sur le
   second : le pied n'a pas à savoir combien de boutons il porte. */
.gest-list-footer {
    min-width: max-content; min-height: 48px; display: flex; align-items: center; gap: 4px;
    padding: 0 18px; border-top: 1px solid var(--gs-line, rgba(40,34,24,.09));
}
.gest-list-footer button {
    min-height: 36px; padding: 0 8px; border: 0; border-radius: 6px;
    background: transparent; color: var(--gs-gold-b, #8f702f);
    font: 600 13.5px/1 Inter, sans-serif; cursor: pointer;
}
.gest-list-footer button:hover { background: var(--gs-panel-2, #f7f1e6); }
/* Le mini-formulaire de création s'ouvre au BAS DU CORPS de la carte, après le
   pied : c'est là que la section va naître (order = groups.length). Le corps
   défile horizontalement (`overflow-x:auto`) et ses rangées font `max-content` :
   sans `position:sticky`, le champ partirait se cacher hors écran à droite sur
   une liste large. On lui donne aussi la marge que les rangées n'ont pas. */
.gest2 .gest-list-body > .tasks-addsection-inline {
    position: sticky; left: 0; margin: 8px 18px 14px; max-width: 520px;
}
.gest2 .gest-list-empty { min-height: 120px; font-size: 14px; }
.gest2 .gest-list-empty strong { font-size: 15px; }
.gest2 .gest-list-empty span { font-size: 13px; }
/* Liste ou groupe tout terminé, gardé à l'écran (ticket gN7yDXDg3917ZOjZMly3) :
   une ligne discrète, pas le grand pavé « Liste vide ». `sticky` pour la même
   raison que le mini-formulaire au-dessus : le corps défile en largeur. */
.gest2 .gest-list-empty.gest-faites-masquees {
    position: sticky; left: 0; min-height: 0; padding: 12px 18px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; text-align: left;
}
.gest2 .gest-faites-masquees .tasks-empty-btn { margin: 0; }

/* Le rail reste discret, mais ses libellés ne sont plus miniatures. */
.tasks-rail.tasks-rail--atelier { flex-basis: 220px; width: 220px; padding: 22px 14px 32px; }
.tasks-rail--atelier .trail-h-lbl,
.tasks-rail--atelier .trail-sec { font-size: 10.5px; }
.tasks-rail--atelier .trail-esp { height: 46px; font-size: 14px; }
.tasks-rail--atelier .trail-node-atelier,
.tasks-rail--atelier .trail-new { min-height: 40px; font-size: 13.5px; }

/* En sombre aussi, un seul fond : le panel de Gestion, pour les DEUX vues
   (Mes tâches s'aligne — précision Mathieu 02/09, « c'était l'inverse »). */
body[data-gtheme="dark"] .tasks-view--gestion,
body[data-gtheme="dark"] .tasks-view--gestion .tasks-body,
body[data-gtheme="dark"] .tasks-view--gestion .tasks-list.tasks-list-large,
body[data-gtheme="dark"] .tasks-view--mine,
body[data-gtheme="dark"] .tasks-view--mine .tasks-list.tasks-list-large,
body[data-gtheme="dark"] .gest2-boardhead,
body[data-gtheme="dark"] .gest2 .gest-list-head,
body[data-gtheme="dark"] .gest2 .gest-entete,
body[data-gtheme="dark"] .gest2 .gest-ligne {
    background: var(--gs-panel, #2b2823);
}

@media (max-width: 980px) {
    .tasks-list.tasks-list-large .gest2 { padding: 26px 22px 52px; }
    .gest2-title-row { align-items: flex-start; }
    .gest2-progress-line { flex-wrap: wrap; gap: 10px 14px; }
    .gest2-progress-track { flex-basis: 180px; }
    .gest2 .gest-list-head { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
    .gest2 .gest-list-main { flex: 1 1 280px; }
    .gest2 .gest-list-health { order: 3; flex: 1 1 100%; padding-left: 26px; }
}

@media (max-width: 860px) {
    .tasks-rail.tasks-rail--atelier { flex: 1 0 100%; width: auto; padding: 10px 12px; }
    .tasks-body > .tasks-list.tasks-list-large { flex: 1 0 100%; width: 100%; }
}

@media (max-width: 680px) {
    .tasks-list.tasks-list-large .gest2 { padding: 22px 16px 88px; }
    .gest2-title-copy h2,
    .gest2-title-row h2 { font-size: 27px; }
    .gest2-title-copy p { font-size: 13.5px; }
    .gest2-title-copy p span:last-child,
    .gest2-title-copy p i { display: none; }
    .gest2-head-actions { gap: 6px; }
    .gest2-progress-line { margin-top: 18px; }
    .gest2-progress-track { flex: 1 1 100%; }
    .gest2-progress-sep { display: none; }
    .gest2-boardhead .gest2-views { gap: 24px; overflow-x: auto; }
    .gest2 .gest-outils { align-items: stretch; }
    .gest2 .gest-outils > .gest-neuf { order: 0; flex: 1 1 100%; }
    .gest2 .gest-outils > .gest2-search-slot { order: 1; flex: 1 1 100%; max-width: none; }
    .gest2 .gest-outils > .gest2-menu { order: 2; }
    .gest2 .gest-list-main { min-width: 0; flex-basis: 220px; font-size: 15px; }
    .gest2 .gest-list-progress { width: auto; margin-left: 26px; padding-left: 0; }
    .gest2 .gest-list-progress > i { width: 90px; }
    .gest2 .gest-list-progress small { min-width: 64px; }
    /* Au doigt il n'y a pas de survol : les deux boutons restent posés. */
    .gest2 .gest-list-section-head .gest-list-section-add,
    .gest2 .gest-list-section-head .gest-list-section-del { opacity: 1; }
}

/* ═══════════ PROJET : LARGEUR UTILE, PAS LARGEUR DE FENÊTRE (04/09) ═══════════
   À 100 % de zoom, shell (232) + rail Projet (220) + marges pouvaient laisser
   moins de 800 px au tableau dans une fenêtre pourtant large. Les colonnes
   gardaient leur gabarit de grand écran et la droite devenait inaccessible.

   1. Le rail devient un TIROIR entre 861 et 1 600 px. Fermé, il ne coûte que
      52 px ; ouvert, il se superpose sans recomprimer le tableau.
   2. Les colonnes répondent à la largeur de #tasksList. Le texte reste à 14 px :
      on reprend de l'espace au chrome et aux pistes, pas à la lisibilité.
   3. Si le contenu central descend sous 700 px, la rangée devient une fiche
      structurée. Plus aucune colonne essentielle n'attend hors écran. */
@media (min-width: 861px) and (max-width: 1600px) {
    .tasks-view--gestion .tasks-body { padding-left: 52px; }
    .tasks-view--gestion .tasks-body > .tasks-rail.tasks-rail--atelier {
        position: absolute; inset: 0 auto 0 0; z-index: 24;
        width: 220px; max-height: none; flex-basis: 220px;
        box-shadow: 12px 0 32px rgba(40, 34, 24, .1);
        transition: width .16s ease, box-shadow .16s ease;
    }
    .tasks-view--gestion .tasks-body > .tasks-rail.tasks-rail--atelier.trail-pli {
        width: 52px; flex-basis: 52px; padding: 10px 6px;
        box-shadow: none;
    }
    .tasks-view--gestion .tasks-rail--atelier.trail-pli .trail-deplier {
        width: 40px; height: 40px; font-size: 16px;
        border-color: var(--gs-line, rgba(40,34,24,.12));
        background: var(--gs-panel, #fff);
    }
}

@container tasks-main (max-width: 1050px) {
    .tasks-view--gestion .gest2 {
        --gest-title-min: 240px;
        --gest-title-max: 1fr;
        --gest-prio-w: 88px;
        --gest-people-w: 106px;
        --gest-status-w: 132px;
        --gest-date-w: 108px;
        --gest-project-w: 140px;
        --gest-count-w: 88px;
        --gest-day-w: 108px;
        --gest-author-w: 132px;
        padding-inline: clamp(16px, 2.2cqi, 28px);
    }
    .tasks-view--gestion .gest2 .gest-list-body > .gest-entete,
    .tasks-view--gestion .gest2 .gest-list-footer { min-width: 0; }
    .tasks-view--gestion .gest2 .gest-h,
    .tasks-view--gestion .gest2 .gest-ligne > *,
    .tasks-view--gestion .gest2 .gest-list-section-body .gest-ligne > * {
        padding-left: 9px; padding-right: 9px;
    }
}

@container tasks-main (max-width: 700px) {
    .tasks-view--gestion .gest2 .gest-list-body { overflow-x: hidden; }
    .tasks-view--gestion .gest2 .gest-entete { display: none; }
    .tasks-view--gestion .gest2 .gest-ligne {
        min-width: 0;
        grid-template-columns: 6px minmax(0, 1fr) auto auto;
    }
    .tasks-view--gestion .gest2 .gest-ligne > * {
        display: none; min-height: 30px; border-right: 0;
    }
    .tasks-view--gestion .gest2 .gest-ligne > .gest-c-bar {
        display: block; grid-row: 1 / 4; grid-column: 1; padding: 0;
    }
    .tasks-view--gestion .gest2 .gest-ligne > .gest-c-titre {
        display: block; grid-row: 1; grid-column: 2 / 4;
        min-height: 42px; padding-top: 11px; font-weight: 650;
    }
    .tasks-view--gestion .gest2 .gest-ligne > .gest-c-qui {
        display: flex; grid-row: 1 / 4; grid-column: 4;
        justify-content: flex-end; padding-right: 10px;
    }
    .tasks-view--gestion .gest2 .gest-ligne > .gest-c-statut {
        display: flex; grid-row: 2; grid-column: 2;
        justify-content: flex-start; padding: 0 4px 4px 9px;
    }
    .tasks-view--gestion .gest2 .gest-ligne > .gest-c-date {
        display: flex; grid-row: 2; grid-column: 3;
        padding: 0 8px 4px 4px; font-size: 12px;
    }
    .tasks-view--gestion .gest2 .gest-ligne > .gest-c-prio:not(:empty) {
        display: flex; grid-row: 3; grid-column: 2 / 4;
        padding: 0 8px 8px 9px;
    }
    .tasks-view--gestion .gest2 .gest-pied,
    .tasks-view--gestion .gest-list-footer { display: none; }
    .tasks-view--gestion .gest2 .gest-ligne .tstatut,
    .tasks-view--gestion .gest2 .gest-ligne .tasks-meta-chip {
        width: auto; min-height: 0; padding: 3px 9px; border-radius: 999px;
    }
}

/* ═══════════ CHAT MOBILE : largeur des bulles (T. Matteucci, 02/09) ═══════════
   Constat : sur téléphone la conversation tenait dans une colonne de 163 px sur
   un écran de 412 px — 40 %. Un message de 3 lignes en prenait 12, avec 55 % de
   l'écran vide à côté. Mesuré au navigateur, la place partait en quatre :

       412 − 40 (padding du fil) − 46 (avatar + gap) = 326 px pour le corps
       × 80 %  (.chat-msg-line, ligne 11400)          = 261 px pour la ligne
       − 43 px (heure groupée) − 40 px (⋯ tactile) − gaps = 163 px de bulle

   Les deux derniers postes n'existent que sur les messages GROUPÉS : d'où
   l'effet d'escalier des captures, où la tête de groupe (261 px) est 98 px plus
   large que les messages qui la suivent. Les trois corrections, dans l'ordre :

   1. le plafond passe de la LIGNE à la BULLE, avec une gouttière fixe → une
      seule largeur maximale, que le message soit groupé ou non (écart : 0 px) ;
   2. l'heure et le ⋯ s'empilent au lieu de se suivre : 97 px de gouttière → 44 ;
   3. le padding latéral du fil passe de 20 px à 10 px.

   Résultat : 296 px sur 412 (72 %), 244 px sur 360 (68 %) — la bulle double, et
   l'asymétrie gauche/droite qui dit qui parle reste lisible (60 px de retrait).
   Régler le curseur = la seule valeur `calc(100% - 50px)` ci-dessous : plus le
   nombre est grand, plus la bulle est étroite (74px ≈ 66 % de l'écran).

   width:100% et non max-width : la ligne vit dans une colonne en shrink-to-fit,
   où un % sur la bulle devient cyclique — le navigateur rabat alors la bulle sur
   son mot le plus long et « Oui » tombe à la verticale, une lettre par ligne.
   Même piège que le cap des images, cf. test/chat-image-overflow.test.js. */
.chat-msg-meta{display:contents}

@media (max-width: 640px) {
    .chat-messages{padding:16px 10px}

    .chat-msg-line{width:100%;max-width:100%}
    .chat-msg-bubble{max-width:calc(100% - 50px)}

    /* Heure sous le ⋯ (column-reverse) : garde l'ordre visuel d'avant, où le ⋯
       coiffait l'heure, mais sur une seule colonne au lieu de deux. */
    .chat-msg-meta{display:flex;flex-direction:column-reverse;align-items:center;
        justify-content:flex-end;flex-shrink:0}
    .chat-msg-time-grouped{margin-left:0;align-self:center}
}

/* =====================================================================
   Toasts entrants — variante A (carte flottante) validée le 02/09.
   Tokens --gs-* seulement : le sombre bascule sans bloc dédié.
   --gs-panel et non --gs-canvas sur .tent-repondre : ce dernier n'existe
   pas dans :root, ce qui rendait le texte illisible en thème clair.
   z-index 100005 (demande Mathieu 02/09) : TOUJOURS au premier plan —
   au-dessus des iframes d'apps et des modales (max 100000), mais SOUS le
   verrou biométrique #gAppLock (100010), qui doit masquer l'écran entier.
   ===================================================================== */
.tent-zone-haut { position: fixed; top: 0; right: 18px; z-index: 100005; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.tent-zone-bas { position: fixed; bottom: 18px; right: 18px; z-index: 100005; pointer-events: none; }
.tent-toast, .tent-volet {
    pointer-events: auto; position: relative; overflow: hidden;
    background: var(--gs-panel); border: 1px solid var(--gs-line-strong);
    color: var(--gs-ink); border-radius: 13px;
    box-shadow: 0 10px 30px rgba(40, 34, 24, .16), 0 2px 8px rgba(40, 34, 24, .10);
    opacity: 0; transition: transform .4s cubic-bezier(.21, 1.02, .55, 1), opacity .3s;
}
body[data-gtheme="dark"] .tent-toast,
body[data-gtheme="dark"] .tent-volet { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3); }
.tent-toast { width: 330px; max-width: calc(100vw - 36px); display: flex; gap: 11px; padding: 12px 34px 12px 14px; transform: translateY(calc(-100% - 20px)); }
.tent-toast.visible { transform: translateY(14px); opacity: 1; }
.tent-toast.sortie { transform: translateY(calc(-100% - 20px)); opacity: 0; }
.tent-toast.tent-cliquable { cursor: pointer; }
.tent-ico { flex: 0 0 34px; height: 34px; border-radius: 9px; background: var(--gs-accent-soft); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.tent-corps { min-width: 0; flex: 1; }
.tent-titre { font-size: 13px; font-weight: 700; line-height: 1.3; margin-bottom: 2px; }
.tent-texte { font-size: 12.5px; color: var(--gs-ink-dim); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Volet grossi (390 → 460 px) + vraie photo — retouche Mathieu 02/09. */
.tent-volet { width: 460px; max-width: calc(100vw - 36px); padding: 20px 44px 18px 20px; transform: translateY(calc(100% + 30px)); }
.tent-volet.visible { transform: translateY(0); opacity: 1; }
.tent-volet.sortie { transform: translateY(calc(100% + 30px)); opacity: 0; }
.tent-vhaut { display: flex; gap: 15px; align-items: center; margin-bottom: 14px; }
.tent-avatar { flex: 0 0 58px; height: 58px; width: 58px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, var(--gs-gold-a), var(--gs-gold-b)); color: var(--gs-panel); font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.tent-vtitre { font-size: 16.5px; font-weight: 750; line-height: 1.35; }
.tent-vapercu { font-size: 14px; color: var(--gs-ink-dim); background: var(--gs-panel-2); border-radius: 10px; padding: 11px 14px; line-height: 1.45; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tent-vactions { display: flex; gap: 10px; }
.tent-repondre { flex: 1; border: 0; border-radius: 10px; background: var(--gs-ink); color: var(--gs-panel); font-size: 15px; font-weight: 700; padding: 12px 16px; cursor: pointer; }
body[data-gtheme="dark"] .tent-repondre { background: var(--gs-gold-a); color: var(--gs-panel); }
.tent-plustard { border: 1px solid var(--gs-line-strong); border-radius: 10px; background: none; color: var(--gs-ink-dim); font-size: 14px; font-weight: 600; padding: 12px 16px; cursor: pointer; }
.tent-plustard:hover { background: var(--gs-accent-soft); color: var(--gs-ink); }
.tent-fermer { position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; border: 0; border-radius: 7px; background: none; color: var(--gs-ink-faint); font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tent-fermer:hover { background: var(--gs-accent-soft); color: var(--gs-ink); }
.tent-sablier { position: absolute; left: 0; bottom: 0; height: 2.5px; background: var(--gs-gold-a); width: 100%; transform-origin: left; animation: tent-sablier linear forwards; }
@keyframes tent-sablier { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.tent-toast:hover .tent-sablier,
.tent-volet:hover .tent-sablier { animation-play-state: paused; }
/* Mention : la carte N'A PAS de sablier, elle attend qu'on la voie (ticket
   UnQbz1suDgSEKXQ8HbHE). Un liseré doré à gauche le dit — sans lui, une carte
   qui ne s'en va plus se lit comme une carte bloquée. */
.tent-volet.tent-persistant { border-left: 3px solid var(--gs-gold-a); }
@media (max-width: 620px) {
    .tent-zone-haut { right: 10px; }
    .tent-zone-bas { right: 10px; bottom: 10px; left: 10px; }
    .tent-volet { width: 100%; }
}
/* fin toasts entrants */

/* Fil unique Détails+Discussion (02/09) : la discussion suit la fiche dans le
   même défilement — séparateur net, ancre de défilement. */
.tasks-detail-discussion { margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--gs-line, #e8e2d6); scroll-margin-top: 52px; }

/* Quai mobile M2 (02/09) — feuillet plein écran : ‹ à gauche, ni ⤢ ni ✕,
   deux grandes actions au pouce, la fiche se tait quand une section est vide.
   Réf maquette : docs/maquettes-mobile-0902/m2-fiche-tache.svg */
@media (max-width: 860px) {
    body.shell-on .tasks-dock { position: fixed; left: 0; right: 0; width: auto; top: calc(47px + env(safe-area-inset-top)); bottom: calc(var(--gs-tabbar-h) + env(safe-area-inset-bottom)); z-index: 118; border-left: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -12px 40px rgba(30, 25, 15, .18); }
    .dock-back { display: flex; }
    .dock-back { font-size: 22px; width: 34px; height: 34px; }
    /* Sorties du feuillet journée : au pouce, pas à la souris. */
    .gest-jour-x { width: 40px; height: 40px; }
    .dock-btn.dock-jour { height: 40px; padding: 0 12px; font-size: 14px; }
    [data-dock-full],
    .dock-head > [data-dock-close]:not(.dock-back) { display: none; }
    .tasks-detail-quick { display: grid; grid-template-columns: 1.2fr 1fr; gap: 9px; margin: 4px 0 10px; }
    .tasks-detail-quick .btn { min-height: 46px; font-size: 15px; font-weight: 700; border-radius: 12px; }
    /* Allègement M2 : chaque ligne ci-dessous a une raison, pas une humeur. */
    .tasks-deps-vide { display: none; }            /* Ordre d'exécution sans dépendance = 2 formulaires pour rien */
    .tasks-subtasks-empty { display: none; }       /* l'invite « Décomposer » se tait — le + (hors de ce bloc) reste */
    .tasks-subtask-first { margin-left: 0; }        /* plus d'icône à aligner sous : le + repart du bord */
    .tasks-closed-banner:not(.tasks-archived-banner) { display: none; } /* la chip « Faite » le dit déjà */
    .tasks-chip-project { display: none; }         /* le contexte du héros le dit déjà */
    .tasks-detail-actions .btn-primary { display: none; } /* Terminer y est en double — la rangée quick l'a déjà ; le reste (Modifier, Plus d'options) reste le seul accès mobile à ces actions */
}

/* Hall M3 (02/09) — Gestion mobile, portée espace : cartes projet.
   Réf maquette : docs/maquettes-mobile-0902/m3-hall-projets.svg
   Le JS (estMobileTaches) décide seul d'afficher ce hall : ces règles
   n'ont pas besoin de media query — .gest-hall n'existe qu'en mobile. */
.gest-hall { display: flex; flex-direction: column; gap: 10px; padding: 4px 10px 80px; }
.gest-hall-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; text-align: left; padding: 14px 34px 12px 14px; border: 1px solid var(--gs-line, #e8e2d6); border-left: 4px solid var(--gest-teinte, var(--gs-line-strong, #d8d0c0)); border-radius: 13px; background: var(--gs-panel, #fff); cursor: pointer; font-family: inherit; }
.gest-hall-nom { grid-column: 1 / -1; font-size: 15.5px; font-weight: 750; color: var(--gs-ink, #26221b); }
.gest-hall-sante { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; }
.gest-hall-sante i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.gest-hall-sante.ok { color: var(--gs-ok, #2e7d5b); }
.gest-hall-sante.late { color: var(--gs-crit, #c0392b); }
.gest-hall-sante.pending { color: var(--gs-accent, #a8863f); }
.gest-hall-sante.done { color: var(--gs-ink-faint, #8a8175); }
.gest-hall-sante b { font-weight: 700; }
.gest-hall-barre { display: block; height: 7px; border-radius: 4px; background: var(--gs-panel-2, #f2ede2); overflow: hidden; align-self: center; }
.gest-hall-barre i { display: block; height: 100%; border-radius: 4px; background: var(--gest-teinte, var(--gs-accent, #a8863f)); }
.gest-hall-meta { font-size: 11.5px; color: var(--gs-ink-faint, #8a8175); white-space: nowrap; }
.gest-hall-chev { position: absolute; right: 12px; top: 14px; font-size: 18px; color: var(--gs-ink-faint, #8a8175); }

/* M4 (02/09) — compaction du projet ouvert : l'accordéon de listes existe
   déjà, seuls les gabarits respirent moins sur téléphone. */
@media (max-width: 860px) {
    .gest2-boardhead { padding: 10px 12px; }
    .gest2-progress-line { flex-wrap: wrap; }
    .gest-list-head { padding: 10px 12px; }
}

/* =====================================================================
   PROJET MOBILE — PARCOURS TERRAIN (04/09)

   Le téléphone sert ici à TROUVER, ouvrir, documenter et terminer une
   tâche. La recherche reste donc explicite (pas cachée dans un menu), les
   trois gestes fréquents restent sous le pouce et la caméra a enfin son
   entrée propre. Les réglages ci-dessous sont strictement limités au module
   Projet : aucune modale ni aucun composeur voisin n'hérite de ces choix.
   ===================================================================== */
@media (max-width: 860px) {
    /* La fiche garde ses actions essentielles visibles pendant la lecture. */
    .tasks-detail { padding: 0 14px calc(24px + env(safe-area-inset-bottom)); }
    .tasks-detail-hero { padding: 17px 0 10px; }
    .tasks-detail-hero .tasks-detail-title { font-size: clamp(22px, 6vw, 27px); line-height: 1.14; }
    .tasks-detail-context { margin-bottom: 6px; font-size: 11px; }
    .tasks-detail-status-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; padding-bottom: 10px; }
    .tasks-detail-status-row .tstx-declencheur,
    .tasks-detail-status-row .tasks-meta-chip { min-height: 36px; display: inline-flex; align-items: center; box-sizing: border-box; }
    .tasks-detail-quick {
        position: sticky; top: 0; z-index: 6;
        grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
        margin: 0 -4px 12px; padding: 8px 4px;
        background: color-mix(in srgb, var(--gs-panel, #fff) 94%, transparent);
        border-bottom: 1px solid var(--gs-line, rgba(40,34,24,.09));
        backdrop-filter: blur(12px);
    }
    .tasks-dock .tasks-detail-quick { top: 63px; }
    .tasks-detail-quick .btn {
        min-width: 0; min-height: 48px; padding: 0 7px;
        font-size: 13.5px; line-height: 1.15; white-space: normal;
    }
    .tasks-detail-quick .tasks-quick-photo {
        border-color: var(--gs-line-strong, rgba(168,134,63,.32));
        background: var(--gs-accent-soft, rgba(168,134,63,.13));
    }
    .tasks-detail-desc { margin: 12px 0; padding: 13px; font-size: 15px; line-height: 1.55; }
    .tasks-detail-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .tasks-detail-field { padding: 11px; }
    .tasks-detail-field label { font-size: 10px; line-height: 1.25; }
    .tasks-detail-assignees { flex-wrap: wrap; }
    .tasks-detail-actions { display: flex; gap: 8px; }
    .tasks-detail-actions > .btn,
    .tasks-detail-more > summary { min-height: 44px; }

    /* Photos lisibles immédiatement; un tap ouvre toujours la galerie. */
    .tasks-detail .gc-atts { gap: 8px; }
    .tasks-detail .gc-att-img,
    .tasks-detail .gc-att-img .gc-att-cap {
        flex: 1 1 calc(50% - 4px); width: auto; max-width: none;
    }
    .tasks-detail .gc-att-img:only-child { flex-basis: 100%; }
    .tasks-detail .gc-att-img img {
        width: 100%; max-width: none; height: auto; max-height: min(48vh, 480px);
        object-fit: contain;
    }
    .tasks-detail .gc-inline-img { max-width: 100%; height: auto; }

    /* Discussion compacte, mais ni le texte ni les gestes ne rapetissent. */
    .tasks-detail-discussion { margin-top: 18px; padding-top: 15px; }
    .tasks-detail-discussion .tasks-comments-title { font-size: 17px; }
    .tasks-detail .tasks-comment { gap: 9px; padding: 13px 0; border-radius: 0; background: transparent; }
    .tasks-detail .tasks-comment-avatar { width: 34px; height: 34px; flex-basis: 34px; }
    .tasks-detail .tasks-comment-hdr { flex-wrap: wrap; gap: 3px 8px; }
    .tasks-detail .tasks-comment-hdr strong,
    .tasks-detail .tasks-comment-content { font-size: 15px; }
    .tasks-detail .tasks-comment-content { line-height: 1.52; }

    /* Quai de saisie : Fichier, Photo, Emoji, Envoyer. Les loisirs de bureau
       (GIF, Studio, mise en forme) restent disponibles sur grand écran sans
       encombrer le geste terrain. */
    .tasks-detail-discussion #taskComposer.gc-composer {
        position: sticky; bottom: 0; z-index: 7;
        margin: 14px -14px calc(-24px - env(safe-area-inset-bottom));
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        border-width: 1px 0 0; border-radius: 14px 14px 0 0;
        box-shadow: 0 -12px 34px rgba(40,34,24,.12);
    }
    .tasks-detail-discussion #taskComposer .gc-input,
    .tasks-detail-discussion #taskComposer .grt-editor { min-height: 52px; font-size: 16px; line-height: 1.45; }
    .tasks-detail-discussion #taskComposer .gc-toolbar { flex-wrap: nowrap; gap: 3px; }
    .tasks-detail-discussion #taskComposer .gc-tb { min-width: 44px; min-height: 44px; padding: 5px 7px; }
    .tasks-detail-discussion #taskComposer .gc-send { min-height: 44px; padding: 0 14px; }

    /* L'ajout direct à la tâche offre les mêmes deux chemins : galerie/fichier
       et caméra. Les boutons sont de vraies cibles tactiles. */
    #taskAttachments .gc-attachzone .gc-tb,
    #taskFormAttach .gc-attachzone .gc-tb { min-height: 44px; padding: 7px 11px; }
}

@media (max-width: 640px) {
    /* Mes tâches : la recherche occupe sa propre ligne et la barre reste à
       portée pendant le défilement. Les filtres se replient au lieu de vivre
       dans un rail horizontal invisible. */
    .tasks-view--mine .mine-tools {
        position: sticky; top: 0; z-index: 18;
        flex-wrap: wrap; overflow: visible; gap: 7px;
        margin-bottom: 10px; padding: 10px 12px;
        border: 1px solid var(--gs-line, rgba(40,34,24,.1)); border-radius: 0 0 12px 12px;
        background: color-mix(in srgb, var(--gs-panel, #fff) 96%, transparent);
        backdrop-filter: blur(12px);
    }
    .tasks-view--mine .mine-tools .gest2-search-slot {
        order: -2; flex: 1 0 100%; width: 100%; max-width: none; min-width: 0;
    }
    .tasks-view--mine .mine-tools .gest2-search-slot::before { content: '\2315'; }
    .tasks-view--mine .mine-tools .gest2-search-input {
        height: 46px; padding-left: 40px; border-radius: 11px; font-size: 16px;
        background: var(--gs-panel-2, #f7f1e6);
    }
    .tasks-view--mine .mine-tools .gest-neuf { flex: 1 1 auto; min-height: 44px; }
    .tasks-view--mine .mine-tools .mine-pick-toggle {
        flex: 0 0 44px; width: 44px; padding: 0; overflow: hidden;
        color: transparent; font-size: 0;
    }
    .tasks-view--mine .mine-tools .mine-pick-toggle::before {
        content: '☑'; color: var(--gs-ink-dim, #655f55); font-size: 18px;
    }
    .tasks-view--mine .mine-tools .gest2-menu > summary {
        max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .tasks-view--mine .mine-tools .gest-outil,
    .tasks-view--mine .mine-tools .gest2-menu > summary,
    .tasks-view--mine .mine-pick-toggle { min-height: 44px; }
    .tasks-view--mine .mine-summary { display: none; }
    .tasks-view--mine .mine-content { padding-top: 4px; }
    .tasks-view--mine .mine-groupe .gest-ligne { min-height: 86px; border-radius: 12px; }
    .tasks-view--mine .mine-groupe .gest-c-titre { min-height: 48px; }
    .tasks-view--mine .mine-groupe .gest-c-titre a { font-size: 15px; line-height: 1.3; }
    .tasks-view--mine .mine-groupe .gest-c-date,
    .tasks-view--mine .mine-groupe .gest-c-statut,
    .tasks-view--mine .mine-groupe .gest-c-proj { min-height: 38px; }
    .tasks-card-discussion,
    .tasks-card .tasks-card-check { min-width: 44px; min-height: 44px; }

    .tasks-detail-fields { grid-template-columns: 1fr; }
    .tasks-detail-field label { font-size: 10.5px; }
    .tasks-detail-discussion #taskComposer [data-gc-gif],
    .tasks-detail-discussion #taskComposer [data-gc-studio],
    .tasks-detail-discussion #taskComposer .gc-fmt-slot { display: none; }
    /* Le bouton « Aa » est masqué ici : une barre épinglée sur ordinateur
       resterait donc dépliée sur mobile SANS moyen de la replier — et elle y
       mangerait la moitié du champ. Elle suit son bouton. */
    .tasks-detail-discussion #taskComposer .grt-bar-fixe { display: none; }
    .tasks-detail-discussion #taskComposer .gc-tb-label { display: block; font-size: 10px; line-height: 1; }

    /* Nouvelle tâche : véritable écran mobile, fermeture toujours atteignable
       et validation fixe. Le formulaire conserve tous ses champs — il change
       de hiérarchie, pas de capacité. */
    #taskFormModal { padding: 0; background: var(--gs-panel, #fff); backdrop-filter: none; }
    #taskFormModal .modal-content {
        width: 100%; max-width: none !important; height: 100dvh; min-height: 100%; max-height: 100dvh;
        margin: 0; padding: calc(62px + env(safe-area-inset-top)) 16px 0;
        box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; border-radius: 0; box-shadow: none;
    }
    #taskFormModal .close-modal {
        position: fixed; z-index: 2; top: calc(10px + env(safe-area-inset-top)); right: 12px;
        width: 44px; height: 44px; display: grid; place-items: center;
        border: 1px solid var(--gs-line, rgba(40,34,24,.12)); border-radius: 12px;
        background: var(--gs-panel-2, #f7f1e6); color: var(--gs-ink, #282828); font-size: 28px;
    }
    #taskFormModal h3 { margin: 0 56px 20px 0; font-size: 24px; }
    #taskFormModal .form-group { margin-bottom: 17px; }
    #taskFormModal .form-group > label { font-size: 13px; }
    #taskFormModal input,
    #taskFormModal select { min-height: 46px; }
    #taskFormModal textarea { min-height: 106px; }
    #taskFormModal .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #taskFormModal .tasks-assignee-list { max-height: 190px; overflow-y: auto; }
    #taskFormModal .modal-actions {
        position: sticky; z-index: 2; bottom: 0;
        display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px;
        margin: 22px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--gs-panel, #fff) 96%, transparent);
        border-top: 1px solid var(--gs-line, rgba(40,34,24,.1));
        box-shadow: 0 -12px 28px rgba(40,34,24,.1); backdrop-filter: blur(12px);
    }
    #taskFormModal .modal-actions .btn { min-height: 50px; margin: 0; }
}

@media (max-width: 370px) {
    .tasks-detail-quick .btn { font-size: 12px; padding: 0 4px; }
    .tasks-detail-discussion #taskComposer .gc-tb-label { display: none; }
    #taskFormModal .form-row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 640px) {
    body[data-gtheme="dark"] #taskFormModal,
    body[data-gtheme="dark"] #taskFormModal .modal-actions { background: rgba(38,34,27,.97); }
}

/* =====================================================================
   Le quai — conversations « sous la main » (quai.js, bureau uniquement).
   Concept ticket jc07hIRI90nsvyITFkKB, étapes 1-3 : jusqu'à trois
   conversations collées au bord bas droit (vignettes 340×460 dépliées,
   bulles empilées pour le reste), par-dessus le travail en cours ; bouton
   💬 d'en-tête et son sélecteur ancré.
   - Tokens --gs-* seulement : le sombre bascule sans bloc dédié (sauf
     les ombres, en dur comme pour les toasts entrants ci-dessus).
   - AUCUN nom de classe ne contient « overlay » (version-check.js gèlerait
     les mises à jour) : quai, vignette, bulle.
   - Rayon 14 px sur les angles HAUTS seulement : le panneau est collé au
     bord (DA §9.5). Contrôles à 8 px, avatar rond (une personne).
   - z-index 10050 : au-dessus du travail (iframe 60) et de la chrome de
     la coquille (≤ 125), SOUS la salle d'appel (10070), les annonces
     (10090), les volets entrants (100005) et le verrou (100010).
   ===================================================================== */
.gq-quai { position: fixed; bottom: 0; right: 12px; z-index: 10050;
    display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.gq-quai > * { pointer-events: auto; }
.gq-vignette { width: 340px; height: 460px; max-height: calc(100vh - 96px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--gs-panel); border: 1px solid var(--gs-line-strong); border-bottom: 0;
    border-radius: var(--gs-radius-panel, 14px) var(--gs-radius-panel, 14px) 0 0;
    color: var(--gs-ink);
    box-shadow: 0 10px 30px rgba(40, 34, 24, .16), 0 2px 8px rgba(40, 34, 24, .10); }
body[data-gtheme="dark"] .gq-vignette { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3); }

/* Tête — 48 px, poignée d'identité + les trois gestes ⤢ − ✕ */
.gq-tete { display: flex; align-items: center; gap: 9px; height: 48px; flex-shrink: 0;
    padding: 0 8px 0 12px; border-bottom: 1px solid var(--gs-line); background: var(--gs-panel-2); }
.gq-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.gq-avatar-lettres { display: flex; align-items: center; justify-content: center;
    background: var(--gs-accent-soft); color: var(--gs-accent);
    font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.gq-tete-nom { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
    font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gq-btn { width: 28px; height: 28px; flex-shrink: 0; border: 0; border-radius: var(--gs-radius-control, 8px);
    background: transparent; color: var(--gs-ink-dim); font-size: .95rem; line-height: 1; cursor: pointer; }
.gq-btn:hover { background: var(--gs-accent-soft); color: var(--gs-ink); }

/* Fil — messages minimaux : le reste vit en pleine page (bouton ⤢) */
.gq-fil { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.gq-msg { max-width: 84%; padding: 7px 10px; border-radius: var(--gs-radius-card, 10px);
    font-size: .88rem; line-height: 1.35; overflow-wrap: break-word; }
.gq-msg-autre { align-self: flex-start; background: var(--gs-panel-2); }
/* MES messages : même terre foncée que la pleine page (.chat-msg-own) — les
   deux beiges (panel-2 / accent-soft) étaient indiscernables, et une capture
   d'écran large masque l'alignement : la couleur doit suffire à dire qui parle. */
.gq-msg-moi { align-self: flex-end; background: var(--chanv-terre, #2d3748); color: #fff; }
.gq-msg-moi .gq-msg-heure { color: rgba(255, 255, 255, .65); }
.gq-msg-moi a { color: #fff; }
body[data-gtheme="dark"] .gq-msg-moi { background: #443e33; color: rgba(255, 255, 255, .92); }
.gq-msg-sys { align-self: center; background: none; color: var(--gs-ink-faint); font-size: .8rem; text-align: center; }
.gq-msg-auteur { font-size: .72rem; font-weight: 600; color: var(--gs-ink-dim); margin-bottom: 2px; }
/* Groupes : une teinte stable par auteur (hachage de l'adresse → .gq-aut-N).
   Foncées sur bulle claire ; le thème sombre repasse en pastels lisibles. */
.gq-aut-0 { color: #b4530a; }
.gq-aut-1 { color: #0e7490; }
.gq-aut-2 { color: #7c3aed; }
.gq-aut-3 { color: #15803d; }
.gq-aut-4 { color: #be185d; }
.gq-aut-5 { color: #1d4ed8; }
.gq-aut-6 { color: #a16207; }
.gq-aut-7 { color: #b91c1c; }
body[data-gtheme="dark"] .gq-aut-0 { color: #fdba74; }
body[data-gtheme="dark"] .gq-aut-1 { color: #67e8f9; }
body[data-gtheme="dark"] .gq-aut-2 { color: #c4b5fd; }
body[data-gtheme="dark"] .gq-aut-3 { color: #86efac; }
body[data-gtheme="dark"] .gq-aut-4 { color: #f9a8d4; }
body[data-gtheme="dark"] .gq-aut-5 { color: #93c5fd; }
body[data-gtheme="dark"] .gq-aut-6 { color: #fde047; }
body[data-gtheme="dark"] .gq-aut-7 { color: #fca5a5; }
.gq-msg-heure { font-size: .68rem; color: var(--gs-ink-faint); text-align: right; margin-top: 2px; }
.gq-msg-echec { color: var(--gs-crit); }
.gq-voir-grand { border: 0; background: none; color: var(--gs-accent); cursor: pointer;
    font-size: .8rem; text-decoration: underline; }

/* Composeur — colonne : chips en attente, panneau d'outils, ligne d'écriture */
/* position:relative — ancre de la liste de @mention (.chat-mention-pop),
   posée en absolu au-dessus du champ, comme le composeur de la pleine page. */
.gq-comp { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
    padding: 8px 10px; border-top: 1px solid var(--gs-line); position: relative; }
.gq-ligne { display: flex; align-items: flex-end; gap: 8px; }
.gq-plus { width: 32px; height: 36px; flex-shrink: 0; border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-control, 8px); background: var(--gs-ground);
    color: var(--gs-ink-soft, var(--gs-ink)); font-size: 1.05rem; cursor: pointer; }
.gq-plus:hover { border-color: var(--gs-accent); color: var(--gs-accent); }
.gq-outils { display: flex; gap: 6px; }
.gq-outil { height: 30px; padding: 0 10px; border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-control, 8px); background: var(--gs-ground);
    color: var(--gs-ink); font-size: .82rem; font-weight: 600; cursor: pointer; }
.gq-outil:hover { border-color: var(--gs-accent); }
.gq-outil-on { border-color: #8E6FC7; background: rgba(142, 111, 199, .14); }
/* Appels 📞/🎥 dans la tête — un peu d'air après le nom ; le 1er clic ARME
   (accent visible), le 2e appelle. */
.gq-appel-deb { margin-left: 6px; }
.gq-appel-arme { background: var(--gs-accent); color: var(--gs-ground); }
.gq-appel-arme:hover { background: var(--gs-accent); color: var(--gs-ground); }
/* Bandeau d'enregistrement vocal — 🔴 temps ✖ ➤ */
.gq-enr { display: flex; align-items: center; gap: 8px; }
.gq-enr-pt { animation: gq-enr-pulse 1.2s ease-in-out infinite; }
@keyframes gq-enr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.gq-enr-temps { font-variant-numeric: tabular-nums; font-size: .84rem; flex: 1; }
/* Mode Gandalf 🧙 — mêmes violets que la pleine page (.gandalf-mode) */
.gq-mode-gandalf .gq-champ { border-color: #8E6FC7; caret-color: #8E6FC7; }
.gq-mode-gandalf .gq-champ::placeholder { color: #8E6FC7; opacity: .85; }
.gq-mode-gandalf .gq-envoyer { background: #8E6FC7; }
.gq-mode-gandalf .grt-editor { border-color: #8E6FC7; }
body[data-gtheme="dark"] .gq-mode-gandalf .gq-champ::placeholder { color: #C4B5FD; }
body[data-gtheme="dark"] .gq-mode-gandalf .gq-envoyer { background: #A78BFA; color: #241F33; }
/* Le bouton Aa de l'éditeur enrichi vit en BOUT de rangée d'outils ; son
   infobulle se déploie vers la gauche (centrée, elle serait coupée par
   l'overflow:hidden de la vignette). */
.gq-fmt-slot { display: inline-flex; }
/* La surface éditable prend l'habit du champ qu'elle remplace (.gq-champ). */
.gq-ligne .grt-editor { border: 1px solid var(--gs-line); border-radius: var(--gs-radius-control, 8px);
    background: var(--gs-ground); color: var(--gs-ink); font-size: .88rem; max-height: 110px; }
.gq-ligne .grt-editor:focus { border-color: var(--gs-accent); }
.gq-outils .grt-bar.grt-pop { left: auto; right: 0; transform: none; }
.gq-outils .grt-bar.grt-pop::after { left: auto; right: 12px; transform: none; }
.gq-panneau { max-height: 200px; overflow-y: auto; border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-control, 8px); background: var(--gs-ground); padding: 8px; }
.gq-pan-cat { font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--gs-ink-soft, var(--gs-ink)); opacity: .7; margin: 6px 2px 3px; }
.gq-pan-emojis { display: flex; flex-wrap: wrap; gap: 2px; }
.gq-pan-emoji { border: 0; background: none; font-size: 1.15rem; padding: 3px;
    border-radius: 6px; cursor: pointer; line-height: 1; }
.gq-pan-emoji:hover { background: var(--gs-accent-soft); }
.gq-pan-cherche { width: 100%; box-sizing: border-box; border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-control, 8px); padding: 6px 9px; margin-bottom: 8px;
    background: var(--gs-panel); color: var(--gs-ink); font: inherit; font-size: .84rem; }
.gq-pan-cherche:focus { outline: none; border-color: var(--gs-accent); }
.gq-pan-gifs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gq-pan-gif { width: 100%; height: 84px; object-fit: cover; border-radius: 8px;
    cursor: pointer; background: var(--gs-accent-soft); }
.gq-pan-gif:hover { outline: 2px solid var(--gs-accent); }
.gq-attente { display: flex; flex-wrap: wrap; gap: 6px; }
.gq-att-chip { display: flex; align-items: center; gap: 6px; max-width: 100%;
    border: 1px solid var(--gs-line); border-radius: var(--gs-radius-control, 8px);
    background: var(--gs-ground); padding: 3px 6px; font-size: .78rem; color: var(--gs-ink); }
.gq-att-mini { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.gq-att-mini-txt { display: grid; place-items: center; font-size: .7rem; font-weight: 700;
    background: var(--gs-accent-soft); }
.gq-att-chipnom { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gq-att-x { border: 0; background: none; cursor: pointer; font-size: .7rem;
    color: var(--gs-ink-soft, var(--gs-ink)); padding: 2px; }
.gq-att-x:hover { color: var(--gs-accent); }
.gq-champ { flex: 1; resize: none; border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-control, 8px); padding: 8px 10px;
    background: var(--gs-ground); color: var(--gs-ink); font: inherit; font-size: .88rem;
    min-height: 36px; max-height: 110px; }
.gq-champ:focus { outline: none; border-color: var(--gs-accent); }
.gq-envoyer { width: 36px; height: 36px; flex-shrink: 0; border: 0;
    border-radius: var(--gs-radius-control, 8px); background: var(--gs-accent);
    color: var(--gs-ground); font-size: .95rem; cursor: pointer; }
.gq-envoyer:hover { filter: brightness(1.08); }

/* Bulle — la conversation réduite : un avatar rond, 48 px, compteur intact */
.gq-bulle { position: relative; width: 48px; height: 48px;
    border: 1px solid var(--gs-line-strong); border-radius: 50%; padding: 0;
    background: var(--gs-panel); cursor: pointer;
    box-shadow: 0 10px 30px rgba(40, 34, 24, .16), 0 2px 8px rgba(40, 34, 24, .10); }
body[data-gtheme="dark"] .gq-bulle { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3); }
.gq-bulle .gq-avatar { width: 100%; height: 100%; }
.gq-bulle .gq-avatar-lettres { font-size: .9rem; }

/* Croix de fermeture de la bulle — demande de Thierry (04/09) : « au survol
   des petites bulles, une petite croix en haut à droite pour les fermer ».
   Deux pièges tenus ici :
   - la croix reste DANS le carré de 48 px. Débordante, viser la croix ferait
     sortir la souris du cadre survolé : le survol tombe, la croix s'efface
     sous le doigt, et on ne peut jamais cliquer.
   - elle occupe le coin du compteur de non-lus, qui s'efface le temps du
     survol. Le compte n'est pas perdu pour autant : la bulle le dit dans son
     aria-label (peindreBadge), seul le badge est décoratif. */
.gq-bulle-hote { position: relative; width: 48px; height: 48px; }
.gq-bulle-x { position: absolute; top: 0; right: 0; z-index: 1;
    width: 18px; height: 18px; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--gs-line-strong); background: var(--gs-panel);
    color: var(--gs-ink-dim); font-size: .6rem; line-height: 1; cursor: pointer;
    opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.gq-bulle-hote:hover .gq-bulle-x,
.gq-bulle-hote:focus-within .gq-bulle-x { opacity: 1; pointer-events: auto; }
.gq-bulle-x:hover { background: var(--gs-crit); border-color: var(--gs-crit); color: #fff; }

/* Compteur de non-lus — la vignette posée mais pas regardée le garde intact */
.gq-nonlus { display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--gs-crit); color: #fff; font-size: .68rem; font-weight: 700; }
.gq-bulle .gq-nonlus { position: absolute; top: -4px; right: -4px;
    transition: opacity .12s ease; }
.gq-bulle-hote:hover .gq-nonlus,
.gq-bulle-hote:focus-within .gq-nonlus { opacity: 0; }
.gq-nonlus.hidden { display: none; }

/* Bulles empilées — les conversations réduites, en colonne au bord droit */
.gq-bulles { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 14px; }

/* Pièces jointes reçues — images en ligne (blob authentifié), le reste en
   puce à télécharger. L'envoi de pièces, lui, vit en pleine page (⤢). */
.gq-att-imgwrap { margin-top: 4px; }
.gq-att-img { display: block; max-width: 100%; max-height: 180px; min-height: 40px;
    border-radius: var(--gs-radius-control, 8px); background: var(--gs-panel-2);
    object-fit: cover; cursor: pointer; }
.gq-att-fichier { display: flex; align-items: center; gap: 6px; max-width: 100%;
    margin-top: 4px; padding: 6px 9px; border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-control, 8px); background: var(--gs-panel);
    color: var(--gs-ink); font-size: .8rem; cursor: pointer; text-align: left; }
.gq-att-fichier span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gq-att-fichier:hover { border-color: var(--gs-accent); }
/* Images EN LIGNE (jeton `[img:…]` dans le texte, quai.js:htmlMsg). La règle
   générale .gc-inline-img plafonne à 340 px — la largeur ENTIÈRE de la fenêtre
   du quai, bordures comprises : l'image débordait de sa bulle. On la ramène à
   la bulle, aux mêmes mesures que les pièces jointes ci-dessus pour que les
   deux façons de recevoir une image se ressemblent. */
.gq-msg .gc-inline-img { max-width: 100%; max-height: 180px; margin: 4px 0 0; }

/* Réactions emoji — chips cliquables (bascule), et le bouton 😊 qui ouvre la
   palette pour en POSER une neuve (demande de Thierry, 04/09 : « comme dans
   les conversations normales »). */
.gq-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gq-reaction { border: 1px solid var(--gs-line); border-radius: 999px;
    background: var(--gs-panel); color: var(--gs-ink); font-size: .72rem;
    padding: 1px 7px; cursor: pointer; line-height: 1.5; }
.gq-reaction span { color: var(--gs-ink-dim); }
.gq-reaction-mienne { border-color: var(--gs-accent); background: var(--gs-accent-soft); }

/* Le bouton 😊 partage la ligne de l'heure. Il garde sa place en permanence et
   ne fait que s'estomper : en display:none, l'heure sautait d'un cran chaque
   fois que la souris entrait dans une bulle. pointer-events suit l'opacité —
   invisible, il ne doit pas non plus être cliquable. */
.gq-msg-heure { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.gq-reagir { border: 0; background: none; padding: 0 2px; line-height: 1;
    font-size: .78rem; cursor: pointer; opacity: 0; pointer-events: none;
    filter: grayscale(1); transition: opacity .12s ease, filter .12s ease; }
.gq-msg:hover .gq-reagir, .gq-msg:focus-within .gq-reagir { opacity: .55; pointer-events: auto; }
.gq-msg .gq-reagir:hover, .gq-msg .gq-reagir:focus-visible { opacity: 1; filter: none; }

/* La palette : posée sur <body> (elle survit aux repeintures du fil), donc
   z-index à part — juste au-dessus du sélecteur du quai (10055), sous la
   visionneuse d'images (10065) et la salle d'appel (10070). */
.gq-react-pal { position: fixed; z-index: 10056; display: flex; flex-wrap: wrap;
    gap: 2px; max-width: 300px; padding: 5px 6px;
    border: 1px solid var(--gs-line-strong); border-radius: 999px;
    background: var(--gs-panel);
    box-shadow: 0 8px 24px rgba(40, 34, 24, .18), 0 2px 6px rgba(40, 34, 24, .10); }
body[data-gtheme="dark"] .gq-react-pal { box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35); }
/* Déployée (＋) : une grille défilante, plus une rangée — le rayon reprend
   celui des panneaux, un tapis d'emojis en gélule se lit mal. */
.gq-react-pal-plein { display: grid; grid-template-columns: repeat(8, 1fr);
    max-height: 240px; overflow-y: auto; border-radius: var(--gs-radius-panel, 14px); padding: 8px; }
.gq-react-choix { border: 0; background: none; border-radius: 50%; cursor: pointer;
    width: 28px; height: 28px; font-size: 1rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; }
.gq-react-choix:hover { background: var(--gs-accent-soft); transform: scale(1.15); }
.gq-react-choix:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 1px; }
.gq-react-plus { color: var(--gs-ink-dim); font-size: .9rem; }

/* Bouton 💬 de l'en-tête universel — le compteur est le badge global
   `messages`, posé par Shell.applyBadge comme partout ailleurs. */
.gq-head-btn { position: relative; }
.gq-head-cnt { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
    padding: 0 4px; border-radius: 8px; display: inline-flex; align-items: center;
    justify-content: center; background: var(--gs-crit); color: #fff;
    font-size: .64rem; font-weight: 700; }
.gq-head-cnt.hidden { display: none; }

/* Le sélecteur — panneau ancré sous le bouton, pas un second rail.
   Point rouge = message qui te vise (DM non lu) ; point doré = salon actif
   sans sourdine. Le modèle de signal du tiroir 🔔, réemployé tel quel. */
.gq-sel { position: fixed; z-index: 10055; width: 330px; max-height: 70vh;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--gs-panel); border: 1px solid var(--gs-line-strong);
    border-radius: var(--gs-radius-panel, 14px); color: var(--gs-ink);
    box-shadow: 0 10px 30px rgba(40, 34, 24, .16), 0 2px 8px rgba(40, 34, 24, .10); }
body[data-gtheme="dark"] .gq-sel { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3); }
.gq-sel-tete { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px;
    border-bottom: 1px solid var(--gs-line); }
.gq-sel-tete strong { font-size: .95rem; }
.gq-sel-filtre { flex: 1; min-width: 0; border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-control, 8px); padding: 5px 9px;
    background: var(--gs-ground); color: var(--gs-ink); font: inherit; font-size: .82rem; }
.gq-sel-filtre:focus { outline: none; border-color: var(--gs-accent); }
.gq-sel-lignes { flex: 1; overflow-y: auto; padding: 6px; }
.gq-sel-ligne { display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px; border: 0; border-radius: var(--gs-radius-card, 10px);
    background: none; color: var(--gs-ink); cursor: pointer; text-align: left; }
.gq-sel-ligne:hover { background: var(--gs-accent-soft); }
.gq-sel-ligne .gq-avatar { width: 32px; height: 32px; }
.gq-sel-corps { flex: 1; min-width: 0; }
.gq-sel-nom { display: block; font-size: .86rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gq-sel-apercu { display: block; font-size: .76rem; color: var(--gs-ink-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gq-sel-fin { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.gq-sel-quand { font-size: .68rem; color: var(--gs-ink-faint); }
.gq-sel-pt { width: 8px; height: 8px; border-radius: 50%; background: var(--gs-crit); }
.gq-sel-pt-or { background: var(--gs-accent); }
.gq-sel-prendre { display: none; font-size: .9rem; color: var(--gs-accent); }
.gq-sel-ligne:hover .gq-sel-prendre, .gq-sel-ligne.sel .gq-sel-prendre { display: block; }
.gq-sel-ligne:hover .gq-sel-quand, .gq-sel-ligne:hover .gq-sel-pt,
.gq-sel-ligne.sel .gq-sel-quand, .gq-sel-ligne.sel .gq-sel-pt { display: none; }
/* .sel : la surbrillance pilotée au clavier (↑ ↓ depuis le filtre) — même
   rendu que le survol, pour que les deux gestes racontent la même chose. */
.gq-sel-ligne.sel { background: var(--gs-accent-soft); }
/* Non lue, dans la miniature (ticket J6U7z72o9lkT9ZpQq9rX) : même teinte et
   même filet que la pleine page, pour qu'une conversation en attente se
   reconnaisse au même coup d'œil dans les deux écrans. Déclaré APRÈS `:hover`
   et `.sel` : le survol ne doit pas effacer le signal, il l'éclaircit. Le nom
   passe en gras ici aussi — `.gq-sel-nom` est à 600 par défaut. */
.gq-sel-ligne.gq-sel-ligne-nonlu {
    background: color-mix(in srgb, var(--gs-accent) 14%, var(--gs-panel));
    box-shadow: inset 4px 0 var(--gs-accent); }
.gq-sel-ligne.gq-sel-ligne-nonlu:hover,
.gq-sel-ligne.gq-sel-ligne-nonlu.sel {
    background: color-mix(in srgb, var(--gs-accent) 21%, var(--gs-panel)); }
.gq-sel-ligne-nonlu .gq-sel-nom { font-weight: 800; }
.gq-sel-ligne-nonlu .gq-sel-apercu { color: var(--gs-ink); }
.gq-sel-vide { padding: 18px 12px; text-align: center; font-size: .82rem; color: var(--gs-ink-faint); }
.gq-sel-toutes { border: 0; border-top: 1px solid var(--gs-line); padding: 10px;
    background: var(--gs-panel-2); color: var(--gs-accent); font-size: .82rem;
    font-weight: 600; cursor: pointer; }
.gq-sel-toutes:hover { filter: brightness(1.04); }

/* Accessibilité (étape 3) — la vignette est un dialogue NON modal : pas de
   piège de focus, mais un anneau visible au clavier partout où l'on passe. */
.gq-btn:focus-visible, .gq-bulle:focus-visible, .gq-bulle-x:focus-visible,
.gq-envoyer:focus-visible,
.gq-plus:focus-visible, .gq-outil:focus-visible, .gq-pan-emoji:focus-visible,
.gq-pan-gif:focus-visible, .gq-att-x:focus-visible,
.gq-reaction:focus-visible, .gq-att-fichier:focus-visible, .gq-voir-grand:focus-visible,
.gq-sel-ligne:focus-visible, .gq-sel-toutes:focus-visible {
    outline: 2px solid var(--gs-accent); outline-offset: 2px;
}
/* Zone d'annonce aria-live (nouveaux messages d'une vignette délaissée) :
   lue par les lecteurs d'écran, invisible à l'écran. */
.gq-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sous 861 px, le quai n'existe pas — le mobile ne bouge pas. Le bouton ⤡
   de Communications, le bouton 💬 d'en-tête et le sélecteur non plus :
   ce sont des gestes de bureau. */
@media (max-width: 860px) {
    .gq-quai, .chat-pane-quai, .gq-sel, #gshellUniversalQuai { display: none !important; }
}

/* ===== AIDE PROJETS & TÂCHES ===== */
/* Hébergée DANS #tasksView (classe tasks-help-on posée par tasks-help.js) :
   le shell — rail, topbar, tabbar — et la rangée de pastilles restent
   visibles ; seul le corps du module Tâches s'efface. Aucun z-index à deux
   chiffres : plus rien ne passe par-dessus quoi que ce soit. */
.tashelp { display: none; }
#tasksView.tasks-help-on .tashelp { display: block; flex: 1; min-height: 0; overflow-y: auto; background: var(--gs-ground); }
#tasksView.tasks-help-on .tasks-toolbar,
#tasksView.tasks-help-on .tasks-status-line,
#tasksView.tasks-help-on .tasks-tabs,
#tasksView.tasks-help-on .tasks-body { display: none; }

/* Barre d'outils : retour + titre + recherche, sticky dans la zone qui défile. */
.tashelp-tools { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px;
    padding: 12px 20px; background: var(--gs-ground); border-bottom: 1px solid var(--gs-line); }
.tashelp-back { background: none; border: none; color: var(--gs-ink-dim); cursor: pointer;
    font-size: 14px; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.tashelp-back:hover { color: var(--gs-ink); background: var(--gs-accent-soft); }
.tashelp-titre { font-size: 17px; margin: 0; color: var(--gs-ink); white-space: nowrap; }
.tashelp-searchbox { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 420px;
    background: var(--gs-panel); border: 1px solid var(--gs-line); border-radius: 10px; padding: 7px 12px; }
.tashelp-searchbox:focus-within { border-color: var(--gs-accent); }
.tashelp-searchbox .gicon { width: 15px; height: 15px; opacity: .6; flex-shrink: 0; }
.tashelp-search { flex: 1; min-width: 0; border: none; background: none; color: var(--gs-ink);
    font-size: 14px; outline: none; }
.tashelp-count { font-size: 13px; color: var(--gs-ink-dim); white-space: nowrap; }

/* Corps : nav sticky à gauche, contenu en cartes à droite. */
.tashelp-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px;
    max-width: 1020px; margin: 0 auto; padding: 24px 20px 64px; align-items: start; }
.tashelp-nav { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 2px; }
.tashelp-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px;
    color: var(--gs-ink-dim); text-decoration: none; font-size: 14px; border: 1px solid transparent; cursor: pointer; }
.tashelp-nav-item .gicon { width: 15px; height: 15px; flex-shrink: 0; }
.tashelp-nav-item:hover { background: var(--gs-panel-2); color: var(--gs-ink); }
.tashelp-nav-item.on { background: var(--gs-accent-soft); color: var(--gs-ink); font-weight: 600;
    border-color: var(--gs-line); }
.tashelp-nav-item.off { opacity: .35; pointer-events: none; }

.tashelp-intro { font-size: 15px; line-height: 1.7; color: var(--gs-ink-dim); margin: 0 0 20px; }
.tashelp-chap { background: var(--gs-panel); border: 1px solid var(--gs-line); border-radius: 12px;
    padding: 20px 24px; margin-bottom: 16px; }
.tashelp-chap h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 0 0 12px;
    color: var(--gs-ink); }
.tashelp-chap h2 .gicon { width: 17px; height: 17px; color: var(--gs-accent); flex-shrink: 0; }
.tashelp-chap p { line-height: 1.7; color: var(--gs-ink-dim); margin: 10px 0; }
.tashelp-liste { margin: 10px 0; padding-left: 22px; }
.tashelp-liste li { line-height: 1.7; color: var(--gs-ink-dim); margin: 4px 0; }
.tashelp-note { border-left: 3px solid var(--gs-accent); background: var(--gs-accent-soft);
    padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 14px 0; line-height: 1.6; color: var(--gs-ink); }
/* Notification d'exemple : une VRAIE carte, comme dans l'app. */
.tashelp-notif { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; padding: 12px 14px;
    background: var(--gs-panel-2); border: 1px solid var(--gs-line); border-radius: 10px; }
.tashelp-notif-ico { font-size: 18px; line-height: 1.4; }
.tashelp-notif-titre { font-weight: 600; margin-bottom: 4px; color: var(--gs-ink); }
.tashelp-notif-corps { color: var(--gs-ink-dim); line-height: 1.6; }

/* FAQ : accordéons avec chevron animé. */
.tashelp-q { border-bottom: 1px solid var(--gs-line); }
.tashelp-q:last-child { border-bottom: none; }
.tashelp-q summary { list-style: none; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; cursor: pointer; font-weight: 600; color: var(--gs-ink); padding: 12px 8px; border-radius: 8px; }
.tashelp-q summary::-webkit-details-marker { display: none; }
.tashelp-q summary::after { content: '▾'; color: var(--gs-ink-dim); transition: transform .15s ease; flex-shrink: 0; }
.tashelp-q[open] summary::after { transform: rotate(180deg); }
.tashelp-q summary:hover { background: var(--gs-panel-2); }
.tashelp-q p { line-height: 1.7; color: var(--gs-ink-dim); margin: 4px 8px 14px; }

.tashelp-hit { background: var(--gs-accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.tashelp-vide { text-align: center; padding: 40px 0; color: var(--gs-ink-dim); }
.tashelp-vide .btn { margin-top: 12px; }
.tashelp-foot { margin-top: 32px; font-size: 14px; }
.tashelp-foot a { color: var(--gs-accent); }

/* Le bouton « ? » (réhébergé dans la rangée de pastilles — le shell masque
   .tasks-header). */
.tasks-help-btn { background: none; border: 1px solid var(--gs-line); color: var(--gs-ink);
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px; }
.tasks-help-btn:hover { background: var(--gs-panel-2); }
.tasks-projects-row .tasks-help-btn { width: 36px; height: 36px; flex-shrink: 0; }
body[data-gtheme="dark"] .tasks-projects-row .tasks-help-btn { color: rgba(255,255,255,.78); }

@media (max-width: 900px) {
    .tashelp-body { grid-template-columns: 1fr; gap: 0; padding: 12px 12px 64px; }
    .tashelp-nav { position: sticky; top: 58px; z-index: 1; flex-direction: row; overflow-x: auto;
        background: var(--gs-ground); padding: 8px 0; margin-bottom: 12px; scrollbar-width: none; }
    .tashelp-nav::-webkit-scrollbar { display: none; }
    .tashelp-nav-item { white-space: nowrap; border: 1px solid var(--gs-line); background: var(--gs-panel); }
}
@media (max-width: 600px) {
    .tashelp-tools { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
    .tashelp-titre { font-size: 15px; }
    .tashelp-searchbox { order: 3; flex-basis: 100%; max-width: none; }
    .tashelp-chap { padding: 14px; }
}

/* ══════════════════════════ SALLE DE LECTURE (admin) ══════════════════════════
   Écran de dépôt, réservé aux Super Administrateurs. Il réutilise autant que
   possible la famille .admin-* (tableaux, modales, badges) qui a DÉJÀ sa passe
   sombre ; seul ce qui n'existait pas porte le préfixe .sl-, et chaque règle
   .sl- colorée a sa jumelle sombre plus bas — une classe neuve n'hérite ni de
   body[data-gtheme="dark"] ni de body.shell-on[data-gtheme="dark"].
   L'or de la marque n'est PAS repris ici : il appartient à la page du lecteur
   (public/salle.html), qui est vue par Desjardins. L'écran d'administration
   est un outil interne et doit ressembler au reste du hub. */
#salle-view{max-width:1100px;margin:0 auto;padding:18px 20px 60px;width:100%}

.sl-onglets{display:flex;gap:10px;border-bottom:2px solid var(--chanv-fibre);margin-bottom:18px}
.sl-onglet{padding:10px 20px;background:none;border:none;font-weight:700;font-size:14px;
    color:#999;cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-2px}
.sl-onglet.on{color:var(--chanv-terre);border-bottom-color:var(--chanv-beige)}

.sl-barre{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.sl-chips{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}

.sl-liste{display:flex;flex-direction:column;gap:12px}
.sl-doc{background:#fff;border:1px solid var(--chanv-fibre);border-radius:var(--radius);
    padding:16px 18px;transition:var(--transition)}
.sl-doc:hover{box-shadow:var(--shadow-soft)}
/* Un brouillon se distingue au premier coup d'œil : c'est l'état dans lequel
   un document RESTE quand on croit l'avoir diffusé. */
.sl-doc-brouillon{border-left:4px solid #BC7E29}
.sl-doc-publie{border-left:4px solid #6E8A63}
.sl-doc-archive,.sl-doc-expire{border-left:4px solid #C9C4BA;opacity:.82}

.sl-doc-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sl-doc-tete h3{margin:0;font-size:17px;font-weight:700;color:var(--chanv-terre)}
.sl-etat{padding:3px 10px;border-radius:8px;font-size:11px;font-weight:700;
    letter-spacing:.3px;white-space:nowrap;text-transform:uppercase}
.sl-etat-brouillon{background:#FFF4E0;color:#8A5A12}
.sl-etat-publie{background:#E6F4EA;color:#2C6B3F}
.sl-etat-archive{background:#F0EEEA;color:#6B655C}
.sl-etat-expire{background:#FFF5F5;color:#C53030}

.sl-desc{margin:8px 0 0;font-size:14px;color:#666;max-width:70ch}
.sl-dest{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.sl-puce{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;
    background:var(--chanv-fibre);color:var(--chanv-terre);white-space:nowrap}
.sl-puce-perso{background:#fff;border:1px solid var(--chanv-fibre);color:#666}
.sl-puce-alerte{background:#FFF5F5;color:#C53030}
/* Le nombre qui compte : combien de personnes, réellement. */
.sl-compte{font-size:12px;font-weight:700;color:#8A7A55;margin-left:2px}
.sl-meta{margin-top:9px;font-size:12.5px;color:#999}
.sl-sep{opacity:.45}
.sl-avert{margin-top:9px;padding:8px 11px;border-radius:8px;font-size:12.5px;
    background:#FFF5F5;color:#C53030}
.sl-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}

.sl-note{margin:0 0 18px;padding:11px 14px;border-radius:10px;font-size:13.5px;
    line-height:1.55;background:#FFF4E0;color:#7A4F10}
.sl-coches{display:flex;flex-direction:column;gap:8px}
/* Salle de lecture — durée de disponibilité, limites par personne, gestion (2026-09-18) */
.sl-durees{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sl-duree{padding:5px 12px;border-radius:999px;border:1px solid var(--border,#D9D4C7);background:transparent;color:inherit;font-size:12.5px;cursor:pointer}
.sl-duree:hover{border-color:#A8863F}
.sl-duree.on{background:#A8863F;border-color:#A8863F;color:#fff}
.modal-content .form-group label.sl-limite{display:flex;align-items:center;gap:10px;margin:-2px 0 6px 30px;font-size:13px;font-weight:400;
  text-transform:none;letter-spacing:0;color:inherit;opacity:.9}
.modal-content .form-group .sl-limite input[type="number"]{width:104px;flex:0 0 104px;padding:7px 10px}
.modal-content .form-group .sl-limite input[type="number"]:disabled{opacity:.4}
.sl-remise{margin-left:8px;padding:2px 9px;font-size:12px}
.sl-actions a.btn-action{text-decoration:none;display:inline-flex;align-items:center}
.sl-gestes{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.sl-geste{padding:1px 8px;font-size:11.5px}
.sl-geste-coupe{opacity:.75}
.sl-geste-coupe:hover,.sl-geste-coupe[data-confirm="1"]{opacity:1;border-color:#B4442E;color:#B4442E}
.sl-suppr{margin-left:auto;opacity:.7}
.sl-suppr:hover{opacity:1;border-color:#B4442E;color:#B4442E}
.sl-suppr-titre{margin:4px 0 12px;font-weight:600;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sl-suppr-liste{margin:12px 0;padding-left:18px;font-size:13.5px;line-height:1.55;display:flex;flex-direction:column;gap:6px}
.sl-suppr-case{margin:14px 0 6px}
#slModal .btn-danger[disabled]{opacity:.45;cursor:not-allowed}
.sl-gestion{margin:6px 0 0;padding:0;list-style:none;font-size:13px;display:flex;flex-direction:column;gap:4px}
.sl-attente{display:inline-block;padding:5px 12px;border-radius:8px;font-size:12px;
    font-weight:700;letter-spacing:.3px;white-space:nowrap;background:#F0EEEA;color:#77706A}
.sl-bilan{margin:0 0 14px;font-size:15px;font-weight:600;color:var(--chanv-terre)}
.sl-sous-titre{margin:24px 0 4px;font-size:14px;font-weight:700;color:var(--chanv-terre)}

@media (max-width:640px){
    .sl-chips{margin-left:0;width:100%}
    .sl-barre .btn{width:100%;justify-content:center}
    .sl-actions .btn-action{flex:1;justify-content:center}
}

/* ---- passe sombre : préfixe body[data-gtheme="dark"], comme le reste
        de cette feuille (celui de shell.css est body.shell-on[...]) ---- */
body[data-gtheme="dark"] .sl-onglets{border-bottom-color:rgba(221,203,164,.18)}
body[data-gtheme="dark"] .sl-onglet{color:rgba(255,255,255,.5)}
body[data-gtheme="dark"] .sl-onglet.on{color:rgba(255,255,255,.94)}
/* `border-color` en raccourci écraserait le `border-left` coloré des règles
   d'état — plus spécifique (0,2,0 contre 0,1,0), il gagne et la bande d'état
   disparaît en sombre. On ne touche donc QUE les trois autres côtés, et on
   redit les couleurs d'état juste après. */
body[data-gtheme="dark"] .sl-doc{background:#2b2823;
    border-top-color:rgba(221,203,164,.14);border-right-color:rgba(221,203,164,.14);
    border-bottom-color:rgba(221,203,164,.14)}
body[data-gtheme="dark"] .sl-doc-brouillon{border-left-color:#E0A458}
body[data-gtheme="dark"] .sl-doc-publie{border-left-color:#8FA986}
body[data-gtheme="dark"] .sl-doc-archive,
body[data-gtheme="dark"] .sl-doc-expire{border-left-color:rgba(221,203,164,.26)}
body[data-gtheme="dark"] .sl-doc-tete h3{color:rgba(255,255,255,.94)}
body[data-gtheme="dark"] .sl-desc{color:rgba(255,255,255,.72)}
body[data-gtheme="dark"] .sl-meta{color:rgba(255,255,255,.46)}
body[data-gtheme="dark"] .sl-puce{background:rgba(221,203,164,.13);color:rgba(255,255,255,.88)}
body[data-gtheme="dark"] .sl-puce-perso{background:transparent;border-color:rgba(221,203,164,.22);color:rgba(255,255,255,.7)}
body[data-gtheme="dark"] .sl-puce-alerte{background:rgba(204,107,90,.18);color:#E8A79A}
body[data-gtheme="dark"] .sl-compte{color:#DDCBA4}
body[data-gtheme="dark"] .sl-etat-brouillon{background:rgba(224,164,88,.18);color:#E0A458}
body[data-gtheme="dark"] .sl-etat-publie{background:rgba(143,169,134,.18);color:#8FA986}
body[data-gtheme="dark"] .sl-etat-archive{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6)}
body[data-gtheme="dark"] .sl-etat-expire{background:rgba(204,107,90,.18);color:#CC6B5A}
body[data-gtheme="dark"] .sl-avert{background:rgba(204,107,90,.16);color:#E8A79A}
body[data-gtheme="dark"] .sl-note{background:rgba(224,164,88,.14);color:#E0A458}
body[data-gtheme="dark"] .sl-attente{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6)}
body[data-gtheme="dark"] .sl-bilan,
body[data-gtheme="dark"] .sl-sous-titre{color:rgba(255,255,255,.94)}

/* ── Icônes du module Projets ─────────────────────────────────────────
   `ico()` (tasks.js) émet <svg class="gicon tk-ic"><use href="…#nom">.
   `.gicon` de shell.css est pensé pour le rail (display:block) ; dans
   Projets l'icône vit DANS le fil du texte : inline, calée sur la ligne
   de base, à la couleur du texte. Même contrat que `.crm-ic`. */
.tk-ic { display: inline-block; vertical-align: -.16em; width: 1.05em; height: 1.05em; flex: none; overflow: visible; }
.tasks-empty-icon .tk-ic, .hc-ico .tk-ic, .tpc-icon .tk-ic, .tesp-it-ico .tk-ic { width: 1em; height: 1em; vertical-align: -.12em; }
.tpc-fav.on .tk-ic { color: #d9a400; }

/* =====================================================================
   ATELIER DES ANNONCES — écran complet (public/js/annonces.js)
   =====================================================================
   Trois colonnes : le calendrier, la rédaction, l'aperçu. La boîte de
   dialogue d'avant faisait 520 px de large et ne pouvait accueillir ni une
   barre de mise en forme, ni les trois traductions, ni la liste des
   annonces à venir — c'est la place qui manquait, pas les fonctions.

   z-index 10088 : SOUS le popup d'annonce (10090). Si une annonce paraît
   pendant qu'on en rédige une autre, elle doit passer devant — c'est la
   seule façon de voir ce que les autres voient, et l'atelier n'a rien
   d'urgent à côté. */
.gann-atelier {
    position: fixed; inset: 0; z-index: 10088;
    background: var(--bg-app, #F6F2E9); color: inherit;
    display: flex; flex-direction: column;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
body[data-gtheme="dark"] .gann-atelier { background: #1f1d1a; }
.gann-top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 18px; border-bottom: 1px solid rgba(168, 134, 63, 0.28); flex: 0 0 auto;
}
.gann-top-title { font-size: 1.05rem; font-weight: 800; }
.gann-body {
    flex: 1 1 auto; min-height: 0; display: grid; gap: 14px; padding: 14px 18px;
    grid-template-columns: 17rem minmax(0, 1fr) 23rem;
}
.gann-cal, .gann-edit, .gann-prev { min-width: 0; min-height: 0; overflow-y: auto; }
.gann-cal { display: flex; flex-direction: column; gap: 8px; }
.gann-cal-list { display: flex; flex-direction: column; gap: 6px; }
.gann-cal-item {
    display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
    border: 1px solid rgba(168, 134, 63, 0.26); border-radius: 10px; padding: 8px 10px;
    background: rgba(253, 251, 246, 0.6); color: inherit; font: inherit;
}
.gann-cal-item:hover { background: rgba(168, 134, 63, 0.12); }
.gann-cal-item.on { border-color: #A8863F; box-shadow: inset 0 0 0 1px #A8863F; }
/* Le filet rouge à gauche dit « celle-ci est SOUS LES YEUX de tout le monde
   en ce moment » — l'information qu'on veut voir avant de cliquer Publier. */
.gann-cal-item.live { border-left: 3px solid #c62828; }
.gann-cal-when { font-size: 0.72rem; font-weight: 700; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.04em; }
.gann-cal-txt { font-size: 0.86rem; line-height: 1.35; overflow-wrap: anywhere; }
.gann-cal-meta { font-size: 0.72rem; opacity: 0.65; }
.gann-cal-vide { font-size: 0.85rem; opacity: 0.7; padding: 10px 2px; }
body[data-gtheme="dark"] .gann-cal-item { background: rgba(221, 203, 164, 0.06); border-color: rgba(221, 203, 164, 0.2); }

.gann-edit { display: flex; flex-direction: column; gap: 10px; }
.gann-edit-title { font-size: 0.95rem; font-weight: 800; }
.gann-src { min-height: 9rem; }
.gann-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gann-lbl { font-size: 0.8rem; font-weight: 700; opacity: 0.8; }
.gann-author { flex: 1 1 8rem; min-width: 0; max-width: 14rem; }
.gann-audience { flex: 1 1 12rem; min-width: 0; max-width: 22rem; }
.gann-att-slot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gann-att-name { font-size: 0.85rem; font-weight: 600; overflow-wrap: anywhere; }
.gann-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
/* Supprimer est à l'opposé de Publier, pas à côté : les deux gestes sont
   irréversibles et se ressemblent trop de près. */
.gann-del { margin-right: auto; }

.gann-tr-box {
    border: 1px solid rgba(168, 134, 63, 0.26); border-radius: 10px; padding: 8px 10px;
    display: flex; flex-direction: column; gap: 6px;
}
.gann-tr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gann-tr-tabs { display: flex; gap: 4px; }
.gann-tr-tab {
    border: 1px solid rgba(168, 134, 63, 0.3); background: transparent; color: inherit;
    border-radius: 7px; padding: 3px 9px; font-size: 0.8rem; cursor: pointer;
}
.gann-tr-tab.on { background: #A8863F; color: #fff; border-color: #A8863F; }
.gann-tr-badge { font-size: 0.78rem; opacity: 0.8; }
.gann-tr-badge.ok { color: #2e7d32; opacity: 1; font-weight: 700; }
.gann-tr-badge.alerte { color: #c62828; opacity: 1; font-weight: 700; }
body[data-gtheme="dark"] .gann-tr-badge.ok { color: #a5d6a7; }
body[data-gtheme="dark"] .gann-tr-badge.alerte { color: #ff8a80; }
.gann-tr-txt { width: 100%; }

.gann-prev { display: flex; flex-direction: column; gap: 8px; }
.gann-prev-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8rem; font-weight: 700; opacity: 0.8; }
/* L'aperçu EMPRUNTE .gannounce-card : même fond, même filet doré, même
   typographie que le vrai popup. On ne corrige que ce qui tient à sa place
   dans une colonne — la largeur et l'ombre portée. */
.gann-prev-card { max-width: none; width: 100%; max-height: none; box-shadow: none; }
.gann-prev-att { font-size: 0.85rem; }

@media (max-width: 1180px) {
    /* Sous 1180 px les trois colonnes deviennent trois bandes illisibles.
       Pas 1100 px : test/tasks-gestion-onglet.test.js interdit ce point de
       rupture dans TOUT le fichier, parce qu'il y masquait jadis une colonne
       au milieu d'une grille. L'interdiction est plus large que son motif,
       mais l'atelier n'a aucune raison de tenir à ce chiffre-là.
       On empile, et on laisse l'écran entier défiler d'un seul tenant. */
    .gann-body { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
    .gann-cal, .gann-edit, .gann-prev { overflow: visible; }
    .gann-cal-list { max-height: 14rem; overflow-y: auto; }
}