/* ========================================================================= FONE ZONE — TOKENS DE DIRECTION ARTISTIQUE Source : /FONEZONE-DESIGN.md. Ce fichier est généré depuis la DA, il ne se modifie pas à la main page par page. Discipline : 5 couleurs, 2 familles, une seule forme, un seul geste. Le signal ne dépasse jamais 10 % de la surface d'un écran et ne sert jamais de fond de section. ========================================================================= */ /* ---------- Polices auto-hébergées — zéro appel à Google Fonts ---------- */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/outfit-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/outfit-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/dmsans-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/dmsans-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/dmsans-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/dmsans-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Tokens ---------- */ :root { /* ---- LES SIX NOMS DE LA DA — verrouillés le 27/07, ne pas renommer ---- Ce sont les seuls noms qui font foi. Tout le reste de ce fichier est de l'outillage (échelles, rayons, mouvement) ou de la compatibilité. */ --papier: #FFFFFF; /* fond dominant */ --encre: #0A0A0A; /* texte principal */ --gris: #0A0A0A; /* ⚠ voir « LISIBILITÉ » ci-dessous — ce n'est plus un gris */ --trait: #E2E2E2; /* filets et bordures — le SEUL gris qui survit */ --signal: #E10600; /* rouge d'interface, usage rare */ /* ── LISIBILITÉ — RÈGLE ZYED DU 01/08/2026, ELLE PRIME SUR LA DA ────── PLUS AUCUN TEXTE GRIS NULLE PART. fond blanc → texte #0A0A0A fond noir → texte #FAFAFA rien entre les deux. Ni titre, ni corps, ni prix, ni texte secondaire, ni label, ni placeholder, ni mention légale, ni pied de page. MOTIF, et il vaut mieux que la règle : beaucoup de clients de l'atelier sont âgés. Un gris, ils ne le voient pas. Ce n'est pas une préférence esthétique, c'est du chiffre d'affaires qui ne se lit pas. `--gris` valait #6B6B6B, soit 5,33:1 sur blanc — sous la cible de 7:1. Le NOM survit parce que 828 pages et quatre alias (--body, --soft, --mid, --mu) pointent dessus : le renommer casserait tout pour rien. C'est la VALEUR qui change, en un seul endroit, et la hiérarchie du texte secondaire se refait désormais par la TAILLE, la GRAISSE et l'ESPACE — jamais par une couleur plus pâle. ⛔ Ne pas y remettre un gris. Le seul gris encore légitime dans la charte est `--trait`, et il ne porte jamais de texte : c'est un filet. */ --encre-inverse: #FAFAFA; /* texte sur fond sombre — valeur unique, jamais atténuée */ /* Le fond des blocs sombres. Il lui faut un nom À PART : à l'intérieur de `.fz-sur-sombre`, `--papier` et `--encre` sont justement inversés, donc aucun des deux ne peut servir à poser ce fond sans se mordre la queue. Celui-ci ne bascule jamais. */ --fond-sombre: #0A0A0A; /* ---------- Rayons — TROIS, pas un de plus ---------- Décision Zyed du 28/07/2026 : la pilule est abandonnée au profit du rectangle arrondi discret. Un bouton à 999px attire l'œil par sa forme ; à 8px il se fait oublier et laisse le texte parler. --radius-bouton 8px boutons, champs, pastilles cliquables --r-card 16px cartes et blocs --r-field 8px champs de saisie, aligné sur les boutons ⚠ --pill reste comme ALIAS pour les 1 000 pages qui l'utilisent, mais il ne vaut plus 999px : il pointe sur --radius-bouton. Une page non migrée récupère donc le nouveau registre sans être retouchée. */ --radius-bouton: 8px; --pill: var(--radius-bouton); /* alias historique — ne vaut plus 999px */ /* Fond doux : ni un filet, ni un texte — le remplissage des cartes calmes. Il ne fait pas partie des six tokens de la DA, d'où un nom qui ne peut pas entrer en collision. ⚠ Il s'appelait --soft jusqu'au 28/07 : style.css déclare AUSSI un --soft, mais gris texte #86868b. Sur les 310 pages qui chargent les deux feuilles, style.css passait après et écrasait celui-ci — les fonds clairs sortaient en gris moyen. Le renommage clôt la collision. */ --fond-doux: #F2F2F0; /* ---- Alias de compatibilité ---- 828 pages référencent déjà les anciens noms. Ils pointent sur les tokens de la DA : aucune page ne casse, et il n'existe qu'une seule définition de couleur. À résorber gabarit par gabarit (étape 27). */ --ink: var(--encre); --canvas: var(--papier); --body: var(--gris); --fz-red: var(--signal); /* Familles */ --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-text: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ── La TROISIÈME famille — chasse fixe système, pour les prix ────── Ajoutée le 31/07/2026. La DA du 28/07 en compte trois : « Outfit 700 en display · DM Sans 400/500 en texte · chasse fixe système pour les prix. C'est la signature visuelle : le ticket d'atelier. » Les deux premières étaient déclarées, la troisième n'existait nulle part. ⛔ AUCUNE POLICE N'EST AJOUTÉE AU SITE : c'est une pile SYSTÈME, jamais chargée en woff2. Elle ne coûte pas un octet et existe dans toutes les graisses — le contrôle « fonte en 400 » de verif-coherence ne la concerne donc pas. La pile est recopiée du gabarit de devis du 29/07, elle n'est pas inventée. `--chiffres` va avec : sans chiffres tabulaires, une colonne de prix ne s'aligne pas — le 1 est plus étroit que le 8 et la colonne danse. C'est ce qui distingue un tableau de prix d'une liste bricolée. ⚠️ DÉCLARATION SEULEMENT. L'application aux pages de prix — /tarifs-2026, /boutique, /reconditionne, les fiches produit — vient avec le lot « une seule charte ». */ --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --chiffres: tabular-nums; /* Échelle display — Outfit 700, interlignage serré, jamais de letter-spacing */ --t-d1: 52px; --t-d2: 36px; --t-d3: 32px; --t-d4: 24px; --t-d5: 20px; /* Échelle texte — DM Sans */ --t-t1: 18px; --t-t2: 16px; --t-t3: 14px; --t-t4: 12px; /* Forme — voir le bloc « Rayons » plus haut */ --r-pill: var(--radius-bouton); /* alias historique */ --r-card: 16px; --r-field: var(--radius-bouton); /* les champs suivent les boutons */ /* Une seule élévation autorisée : la carte du tunnel */ --elev-tunnel: 0 4px 24px rgba(0, 0, 0, .08); /* Mouvement : un seul geste */ --ease-da: cubic-bezier(.2, .8, .2, 1); --dur-da: 320ms; --delay-da: 60ms; } @media (max-width: 640px) { :root { --t-d1: 36px; --t-d2: 32px; --t-d3: 28px; } } /* ---------- Primitives ---------- */ /* ---------- Outfit resserré — décision Zyed du 28/07/2026 ---------- Les polices ne changent pas, leur réglage optique oui. Outfit est dessinée large : à 36 px et plus, l'espacement par défaut fait flotter les titres. On resserre à mesure que le corps grandit, jamais en dessous de 20 px où le resserrement nuirait à la lisibilité. ≥ 28 px → -0.03em, interlignage 1.05 20–28 px → -0.02em < 20 px → 0 ⚠ Ces règles vivent ICI et nulle part ailleurs. Une page qui repose son propre letter-spacing sort de la charte et devra être corrigée. */ h1, h2, h3, h4, .da-display, [class*="-titre"], [class*="titre-"] { letter-spacing: -0.02em; } /* Les grands titres : plus serrés, et interlignage court pour que deux lignes forment un bloc et non deux phrases empilées. */ h1, .da-display--xl, .hero h1, .porte-t, section h2 { letter-spacing: -0.03em; line-height: 1.05; } /* En dessous de 20 px, aucun resserrement : le gain optique disparaît et la lisibilité baisse. */ h4, h5, h6, .da-eyebrow, small, .chapo { letter-spacing: 0; } .da-eyebrow { letter-spacing: .08em; } /* l'eyebrow reste espacé, c'est sa fonction */ .da-display { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--encre); text-transform: none; } .da-eyebrow { font-family: var(--font-text); font-weight: 500; font-size: var(--t-t4); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); } /* Tout ce qui est cliquable est une pilule. Un bouton carré est un bug. */ .da-pill { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 56px; padding: 0 28px; border: 0; border-radius: var(--pill); font-family: var(--font-text); font-weight: 500; font-size: var(--t-t2); line-height: 1; text-decoration: none; cursor: pointer; transition: transform 160ms var(--ease-da), opacity 160ms var(--ease-da); } .da-pill:active { transform: scale(.985); } .da-pill--ink { background: var(--encre); color: var(--papier); } .da-pill--signal { background: var(--signal); color: var(--papier); } .da-pill--ghost { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); } .da-card { border-radius: var(--r-card); background: var(--papier); box-shadow: inset 0 0 0 1px var(--trait); } .da-card--ink { background: var(--encre); color: var(--papier); box-shadow: none; } .da-card--soft { background: var(--fond-doux); box-shadow: none; } /* Champs empilés : ils forment un bloc, pas des îlots. */ .da-field-stack { border-radius: var(--r-field); overflow: hidden; background: var(--fond-doux); } .da-field-stack > * + * { border-top: 1px solid var(--trait); } .da-field { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 18px; border: 0; background: transparent; border-radius: var(--r-field); font-family: var(--font-text); font-size: var(--t-t2); color: var(--encre); } /* Focus clavier visible — plancher de qualité, règle 6 de la DA. */ :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 4px; } /* Le prix : le seul endroit où le signal apparaît en gros. */ .da-prix { font-family: var(--font-display); font-weight: 700; color: var(--signal); } /* ---------- Mouvement : un seul geste orchestré ---------- */ @keyframes da-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .da-rise { animation: da-rise var(--dur-da) var(--ease-da) both; } .da-rise--2 { animation-delay: var(--delay-da); } @media (prefers-reduced-motion: reduce) { .da-rise, .da-rise--2 { animation: none; } .da-pill { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════ LISIBILITÉ — LE SEUL BLOC CONTEXTUEL DU SITE. 01/08/2026. Il n'existe qu'ici. Toute page qui charge ce fichier hérite de la règle sans être retouchée : c'est la condition posée par Zyed — « un seul jeu de tokens ou une seule classe, aucune correction page par page ». POURQUOI UN BLOC CONTEXTUEL EST NÉCESSAIRE, et pas seulement un token. `style.css` porte, depuis la section « LEGAL PAGES », des sélecteurs d'ÉLÉMENT NUS et non scopés : `p{color:var(--gris)}`, `h1/h2/h3{color:#0a0a0a}`, `ul{}`, `td{}`, `th{}`. Ils s'appliquent à TOUTE page qui charge la feuille, y compris à l'intérieur d'un bloc au fond noir — et une règle qui matche bat toujours une couleur héritée. C'est là, exactement, qu'un titre noir se retrouvait sur fond noir dans « Ou passez nous voir » de /devis. Un token seul ne pouvait pas l'attraper : il fallait une spécificité qui gagne contre `p{}`. ═══════════════════════════════════════════════════════════════════════ */ /* ---- 1 · LE SENS CLAIR — fond doux, champs, placeholders --------------- `--fond-doux` survit UNIQUEMENT comme fond de champ. Le texte dessus est noir. ⚠ Les champs et le placeholder prennent `inherit` / `currentColor`, PAS `var(--encre)`. Écrire la valeur en dur ici cassait les pages au thème sombre — login, scanner, admin — où le champ a un fond noir : le texte saisi et le placeholder y seraient devenus noirs sur noir. Hérité, le champ suit toujours la couleur de ce qui l'entoure, dans les deux sens, sans que la feuille ait à savoir sur quelle page elle se trouve. `opacity:1` est le vrai correctif du placeholder : Firefox lui applique .54 par défaut, ce qui refabriquait un gris que personne n'avait écrit — un gris invisible dans le CSS, donc introuvable par un balayage. */ .da-card--soft, .da-field-stack, .da-field { color: var(--encre); } input, select, textarea { color: inherit; } ::placeholder { color: currentColor; opacity: 1; } /* LE BLEU NATIF DU NAVIGATEUR — 01/08/2026. `style.css` porte `a{color:var(--encre)}` depuis le chantier lisibilité, mais 693 pages chargent tokens.css SANS style.css : sur celles-là, tout lien sans règle propre restait au `#0000EE` du navigateur. C'est le 04 83 44 10 06 bleu de la page d'accueil — pas un oubli sur ce lien-là, l'absence de la règle sur les deux tiers du site. `inherit` et NON `var(--encre)` — mesuré, pas supposé. Avec `var(--encre)`, 43 liens de pied de page sur 22 pages passaient à 1,00:1 : leur pied est sombre mais ne porte aucun des sélecteurs de la couche contextuelle, si bien que --encre y valait encore #0A0A0A. Le lien devenait noir sur noir, donc INVISIBLE — pire que le bleu qu'on venait corriger, qui tenait au moins 2,3:1. C'est le même piège que le sélecteur `footer` nu retiré le 01/08 au matin. `inherit` fait suivre au lien la couleur du texte qui l'entoure. Ce texte a déjà été tranché par le chantier lisibilité : noir sur fond clair, blanc sur fond sombre. Le lien hérite donc du bon côté sans que la feuille ait à deviner sur quel fond il se trouve — exactement le principe déjà retenu trois lignes plus haut pour les champs de formulaire. ⛔ AUCUN `text-decoration` ici, contrairement à style.css : sur ces 693 pages les liens sont massivement des boutons et des onglets de navigation. Les souligner tous serait une refonte visuelle, pas une correction de couleur — et ce n'est pas ce qui a été demandé. ⛔ Sélecteur d'élément, donc battu par n'importe quelle classe : les liens qui portent déjà leur couleur (`.bm-appeler{color:var(--papier)}`) ne bougent pas d'un pixel. */ a { color: inherit; } /* LE BOUTON CLAIR DANS UN BLOC INVERSÉ — mesuré, 01/08/2026. `.cta-box` est dans la liste d'inversion ci-dessous, mais son fond est ROUGE, pas sombre : elle passe donc son texte en encre inverse, ce qui est juste pour le texte posé sur le rouge. Les boutons BLANCS qu'elle contient héritaient de cette même encre claire — blanc sur blanc, 1,04:1, sur 93 liens de 27 pages. Ils ne s'en apercevaient pas tant qu'ils vivaient du bleu natif du navigateur ; la règle `a{color:inherit}` ci-dessus les a simplement révélés. Le défaut est antérieur, la règle l'a rendu visible. Un élément qui REPOSE son propre fond clair doit reposer son encre avec. ⛔ On ne retire pas `.cta-box` de la liste d'inversion : son texte sur rouge, lui, a bien besoin d'être clair. C'est le bouton qui fait exception, pas le bloc. */ :is(.fz-sur-sombre, .footer, .encadre.plein, .cta-box, .cta-r, .da-card--ink) :is(.cta-btn-w, .cta-btn, .btn-blanc, [style*="background:#fff" i], [style*="background:white" i], [style*="background:#fafafa" i], [style*="background:var(--fond-doux)" i]) { --encre: #0A0A0A; --gris: #0A0A0A; color: #0A0A0A; } /* `.fz-sur-sombre` POSE le fond, les autres sélecteurs de la liste ne font que basculer les couleurs — eux ont déjà leur fond, écrit sur place. C'est ce qui permet de rendre son fond à un bloc qui l'a perdu : il suffit de lui remettre la classe, sans toucher à son contenu ni à son intention. Décision Zyed du 01/08 : « ces blocs ont été écrits pour une section sombre, le texte blanc était le bon choix — c'est le fond qui a disparu. Repeindre le texte en noir, ce serait réparer le symptôme. » */ .fz-sur-sombre { background: var(--fond-sombre); } /* ---- 2 · LE SENS SOMBRE — la seule classe, et ses équivalents connus --- `.fz-sur-sombre` est le nom à poser sur tout nouveau bloc sombre. Les sélecteurs qui l'accompagnent rattrapent les blocs sombres DÉJÀ écrits, sous les trois formes trouvées dans le dépôt : une classe de gabarit, un `footer`, ou un fond posé en style en ligne. */ /* ⛔ `footer` N'EST PAS DANS CETTE LISTE, et c'est une correction mesurée. Il y était : l'hypothèse « un pied de page est sombre » est fausse sur ce dépôt. index.html et les 237 pages reparation-* ont un pied de page CLAIR (`footer{border-top:1px solid var(--trait);color:var(--gris)}`). Le pied passait bien en noir — mais la reprise des sélecteurs d'élément repeignait ses ENFANTS en blanc : « Fone Zone », « 5 rue Marco del Ponte » et « 06150 » sortaient à 1,04:1, blanc sur blanc. Le bouton d'inscription, lui, prenait `background:var(--encre)` basculé en blanc ET son texte en blanc : 1,00:1. Trois défauts que J'AVAIS créés, invisibles à la lecture du CSS, trouvés par la mesure avant/après dans le navigateur. Chaque page déclare déjà la couleur de son pied ; le balayage l'a mise à la bonne valeur. On laisse la page décider — elle sait si son fond est noir. */ :is( .fz-sur-sombre, .footer, .encadre.plein, .cta-box, .da-card--ink, [style*="background:#0a0a0a" i], [style*="background: #0a0a0a" i], [style*="background-color:#0a0a0a" i], [style*="background:#000" i], [style*="background:var(--fond-sombre)" i], [style*="--fond-sombre" i], [style*="background:#0c0c0c" i], [style*="background:#1a1a1a" i] ) { /* les tokens basculent pour TOUT le sous-arbre : un `color:var(--gris)` écrit en style en ligne — que la feuille ne pourrait pas battre — retombe ainsi sur la bonne valeur par simple héritage. */ --encre: var(--encre-inverse); --gris: var(--encre-inverse); --papier: #0A0A0A; color: var(--encre-inverse); } /* La reprise des sélecteurs d'élément nus décrite en tête de bloc. */ :is( .fz-sur-sombre, .footer, .encadre.plein, .cta-box, .da-card--ink, [style*="background:#0a0a0a" i], [style*="background: #0a0a0a" i], [style*="background-color:#0a0a0a" i], [style*="background:#000" i], [style*="background:var(--fond-sombre)" i], [style*="--fond-sombre" i], [style*="background:#0c0c0c" i], [style*="background:#1a1a1a" i] ) :is(h1,h2,h3,h4,h5,h6,p,li,ul,ol,dl,dt,dd,td,th,span,strong,em,b,i,small, label,summary,figcaption,blockquote,address,a) { color: var(--encre-inverse); } /* Les TABLEAUX dans un bloc sombre. Même cause que les sélecteurs nus du bloc 2, mais sur le FOND cette fois : `style.css` porte un `th{background: var(--fond-doux)}` non scopé, hérité de sa section « pages légales ». Posé dans un bloc sombre, il refabrique une cellule claire sous un texte blanc. On rend le fond transparent pour que celui du bloc traverse. Les lignes qui posent leur propre fond en style EN LIGNE gagnent toujours, donc les `rgba(255,255,255,.05)` voulus par le gabarit sont préservés. */ :is( .fz-sur-sombre, .footer, .encadre.plein, .cta-box, .da-card--ink, [style*="background:#0a0a0a" i], [style*="background:var(--fond-sombre)" i], [style*="--fond-sombre" i] ) :is(table, thead, tbody, tfoot, tr, th, td) { background-color: transparent; } /* ---- 3 · LE RETOUR AU CLAIR À L'INTÉRIEUR D'UN BLOC SOMBRE ------------- Une carte blanche posée dans une section noire : le sous-arbre doit REDEVENIR noir sur blanc. Le sélecteur le plus proche gagne, donc il suffit de re-basculer les tokens sur la carte. */ :is( .fz-sur-sombre, .footer, .encadre.plein, .cta-box, .da-card--ink, [style*="background:#0a0a0a" i], [style*="background:var(--fond-sombre)" i], [style*="--fond-sombre" i] ) :is( .da-card, .rev-card, .srv-card, .proc-step, .pc, [style*="background:#fff" i], [style*="background: #fff" i], [style*="background:white" i], [style*="background-color:#fff" i] ) { --encre: #0A0A0A; --gris: #0A0A0A; --papier: #FFFFFF; color: #0A0A0A; } :is( .fz-sur-sombre, .footer, .encadre.plein, .cta-box, .da-card--ink, [style*="background:#0a0a0a" i], [style*="background:var(--fond-sombre)" i], [style*="--fond-sombre" i] ) :is(.da-card, .rev-card, .srv-card, .proc-step, .pc, [style*="background:#fff" i], [style*="background:white" i]) :is(h1,h2,h3,h4,h5,h6,p,li,ul,ol,td,th,span,strong,em,small,label,summary,a) { color: #0A0A0A; } /* ---- 3 bis · LES COULEURS DE MARQUE TIERCES --------------------------- Décision Zyed du 01/08 : « ce vert n'est pas ma charte, c'est une couleur de marque tierce. Mets le texte en NOIR dessus plutôt que de toucher au vert. » Mesuré : #FAFAFA sur #25D366 = 1,90:1, illisible ; #0A0A0A sur le même vert = 11,2:1. `--fond-sombre` et pas `--encre` : à l'intérieur d'un bloc sombre `--encre` bascule au blanc, et le bouton WhatsApp y redeviendrait illisible. Cette valeur-là ne doit jamais basculer, le vert ne bascule pas non plus. `!important` est nécessaire et il est borné : le fond vert est posé 635 fois en style EN LIGNE, que seule une déclaration importante peut battre, et une poignée de fois par des classes déclarées après cette feuille. ⚠ L'ambre #f59e0b des étiquettes de /guides est le MÊME défaut mesuré (blanc sur ambre, 2,1:1). Zyed n'a tranché que sur le vert : j'applique ici le principe qu'il a posé, et je le signale au rapport. */ :is([style*="background:#25d366" i], [style*="background: #25d366" i], [style*="background:#f59e0b" i], [style*="background: #f59e0b" i], .btn-wa, .wa-btn, .wa-float, .btn-whatsapp, .guide-meta), :is([style*="background:#25d366" i], [style*="background: #25d366" i], [style*="background:#f59e0b" i], [style*="background: #f59e0b" i], .btn-wa, .wa-btn, .wa-float, .btn-whatsapp, .guide-meta) :is(span, strong, b, em, small, a, div, p) { color: var(--fond-sombre) !important; } /* ---- 4 · CE QUI PORTE SON PROPRE FOND ---------------------------------- Un bouton n'est pas du texte de lecture : il pose son fond, donc il pose sa couleur. Les deux boutons pleins de la charte sont écrits ici pour que les blocs 2 et 3 ne viennent pas les repeindre au passage. ⛔ Pas de `revert-layer` : sans `@layer` déclaré dans le dépôt, il ne revient nulle part de défini. On écrit la valeur voulue. */ .da-pill--ink, .da-pill--signal, :is(.fz-sur-sombre, .footer, .encadre.plein, .cta-box, .da-card--ink) :is(.da-pill--ink, .da-pill--signal, .tn-pay, .btn-dark, .btn-red) { color: #FAFAFA; }