/* ═══════════════════════════════════════════════════════════════════════════════════════════════ AMBIANCES (20.09.2026) Jusqu'ici : deux modes (clair / sombre) et quatre couleurs d'accent. Mais une couleur de bouton n'est pas un thème. Un thème, c'est un fond, des surfaces, une bordure et une encre qui tiennent ensemble — et c'est ce qui change vraiment la sensation d'un outil qu'on garde ouvert huit heures. POURQUOI UN SECOND ATTRIBUT PLUTÔT QUE DE NOUVELLES VALEURS DE data-theme. Tout le CSS du CRM distingue clair et sombre par `html:not([data-theme="clair"])`. Ajouter « papier » comme valeur de data-theme aurait fait passer un thème CLAIR par toutes les règles du sombre — bandeaux inversés compris. On garde donc data-theme pour dire clair-ou-sombre (l'interrupteur structurel) et on ajoute data-ambiance pour dire laquelle. Les centaines de règles existantes continuent de fonctionner sans être touchées. Chaque ambiance redéfinit les mêmes dix variables, ni plus ni moins. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── ARDOISE — sombre, gris-bleu froid ───────────────────────────────────────────────────────── Le plus neutre des sombres : aucune teinte dominante, donc les couleurs des données (vert, rouge, ambre) s'y lisent pour ce qu'elles sont. C'est l'ambiance d'un outil de travail. */ html[data-ambiance="ardoise"] { --bg: #0F172A; --surface: #1B263B; --surface-alt: #223049; --surface-hover: #2A3A55; --border: #2E3E58; --text: #E8EDF5; --text-muted: #9AA8BF; --text-dim: #8696AE; /* 11.10.2026 : 3,8 → 5,9:1 */ --sidebar: #131C2E; --navy: #131C2E; } /* ── NUIT — noir profond ─────────────────────────────────────────────────────────────────────── Presque noir, pour les écrans OLED : un pixel noir y est éteint, donc la nuit consomme moins et tient mieux le contraste. On ne descend PAS à #000 — un noir absolu sous du texte blanc fatigue l'œil et fait baver les lettres. */ html[data-ambiance="nuit"] { --bg: #08090B; --surface: #131417; --surface-alt: #1A1B1F; --surface-hover: #212328; --border: #26282E; --text: #EDEEF0; --text-muted: #9B9EA6; --text-dim: #8D9098; /* 11.10.2026 : 3,5 → 6,2:1 */ --sidebar: #0C0D0F; --navy: #0C0D0F; } /* ── BLEU REX — le troisième mode (10.10.2026) ───────────────────────────────────────────────── « Crée un 3e thème couleur. » Entre le clair et le sombre presque noir : un thème tout entier dans le bleu marine de la marque. Fond marine profond, cartes un ton au-dessus, encre blanche légèrement bleutée ; le menu y garde son marine vif (css/99-menu). C'est un thème sombre pour toutes les règles du CRM (data-theme reste « sombre »), seule la teinte change. */ html[data-ambiance="bleu"] { --bg: #0C1A36; --surface: #13254A; --surface-alt: #172B54; --surface-hover: #1D3461; --border: #284170; --text: #EDF3FC; --text-muted: #A8BCDD; --text-dim: #7088B0; --sidebar: #113679; --navy: #113679; } /* ── THÈMES DE CLUB (10.10.2026, renforcés le 11.10.2026) ────────────────────────────────────── « Alejandro, fan du Barça, il lui faut un thème FCB, et moi un thème Valencia CF. » Puis : « blaugrana beaucoup plus prononcé », « Valence plus assimilable à Valence », et Arsenal. Trois ambiances aux couleurs des clubs, rangées à part dans Apparence (groupe « Clubs »). Ici : les variables (fond, surfaces, encre, accent, encre des bandeaux). Le menu, la barre du haut sur iPhone, les bandeaux, les filigranes et la typographie des titres : css/99-menu.css. Contrastes vérifiés par test/themes-club.test.js (texte et texte atténué ≥ 4,5:1 sur le fond et les surfaces, texte des boutons ≥ 4,5:1 sur l'accent, encre des bandeaux ≥ 4,5:1). */ /* FC BARCELONA — sombre : fond bleu nuit, accent OR #EDBB00 (boutons à encre bleu nuit, 10:1 ; liens et onglets actifs en or, 9:1 sur les surfaces). Le CRM écrit aussi ses liens avec --accent : un grenat (#A50044) n'y tenait que 2,1:1 sur le bleu nuit. Le grenat reste dans les rayures du menu et des bandeaux. Les bandeaux ne sont PLUS bleu ciel comme dans les autres sombres : ils prennent les rayures blaugrana (css/99-menu.css) et donc une encre blanche — d'où la redéfinition des --bnd-*. */ html[data-ambiance="fcb"] { --bg: #0A1230; --surface: #111C44; --surface-alt: #15224F; --surface-hover: #1B2A5E; --border: #26366E; --text: #F2F5FC; --text-muted: #AEB9D8; --text-dim: #8592BA; --sidebar: #004D98; --navy: #004D98; --accent: #EDBB00; --accent-dim: rgba(237,187,0,.16); --accent-border: rgba(237,187,0,.5); --on-accent: #0A1230; --club-or: #EDBB00; --club-1: #004D98; --club-2: #A50044; --bnd-encre: #FFFFFF; --bnd-encre-douce: rgba(255,255,255,.86); --bnd-encre-tres-douce: rgba(255,255,255,.74); --bnd-verre: rgba(255,255,255,.13); --bnd-verre-bord: rgba(255,255,255,.32); --bnd-ligne: rgba(237,187,0,.30); --bnd-ligne-vive: rgba(237,187,0,.55); --bnd-ombre: 0 16px 38px rgba(0,0,0,.5); } /* VALENCIA CF — clair : le blanc du maillot, le noir du short, l'orange du rat penat. L'orange vif (#F27F1B) est réservé au décor ; boutons et liens prennent un orange brûlé (#C2410C) qui porte un texte blanc à 5,2:1. */ html[data-theme="clair"][data-ambiance="valencia"] { --bg: #F5F4F1; --surface: #FFFFFF; --surface-alt: #FAF9F7; --surface-hover: #F0EEEA; --border: #E3E0DA; --text: #121212; --text-muted: #55524D; --text-dim: #6A665F; /* 11.10.2026 : 3,9 → 5,2:1 */ --sidebar: #111111; --navy: #111111; --accent: #C2410C; --accent-dim: rgba(194,65,12,.10); --accent-border: rgba(194,65,12,.40); --on-accent: #FFFFFF; --club-or: #F27F1B; --club-1: #111111; --club-2: #F27F1B; } /* La Senyera coronada (11.10.2026) : « il manque au-dessus des couleurs rouges et jaunes le bandeau bleu ciel avec les feuilles d'or de la Communauté valencienne, ici il n'y a que le rouge et jaune d'Aragon ». Le drapeau valencien hissé à la verticale (comme aux balcons) : la bande azur couronnée EN HAUT, les barres jaune et rouge dessous. Partout où le liseré senyera apparaît (menu, barre du haut sur iPhone, bandeaux, widget « Mon club », aperçu dans Apparence), la bande azur passe au-dessus (css/99-menu.css, css/99-sport.css). Les ornements, en SVG dans le CSS : — 11.10.2026, 2e passe (« redessine les fleurs d'or selon le modèle, les fleurs sont verticales ») : les ornements du drapeau, debout. Sur le drapeau à plat, ils partent d'un filet d'or le long des barres et pointent vers la hampe ; drapeau hissé, ils se dressent sur le filet, en bas de la bande bleue. Tuile de 32 × 24 (--vlc-fleurons), dans l'ordre du drapeau : grand fleuron (pointe en fer de lance, feuille d'acanthe, deux feuilles de vigne, deux longues vrilles en spirale, deux arcs vers le filet), clochette, bouton (pointe fleurdelisée sur un collier, bouton fermé, feuilles), clochette. Le grand fleuron est dessiné à 0 ET à 32 : la tuile se raccorde sans couture malgré les vrilles qui débordent ; — --vlc-fleurons-court : les mêmes, sans les détails qui deviennent une poussière d'or sous 15 px (spirales de la pointe, tiges en amande, nervures), vrilles épaissies — pour le menu ; — la couronne, à gauche, sur un cartouche azur opaque de 36 × 24 qui prend la place d'un grand fleuron : la frise est calée (décalage de 22/24 de la hauteur) pour qu'un grand fleuron tombe pile sous la couronne. Le cartouche est découpé en escalier pour couvrir la vrille du fleuron caché sans mordre sur le bouton voisin. Même dégradé que la bande : aucun raccord visible ; — --vlc-bordure : la bordure rouge du drapeau, entre le bleu et les barres — points blancs, rosette d'or, joyau vert serti d'or. Seulement là où elle se lit (4 px et plus). L'or (#F6CB55 → #E5AE34) sur l'azur ne contraste que par la teinte : une ombre bleu nuit d'un demi-pixel, sous chaque motif, le détache. Sous 10 px de haut (barre iPhone, widget), la bande reste nue : une couronne de 5 px ne serait plus qu'une tache. Aucun texte n'est posé dessus. */ html[data-ambiance="valencia"], .amb-carte[data-amb="valencia"] { --vlc-azur: linear-gradient(180deg, #2C9BE8 0%, #1E88D9 100%); --vlc-fleurons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cdefs%3E%3ClinearGradient id='o' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='24'%3E%3Cstop offset='0' stop-color='%23F6CB55'/%3E%3Cstop offset='1' stop-color='%23E5AE34'/%3E%3C/linearGradient%3E%3Cg id='gp' stroke='none'%3E%3Cpath d='M0 .6C.75 1.8 1.3 3.1 1.45 4.5C2.3 4.1 3.2 4.5 3.4 5.5C2.6 5.6 2 6.1 1.75 6.8L0 7.5L-1.75 6.8C-2 6.1-2.6 5.6-3.4 5.5C-3.2 4.5-2.3 4.1-1.45 4.5C-1.3 3.1-.75 1.8 0 .6Z'/%3E%3Cpath d='M0 6.9L1 8.2L2.2 7.5L2.4 9L3.7 8.8L3.2 10.5L4.3 10.9L2.8 12.3L1.4 12.1L0 13.7L-1.4 12.1L-2.8 12.3L-4.3 10.9L-3.2 10.5L-3.7 8.8L-2.4 9L-2.2 7.5L-1 8.2Z'/%3E%3Crect x='-.4' y='6.5' width='.8' height='16.2'/%3E%3C/g%3E%3Cg id='gd'%3E%3Cpath stroke='none' d='M-.8 15.6C-2.4 16.4-4.7 16.2-5.9 15L-7.2 15.2L-6.8 13.8L-7.8 12.8L-6.4 12.4L-6.8 10.8L-5.3 11.2L-5 9.6L-3.8 10.6L-3 9.6C-2 11.2-1.1 13.2-.8 15.6Z'/%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath stroke-width='1.05' d='M-2.9 10.6C-5.2 9.6-9.6 7.8-11.3 5.6C-12.5 4-11.6 2.1-9.9 2.1C-8.6 2.1-8.1 3.3-8.6 3.7C-9.1 4.1-9.6 3.8-9.5 3.4'/%3E%3Cpath stroke-width='.6' d='M-.6 8.4C-2 8.9-3.6 8.6-3.9 7.5C-4.1 6.7-3.2 6.4-2.9 7'/%3E%3Cpath stroke-width='.85' d='M-.2 17.2C-1.6 18.2-3.2 19.6-3.7 22.7'/%3E%3C/g%3E%3C/g%3E%3Cg id='bp' stroke='none'%3E%3Cpath d='M0 3.6C.6 4.6 1 5.6 1.05 6.7C1.6 6.5 2.1 6.8 2.2 7.4C1.6 7.5 1.2 7.8 1 8.3H-1C-1.2 7.8-1.6 7.5-2.2 7.4C-2.1 6.8-1.6 6.5-1.05 6.7C-1 5.6-.6 4.6 0 3.6Z'/%3E%3Crect x='-1' y='8.3' width='2' height='.75' rx='.2'/%3E%3Crect x='-.35' y='8.8' width='.7' height='13.9'/%3E%3Cpath d='M0 10.9C1.3 11.2 2.2 12.2 2.1 13.4L1.2 13.1L.9 14.1L0 13.5L-.9 14.1L-1.2 13.1L-2.1 13.4C-2.2 12.2-1.3 11.2 0 10.9Z'/%3E%3C/g%3E%3Cg id='bd'%3E%3Cpath stroke='none' d='M-.5 18.6C-1.8 19-3.4 18.6-4 17.6L-4.9 17.5L-4.4 16.5L-5 15.7L-4 15.5L-4.2 14.3L-3.1 14.7L-2.7 13.6C-1.6 14.8-.8 16.4-.5 18.6Z'/%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath stroke-width='.55' d='M-.9 8.6C-2 8.4-2.9 7.4-2.6 6.4C-2.4 5.7-1.6 5.8-1.6 6.4'/%3E%3Cpath stroke-width='.5' d='M-.4 9C-2 9.8-2.4 11.4-1.6 12.4'/%3E%3Cpath stroke-width='.75' d='M-.2 19C-1.4 19.8-2.6 21-3 22.7'/%3E%3C/g%3E%3C/g%3E%3Cg id='cl' stroke='none'%3E%3Cpath d='M0 16.1L.75 17.5L1.85 16.9C1.9 18.4 1.4 19.4.45 19.9V21.2L1.25 22.7H-1.25L-.45 21.2V19.9C-1.4 19.4-1.9 18.4-1.85 16.9L-.75 17.5Z'/%3E%3C/g%3E%3Cg id='m'%3E%3Crect stroke='none' y='22.7' width='32' height='1.3'/%3E%3Cuse href='%23gp' x='0'/%3E%3Cuse href='%23gd' x='0'/%3E%3Cuse href='%23gd' transform='translate(0 0) scale(-1 1)'/%3E%3Cuse href='%23gp' x='32'/%3E%3Cuse href='%23gd' x='32'/%3E%3Cuse href='%23gd' transform='translate(32 0) scale(-1 1)'/%3E%3Cuse href='%23cl' x='8.5'/%3E%3Cuse href='%23bp' x='16'/%3E%3Cuse href='%23bd' x='16'/%3E%3Cuse href='%23bd' transform='translate(16 0) scale(-1 1)'/%3E%3Cuse href='%23cl' x='23.5'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23m' fill='%230B4A80' stroke='%230B4A80' opacity='.5' y='.6'/%3E%3Cuse href='%23m' fill='url(%23o)' stroke='url(%23o)'/%3E%3Cg fill='none' stroke='%230B4A80' stroke-opacity='.6' stroke-width='.35'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M0 7.4V15.6M0 11.4L-2.6 9.3M0 11.4L2.6 9.3M-1 15.2L-5.6 12.6M-1.6 14L-4.6 10.6M1 15.2L5.6 12.6M1.6 14L4.6 10.6'/%3E%3C/g%3E%3Cg transform='translate(32 0)'%3E%3Cpath d='M0 7.4V15.6M0 11.4L-2.6 9.3M0 11.4L2.6 9.3M-1 15.2L-5.6 12.6M-1.6 14L-4.6 10.6M1 15.2L5.6 12.6M1.6 14L4.6 10.6'/%3E%3C/g%3E%3Cg transform='translate(16 0)'%3E%3Cpath d='M0 11.4V18.4M-.6 18.2L-3.8 15.6M.6 18.2L3.8 15.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --vlc-fleurons-court: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cdefs%3E%3ClinearGradient id='o' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='24'%3E%3Cstop offset='0' stop-color='%23F6CB55'/%3E%3Cstop offset='1' stop-color='%23E5AE34'/%3E%3C/linearGradient%3E%3Cg id='gp' stroke='none'%3E%3Cpath d='M0 .6C.75 1.8 1.3 3.1 1.45 4.5C2.3 4.1 3.2 4.5 3.4 5.5C2.6 5.6 2 6.1 1.75 6.8L0 7.5L-1.75 6.8C-2 6.1-2.6 5.6-3.4 5.5C-3.2 4.5-2.3 4.1-1.45 4.5C-1.3 3.1-.75 1.8 0 .6Z'/%3E%3Cpath d='M0 6.9L1 8.2L2.2 7.5L2.4 9L3.7 8.8L3.2 10.5L4.3 10.9L2.8 12.3L1.4 12.1L0 13.7L-1.4 12.1L-2.8 12.3L-4.3 10.9L-3.2 10.5L-3.7 8.8L-2.4 9L-2.2 7.5L-1 8.2Z'/%3E%3Crect x='-.4' y='6.5' width='.8' height='16.2'/%3E%3C/g%3E%3Cg id='gd'%3E%3Cpath stroke='none' d='M-.8 15.6C-2.4 16.4-4.7 16.2-5.9 15L-7.2 15.2L-6.8 13.8L-7.8 12.8L-6.4 12.4L-6.8 10.8L-5.3 11.2L-5 9.6L-3.8 10.6L-3 9.6C-2 11.2-1.1 13.2-.8 15.6Z'/%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath stroke-width='1.35' d='M-2.9 10.6C-5.2 9.6-9.6 7.8-11.3 5.6C-12.5 4-11.6 2.1-9.9 2.1C-8.6 2.1-8.1 3.3-8.6 3.7'/%3E%3Cpath stroke-width='1.05' d='M-.2 17.2C-1.6 18.2-3.2 19.6-3.7 22.7'/%3E%3C/g%3E%3C/g%3E%3Cg id='bp' stroke='none'%3E%3Cpath d='M0 3.6C.6 4.6 1 5.6 1.05 6.7C1.6 6.5 2.1 6.8 2.2 7.4C1.6 7.5 1.2 7.8 1 8.3H-1C-1.2 7.8-1.6 7.5-2.2 7.4C-2.1 6.8-1.6 6.5-1.05 6.7C-1 5.6-.6 4.6 0 3.6Z'/%3E%3Crect x='-1' y='8.3' width='2' height='.75' rx='.2'/%3E%3Crect x='-.35' y='8.8' width='.7' height='13.9'/%3E%3Cpath d='M0 10.9C1.3 11.2 2.2 12.2 2.1 13.4L1.2 13.1L.9 14.1L0 13.5L-.9 14.1L-1.2 13.1L-2.1 13.4C-2.2 12.2-1.3 11.2 0 10.9Z'/%3E%3C/g%3E%3Cg id='bd'%3E%3Cpath stroke='none' d='M-.5 18.6C-1.8 19-3.4 18.6-4 17.6L-4.9 17.5L-4.4 16.5L-5 15.7L-4 15.5L-4.2 14.3L-3.1 14.7L-2.7 13.6C-1.6 14.8-.8 16.4-.5 18.6Z'/%3E%3Cpath fill='none' stroke-width='.95' stroke-linecap='round' d='M-.2 19C-1.4 19.8-2.6 21-3 22.7'/%3E%3C/g%3E%3Cg id='cl' stroke='none'%3E%3Cpath d='M0 16.1L.75 17.5L1.85 16.9C1.9 18.4 1.4 19.4.45 19.9V21.2L1.25 22.7H-1.25L-.45 21.2V19.9C-1.4 19.4-1.9 18.4-1.85 16.9L-.75 17.5Z'/%3E%3C/g%3E%3Cg id='m'%3E%3Crect stroke='none' y='22.7' width='32' height='1.3'/%3E%3Cuse href='%23gp' x='0'/%3E%3Cuse href='%23gd' x='0'/%3E%3Cuse href='%23gd' transform='translate(0 0) scale(-1 1)'/%3E%3Cuse href='%23gp' x='32'/%3E%3Cuse href='%23gd' x='32'/%3E%3Cuse href='%23gd' transform='translate(32 0) scale(-1 1)'/%3E%3Cuse href='%23cl' x='8.5'/%3E%3Cuse href='%23bp' x='16'/%3E%3Cuse href='%23bd' x='16'/%3E%3Cuse href='%23bd' transform='translate(16 0) scale(-1 1)'/%3E%3Cuse href='%23cl' x='23.5'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23m' fill='%230B4A80' stroke='%230B4A80' opacity='.5' y='.8'/%3E%3Cuse href='%23m' fill='url(%23o)' stroke='url(%23o)'/%3E%3C/svg%3E"); --vlc-couronne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Cdefs%3E%3ClinearGradient id='o' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='24'%3E%3Cstop offset='0' stop-color='%23F6CB55'/%3E%3Cstop offset='1' stop-color='%23E5AE34'/%3E%3C/linearGradient%3E%3ClinearGradient id='a' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232C9BE8'/%3E%3Cstop offset='1' stop-color='%231E88D9'/%3E%3C/linearGradient%3E%3Cg id='m'%3E%3Cg stroke='none'%3E%3Crect stroke='none' y='22.7' width='36' height='1.3'/%3E%3Crect x='15.2' y='18.4' width='13.6' height='3.1' rx='.7'/%3E%3Cpath d='M15.5 18.2L14 9.6L18 13.2L20 7.4L22 12.2L24 7.4L26 13.2L30 9.6L28.5 18.2Z'/%3E%3Ccircle cx='14' cy='8.8' r='1.2'/%3E%3Ccircle cx='20' cy='6.6' r='1.2'/%3E%3Ccircle cx='24' cy='6.6' r='1.2'/%3E%3Ccircle cx='30' cy='8.8' r='1.2'/%3E%3Crect x='21.45' y='5.8' width='1.1' height='6.6'/%3E%3Ccircle cx='22' cy='5.6' r='1.45'/%3E%3Crect x='21.5' y='.9' width='1' height='3.6'/%3E%3Crect x='20.4' y='1.8' width='3.2' height='1'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cpath d='M0 0H35.1V5.4H34V12.4H32.6V24H0Z' fill='url(%23a)'/%3E%3Cuse href='%23m' fill='%230B4A80' stroke='%230B4A80' opacity='.5' y='.6'/%3E%3Cuse href='%23m' fill='url(%23o)' stroke='url(%23o)'/%3E%3Ccircle cx='22' cy='19.95' r='.95' fill='%23DA121A'/%3E%3Ccircle cx='18.2' cy='19.95' r='.75' fill='%231F8A4C'/%3E%3Ccircle cx='25.8' cy='19.95' r='.75' fill='%231F8A4C'/%3E%3C/svg%3E"); --vlc-bordure: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Crect width='24' height='6' fill='%23DA121A'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='0' cy='3' r='1.35'/%3E%3Ccircle cx='24' cy='3' r='1.35'/%3E%3Ccircle cx='12' cy='3' r='1.35'/%3E%3C/g%3E%3Cg fill='%23F2C14E'%3E%3Ccircle cx='6' cy='1.2' r='.5'/%3E%3Ccircle cx='6' cy='4.8' r='.5'/%3E%3Ccircle cx='4.2' cy='3' r='.5'/%3E%3Ccircle cx='7.8' cy='3' r='.5'/%3E%3Ccircle cx='4.75' cy='1.75' r='.4'/%3E%3Ccircle cx='7.25' cy='1.75' r='.4'/%3E%3Ccircle cx='4.75' cy='4.25' r='.4'/%3E%3Ccircle cx='7.25' cy='4.25' r='.4'/%3E%3Cellipse cx='18' cy='3' rx='1.9' ry='1.45'/%3E%3Ccircle cx='18' cy='.75' r='.4'/%3E%3Ccircle cx='18' cy='5.25' r='.4'/%3E%3Ccircle cx='15.4' cy='3' r='.4'/%3E%3Ccircle cx='20.6' cy='3' r='.4'/%3E%3C/g%3E%3Cellipse cx='18' cy='3' rx='1.35' ry='.95' fill='%231F8A4C'/%3E%3C/svg%3E"); } /* ARSENAL — sombre (revu le 11.10.2026 : « beaucoup trop rouge, l'écusson ne se voit pas bien »). Le fond prend le marine du club, presque noir ; les surfaces restent sobres ; le rouge n'est plus qu'un accent. Le rouge officiel #EF0107 ne porte un texte lisible ni en blanc (4:1) ni en marine (3,9:1), et écrit sur le marine il tombe à 3,5:1 : il reste au décor (liserés, repères). Boutons, liens et onglets actifs prennent un rouge clair #FF5A5F : encre marine dessus (5,9:1), lisible comme lien sur les surfaces (5,2:1). Liseré or discret. Comme pour le Barça, les bandeaux deviennent marine à encre blanche (--bnd-*). */ html[data-ambiance="arsenal"] { --bg: #08152E; --surface: #0F2142; --surface-alt: #13284F; --surface-hover: #183160; --border: #22396A; --text: #F4F6FB; --text-muted: #AFBBD3; --text-dim: #8592B0; --sidebar: #063672; --navy: #063672; --accent: #FF5A5F; --accent-dim: rgba(255,90,95,.16); --accent-border: rgba(255,90,95,.5); --on-accent: #08152E; --club-or: #C8A24A; --club-1: #063672; --club-2: #EF0107; --bnd-encre: #FFFFFF; --bnd-encre-douce: rgba(255,255,255,.86); --bnd-encre-tres-douce: rgba(255,255,255,.74); --bnd-verre: rgba(255,255,255,.12); --bnd-verre-bord: rgba(255,255,255,.30); --bnd-ligne: rgba(200,162,74,.30); --bnd-ligne-vive: rgba(239,1,7,.45); --bnd-ombre: 0 16px 38px rgba(0,0,0,.5); } /* ── MARINE — le sombre d'origine, conservé sous son nom ─────────────────────────────────────── Rien à redéfinir : ce sont les valeurs de :root. L'entrée existe pour qu'on puisse y revenir. */ /* ── PAPIER — clair chaud ────────────────────────────────────────────────────────────────────── Un blanc légèrement crème plutôt qu'un blanc pur : à luminosité égale, il renvoie moins de bleu et se lit plus longtemps. L'encre n'est pas noire non plus mais brun très sombre, comme à l'impression. */ html[data-theme="clair"][data-ambiance="papier"] { --bg: #F7F5F1; --surface: #FFFFFF; --surface-alt: #FBFAF7; --surface-hover: #F1EEE8; --border: #E5E1D8; --text: #1C1917; --text-muted: #57534E; --text-dim: #6E685D; /* 11.10.2026 : 3,5 → 5,1:1 */ --sidebar: #FFFFFF; } /* ── AURORE — clair froid, bleuté ────────────────────────────────────────────────────────────── La lumière de l'identité : un fond très légèrement bleu qui met le marine de la marque en valeur, sans le gris terne du clair d'origine. */ html[data-theme="clair"][data-ambiance="aurore"] { --bg: #F2F7FD; --surface: #FFFFFF; --surface-alt: #F7FAFE; --surface-hover: #E8F1FB; --border: #DBE6F3; --text: #0B2458; --text-muted: #4B6285; --text-dim: #5B7196; /* 11.10.2026 : 2,7 → 4,6:1 */ --sidebar: #FFFFFF; } /* ── CONTRASTE — pour qui a besoin de voir ───────────────────────────────────────────────────── Pas une coquetterie : au-delà d'un certain âge ou avec un écran en plein soleil, les gris moyens disparaissent. Ici l'encre est noire, les bordures franches, et rien n'est « atténué » en dessous d'un gris qui reste lisible. */ html[data-theme="clair"][data-ambiance="contraste"] { --bg: #FFFFFF; --surface: #FFFFFF; --surface-alt: #F2F2F2; --surface-hover: #E6E6E6; --border: #767676; --text: #000000; --text-muted: #3A3A3A; --text-dim: #4A4A4A; --sidebar: #FFFFFF; --accent: #0B2458; --accent-dim: rgba(11,36,88,.12); --accent-border: #0B2458; } html[data-ambiance="contraste"] .dbx-carte, html[data-ambiance="contraste"] .tbl-ligne, html[data-ambiance="contraste"] .plc-carte { border-width: 2px; } html[data-ambiance="contraste"] * { text-shadow: none !important; } /* Un outil à contraste élevé ne doit pas reposer sur la couleur seule : le focus devient épais. */ html[data-ambiance="contraste"] :focus-visible { outline: 3px solid #0B2458 !important; outline-offset: 2px; } /* ── L'aperçu, dans les paramètres ───────────────────────────────────────────────────────────── Chaque vignette montre le vrai fond, la vraie surface et la vraie encre de son ambiance. Un nuancier qui ne montre qu'un rond de couleur ne dit rien de ce qu'on va obtenir. */ .amb-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--e-3, 12px); } .amb-carte { cursor: pointer; text-align: left; font-family: inherit; overflow: hidden; border-radius: var(--r-m, 14px); border: 2px solid var(--border); background: var(--surface); padding: 0; transition: border-color var(--v-court, .15s), transform var(--v-court, .15s); } .amb-carte:hover { transform: translateY(-2px); } .amb-carte.actif { border-color: var(--accent); } .amb-apercu { display: block; height: 76px; padding: 10px; position: relative; } .amb-apercu i { display: block; border-radius: 4px; } .amb-apercu .amb-barre { height: 7px; margin-bottom: 6px; } .amb-apercu .amb-carte-mini { height: 34px; border-radius: 6px; } .apx-sous-titre { margin: 0 0 8px; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted); font-weight: 600; } .amb-nom { display: block; padding: 9px 12px 4px; font-size: var(--t-m, 13.5px); font-weight: var(--t-moyen, 600); color: var(--text); } .amb-desc { display: block; padding: 0 12px 11px; font-size: var(--t-xs, 11px); color: var(--text-muted); line-height: 1.4; } /* Valencia CF (11.10.2026) : la vignette montre la Senyera coronada en tête, pleine largeur — la bande azur couronnée aux fleurons debout (16 px) et la bordure rouge à points et joyaux (4 px), puis les barres jaune et rouge (la « bande » de js/80), pleine largeur elles aussi, juste dessous. La marge haute passe de 10 à 20 px pour les loger ; la mini-carte rend ces 10 px (34 → 24 px de haut) : la vignette garde la hauteur des autres. */ .amb-carte[data-amb="valencia"] .amb-apercu { padding-top: 20px; } .amb-carte[data-amb="valencia"] .amb-apercu::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 20px; background: var(--vlc-couronne) left 0 top 0 / auto 16px no-repeat, var(--vlc-fleurons) left 14.667px top 0 / auto 16px repeat-x, var(--vlc-azur) left 0 top 0 / 100% 16px no-repeat, var(--vlc-bordure) left 0 top 16px / auto 4px repeat-x; } .amb-carte[data-amb="valencia"] .amb-apercu > .amb-barre:first-child { width: auto !important; margin: 0 -10px 6px; border-radius: 0; } .amb-carte[data-amb="valencia"] .amb-apercu .amb-carte-mini { height: 24px; } /* ── La flèche retour de la fiche opportunité ────────────────────────────────────────────────── Elle était masquée par css/40 (« le bouton ← global de l'app fait déjà le retour »). Sauf que le ← global est celui que js/44 glisse dans le bandeau QU'IL CRÉE — et la fiche opportunité a son propre hero, donc js/44 ne lui en crée pas. Résultat : le bouton local masqué, le global absent, aucune flèche. On la réaffiche, dessinée comme celle des autres écrans. */ .opx-lien-retour, .opx .opx-lien-retour { display: inline-flex !important; align-items: center; gap: 6px; margin-bottom: var(--e-3, 12px); padding: 7px 13px 7px 10px; border-radius: var(--r-rond, 999px); cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-family: inherit; font-size: var(--t-s, 12.5px); font-weight: 500; box-shadow: var(--o-1); transition: color var(--v-court, .15s), border-color var(--v-court, .15s), transform var(--v-court, .15s); } .opx-lien-retour:hover { color: var(--text); border-color: var(--accent-border); transform: translateX(-2px); }