/* styles/happia-v5.css — LA FONTE GRAPHIQUE V5 DU BACK-OFFICE * * 2026-09-11 — Christophe : * « la première des choses, c'est de refaire la fonte graphique parce qu'en * fonction du graphisme qu'on va donner, on va trouver des solutions sur * les informations. » * « on donne une information. Il faut qu'en face, on ait une action. » * « c'était parfait avec les bulles mais faut qu'on arrive à le rendre plus * clair… juste ça » * * ── LA RÈGLE QUI A TOUT DÉBLOQUÉ ───────────────────────────────────────── * LA COULEUR N'EST PAS DANS LA BULLE, ELLE EST DANS LA PASTILLE. * * Première version : une bulle rouge pleine (le constat) contre une bulle * verte pleine (la réponse). Deux surfaces saturées par action, six à l'écran * pour trois actions — aucune ne reculait, l'œil ne savait pas où se poser. * Christophe : « c'est hyper surchargé, on n'arrive pas à comprendre où l'œil * doit aller. » * * Maintenant : UNE bulle par action, neutre (--v5-bulle), et des pastilles de * 11 px qui portent le sens et la couleur — ● CE QUI NE VA PAS, ● AUJOURD'HUI, * ● PROPOSÉ, ● CE QU'ON FAIT. Une seule chose reste pleine et colorée dans * tout l'écran : le bouton. * * Trois conséquences à ne pas défaire : * - une bulle ne prend JAMAIS de couleur de fond ; si tu veux signaler * quelque chose, ajoute une pastille ; * - il n'y a qu'un seul bouton plein par bulle ; * - le bouton est toujours au même endroit — en haut à droite d'une bulle * courte, au pied d'une bulle ouverte. On sait où cliquer sans chercher. * ───────────────────────────────────────────────────────────────────────── * * Le fichier est PORTÉ PAR `body.hv5` : tant qu'une page ne porte pas cette * classe, rien ici ne la touche. C'est ce qui permet de refaire le back-office * écran par écran sans casser les autres au passage. */ /* 🆕 11/09 — LES TROIS NIVEAUX SE VOYAIENT PLUS. * Mesure faite dans la page : fond→bulle 1,11 · bulle→bulle-2 1,07 · fond→bulle-2 * 1,03. Trois plans posés l'un sur l'autre et aucun ne se détachait — et pire, * la bulle INTÉRIEURE (une voie, un bloc de code) était plus SOMBRE que la carte * qui la contient : l'inverse de ce que l'œil attend, il lit ça comme un trou. * On remonte les deux bulles (fond inchangé, il tient au bleu) pour retrouver un * écart franc, et on remonte le filet et l'encre 4 d'autant, sinon ils se noient * dans la bulle éclaircie. Nouvelle mesure : fond→bulle 1,34 · bulle→bulle-2 1,21 * · fond→bulle-2 1,63, et la plus faible encre reste à 3,17 sur la bulle-2. */ /* ════════════════════════════════════════════════════════════════════════════ 13/09/2026, fin de journée — « Ok tu repasses tout le back-office en Papier. » Ce matin il avait tranché l'inverse : « Encre, c'est sûr, l'œil voit immédiatement les infos. » On a passé la journée à appliquer Encre, et à chaque écran il est revenu sur la même chose — « trop de gris », « plus de noir », « le minimum de gris partout ». Le gris était le symptôme ; le fond sombre était la cause. CE QUI CHANGE ICI, ET RIEN D'AUTRE : les valeurs des jetons. Pas une règle, pas un sélecteur, pas un écran. C'était la promesse du système V5 depuis le début, et c'est la première fois qu'on la met à l'épreuve pour de vrai. 🚨 UN THEME CLAIR NE S'OBTIENT PAS EN INVERSANT UN THEME SOMBRE. Une pastille sombre-sur-couleur devient une pastille couleur-sur-tache-claire ; l'ambre doit descendre de #E8B15C à #8A5A12 pour rester lisible sur du blanc cassé ; le vert monte en profondeur au lieu de descendre en saturation. Les fonds de pastille sont REDERIVES, pas retournés. 🚨 ET LE PIEGE DU CLAIR : fond #FBFBF9 contre bulle #F2F2EE, c'est 1,05 — trois plans posés l'un sur l'autre dont aucun ne se détache, exactement le défaut mesuré le 11/09 sur le bleu nuit. Sur fond clair on ne le rattrape pas en éclaircissant la bulle : il n'y a plus de place au-dessus. On la borde d'un filet — d'où --v5-bulle-bord, qui vaut `transparent` en Encre (là, la bulle se détache par sa clarté) et #DEDED6 en Papier. POUR REVENIR EN ENCRE : la palette est conservée entière sous `body.hv5.encre`. Une classe sur le suffit, et rien d'autre n'a besoin de bouger. ════════════════════════════════════════════════════════════════════════════ */ body.hv5 { /* ══ 19/09/2026, soir — LE BACK-OFFICE PASSE AU SOMBRE. ══ Christophe a fourni « Happia-reference-sombre » : la proposition A dans son apparence sombre, « c'est ce rendu qu'il attend ». Valeurs exactes de la référence : fond #242321, cartes et en-tête #302F2D, texte #F5F2EC / #C2BFB7, bordures #4A4741, accent et liens #A7B7FF, surfaces d'accent #303850. Le reste est dérivé pour tenir les mêmes contrastes. Le rendu reste sombre quel que soit le thème du système : aucune dépendance à prefers-color-scheme. Le clair V6 est conservé sous body.hv5.clair. */ /* 🐛 18/09/2026 — CE COMMENTAIRE ÉTAIT OUVERT DEUX FOIS, ET IL MANGEAIT UN JETON. Sa première ligne ouvrait un commentaire, puis en rouvrait un second juste après. Le CSS ne sait pas les imbriquer : la première fermeture rencontrée referme tout, et les quarante lignes suivantes deviennent une déclaration invalide qui court jusqu'au point-virgule suivant. Ce point-virgule était celui de --v5-fond : #242321; qu'il retrouve la meme maison des deux cotes de la connexion n'est pas une preference, c'est la seule chose qu'on n'avait pas encore essayee. 🚨 LE VERT DU SITE EST DOUBLE, ET UN SEUL DES DEUX PORTE DU TEXTE. La menthe vive #19CE84 sert d'ornement (anneaux, points, jauges) ; en fond de bouton avec du blanc dessus elle tombe a 1,9 de contraste. Le site l'a corrige de son cote il y a longtemps : ses boutons sont en #0E7A52 (5,4). C'est CE vert-la qui devient l'accent, pas la menthe. 🚨 ET L'AMBRE RESTE DEHORS. Le site n'a pas d'ambre du tout — marine, creme, vert, et c'est tout. L'etat « aujourd'hui » garde donc l'encre neutre : c'est le mot qui le dit, pas la couleur. */ /* ══ V6 — COULEURS VIVANTES. Maquette validée par Christophe le 18/09. ══ Les NOMS des jetons ne bougent pas : trois cents règles les lisent. On change ce qu'ils VALENT, ici, une fois. Le fond devient le papier, la carte reste blanche : c'est le filet qui la détache, 1,41 de contraste contre 1,29 en V5. 🚨 LE VERT NE DEVIENT PAS LE CORAIL. Relevé avant d'y toucher : --v5-vert sert au SUCCÈS et à la marque (pastille « fait », --etat-ok, une hausse d'impact, les liens, le focus), jamais à un bouton d'action. Le corail est donc un jeton NEUF, qui ne prend la place de rien. Les confondre aurait teinté en rouge tout ce qui va bien. */ --v5-fond:#242321; --v5-fond-image:none; --v5-bulle:#302F2D; --v5-bulle-2:#3A3937; /* 🚨 EN CLAIR, LA CARTE NE SE DETACHE PAS PAR SA SURFACE. Blanc sur creme, c'est 1,07 — il n'y a plus de place au-dessus du fond. C'est le FILET qui la detache (1,29), et c'est pour ca que le cliquet mesure « par la surface OU par le filet ». */ --v5-bulle-bord:#4A4741; --v5-bulle-2-bord:#54514B; --v5-filet:#4A4741; --v5-filet-2:#3A3937; --v5-verre:none; --v5-verre-2:none; --v5-verre-sous:var(--v5-bulle); --v5-verre-bord:var(--v5-bulle-bord); --v5-verre-ombre:0 1px 2px rgba(0,0,0,.28); --v5-encre:#F5F2EC; --v5-encre-2:#C2BFB7; --v5-encre-3:#ABA79E; --v5-encre-4:#AFABA2; /* L'ACCENT — le vert des boutons du site. Les jetons gardent leurs noms (--v5-vert*) : trois cents regles les lisent. */ --v5-vert:var(--v6-corail); --v5-vert-2:var(--v6-corail-2); --v5-vert-encre:var(--v6-corail-encre); /* 19/09 : un fond doux est du papier en V6 ; le rose corail se lisait comme une alerte. */ --v5-vert-sol:var(--v5-bulle-2); /* 19/09 : « trop de couleurs partout » : un fond doux est neutre, plus bleu */ --v5-vert-txt:var(--v6-corail-texte); --v5-vert-doux:var(--v6-corail-2); --v5-vert-fil:#46507A; /* L'ETAT « AUJOURD'HUI » — neutre. Voir la note plus haut. */ --v5-ambre:#E8B656; --v5-ambre-sol:#3A301C; --v5-ambre-encre:#171717; --v5-ambre-fil:#5E4B25; /* L'ALERTE — la brique du site (--coral, descendue jusqu'a etre lisible sur creme). */ --v5-rouge:#F2877B; --v5-rouge-sol:#3E2522; --v5-rouge-doux:#F4968B; --v5-rouge-encre:#171717; --v5-rouge-fil:#6A3630; --v5-neutre-sol:#3A3937; --v5-violet:#B8A6FF; --v5-ciel:#7CC4EE; --v5-rose:#F08DBE; --v5-survol:#3A3937; --v5-voile:rgba(36,35,33,.93); /* ——— V6 : LE CORAIL, L'ACTION ——— Il ne sert QU'EN FOND. Sur le papier il tombe à 3,31 de contraste : en couleur de texte il serait illisible. Avec l'encre par-dessus il donne 4,77 ; avec du blanc, 3,76 seulement — d'où le texte encre sur les boutons pleins. */ --v6-corail:#F04438; --v6-corail-encre:#171717; --v6-corail-2:#D93B30; --v6-corail-sol:#3E2522; --v6-corail-fil:#6A3630; /* ——— V6 : LES HUIT AGENTS ——— Une couleur par poste, tirée de son personnage : le cobalt d'Orvan est son costume, le jaune de Bolen son gilet, le teal de Tomel son sweat. Les -sol sont les fonds doux des cartes secondaires ; les -encre disent avec quoi on écrit DESSUS, et c'est le seul jeton qui change pour Bolen. 🚨 AUCUNE N'APPROCHE LE CORAIL. La plus proche est celle de Nélia, à ΔE 40 : un bandeau ne peut pas se lire comme un bouton. Et le bleu de Juna s'est éloigné du cobalt d'Orvan, sans quoi deux voisins de la même barre auraient porté le même bleu. Ces valeurs sont AUSSI dans scripts/postes.js ; un cliquet tient les deux d'accord. */ --v6-ag-direction:#3155D9; --v6-ag-direction-encre:#FFFFFF; --v6-ag-direction-sol:#303858; --v6-ag-communication:#C2185B; --v6-ag-communication-encre:#FFFFFF; --v6-ag-communication-sol:#542938; --v6-ag-seo:#237A52; --v6-ag-seo-encre:#FFFFFF; --v6-ag-seo-sol:#2D4236; --v6-ag-ia:#3A3531; --v6-ag-ia-encre:#FFFFFF; --v6-ag-ia-sol:#3A3937; --v6-ag-site:#0E7C86; --v6-ag-site-encre:#FFFFFF; --v6-ag-site-sol:#284243; --v6-ag-analyse:#E8C85A; --v6-ag-analyse-encre:#171717; --v6-ag-analyse-sol:#5E5538; --v6-ag-veille:#5B6B7C; --v6-ag-veille-encre:#FFFFFF; --v6-ag-veille-sol:#3B3E41; --v6-ag-secretariat:#8C4A2F; --v6-ag-secretariat-encre:#FFFFFF; --v6-ag-secretariat-sol:#47362E; /* ——— V6 : LES RAYONS ——— Trois valeurs, pas douze. Le bandeau est plus rond que la carte, la carte plus ronde que le bouton : c'est ce qui dit lequel contient lequel. */ --v6-r-bandeau:16px; --v6-r-carte:12px; --v6-r-bouton:9px; --v5-voile-bulle:rgba(48,47,45,.93); /* LA COLONNE DE GAUCHE — blanche a filet, exactement comme la maquette du site. */ --v5-nav:#302F2D; --v5-nav-voile:none; --v5-nav-fond-actif:#F5F2EC; --v5-nav-encre:#C2BFB7; --v5-nav-encre-2:#ABA79E; --v5-nav-actif:#171717; --v5-nav-fil:#4A4741; --v5-sur-accent:#171717; --v5-encre-sur-clair:#171717; --pf-head:"Sora",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; /* 🐛 13/09, tres tard (Christophe : « y'a plein d'endroits ou on n'utilise pas la totalite de la page ») — ONZE LARGEURS POUR VINGT-QUATRE ECRANS, de 760 px a 1500 px. Une seule largeur utile, declaree ici ; les autres palettes en heritent. */ --v5-page:1560px; --v5-r:16px; --v5-r-2:12px; background:var(--v5-fond); background-image:var(--v5-fond-image); color:var(--v5-encre); /* 19/09/2026 — le vert ne dit plus qu'une chose : c'est réussi. L'action est corail. */ --v5-succes: #5FCB94; --v5-succes-2: #4BB07E; --v5-succes-encre: #171717; --v5-succes-sol: #22362C; --v5-succes-txt: #7FDBA9; --v5-succes-doux: #5FCB94; --v5-succes-fil: #2F5A45; --v6-corail-texte: #A7B7FF; } /* ——————————————————— V6 CLAIR (papier), conservée ——————————————————— ``. Livrée le 18/09, remplacée le 19/09 au soir par la référence sombre que Christophe a fournie (« Happia-reference-sombre ») : même maison, fond sombre. Elle tient ses contrastes, on la garde. */ body.hv5.clair{ --v5-fond:#F4F0E8; --v5-fond-image:none; --v5-bulle:#FFFFFF; --v5-bulle-2:#FAF8F3; --v5-bulle-bord:#DED9CF; --v5-bulle-2-bord:#DED9CF; --v5-filet:#DED9CF; --v5-filet-2:#EDE8DE; --v5-verre:none; --v5-verre-2:none; --v5-verre-sous:var(--v5-bulle); --v5-verre-bord:var(--v5-bulle-bord); --v5-verre-ombre:0 1px 2px rgba(12,31,78,.04), 0 1px 3px rgba(12,31,78,.06); --v5-encre:#171717; --v5-encre-2:#65615A; --v5-encre-3:#6F6A62; --v5-encre-4:#726C64; --v5-vert:var(--v6-corail); --v5-vert-2:var(--v6-corail-2); --v5-vert-encre:var(--v6-corail-encre); --v5-vert-sol:var(--v5-fond); --v5-vert-txt:var(--v6-corail-texte); --v5-vert-doux:var(--v6-corail-2); --v5-vert-fil:var(--v6-corail-fil); --v5-ambre:#9A5E08; --v5-ambre-sol:#FFF8E8; --v5-ambre-encre:#FFFFFF; --v5-ambre-fil:#F0E0BB; --v5-rouge:#B3392A; --v5-rouge-sol:#FCEDEA; --v5-rouge-doux:#BD4A3B; --v5-rouge-encre:#FFFFFF; --v5-rouge-fil:#F0CFC8; --v5-neutre-sol:#FAF8F3; --v5-violet:#5B3FBF; --v5-ciel:#1B6E9C; --v5-rose:#A8386E; --v5-survol:#FBF9F5; --v5-voile:rgba(255,255,255,.93); --v6-corail:#F04438; --v6-corail-encre:#171717; --v6-corail-2:#D93B30; --v6-corail-sol:#FCEAE8; --v6-corail-fil:#F7C6C1; --v6-ag-direction:#3155D9; --v6-ag-direction-encre:#FFFFFF; --v6-ag-direction-sol:#EAF0FF; --v6-ag-communication:#C2185B; --v6-ag-communication-encre:#FFFFFF; --v6-ag-communication-sol:#FCE7EF; --v6-ag-seo:#237A52; --v6-ag-seo-encre:#FFFFFF; --v6-ag-seo-sol:#E7EFE4; --v6-ag-ia:#3A3531; --v6-ag-ia-encre:#FFFFFF; --v6-ag-ia-sol:#EEEBE6; --v6-ag-site:#0E7C86; --v6-ag-site-encre:#FFFFFF; --v6-ag-site-sol:#E3F1F2; --v6-ag-analyse:#E8C85A; --v6-ag-analyse-encre:#171717; --v6-ag-analyse-sol:#FAEDBC; --v6-ag-veille:#5B6B7C; --v6-ag-veille-encre:#FFFFFF; --v6-ag-veille-sol:#E9ECEF; --v6-ag-secretariat:#8C4A2F; --v6-ag-secretariat-encre:#FFFFFF; --v6-ag-secretariat-sol:#F3E5DE; --v6-r-bandeau:16px; --v6-r-carte:12px; --v6-r-bouton:9px; --v5-voile-bulle:rgba(255,255,255,.93); --v5-nav:#FFFFFF; --v5-nav-voile:none; --v5-nav-fond-actif:#171717; --v5-nav-encre:#65615A; --v5-nav-encre-2:#726C64; --v5-nav-actif:#FFFFFF; --v5-nav-fil:#DED9CF; --v5-sur-accent:#FFFFFF; --v5-encre-sur-clair:#171717; --pf-head:"Sora",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --v5-page:1560px; --v5-r:16px; --v5-r-2:12px; --v5-succes: #0E7A52; --v5-succes-2: #0B5A40; --v5-succes-encre: #FFFFFF; --v5-succes-sol: #EEFAF3; --v5-succes-txt: #0E7A52; --v5-succes-doux: #14805A; --v5-succes-fil: #CDEADB; --v6-corail-texte: #BF3228; } /* ——————————————————— OR & ENCRE, conservee ——————————————————— `` et tout repasse au noir et or. Elle tient ses contrastes, elle reste livree — on ne jette pas une palette qui passe le cliquet. */ body.hv5.or{ /* ——————————————————— OR & ENCRE (body.hv5.or) ——————————————————— 13/09/2026, tard — choisi sur planche, apres dix propositions. 🚨 CE QUE CETTE PALETTE CORRIGE, ET QUI N'ETAIT PAS UNE QUESTION DE GOUT. Dans Verre, l'accent (menthe, 11,6 de contraste sur le fond) et l'alerte (saumon, 7,9) avaient presque la meme clarte ET la meme temperature. Deux couleurs qui crient au meme volume : l'oeil ne sait pas laquelle regarder en premier. Ici l'accent est CHAUD (or) et l'alerte FROIDE (corail) — elles ne se confondent plus jamais, quelle que soit la taille de la tache a l'ecran. 🚨 ET L'AMBRE A DISPARU DES ETATS. Avec un accent dore, un etat ambre serait une troisieme teinte chaude sur le meme ecran — exactement ce que Christophe a signale ce soir (« trop de couleurs qui vont pas ensemble »). L'etat « aujourd'hui » est donc NEUTRE : c'est le mot qui le dit, pas la couleur. --v5-ambre reste declare pour ne rien casser, mais il vaut le neutre. 🚨 LE PIEGE DU NOIR, POUR LA DEUXIEME FOIS. Premier essai a bulle #1D1D20 : fond→bulle tombait a 1,16. Pres du noir, le terme +0,05 de la formule de contraste ecrase les ecarts — un ecart qui se voit a 8 % de luminance disparait a 0,4 %. La bulle est donc remontee de deux crans. Mesure : fond→bulle 1,26 · bulle→bulle-2 1,23. */ --v5-fond:#0C0C0D; --v5-fond-image:none; --v5-bulle:#242428; --v5-bulle-2:#33333A; --v5-bulle-bord:transparent; --v5-bulle-2-bord:transparent; --v5-filet:#3C3C44; --v5-filet-2:#4A4A53; --v5-verre:none; --v5-verre-2:none; --v5-verre-bord:transparent; --v5-verre-ombre:none; --v5-encre:#FAFAFA; --v5-encre-2:#C6C6CB; --v5-encre-3:#9A9AA3; --v5-encre-4:#86868F; /* L'ACCENT — l'or. Il ne dit qu'une chose : c'est ici qu'on agit. Les jetons gardent leurs noms (--v5-vert*) : trois cents regles les lisent, et une palette se change par ses VALEURS, jamais par ses noms. */ --v5-vert:#E3B95F; --v5-vert-2:#CFA44A; --v5-vert-encre:#241A06; --v5-vert-sol:#2A2313; --v5-vert-txt:#E3B95F; --v5-vert-doux:#B99A4E; --v5-vert-fil:#5A4A24; /* L'ETAT « AUJOURD'HUI » — neutre, volontairement. Voir la note plus haut. */ --v5-ambre:#C6C6CB; --v5-ambre-sol:#232326; --v5-ambre-encre:#0C0C0D; --v5-ambre-fil:#3C3C44; /* L'ALERTE — froide, pour ne jamais se confondre avec l'or. */ --v5-rouge:#F0897C; --v5-rouge-sol:#2A1718; --v5-rouge-doux:#F5A9A0; --v5-rouge-encre:#2A0D0F; --v5-rouge-fil:#5A2F2C; --v5-neutre-sol:#232326; --v5-violet:#C4B5FD; --v5-ciel:#7DD3FC; --v5-rose:#F9A8D4; --v5-survol:#3A3A41; --v5-voile:rgba(12,12,13,.93); --v5-voile-bulle:rgba(36,36,40,.93); --v5-nav:#141416; --v5-nav-fond-actif:#26262A; --v5-nav-encre:rgba(250,250,250,.62); --v5-nav-encre-2:rgba(250,250,250,.40); --v5-nav-actif:#FAFAFA; --v5-nav-fil:rgba(255,255,255,.07); --v5-sur-accent:#0C0C0D; --v5-encre-sur-clair:#101828; /* 🐛 13/09, tres tard (Christophe : « y'a plein d'endroits ou on n'utilise pas la totalite de la page ») — ONZE LARGEURS POUR VINGT-QUATRE ECRANS, de 760 px a 1500 px. Chaque page decidait dans son coin. Mesure sur son ecran d'audit, fenetre 1470 : 1 230 px disponibles, contenu plafonne a 1 080 — 150 px perdus a droite, et 600 sur un 1920. Une seule largeur utile, declaree ici. Les autres palettes en heritent. */ --v5-verre-sous:var(--v5-bulle); --v5-nav-voile:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0)); /* 19/09/2026 — palette de réserve : le succès y garde la couleur qu'elle donnait à « vert ». */ --v5-succes:var(--v5-vert); --v5-succes-2:var(--v5-vert-2); --v5-succes-encre:var(--v5-vert-encre); --v5-succes-sol:var(--v5-vert-sol); --v5-succes-txt:var(--v5-vert-txt); --v5-succes-doux:var(--v5-vert-doux); --v5-succes-fil:var(--v5-vert-fil); } /* ——————————————————— VERRE, conservée ——————————————————— `` — le degrade et les surfaces translucides. */ body.hv5.verre{ --v5-fond:#12161F; --v5-fond-image:radial-gradient(120% 90% at 10% 0%,#243043 0%,#12161F 55%,#0C0F16 100%); --v5-bulle:#242730; --v5-bulle-2:#32353D; --v5-bulle-bord:#33373E; --v5-bulle-2-bord:#3F434B; --v5-filet:#33373E; --v5-filet-2:#3F434B; --v5-verre:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045)); --v5-verre-2:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.09)); --v5-verre-bord:rgba(255,255,255,.12); --v5-verre-ombre:0 10px 30px -18px rgba(0,0,0,.85); --v5-encre:#EEF1F6; --v5-encre-2:#B4BAC6; --v5-encre-3:#8E96A6; --v5-encre-4:#7C8496; --v5-vert:#7DE3B0; --v5-vert-2:#5BC894; --v5-vert-encre:#062015; --v5-vert-sol:#203132; --v5-vert-txt:#7DE3B0; --v5-vert-doux:#63A88A; --v5-vert-fil:#2F5A4C; --v5-ambre:#E8B15C; --v5-ambre-sol:#2E2A27; --v5-ambre-encre:#2A1D07; --v5-ambre-fil:#544733; --v5-rouge:#FF8A7A; --v5-rouge-sol:#31252B; --v5-rouge-doux:#FFB3A8; --v5-rouge-encre:#2A0D0F; --v5-rouge-fil:#5C3B39; --v5-neutre-sol:#1F232B; --v5-violet:#C4B5FD; --v5-ciel:#7CE0FF; --v5-rose:#F9A8D4; --v5-survol:#3F424A; --v5-voile:rgba(18,22,31,.93); --v5-voile-bulle:rgba(36,39,48,.93); --v5-nav:#0E121A; --v5-nav-fond-actif:#232733; --v5-nav-encre:rgba(238,241,246,.62); --v5-nav-encre-2:rgba(238,241,246,.40); --v5-nav-actif:#FFFFFF; --v5-nav-fil:rgba(255,255,255,.08); --v5-sur-accent:#0A0A0B; --v5-verre-sous:transparent; --v5-nav-voile:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0)); /* 19/09/2026 — palette de réserve : le succès y garde la couleur qu'elle donnait à « vert ». */ --v5-succes:var(--v5-vert); --v5-succes-2:var(--v5-vert-2); --v5-succes-encre:var(--v5-vert-encre); --v5-succes-sol:var(--v5-vert-sol); --v5-succes-txt:var(--v5-vert-txt); --v5-succes-doux:var(--v5-vert-doux); --v5-succes-fil:var(--v5-vert-fil); } /* ——————————————————— PAPIER, conservée ——————————————————— ``. Écartée le 13/09 au soir — « nos couleurs pâles, ça va pas » — mais elle tient ses contrastes, on la garde pour un éventuel thème clair. */ body.hv5.papier{ --v5-fond:#E8E8E4; --v5-fond-image:none; --v5-bulle:#FFFFFF; --v5-bulle-2:#EFEFEC; --v5-bulle-bord:#E0E0DB; --v5-bulle-2-bord:#E4E4E0; --v5-filet:#E0E0DB; --v5-filet-2:#CFCFC9; --v5-verre:none; --v5-verre-2:none; --v5-verre-bord:#E0E0DB; --v5-verre-ombre:none; --v5-encre:#16161A; --v5-encre-2:#4A4A52; --v5-encre-3:#6E6E78; --v5-encre-4:#75757F; --v5-vert:#0E6B44; --v5-vert-2:#0B5537; --v5-vert-encre:#FFFFFF; --v5-vert-sol:#E2F0E8; --v5-vert-txt:#0E6B44; --v5-vert-doux:#3F8C68; --v5-vert-fil:#B9D9C8; --v5-ambre:#8A5A12; --v5-ambre-sol:#F6EEDF; --v5-ambre-encre:#FFFFFF; --v5-ambre-fil:#E4D2AE; --v5-rouge:#A32226; --v5-rouge-sol:#FAE9E8; --v5-rouge-doux:#C24B4E; --v5-rouge-encre:#FFFFFF; --v5-rouge-fil:#EFC9C7; --v5-neutre-sol:#EFEFEA; --v5-violet:#5B3FBF; --v5-ciel:#1B6E9C; --v5-rose:#A8386E; --v5-survol:#F2F2EF; --v5-voile:rgba(232,232,228,.93); --v5-voile-bulle:rgba(255,255,255,.93); --v5-sur-accent:#FFFFFF; --v5-verre-sous:var(--v5-bulle); --v5-nav-voile:none; --v5-nav:#FFFFFF; --v5-nav-fond-actif:#E2F0E8; --v5-nav-encre:#4A4A52; --v5-nav-encre-2:#75757F; --v5-nav-actif:#0E6B44; --v5-nav-fil:#E0E0DB; /* 19/09/2026 — palette de réserve : le succès y garde la couleur qu'elle donnait à « vert ». */ --v5-succes:var(--v5-vert); --v5-succes-2:var(--v5-vert-2); --v5-succes-encre:var(--v5-vert-encre); --v5-succes-sol:var(--v5-vert-sol); --v5-succes-txt:var(--v5-vert-txt); --v5-succes-doux:var(--v5-vert-doux); --v5-succes-fil:var(--v5-vert-fil); } /* ——————————————————— ENCRE, conservée ——————————————————— `` et tout repasse en noir neutre. 🚨 Ce que le noir a coûté, pour mémoire : premiers essais à #1D1D20 / #282830, fond→bulle tombait à 1,18 quand le bleu nuit tenait 1,34. Le rapport de contraste écrase les écarts près du noir (le terme +0,05 de la formule domine) : un écart visible sur un bleu à 8 % de luminance disparaît à 0,3 %. Les deux bulles ont dû remonter de deux crans. */ body.hv5.encre { --v5-fond:#0A0A0B; --v5-fond-image:none; --v5-bulle:#27272B; --v5-bulle-2:#33333B; --v5-bulle-bord:transparent; --v5-bulle-2-bord:transparent; --v5-filet:#45454F; --v5-filet-2:#4E4E5A; --v5-verre:none; --v5-verre-2:none; --v5-verre-bord:transparent; --v5-verre-ombre:none; --v5-encre:#FAFAFA; --v5-encre-2:#C9C9CF; --v5-encre-3:#9D9DA7; --v5-encre-4:#8B8B95; --v5-vert:#7DE3B0; --v5-vert-2:#5BC894; --v5-vert-encre:#062015; --v5-vert-sol:#10291F; --v5-vert-txt:#7DE3B0; --v5-vert-doux:#63A88A; --v5-vert-fil:#2A6B4C; --v5-ambre:#E8B15C; --v5-ambre-sol:#2A2113; --v5-ambre-encre:#2A1D07; --v5-ambre-fil:#5A4A22; --v5-rouge:#F87171; --v5-rouge-sol:#2A1518; --v5-rouge-doux:#FCA5A5; --v5-rouge-encre:#2A0D0F; --v5-rouge-fil:#5A2A2E; --v5-neutre-sol:#232329; --v5-violet:#C4B5FD; --v5-ciel:#7DD3FC; --v5-rose:#F9A8D4; --v5-survol:#3C3C46; --v5-voile:rgba(10,10,11,.93); --v5-voile-bulle:rgba(39,39,43,.93); --v5-nav:#141416; --v5-nav-fond-actif:#26262A; --v5-nav-encre:rgba(250,250,250,.62); --v5-nav-encre-2:rgba(250,250,250,.40); --v5-nav-actif:#FAFAFA; --v5-nav-fil:rgba(255,255,255,.07); --v5-sur-accent:#0A0A0B; --v5-verre-sous:var(--v5-bulle); --v5-nav-voile:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0)); /* 19/09/2026 — palette de réserve : le succès y garde la couleur qu'elle donnait à « vert ». */ --v5-succes:var(--v5-vert); --v5-succes-2:var(--v5-vert-2); --v5-succes-encre:var(--v5-vert-encre); --v5-succes-sol:var(--v5-vert-sol); --v5-succes-txt:var(--v5-vert-txt); --v5-succes-doux:var(--v5-vert-doux); --v5-succes-fil:var(--v5-vert-fil); } /* ——————————————————— ENCRE, conservée entière ——————————————————— */ /* La bulle porte son filet — transparent en Encre, visible en Papier. Une seule règle pour les deux palettes : c'est le jeton qui décide, pas un thème dans le CSS. */ /* (la bulle porte desormais le traitement verre, defini avec la palette) */ /* Space Grotesk seulement là où il porte : un titre d'écran, un constat en * grand. Le corps de texte reste dans la police système — elle se lit mieux * sur un paragraphe et ne coûte pas un chargement. */ body.hv5 .hv5-titre{ font-family:"Sora",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; font-weight:600; letter-spacing:-.035em; color:var(--v5-encre); margin:0; font-size:30px; line-height:1.1; } @media(max-width:620px){ body.hv5 .hv5-titre{font-size:24px} } body.hv5 .hv5-sstitre{ font-size:14px; color:var(--v5-encre-3); margin:5px 0 0 } /* ═══════════════════════════════════════════════════════════════════════ * LA PASTILLE — l'objet qui porte la couleur, et le seul. * ═══════════════════════════════════════════════════════════════════════ */ body.hv5 .hv5-past{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-size:11px; letter-spacing:.13em; font-weight:700; border-radius:999px; padding:4px 12px 4px 8px; } body.hv5 .hv5-past::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; } body.hv5 .hv5-past.mal{ background:var(--v5-rouge-sol); color:var(--v5-rouge) } /* 🆕 13/09 — « SEULE » : LA PASTILLE QUI NE DIT RIEN QUE LES AUTRES NE DISENT DEJA. Christophe, sur « À faire » : « là on voit plus ce qui ne va pas que le titre, c'est pas possible ». Le libellé était identique sur les quinze cartes — donc porteur d'aucune information — et c'était l'objet le plus fort de l'écran, pendant que le titre, seule chose qui varie d'une carte à l'autre, reculait. On garde la couleur (elle distingue encore « à corriger » de « c'est réglé ») et on retire les mots. Les mots restent dans le code, masqués à l'œil : une personne qui ne perçoit pas la couleur ne doit pas perdre l'information avec elle. */ body.hv5 .hv5-past.seule{ padding:0; gap:0; background:transparent !important; width:7px; height:7px; min-width:7px; border-radius:999px; vertical-align:middle; } body.hv5 .hv5-past.seule::before{ width:7px; height:7px } /* Le point vit SUR la ligne du titre : une pastille seule sur son étage coûtait une quinzaine de pixels par carte, sur un écran qu'on a déjà resserré deux fois à sa demande. */ body.hv5 .hv5-b-titre > .hv5-past.seule{ display:inline-flex; margin-right:9px; position:relative; top:-1px } body.hv5 .hv5-past.seule i{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } body.hv5 .hv5-past.auj{ background:var(--v5-ambre-sol); color:var(--v5-ambre) } body.hv5 .hv5-past.prop{ background:var(--v5-vert-sol); color:var(--v5-vert-txt) } body.hv5 .hv5-past.fait{ background:var(--v5-succes-sol); color:var(--v5-succes) } /* ═══════════════════════════════════════════════════════════════════════ * LA BULLE * ═══════════════════════════════════════════════════════════════════════ */ body.hv5 .hv5-bulles{ display:flex; flex-direction:column; gap:12px } body.hv5 .hv5-bulle{ background:var(--v5-bulle); border-radius:var(--v5-r); padding:20px 24px } @media(max-width:620px){ body.hv5 .hv5-bulle{padding:16px 16px; border-radius:14px} } body.hv5 .hv5-b-tete{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:13px } body.hv5 .hv5-b-tete .num{ margin-left:auto; font-size:12px; font-weight:700; color:var(--v5-encre-4); font-variant-numeric:tabular-nums; } body.hv5 .hv5-b-titre{ font-size:19px; font-weight:600; line-height:1.35; letter-spacing:-.01em; /* 34ch cassait « Ta présence dans Google sur tes questions cibles » en deux lignes alors que la carte en offre trois fois plus. Un titre coupé pour rien, c'est une ligne de hauteur perdue sur chacune des vingt-trois cartes. */ margin:0; max-width:60ch; color:var(--v5-encre); } @media(max-width:620px){ body.hv5 .hv5-b-titre{font-size:16px} } /* Desserré de 56ch à 92ch le 11/09 : sur un écran large, 56ch s'arrêtait au milieu et doublait la hauteur de chaque carte. On garde une limite — une ligne de 1400 px se lit mal — mais assez haute pour qu'elle ne se voie qu'en très grand. */ body.hv5 .hv5-b-sous{ font-size:14px; line-height:1.55; color:var(--v5-encre-3); margin:8px 0 0; max-width:92ch } /* Le face-à-face : deux petites bulles DANS la grande. */ body.hv5 .hv5-duo{ display:grid; grid-template-columns:1fr 38px 1fr; align-items:stretch; margin-top:18px } @media(max-width:760px){ body.hv5 .hv5-duo{ grid-template-columns:1fr; gap:8px } body.hv5 .hv5-duo-fleche{ transform:rotate(90deg); justify-self:center } } body.hv5 .hv5-mini{ background:var(--v5-bulle-2); border-radius:var(--v5-r-2); padding:16px 16px; min-width:0; display:flex; flex-direction:column; gap:8px; } body.hv5 .hv5-mini .txt{ font-size:14px; line-height:1.55; color:var(--v5-encre-2); margin:0; word-break:break-word } body.hv5 .hv5-mini.neuve .txt{ color:var(--v5-vert-txt) } body.hv5 .hv5-mini.neuve .txt.attendu{ color:var(--v5-encre-3) } body.hv5 .hv5-mini .compte{ font-size:12px; color:var(--v5-encre-4); margin-top:auto } body.hv5 .hv5-mini .compte a{ color:var(--v5-encre-4) } body.hv5 .hv5-duo-fleche{ display:flex; align-items:center; justify-content:center; color:var(--v5-encre-4) } /* « Ce que ça change » — une étiquette, une phrase. */ body.hv5 .hv5-change{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; margin-top:16px; font-size:13px; line-height:1.55; color:var(--v5-encre-3); } body.hv5 .hv5-change .cle{ flex:0 0 auto; font-size:11px; letter-spacing:.1em; font-weight:700; color:var(--v5-encre-4); } body.hv5 .hv5-change .val{ flex:1 1 300px; min-width:0 } /* Le pied : ce qu'on fait, le bouton, le gain. */ body.hv5 .hv5-b-pied{ margin-top:18px; padding-top:17px; box-shadow:inset 0 1px 0 var(--v5-filet) } body.hv5 .hv5-b-faire{ font-size:14px; line-height:1.5; color:var(--v5-encre-2); margin:11px 0 0; max-width:92ch } body.hv5 .hv5-b-agir{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:16px } /* ——— le bouton : un seul plein par bulle ——— */ body.hv5 .hv5-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--v5-encre); color:#FFFFFF; font-family:inherit; font-size:14px; font-weight:700; line-height:1; border:none; border-radius:999px; padding:12px 24px; cursor:pointer; text-decoration:none; } body.hv5 .hv5-btn:hover{ background:var(--v5-vert-2); color:var(--v5-vert-encre) } body.hv5 .hv5-btn:focus-visible{ outline:2px solid var(--v5-encre); outline-offset:3px } body.hv5 .hv5-btn .cout{ opacity:.58; font-weight:500 } body.hv5 .hv5-btn.petit{ font-size:14px; padding:12px 20px } body.hv5 .hv5-gain{ font-size:13px; color:var(--v5-succes) } body.hv5 .hv5-lien{ background:none; border:none; padding:0; cursor:pointer; text-decoration:none; font-family:inherit; font-size:13px; font-weight:600; color:var(--v5-encre-4); } body.hv5 .hv5-lien:hover{ color:var(--v5-encre-2) } /* Une bulle EN ATTENTE : le même objet, en plus court, bouton à droite. */ body.hv5 .hv5-bulle.attente{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:20px 24px } body.hv5 .hv5-bulle.attente .corps{ flex:1 1 260px; min-width:0 } body.hv5 .hv5-bulle.attente .hv5-b-tete{ margin-bottom:9px } body.hv5 .hv5-bulle.attente .hv5-b-titre{ font-size:16px; font-weight:550 } body.hv5 .hv5-bulle.attente .hv5-b-sous{ margin-top:5px; font-size:13px } body.hv5 .hv5-bulle.attente .hv5-btn{ flex:0 0 auto } body.hv5 .hv5-bulle.done{ opacity:.5 } body.hv5 .hv5-bulle.done .hv5-b-titre{ text-decoration:line-through; color:var(--v5-encre-3) } /* ——— le tiroir technique : ce qui relève du code, et rien d'autre ——— * Christophe : « voir le travail fait, c'est plus quand tu codes […] quand on * est sur la fiche Google, c'est dommage de ne pas avoir directement le truc ». * D'où la règle : une preuve VISUELLE s'affiche (le face-à-face ci-dessus), * un fichier à copier se replie (ici). */ body.hv5 details.hv5-tech{ margin-top:16px } body.hv5 details.hv5-tech>summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--v5-encre-4); } body.hv5 details.hv5-tech>summary::-webkit-details-marker{ display:none } body.hv5 details.hv5-tech>summary:hover{ color:var(--v5-encre-2) } body.hv5 details.hv5-tech>summary:focus-visible{ outline:2px solid var(--v5-vert); outline-offset:3px; border-radius:6px } body.hv5 details.hv5-tech .chev{ transition:transform .15s } body.hv5 details.hv5-tech[open] .chev{ transform:rotate(180deg) } body.hv5 .hv5-tech-corps{ margin-top:13px } /* Un fichier livrable, prêt à copier. */ body.hv5 .hv5-fichier{ background:var(--v5-bulle-2); border-radius:var(--v5-r-2); overflow:hidden; margin-top:12px } body.hv5 .hv5-fichier-tete{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; box-shadow:inset 0 -1px 0 var(--v5-filet); } body.hv5 .hv5-fichier-nom{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--v5-encre-2) } body.hv5 .hv5-fichier-ou{ font-size:12px; color:var(--v5-encre-4) } body.hv5 .hv5-fichier-corps{ margin:0; padding:16px 16px; overflow-x:auto; max-height:260px; white-space:pre; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; line-height:1.7; color:var(--v5-encre-3); } body.hv5 .hv5-copier{ margin-left:auto; background:transparent; border:1px solid var(--v5-vert-fil); color:var(--v5-vert-txt); font-family:inherit; font-size:12px; font-weight:700; border-radius:999px; padding:4px 12px; cursor:pointer; } body.hv5 .hv5-copier:hover{ background:var(--v5-vert-sol) } /* ═══════════════════════════════════════════════════════════════════════ * LE MODE « UNE PAR UNE » — une seule bulle, seule au milieu. * Christophe : « l'affichage une par une, en plein écran. Quand tu dis, * tiens, je veux faire juste une seule action. » * C'est la MÊME bulle, juste plus grande : un écran qui ne ressemblerait à * rien du reste serait un deuxième langage à apprendre. * ═══════════════════════════════════════════════════════════════════════ */ body.hv5 .hv5-focus{ display:none; min-height:100vh; flex-direction:column } body.hv5.mode-focus .app{ display:none } body.hv5.mode-focus .hv5-focus{ display:flex } body.hv5 .hv5-f-haut{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:20px 40px } @media(max-width:640px){ body.hv5 .hv5-f-haut{padding:16px 16px; gap:12px} } body.hv5 .hv5-compteur{ margin-left:auto; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--v5-encre-4) } body.hv5 .hv5-jauge{ display:flex; gap:4px } body.hv5 .hv5-jauge i{ display:block; width:24px; height:3px; border-radius:6px; background:var(--v5-filet) } body.hv5 .hv5-jauge i.on{ background:var(--v5-encre) } body.hv5 .hv5-f-corps{ flex-grow:1; display:flex; align-items:center; justify-content:center; padding:32px 40px } @media(max-width:640px){ body.hv5 .hv5-f-corps{padding:24px 16px} } body.hv5 .hv5-f-corps .hv5-bulle{ max-width:760px; width:100%; padding:28px 32px } @media(max-width:620px){ body.hv5 .hv5-f-corps .hv5-bulle{padding:20px 16px} } body.hv5 .hv5-f-corps .hv5-b-titre{ font-family:"Sora",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; font-weight:600; font-size:clamp(24px,4vw,34px); line-height:1.16; letter-spacing:-.03em; max-width:20ch; } body.hv5 .hv5-f-bas{ padding:20px 40px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--v5-encre-4); box-shadow:inset 0 1px 0 var(--v5-filet); } @media(max-width:640px){ body.hv5 .hv5-f-bas{padding:16px 16px} } body.hv5 .hv5-f-bas .fin{ margin-left:auto } /* ——— la bascule d'affichage ——— */ body.hv5 .hv5-bascule{ display:flex; gap:4px } body.hv5 .hv5-bascule button{ background:transparent; border:none; cursor:pointer; font-family:inherit; color:var(--v5-encre-4); font-size:13px; font-weight:600; border-radius:999px; padding:8px 16px; } body.hv5 .hv5-bascule button.on{ background:var(--v5-bulle); color:var(--v5-encre) } body.hv5 .hv5-bascule button:hover{ color:var(--v5-encre-2) } body.hv5 .hv5-bascule button:focus-visible{ outline:2px solid var(--v5-vert); outline-offset:2px } /* ════════════════════════════════════════════════════════════════════════ * LA BARRE HAPPY — toujours ouverte, en bas, au milieu. * Christophe : « en bas de page au milieu toujours ouvert c'est la discussion * happy pour qu'il puisse lui demander des conseils comme une vraie IA » * ════════════════════════════════════════════════════════════════════════ */ body.hv5 .hv5-happy{ position:fixed; left:50%; transform:translateX(-50%); bottom:20px; z-index:8000; width:min(580px, calc(100vw - 32px)); display:flex; align-items:center; gap:8px; background:rgba(19,28,66,.96); backdrop-filter:blur(12px); border-radius:999px; padding:4px 4px 4px 16px; box-shadow:0 20px 44px -20px rgba(0,0,0,.8); } body.hv5 .hv5-happy input{ flex:1; min-width:0; background:none; border:none; outline:none; font-family:inherit; font-size:14px; color:var(--v5-encre); } body.hv5 .hv5-happy input::placeholder{ color:var(--v5-encre-4) } body.hv5 .hv5-happy button{ flex:0 0 auto; background:var(--v5-encre); color:#FFFFFF; border:none; border-radius:999px; width:38px; height:38px; cursor:pointer; display:flex; align-items:center; justify-content:center; } body.hv5 .hv5-happy button:hover{ background:var(--v5-vert-2) } /* De l'air sous la dernière bulle, pour que la barre n'en recouvre jamais une. */ body.hv5 .hv5-fond-de-page{ height:104px } body.hv5 .hv5-bilan{ display:flex; align-items:center; gap:12px; margin-top:8px; padding:0 4px; font-size:13px; color:var(--v5-encre-4); } /* ═══════════════════════════════════════════════════════════════════════════ * LE CHROME — LA BARRE DE GAUCHE ET LA COLONNE * * 2026-09-11, vu à l'écran : sur la page passée en V5, LES TITRES DES BULLES * ÉTAIENT INVISIBLES — marine sur marine. Christophe lisait « CE QUI NE VA PAS » * et le bouton, mais pas ce qui n'allait pas. * * Cause : trois feuilles anciennes habillent encore tout le back-office, et * elles imposent leurs couleurs en !important — * modern.css .main h2 { color: var(--m-ink) !important } * espace-client.css body.happia-fun .sidebar { background:#FAFAF8 !important } * sidebar-render.js une feuille injectée qui peint l'entrée active en vert clair * * Deux remèdes, dans cet ordre : * 1. une page V5 NE PORTE PLUS la classe happia-fun. Cela éteint d'un coup * toutes les règles « body.happia-fun … » — sans décharger les feuilles, * donc sans casser les bandeaux ni les écrans qui attendent leur tour. * 2. ce qui reste (modern.css vise aside.sidebar et .main h2 sans préfixe) * est repris ici, nommément. Le !important n'est pas une facilité : il * répond à un !important. La liste est EXHAUSTIVE et FERMÉE — le jour où * modern.css disparaît, tout ce bloc disparaît avec. * ═══════════════════════════════════════════════════════════════════════════ */ /* Lues par la feuille que sidebar-render.js injecte : elle garde des valeurs de * repli pour les écrans encore en clair, et prend celles-ci sur une page V5. */ body.hv5{ --sb-actif-fond:var(--v5-nav-fond-actif); --sb-actif-encre:var(--v5-nav-actif); --sb-actif-trait:var(--v5-vert); } body.hv5 aside.sidebar{ background:var(--sidebar-bg) !important; border-right:1px solid var(--v5-filet) !important } body.hv5 aside.sidebar .brand img{ filter:brightness(0) invert(1) !important } body.hv5 aside.sidebar nav a{ color:var(--v5-encre-3) !important; border-radius:10px !important; font-weight:500 !important } body.hv5 aside.sidebar nav a:hover{ background:var(--v5-bulle) !important; color:var(--v5-encre) !important } body.hv5 aside.sidebar nav a.active{ background:var(--sb-actif-fond) !important; color:var(--sb-actif-encre) !important; font-weight:600 !important } body.hv5 aside.sidebar nav a svg{ stroke:currentColor !important } body.hv5 aside.sidebar nav a.active svg{ stroke:var(--v5-vert) !important } body.hv5 aside.sidebar .nav-label, body.hv5 aside.sidebar .nav-group-toggle{ color:var(--v5-encre-4) !important } body.hv5 aside.sidebar .nav-group-toggle:hover{ color:var(--v5-encre-3) !important } body.hv5 aside.sidebar .footer{ border-top:1px solid var(--v5-filet) !important } body.hv5 aside.sidebar .avatar{ background:var(--v5-encre) !important; color:#FFFFFF !important } body.hv5 aside.sidebar .user-info .nm{ color:var(--v5-encre) !important } body.hv5 aside.sidebar .user-info .em{ color:var(--v5-encre-4) !important } body.hv5 aside.sidebar .logout{ color:var(--v5-encre-4) !important } body.hv5 aside.sidebar .logout:hover{ color:var(--v5-encre) !important } /* Les deux blocs que sidebar-render.js pose en styles en ligne écrivent déjà * color:inherit et des blancs translucides : ils suivent le fond sombre tout * seuls. On ne retouche que leur fond, trop pâle sur ce bleu. */ body.hv5 #sb-credits{ background:rgba(255,255,255,.07) !important } body.hv5 #sb-whatsapp{ background:rgba(37,211,102,.14) !important } /* La colonne. Même raison : modern.css impose taille ET couleur sur .main h1/h2/h3. */ body.hv5 .main h1, body.hv5 .page-head h1{ color:var(--v5-encre) !important } body.hv5 .page-head .sub{ color:var(--v5-encre-3) !important } body.hv5 .a-sec-head{ color:var(--v5-encre) !important } body.hv5 .a-sec .sec-count, body.hv5 .a-sec .sec-chev{ color:var(--v5-encre-4) !important } /* LE TITRE DE LA BULLE — c'est celui-ci qui était illisible. Il reste en

* (c'est un titre, un lecteur d'écran doit le savoir), donc il tombe sous * « .main h2 » de modern.css : 16 px et encre marine, les deux forcés. */ body.hv5 .hv5-b-titre{ color:var(--v5-encre) !important; font-size:19px !important; font-weight:600 !important; line-height:1.35 !important; letter-spacing:-.01em !important; } @media(max-width:620px){ body.hv5 .hv5-b-titre{ font-size:16px !important } } body.hv5 .hv5-bulle.attente .hv5-b-titre{ font-size:16px !important; font-weight:550 !important; line-height:1.3 !important } body.hv5 .hv5-f-corps .hv5-b-titre{ font-family:"Sora",-apple-system,BlinkMacSystemFont,system-ui,sans-serif !important; font-size:clamp(24px,4vw,34px) !important; line-height:1.16 !important; letter-spacing:-.03em !important; } body.hv5 .hv5-bulle.done .hv5-b-titre{ color:var(--v5-encre-3) !important } /* ——— UNE BULLE EN ATTENTE SE CLIQUE ——— * Christophe, devant l'écran : « quand tu appuies sur une bande il ne se passe * rien ». Une bulle courte cache un face-à-face et un tiroir : elle doit donc * dire, sans un mot, qu'on peut l'ouvrir. Le curseur et le léger éclaircissement * au survol suffisent — un chevron de plus serait un objet de plus. */ body.hv5 .hv5-bulle.attente{ cursor:pointer; transition:background .15s } body.hv5 .hv5-bulle.attente:hover{ background:var(--v5-survol) } body.hv5 .hv5-bulle.attente:focus-visible{ outline:2px solid var(--v5-vert); outline-offset:3px } /* Le bouton et les liens gardent leur propre curseur : ils font autre chose * que déplier, et le clic ne doit pas se confondre. */ body.hv5 .hv5-bulle.attente .hv5-btn{ cursor:pointer } body.hv5 .hv5-bulle.ouverte{ cursor:default } /* ═══════════════════════════════════════════════════════════════════════════ * LE PONT — COMMENT TOUT LE BACK-OFFICE BASCULE SANS ÊTRE RÉÉCRIT * * 2026-09-11 — Christophe : « on refait tout le back office ». * * 23 écrans, chacun avec sa propre feuille en ligne écrite pour un fond blanc. * Les repeindre un par un, c'était des heures et autant d'occasions de laisser * du texte marine sur du marine, comme sur « À corriger ». * * Sauf qu'en les inventoriant, une chose saute aux yeux : DIX-NEUF DE CES * VINGT-TROIS ÉCRANS DÉCLARENT LA MÊME PALETTE — --bg, --surface, --surface-2, * --border, --ink, --ink-2, --ink-3, --brand… soit environ 1 300 usages. * Chacun l'écrit dans son propre :root. * * Alors on ne touche pas aux écrans : on redéfinit ces variables ICI, sur * body.hv5. Une déclaration sur l'emporte sur celle de :root pour tout * ce qui est dans la page, et les 1 300 usages suivent d'un coup. * * Ce que le pont NE règle pas, ce sont les couleurs écrites en dur dans ces * feuilles — d'où la liste de surfaces blanches qui suit, relevée * automatiquement dans les 23 écrans. Elle est le prix de l'ancien code ; elle * rétrécira à mesure qu'on réécrira les écrans pour de bon. * * RIEN DE TOUT CELA NE S'APPLIQUE tant qu'un écran ne porte pas `hv5` sur son * . On bascule donc écran par écran, et on peut revenir en arrière sur * un seul en retirant une classe. * ═══════════════════════════════════════════════════════════════════════════ */ body.hv5{ /* Les fonds */ --bg:var(--v5-fond); --surface:var(--v5-bulle); --surface-2:var(--v5-bulle-2); --sidebar-bg:var(--v5-nav); /* 🆕 13/09 : la colonne passe JUSTE AU-DESSUS du fond, plus en dessous — sur un noir neutre, descendre encore donnait un trou noir sans limite lisible. */ /* Les traits. Sur fond sombre un filet clair fait du bruit : on descend. */ --border:var(--v5-filet); --border-strong:var(--v5-filet-2); --line:var(--v5-filet); /* L'encre. Inversée, en gardant les trois niveaux de gris que les écrans utilisent pour hiérarchiser — sinon tout revient au même ton. */ --ink:var(--v5-encre); --ink-2:var(--v5-encre-2); --ink-3:var(--v5-encre-3); /* La marque. --brand servait de couleur de TEXTE sombre sur blanc : sur fond sombre il devient l'encre claire, sinon il disparaît dans le fond. */ --brand:var(--v5-encre); --brand-2:var(--v5-vert); --brand-soft:var(--v5-vert-sol); --mint:var(--v5-vert); --mint-dark:var(--v5-vert-txt); --mint-text:var(--v5-vert-txt); --grad:linear-gradient(135deg,var(--v5-bulle) 0%,var(--v5-survol) 55%,var(--v5-vert) 100%); /* Les trois états. Les fonds pâles deviennent des fonds sourds, les encres montent en luminosité : un vert foncé sur un bleu nuit ne se lit pas. */ --etat-ok:var(--v5-succes); --etat-ok-bg:var(--v5-succes-sol); --etat-ok-line:var(--v5-succes-fil); --etat-warn:var(--v5-encre-2); --etat-warn-bg:var(--v5-neutre-sol); --etat-warn-line:var(--v5-survol); --etat-bad:var(--v5-rouge-doux); --etat-bad-bg:var(--v5-rouge-sol); --etat-bad-line:var(--v5-rouge-fil); --ok:var(--v5-succes); --ok-bg:var(--v5-succes-sol); --ok-line:var(--v5-succes-fil); --warn:var(--v5-encre-2); --warn-bg:var(--v5-neutre-sol); --bad:var(--v5-rouge); --bad-bg:var(--v5-rouge-sol); --sunny:var(--v5-ambre); --coral:var(--v5-rouge); /* 🆕 13/09 — TROIS JETONS QUI SERVAIENT DE FOND SANS ÊTRE DÉFINIS ICI. * * Christophe, sur « Mes réseaux » : sa bio Instagram était illisible. La règle disait * `background: var(--cream-2, #EFF1F6)` et `color: var(--ink)`. Le pont reprend bien * `--ink` (presque blanc) mais ignorait `--cream-2` : la règle tombait sur son repli, un * blanc cassé. Encre blanche sur fond blanc. * * 🚨 C'est la forme la plus sournoise du problème : la règle est correcte, la couleur de * repli est correcte pour le thème pour lequel elle a été écrite, et RIEN ne signale que le * jeton manque. C'est le repli qui trahit, jamais la règle. */ --cream:var(--v5-bulle); --cream-2:var(--v5-bulle-2); --eb-bg:var(--v5-bulle-2); /* Les ombres ne servent à rien sur fond sombre : elles salissent. */ /* 🆕 13/09 — lg et xl manquaient : deux ombres marine survivaient au pont, et une ombre bleue sur un fond noir ne creuse rien, elle salit. */ --shadow-sm:none; --shadow-md:none; --shadow-lg:none; --shadow-xl:none; } /* ═══════════════════════════════════════════════════════════════════════════ * LE PONT — LES COULEURS ÉCRITES EN DUR DANS L'ANCIEN CODE * * Relevé dans styles */ /*.css, scripts */ /*.js (feuilles injectées) et les