et affichent `agent-parle.js` : le visage rond, le prénom, le métier, la phrase. Les autres reçoivent `bandeau-agent.js`, qui pose un `.ba-bandeau` — une bande sans visage, avec le prénom à gauche en colonne. Deux habillages pour la même chose, donc l'écran change de tête selon qu'il a été refait ou non. ENSUITE, LE TEXTE S'ARRÊTE PARCE QU'IL A UN PLAFOND : `.ba-mot` porte un `max-width:62ch`. Dans une carte en colonne c'est une bonne mesure de lecture ; dans cette bande en ligne, ça laisse cinq cents pixels de vide avant le bouton. On ne touche ni au script, ni aux mots, ni au bouton : on rhabille le bandeau comme le mot de l'agent, et on retire le plafond là où il ne sert plus. ═══════════════════════════════════════════════════════════════════════════ */ /* `.ba-bandeau.ba-calme` est plus spécifique dans happia-v5.css : on reprend la même spécificité pour le conteneur aussi, sinon le visage reste centré. */ body.hv5 .ba-bandeau, body.hv5 .ba-bandeau.ba-calme{ display:flex !important; align-items:flex-start !important; gap:16px !important; background:var(--v5-bulle) !important; color:var(--v5-encre) !important; border:1px solid var(--v5-filet) !important; border-left:3px solid var(--ne-c, var(--v5-filet)) !important; border-radius:20px !important; padding:20px 24px !important; margin:0 0 20px !important; min-height:0 !important; overflow:visible !important; } /* le visage : l'image debout, cadrée en rond sur la tête, comme le mot de l'agent */ /* `.ba-calme img.ba-debout{display:none}` est plus spécifique dans happia-v5.css : on reprend la même spécificité, sinon le visage reste caché. */ body.hv5 .ba-bandeau img.ba-debout, body.hv5 .ba-bandeau.ba-calme img.ba-debout{ display:block !important; order:-1; flex:none !important; width:44px !important; height:44px !important; margin:0 !important; align-self:flex-start !important; border-radius:50% !important; border:0 !important; background:var(--v5-bulle-2) !important; object-fit:cover !important; object-position:50% 50% !important; } body.hv5 .ba-bandeau .ba-c, body.hv5 .ba-bandeau.ba-calme .ba-c{ display:block !important; flex:1 1 auto !important; min-width:0; padding:0 !important; } body.hv5 .ba-qui, body.hv5 .ba-bandeau.ba-calme .ba-qui{ font-family:Inter,"Inter Repli",system-ui,sans-serif !important; font-size:11px !important; font-weight:600 !important; letter-spacing:.09em !important; text-transform:uppercase !important; color:var(--v5-encre-3) !important; opacity:1 !important; margin:0 0 5px !important; } body.hv5 .ba-bandeau .ba-p{ font-family:var(--pf-head) !important; font-weight:600 !important; font-size:17px !important; line-height:1.4 !important; letter-spacing:-.015em !important; color:var(--v5-encre) !important; margin:0 0 8px !important; } body.hv5 .ba-mot, body.hv5 .ba-bandeau.ba-calme .ba-mot{ max-width:none !important; margin:0 !important; opacity:1 !important; font-size:14.5px !important; line-height:1.6 !important; color:var(--v5-encre) !important; } body.hv5 a.ba-parler, body.hv5 .ba-bandeau.ba-calme a.ba-parler{ margin-top:14px !important; padding:6px 14px !important; background:transparent !important; color:var(--v5-encre) !important; border:1px solid var(--v5-encre) !important; border-radius:999px !important; font-size:12.5px !important; font-weight:600 !important; } body.hv5 a.ba-parler:hover{ background:var(--v5-encre) !important; color:var(--v5-fond) !important } /* ── 25 · LA TOURNÉE DES ÉCRANS, 22/09 AU SOIR ─────────────────────────── Relevé écran par écran dans Chrome, sur le site en direct. · « Demander à … » avait un contour corail sur tous les écrans. Le bouton vit dans la bande de l'agent : il prend sa couleur, comme son visage. · les cases « pas cité » de la matrice avaient un fond gris EN PLUS de leur contour pointillé : elles se lisaient comme une case pleine, donc comme une citation. Le vide doit rester vide. */ body.hv5 .ne-demander{ border-color:var(--ne-c, var(--v5-encre)) !important } body.hv5 .main .tb-mat .c.non, body.hv5 .app .main .tb-mat .c.non{ background:transparent !important } /* ── 26 · CE QUI EST CHOISI EST UN MOT, PAS UN APLAT ───────────────────── Sur « À faire », le filtre retenu était un pavé orange plein — la couleur de Pim posée sur un bouton. Même chose sur d'autres écrans avec d'autres familles de boutons que la section 13 ne nommait pas : `.filter-btn.active`, `.diff-btn.active`, les bascules de période, les puces de métrique. Un choix se marque par un mot à l'encre dans un contour fin, partout. */ body.hv5 .main .filter-btn.active, body.hv5 .main .diff-btn.active, body.hv5 .main .period-toggle button.active, body.hv5 .main .range-tabs button.on, body.hv5 .main .metric-select button.on, body.hv5 .main .sw-chip.on, body.hv5 .main .cmt-per.on, body.hv5 .main .rvf-pill.on, body.hv5 .main .toggle-pill.on, body.hv5 .main .seg.on, body.hv5 .main .tab.active, body.hv5 .main .tab.on, body.hv5 .main .pill.on, body.hv5 .main .chip.on, body.hv5 .app .main .filter-btn.active, body.hv5 .app .main .diff-btn.active, body.hv5 .app .main .period-toggle button.active, body.hv5 .app .main .range-tabs button.on, body.hv5 .app .main .metric-select button.on, body.hv5 .app .main .sw-chip.on, body.hv5 .app .main .cmt-per.on, body.hv5 .app .main .rvf-pill.on, body.hv5 .app .main .toggle-pill.on, body.hv5 .app .main .seg.on, body.hv5 .app .main .tab.active, body.hv5 .app .main .tab.on, body.hv5 .app .main .pill.on, body.hv5 .app .main .chip.on{ background:transparent !important; color:var(--v5-encre) !important; border:1px solid var(--v5-encre) !important; font-weight:600 !important; box-shadow:none !important; } /* ── 27 · « À FAIRE » : TROIS DERNIERS FOYERS DE COULEUR ───────────────── Relevé sur l'écran des actions, où la couleur revenait par trois chemins que les sections précédentes ne couvraient pas : · `.hv5-btn` — le bouton « Choisir » était un aplat plein dans la couleur d'un agent. Un bouton principal se lit à l'encre, comme sur la maquette validée. · `.ne-ag` — chaque ligne « par agent » pose `--c:` en ligne, et cette variable teintait les compteurs. Le visage et le prénom disent déjà de qui il s'agit ; la teinte ne fait que répéter. · `.hv5-bulle` — un filet vertical de couleur par agent sur chaque action. Même raison : la ligne porte déjà le visage et le prénom. La couleur d'agent reste intacte dans la bande du haut, où elle sert. */ body.hv5 .main .hv5-btn, body.hv5 .main a.hv5-btn, body.hv5 .app .main .hv5-btn, body.hv5 .app .main a.hv5-btn{ background:var(--v5-encre) !important; color:var(--v5-fond) !important; border:1px solid var(--v5-encre) !important; border-radius:999px !important; } body.hv5 .main .hv5-btn:hover, body.hv5 .app .main .hv5-btn:hover{ background:var(--v5-encre-2) !important } body.hv5 .main .ne-ag, body.hv5 .app .main .ne-ag{ --c:var(--v5-encre) !important; --c-rgb:23,23,23 !important } body.hv5 .main .hv5-bulle, body.hv5 .app .main .hv5-bulle{ border-left-color:var(--v5-filet) !important } /* ── 28 · LE KANBAN DES ACTIONS ────────────────────────────────────────── `actions.html` peint ses lignes avec un sélecteur d'identifiant (`#kanban`), qui passe devant toute règle de classe : le bouton « Choisir » restait un aplat plein dans la couleur de l'agent, et chaque ligne portait un filet vertical de 4 px de la même couleur. On reprend la même spécificité. Le lavis à 4 % reste : c'est une nuance, pas un aplat, et il aide à séparer les lignes ouvertes. Le visage garde son cerne — c'est lui qui identifie. */ body.hv5 #kanban .voie-action .hv5-btn.petit{ background:var(--v5-encre) !important; border-color:var(--v5-encre) !important; color:var(--v5-fond) !important; border-radius:999px !important; } body.hv5 #kanban .hv5-bulle[data-poste]{ border-left-color:var(--v5-filet) !important } /* ── 29 · LE TITRE D'ÉCRAN SE LIT COMME UNE PHRASE ─────────────────────── `.gb-titre h1` était en capitales, et son sous-titre aussi : « MA FICHE GOOGLE / TA FICHE TELLE QUE GOOGLE LA SERT, COMPARÉE AUX FICHES QUI SORTENT DEVANT TOI… ». Trois lignes de capitales ne se lisent pas, elles se déchiffrent, et le site n'en met nulle part. On revient à la casse normale, celle de la maquette validée : le titre en Sora,"Sora Repli",le sujet en une phrase grise. */ body.hv5 .main h1, body.hv5 .gb-titre h1, body.hv5 .dh-mots h1{ text-transform:none !important } body.hv5 .gb-sujet{ text-transform:none !important; letter-spacing:normal !important; font-weight:400 !important } /* ── 30 · LA COULEUR DE L'AGENT S'ARRÊTE À LA BANDE ────────────────────── Écran après écran, la même couleur revenait par un chemin différent : une barre de calendrier, un bouton de kanban, un compteur, un filet de ligne. À chaque fois la source était la même variable, `--ne-c`, la couleur brute de l'agent, posée sur :root par nav-equipe.js et lue par des dizaines de règles dans les écrans. La section 10 avait déjà neutralisé ses dérivées (--v5-vert, --ne-texte, --ne-rgb, --ne-rgb-v) mais pas la racine. On la ramène donc à l'encre DANS LE CONTENU. Elle reste intacte sur `.app`, donc dans la bande du haut, les visages et la navigation, là où elle sert à reconnaître quelqu'un. Deux exceptions, rendues explicitement : le filet vertical du mot de l'agent et celui de son bandeau. C'est sa signature, et la seule qu'il garde ici. Elles lisent `--gb-accent`, que nav-equipe.js mesure pour rester lisible. */ body.hv5 .main, body.hv5 main, body.hv5 .app .main, body.hv5 .app main{ --ne-c:var(--v5-encre) } body.hv5 .main .gb-mot, body.hv5 .main .ba-bandeau, body.hv5 main .gb-mot, body.hv5 main .ba-bandeau, body.hv5 .app .main .gb-mot, body.hv5 .app .main .ba-bandeau, body.hv5 .app main .gb-mot, body.hv5 .app main .ba-bandeau{ border-left-color:var(--gb-accent, var(--v5-encre)) !important; } /* ── 31 · LES SEGMENTS DE BARRE ÉCRITS EN LIGNE ────────────────────────── Dernier chemin relevé, sur le calendrier : les segments d'une barre empilée sont peints par un style EN LIGNE, `background:rgba(var(--ne-rgb-v),.45)`. Comme la section 10 ramène ce triplet au corail, « publiées » se dessinait en corail translucide juste à côté de « date passée » en corail plein : deux rouges côte à côte, dont un qui n'alerte pas. Dans tout le back-office, le remplissage d'une barre est un . On les ramène donc à l'encre quand ils lisent la couleur d'agent ; ceux qui lisent `--v5-ambre` gardent le rouge, puisque eux alertent vraiment. */ body.hv5 .main i[style*="background"][style*="ne-rgb-v"], body.hv5 .main i[style*="background"][style*="ne-c"], body.hv5 .main i[style*="background"][style*="--ag"], body.hv5 .app .main i[style*="background"][style*="ne-rgb-v"], body.hv5 .app .main i[style*="background"][style*="ne-c"], body.hv5 .app .main i[style*="background"][style*="--ag"]{ background:var(--v5-encre) !important; } /* ── 32 · LE SOMBRE SUIT LES MÊMES RÈGLES QUE LE CLAIR ─────────────────── Les sections 9, 10 et 11 avaient été écrites en pleine urgence pour le thème clair, et ne s'appliquaient qu'à lui : en sombre, l'onglet ouvert restait une pastille bleue pleine, la pastille d'étape un aplat, et la couleur d'agent n'était pas ramenée à l'encre dans le contenu. Deux thèmes, deux grammaires, c'est exactement ce qu'on cherche à finir. Mêmes règles, jetons du thème. */ body.hv5:not(.clair).ne-teinte .app, body.hv5:not(.clair).ne-teinte main, body.hv5:not(.clair).ne-teinte .main{ --v5-vert:#F04438; --v5-vert-2:#D93B30; --ne-texte:var(--v5-encre); --ne-rgb-v:240,68,56; --ne-rgb:240,68,56; } body.hv5:not(.clair) .ne-pg{ background:transparent !important; color:var(--v5-encre-2) !important; border:0 !important; border-radius:0 !important; padding:8px 14px !important; font-weight:500 !important; } body.hv5:not(.clair) .ne-pg.on, body.hv5:not(.clair) .ne-pg[aria-current="page"], body.hv5:not(.clair) .ne-pg.actif{ color:var(--v5-encre) !important; font-weight:600 !important; box-shadow:inset 0 -2px 0 var(--gb-accent, #F04438) !important; } body.hv5:not(.clair) .ne-demander{ border:1px solid var(--ne-c, var(--v5-encre)) !important; color:var(--v5-encre) !important; background:transparent !important; } body.hv5:not(.clair) .bc-etape{ background:transparent !important; color:var(--v5-encre-3) !important; border:1px solid var(--v5-filet) !important; } body.hv5:not(.clair) .bc-etape.on{ color:var(--v5-encre) !important; border-color:var(--v5-encre) !important; font-weight:600 !important; } /* et l'onglet ouvert du clair prend lui aussi l'accent de l'écran, pas un corail figé */ body.hv5.clair .ne-pg.on, body.hv5.clair .ne-pg[aria-current="page"], body.hv5.clair .ne-pg.actif{ box-shadow:inset 0 -2px 0 var(--gb-accent, #F04438) !important; } /* ── 33 · UN BOUTON PLEIN SE LIT À L'ENCRE ─────────────────────────────── Dernier foyer, et le plus gênant : DANS LE CONTENU, L'ACCENT ET L'ALERTE ÉTAIENT LA MÊME COULEUR. La section 10 avait ramené l'accent des écrans au corail de la marque ; depuis qu'on réserve le rouge à ce qui ne va pas, un bouton « Acheter » ou une barre d'abonnement en corail se lisent comme un problème. Sur « Mon abonnement », tout l'écran semblait en alerte alors que la formule est active. La liste ci-dessous n'est pas inventée : c'est celle que happia-v5.css énumère déjà pour poser l'encre SUR l'accent, autrement dit la liste des boutons pleins du produit, moins les bascules (section 26) et les barres (section 22). Ils passent à l'encre, comme le « Ouvrir » de la maquette. Le corail reste sur le site, le logo et la bande ; le rouge sur ce qui alerte. */ body.hv5 .main .a-card .a-btn.agent, body.hv5 .main .b-pub, body.hv5 .main .b-save, body.hv5 .main .btn-add, body.hv5 .main .btn-go, body.hv5 .main .btn-ink, body.hv5 .main .btn-mint, body.hv5 .main .btn-pri, body.hv5 .main .btn-pri:hover, body.hv5 .main .btn-primary, body.hv5 .main .btn-product, body.hv5 .main .btn-send, body.hv5 .main .btn.add, body.hv5 .main .btn.btn-copy, body.hv5 .main .btn.btn-mint, body.hv5 .main .btn.mint, body.hv5 .main .catalog-add-btn, body.hv5 .main .check-meta .cm-actor.happia, body.hv5 .main .cop-bar button, body.hv5 .main .est-card .badge, body.hv5 .main .f-cta-ink, body.hv5 .main .f-cta-mint, body.hv5 .main .freemium-banner .cta, body.hv5 .main .freemium-banner .cta:hover, body.hv5 .main .ha-btn, body.hv5 .main .hag-drawer-head .ico, body.hv5 .main .hag-fab, body.hv5 .main .hag-form button.send-btn, body.hv5 .main .hf-btn-primary, body.hv5 .main .hf-midcta-card, body.hv5 .main .hp-btn, body.hv5 .main .hp-gate-head, body.hv5 .main .md .copy-block .cb-copy.copied, body.hv5 .main .notif-close-btn, body.hv5 .main .partner-cta, body.hv5 .main .quota-banner, body.hv5 .main .rp-cta, body.hv5 .main .section-paywall .lock-cta, body.hv5 .main .section-paywall .lock-cta:hover, body.hv5 .main .src-actions-cta a:hover, body.hv5 .main .sw-btn-primary, body.hv5 .main .sw-conn .conn-btn, body.hv5 .main .upgrade a.cta, body.hv5 .main .veille-paywall .btn-cta, body.hv5 .main .wg-lock-cta, body.hv5 .app .main .a-card .a-btn.agent, body.hv5 .app .main .b-pub, body.hv5 .app .main .b-save, body.hv5 .app .main .btn-add, body.hv5 .app .main .btn-go, body.hv5 .app .main .btn-ink, body.hv5 .app .main .btn-mint, body.hv5 .app .main .btn-pri, body.hv5 .app .main .btn-pri:hover, body.hv5 .app .main .btn-primary, body.hv5 .app .main .btn-product, body.hv5 .app .main .btn-send, body.hv5 .app .main .btn.add, body.hv5 .app .main .btn.btn-copy, body.hv5 .app .main .btn.btn-mint, body.hv5 .app .main .btn.mint, body.hv5 .app .main .catalog-add-btn, body.hv5 .app .main .check-meta .cm-actor.happia, body.hv5 .app .main .cop-bar button, body.hv5 .app .main .est-card .badge, body.hv5 .app .main .f-cta-ink, body.hv5 .app .main .f-cta-mint, body.hv5 .app .main .freemium-banner .cta, body.hv5 .app .main .freemium-banner .cta:hover, body.hv5 .app .main .ha-btn, body.hv5 .app .main .hag-drawer-head .ico, body.hv5 .app .main .hag-fab, body.hv5 .app .main .hag-form button.send-btn, body.hv5 .app .main .hf-btn-primary, body.hv5 .app .main .hf-midcta-card, body.hv5 .app .main .hp-btn, body.hv5 .app .main .hp-gate-head, body.hv5 .app .main .md .copy-block .cb-copy.copied, body.hv5 .app .main .notif-close-btn, body.hv5 .app .main .partner-cta, body.hv5 .app .main .quota-banner, body.hv5 .app .main .rp-cta, body.hv5 .app .main .section-paywall .lock-cta, body.hv5 .app .main .section-paywall .lock-cta:hover, body.hv5 .app .main .src-actions-cta a:hover, body.hv5 .app .main .sw-btn-primary, body.hv5 .app .main .sw-conn .conn-btn, body.hv5 .app .main .upgrade a.cta, body.hv5 .app .main .veille-paywall .btn-cta, body.hv5 .app .main .wg-lock-cta{ background:var(--v5-encre) !important; border-color:var(--v5-encre) !important; color:var(--v5-fond) !important; } /* ── 34 · « MON ABONNEMENT » ───────────────────────────────────────────── Les trois derniers éléments de cet écran, nommés par des classes qui lui sont propres : la frise de la période et la jauge de crédits (du temps et des crédits consommés, donc le dégradé de la marque), et le segment choisi du sélecteur de formule (un contour, comme partout ailleurs). */ body.hv5 .main .fa-frise-barre > i, body.hv5 .main .fa-obj-barre > i, body.hv5 .app .main .fa-frise-barre > i, body.hv5 .app .main .fa-obj-barre > i{ background:linear-gradient(90deg,#F04438,#3155D9) !important; } body.hv5 .main .fseg-btn.on, body.hv5 .app .main .fseg-btn.on{ background:transparent !important; color:var(--v5-encre) !important; border:1px solid var(--v5-encre) !important; font-weight:600 !important; } body.hv5 .main .fa-rang .f-cta-ink, body.hv5 .main button.f-cta-ink, body.hv5 .app .main .fa-rang .f-cta-ink, body.hv5 .app .main button.f-cta-ink{ background:var(--v5-encre) !important; border-color:var(--v5-encre) !important; color:var(--v5-fond) !important; } /* ── 35 · « TESTER DANS LES IA » : LA MISE EN PAGE ─────────────────────── Christophe : « ici la mise en page est difficilement lisible ». La cause principale est corrigée en section 5 (la ligne était passée en grid, donc empilée). Restent quatre choses propres à cet écran. · Les deux colonnes étaient à 50/50 : à gauche huit marques avec leur barre et leur geste, à droite un formulaire court. La liste n'avait pas la place de tenir sur un rang, le formulaire avait trop de place. On donne l'espace à celle qui en a besoin, et les deux blocs s'alignent en haut au lieu de s'étirer à la même hauteur. · Dans « Ce qu'il y a à faire », le mode d'emploi du chevron était collé au titre : « Aucune IA ne te cite sur X ouvre pour voir les façons d'y répondre » se lisait comme une seule phrase. Il passe sur sa propre ligne. · Une action à mener et un repli à lire se ressemblaient trait pour trait. L'action prend une carte, le repli reste une ligne fine. · Le surtitre de « Mon historique » n'était pas un surtitre. */ body.hv5 .vi-deux{ grid-template-columns:1.8fr 1fr !important; align-items:start !important } body.hv5 #ia-cites .gb-mesure{ width:auto !important } body.hv5 #ia-cites .gb-piste{ width:72px !important; flex:none !important } body.hv5 #ia-cites .gb-geste, body.hv5 #ia-cites .gb-rien{ width:146px !important; padding-left:8px !important; padding-right:8px !important; box-sizing:border-box; text-align:center !important } body.hv5 #ia-cites .gb-mesure b{ width:auto !important; min-width:72px } body.hv5 #ia-cites .gb-ligne{ gap:16px } /* 29/09 (capture de Christophe, « problème de mise en page ») : · « Le suivre à la place d'un autre » ne tenait pas dans sa colonne de 120 px et sortait de la carte, coupé. Le geste dit maintenant « Le suivre » ; la règle des trois concurrents reste écrite dans le pied de la liste. La colonne passe à 146 px, la largeur de « Me comparer à lui », pour que tous les gestes s'alignent. · En fond Blanc, `body.hv5.clair .gb-ligne{display:flex}` passait devant `details.gb-ligne{display:block}` : dans chaque carte « Ce qu'il y a à faire », le résumé devenait un élément flex qui rétrécissait à son texte. D'où des cartes dont le chevron n'est jamais au même endroit, et un pavé beige plus étroit que la carte au survol (collé sur iPad, où le survol reste après un toucher). · La carte d'action avait deux gouttières empilées (la carte et son résumé). Une seule. */ body.hv5.clair details.gb-ligne{ display:block !important } body.hv5 #ia-actions details.gb-ligne.ouvrable, body.hv5.clair #ia-actions details.gb-ligne.ouvrable{ padding:0 !important; overflow:hidden } body.hv5 #ia-actions details.gb-ligne.ouvrable > summary{ padding:16px 20px; border-radius:0 } body.hv5 #ia-actions details.gb-ligne.ouvrable .gb-dedans{ padding:0 20px 18px } @media (hover:none){ body.hv5 details.gb-ligne > summary:hover{ background:transparent } } /* le mode d'emploi descend sous le titre de l'action */ body.hv5 #ia-actions .gb-ligne.ouvrable .gb-quoi{ align-items:baseline } body.hv5 #ia-actions .gb-ligne.ouvrable .gb-precision{ flex-basis:100%; order:3; font-size:11.5px; color:var(--v5-encre-3); margin-top:2px; } /* une action à mener est une carte, un repli reste une ligne */ body.hv5.clair #ia-actions .gb-ligne.ouvrable{ background:#FFFFFF !important; border:1px solid #E4E7EC !important; border-radius:18px !important; padding:16px 18px !important; margin-bottom:12px; box-shadow:var(--v5-verre-ombre) !important; /* 28/09 : l'ombre teintée de la page */ } body.hv5:not(.clair) #ia-actions .gb-ligne.ouvrable{ background:var(--v5-bulle) !important; border:1px solid var(--v5-filet) !important; border-radius:18px !important; padding:16px 18px !important; margin-bottom:12px; } body.hv5 #ia-actions .gb-ligne.ouvrable .gb-quoi b{ font-family:var(--pf-head); font-size:15px } /* le surtitre est le même partout, y compris hors d'un bloc « gb-detail » */ body.hv5 .gb-intitule{ font-family:Inter,"Inter Repli",system-ui,sans-serif !important; font-size:10.5px !important; font-weight:600 !important; letter-spacing:.11em !important; text-transform:uppercase !important; color:var(--v5-encre-3) !important; } /* ── 36 · L'ACCENT DU CONTENU EST L'ENCRE, JUSQUE DANS LES STYLES EN LIGNE ── La bascule « 30 jours » était un pavé rouge plein. Son fond est écrit en ligne par l'écran : `background:var(--v5-vert)`, et la section 10 avait ramené ce jeton au corail de la marque. Or depuis qu'on réserve le rouge à ce qui alerte, un onglet choisi en corail se lit comme un problème. On ramène donc l'accent lui-même à l'encre dans le contenu : tout ce qui lit `--v5-vert` en ligne suit, sans qu'on ait à nommer chaque écran. Le texte posé dessus devient le fond de la page, pour rester lisible dans les deux thèmes. */ body.hv5 .main, body.hv5 main, body.hv5 .app .main, body.hv5 .app main{ --v5-vert:var(--v5-encre); --v5-vert-2:var(--v5-encre-2); --v5-vert-encre:var(--v5-fond); } /* et cette bascule-ci reste une bascule : un mot dans un contour */ body.hv5 .app .main .hp-periode button{ background:transparent !important; color:var(--v5-encre-2) !important; border:1px solid var(--v5-filet) !important; font-weight:500 !important; } body.hv5 .app .main .hp-periode button[style*="--v5-vert"]{ color:var(--v5-encre) !important; border-color:var(--v5-encre) !important; font-weight:600 !important; } /* un dépliable ouvre par son chevron de droite : plus de triangle natif à gauche */ body.hv5 .main summary, body.hv5 .app .main summary{ list-style:none } body.hv5 .main summary::-webkit-details-marker, body.hv5 .app .main summary::-webkit-details-marker{ display:none } /* ── 37 · DEUX NIVEAUX D'ALERTE, PAS UN SEUL ───────────────────────────── En ramenant l'ambre sur le rouge de la marque (section 23), j'ai mis au même niveau « à surveiller » et « bloqué ». Sur « Tester dans les IA », le chiffre « 42 autres marques citées » sortait donc en rouge vif à côté de deux chiffres à l'encre, alors que c'est un constat, pas un problème. On rend la distinction : ce qui bloque garde le rouge, ce qui est seulement à surveiller revient à l'encre. Le mot du libellé dit déjà de quoi il s'agit. */ body.hv5 .main .gb-chiffre.surveiller .gb-valeur, body.hv5 .app .main .gb-chiffre.surveiller .gb-valeur{ color:var(--v5-encre) !important } /* ── 38 · L'ACCENT DE L'AGENT DANS LES TITRES, SUR TOUS LES ÉCRANS ─────── 23/09/2026, Christophe : « j'avais demandé à avoir des titres avec des touches des couleurs des agents ». Le 22 au soir, seuls trois écrans avaient reçu leurs `` ; les vingt-cinq autres sortaient tout à l'encre. Ils les ont tous, maintenant, posés à la main : un seul fragment par conclusion, jamais la phrase entière. La règle de la section 20 ne portait que `body.hv5 .ag`. Plusieurs écrans posent la couleur de leur conclusion dans un `