/* ========================================================================= mails.css — onglet « Mails » de la section Campagne (17/08/2026). Cette feuille est servie à tous (comme les autres CSS) : elle ne nomme AUCUN module à privilège ni aucune route d'API — uniquement ses propres classes ml-*. Le module qui l'utilise, lui, n'est servi qu'aux sessions autorisées. Conventions liquid-glass du dépôt (.glass, tokens --txt/--muted/--dim/ --line/--accent/--ok/--danger/--lum/--gold/--notif). Aucune animation d'ambiance : un fil de conversation se lit, il ne se contemple pas — la seule exception est le halo « non lu », qui est un SIGNAL et qui réutilise les classes partagées .lum-glow / .lum-float d'app.css §16b. 19/08/2026 — la liste montre une ligne par SOCIÉTÉ (et non par message) : colonne du kanban, favori, note de contact et compteur de non-lus, plus un filtre par colonnes. Et l'échange lui-même vit dans UN cadre défilant. ========================================================================= */ .ml-root{display:flex;flex-direction:column;gap:14px} .ml-bloc{padding:16px 18px} /* ---------- Bandeau d'état de la relève ------------------------------------ */ .ml-etat{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .ml-etat .ic{width:20px;height:20px;flex:none} .ml-etat-txt{flex:1;min-width:220px} .ml-etat-titre{margin:0;font-size:14px;font-weight:700} .ml-etat-detail{margin:3px 0 0;font-size:12.5px;line-height:1.5} /* Vert = la boîte est branchée et la dernière relève a réussi ; rouge = il manque un réglage ou la dernière relève a échoué. Le texte dit la même chose : la couleur ne porte jamais seule l'information. */ .ml-etat-ko{border-left:3px solid color-mix(in srgb, var(--danger) 65%, transparent)} .ml-etat-ko .ic{color:var(--danger)} /* État NORMAL (22/08/2026) : plus de case — une ligne sobre, bouton + dernière relève. La case ne subsiste que pour dire un PROBLÈME (ml-etat-ko ci-dessus : lecture non branchée, relève en échec). */ .ml-releve{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .ml-releve-date{font-size:12.5px} /* ---------- Filtre par colonnes du kanban ----------------------------------- */ /* Cases cumulables, même grammaire que les .fchip du reste de l'application (définies par liste.css, du bundle commun). Le compteur est une donnée réelle renvoyée par le serveur — jamais un ornement. */ .ml-colonnes{margin:0} .ml-col-n{margin-left:6px;color:var(--dim);font-size:11px;font-weight:800; font-variant-numeric:tabular-nums} .ml-col-chip.on .ml-col-n,.ml-col-tout.on .ml-col-n{color:var(--txt)} /* ---------- Liste des conversations (une ligne par société) ----------------- */ .ml-liste{display:flex;flex-direction:column;gap:8px} .ml-conv{display:flex;flex-direction:column;gap:5px;padding:12px 14px; cursor:pointer;transition:background .16s,transform .16s} .ml-conv:hover{background:rgba(255,255,255,.06);transform:translateY(-1px)} .ml-conv-tete{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0} /* Le nom est un VRAI bouton : la carte entière est cliquable, mais il faut une cible atteignable au clavier — et une seule, pas une par ligne de texte. */ .ml-conv-ouvrir{display:flex;align-items:center;gap:7px;min-width:0;padding:0; border:none;background:none;font:inherit;color:var(--txt);cursor:pointer} .ml-conv-ouvrir:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px; border-radius:6px} .ml-conv-nom{font-size:14px;font-weight:720;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .ml-conv-sujet{margin:0;font-size:13px} .ml-conv-extrait{margin:0;font-size:12px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .ml-conv-date{font-size:12px;flex:none} /* ---------- BLOC D'ACTIONS de la ligne (20/08/2026, point 1) ---------------- « Les boutons favoris ne doivent pas être à l'extrême gauche mais plutôt milieu-droite, comme dans le portefeuille, et les autres boutons aussi. » L'étoile était en tête de ligne depuis le 19/08 — c'était le point le plus lisible, mais aussi celui où l'œil cherche le NOM de la société. Elle rejoint donc le groupe d'actions, à droite, exactement comme `.lactions` du Portefeuille : même ordre (étoile · e-mail · LinkedIn · fiche), même écart de 6 px, même comportement au survol. Les boutons sont invisibles au repos et apparaissent au survol / au focus — règle héritée du Portefeuille, et pour la même raison : quatre boutons ronds sur cinquante lignes font une colonne de bruit. DEUX exceptions permanentes, parce qu'elles portent une information et pas seulement une action : l'étoile allumée (la société est suivie) et le vert d'une coordonnée connue. `visibility` et non `display` : la place reste réservée, les lignes ne sautent pas au passage de la souris. */ /* Bloc d'actions de la ligne — DEUX boutons depuis le 20/08/2026 (point 6 : e-mail et LinkedIn retirés). `width` explicite et non « ce que le contenu donne » : c'est la garantie demandée — « fais attention à ce que les boutons soient toujours au même endroit ». Deux boutons de 22 px et un intervalle de 6 px font 50 px, sur toutes les lignes, quel que soit l'état des boutons. La règle `.coord-oui` a disparu avec les boutons qu'elle révélait : seul le favori ACTIF reste visible hors survol, parce qu'il porte une information sur la société et pas une action disponible. */ /* 70px EXACTS = 32 + 6 + 32 (étoile + écart + fiche). À 50px, le second bouton était compressé en OVALE de 17px (retour Sylvain, SCRAPER FA 7) — la largeur reste FIXE pour l'alignement des lignes, mais elle doit être celle de son contenu. `flex:none` sur les boutons : un cercle ne se négocie pas avec le flex. */ .ml-conv-actions{display:flex;gap:6px;flex:none;margin-left:2px;width:70px} .ml-conv-actions .btn{visibility:hidden;flex:none} .ml-conv:hover .ml-conv-actions .btn, .ml-conv:focus-within .ml-conv-actions .btn, .ml-conv-actions .btn.on{visibility:visible} /* Compat : la classe historique de l'étoile reste posée par le script (ancre du harnais de tests). Elle n'habille plus rien. */ .ml-conv-star{flex:none} /* ---------- Colonne du kanban, modifiable sur place ------------------------- C'est un `