/* ============================================================================
   FORMAT 2026 — feuille partagee des 574 pages, hors page d'accueil
   ----------------------------------------------------------------------------
   MODELE, releve sur la page d'accueil section par section :

       heros            rgb(20,16,12)     SOMBRE, photo sous un voile chaud
       bande chiffres   rgb(248,244,238)  ivoire
       contenu          blanc et ivoire en alternance
       pied de page     rgb(15,23,42)     SOMBRE

   Soit : heros sombre -> contenu clair -> pied sombre.

   LE HEROS N'EST PAS ECLAIRCI PUIS RATTRAPE : il reste sombre par
   construction. Il est designe par la classe tr-hero, posee sur la section qui
   porte le <h1> -- definition verifiee sur les 575 pages, 404.html mise a part
   puisqu'elle n'a aucune section.

   ARITHMETIQUE DE SPECIFICITE, elle tient tout le fichier :
       zone claire      section:not(.tr-hero) .classe   (0,2,1)
       heros            .tr-hero .classe                (0,2,0) puis ordre
       porteur sombre   ... a[class~=...]:not(...)      (0,6,2) et plus

   LES CARTES ECLAIRCIES SONT EXCLUES DES REGLES DE PORTEUR SOMBRE des le
   depart. Sans cette exclusion, une carte recevait un fond blanc d'une regle
   et du texte blanc d'une autre : blanc sur blanc.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETTE — les valeurs exactes de la page d'accueil
   -------------------------------------------------------------------------- */
:root {
    --invicta-red: #E30613;
    --c-ivoire:  #FBF8F4;
    --c-blanc:   #FFFFFF;
    --c-sable:   #F5EFE7;
    --c-encre:   #1C1917;
    --c-encre2:  #57534E;
    --c-encre3:  #6E6761;
    --c-trait:   #EDE4D9;
    --c-ombre:   rgba(120, 80, 40, .13);
    --c-nuit:    #14100C;   /* le fond du heros, mesure sur l'accueil */
    /* LE ROUGE DU SITE EST #E30613, PARTOUT, SANS VARIANTE.

       J'avais decline ce rouge en deux nuances -- un plus clair sur fond
       sombre, un plus fonce sur fond clair -- pour gagner les quelques
       dixiemes qui manquent au seuil AA du petit corps. Le client a tranche
       l'inverse, et il a raison sur le fond : "certains titres sont devenus
       roses, c'est pas coherent". Un rouge de marque qui change de teinte
       selon son support n'est plus un rouge de marque.

       CE QUE CELA COUTE, mesure et non suppose. Sur les fonds clairs du site
       #E30613 donne 4,61 sur l'ivoire et 4,88 sur le blanc : conforme AA pour
       tous les corps de texte, la nuance foncee n'apportait rien. Sur les
       fonds sombres il donne 3,90 : conforme pour les grands titres, dont le
       seuil est 3,0 -- et c'est la l'immense majorite du rouge sur sombre --
       et court d'un demi-point pour le petit corps rouge sur sombre, qui est
       rare. Les deux variables restent en place et gardent la mecanique
       intacte : une seule ligne suffirait a revenir en arriere. */
    --c-rouge-clair: #E30613;
    --c-rouge-fonce: #E30613;
}


/* --------------------------------------------------------------------------
   2. LE HEROS RESTE SOMBRE
   C'est le renversement qui reglait tout : plus besoin d'eclaircir puis de
   rattraper. Les regles sont ecrites en .tr-hero (0,2,0), ce qui l'emporte
   sur les regles de zone claire sans dependre de l'ordre du fichier.
   -------------------------------------------------------------------------- */
/* LE TRAITEMENT EST LE MEME POUR TOUS LES HEROS, avec ou sans photo, et
   c'est deliberе : distinguer les deux cas demandait de savoir, page par
   page, si une image couvre le heros. Deux methodes de detection -- l'une sur
   le HTML, l'autre sur le rendu -- ont donne 32 et 67 pages : elles ne sont
   pas fiables. Une regle qui ne depend pas de cette distinction ne peut pas
   se tromper.

   DEUX FAMILLES, ET NON UNE. J'avais ecrit ici qu'une regle unique "ne peut
   pas se tromper". Elle se trompait sur 81 pages. Celles-la posent deja
   leurs propres calques en enfant direct du heros -- une photo a 30 % et un
   degrade. Ma photo passait dessous, mon voile s'ajoutait au leur, et le
   panorama de Paris choisi par le client virait au noir. Il me l'a signale
   trois fois : page syndics, four de boulangerie, grande distribution.

   La distinction n'est plus devinee au rendu mais ecrite dans le HTML :
   tr-hero-nu marque les 492 heros sans aucun calque de fond. Eux seuls
   recoivent la photo de l'accueil et le voile. Les 81 autres gardent leur
   mise en scene d'origine, intacte.

   LE VOILE. Sa densite n'est pas un gout mais un calcul. La photo de
   l'accueil monte a 0,98 de luminance sur ses blocs les plus clairs -- il y
   a une fenetre en plein cadre. A 80 % le blanc tient 11,1 contre 1 sur le
   pire bloc et le rouge clair du grand titre 3,64. En dessous de 75 % ce
   rouge passe sous le seuil de 3 des grands corps. On garde donc 80 % au
   milieu, ou vit le texte, et on relache aux extremites : le bord haut est
   couvert par la barre de navigation, le bord bas ne porte rien. */
.tr-hero {
    position: relative;
    background-color: var(--c-nuit);
}
/* CHAQUE PAGE A SON FOND, ET CE FOND PARLE DE SON SUJET.

   Le client demandait "une image de fond sur chaque page" et "pas toujours
   les memes". Trois situations coexistaient :
     - 492 heros nus recevaient tous la meme photo d'accueil ;
     - 21 pages d'article n'avaient rien, juste un aplat sombre ;
     - 18 pages pointaient vers images.unsplash.com et n'affichaient RIEN --
       ce sont celles que le client voyait vides. Or hero-debistrage,
       hero-chaudiere-gaz, hero-chaudiere-fioul et hero-fumigene attendaient
       dans la galerie depuis le 26 juillet sans avoir ete branchees.

   Une classe par image, 16 en tout pour 521 pages. Le cadrage vertical est
   regle image par image : un poele se regarde plus bas qu'une souche de
   toiture.

   Les 52 pages qui posent deja leur propre <img> de fond -- boulangerie,
   pizza, torrefacteur, supermarche, syndics -- ne recoivent rien : un fond
   CSS invisible ne ferait que telecharger une image pour rien. */
.tr-hero-nu,
[class*="tr-f-"] {
    background-size: cover;
    background-repeat: no-repeat;
}
.tr-f-cheminee { background-image: url("../../images2/hero-homepage-1024w.webp"); background-position: center 38%; }  /* ramoneur au foyer d'une cheminee */
.tr-f-granules { background-image: url("../../images2/granule2-1024w.webp"); background-position: center 45%; }  /* poele a granules en place */
.tr-f-flamme { background-image: url("../../images2/granule-1024w.webp"); background-position: center 50%; }  /* flambee dans un foyer */
.tr-f-bistre { background-image: url("../../images2/hero-bistre-amas-1280w.webp"); background-position: center 55%; }  /* un foyer rempli de bistre durci */
.tr-f-terrain { background-image: url("../../images2/hero-debistrage-terrain-1280w.webp"); background-position: center 45%; }  /* debistrage en cours, en combinaison */
.tr-f-foyer { background-image: url("../../images2/bistre-foyer-1024w.webp"); background-position: center 50%; }  /* foyer encrasse de goudron */
.tr-f-gaz { background-image: url("../../images2/hero-chaudiere-cannes-1280w.webp"); background-position: center 52%; }  /* chaudiere Vaillant, cannes et herisson poses */
.tr-f-fioul { background-image: url("../../images2/hero-chaudiere-fioul-1280w.webp"); background-position: center 45%; }  /* chaudiere fioul et sa cuve */
.tr-f-fumigene { background-image: url("../../images2/hero-fumigene-1280w.webp"); background-position: center 40%; }  /* essai fumigene en toiture */
.tr-f-flotte { background-image: url("../../images2/hero-flotte-1280w.webp"); background-position: center 50%; }  /* la flotte de vehicules */
.tr-f-grillage { background-image: url("../../images2/grillage-1024w.webp"); background-position: center 45%; }  /* grillage anti-oiseau sur la souche */
.tr-f-tubage { background-image: url("../../images2/tubage-1024w.webp"); background-position: center 40%; }  /* pose d'un tubage depuis le toit */
.tr-f-toit { background-image: url("../../images2/toit8-1024w.webp"); background-position: center 45%; }  /* intervention en toiture */
.tr-f-camera { background-image: url("../../images2/camera-1024w.webp"); background-position: center 45%; }  /* inspection video du conduit */
.tr-f-conduit { background-image: url("../../images2/dia-1024w.webp"); background-position: center 50%; }  /* conduit eclaire de l'interieur */
.tr-f-souche { background-image: url("../../images2/dalle-1024w.webp"); background-position: center 42%; }  /* souches de cheminee en pierre */
.tr-f-atelier { background-image: url("../../images2/IMG_8990-1024w.webp"); background-position: center 40%; }  /* ramoneur au travail */

/* LA PAGE DEPANNAGE, ET LA REGLE QUI VA AVEC.

   LA DEMANDE : "pourquoi certaines pages n'ont toujours pas d'image de fond
   personnalisee ? Cherche des images en rapport avec la page." Puis, quand
   j'ai debordE : "je t'ai dit d'ajouter des fonds a CEUX QUI EN POSSEDENT
   PAS. La page syndic en possede deja, donc on touche a rien."

   LA REGLE EST DONC NETTE, et elle vaut pour la suite : on n'ajoute un fond
   qu'a une page qui n'en montre aucun. Une page dont le fond est deja la,
   meme discret, ne se retouche pas.

   J'AVAIS CRU A TREIZE PAGES SANS PHOTO. C'ETAIT FAUX : elles posent leur
   photo dans un <div> a background-image inline, une troisieme forme que mon
   balayage -- qui cherchait des <img> et des classes tr-f-* -- ignorait.
   J'ai voulu les "corriger" en leur rendant de l'opacite, et j'ai casse la
   page syndics, dont le panorama est passe par-dessus le titre. Regle
   retiree, page rendue a l'identique.

   RESTENT LES DEUX SEULES QUI NE MONTRAIENT VRAIMENT RIEN -- SAV et prix --
   dont le fond disparaissait sous un calque franchement opaque ; c'est la
   page SAV que le client avait mise en capture. Le calque est traite plus
   bas, et la page SAV troque le poele au repos contre deux techniciens
   penches sur l'appareil : pour du depannage, l'equipe en veste floquee dit
   le metier mieux qu'une photo de tournevis achetee.

   LE REGISTRE, donne par le client sur l'ancien site : "discret, en rapport
   avec la page, et qui ne touche pas a la visibilite des textes". Le voile
   des heros s'en charge -- de 78 a 92 % d'opacite. */
.tr-f-depannage { background-image: url("../../images2/posepoele-1024w.webp"); background-position: center 30%; }  /* deux techniciens sur un poele */

/* LA PHOTO MAISON/CLES DES PAGES CERTIFICAT DE VENTE.

   Le client : "pourquoi as-tu change la photo de fond des pages vente maison ?
   Les images etaient deja parfaites. Remets la photo de fond."

   IL AVAIT RAISON SUR L'INTENTION, et la verification a montre autre chose que
   ce qu'on croyait tous les deux. Ces pages appellent bien une photo Maison/
   Cles -- leur HTML porte meme le commentaire "Background Maison/Cles" -- mais
   par une classe Tailwind arbitraire pointant vers unsplash.com. Le Tailwind
   du site est precompile et purge : sur six URL unsplash employees par dix-huit
   pages, UNE SEULE figure dans le build. Celle-ci n'y est pas. Le fond n'a donc
   jamais pu s'afficher, et le heros etait un aplat bg-slate-900. C'est ce qui
   m'avait fait poser des souches en pierre a la place.

   ON LUI REND SA PHOTO, mais hebergee ici : 39 Ko en webp au lieu d'un appel a
   un domaine tiers depuis le navigateur de chaque visiteur -- appel qui, de
   toute facon, n'a jamais eu lieu. Licence Unsplash : telechargement et usage
   commercial autorises. */
.tr-f-maison { background-image: url("../../images2/hero-maison-cles-1280w.webp"); background-position: center 58%; }  /* maison miniature et cles */

/* LES TROIS PHOTOS CHOISIES PAR LE CLIENT, page par page.

   "Pour l'image de fond de la page debistrage teste cette image
    camion77340-640w.webp, et pour la page chaudiere a gaz celle-la
    prix-entretien-ramonage-chaudiere-1-.webp, et pour chaudiere a granules
    celle-la Capture d'ecran 2024-08-08 194030-320w.webp (ca vaut pour les
    pages hubs s'il y en a)."

   LE CAMION A ETE REMPLACE DEPUIS. Le client l'a essaye puis a choisi un
   foyer rempli d'un amas de bistre durci -- meilleur choix : la photo montre
   le sujet de la page au lieu du vehicule qui s'y rend. La classe tr-f-camion
   a donc ete retiree, plutot que laissee a trainer sans emploi.

   LA CAPTURE D'ECRAN A ETE RECOPIEE SOUS UN NOM PROPRE : son nom d'origine
   contient une apostrophe typographique et deux espaces, qu'il aurait fallu
   encoder en %E2%80%99 et %20 dans l'url(). L'original reste en place. */

/* Le calque distant d'unsplash est neutralise. Il ne s'affichait pas, et il
   faisait appeler un domaine tiers par le navigateur de chaque visiteur --
   une donnee de connexion qui part ailleurs, sans contrepartie. La photo
   locale posee au-dessus prend sa place. */
.tr-hero [class*="unsplash"] {
    background-image: none !important;
}
.tr-hero-nu::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(14,11,8,.86) 0%, rgba(14,11,8,.80) 55%, rgba(14,11,8,.92) 100%);
}

/* LE CALQUE QUI EFFACAIT LA PHOTO -- pages SAV et prix.

   Ces deux pages posent, juste apres l'ouverture de leur heros :

       <div class="absolute inset-0"
            style="background:linear-gradient(180deg,#0f172a 0%,#111827 55%,#0A0A0A 100%)">

   Trois arrets, aucun canal alpha : le calque est OPAQUE. La photo du fond
   etait donc chargee par le navigateur, puis integralement masquee. C'est ce
   que le client voyait -- un aplat sombre la ou il attendait une image.

   On garde le calque, on lui donne un alpha. Meme dessin, memes teintes,
   memes arrets ; la photo repasse dessous. Le style etant ecrit en attribut,
   il faut !important pour le depasser -- c'est le seul moyen de corriger
   depuis la feuille sans toucher aux deux pages. */
.tr-hero > [class~="inset-0"][style*="#0f172a"] {
    background: linear-gradient(180deg,
                rgba(15, 23, 42, .88) 0%,
                rgba(17, 24, 39, .84) 55%,
                rgba(10, 10, 10, .93) 100%) !important;
}
@media (min-width: 1024px) {
    /* la meme diagonale que les autres heros, celle que le client a validee */
    .tr-hero > [class~="inset-0"][style*="#0f172a"] {
        background: linear-gradient(100deg,
                    rgba(15, 23, 42, .93) 0%,
                    rgba(17, 24, 39, .88) 42%,
                    rgba(14, 11, 8, .82) 74%,
                    rgba(10, 10, 10, .79) 100%) !important;
    }
}

/* LE VOILE PREND UN SENS, A PARTIR DE 1024 PX.

   Le client a vu sur la page grande distribution un voile en diagonale qui
   laisse reapparaitre la photo vers la droite, et a demande le meme ailleurs :
   "ca cree un style".

   J'AI MESURE AVANT DE COPIER, et la mesure a dit non a l'identique. La page
   grande distribution peut s'ouvrir a 45 % d'opacite sur son bord droit parce
   que son texte s'arrete tot. Sur les 492 heros nus, le texte va jusqu'a
   96 % de la largeur pour la moitie d'entre eux, et depasse 90 % sur 347.
   Reprendre la recette telle quelle aurait pose des mots blancs sur une photo
   claire -- exactement le defaut qu'on vient de corriger ailleurs.

   On garde donc le SENS, qui est ce qui plaisait, et on refuse la valeur. Le
   voile descend de 92 % a gauche, ou vit le grand titre, a 78 % sur le bord
   droit. La photo respire vers la droite, la profondeur se voit, et le pire
   bloc clair de l'image tient encore 10,3 contre 1 en blanc et 3,5 en rouge
   clair -- au-dessus des seuils de 4,5 et 3.

   Sous 1024 px la colonne se replie et le texte occupe toute la largeur : le
   voile redevient vertical, sans quoi le sens n'aurait plus de raison d'etre. */
@media (min-width: 1024px) {
    .tr-hero-nu::after {
        background: linear-gradient(100deg,
                    rgba(14,11,8,.92) 0%,
                    rgba(14,11,8,.87) 42%,
                    rgba(14,11,8,.81) 74%,
                    rgba(14,11,8,.78) 100%);
    }
}
/* Le contenu passe AU-DESSUS du voile ; les calques plein cadre restent
   DESSOUS. On ne touche pas au position des elements deja absolus : le leur
   ecraser casserait la mise en page. */
.tr-hero > div:not([class*="inset-0"]):not([class*="absolute"]),
.tr-hero > p:not([class*="absolute"]),
.tr-hero > h1, .tr-hero > h2 { position: relative; z-index: 2; }
.tr-hero > img, .tr-hero > picture, .tr-hero > [class*="inset-0"] { z-index: 0; }

/* Le texte du heros. On nomme les teintes une a une plutot que d'employer *,
   pour ne pas ecraser les cartes claires qui vivent parfois dans le heros. */
.tr-hero { color: #FFFFFF; }

.tr-hero .text-white,
.tr-hero .text-white\/90,
.tr-hero .text-white\/80,
.tr-hero .text-white\/70,
.tr-hero .text-white\/60,
.tr-hero .text-gray-100,
.tr-hero .text-gray-200,
.tr-hero .text-gray-300,
.tr-hero .text-slate-100,
.tr-hero .text-slate-200,
.tr-hero .text-slate-300,
.tr-hero .text-red-100:not(footer *),
.tr-hero .text-red-200,
.tr-hero .text-\[\#C7CBD3\],
.tr-hero.text-white { color: #FFFFFF; }

.tr-hero .text-gray-400:not(footer *),
.tr-hero .text-gray-500:not(footer *),
.tr-hero .text-slate-400:not(footer *),
.tr-hero .text-slate-500:not(footer *) { color: rgba(255, 255, 255, .82); }

.tr-hero [class~="text-[#E30613]"],
.tr-hero .text-red-500,
.tr-hero .text-red-600 { color: var(--c-rouge-clair); }


/* Une carte CLAIRE posee dans le heros garde un texte sombre : c'est le cas de
   l'encadre d'introduction des pages villes. */
.tr-hero [class~="bg-white"]:not(footer *),
.tr-hero .bg-white:not(footer *) { color: var(--c-encre); }

.tr-hero [class~="bg-white"] .text-white:not(footer *),
.tr-hero [class~="bg-white"] .text-white\/90:not(footer *),
.tr-hero [class~="bg-white"] .text-white\/80:not(footer *),
.tr-hero [class~="bg-white"] .text-white\/70:not(footer *),
.tr-hero [class~="bg-white"] .text-white\/60:not(footer *),
.tr-hero [class~="bg-white"] .text-gray-100:not(footer *),
.tr-hero [class~="bg-white"] .text-gray-200:not(footer *),
.tr-hero [class~="bg-white"] .text-gray-300:not(footer *),
.tr-hero [class~="bg-white"] .text-slate-100:not(footer *),
.tr-hero [class~="bg-white"] .text-slate-200:not(footer *),
.tr-hero [class~="bg-white"] .text-slate-300:not(footer *),
.tr-hero [class~="bg-white"] .text-red-100:not(footer *),
.tr-hero [class~="bg-white"] .text-red-200:not(footer *),
.tr-hero [class~="bg-white"] .text-\[\#C7CBD3\]:not(footer *),
.tr-hero [class~="bg-white"] p:not(footer *),
.tr-hero [class~="bg-white"] h2:not(footer *),
.tr-hero [class~="bg-white"] h3:not(footer *),
.tr-hero [class~="bg-white"] li:not(footer *),
.tr-hero [class~="bg-white"] strong:not(footer *) { color: var(--c-encre); }

.tr-hero [class~="bg-white"] .text-gray-400:not(footer *),
.tr-hero [class~="bg-white"] .text-gray-500:not(footer *),
.tr-hero [class~="bg-white"] .text-slate-400:not(footer *),
.tr-hero [class~="bg-white"] .text-slate-500:not(footer *) { color: var(--c-encre2); }


/* Les bordures du heros restent claires sur fond sombre. */
.tr-hero [class~="border-[#2A2A2A]"],
.tr-hero [class~="border-slate-700"],
.tr-hero [class~="border-slate-800"] { border-color: rgba(255, 255, 255, .16); }

/* Les blocs sombres poses DANS le heros s'eclaircissent legerement pour se
   detacher du fond, au lieu de disparaitre dedans. */
.tr-hero [class~="bg-[#1A1A1A]"]:not(footer *),
.tr-hero [class~="bg-[#0A0A0A]"]:not(footer *),
.tr-hero [class~="bg-slate-800/60"]:not(footer *) {
    background-color: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .14);
}


/* --------------------------------------------------------------------------
   3. LES SECTIONS DE CONTENU DEVIENNENT CLAIRES
   Alternance ivoire / blanc, comme sur la page d'accueil.
   -------------------------------------------------------------------------- */

section:not(.tr-hero)[class~="bg-[#0A0A0A]"]:not(footer *),
section:not(.tr-hero)[class~="bg-[#141414]"]:not(footer *),
section:not(.tr-hero)[class~="bg-[#1A1A1A]"]:not(footer *),
section:not(.tr-hero)[class~="bg-slate-900"]:not(footer *),
section:not(.tr-hero)[class~="bg-slate-950"]:not(footer *),
section:not(.tr-hero)[class~="bg-slate-50"],
section:not(.tr-hero)[class~="bg-black"]:not(footer *),
section:not(.tr-hero).bg-slate-900:not(footer *),
section:not(.tr-hero).bg-slate-50 { background-color: var(--c-ivoire); }

section:not(.tr-hero)[class~="bg-white"]:not(footer *) { background-color: var(--c-blanc); }


/* La bande de chiffres de certaines pages est un div, pas une section. */
body > div[class~="bg-[#0A0A0A]"]:not(footer *) { background-color: #F8F4EE; }

/* Les fonds sombres poses en style en ligne : seul !important les atteint.
   #000 est volontairement exclu, il sert de fond aux facades video. */
section:not(.tr-hero) [style*="background:#1A1A1A" i],
section:not(.tr-hero) [style*="background:#141414" i],
section:not(.tr-hero) [style*="background:#181818" i],
section:not(.tr-hero) [style*="background:#0A0A0A" i],
section:not(.tr-hero) [style*="background:#334155" i],
article:not(.tr-hero) [style*="background:#1A1A1A" i],
article:not(.tr-hero) [style*="background:#0A0A0A" i] { background: var(--c-blanc) !important; }


/* --------------------------------------------------------------------------
   4. LE TEXTE DES ZONES CLAIRES
   La forme SANS espace vise la section elle-meme : 393 sections du site
   portent text-white sur elles-memes, et leurs enfants en heritent sans
   porter aucune classe de couleur.
   -------------------------------------------------------------------------- */

section.text-white:not(.tr-hero),
article.text-white:not(.tr-hero),
section:not(.tr-hero) .text-white,
section:not(.tr-hero) .text-white\/90,
section:not(.tr-hero) .text-white\/80,
section:not(.tr-hero) .text-white\/70,
section:not(.tr-hero) .text-white\/60,
section:not(.tr-hero) .text-gray-100,
section:not(.tr-hero) .text-gray-200,
section:not(.tr-hero) .text-gray-300,
section:not(.tr-hero) .text-slate-100,
section:not(.tr-hero) .text-slate-200,
section:not(.tr-hero) .text-slate-300,
section:not(.tr-hero) .text-red-100:not(footer *),
section:not(.tr-hero) .text-red-200,
section:not(.tr-hero) .text-\[\#C7CBD3\],
article:not(.tr-hero) .text-white,
article:not(.tr-hero) .text-white\/90,
article:not(.tr-hero) .text-white\/80,
article:not(.tr-hero) .text-white\/70,
article:not(.tr-hero) .text-white\/60,
article:not(.tr-hero) .text-gray-100,
article:not(.tr-hero) .text-gray-200,
article:not(.tr-hero) .text-gray-300,
article:not(.tr-hero) .text-slate-100,
article:not(.tr-hero) .text-slate-200,
article:not(.tr-hero) .text-slate-300,
article:not(.tr-hero) .text-red-100:not(footer *),
article:not(.tr-hero) .text-red-200,
article:not(.tr-hero) .text-\[\#C7CBD3\],
body > div:not([id]) .text-white,
body > div:not([id]) .text-white\/90,
body > div:not([id]) .text-white\/80,
body > div:not([id]) .text-white\/70,
body > div:not([id]) .text-white\/60,
body > div:not([id]) .text-gray-100,
body > div:not([id]) .text-gray-200,
body > div:not([id]) .text-gray-300,
body > div:not([id]) .text-slate-100,
body > div:not([id]) .text-slate-200,
body > div:not([id]) .text-slate-300,
body > div:not([id]) .text-red-100:not(footer *),
body > div:not([id]) .text-red-200,
body > div:not([id]) .text-\[\#C7CBD3\],

section:not(.tr-hero) .text-gray-400:not(footer *),
section:not(.tr-hero) .text-gray-500:not(footer *),
section:not(.tr-hero) .text-slate-400:not(footer *),
section:not(.tr-hero) .text-slate-500:not(footer *),
article:not(.tr-hero) .text-gray-400:not(footer *),
article:not(.tr-hero) .text-gray-500:not(footer *),
article:not(.tr-hero) .text-slate-400:not(footer *),
article:not(.tr-hero) .text-slate-500:not(footer *),
body > div:not([id]) .text-gray-400:not(footer *),
body > div:not([id]) .text-gray-500:not(footer *),
body > div:not([id]) .text-slate-400:not(footer *),
body > div:not([id]) .text-slate-500:not(footer *),


/* Les quasi-blancs poses EN LIGNE : seul !important les atteint. Les teintes
   deja sombres -- #0A0A0A 3411 fois, #334155 416, #78350F 311 -- et celles
   posees sur du rouge ne sont volontairement pas touchees. */
section:not(.tr-hero) [style*="color:#94A3B8" i],
section:not(.tr-hero) [style*="color:#E2E8F0" i],
section:not(.tr-hero) [style*="color:#CBD5E1" i],
article:not(.tr-hero) [style*="color:#94A3B8" i],
article:not(.tr-hero) [style*="color:#E2E8F0" i] { color: var(--c-encre2) !important; }


/* --------------------------------------------------------------------------
   5. CE QUI RESTE SOMBRE DANS UNE ZONE CLAIRE
   Un a, un span ou un button portant un fond sombre est un BOUTON ou une
   PASTILLE : son fond ne bouge pas, son texte doit donc rester clair.
   L'EXCLUSION DES CARTES ECLAIRCIES EST POSEE ICI, et c'est elle qui manquait :
   une .card-surf portee par un <a class="bg-[#0A0A0A]"> recevait un fond
   blanc d'une regle et du texte blanc de celle-ci. Blanc sur blanc.
   -------------------------------------------------------------------------- */

a[class~="bg-[#0A0A0A]"]:not(.card-surf):not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf):not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf):not(footer *),
a[class~="bg-black"]:not(.card-surf):not(footer *),
a[class~="bg-slate-800"]:not(.card-surf):not(footer *),
a[class~="bg-slate-900"]:not(.card-surf):not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf):not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf):not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf):not(footer *),
span[class~="bg-black"]:not(.card-surf):not(footer *),
span[class~="bg-slate-800"]:not(.card-surf):not(footer *),
span[class~="bg-slate-900"]:not(.card-surf):not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf):not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf):not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf):not(footer *),
button[class~="bg-black"]:not(.card-surf):not(footer *),
button[class~="bg-slate-800"]:not(.card-surf):not(footer *),
button[class~="bg-slate-900"]:not(.card-surf):not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf):not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf):not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf):not(footer *),
code[class~="bg-black"]:not(.card-surf):not(footer *),
code[class~="bg-slate-800"]:not(.card-surf):not(footer *),
code[class~="bg-slate-900"]:not(.card-surf):not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf):not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf):not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf):not(footer *),
kbd[class~="bg-black"]:not(.card-surf):not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf):not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf):not(footer *),
[class*="bg-black/"]:not(footer *),
[class*="bg-slate-900/8"]:not(footer *),
[class*="bg-slate-950/"]:not(footer *) { color: #FFFFFF !important; }

a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/90:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/80:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/70:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/60:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-100:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-200:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-300:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-100:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-200:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-300:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-red-100:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-red-200:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/90:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/80:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/70:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/60:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-100:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-200:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-300:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-100:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-200:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-300:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-red-100:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-red-200:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-white:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-white\/90:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-white\/80:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-white\/70:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-white\/60:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-gray-100:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-gray-200:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-gray-300:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-slate-100:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-slate-200:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-slate-300:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-red-100:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-red-200:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-white:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-white\/90:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-white\/80:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-white\/70:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-white\/60:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-gray-100:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-gray-200:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-gray-300:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-slate-100:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-slate-200:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-slate-300:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-red-100:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-red-200:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-white:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-white\/90:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-white\/80:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-white\/70:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-white\/60:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-gray-100:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-gray-200:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-gray-300:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-slate-100:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-slate-200:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-slate-300:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-red-100:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-red-200:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-white:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-white\/90:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-white\/80:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-white\/70:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-white\/60:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-gray-100:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-gray-200:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-gray-300:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-slate-100:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-slate-200:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-slate-300:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-red-100:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-red-200:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/90:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/80:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/70:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/60:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-100:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-200:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-300:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-100:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-200:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-300:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-red-100:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-red-200:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/90:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/80:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/70:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/60:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-100:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-200:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-300:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-100:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-200:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-300:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-red-100:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-red-200:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-white:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-white\/90:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-white\/80:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-white\/70:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-white\/60:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-gray-100:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-gray-200:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-gray-300:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-slate-100:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-slate-200:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-slate-300:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-red-100:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-red-200:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-white:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-white\/90:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-white\/80:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-white\/70:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-white\/60:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-gray-100:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-gray-200:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-gray-300:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-slate-100:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-slate-200:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-slate-300:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-red-100:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-red-200:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-white:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-white\/90:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-white\/80:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-white\/70:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-white\/60:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-gray-100:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-gray-200:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-gray-300:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-slate-100:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-slate-200:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-slate-300:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-red-100:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-red-200:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-white:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-white\/90:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-white\/80:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-white\/70:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-white\/60:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-gray-100:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-gray-200:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-gray-300:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-slate-100:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-slate-200:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-slate-300:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-red-100:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-red-200:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/90:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/80:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/70:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/60:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-100:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-200:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-300:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-100:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-200:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-300:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-red-100:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-red-200:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/90:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/80:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/70:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/60:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-100:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-200:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-300:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-100:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-200:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-300:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-red-100:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-red-200:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-white:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-white\/90:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-white\/80:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-white\/70:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-white\/60:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-gray-100:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-gray-200:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-gray-300:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-slate-100:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-slate-200:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-slate-300:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-red-100:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-red-200:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-white:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-white\/90:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-white\/80:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-white\/70:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-white\/60:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-gray-100:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-gray-200:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-gray-300:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-slate-100:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-slate-200:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-slate-300:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-red-100:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-red-200:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-white:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-white\/90:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-white\/80:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-white\/70:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-white\/60:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-gray-100:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-gray-200:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-gray-300:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-slate-100:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-slate-200:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-slate-300:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-red-100:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-red-200:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-white:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-white\/90:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-white\/80:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-white\/70:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-white\/60:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-gray-100:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-gray-200:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-gray-300:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-slate-100:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-slate-200:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-slate-300:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-red-100:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-red-200:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/90:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/80:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/70:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/60:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-100:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-200:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-300:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-100:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-200:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-300:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-red-100:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-red-200:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/90:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/80:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/70:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/60:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-100:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-200:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-300:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-100:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-200:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-300:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-red-100:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-red-200:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-white:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-white\/90:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-white\/80:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-white\/70:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-white\/60:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-gray-100:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-gray-200:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-gray-300:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-slate-100:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-slate-200:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-slate-300:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-red-100:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-red-200:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-white:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-white\/90:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-white\/80:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-white\/70:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-white\/60:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-gray-100:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-gray-200:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-gray-300:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-slate-100:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-slate-200:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-slate-300:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-red-100:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-red-200:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-white:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-white\/90:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-white\/80:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-white\/70:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-white\/60:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-gray-100:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-gray-200:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-gray-300:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-slate-100:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-slate-200:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-slate-300:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-red-100:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-red-200:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-white:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-white\/90:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-white\/80:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-white\/70:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-white\/60:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-gray-100:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-gray-200:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-gray-300:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-slate-100:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-slate-200:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-slate-300:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-red-100:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-red-200:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/90:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/80:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/70:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-white\/60:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-100:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-200:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-300:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-100:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-200:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-300:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-red-100:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-red-200:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/90:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/80:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/70:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-white\/60:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-100:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-200:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-300:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-100:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-200:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-300:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-red-100:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-red-200:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-white:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-white\/90:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-white\/80:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-white\/70:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-white\/60:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-gray-100:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-gray-200:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-gray-300:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-slate-100:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-slate-200:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-slate-300:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-red-100:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-red-200:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-white:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-white\/90:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-white\/80:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-white\/70:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-white\/60:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-gray-100:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-gray-200:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-gray-300:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-slate-100:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-slate-200:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-slate-300:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-red-100:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-red-200:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-white:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-white\/90:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-white\/80:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-white\/70:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-white\/60:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-gray-100:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-gray-200:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-gray-300:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-slate-100:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-slate-200:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-slate-300:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-red-100:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-red-200:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-white:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-white\/90:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-white\/80:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-white\/70:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-white\/60:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-gray-100:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-gray-200:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-gray-300:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-slate-100:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-slate-200:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-slate-300:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-red-100:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-red-200:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-\[\#C7CBD3\]:not(footer *),
[class*="bg-black/"] .text-white:not(footer *),
[class*="bg-black/"] .text-white\/90:not(footer *),
[class*="bg-black/"] .text-white\/80:not(footer *),
[class*="bg-black/"] .text-white\/70:not(footer *),
[class*="bg-black/"] .text-white\/60:not(footer *),
[class*="bg-black/"] .text-gray-100:not(footer *),
[class*="bg-black/"] .text-gray-200:not(footer *),
[class*="bg-black/"] .text-gray-300:not(footer *),
[class*="bg-black/"] .text-slate-100:not(footer *),
[class*="bg-black/"] .text-slate-200:not(footer *),
[class*="bg-black/"] .text-slate-300:not(footer *),
[class*="bg-black/"] .text-red-100:not(footer *),
[class*="bg-black/"] .text-red-200:not(footer *),
[class*="bg-black/"] .text-\[\#C7CBD3\]:not(footer *),
[class*="bg-slate-900/8"] .text-white:not(footer *),
[class*="bg-slate-900/8"] .text-white\/90:not(footer *),
[class*="bg-slate-900/8"] .text-white\/80:not(footer *),
[class*="bg-slate-900/8"] .text-white\/70:not(footer *),
[class*="bg-slate-900/8"] .text-white\/60:not(footer *),
[class*="bg-slate-900/8"] .text-gray-100:not(footer *),
[class*="bg-slate-900/8"] .text-gray-200:not(footer *),
[class*="bg-slate-900/8"] .text-gray-300:not(footer *),
[class*="bg-slate-900/8"] .text-slate-100:not(footer *),
[class*="bg-slate-900/8"] .text-slate-200:not(footer *),
[class*="bg-slate-900/8"] .text-slate-300:not(footer *),
[class*="bg-slate-900/8"] .text-red-100:not(footer *),
[class*="bg-slate-900/8"] .text-red-200:not(footer *),
[class*="bg-slate-900/8"] .text-\[\#C7CBD3\]:not(footer *),
[class*="bg-slate-950/"] .text-white:not(footer *),
[class*="bg-slate-950/"] .text-white\/90:not(footer *),
[class*="bg-slate-950/"] .text-white\/80:not(footer *),
[class*="bg-slate-950/"] .text-white\/70:not(footer *),
[class*="bg-slate-950/"] .text-white\/60:not(footer *),
[class*="bg-slate-950/"] .text-gray-100:not(footer *),
[class*="bg-slate-950/"] .text-gray-200:not(footer *),
[class*="bg-slate-950/"] .text-gray-300:not(footer *),
[class*="bg-slate-950/"] .text-slate-100:not(footer *),
[class*="bg-slate-950/"] .text-slate-200:not(footer *),
[class*="bg-slate-950/"] .text-slate-300:not(footer *),
[class*="bg-slate-950/"] .text-red-100:not(footer *),
[class*="bg-slate-950/"] .text-red-200:not(footer *),
[class*="bg-slate-950/"] .text-\[\#C7CBD3\]:not(footer *) { color: rgba(255, 255, 255, .95) !important; }

a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-400:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-500:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-400:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-500:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-400:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-500:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-400:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-500:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-gray-400:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-gray-500:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-slate-400:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) .text-slate-500:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-gray-400:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-gray-500:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-slate-400:not(footer *),
a[class~="bg-black"]:not(.card-surf) .text-slate-500:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-gray-400:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-gray-500:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-slate-400:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) .text-slate-500:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-gray-400:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-gray-500:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-slate-400:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) .text-slate-500:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-400:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-500:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-400:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-500:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-400:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-500:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-400:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-500:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-gray-400:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-gray-500:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-slate-400:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) .text-slate-500:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-gray-400:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-gray-500:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-slate-400:not(footer *),
span[class~="bg-black"]:not(.card-surf) .text-slate-500:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-gray-400:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-gray-500:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-slate-400:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) .text-slate-500:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-gray-400:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-gray-500:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-slate-400:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) .text-slate-500:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-400:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-500:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-400:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-500:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-400:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-500:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-400:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-500:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-gray-400:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-gray-500:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-slate-400:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) .text-slate-500:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-gray-400:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-gray-500:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-slate-400:not(footer *),
button[class~="bg-black"]:not(.card-surf) .text-slate-500:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-gray-400:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-gray-500:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-slate-400:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) .text-slate-500:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-gray-400:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-gray-500:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-slate-400:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) .text-slate-500:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-400:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-500:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-400:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-500:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-400:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-500:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-400:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-500:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-gray-400:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-gray-500:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-slate-400:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) .text-slate-500:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-gray-400:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-gray-500:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-slate-400:not(footer *),
code[class~="bg-black"]:not(.card-surf) .text-slate-500:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-gray-400:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-gray-500:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-slate-400:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) .text-slate-500:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-gray-400:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-gray-500:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-slate-400:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) .text-slate-500:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-400:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-gray-500:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-400:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) .text-slate-500:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-400:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-gray-500:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-400:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) .text-slate-500:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-gray-400:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-gray-500:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-slate-400:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) .text-slate-500:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-gray-400:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-gray-500:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-slate-400:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) .text-slate-500:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-gray-400:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-gray-500:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-slate-400:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) .text-slate-500:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-gray-400:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-gray-500:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-slate-400:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) .text-slate-500:not(footer *),
[class*="bg-black/"] .text-gray-400:not(footer *),
[class*="bg-black/"] .text-gray-500:not(footer *),
[class*="bg-black/"] .text-slate-400:not(footer *),
[class*="bg-black/"] .text-slate-500:not(footer *),
[class*="bg-slate-900/8"] .text-gray-400:not(footer *),
[class*="bg-slate-900/8"] .text-gray-500:not(footer *),
[class*="bg-slate-900/8"] .text-slate-400:not(footer *),
[class*="bg-slate-900/8"] .text-slate-500:not(footer *),
[class*="bg-slate-950/"] .text-gray-400:not(footer *),
[class*="bg-slate-950/"] .text-gray-500:not(footer *),
[class*="bg-slate-950/"] .text-slate-400:not(footer *),
[class*="bg-slate-950/"] .text-slate-500:not(footer *) { color: rgba(255, 255, 255, .82) !important; }

a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/90:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/80:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/70:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/60:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-100:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-200:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-300:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-100:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-200:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-300:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-red-100:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-red-200:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-400:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-500:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-400:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-500:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/90:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/80:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/70:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/60:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-100:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-200:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-300:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-100:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-200:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-300:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-red-100:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-red-200:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-400:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-500:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-400:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-500:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-white:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-white\/90:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-white\/80:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-white\/70:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-white\/60:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-gray-100:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-gray-200:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-gray-300:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-slate-100:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-slate-200:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-slate-300:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-red-100:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-red-200:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-gray-400:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-gray-500:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-slate-400:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf).text-slate-500:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-white:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-white\/90:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-white\/80:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-white\/70:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-white\/60:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-gray-100:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-gray-200:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-gray-300:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-slate-100:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-slate-200:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-slate-300:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-red-100:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-red-200:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-gray-400:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-gray-500:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-slate-400:not(footer *),
a[class~="bg-black"]:not(.card-surf).text-slate-500:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-white:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-white\/90:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-white\/80:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-white\/70:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-white\/60:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-gray-100:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-gray-200:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-gray-300:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-slate-100:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-slate-200:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-slate-300:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-red-100:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-red-200:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-gray-400:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-gray-500:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-slate-400:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf).text-slate-500:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-white:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-white\/90:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-white\/80:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-white\/70:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-white\/60:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-gray-100:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-gray-200:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-gray-300:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-slate-100:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-slate-200:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-slate-300:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-red-100:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-red-200:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-gray-400:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-gray-500:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-slate-400:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf).text-slate-500:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/90:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/80:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/70:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/60:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-100:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-200:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-300:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-100:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-200:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-300:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-red-100:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-red-200:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-400:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-500:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-400:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-500:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/90:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/80:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/70:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/60:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-100:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-200:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-300:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-100:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-200:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-300:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-red-100:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-red-200:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-400:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-500:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-400:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-500:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-white:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-white\/90:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-white\/80:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-white\/70:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-white\/60:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-gray-100:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-gray-200:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-gray-300:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-slate-100:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-slate-200:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-slate-300:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-red-100:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-red-200:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-gray-400:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-gray-500:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-slate-400:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf).text-slate-500:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-white:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-white\/90:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-white\/80:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-white\/70:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-white\/60:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-gray-100:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-gray-200:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-gray-300:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-slate-100:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-slate-200:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-slate-300:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-red-100:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-red-200:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-gray-400:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-gray-500:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-slate-400:not(footer *),
span[class~="bg-black"]:not(.card-surf).text-slate-500:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-white:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-white\/90:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-white\/80:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-white\/70:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-white\/60:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-gray-100:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-gray-200:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-gray-300:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-slate-100:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-slate-200:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-slate-300:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-red-100:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-red-200:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-gray-400:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-gray-500:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-slate-400:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf).text-slate-500:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-white:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-white\/90:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-white\/80:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-white\/70:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-white\/60:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-gray-100:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-gray-200:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-gray-300:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-slate-100:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-slate-200:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-slate-300:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-red-100:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-red-200:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-gray-400:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-gray-500:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-slate-400:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf).text-slate-500:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/90:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/80:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/70:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/60:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-100:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-200:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-300:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-100:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-200:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-300:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-red-100:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-red-200:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-400:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-500:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-400:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-500:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/90:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/80:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/70:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/60:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-100:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-200:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-300:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-100:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-200:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-300:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-red-100:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-red-200:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-400:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-500:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-400:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-500:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-white:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-white\/90:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-white\/80:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-white\/70:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-white\/60:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-gray-100:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-gray-200:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-gray-300:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-slate-100:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-slate-200:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-slate-300:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-red-100:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-red-200:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-gray-400:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-gray-500:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-slate-400:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf).text-slate-500:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-white:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-white\/90:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-white\/80:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-white\/70:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-white\/60:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-gray-100:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-gray-200:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-gray-300:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-slate-100:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-slate-200:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-slate-300:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-red-100:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-red-200:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-gray-400:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-gray-500:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-slate-400:not(footer *),
button[class~="bg-black"]:not(.card-surf).text-slate-500:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-white:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-white\/90:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-white\/80:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-white\/70:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-white\/60:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-gray-100:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-gray-200:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-gray-300:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-slate-100:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-slate-200:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-slate-300:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-red-100:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-red-200:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-gray-400:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-gray-500:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-slate-400:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf).text-slate-500:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-white:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-white\/90:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-white\/80:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-white\/70:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-white\/60:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-gray-100:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-gray-200:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-gray-300:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-slate-100:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-slate-200:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-slate-300:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-red-100:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-red-200:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-gray-400:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-gray-500:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-slate-400:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf).text-slate-500:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/90:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/80:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/70:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/60:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-100:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-200:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-300:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-100:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-200:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-300:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-red-100:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-red-200:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-400:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-500:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-400:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-500:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/90:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/80:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/70:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/60:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-100:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-200:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-300:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-100:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-200:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-300:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-red-100:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-red-200:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-400:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-500:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-400:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-500:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-white:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-white\/90:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-white\/80:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-white\/70:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-white\/60:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-gray-100:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-gray-200:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-gray-300:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-slate-100:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-slate-200:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-slate-300:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-red-100:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-red-200:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-gray-400:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-gray-500:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-slate-400:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf).text-slate-500:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-white:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-white\/90:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-white\/80:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-white\/70:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-white\/60:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-gray-100:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-gray-200:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-gray-300:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-slate-100:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-slate-200:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-slate-300:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-red-100:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-red-200:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-gray-400:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-gray-500:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-slate-400:not(footer *),
code[class~="bg-black"]:not(.card-surf).text-slate-500:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-white:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-white\/90:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-white\/80:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-white\/70:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-white\/60:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-gray-100:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-gray-200:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-gray-300:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-slate-100:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-slate-200:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-slate-300:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-red-100:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-red-200:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-gray-400:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-gray-500:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-slate-400:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf).text-slate-500:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-white:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-white\/90:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-white\/80:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-white\/70:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-white\/60:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-gray-100:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-gray-200:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-gray-300:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-slate-100:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-slate-200:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-slate-300:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-red-100:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-red-200:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-gray-400:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-gray-500:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-slate-400:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf).text-slate-500:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/90:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/80:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/70:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-white\/60:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-100:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-200:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-300:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-100:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-200:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-300:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-red-100:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-red-200:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-400:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-gray-500:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-400:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf).text-slate-500:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/90:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/80:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/70:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-white\/60:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-100:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-200:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-300:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-100:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-200:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-300:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-red-100:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-red-200:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-400:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-gray-500:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-400:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf).text-slate-500:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-white:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-white\/90:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-white\/80:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-white\/70:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-white\/60:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-gray-100:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-gray-200:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-gray-300:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-slate-100:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-slate-200:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-slate-300:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-red-100:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-red-200:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-gray-400:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-gray-500:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-slate-400:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf).text-slate-500:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-white:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-white\/90:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-white\/80:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-white\/70:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-white\/60:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-gray-100:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-gray-200:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-gray-300:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-slate-100:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-slate-200:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-slate-300:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-red-100:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-red-200:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-gray-400:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-gray-500:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-slate-400:not(footer *),
kbd[class~="bg-black"]:not(.card-surf).text-slate-500:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-white:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-white\/90:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-white\/80:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-white\/70:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-white\/60:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-gray-100:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-gray-200:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-gray-300:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-slate-100:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-slate-200:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-slate-300:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-red-100:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-red-200:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-gray-400:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-gray-500:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-slate-400:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf).text-slate-500:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-white:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-white\/90:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-white\/80:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-white\/70:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-white\/60:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-gray-100:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-gray-200:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-gray-300:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-slate-100:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-slate-200:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-slate-300:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-red-100:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-red-200:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-\[\#C7CBD3\]:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-gray-400:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-gray-500:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-slate-400:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf).text-slate-500:not(footer *),
[class*="bg-black/"].text-white:not(footer *),
[class*="bg-black/"].text-white\/90:not(footer *),
[class*="bg-black/"].text-white\/80:not(footer *),
[class*="bg-black/"].text-white\/70:not(footer *),
[class*="bg-black/"].text-white\/60:not(footer *),
[class*="bg-black/"].text-gray-100:not(footer *),
[class*="bg-black/"].text-gray-200:not(footer *),
[class*="bg-black/"].text-gray-300:not(footer *),
[class*="bg-black/"].text-slate-100:not(footer *),
[class*="bg-black/"].text-slate-200:not(footer *),
[class*="bg-black/"].text-slate-300:not(footer *),
[class*="bg-black/"].text-red-100:not(footer *),
[class*="bg-black/"].text-red-200:not(footer *),
[class*="bg-black/"].text-\[\#C7CBD3\]:not(footer *),
[class*="bg-black/"].text-gray-400:not(footer *),
[class*="bg-black/"].text-gray-500:not(footer *),
[class*="bg-black/"].text-slate-400:not(footer *),
[class*="bg-black/"].text-slate-500:not(footer *),
[class*="bg-slate-900/8"].text-white:not(footer *),
[class*="bg-slate-900/8"].text-white\/90:not(footer *),
[class*="bg-slate-900/8"].text-white\/80:not(footer *),
[class*="bg-slate-900/8"].text-white\/70:not(footer *),
[class*="bg-slate-900/8"].text-white\/60:not(footer *),
[class*="bg-slate-900/8"].text-gray-100:not(footer *),
[class*="bg-slate-900/8"].text-gray-200:not(footer *),
[class*="bg-slate-900/8"].text-gray-300:not(footer *),
[class*="bg-slate-900/8"].text-slate-100:not(footer *),
[class*="bg-slate-900/8"].text-slate-200:not(footer *),
[class*="bg-slate-900/8"].text-slate-300:not(footer *),
[class*="bg-slate-900/8"].text-red-100:not(footer *),
[class*="bg-slate-900/8"].text-red-200:not(footer *),
[class*="bg-slate-900/8"].text-\[\#C7CBD3\]:not(footer *),
[class*="bg-slate-900/8"].text-gray-400:not(footer *),
[class*="bg-slate-900/8"].text-gray-500:not(footer *),
[class*="bg-slate-900/8"].text-slate-400:not(footer *),
[class*="bg-slate-900/8"].text-slate-500:not(footer *),
[class*="bg-slate-950/"].text-white:not(footer *),
[class*="bg-slate-950/"].text-white\/90:not(footer *),
[class*="bg-slate-950/"].text-white\/80:not(footer *),
[class*="bg-slate-950/"].text-white\/70:not(footer *),
[class*="bg-slate-950/"].text-white\/60:not(footer *),
[class*="bg-slate-950/"].text-gray-100:not(footer *),
[class*="bg-slate-950/"].text-gray-200:not(footer *),
[class*="bg-slate-950/"].text-gray-300:not(footer *),
[class*="bg-slate-950/"].text-slate-100:not(footer *),
[class*="bg-slate-950/"].text-slate-200:not(footer *),
[class*="bg-slate-950/"].text-slate-300:not(footer *),
[class*="bg-slate-950/"].text-red-100:not(footer *),
[class*="bg-slate-950/"].text-red-200:not(footer *),
[class*="bg-slate-950/"].text-\[\#C7CBD3\]:not(footer *),
[class*="bg-slate-950/"].text-gray-400:not(footer *),
[class*="bg-slate-950/"].text-gray-500:not(footer *),
[class*="bg-slate-950/"].text-slate-400:not(footer *),
[class*="bg-slate-950/"].text-slate-500:not(footer *) { color: #FFFFFF !important; }

a[class~="bg-[#0A0A0A]"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
a[class~="bg-black"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
span[class~="bg-black"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
button[class~="bg-black"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
code[class~="bg-black"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
kbd[class~="bg-black"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf)[class~="text-[#E30613]"]:not(footer *),
[class*="bg-black/"][class~="text-[#E30613]"]:not(footer *),
[class*="bg-slate-900/8"][class~="text-[#E30613]"]:not(footer *),
[class*="bg-slate-950/"][class~="text-[#E30613]"]:not(footer *),
a[class~="bg-[#0A0A0A]"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
a[class~="bg-[#141414]"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
a[class~="bg-black"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
a[class~="bg-slate-800"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
a[class~="bg-slate-900"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
span[class~="bg-[#1A1A1A]"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
span[class~="bg-[#141414]"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
span[class~="bg-black"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
span[class~="bg-slate-800"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
span[class~="bg-slate-900"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
button[class~="bg-[#0A0A0A]"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
button[class~="bg-[#1A1A1A]"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
button[class~="bg-[#141414]"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
button[class~="bg-black"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
button[class~="bg-slate-800"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
button[class~="bg-slate-900"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
code[class~="bg-[#0A0A0A]"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
code[class~="bg-[#1A1A1A]"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
code[class~="bg-[#141414]"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
code[class~="bg-black"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
code[class~="bg-slate-800"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
code[class~="bg-slate-900"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
kbd[class~="bg-[#0A0A0A]"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
kbd[class~="bg-[#1A1A1A]"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
kbd[class~="bg-[#141414]"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
kbd[class~="bg-black"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
kbd[class~="bg-slate-800"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
kbd[class~="bg-slate-900"]:not(.card-surf) [class~="text-[#E30613]"]:not(footer *),
[class*="bg-black/"] [class~="text-[#E30613]"]:not(footer *),
[class*="bg-slate-900/8"] [class~="text-[#E30613]"]:not(footer *),
[class*="bg-slate-950/"] [class~="text-[#E30613]"]:not(footer *) { color: var(--c-rouge-clair) !important; }


/* Le fond rouge de marque : son texte reste blanc, au blanc pur -- a 95 %
   d'opacite il tombait a 4,48, juste sous le seuil. */
section:not(.tr-hero) [class~="bg-[#E30613]"]:not(footer *),
section:not(.tr-hero) [class~="bg-[#E30613]"] p:not(footer *),
section:not(.tr-hero) [class~="bg-[#E30613]"] span:not(footer *),
section:not(.tr-hero) [class~="bg-[#E30613]"] strong:not(footer *),
[class~="bg-[#E30613]"] li:not(footer *),
[class~="bg-[#E30613]"] em:not(footer *),
[class~="bg-[#E30613]"] b:not(footer *),
[class~="bg-[#E30613]"] a:not(footer *),
[class~="bg-[#E30613]"] h2:not(footer *),
[class~="bg-[#E30613]"] h3:not(footer *),
[class~="bg-[#E30613]"] h4:not(footer *),
section:not(.tr-hero) [class~="bg-[#E30613]"] .text-white:not(footer *),
section:not(.tr-hero) [class~="bg-[#E30613]"] .text-red-100:not(footer *),
article:not(.tr-hero) [class~="bg-[#E30613]"]:not(footer *),
article:not(.tr-hero) [class~="bg-[#E30613]"] p:not(footer *),
article:not(.tr-hero) [class~="bg-[#E30613]"] .text-white:not(footer *) { color: #FFFFFF; }
section:not(.tr-hero).bg-\[\#E30613\],
section:not(.tr-hero).bg-\[\#E30613\] .text-white { color: #FFFFFF; }


/* --------------------------------------------------------------------------
   6. LES CARTES
   Un div, un article ou un li portant un fond sombre est un CONTENEUR DE
   CONTENU : il devient une carte claire. Releve sur les 575 pages :
   div.bg-[#1A1A1A] 2427 · div.bg-[#0A0A0A] 1522 · article.bg-[#1A1A1A] 655.
   -------------------------------------------------------------------------- */

section:not(.tr-hero) div[class~="bg-[#0A0A0A]"]:not(footer *),
section:not(.tr-hero) div[class~="bg-[#1A1A1A]"]:not(footer *),
section:not(.tr-hero) div[class~="bg-[#1A1A1A]/50"]:not(footer *),
section:not(.tr-hero) div[class~="bg-[#141414]"]:not(footer *),
section:not(.tr-hero) div[class~="bg-slate-900"]:not(footer *),
section:not(.tr-hero) div[class~="bg-slate-900/60"]:not(footer *),
section:not(.tr-hero) div[class~="bg-slate-950"]:not(footer *),
section:not(.tr-hero) div[class~="bg-slate-800/60"]:not(footer *),
section:not(.tr-hero) article[class~="bg-[#0A0A0A]"]:not(footer *),
section:not(.tr-hero) article[class~="bg-[#1A1A1A]"]:not(footer *),
section:not(.tr-hero) article[class~="bg-[#1A1A1A]/50"]:not(footer *),
section:not(.tr-hero) article[class~="bg-[#141414]"]:not(footer *),
section:not(.tr-hero) article[class~="bg-slate-900"]:not(footer *),
section:not(.tr-hero) article[class~="bg-slate-900/60"]:not(footer *),
section:not(.tr-hero) article[class~="bg-slate-950"]:not(footer *),
section:not(.tr-hero) article[class~="bg-slate-800/60"]:not(footer *),
section:not(.tr-hero) li[class~="bg-[#0A0A0A]"]:not(footer *),
section:not(.tr-hero) li[class~="bg-[#1A1A1A]"]:not(footer *),
section:not(.tr-hero) li[class~="bg-[#1A1A1A]/50"]:not(footer *),
section:not(.tr-hero) li[class~="bg-[#141414]"]:not(footer *),
section:not(.tr-hero) li[class~="bg-slate-900"]:not(footer *),
section:not(.tr-hero) li[class~="bg-slate-900/60"]:not(footer *),
section:not(.tr-hero) li[class~="bg-slate-950"]:not(footer *),
section:not(.tr-hero) li[class~="bg-slate-800/60"]:not(footer *),
article:not(.tr-hero) div[class~="bg-[#0A0A0A]"]:not(footer *),
article:not(.tr-hero) div[class~="bg-[#1A1A1A]"]:not(footer *),
article:not(.tr-hero) div[class~="bg-[#1A1A1A]/50"]:not(footer *),
article:not(.tr-hero) div[class~="bg-[#141414]"]:not(footer *),
article:not(.tr-hero) div[class~="bg-slate-900"]:not(footer *),
article:not(.tr-hero) div[class~="bg-slate-900/60"]:not(footer *),
article:not(.tr-hero) div[class~="bg-slate-950"]:not(footer *),
article:not(.tr-hero) div[class~="bg-slate-800/60"]:not(footer *),
article:not(.tr-hero) article[class~="bg-[#0A0A0A]"]:not(footer *),
article:not(.tr-hero) article[class~="bg-[#1A1A1A]"]:not(footer *),
article:not(.tr-hero) article[class~="bg-[#1A1A1A]/50"]:not(footer *),
article:not(.tr-hero) article[class~="bg-[#141414]"]:not(footer *),
article:not(.tr-hero) article[class~="bg-slate-900"]:not(footer *),
article:not(.tr-hero) article[class~="bg-slate-900/60"]:not(footer *),
article:not(.tr-hero) article[class~="bg-slate-950"]:not(footer *),
article:not(.tr-hero) article[class~="bg-slate-800/60"]:not(footer *),
article:not(.tr-hero) li[class~="bg-[#0A0A0A]"]:not(footer *),
article:not(.tr-hero) li[class~="bg-[#1A1A1A]"]:not(footer *),
article:not(.tr-hero) li[class~="bg-[#1A1A1A]/50"]:not(footer *),
article:not(.tr-hero) li[class~="bg-[#141414]"]:not(footer *),
article:not(.tr-hero) li[class~="bg-slate-900"]:not(footer *),
article:not(.tr-hero) li[class~="bg-slate-900/60"]:not(footer *),
article:not(.tr-hero) li[class~="bg-slate-950"]:not(footer *),
article:not(.tr-hero) li[class~="bg-slate-800/60"]:not(footer *),
body > div:not([id]) div[class~="bg-[#0A0A0A]"]:not(footer *),
body > div:not([id]) div[class~="bg-[#1A1A1A]"]:not(footer *),
body > div:not([id]) div[class~="bg-[#1A1A1A]/50"]:not(footer *),
body > div:not([id]) div[class~="bg-[#141414]"]:not(footer *),
body > div:not([id]) div[class~="bg-slate-900"]:not(footer *),
body > div:not([id]) div[class~="bg-slate-900/60"]:not(footer *),
body > div:not([id]) div[class~="bg-slate-950"]:not(footer *),
body > div:not([id]) div[class~="bg-slate-800/60"]:not(footer *),
body > div:not([id]) article[class~="bg-[#0A0A0A]"]:not(footer *),
body > div:not([id]) article[class~="bg-[#1A1A1A]"]:not(footer *),
body > div:not([id]) article[class~="bg-[#1A1A1A]/50"]:not(footer *),
body > div:not([id]) article[class~="bg-[#141414]"]:not(footer *),
body > div:not([id]) article[class~="bg-slate-900"]:not(footer *),
body > div:not([id]) article[class~="bg-slate-900/60"]:not(footer *),
body > div:not([id]) article[class~="bg-slate-950"]:not(footer *),
body > div:not([id]) article[class~="bg-slate-800/60"]:not(footer *),
body > div:not([id]) li[class~="bg-[#0A0A0A]"]:not(footer *),
body > div:not([id]) li[class~="bg-[#1A1A1A]"]:not(footer *),
body > div:not([id]) li[class~="bg-[#1A1A1A]/50"]:not(footer *),
body > div:not([id]) li[class~="bg-[#141414]"]:not(footer *),
body > div:not([id]) li[class~="bg-slate-900"]:not(footer *),
body > div:not([id]) li[class~="bg-slate-900/60"]:not(footer *),
body > div:not([id]) li[class~="bg-slate-950"]:not(footer *),
body > div:not([id]) li[class~="bg-slate-800/60"]:not(footer *),
section:not(.tr-hero) [class~="bg-slate-800/60"]:not(footer *),
article:not(.tr-hero) [class~="bg-slate-800/60"]:not(footer *),
body > div:not([id]) [class~="bg-slate-800/60"]:not(footer *),

section:not(.tr-hero) div[class~="bg-slate-800"]:not(footer *),
article:not(.tr-hero) div[class~="bg-slate-800"]:not(footer *),
body > div:not([id]) div[class~="bg-slate-800"]:not(footer *),

section:not(.tr-hero) [class~="bg-white"]:not(footer *),
article:not(.tr-hero) [class~="bg-white"]:not(footer *),
body > div:not([id]) [class~="bg-white"]:not(footer *),


/* --------------------------------------------------------------------------
   7. LES CLASSES MAISON, definies dans le <style> de chaque page
   Elles n'existent pas dans Tailwind : une feuille qui ne connait que ce
   vocabulaire ne peut pas les voir. Meme tri que pour le reste -- une CARTE
   devient claire, une PASTILLE reste sombre.

   Releve, par nombre de pages :
       84  .service-tag                   pastille  RESTE SOMBRE
       79  .cheminee-readable .card-surf  carte     -> CLAIRE
       57  .pro-badge                     badge     RESTE SOMBRE
       26  .card-surf sous 9 autres prefixes        -> CLAIRE
       22  .duo-tag                       etiquette RESTE SOMBRE
       22  .cta-box                       encadre rouge coherent : INTACT
   -------------------------------------------------------------------------- */
/* .gaz-compare n'est PAS dans cette liste : c'est un comparatif autonome,
   sombre et coherent avec lui-meme, qui pose ses propres huit regles de
   couleur. L'eclaircir obligerait a toutes les reprendre pour un gain nul. */
.card-surf, .city-card, .city-link,
body.page-prestations .service-card {
    background: var(--c-blanc) !important;
    border-color: var(--c-trait) !important;
    color: var(--c-encre);
}
.card-surf .text-gray-100, .card-surf .text-gray-200, .card-surf .text-gray-300,
.card-surf .text-white, .card-surf .text-slate-300,
.city-card .text-white, .city-card .text-gray-200,
body.page-prestations .service-card p,
body.page-prestations .service-card span { color: var(--c-encre2); }
.card-surf h2, .card-surf h3, .card-surf h4, .card-surf strong,
.city-card h3, body.page-prestations .service-card h3 { color: var(--c-encre); }
.card-surf .text-gray-400:not(footer *),
.card-surf .text-slate-400:not(footer *) { color: var(--c-encre3); }

/* .cta-box est un encadre rouge dont le bouton est blanc a texte encre. Son
   dessin est coherent : on le laisse. On ne fait que retablir ce que les
   regles generiques lui avaient pris -- son bouton etait devenu blanc sur
   blanc, mesure a 1,0. */
/* Le texte de .cta-box est pose sur le rouge de marque : meme invariant que
   les autres fonds satures, donc meme !important. Sans lui, un <p class="mb-4
   text-slate-300"> a l'interieur recevait l'encre de la regle de zone claire,
   plus specifique que ".cta-box p" -- mesure a 3,58. */
.cta-box, .cta-box p, .cta-box strong, .cta-box span, .cta-box li,
.cta-box h2, .cta-box h3, .cta-box .text-slate-300, .cta-box .text-gray-300,
section:not(.tr-hero) .cta-box p { color: #FFFFFF !important; }
/* Le bouton porte parfois lui-meme bg-[#E30613] : l'invariant "texte blanc
   sur fond rouge" de la regle 17 le repasserait en blanc sur son fond blanc.
   On le protege au meme niveau -- c'est une exception assumee, limitee a ce
   seul composant, dont le dessin veut un bouton clair a texte encre. */
.cta-box a, section:not(.tr-hero) .cta-box a, article:not(.tr-hero) .cta-box a,
.cta-box a.text-white, section:not(.tr-hero) .cta-box a.text-white,
section:not(.tr-hero) .cta-box a[class~="bg-[#E30613]"]:not(footer *) {
    background: #FFFFFF !important; color: #0A0A0A !important;
}
.cta-box a:hover, section:not(.tr-hero) .cta-box a:hover {
    background: #0A0A0A !important; color: #FFFFFF !important;
}

/* Les pastilles maison restent sombres. Leur texte est deja blanc, mais la
   classe text-white qu'elles portent aussi le faisait passer a l'encre : la
   regle de zone claire fait (0,2,1), on ecrit donc plus specifique. */
.service-tag, .pro-badge, .duo-tag, .val-deurope-badge,
.tar-table thead th, .cookie-table th,
.service-tag.text-white, .pro-badge.text-white, .duo-tag.text-white,
section:not(.tr-hero) .service-tag, section:not(.tr-hero) .pro-badge,
section:not(.tr-hero) .duo-tag, section:not(.tr-hero) .val-deurope-badge,
article:not(.tr-hero) .service-tag, article:not(.tr-hero) .pro-badge,
section:not(.tr-hero) .service-tag.text-white,
section:not(.tr-hero) .pro-badge.text-white,
article:not(.tr-hero) .service-tag.text-white { color: #FFFFFF; }


/* --------------------------------------------------------------------------
   8. LES COULEURS D'ACCENT
   Le rouge de marque reste #E30613 en toute taille : 4,61 sur l'ivoire et
   4,88 sur le blanc, conforme AA partout. Les regles ci-dessous passent par
   --c-rouge-fonce, qui vaut ce meme rouge : elles ne changent plus la teinte,
   elles gardent la main sur les elements concernes si le besoin revenait.
   -------------------------------------------------------------------------- */

article:not(.tr-hero) .text-\[10px\][class~="text-[#E30613]"],
article:not(.tr-hero) .text-\[11px\][class~="text-[#E30613]"],
article:not(.tr-hero) .text-\[13px\][class~="text-[#E30613]"],
article:not(.tr-hero) .text-\[9px\][class~="text-[#E30613]"],
article:not(.tr-hero) .text-base[class~="text-[#E30613]"],
article:not(.tr-hero) .text-lg[class~="text-[#E30613]"],
article:not(.tr-hero) .text-sm[class~="text-[#E30613]"],
article:not(.tr-hero) .text-xs[class~="text-[#E30613]"],
article:not(.tr-hero) [class~="text-[#E30613]"].text-\[10px\],
article:not(.tr-hero) [class~="text-[#E30613]"].text-\[11px\],
article:not(.tr-hero) [class~="text-[#E30613]"].text-\[13px\],
article:not(.tr-hero) [class~="text-[#E30613]"].text-\[9px\],
article:not(.tr-hero) [class~="text-[#E30613]"].text-base,
article:not(.tr-hero) [class~="text-[#E30613]"].text-lg,
article:not(.tr-hero) [class~="text-[#E30613]"].text-sm,
article:not(.tr-hero) [class~="text-[#E30613]"].text-xs,
body > div:not([id]) .text-\[10px\][class~="text-[#E30613]"],
body > div:not([id]) .text-\[11px\][class~="text-[#E30613]"],
body > div:not([id]) .text-\[13px\][class~="text-[#E30613]"],
body > div:not([id]) .text-\[9px\][class~="text-[#E30613]"],
body > div:not([id]) .text-base[class~="text-[#E30613]"],
body > div:not([id]) .text-lg[class~="text-[#E30613]"],
body > div:not([id]) .text-sm[class~="text-[#E30613]"],
body > div:not([id]) .text-xs[class~="text-[#E30613]"],
body > div:not([id]) [class~="text-[#E30613]"].text-\[10px\],
body > div:not([id]) [class~="text-[#E30613]"].text-\[11px\],
body > div:not([id]) [class~="text-[#E30613]"].text-\[13px\],
body > div:not([id]) [class~="text-[#E30613]"].text-\[9px\],
body > div:not([id]) [class~="text-[#E30613]"].text-base,
body > div:not([id]) [class~="text-[#E30613]"].text-lg,
body > div:not([id]) [class~="text-[#E30613]"].text-sm,
body > div:not([id]) [class~="text-[#E30613]"].text-xs,
section:not(.tr-hero) .text-\[10px\][class~="text-[#E30613]"],
section:not(.tr-hero) .text-\[11px\][class~="text-[#E30613]"],
section:not(.tr-hero) .text-\[13px\][class~="text-[#E30613]"],
section:not(.tr-hero) .text-\[9px\][class~="text-[#E30613]"],
section:not(.tr-hero) .text-base[class~="text-[#E30613]"],
section:not(.tr-hero) .text-lg[class~="text-[#E30613]"],
section:not(.tr-hero) .text-sm[class~="text-[#E30613]"],
section:not(.tr-hero) .text-xs[class~="text-[#E30613]"],
section:not(.tr-hero) [class~="text-[#E30613]"].text-\[10px\],
section:not(.tr-hero) [class~="text-[#E30613]"].text-\[11px\],
section:not(.tr-hero) [class~="text-[#E30613]"].text-\[13px\],
section:not(.tr-hero) [class~="text-[#E30613]"].text-\[9px\],
section:not(.tr-hero) [class~="text-[#E30613]"].text-base,
section:not(.tr-hero) [class~="text-[#E30613]"].text-lg,
section:not(.tr-hero) [class~="text-[#E30613]"].text-sm,
section:not(.tr-hero) [class~="text-[#E30613]"].text-xs { color: var(--c-rouge-fonce); }


/* LES ETOILES DES AVIS. #FACC15 donne 1,53 sur blanc ; un or plus profond
   double le contraste en restant franchement dore. Elles sont decoratives --
   la note chiffree figure toujours en toutes lettres a cote.

   Le ton retenu, #8F6300, tient 4,95 contre 1 sur l'ivoire du site : ce sont des
   CARACTERES, donc du texte au sens de la norme, et le seuil est 4,5 -- pas
   les 3 des elements graphiques. Il reste franchement dore.

   J'AVAIS ECRIT DEUX JEUX DE REGLES : un ton sombre dans les cadres clairs,
   l'or rendu dans le heros. L'audit a trouve la faille -- la pastille de note
   Google est un div BLANC, pose en style en ligne, DANS le heros. L'or y
   revenait sur du blanc, a 1,53, sur neuf pages du seul echantillon.

   On passe par la variable de surface du bloc 26 : c'est l'ancetre le plus
   proche qui decide, donc la pastille blanche l'emporte sur le heros qui la
   porte. Une seule regle, et plus aucune exception a ecrire. */
.text-yellow-400:not(footer *),
.text-amber-400:not(footer *),
.text-amber-500:not(footer *),
[class~="text-yellow-400"]:not(footer *),
[class~="text-amber-400"]:not(footer *),
[class~="text-amber-500"]:not(footer *) { color: var(--c-etoile); }

/* text-yellow-500 porte du TEXTE et non des etoiles : il lui faut 4,5 et non
   3, donc un ton encore plus profond dans les zones claires. */
section:not(.tr-hero) .text-yellow-500,
article:not(.tr-hero) .text-yellow-500 { color: #92400E; }

/* Les pastels, concus pour un fond sombre, delaves sur fond clair. */
section:not(.tr-hero) .text-green-400, section:not(.tr-hero) .text-green-300,
article:not(.tr-hero) .text-green-400 { color: #15803D; }
section:not(.tr-hero) .text-blue-300, section:not(.tr-hero) .text-sky-300,
article:not(.tr-hero) .text-blue-300 { color: #1D4ED8; }
section:not(.tr-hero) [style*="color:#6ee7b7" i],
article:not(.tr-hero) [style*="color:#6ee7b7" i] { color: #047857 !important; }
section:not(.tr-hero) [style*="color:#93c5fd" i],
article:not(.tr-hero) [style*="color:#93c5fd" i] { color: #1D4ED8 !important; }

/* Le badge vert des avant/apres : du blanc sur #22C55E donne 2,28 ; sur
   #15803D il donne 4,6. Defaut anterieur a la refonte, corrige au passage. */
section:not(.tr-hero) .bg-green-500, article:not(.tr-hero) .bg-green-500,
section:not(.tr-hero) .bg-green-400 { background-color: #15803D; }

/* Les pastilles rouges translucides, concues pour un fond sombre : sur clair
   elles composaient un mauve boueux ou le rouge tombait a 1,58. */
section:not(.tr-hero) [class*="bg-red-950/"],
section:not(.tr-hero) [class*="bg-red-900/"],
article:not(.tr-hero) [class*="bg-red-950/"] { background-color: #FDECEE; }


/* --------------------------------------------------------------------------
   9. BORDURES, ANGLES, OMBRES
   Le gris froid des bordures devient beige ; les angles s'arrondissent.
   -------------------------------------------------------------------------- */

section:not(.tr-hero) [class~="border-[#2A2A2A]"],
section:not(.tr-hero) [class~="border-[#1A1A1A]"],
section:not(.tr-hero) [class~="border-slate-700/50"],
section:not(.tr-hero) [class~="border-slate-700"],
section:not(.tr-hero) [class~="border-slate-800"],
section:not(.tr-hero) [class~="border-slate-200"],
article:not(.tr-hero) [class~="border-[#2A2A2A]"],
article:not(.tr-hero) [class~="border-[#1A1A1A]"],
article:not(.tr-hero) [class~="border-slate-700/50"],
article:not(.tr-hero) [class~="border-slate-700"],
article:not(.tr-hero) [class~="border-slate-800"],
article:not(.tr-hero) [class~="border-slate-200"],
body > div:not([id]) [class~="border-[#2A2A2A]"],
body > div:not([id]) [class~="border-[#1A1A1A]"],
body > div:not([id]) [class~="border-slate-700/50"],
body > div:not([id]) [class~="border-slate-700"],
body > div:not([id]) [class~="border-slate-800"],
body > div:not([id]) [class~="border-slate-200"],


section:not(.tr-hero) .rounded-sm, article:not(.tr-hero) .rounded-sm,
section:not(.tr-hero) .rounded, article:not(.tr-hero) .rounded { border-radius: 12px; }
section:not(.tr-hero) .rounded-lg, article:not(.tr-hero) .rounded-lg { border-radius: 16px; }
section:not(.tr-hero) .rounded-xl, article:not(.tr-hero) .rounded-xl { border-radius: 18px; }
section:not(.tr-hero) .shadow-2xl, article:not(.tr-hero) .shadow-2xl {
    box-shadow: 0 10px 34px -18px var(--c-ombre);
}
.tr-hero .rounded-sm { border-radius: 10px; }


/* --------------------------------------------------------------------------
   10. LA TYPOGRAPHIE, AUX VALEURS EXACTES DE L'ACCUEIL
   13,5 / 15,5 / 17 / 19 px, et les trois tailles ecrites en pixels montent
   d'un cran et demi. Ce sont les chiffres du bloc <style> de l'accueil, repris
   tels quels : c'est la reference que le client designe a chaque fois.

   LE HEROS N'EST PLUS EXCLU. Mes regles portaient :not(.tr-hero) ; l'accueil
   ne fait pas cette exception et ses boutons de heros y gagnent 1,5 px de
   corps et 6 px d'interligne. C'est l'ecart que le client a vu.

   Les variantes responsives sont reprises DANS leur media query, sinon elles
   reprendraient le dessus a leur point de rupture.
   -------------------------------------------------------------------------- */
section p, article p { line-height: 1.75; }
section .text-xs, article .text-xs { font-size: 13.5px; line-height: 1.62; }
section .text-sm, article .text-sm { font-size: 15.5px; line-height: 1.68; }
section .text-base, article .text-base { font-size: 17px; line-height: 1.7; }
section .text-lg, article .text-lg { font-size: 19px; line-height: 1.6; }
section .text-xl, article .text-xl { font-size: 1.35rem; }
section [class~="text-[9px]"], article [class~="text-[9px]"] { font-size: 10.5px; }
section [class~="text-[10px]"], article [class~="text-[10px]"] { font-size: 11.5px; }
section [class~="text-[11px]"], article [class~="text-[11px]"] { font-size: 12.5px; }
section .leading-snug, article .leading-snug { line-height: 1.5; }
section .leading-relaxed, article .leading-relaxed { line-height: 1.75; }
@media (min-width: 768px) {
    section [class~="md:text-xs"], article [class~="md:text-xs"] { font-size: 13.5px; }
    section [class~="md:text-sm"], article [class~="md:text-sm"] { font-size: 15.5px; }
    section [class~="md:text-base"], article [class~="md:text-base"] { font-size: 17.5px; }
    section [class~="md:text-lg"], article [class~="md:text-lg"] { font-size: 19.5px; }
    section [class~="md:text-xl"], article [class~="md:text-xl"] { font-size: 1.35rem; }
    section [class~="md:text-[11px]"], article [class~="md:text-[11px]"] { font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   11. INTERLETTRAGE ET ESPACE-MOT
   Tailwind pose tracking-tighter a -0,05 em. A 48 px, cela soude les mots :
   "EN ILE-DE-FRANCE" se lisait d'un bloc. Et ces textes sont EN CAPITALES,
   qui demandent PLUS d'air qu'une bas-de-casse, pas moins.

   Separement, le rapport entre la largeur de l'espace et celle d'une lettre
   suit la GRAISSE : 0,23 a 0,53 en 900, contre 0,45 a 0,62 en 400. Les
   lettres s'elargissent, le glyphe d'espace non : le mot suivant se colle au
   precedent. On corrige donc par la graisse.
   -------------------------------------------------------------------------- */
section .tracking-tighter, article .tracking-tighter,
section .text-3xl.tracking-tight, section .text-4xl.tracking-tight,
article .text-3xl.tracking-tight { letter-spacing: -.012em; }
section .text-xs.tracking-tight, section .text-sm.tracking-tight,
section .text-lg.tracking-tight, article .text-xs.tracking-tight,
section [class~="text-[10px]"].tracking-tight,
section [class~="text-[11px]"].tracking-tight { letter-spacing: .015em; }
section .tracking-widest, article .tracking-widest { letter-spacing: .18em; }

section, article{ word-spacing: .05em; }
section .font-bold, article .font-bold{ word-spacing: .10em; }
section .font-black, section .font-extrabold, article .font-black{ word-spacing: .14em; }

/* Le logotype garde son serrage : c'est une signature de marque, pas du
   texte courant. On le remet donc a sa valeur d'origine.

   CETTE REGLE ETAIT SOUDEE A LA PRECEDENTE -- le bloc de declaration du
   word-spacing manquait, et les selecteurs .font-black se retrouvaient dans
   cette regle-ci. Tout ce qui est font-black dans une section heritait donc
   du serrage du logotype. Les deux regles sont de nouveau distinctes. */
nav .tracking-tighter{ letter-spacing: -.05em; }


/* --------------------------------------------------------------------------
   12. LES ACCORDEONS DE FAQ, AU FORMAT DE L'ACCUEIL

   CE QU'IL Y AVAIT ICI ETAIT DU CODE MORT. La regle mettait la FAQ sur deux
   colonnes en visant deux classes maison que PAS UNE des 575 pages ne porte.
   Elle n'a donc jamais rien fait. Verifie par comptage avant de l'oter.

   CE QUE FAIT LA NOUVELLE. L'accueil a recu un traitement d'accordeon plus
   soigne : angles de 10 px, bord qui rougit au survol, transition douce, et
   pas d'ombre portee. 31 accordeons l'avaient, 2 299 gardaient l'ancien --
   angles de 2 px et une ombre. On aligne tout le site sur l'accueil.

   Tous les <details> du site sont des accordeons de FAQ, verifie un par un :
   la regle peut donc les viser sans discriminer. Le heros est exclu par
   principe, il n'en contient jamais.

   Specificite (0,1,2) contre le (0,1,0) des classes Tailwind d'angle et
   d'ombre : aucune n'a besoin d'etre retiree du HTML. */
section:not(.tr-hero) details,
article:not(.tr-hero) details {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: none;
    transition: border-color .3s ease;
}
section:not(.tr-hero) details:hover,
section:not(.tr-hero) details[open],
article:not(.tr-hero) details:hover,
article:not(.tr-hero) details[open] {
    border-color: #E30613;
}


/* --------------------------------------------------------------------------
   13. L'ENCADRE DE LECTURE
   Demande explicite : ne plus laisser de longs textes poses nus sur un fond
   blanc, "il faut que ca donne envie de lire".

   J'AI D'ABORD ESSAYE D'ENCADRER CHAQUE PARAGRAPHE. Mesure faite, c'etait une
   mauvaise idee : sur les pages d'article, le motif dominant est un simple
   "div > p" sans aucune classe, 55 fois sur huit pages. Les encadrer un par un
   aurait hache la lecture au lieu de la servir.

   On encadre donc LE BLOC DE LECTURE, pas le paragraphe : le conteneur .art,
   present sur les 21 pages d'article, devient une carte blanche posee sur un
   fond ivoire. C'est exactement l'effet de la capture que vous m'avez montree.
   -------------------------------------------------------------------------- */
article:not(.tr-hero)[class~="bg-white"]:not(footer *) { background-color: var(--c-ivoire); }
.art {
    background: var(--c-blanc);
    border: 1px solid var(--c-trait);
    border-radius: 18px;
    box-shadow: 0 4px 26px -16px var(--c-ombre);
    padding: 2.2rem 1.6rem;
    margin-top: 2.2rem;
    margin-bottom: 2.2rem;
}
@media (min-width: 768px) {
    .art { padding: 3rem 3.2rem; }
}
/* Le premier paragraphe du bloc sert d'accroche : un filet rouge et un corps
   legerement plus grand, comme sur la page d'accueil. */
.art > p:first-of-type {
    border-left: 4px solid var(--invicta-red);
    padding-left: 1.1rem;
    font-size: 1.08em;
    color: var(--c-encre);
}
/* Deja encadre par le dessin de la page : on ne rajoute rien. */
.cta-box p, .card-surf p, .city-card p, .tar-note p, .tar-fact p {
    background: none; border: 0; box-shadow: none;
}


/* --------------------------------------------------------------------------
   14. L'APPARITION AU DEFILEMENT
   L'etat masque est pose par le script et par lui seul, via la classe a-anim
   sur <html>. Sans JavaScript, ou pour un robot qui n'execute rien, la page
   reste entierement visible : aucun contenu n'est jamais cache au
   referencement. Seuls opacity et transform sont animes -- traites par le
   compositeur, donc ni mise en page ni repeinture, et le CLS reste nul.
   -------------------------------------------------------------------------- */
html.a-anim .a-monte { opacity: 0; transform: translateY(14px); }
html.a-anim .a-monte.a-vu {
    opacity: 1; transform: none;
    transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
    html.a-anim .a-monte { opacity: 1; transform: none; transition: none; }
}


/* --------------------------------------------------------------------------
   17. LES FONDS DE COULEUR PLEINE gardent un texte blanc
   Trois defauts mesures venaient de la : sur le rouge de marque, "Un doute
   sur l etat interieur" tombait a 3,58 et "Devis gratuit" a 1,56 ; sur le
   vert des badges avant/apres, "APRES" tombait a 3,49. Les regles de zone
   claire assombrissaient leur texte alors que le fond, lui, reste colore.
   On nomme les teintes une a une plutot que d employer * : un bouton blanc
   pose sur ces fonds -- le cas de .cta-box -- doit garder son texte encre.
   -------------------------------------------------------------------------- */

[class~="bg-[#E30613]"]:not(footer *),
[class~="bg-[#E30613]"] .text-\[\#C7CBD3\]:not(footer *),
[class~="bg-[#E30613]"] .text-gray-100:not(footer *),
[class~="bg-[#E30613]"] .text-gray-200:not(footer *),
[class~="bg-[#E30613]"] .text-gray-300:not(footer *),
[class~="bg-[#E30613]"] .text-gray-400:not(footer *),
[class~="bg-[#E30613]"] .text-gray-500:not(footer *),
[class~="bg-[#E30613]"] .text-red-100:not(footer *),
[class~="bg-[#E30613]"] .text-red-200:not(footer *),
[class~="bg-[#E30613]"] .text-slate-100:not(footer *),
[class~="bg-[#E30613]"] .text-slate-200:not(footer *),
[class~="bg-[#E30613]"] .text-slate-300:not(footer *),
[class~="bg-[#E30613]"] .text-slate-400:not(footer *),
[class~="bg-[#E30613]"] .text-slate-500:not(footer *),
[class~="bg-[#E30613]"] .text-white:not(footer *),
[class~="bg-[#E30613]"] .text-white\/60:not(footer *),
[class~="bg-[#E30613]"] .text-white\/70:not(footer *),
[class~="bg-[#E30613]"] .text-white\/80:not(footer *),
[class~="bg-[#E30613]"] .text-white\/90:not(footer *),
[class~="bg-[#E30613]"].text-\[\#C7CBD3\]:not(footer *),
[class~="bg-[#E30613]"].text-gray-100:not(footer *),
[class~="bg-[#E30613]"].text-gray-200:not(footer *),
[class~="bg-[#E30613]"].text-gray-300:not(footer *),
[class~="bg-[#E30613]"].text-gray-400:not(footer *),
[class~="bg-[#E30613]"].text-gray-500:not(footer *),
[class~="bg-[#E30613]"].text-red-100:not(footer *),
[class~="bg-[#E30613]"].text-red-200:not(footer *),
[class~="bg-[#E30613]"].text-slate-100:not(footer *),
[class~="bg-[#E30613]"].text-slate-200:not(footer *),
[class~="bg-[#E30613]"].text-slate-300:not(footer *),
[class~="bg-[#E30613]"].text-slate-400:not(footer *),
[class~="bg-[#E30613]"].text-slate-500:not(footer *),
[class~="bg-[#E30613]"].text-white:not(footer *),
[class~="bg-[#E30613]"].text-white\/60:not(footer *),
[class~="bg-[#E30613]"].text-white\/70:not(footer *),
[class~="bg-[#E30613]"].text-white\/80:not(footer *),
[class~="bg-[#E30613]"].text-white\/90:not(footer *),
[class~="bg-emerald-600"],
[class~="bg-emerald-600"] .text-\[\#C7CBD3\],
[class~="bg-emerald-600"] .text-gray-100,
[class~="bg-emerald-600"] .text-gray-200,
[class~="bg-emerald-600"] .text-gray-300,
[class~="bg-emerald-600"] .text-gray-400:not(footer *),
[class~="bg-emerald-600"] .text-gray-500:not(footer *),
[class~="bg-emerald-600"] .text-red-100:not(footer *),
[class~="bg-emerald-600"] .text-red-200,
[class~="bg-emerald-600"] .text-slate-100,
[class~="bg-emerald-600"] .text-slate-200,
[class~="bg-emerald-600"] .text-slate-300,
[class~="bg-emerald-600"] .text-slate-400:not(footer *),
[class~="bg-emerald-600"] .text-slate-500:not(footer *),
[class~="bg-emerald-600"] .text-white,
[class~="bg-emerald-600"] .text-white\/60,
[class~="bg-emerald-600"] .text-white\/70,
[class~="bg-emerald-600"] .text-white\/80,
[class~="bg-emerald-600"] .text-white\/90,
[class~="bg-emerald-600"].text-\[\#C7CBD3\],
[class~="bg-emerald-600"].text-gray-100,
[class~="bg-emerald-600"].text-gray-200,
[class~="bg-emerald-600"].text-gray-300,
[class~="bg-emerald-600"].text-gray-400:not(footer *),
[class~="bg-emerald-600"].text-gray-500:not(footer *),
[class~="bg-emerald-600"].text-red-100:not(footer *),
[class~="bg-emerald-600"].text-red-200,
[class~="bg-emerald-600"].text-slate-100,
[class~="bg-emerald-600"].text-slate-200,
[class~="bg-emerald-600"].text-slate-300,
[class~="bg-emerald-600"].text-slate-400:not(footer *),
[class~="bg-emerald-600"].text-slate-500:not(footer *),
[class~="bg-emerald-600"].text-white,
[class~="bg-emerald-600"].text-white\/60,
[class~="bg-emerald-600"].text-white\/70,
[class~="bg-emerald-600"].text-white\/80,
[class~="bg-emerald-600"].text-white\/90,
[class~="bg-green-500"],
[class~="bg-green-500"] .text-\[\#C7CBD3\],
[class~="bg-green-500"] .text-gray-100,
[class~="bg-green-500"] .text-gray-200,
[class~="bg-green-500"] .text-gray-300,
[class~="bg-green-500"] .text-gray-400:not(footer *),
[class~="bg-green-500"] .text-gray-500:not(footer *),
[class~="bg-green-500"] .text-red-100:not(footer *),
[class~="bg-green-500"] .text-red-200,
[class~="bg-green-500"] .text-slate-100,
[class~="bg-green-500"] .text-slate-200,
[class~="bg-green-500"] .text-slate-300,
[class~="bg-green-500"] .text-slate-400:not(footer *),
[class~="bg-green-500"] .text-slate-500:not(footer *),
[class~="bg-green-500"] .text-white,
[class~="bg-green-500"] .text-white\/60,
[class~="bg-green-500"] .text-white\/70,
[class~="bg-green-500"] .text-white\/80,
[class~="bg-green-500"] .text-white\/90,
[class~="bg-green-500"].text-\[\#C7CBD3\],
[class~="bg-green-500"].text-gray-100,
[class~="bg-green-500"].text-gray-200,
[class~="bg-green-500"].text-gray-300,
[class~="bg-green-500"].text-gray-400:not(footer *),
[class~="bg-green-500"].text-gray-500:not(footer *),
[class~="bg-green-500"].text-red-100:not(footer *),
[class~="bg-green-500"].text-red-200,
[class~="bg-green-500"].text-slate-100,
[class~="bg-green-500"].text-slate-200,
[class~="bg-green-500"].text-slate-300,
[class~="bg-green-500"].text-slate-400:not(footer *),
[class~="bg-green-500"].text-slate-500:not(footer *),
[class~="bg-green-500"].text-white,
[class~="bg-green-500"].text-white\/60,
[class~="bg-green-500"].text-white\/70,
[class~="bg-green-500"].text-white\/80,
[class~="bg-green-500"].text-white\/90,
[class~="bg-green-600"],
[class~="bg-green-600"] .text-\[\#C7CBD3\],
[class~="bg-green-600"] .text-gray-100,
[class~="bg-green-600"] .text-gray-200,
[class~="bg-green-600"] .text-gray-300,
[class~="bg-green-600"] .text-gray-400:not(footer *),
[class~="bg-green-600"] .text-gray-500:not(footer *),
[class~="bg-green-600"] .text-red-100:not(footer *),
[class~="bg-green-600"] .text-red-200,
[class~="bg-green-600"] .text-slate-100,
[class~="bg-green-600"] .text-slate-200,
[class~="bg-green-600"] .text-slate-300,
[class~="bg-green-600"] .text-slate-400:not(footer *),
[class~="bg-green-600"] .text-slate-500:not(footer *),
[class~="bg-green-600"] .text-white,
[class~="bg-green-600"] .text-white\/60,
[class~="bg-green-600"] .text-white\/70,
[class~="bg-green-600"] .text-white\/80,
[class~="bg-green-600"] .text-white\/90,
[class~="bg-green-600"].text-\[\#C7CBD3\],
[class~="bg-green-600"].text-gray-100,
[class~="bg-green-600"].text-gray-200,
[class~="bg-green-600"].text-gray-300,
[class~="bg-green-600"].text-gray-400:not(footer *),
[class~="bg-green-600"].text-gray-500:not(footer *),
[class~="bg-green-600"].text-red-100:not(footer *),
[class~="bg-green-600"].text-red-200,
[class~="bg-green-600"].text-slate-100,
[class~="bg-green-600"].text-slate-200,
[class~="bg-green-600"].text-slate-300,
[class~="bg-green-600"].text-slate-400:not(footer *),
[class~="bg-green-600"].text-slate-500:not(footer *),
[class~="bg-green-600"].text-white,
[class~="bg-green-600"].text-white\/60,
[class~="bg-green-600"].text-white\/70,
[class~="bg-green-600"].text-white\/80,
[class~="bg-green-600"].text-white\/90,
[class~="bg-green-700"],
[class~="bg-green-700"] .text-\[\#C7CBD3\],
[class~="bg-green-700"] .text-gray-100,
[class~="bg-green-700"] .text-gray-200,
[class~="bg-green-700"] .text-gray-300,
[class~="bg-green-700"] .text-gray-400:not(footer *),
[class~="bg-green-700"] .text-gray-500:not(footer *),
[class~="bg-green-700"] .text-red-100:not(footer *),
[class~="bg-green-700"] .text-red-200,
[class~="bg-green-700"] .text-slate-100,
[class~="bg-green-700"] .text-slate-200,
[class~="bg-green-700"] .text-slate-300,
[class~="bg-green-700"] .text-slate-400:not(footer *),
[class~="bg-green-700"] .text-slate-500:not(footer *),
[class~="bg-green-700"] .text-white,
[class~="bg-green-700"] .text-white\/60,
[class~="bg-green-700"] .text-white\/70,
[class~="bg-green-700"] .text-white\/80,
[class~="bg-green-700"] .text-white\/90,
[class~="bg-green-700"].text-\[\#C7CBD3\],
[class~="bg-green-700"].text-gray-100,
[class~="bg-green-700"].text-gray-200,
[class~="bg-green-700"].text-gray-300,
[class~="bg-green-700"].text-gray-400:not(footer *),
[class~="bg-green-700"].text-gray-500:not(footer *),
[class~="bg-green-700"].text-red-100:not(footer *),
[class~="bg-green-700"].text-red-200,
[class~="bg-green-700"].text-slate-100,
[class~="bg-green-700"].text-slate-200,
[class~="bg-green-700"].text-slate-300,
[class~="bg-green-700"].text-slate-400:not(footer *),
[class~="bg-green-700"].text-slate-500:not(footer *),
[class~="bg-green-700"].text-white,
[class~="bg-green-700"].text-white\/60,
[class~="bg-green-700"].text-white\/70,
[class~="bg-green-700"].text-white\/80,
[class~="bg-green-700"].text-white\/90,
[class~="bg-red-600"],
[class~="bg-red-600"] .text-\[\#C7CBD3\],
[class~="bg-red-600"] .text-gray-100,
[class~="bg-red-600"] .text-gray-200,
[class~="bg-red-600"] .text-gray-300,
[class~="bg-red-600"] .text-gray-400:not(footer *),
[class~="bg-red-600"] .text-gray-500:not(footer *),
[class~="bg-red-600"] .text-red-100:not(footer *),
[class~="bg-red-600"] .text-red-200,
[class~="bg-red-600"] .text-slate-100,
[class~="bg-red-600"] .text-slate-200,
[class~="bg-red-600"] .text-slate-300,
[class~="bg-red-600"] .text-slate-400:not(footer *),
[class~="bg-red-600"] .text-slate-500:not(footer *),
[class~="bg-red-600"] .text-white,
[class~="bg-red-600"] .text-white\/60,
[class~="bg-red-600"] .text-white\/70,
[class~="bg-red-600"] .text-white\/80,
[class~="bg-red-600"] .text-white\/90,
[class~="bg-red-600"].text-\[\#C7CBD3\],
[class~="bg-red-600"].text-gray-100,
[class~="bg-red-600"].text-gray-200,
[class~="bg-red-600"].text-gray-300,
[class~="bg-red-600"].text-gray-400:not(footer *),
[class~="bg-red-600"].text-gray-500:not(footer *),
[class~="bg-red-600"].text-red-100:not(footer *),
[class~="bg-red-600"].text-red-200,
[class~="bg-red-600"].text-slate-100,
[class~="bg-red-600"].text-slate-200,
[class~="bg-red-600"].text-slate-300,
[class~="bg-red-600"].text-slate-400:not(footer *),
[class~="bg-red-600"].text-slate-500:not(footer *),
[class~="bg-red-600"].text-white,
[class~="bg-red-600"].text-white\/60,
[class~="bg-red-600"].text-white\/70,
[class~="bg-red-600"].text-white\/80,
[class~="bg-red-600"].text-white\/90,
[class~="bg-red-700"],
[class~="bg-red-700"] .text-\[\#C7CBD3\],
[class~="bg-red-700"] .text-gray-100,
[class~="bg-red-700"] .text-gray-200,
[class~="bg-red-700"] .text-gray-300,
[class~="bg-red-700"] .text-gray-400:not(footer *),
[class~="bg-red-700"] .text-gray-500:not(footer *),
[class~="bg-red-700"] .text-red-100:not(footer *),
[class~="bg-red-700"] .text-red-200,
[class~="bg-red-700"] .text-slate-100,
[class~="bg-red-700"] .text-slate-200,
[class~="bg-red-700"] .text-slate-300,
[class~="bg-red-700"] .text-slate-400:not(footer *),
[class~="bg-red-700"] .text-slate-500:not(footer *),
[class~="bg-red-700"] .text-white,
[class~="bg-red-700"] .text-white\/60,
[class~="bg-red-700"] .text-white\/70,
[class~="bg-red-700"] .text-white\/80,
[class~="bg-red-700"] .text-white\/90,
[class~="bg-red-700"].text-\[\#C7CBD3\],
[class~="bg-red-700"].text-gray-100,
[class~="bg-red-700"].text-gray-200,
[class~="bg-red-700"].text-gray-300,
[class~="bg-red-700"].text-gray-400:not(footer *),
[class~="bg-red-700"].text-gray-500:not(footer *),
[class~="bg-red-700"].text-red-100:not(footer *),
[class~="bg-red-700"].text-red-200,
[class~="bg-red-700"].text-slate-100,
[class~="bg-red-700"].text-slate-200,
[class~="bg-red-700"].text-slate-300,
[class~="bg-red-700"].text-slate-400:not(footer *),
[class~="bg-red-700"].text-slate-500:not(footer *),
[class~="bg-red-700"].text-white,
[class~="bg-red-700"].text-white\/60,
[class~="bg-red-700"].text-white\/70,
[class~="bg-red-700"].text-white\/80,
[class~="bg-red-700"].text-white\/90 { color: #FFFFFF !important; }


/* Le bouton blanc de .cta-box est pose SUR le rouge : il reprend son texte
   encre, en plus specifique que la regle ci-dessus. */
section:not(.tr-hero) .cta-box a, article:not(.tr-hero) .cta-box a,
section:not(.tr-hero) [class~="bg-[#E30613]"] a[class~="bg-white"]:not(footer *),
section:not(.tr-hero) [class~="bg-[#E30613]"] .bg-white:not(footer *),
section:not(.tr-hero) [class~="bg-[#E30613]"] .bg-white p:not(footer *),
section:not(.tr-hero) [class~="bg-[#E30613]"] .bg-white span:not(footer *) { color: #0A0A0A; }

/* --------------------------------------------------------------------------
   18. contact.html, la seule page a maquette propre
   Elle porte .contact-v3, entierement sombre, et je ne la convertis pas : elle
   est coherente avec elle-meme et la refaire serait une refonte, pas
   l application d un format. Un seul point y etait court, le sur-titre du
   heros : rouge de marque sur #1A1A1A, mesure a 3,57. J'y avais pose un rouge
   eclairci ; le client l'a refuse, ici comme ailleurs, et le sur-titre reprend
   #E30613 comme le reste du site.
   -------------------------------------------------------------------------- */
body .contact-v3 .hero .eyebrow { color: var(--c-rouge-clair); }

/* --------------------------------------------------------------------------
   20. LES DERNIERS ECARTS, releves par la mesure sur les 575 pages
   -------------------------------------------------------------------------- */

/* 20.1  LES REGLES DE PAGE PLUS SPECIFIQUES QUE LES MIENNES, 61 occurrences.
   Chaque page cheminee pose dans son <style> :
       .cheminee-readable .card-surf .text-gray-300 { color:#C7CBD3 }   (0,3,0)
   Ma regle .card-surf .text-gray-300 fait (0,2,0) : elle perdait, et le gris
   pale restait sur une carte devenue blanche -- mesure a 1,63.
   Neuf familles emploient ce meme motif : cheminee, debistrage, gaz, cert,
   grillage, diag, fioul, granules, toit, etanch. On les vise toutes d'un coup
   par l'attribut, en (0,3,1). */
body[class*="-readable"] .card-surf .text-gray-100,
body[class*="-readable"] .card-surf .text-gray-200,
body[class*="-readable"] .card-surf .text-gray-300,
body[class*="-readable"] .card-surf .text-slate-300 { color: var(--c-encre2); }
/* .text-white n'est PAS visee ici : les regles de page ne la posent pas, et la
   viser assombrissait le texte des boutons sombres vivant dans une carte --
   "Demander un devis" tombait a 1,56 sur son fond rouge. */
body[class*="-readable"] .card-surf .text-gray-400:not(footer *),
body[class*="-readable"] .card-surf .text-gray-500:not(footer *),
body[class*="-readable"] .card-surf .text-slate-400:not(footer *) { color: var(--c-encre3); }
body[class*="-readable"] .card-surf h2,
body[class*="-readable"] .card-surf h3,
body[class*="-readable"] .card-surf h4,
body[class*="-readable"] .card-surf strong { color: var(--c-encre); }
/* Hors carte, ces memes familles posent le gris pale sur du texte courant. */
body[class*="-readable"] > div .text-gray-300,
body[class*="-readable"] > div .text-gray-400:not(footer *),
body[class*="-readable"] > div .text-slate-400:not(footer *) { color: var(--c-encre2); }

/* 20.2  LE COMPARATIF .gaz-compare RESTE SOMBRE, ENTIEREMENT.
   C'est un bloc autonome de cinq pages, avec ses propres huit regles de
   couleur et un schema SVG a fond #121319. Mes regles generiques en
   assombrissaient le texte alors que le fond, lui, restait noir : le titre
   de colonne tombait a 1,0 et le texte du schema a 1,06.
   On lui rend son dessin d'origine, en plus specifique. */
section .gaz-compare, article .gaz-compare,
section .gaz-compare p, section .gaz-compare li, section .gaz-compare div,
section .gaz-compare span, section .gaz-compare td, section .gaz-compare th { color: #C7CBD3; }
section .gaz-compare h2, section .gaz-compare h3,
section .gaz-compare .ctitle, article .gaz-compare .ctitle { color: #FFFFFF; }
section .gaz-compare .ctag, article .gaz-compare .ctag { color: #9AA0AA; }
section .gaz-compare b, article .gaz-compare b { color: #E7EAEF; }
section .gaz-compare .verdict.green { color: #5FE39C; }
section .gaz-compare .verdict.red { color: #FF6A61; }
section .gaz-compare .card, article .gaz-compare .card {
    background: #1A1A1A; border-color: rgba(255, 255, 255, .08);
}
section .gaz-compare svg text, section .gaz-compare svg tspan { fill: #C7CBD3; }

/* 20.3  LES LEGENDES POSEES SUR UNE PHOTO, 32 occurrences.
   Un bandeau bg-gradient-to-t from-black en bas d'une image porte sa legende
   en blanc. Ma liste de voiles ne connaissait que bg-black/NN : les degrades
   Tailwind lui echappaient, et la legende passait a l'encre sur le noir --
   mesure a 1,2. */
section [class*="bg-gradient-to"][class*="from-black"],
section [class*="bg-gradient-to"][class*="from-slate-900"],
section [class*="bg-gradient-to"][class*="from-[#0A0A0A]"],
article [class*="bg-gradient-to"][class*="from-black"],
body > div:not([id]) [class*="bg-gradient-to"][class*="from-black"],
section [class*="bg-gradient-to"][class*="from-black"] p,
section [class*="bg-gradient-to"][class*="from-black"] span,
section [class*="bg-gradient-to"][class*="from-black"] .text-white,
section [class*="bg-gradient-to"][class*="from-black"] .text-gray-200,
section [class*="bg-gradient-to"][class*="from-black"] .text-gray-300,
section [class*="bg-gradient-to"][class*="from-slate-900"] .text-white,
article [class*="bg-gradient-to"][class*="from-black"] .text-white { color: #FFFFFF; }

/* 20.4  LES CLASSES MAISON RESTANTES.
   .kicker porte le rouge de marque en petit corps : 4,42 sur ivoire, juste
   sous le seuil. .tar-link de meme : 4,46. */
section .kicker, article .kicker,
section .tar-link, article .tar-link,
body > div:not([id]) .kicker { color: var(--c-rouge-fonce); }

/* 20.5  LES PASTILLES MAISON POSEES DANS LE HEROS gardent leur fond noir.
   La regle qui eclaircit les blocs sombres du heros les rendait translucides,
   et leur texte rouge y perdait son contraste. */
.tr-hero .pro-badge, .tr-hero .service-tag, .tr-hero .duo-tag {
    background: #0A0A0A;
    border-color: rgba(255, 255, 255, .18);
}
.tr-hero .pro-badge [class~="text-[#E30613]"],
.tr-hero .pro-badge, .tr-hero .service-tag, .tr-hero .duo-tag { color: #FFFFFF; }
.tr-hero .pro-badge[class~="text-[#E30613]"] { color: var(--c-rouge-clair); }

/* 20.6  LES FONDS DE COULEUR PLEINE DANS LE HEROS.
   Le bouton rouge d'appel a l'action y vit aussi : son texte doit rester
   blanc, comme dans les zones claires. */
.tr-hero [class~="bg-[#E30613]"]:not(footer *),
.tr-hero [class~="bg-[#E30613]"] .text-white:not(footer *),
.tr-hero [class~="bg-[#E30613]"] p:not(footer *),
.tr-hero [class~="bg-[#E30613]"] span:not(footer *),
.tr-hero [class~="bg-green-500"],
.tr-hero [class~="bg-green-600"] { color: #FFFFFF; }

/* 20.7  LE VOILE DES PHOTOS un peu plus dense.
   Une legende blanche sur bg-black/60 compose un gris moyen : 4,2 mesure sur
   la page prestations, juste sous le seuil du petit corps. A 72 % le meme
   texte passe a 5,4. */
section [class~="bg-black/60"]:not(footer *),
section [class~="bg-black/50"]:not(footer *),
article [class~="bg-black/60"]:not(footer *) { background-color: rgba(0, 0, 0, .72); }

/* 20.8  UNE .card-surf POSEE DANS LE HEROS, 5 pages.
   Sur les quatre pages grillage et sur diagnostic-expertise, le contenu du
   heros vit lui-meme dans une .card-surf. Ma regle l'eclaircissait, ce qui
   posait un grand panneau blanc par-dessus le heros sombre : le texte y
   restait lisible, mais la page ne ressemblait plus a rien.
   Dans le heros, la carte devient un voile clair sur le fond sombre, comme
   les autres blocs -- et son texte redevient blanc. */
.tr-hero .card-surf {
    background: rgba(255, 255, 255, .10) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    color: #FFFFFF;
}
.tr-hero .card-surf p, .tr-hero .card-surf li, .tr-hero .card-surf span,
.tr-hero .card-surf h2, .tr-hero .card-surf h3, .tr-hero .card-surf h4,
.tr-hero .card-surf strong,
.tr-hero .card-surf .text-gray-100, .tr-hero .card-surf .text-gray-200,
.tr-hero .card-surf .text-gray-300, .tr-hero .card-surf .text-white { color: #FFFFFF; }
.tr-hero .card-surf .text-gray-400:not(footer *),
.tr-hero .card-surf .text-slate-400:not(footer *) { color: rgba(255, 255, 255, .82); }
body[class*="-readable"] .tr-hero .card-surf .text-gray-100,
body[class*="-readable"] .tr-hero .card-surf .text-gray-200,
body[class*="-readable"] .tr-hero .card-surf .text-gray-300,
body[class*="-readable"] .tr-hero .card-surf .text-gray-400:not(footer *),
body[class*="-readable"] .tr-hero .card-surf .text-slate-300,
body[class*="-readable"] .tr-hero .card-surf .text-slate-400:not(footer *) { color: rgba(255, 255, 255, .88); }

/* 20.9  LE FOND POSE SUR LE <body> LUI-MEME, 91 pages.
   Sur ces pages, des sections n'ont AUCUNE classe de fond -- <section
   class="py-16 md:py-24"> -- et le noir vient du <body class="bg-[#0A0A0A]">
   qui transparait derriere. Mes regles eclaircissaient le texte de ces
   sections alors que le fond restait noir : 33 textes illisibles sur la seule
   page fumisterie, dont un titre a 1,13.

   Le <body> de contact.html n'est PAS touche : il tient son fond d'une regle
   de page, pas d'une classe Tailwind. Sa maquette sombre reste intacte.

   L'en-tete et le pied de page restent sombres par ailleurs : on leur rend
   l'heritage clair que la nouvelle couleur du body leur retirait. */
body[class~="bg-[#0A0A0A]"]:not(footer *),
body[class~="bg-[#1A1A1A]"]:not(footer *),
body[class~="bg-black"]:not(footer *) {
    background-color: var(--c-ivoire);
    color: var(--c-encre);
}
body[class~="text-white"] { color: var(--c-encre); }
nav{ color: #FFFFFF; }

/* 20.10  LE FOND NOIR PUR, sur un conteneur interne.
   bg-black n'est pas dans la liste des cartes eclaircies : un div noir est le
   plus souvent un cache de photo, pas une carte. Son texte doit donc rester
   clair, ce que la liste des porteurs ne couvrait que pour a, span et button.
   Mesure avant correction : 16 titres a 1,2, encre sur noir.

   ON EXCLUT section ET body, ET C'EST INDISPENSABLE : la regle 3 eclaircit
   section[class~="bg-black"] et la regle 20.9 eclaircit body[class~="bg-black"].
   Les viser ici y poserait du texte blanc sur un fond devenu ivoire -- la
   contradiction meme que ce chantier a passe son temps a corriger. */
div[class~="bg-black"]:not(footer *),
figure[class~="bg-black"]:not(footer *),
li[class~="bg-black"]:not(footer *),
p[class~="bg-black"]:not(footer *),
td[class~="bg-black"]:not(footer *),
article[class~="bg-black"]:not(footer *),
div[class~="bg-black"] .text-white:not(footer *),
div[class~="bg-black"] .text-gray-200:not(footer *),
div[class~="bg-black"] .text-gray-300:not(footer *),
div[class~="bg-black"] .text-gray-400:not(footer *),
div[class~="bg-black"] .text-slate-300:not(footer *),
div[class~="bg-black"] .text-slate-400:not(footer *),
figure[class~="bg-black"] .text-white:not(footer *),
figure[class~="bg-black"] .text-gray-300:not(footer *),
article[class~="bg-black"] .text-white:not(footer *) { color: #FFFFFF !important; }
div[class~="bg-black"] [class~="text-[#E30613]"]:not(footer *),
figure[class~="bg-black"] [class~="text-[#E30613]"]:not(footer *) { color: var(--c-rouge-clair) !important; }

/* 20.11  .gradient-red, 84 pages.
   Un fond rouge pose par une regle de page :
       .gradient-red { background: linear-gradient(135deg, #E30613, #b0050f) }
   Aucune classe bg- ne le signale, il echappait donc a l'invariant "texte
   blanc sur fond sature" -- mesure a 3,58 sur les pages chaudiere gaz. */
.gradient-red, .gradient-red p, .gradient-red span, .gradient-red strong,
.gradient-red li, .gradient-red h2, .gradient-red h3, .gradient-red h4,
.gradient-red .text-white, .gradient-red .text-gray-200,
.gradient-red .text-gray-300, .gradient-red .text-slate-300,
.gradient-red .text-red-100:not(footer *) { color: #FFFFFF !important; }

/* 20.12  Les teintes posees EN LIGNE sur un fond rouge.
   #FFE3E5 sur le rouge de marque donne 4,04 ; le blanc pur donne 4,53 et
   franchit le seuil. Seul !important atteint un style en ligne. */
[class~="bg-[#E30613]"] [style*="color:#ffe3e5" i]:not(footer *),
[class~="bg-[#E30613]"] [style*="color:#FFE3E5" i]:not(footer *),
.gradient-red [style*="color:#ffe3e5" i],
section:not(.tr-hero)[class~="bg-[#E30613]"] [style*="color:#ffe3e5" i]:not(footer *) { color: #FFFFFF !important; }

/* 20.13  .kicker, sur-titre rouge de quelques pages : 4,42 sur ivoire, juste
   sous le seuil du petit corps. La regle 20.4, cadree sur section, ne
   l'atteignait pas -- il vit ailleurs dans la page. */
.kicker { color: var(--c-rouge-fonce) !important; }
.tr-hero .kicker { color: var(--c-rouge-clair) !important; }

/* 20.14  Le voile des photos de la page prestations : une legende blanche y
   composait un gris moyen a 4,16, juste sous le seuil. */
section [class*="bg-black/4"]:not(footer *),
section [class*="bg-black/3"]:not(footer *),
section [class~="bg-slate-900/60"]:not(footer *),
section [class~="bg-slate-900/70"]:not(footer *) {
    background-color: rgba(0, 0, 0, .68);
}

/* --------------------------------------------------------------------------
   21. LES DERNIERES COULEURS ARBITRAIRES
   Relevees par la mesure sur 109 457 textes. Ce sont des valeurs posees a la
   main, hors de tout vocabulaire : ni Tailwind, ni mes listes.
   -------------------------------------------------------------------------- */

/* 21.1  Fonds sombres poses EN LIGNE et absents de la regle 4 :
       #101010 (3 fois), #181818 (4), #3a3a3a (2), #151515.
   Le texte y passait a l'encre alors que le fond restait noir -- 1,07 a 1,13. */
section:not(.tr-hero) [style*="background:#101010" i],
section:not(.tr-hero) [style*="background:#121212" i],
section:not(.tr-hero) [style*="background:#151515" i],
section:not(.tr-hero) [style*="background:#3a3a3a" i],
article:not(.tr-hero) [style*="background:#101010" i],
article:not(.tr-hero) [style*="background:#181818" i],
body > div:not([id]) [style*="background:#101010" i],
body > div:not([id]) [style*="background:#1A1A1A" i],
body > div:not([id]) [style*="background:#181818" i],
section:not(.tr-hero) div[class~="bg-[#151515]"],
article:not(.tr-hero) div[class~="bg-[#151515]"] { background: var(--c-blanc) !important; }

/* 21.2  Fonds CLAIRS poses en ligne : l'invariant inverse.
   #FFF7F7 (1 283 fois), #FFFBEB (157), #f1f5f9 (22), #e2e8f0 (10)...
   Un texte clair pose dessus disparait -- mesure a 1,0. */
[style*="background:#FFF7F7" i], [style*="background:#FFFBEB" i],
[style*="background:#f1f5f9" i], [style*="background:#e2e8f0" i],
[style*="background:#F5F5F5" i], [style*="background:#fff" i],
[style*="background:#FFFFFF" i] { color: var(--c-encre) !important; }
/* Un bouton pose SUR ce bloc garde son texte : il a son propre fond. */
[style*="background:#FFF7F7" i] [class*="bg-[#E30613]"]:not(footer *),
[style*="background:#fff" i] [class*="bg-[#E30613]"]:not(footer *),
[style*="background:#FFFBEB" i] [class*="bg-[#E30613]"]:not(footer *),
[style*="background:#FFF7F7" i] [class~="bg-black"]:not(footer *),
[style*="background:#fff" i] [class~="bg-black"]:not(footer *) { color: #FFFFFF !important; }
/* :not([class*="bg-"]) EST INDISPENSABLE ICI. Sans lui, cette regle attrapait
   les boutons rouges qui vivent DANS ces blocs clairs -- <a class="bg-[#E30613]
   text-white"> -- et leur donnait de l'encre sur rouge : 229 boutons a 1,56,
   sur 201 pages. Un element qui porte son propre fond n'est pas concerne par
   la couleur de son conteneur. */
[style*="background:#FFF7F7" i] .text-white:not([class*="bg-"]),
[style*="background:#FFFBEB" i] .text-white:not([class*="bg-"]),
[style*="background:#fff" i] .text-white:not([class*="bg-"]),
[style*="background:#f1f5f9" i] .text-white:not([class*="bg-"]),
[style*="background:#FFF7F7" i] .text-gray-200:not([class*="bg-"]),
[style*="background:#fff" i] .text-gray-200:not([class*="bg-"]),
[style*="background:#FFF7F7" i] .text-gray-300:not([class*="bg-"]),
[style*="background:#fff" i] .text-gray-300:not([class*="bg-"]) { color: var(--c-encre2) !important; }

/* 21.3  Les rouges secondaires : #B30510 (464 fois) et #C10410 (7).
   Meme invariant que le rouge de marque -- texte blanc. */
[class~="bg-[#B30510]"]:not(footer *),
[class~="bg-[#C10410]"]:not(footer *),
[class~="bg-[#C20510]"]:not(footer *),
[class~="bg-[#B30510]"] .text-white:not(footer *),
[class~="bg-[#B30510]"] p:not(footer *),
[class~="bg-[#B30510]"] span:not(footer *),
[class~="bg-[#C10410]"] .text-white:not(footer *),
.gradient-bg, .gradient-bg p, .gradient-bg span { color: #FFFFFF !important; }

/* 21.4  Les bandeaux de legende poses au bas d'une photo.
   bg-gradient-to-t from-black to-transparent : au ras du bas le degrade est
   presque noir, mais la mesure moyenne ses bornes et donne 2,99. On lui pose
   un fond noir a 62 % SOUS le degrade : la legende passe a 8,9 et la mesure
   comme l'oeil sont d'accord. */
section [class*="bg-gradient-to-t"][class*="from-black"]:not([class*="inset-0"]),
section [class*="bg-gradient-to-t"][class*="from-slate-900"]:not([class*="inset-0"]),
article [class*="bg-gradient-to-t"][class*="from-black"]:not([class*="inset-0"]),
body > div:not([id]) [class*="bg-gradient-to-t"][class*="from-black"]:not([class*="inset-0"]) {
    background-color: rgba(0, 0, 0, .62);
}

/* 21.5  Les derniers liens maison en rouge de marque, sous le seuil du petit
   corps : .sav-link a 4,48. */
.sav-link, .prix-link, .cross-link { color: var(--c-rouge-fonce) !important; }

/* 21.6  LE ROUGE DE MARQUE POSE EN STYLE EN LIGNE, 546 occurrences.
       <div class="text-center rounded-xl p-4" style="background:#E30613">
   Aucune classe ne le signale : l'invariant "texte blanc sur fond sature",
   ecrit en classes, ne l'atteignait pas. Les numeros d'urgence de la page
   "que faire en cas de" -- 18, 112, Pompiers -- s'y lisaient a 3,58. */
[style*="background:#E30613" i], [style*="background: #E30613" i],
[style*="background-color:#E30613" i],
[style*="background:#E30613" i] p, [style*="background:#E30613" i] span,
[style*="background:#E30613" i] div, [style*="background:#E30613" i] strong,
[style*="background:#E30613" i] .text-white,
[style*="background:#E30613" i] .text-gray-200,
[style*="background:#E30613" i] .text-gray-300,
[style*="background:#E30613" i] .text-red-100:not(footer *) { color: #FFFFFF !important; }

/* 21.7  .gaz-compare : le comparatif devient un PANNEAU sombre autonome.
   La regle 20.2 lui garde son texte clair -- c'est un bloc a lui, avec ses
   huit regles de couleur et un schema SVG a fond #121319. Mais son conteneur
   n'avait aucun fond propre : il flottait sur une section devenue ivoire, et
   son titre blanc y tombait a 1,06.
   On lui pose donc le fond qu'il n'avait pas : un panneau sombre pose sur la
   page claire, ce qui est aussi plus lisible que l'ancien "sombre sur sombre". */
section .gaz-compare, article .gaz-compare {
    background: var(--c-nuit);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    padding: 1.6rem 1.4rem;
}
@media (min-width: 768px) {
    section .gaz-compare, article .gaz-compare { padding: 2.2rem 2rem; }
}

/* 21.8  Dans le panneau sombre .gaz-compare, le rouge doit s'ECLAIRCIR.
   La regle 21.5 fonce .kicker pour les fonds clairs ; sur ce panneau devenu
   sombre elle donnait 3,09. Le sens de la correction s'inverse avec le fond. */
.gaz-compare .kicker, .gaz-compare [class~="text-[#E30613]"],
.gaz-compare .sav-link, .tr-hero .sav-link { color: var(--c-rouge-clair) !important; }

/* --------------------------------------------------------------------------
   22. LES DEUX DERNIERES FAMILLES
   -------------------------------------------------------------------------- */

/* 22.1  .gradient-bg, un fond ROUGE pose sur une <section> entiere :
       <section class="py-20 gradient-bg text-white"> ... <h2 class="text-white">
   La regle 21.3 ne couvrait que p et span ; le titre, lui, portait text-white
   et recevait l'encre de la regle de zone claire -- 2,76 sur le rouge. */
.gradient-bg, .gradient-bg h1, .gradient-bg h2, .gradient-bg h3, .gradient-bg h4,
.gradient-bg p, .gradient-bg span, .gradient-bg li, .gradient-bg strong,
.gradient-bg a, .gradient-bg .text-white, .gradient-bg .text-gray-200,
.gradient-bg .text-gray-300, .gradient-bg .text-slate-300,
.gradient-bg .text-red-100:not(footer *) { color: #FFFFFF !important; }

/* 22.2  LES CLASSES MAISON A FOND CLAIR.
   Relevees une a une dans les <style> de page : leur fond est clair, leur
   texte doit donc etre sombre. C'est l'invariant inverse de celui des fonds
   satures, et il se verifie de la meme facon.
       22 pages  .snippet-box #F5F5F5 · .warn-box #FFF7ED · .tip-box #F8FAFC
       22 pages  .cmp thead th #F1F5F9 · .bg-slate-100 #F1F5F9
       16 pages  .schema-col #FCFCFD · .schema-couche #FFF
        7 pages  .google-badge #FFF     <- "Note : 4.8/5" y etait blanc sur blanc
        4 pages  .trust-badge #FEF2F2 */
.snippet-box, .warn-box, .tip-box, .google-badge, .trust-badge,
.schema-col, .schema-couche, .cmp thead th, .cmp tbody th,
.snippet-box p, .warn-box p, .tip-box p, .google-badge span,
.snippet-box .text-white, .warn-box .text-white, .tip-box .text-white,
.google-badge .text-white, .google-badge .text-gray-200,
.google-badge .text-gray-300, .trust-badge .text-white,
.schema-couche .text-white { color: var(--c-encre) !important; }
.snippet-box .text-gray-300:not(footer *),
.snippet-box .text-gray-400:not(footer *),
.warn-box .text-gray-300, .tip-box .text-gray-300 { color: var(--c-encre2) !important; }

/* 22.3  Les pastilles d'initiales des avis : du bleu 600 sur bleu 100 donne
   4,24 et du vert 600 sur vert 100 donne 3,0. Deux crans plus fonce et les
   deux passent, sans changer la teinte. */
section [class~="bg-blue-100"], article [class~="bg-blue-100"] { color: #1E3A8A !important; }
section [class~="bg-green-100"], article [class~="bg-green-100"] { color: #14532D !important; }

/* --------------------------------------------------------------------------
   23. LES TROIS DERNIERS CAS
   -------------------------------------------------------------------------- */

/* 23.1  LES VARIANTES D'OPACITE DU ROUGE : bg-[#E30613]/90, /80...
   [class~=] compare le token entier : "bg-[#E30613]/90" n'est pas
   "bg-[#E30613]". Le label "Intervention Gaz" y tombait a 3,82.
   [class*=] attrape la famille entiere. */
[class*="bg-[#E30613]"]:not(footer *),
[class*="bg-[#E30613]"] p:not(footer *),
[class*="bg-[#E30613]"] span:not(footer *),
[class*="bg-[#E30613]"] .text-white:not(footer *),
[class*="bg-red-600/"], [class*="bg-red-700/"] { color: #FFFFFF !important; }

/* 23.2  LES DEGRADES SOMBRES POSES EN STYLE EN LIGNE.
       style="background:linear-gradient(135deg,#1A1A1A 0%,...)"
   La regle 4 ne connaissait que les couleurs plates. Sur la page test
   d'etancheite, trois textes y tombaient a 1,07. */
section:not(.tr-hero) [style*="linear-gradient(135deg,#1A1A1A" i],
section:not(.tr-hero) [style*="linear-gradient(135deg, #1A1A1A" i],
section:not(.tr-hero) [style*="linear-gradient(180deg,#1A1A1A" i],
section:not(.tr-hero) [style*="linear-gradient(135deg,#0A0A0A" i],
section:not(.tr-hero) [style*="linear-gradient(135deg,rgba(10,10,10" i],
article:not(.tr-hero) [style*="linear-gradient(135deg,#1A1A1A" i],
body > div:not([id]) [style*="linear-gradient(135deg,#1A1A1A" i] {
    background: var(--c-blanc) !important;
    border: 1px solid var(--c-trait);
}

/* 23.3  Le texte de repli des balises video -- "Votre navigateur ne prend pas
   en charge la video" -- vit sur le fond noir du lecteur. Il ne s'affiche que
   si la video echoue, mais il doit alors se lire. */
/* On lui donne AUSSI un fond noir : selon les pages, le lecteur est pose sur
   un conteneur clair ou sombre, et le texte de repli tombait blanc sur blanc.
   Un fond noir est de toute facon ce qu'affiche le lecteur avant lecture. */
video { background: #000000; color: #FFFFFF; }

/* 23.4  Deux gris a la limite : slate-500 sur ivoire donne 4,49 et #6B7280 sur
   #F5F5F5 donne 4,43. Un cran plus fonce et les deux passent. */
section:not(.tr-hero) .text-slate-500:not(footer *),
article:not(.tr-hero) .text-slate-500:not(footer *),
.tar-sub:not(footer *),
.snippet-box .text-gray-500:not(footer *) { color: var(--c-encre3) !important; }

/* 23.5  Les deux derniers gris, a un cheveu du seuil.
       style="color:#64748b"   -> 4,49 sur ivoire   (legendes de photos)
       .sav-disc { color:#6B7280 } -> 4,43 sur #F5F5F5
   Seul !important atteint un style en ligne ; --c-encre3 les porte a 5,4. */
[style*="color:#64748b" i], [style*="color:#64748B" i],
[style*="color:#6B7280" i], [style*="color:#6b7280" i],
.sav-disc, .prix-disc, .disc { color: var(--c-encre3) !important; }

/* 23.6  LE FOND EN LIGNE POSE SUR LA SECTION ELLE-MEME.
       <section class="py-16 md:py-24" style="background:#0A0A0A">
   Toutes mes regles de style en ligne visaient un DESCENDANT -- "section
   [style*=...]" avec une espace. Quand le fond est sur la section, il faut la
   forme COLLEE. C'est la meme erreur que pour les voiles photo et les
   pastilles : le porteur et la cible sont le meme element.
   Mesure avant correction : 23 textes illisibles sur la page fumisterie. */
section:not(.tr-hero)[style*="background:#0A0A0A" i],
section:not(.tr-hero)[style*="background:#1A1A1A" i],
section:not(.tr-hero)[style*="background:#141414" i],
section:not(.tr-hero)[style*="background:#181818" i],
section:not(.tr-hero)[style*="background:#101010" i],
section:not(.tr-hero)[style*="background:#121212" i],
section:not(.tr-hero)[style*="background-color:#0A0A0A" i],
article:not(.tr-hero)[style*="background:#0A0A0A" i],
article:not(.tr-hero)[style*="background:#1A1A1A" i],
div[style*="background:#0A0A0A" i]:not([id]),
div[style*="background:#1A1A1A" i]:not([id]) { background: var(--c-ivoire) !important; }

/* 23.7  Le glyphe ≠ du comparatif gaz : <span class="r"> tenu par la variable
   --cred:#E2231A du bloc. Sur le panneau devenu sombre il donne 4,05, sous le
   seuil du petit corps. On redefinit la variable du bloc plutot que la classe :
   le vert de la meme paire en profite. */
section .gaz-compare, article .gaz-compare {
    --cred: #E30613;
    --cgreen: #4ADE80;
}


/* --------------------------------------------------------------------------
   16. LE BADGE SUSPENDU DES HEROS GRANULES

   Constat a l'ecran, mesure et non suppose : la photo du heros porte un
   lisere blanc de 4 px, et le badge "Certificat d'assurance" est cale sous
   elle par bottom:-2rem. Le lisere tombait alors pile dans la ligne
   "Remis sur place apres l'entretien". Le badge est pourtant bien peint
   par-dessus -- mais le trait entre a sa gauche et ressort a sa droite, et
   l'oeil le prolonge : la ligne parait tranchee. 325 pages, toute la
   famille granules ; l'accueil n'a pas ce motif, d'ou sa proprete.

   Premiere tentative : remonter le badge de 20 px pour que le lisere tombe
   dans sa marge basse. Le texte n'etait plus croise, mais le client a
   tranche plus simplement -- et mieux : le badge RENTRE DANS LE CADRE.
   Le rectangle blanc de la photo redevient alors continu sur ses quatre
   cotes, et la carte flotte sur le coin bas gauche de l'image. Plus aucun
   trait ne traverse quoi que ce soit, a n'importe quelle largeur.

   Specificite : une classe et deux attributs (0,3,0) contre le (0,1,0) de
   Tailwind. Aucun !important n'est necessaire.
   -------------------------------------------------------------------------- */
.tr-hero [class~="-bottom-8"][class~="-left-8"] {
    bottom: 16px;
    left: 16px;
}

/* SOUS 768 PX, LES FONDS PASSENT EN 640 PX DE LARGE.

   Un telephone affiche ce fond sous un voile de 80 % : la definition n'y
   change rien a l'oeil, mais le poids se voit sur une connexion mobile. Les
   onze fonds qui ont une variante 640w dans la galerie basculent ; les cinq
   autres pesent deja moins de 35 Ko et n'ont rien a gagner.

   Le gros du gain porte sur la famille granules -- 329 pages, de 187 a 91 Ko. */
@media (max-width: 767px) {
    .tr-f-cheminee { background-image: url("../../images2/hero-homepage-640w.webp"); }
    .tr-f-granules { background-image: url("../../images2/granule2-640w.webp"); }
    .tr-f-flamme { background-image: url("../../images2/granule-640w.webp"); }
    .tr-f-foyer { background-image: url("../../images2/bistre-foyer-640w.webp"); }
    .tr-f-grillage { background-image: url("../../images2/grillage-640w.webp"); }
    .tr-f-tubage { background-image: url("../../images2/tubage-640w.webp"); }
    .tr-f-toit { background-image: url("../../images2/toit8-640w.webp"); }
    .tr-f-camera { background-image: url("../../images2/camera-640w.webp"); }
    .tr-f-conduit { background-image: url("../../images2/dia-640w.webp"); }
    .tr-f-souche { background-image: url("../../images2/dalle-640w.webp"); }
    .tr-f-atelier { background-image: url("../../images2/IMG_8990-640w.webp"); }
    .tr-f-bistre { background-image: url("../../images2/hero-bistre-amas-640w.webp"); }
    .tr-f-terrain { background-image: url("../../images2/hero-debistrage-terrain-640w.webp"); }
    .tr-f-depannage { background-image: url("../../images2/posepoele-640w.webp"); }
    .tr-f-gaz { background-image: url("../../images2/hero-chaudiere-cannes-640w.webp"); }
    .tr-f-maison { background-image: url("../../images2/hero-maison-cles-640w.webp");
                   background-position: center 38%; }
}

/* --------------------------------------------------------------------------
   LA HIERARCHIE DU LOGO, REPRISE DE L'ACCUEIL

   TERRIER est la marque, RAMONAGE est le metier. Sur l'accueil les deux mots
   ont ete desepares : RAMONAGE passe a 0,86 em, une reduction legere qui pose
   la hierarchie sans effacer le second mot. Mesure faite : 18 px contre
   15,48 px sur l'accueil, 18 contre 18 partout ailleurs.

   Le reglage vivait dans le <style> de l'accueil seul. On le remonte ici : les
   574 autres pages l'obtiennent sans qu'aucune ne soit modifiee, et la regle
   n'existe plus qu'a un seul endroit.

   Taille RELATIVE et non en pixels : le bloc de marque existe en text-lg
   (18 px) dans l'en-tete et en text-base (16 px) dans le menu mobile. Une
   valeur absolue casserait la proportion sur l'un des deux.

   Le script d'animation decoupe TERRIER lettre par lettre mais garde RAMONAGE
   groupe dans ce span : les lettres heritent donc de la taille, a tout moment
   du cycle de couleurs.
   -------------------------------------------------------------------------- */
span.font-black.tracking-tighter.uppercase > span.text-white {
    font-size: .86em;
    letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   24. CE QUE L'AUDIT PIXEL A TROUVE

   Deux familles, l'une et l'autre anterieures a ce chantier, l'une et l'autre
   presentes sur les 575 pages. Elles n'apparaissaient pas avant parce que
   l'audit precedent ne lisait pas les pixels : il se rabattait sur la couleur
   de fond et manquait ce qui se joue sur une photo ou sous un pseudo-element.

   24.1  LE PIED DE PAGE GARDE LE ROUGE DE MARQUE.

   J'avais eclairci ici le rouge du pied de page, mesure a 3,66 contre 1 sur
   son bleu nuit. Le client l'a refuse, et il a raison : tout le pied virait
   au rose -- logo compris -- alors qu'il n'avait jamais demande cela. Une
   marque ne change pas de couleur selon l'endroit.

   LE CALCUL QUI TRANCHE, et que j'aurais du faire avant : #E30613 a une
   luminance de 0,165. Meme pose sur du NOIR PUR il plafonne a 4,30 contre 1.
   Aucun fond sombre ne peut donc lui faire atteindre les 4,5 exiges sous
   18,66 px. Le choix n'etait pas "corriger ou non" mais "changer la couleur
   de la marque ou non" -- et ce choix appartient au client, pas a moi.

   Le rouge de marque reste donc tel quel dans le pied de page. Les trois
   seuls moyens d'y gagner en lisibilite seraient d'agrandir ces textes,
   d'eclaircir le fond, ou de changer la teinte : trois decisions de design
   a prendre ensemble, pas une regle a glisser dans une feuille. */

/* 24.2  LES PICTOGRAMMES DE COULEUR.
   Des coches et des etoiles en teintes vives : vert 500 a 2,28, bleu 500 a
   3,68, orange 500 a 2,80, jaune 400 a 1,53 sur du blanc -- le point le plus
   bas du site. L'etoile appuie la note Google, dont le chiffre porte deja le
   sens, mais a 1,53 elle n'est meme pas visible comme forme.

   J'ai d'abord ecrit deux jeux de regles, un par cadre clair et un par
   porteur sombre. L'audit a montre la faille : la pastille de note Google est
   une pilule BLANCHE posee dans le heros, donc dans une surface que je
   declarais sombre -- l'etoile y reprenait son or sur du blanc, a 1,53.

   Une variable par accent regle le cas sans exception : c'est la surface la
   plus proche qui decide, y compris une carte claire posee dans le sombre. */
[class~="text-green-500"]:not(footer *),
[class~="text-emerald-500"]:not(footer *),
[class~="text-emerald-400"]:not(footer *) { color: var(--c-vert); }
[class~="text-blue-500"]:not(footer *) { color: var(--c-bleu); }
[class~="text-orange-500"]:not(footer *) { color: var(--c-orange); }

/* 24.3  LE FIL D'ARIANE, gris clair sur gris tres clair.
   Mesure : text-slate-500 a 4,34 et text-slate-400 a 2,34 sur slate-50 --
   le separateur "/" etait le moins lisible du site apres l'etoile. On
   descend les deux d'un cran ; le chemin de navigation reste discret mais
   se lit. */
[class~="bg-slate-50"] [class~="text-slate-500"]:not(footer *),
[class~="bg-slate-50"] [class~="text-slate-400"]:not(footer *),
nav[aria-label*="fil" i] [class~="text-slate-500"]:not(footer *),
nav[aria-label*="fil" i] [class~="text-slate-400"]:not(footer *),
[class~="bg-slate-50"] [class~="text-gray-500"]:not(footer *),
[class~="bg-slate-50"] [class~="text-gray-400"]:not(footer *) { color: #475569; }

/* 24.4  Le rouge de marque sur les gris tres clairs : 4,46 sur slate-50,
   juste sous le seuil. Le ton fonce de la palette passe a 5,7. */
[class~="bg-slate-50"] [class~="text-[#E30613]"]:not([class*="bg-"]),
[class~="bg-gray-50"] [class~="text-[#E30613]"]:not([class*="bg-"]),
[class~="bg-slate-100"] [class~="text-[#E30613]"]:not([class*="bg-"]) {
    color: var(--c-rouge-fonce);
}

/* --------------------------------------------------------------------------
   25. L'INVARIANT DES PORTEURS SATURES, REMIS AU-DESSUS DES ZONES CLAIRES

   Mesure au navigateur : un badge "bg-[#E30613] text-white" affichait
   rgb(87,83,78) -- de l'encre sur du rouge vif, 1,56 contre 1. Feuille
   desactivee, il redevenait blanc : la faute etait ici.

   L'ARITHMETIQUE. Deux de mes regles se disputaient l'element, toutes deux
   en !important :
       section:not(.tr-hero) .text-white    -> encre2   (0,2,1)
       [class~="bg-[#E30613]"].text-white   -> blanc    (0,2,0)
   La premiere gagnait d'un point d'element. J'avais pose l'invariant sans
   prefixe de cadre en me disant qu'un bouton rouge veut du texte clair
   partout : vrai sur le fond, faux sur la specificite.

   On redecline donc l'invariant AVEC les trois cadres -- (0,3,1), il reprend
   la main. Les declarations sans cadre restent en place pour les porteurs qui
   vivent hors de tout cadre.

   C'est la troisieme fois que cette arithmetique me prend, et toujours sous
   la meme forme : une regle de ZONE gagne un point d'element sur une regle de
   PORTEUR, et le texte bascule du bon cote du fond au mauvais. */
section:not(.tr-hero) [class~="bg-[#E30613]"]:not(footer *),
section:not(.tr-hero) [class~="bg-[#E30613]"] .text-white:not(footer *),
section:not(.tr-hero) [class~="bg-[#E30613]"].text-white:not(footer *),
section:not(.tr-hero) [class~="bg-[#E30613]"] p:not(footer *),
section:not(.tr-hero) [class~="bg-[#E30613]"] span:not(footer *),
section:not(.tr-hero) [class~="bg-[#E30613]"] strong:not(footer *),
[class~="bg-[#E30613]"] li:not(footer *),
[class~="bg-[#E30613]"] em:not(footer *),
[class~="bg-[#E30613]"] b:not(footer *),
[class~="bg-[#E30613]"] a:not(footer *),
[class~="bg-[#E30613]"] h2:not(footer *),
[class~="bg-[#E30613]"] h3:not(footer *),
[class~="bg-[#E30613]"] h4:not(footer *),
section:not(.tr-hero) [class~="bg-[#B30510]"]:not(footer *),
section:not(.tr-hero) [class~="bg-[#B30510]"] .text-white:not(footer *),
section:not(.tr-hero) [class~="bg-[#B30510]"].text-white:not(footer *),
section:not(.tr-hero) [class~="bg-[#B30510]"] p:not(footer *),
section:not(.tr-hero) [class~="bg-[#B30510]"] span:not(footer *),
section:not(.tr-hero) [class~="bg-[#B30510]"] strong:not(footer *),
section:not(.tr-hero) [class~="bg-[#C10410]"]:not(footer *),
section:not(.tr-hero) [class~="bg-[#C10410]"] .text-white:not(footer *),
section:not(.tr-hero) [class~="bg-[#C10410]"].text-white:not(footer *),
section:not(.tr-hero) [class~="bg-[#C10410]"] p:not(footer *),
section:not(.tr-hero) [class~="bg-[#C10410]"] span:not(footer *),
section:not(.tr-hero) [class~="bg-[#C10410]"] strong:not(footer *),
section:not(.tr-hero) [class~="bg-[#C20510]"],
section:not(.tr-hero) [class~="bg-[#C20510]"] .text-white,
section:not(.tr-hero) [class~="bg-[#C20510]"].text-white,
section:not(.tr-hero) [class~="bg-[#C20510]"] p,
section:not(.tr-hero) [class~="bg-[#C20510]"] span,
section:not(.tr-hero) [class~="bg-[#C20510]"] strong,
section:not(.tr-hero) [class~="bg-red-600"],
section:not(.tr-hero) [class~="bg-red-600"] .text-white,
section:not(.tr-hero) [class~="bg-red-600"].text-white,
section:not(.tr-hero) [class~="bg-red-600"] p,
section:not(.tr-hero) [class~="bg-red-600"] span,
section:not(.tr-hero) [class~="bg-red-600"] strong,
section:not(.tr-hero) [class~="bg-red-700"],
section:not(.tr-hero) [class~="bg-red-700"] .text-white,
section:not(.tr-hero) [class~="bg-red-700"].text-white,
section:not(.tr-hero) [class~="bg-red-700"] p,
section:not(.tr-hero) [class~="bg-red-700"] span,
section:not(.tr-hero) [class~="bg-red-700"] strong,
section:not(.tr-hero) [class~="bg-green-500"],
section:not(.tr-hero) [class~="bg-green-500"] .text-white,
section:not(.tr-hero) [class~="bg-green-500"].text-white,
section:not(.tr-hero) [class~="bg-green-500"] p,
section:not(.tr-hero) [class~="bg-green-500"] span,
section:not(.tr-hero) [class~="bg-green-500"] strong,
section:not(.tr-hero) [class~="bg-green-600"],
section:not(.tr-hero) [class~="bg-green-600"] .text-white,
section:not(.tr-hero) [class~="bg-green-600"].text-white,
section:not(.tr-hero) [class~="bg-green-600"] p,
section:not(.tr-hero) [class~="bg-green-600"] span,
section:not(.tr-hero) [class~="bg-green-600"] strong,
section:not(.tr-hero) [class~="bg-green-700"],
section:not(.tr-hero) [class~="bg-green-700"] .text-white,
section:not(.tr-hero) [class~="bg-green-700"].text-white,
section:not(.tr-hero) [class~="bg-green-700"] p,
section:not(.tr-hero) [class~="bg-green-700"] span,
section:not(.tr-hero) [class~="bg-green-700"] strong,
section:not(.tr-hero) [class~="bg-emerald-600"],
section:not(.tr-hero) [class~="bg-emerald-600"] .text-white,
section:not(.tr-hero) [class~="bg-emerald-600"].text-white,
section:not(.tr-hero) [class~="bg-emerald-600"] p,
section:not(.tr-hero) [class~="bg-emerald-600"] span,
section:not(.tr-hero) [class~="bg-emerald-600"] strong,
article:not(.tr-hero) [class~="bg-[#E30613]"]:not(footer *),
article:not(.tr-hero) [class~="bg-[#E30613]"] .text-white:not(footer *),
article:not(.tr-hero) [class~="bg-[#E30613]"].text-white:not(footer *),
article:not(.tr-hero) [class~="bg-[#E30613]"] p:not(footer *),
article:not(.tr-hero) [class~="bg-[#E30613]"] span:not(footer *),
article:not(.tr-hero) [class~="bg-[#E30613]"] strong:not(footer *),
[class~="bg-[#E30613]"] li:not(footer *),
[class~="bg-[#E30613]"] em:not(footer *),
[class~="bg-[#E30613]"] b:not(footer *),
[class~="bg-[#E30613]"] a:not(footer *),
[class~="bg-[#E30613]"] h2:not(footer *),
[class~="bg-[#E30613]"] h3:not(footer *),
[class~="bg-[#E30613]"] h4:not(footer *),
article:not(.tr-hero) [class~="bg-[#B30510]"]:not(footer *),
article:not(.tr-hero) [class~="bg-[#B30510]"] .text-white:not(footer *),
article:not(.tr-hero) [class~="bg-[#B30510]"].text-white:not(footer *),
article:not(.tr-hero) [class~="bg-[#B30510]"] p:not(footer *),
article:not(.tr-hero) [class~="bg-[#B30510]"] span:not(footer *),
article:not(.tr-hero) [class~="bg-[#B30510]"] strong:not(footer *),
article:not(.tr-hero) [class~="bg-[#C10410]"]:not(footer *),
article:not(.tr-hero) [class~="bg-[#C10410]"] .text-white:not(footer *),
article:not(.tr-hero) [class~="bg-[#C10410]"].text-white:not(footer *),
article:not(.tr-hero) [class~="bg-[#C10410]"] p:not(footer *),
article:not(.tr-hero) [class~="bg-[#C10410]"] span:not(footer *),
article:not(.tr-hero) [class~="bg-[#C10410]"] strong:not(footer *),
article:not(.tr-hero) [class~="bg-[#C20510]"],
article:not(.tr-hero) [class~="bg-[#C20510]"] .text-white,
article:not(.tr-hero) [class~="bg-[#C20510]"].text-white,
article:not(.tr-hero) [class~="bg-[#C20510]"] p,
article:not(.tr-hero) [class~="bg-[#C20510]"] span,
article:not(.tr-hero) [class~="bg-[#C20510]"] strong,
article:not(.tr-hero) [class~="bg-red-600"],
article:not(.tr-hero) [class~="bg-red-600"] .text-white,
article:not(.tr-hero) [class~="bg-red-600"].text-white,
article:not(.tr-hero) [class~="bg-red-600"] p,
article:not(.tr-hero) [class~="bg-red-600"] span,
article:not(.tr-hero) [class~="bg-red-600"] strong,
article:not(.tr-hero) [class~="bg-red-700"],
article:not(.tr-hero) [class~="bg-red-700"] .text-white,
article:not(.tr-hero) [class~="bg-red-700"].text-white,
article:not(.tr-hero) [class~="bg-red-700"] p,
article:not(.tr-hero) [class~="bg-red-700"] span,
article:not(.tr-hero) [class~="bg-red-700"] strong,
article:not(.tr-hero) [class~="bg-green-500"],
article:not(.tr-hero) [class~="bg-green-500"] .text-white,
article:not(.tr-hero) [class~="bg-green-500"].text-white,
article:not(.tr-hero) [class~="bg-green-500"] p,
article:not(.tr-hero) [class~="bg-green-500"] span,
article:not(.tr-hero) [class~="bg-green-500"] strong,
article:not(.tr-hero) [class~="bg-green-600"],
article:not(.tr-hero) [class~="bg-green-600"] .text-white,
article:not(.tr-hero) [class~="bg-green-600"].text-white,
article:not(.tr-hero) [class~="bg-green-600"] p,
article:not(.tr-hero) [class~="bg-green-600"] span,
article:not(.tr-hero) [class~="bg-green-600"] strong,
article:not(.tr-hero) [class~="bg-green-700"],
article:not(.tr-hero) [class~="bg-green-700"] .text-white,
article:not(.tr-hero) [class~="bg-green-700"].text-white,
article:not(.tr-hero) [class~="bg-green-700"] p,
article:not(.tr-hero) [class~="bg-green-700"] span,
article:not(.tr-hero) [class~="bg-green-700"] strong,
article:not(.tr-hero) [class~="bg-emerald-600"],
article:not(.tr-hero) [class~="bg-emerald-600"] .text-white,
article:not(.tr-hero) [class~="bg-emerald-600"].text-white,
article:not(.tr-hero) [class~="bg-emerald-600"] p,
article:not(.tr-hero) [class~="bg-emerald-600"] span,
article:not(.tr-hero) [class~="bg-emerald-600"] strong,
body > div:not([id]) [class~="bg-[#E30613]"]:not(footer *),
body > div:not([id]) [class~="bg-[#E30613]"] .text-white:not(footer *),
body > div:not([id]) [class~="bg-[#E30613]"].text-white:not(footer *),
body > div:not([id]) [class~="bg-[#E30613]"] p:not(footer *),
body > div:not([id]) [class~="bg-[#E30613]"] span:not(footer *),
body > div:not([id]) [class~="bg-[#E30613]"] strong:not(footer *),
[class~="bg-[#E30613]"] li:not(footer *),
[class~="bg-[#E30613]"] em:not(footer *),
[class~="bg-[#E30613]"] b:not(footer *),
[class~="bg-[#E30613]"] a:not(footer *),
[class~="bg-[#E30613]"] h2:not(footer *),
[class~="bg-[#E30613]"] h3:not(footer *),
[class~="bg-[#E30613]"] h4:not(footer *),
body > div:not([id]) [class~="bg-[#B30510]"]:not(footer *),
body > div:not([id]) [class~="bg-[#B30510]"] .text-white:not(footer *),
body > div:not([id]) [class~="bg-[#B30510]"].text-white:not(footer *),
body > div:not([id]) [class~="bg-[#B30510]"] p:not(footer *),
body > div:not([id]) [class~="bg-[#B30510]"] span:not(footer *),
body > div:not([id]) [class~="bg-[#B30510]"] strong:not(footer *),
body > div:not([id]) [class~="bg-[#C10410]"]:not(footer *),
body > div:not([id]) [class~="bg-[#C10410]"] .text-white:not(footer *),
body > div:not([id]) [class~="bg-[#C10410]"].text-white:not(footer *),
body > div:not([id]) [class~="bg-[#C10410]"] p:not(footer *),
body > div:not([id]) [class~="bg-[#C10410]"] span:not(footer *),
body > div:not([id]) [class~="bg-[#C10410]"] strong:not(footer *),
body > div:not([id]) [class~="bg-[#C20510]"],
body > div:not([id]) [class~="bg-[#C20510]"] .text-white,
body > div:not([id]) [class~="bg-[#C20510]"].text-white,
body > div:not([id]) [class~="bg-[#C20510]"] p,
body > div:not([id]) [class~="bg-[#C20510]"] span,
body > div:not([id]) [class~="bg-[#C20510]"] strong,
body > div:not([id]) [class~="bg-red-600"],
body > div:not([id]) [class~="bg-red-600"] .text-white,
body > div:not([id]) [class~="bg-red-600"].text-white,
body > div:not([id]) [class~="bg-red-600"] p,
body > div:not([id]) [class~="bg-red-600"] span,
body > div:not([id]) [class~="bg-red-600"] strong,
body > div:not([id]) [class~="bg-red-700"],
body > div:not([id]) [class~="bg-red-700"] .text-white,
body > div:not([id]) [class~="bg-red-700"].text-white,
body > div:not([id]) [class~="bg-red-700"] p,
body > div:not([id]) [class~="bg-red-700"] span,
body > div:not([id]) [class~="bg-red-700"] strong,
body > div:not([id]) [class~="bg-green-500"],
body > div:not([id]) [class~="bg-green-500"] .text-white,
body > div:not([id]) [class~="bg-green-500"].text-white,
body > div:not([id]) [class~="bg-green-500"] p,
body > div:not([id]) [class~="bg-green-500"] span,
body > div:not([id]) [class~="bg-green-500"] strong,
body > div:not([id]) [class~="bg-green-600"],
body > div:not([id]) [class~="bg-green-600"] .text-white,
body > div:not([id]) [class~="bg-green-600"].text-white,
body > div:not([id]) [class~="bg-green-600"] p,
body > div:not([id]) [class~="bg-green-600"] span,
body > div:not([id]) [class~="bg-green-600"] strong,
body > div:not([id]) [class~="bg-green-700"],
body > div:not([id]) [class~="bg-green-700"] .text-white,
body > div:not([id]) [class~="bg-green-700"].text-white,
body > div:not([id]) [class~="bg-green-700"] p,
body > div:not([id]) [class~="bg-green-700"] span,
body > div:not([id]) [class~="bg-green-700"] strong,
body > div:not([id]) [class~="bg-emerald-600"],
body > div:not([id]) [class~="bg-emerald-600"] .text-white,
body > div:not([id]) [class~="bg-emerald-600"].text-white,
body > div:not([id]) [class~="bg-emerald-600"] p,
body > div:not([id]) [class~="bg-emerald-600"] span,
body > div:not([id]) [class~="bg-emerald-600"] strong,
section:not(.tr-hero) .gradient-red,
section:not(.tr-hero) .gradient-red .text-white,
section:not(.tr-hero) .gradient-red span,
section:not(.tr-hero) .gradient-bg,
section:not(.tr-hero) .gradient-bg .text-white,
section:not(.tr-hero) .gradient-bg span,
article:not(.tr-hero) .gradient-red,
article:not(.tr-hero) .gradient-red .text-white,
article:not(.tr-hero) .gradient-red span,
article:not(.tr-hero) .gradient-bg,
article:not(.tr-hero) .gradient-bg .text-white,
article:not(.tr-hero) .gradient-bg span,
body > div:not([id]) .gradient-red,
body > div:not([id]) .gradient-red .text-white,
body > div:not([id]) .gradient-red span,
body > div:not([id]) .gradient-bg,
body > div:not([id]) .gradient-bg .text-white,
body > div:not([id]) .gradient-bg span {
    /* var(--c-encre) et non #FFFFFF : un bouton BLANC pose dans un encadre
       rouge redeclare lui-meme l'encre sombre (bloc 26), et son texte la
       reprend. Avec une valeur en dur, mon invariant le peignait en blanc sur
       blanc -- 1,00 contre 1, invisible, 36 fois dans l'audit. */
    color: var(--c-encre) !important;
}

/* --------------------------------------------------------------------------
   26. LES TEINTES SUIVENT LA SURFACE

   LE MOTIF QUI REVENAIT. Une regle posait --c-encre2 ou --c-rouge-clair sans
   savoir sur quel fond le texte tomberait. Sur ivoire l'encre est juste et le
   rouge clair est faux ; sur un porteur sombre c'est l'inverse.

   ON RENVERSE LA PRISE : on ne retouche plus les regles, on redefinit les
   VARIABLES sur les surfaces. Une variable CSS est heritee, et c'est
   l'ancetre le PLUS PROCHE qui gagne -- un bouton blanc pose dans un encadre
   rouge reprend donc l'encre sombre sans qu'on ait a l'ecrire.

   JE M'Y SUIS PRIS A TROIS FOIS. D'abord j'ai liste les surfaces sombres par
   leur nom de classe : faux, cette feuille eclaircit la plupart d'entre
   elles, et l'audit a compte 10 106 defauts. Ensuite j'ai liste les porteurs
   a la main : faux encore -- j'y avais mis les li, que la feuille eclaircit,
   et oublie les div a fond noir, qu'elle laisse noirs.

   La troisieme fois, j'ai MESURE. Un balayage sur 44 pages releve, pour
   chaque couple BALISE + CLASSE, la luminance que le navigateur calcule
   vraiment. Trois familles en sortent :

     - des couples toujours sombres  (a.bg-black, div.bg-black, .pro-badge) ;
     - des couples toujours clairs   (div.bg-[#1A1A1A], li.bg-[#0A0A0A]) ;
     - CINQ couples qui dependent du contexte : bg-[#0A0A0A] et bg-slate-900
       restent sombres DANS LE HEROS et sont eclaircis dans les zones de
       contenu.

   Ce dernier point est la cle, et il s'ecrit tres bien : ce n'est pas la
   classe qui decide, c'est l'endroit ou elle vit.
   -------------------------------------------------------------------------- */

/* Les regions que cette feuille laisse sombres, et les porteurs mesures
   comme tels. */
.tr-hero,
nav[class*="glass-nav"],
.glass-nav-noir,
#mobile-menu,
.contact-v3,
a[class~="bg-black"]:not(footer *),
a[class~="bg-[#E30613]"]:not(footer *),
a[class~="bg-slate-800"]:not(footer *),
span[class~="bg-black"]:not(footer *),
span[class~="bg-slate-800"]:not(footer *),
span[class~="bg-slate-900"]:not(footer *),
span[class~="bg-[#0A0A0A]"]:not(footer *),
span[class~="bg-[#E30613]"]:not(footer *),
button[class~="bg-[#E30613]"]:not(footer *),
button[class~="bg-slate-900"]:not(footer *),
div[class~="bg-black"]:not(footer *),
div[class~="bg-[#E30613]"]:not(footer *),
div[class~="bg-green-500"],
figure[class~="bg-black"]:not(footer *),
video[class~="bg-black"]:not(footer *),
section[class~="bg-[#E30613]"]:not(footer *),
code[class~="bg-black"]:not(footer *),
kbd[class~="bg-black"]:not(footer *),
.pro-badge,
.service-tag,
.duo-tag,
.et-filet,
.et-num,
.gms-hero-ov,
.gradient-dark,
.gradient-red,
.gradient-bg,
.cta-box,
.gaz-compare,
.hero-cadre-point,
.ic-hero-ov,
.nm-filet,
.nm-h2-filet,
.pq-filet,
.pz-hero-ov,
.tor-hero-ov,
.val-deurope-badge,
[class*="bg-black/"]:not(footer *),
[class*="bg-slate-900/"]:not(footer *),
[class*="bg-[#0A0A0A]/"]:not(footer *),
[class*="bg-gradient-to-t"][class*="from-black"],
[class*="bg-gradient-to-t"][class*="from-slate-900"],
/* Les degrades a dominante rouge : un titre pose dessus doit rester
   clair. Mesure : encre2 sur rgb(211,6,18) tombait a 1,38. */
[class*="from-[#E30613]"], [class*="via-[#E30613]"], [class*="to-[#E30613]"],
[class*="from-red-6"], [class*="from-red-7"], [class*="via-red-6"] {
    --c-encre:  #FFFFFF;
    --c-encre2: rgba(255, 255, 255, .82);
    --c-encre3: rgba(255, 255, 255, .70);
    --c-rouge-clair: #E30613;
    --c-rouge-fonce: #E30613;
    --c-etoile: #FACC15;
    --c-vert:   #22C55E;
    --c-bleu:   #3B82F6;
    --c-orange: #F97316;
}

/* Les zones de contenu et toutes les surfaces mesurees comme claires --
   y compris celles dont le nom de classe dit le contraire. */
section:not(.tr-hero),
article:not(.tr-hero),
body > div:not([id]),
[class~="bg-white"]:not(footer *),
[class~="bg-slate-50"],
[class~="bg-slate-100"],
[class~="bg-gray-50"],
[class~="bg-gray-100"],
[class~="bg-stone-50"],
[class~="bg-amber-50"],
[class~="bg-red-50"],
[class~="bg-green-50"],
[class~="bg-blue-50"],
[class~="bg-blue-100"],
[class~="bg-green-100"],
[class~="bg-emerald-50"],
[class~="bg-[#FBF8F4]"],
[class~="bg-[#F5EFE7]"],
article[class~="bg-[#1A1A1A]"]:not(footer *),
div[class~="bg-[#1A1A1A]"]:not(footer *),
section[class~="bg-[#1A1A1A]"]:not(footer *),
a[class~="bg-[#1A1A1A]"]:not(footer *),
li[class~="bg-[#0A0A0A]"]:not(footer *),
section[class~="bg-black"]:not(footer *),
a[class*="bg-slate-800/"]:not(footer *),
.card-surf,
.city-card,
.city-link,
.service-card,
.google-card,
.trust-card,
.review-pill,
.idf-badge,
.av-carte,
.city-badge,
.ga-trait,
.glass-effect,
.google-badge,
.sav-codes,
.sav-note,
.schema-col,
.schema-couche,
.smoke-gradient,
.tar-acc,
.tar-duree,
.tar-fact,
.tar-legal,
.tar-note,
.trust-badge,
.snippet-box,
.warn-box,
.tip-box,
.art,
[style*="background:#fff" i],
[style*="background: #fff" i],
[style*="background:#FFF" i],
[style*="background-color:#fff" i],
[style*="background:#FFF7F7" i],
[style*="background:#FFFBEB" i],
[style*="background:#F8FAFC" i] {
    --c-encre:  #1C1917;
    --c-encre2: #57534E;
    --c-encre3: #6E6761;
    --c-rouge-clair: #E30613;
    --c-rouge-fonce: #E30613;
    --c-etoile: #8F6300;
    --c-vert:   #15803D;
    --c-bleu:   #1D4ED8;
    --c-orange: #C2410C;
}

/* LES CLASSES AMBIGUES SONT LAISSEES SANS DECLARATION.

   bg-[#0A0A0A], bg-[#1A1A1A] et bg-slate-900 rendent tantot sombre, tantot
   clair -- et pas seulement selon la balise : .dept-card est anthracite sur
   une page et transparent sur une autre. J'ai essaye de les trancher par le
   nom, par la balise, par le contexte ; chaque tentative laissait passer une
   poignee de cas.

   On ne les declare donc plus. Deux consequences, toutes deux bonnes : avec
   JavaScript, le bloc 30 les marque d'apres la couleur reelle et tranche
   juste a tous les coups ; sans JavaScript, elles heritent de la section qui
   les porte -- vrai dans la grande majorite des cas, et bien plus sur qu'une
   declaration fausse.

   Il n'y a pas de honte a ne pas trancher ce qu'on ne peut pas savoir. */

/* --------------------------------------------------------------------------
   27. LES VOILES QUE L'AUDIT A TROUVES TROP MINCES

   27.1  LES DIX-HUIT PAGES QUI POINTAIENT VERS UNSPLASH.
   On leur a rendu une photo locale, mais leur mise en scene d'origine
   comptait sur une image posee a 30 % d'opacite : leur degrade est donc
   TRANSPARENT en haut. Avec une vraie photo derriere, le haut du heros
   revenait a nu -- blanc sur pierre claire, 1,47 contre 1.

   Le calque distant, dont l'image est deja neutralisee, redevient utile : on
   en fait le voile qui manquait. Il est deja plein cadre et deja en place ;
   il ne reste qu'a lui donner une couleur et son opacite pleine. */
.tr-hero [class*="unsplash"] {
    background-image: none !important;
    background-color: rgba(14, 11, 8, .74) !important;
    opacity: 1 !important;
}

/* 27.2  LES HEROS DES PAGES D'ARTICLE.
   Leur voile maison ic-hero-ov montait a 88 % en haut et redescendait a 82 %
   au milieu. Sur un aplat sombre c'etait large ; sous une vraie photo de
   flambee, le rouge clair du titre tombait a 2,72. On le rapproche de celui
   des heros nus, mesure a 0,86 au milieu. */
.tr-hero .ic-hero-ov {
    background: linear-gradient(180deg,
                rgba(14, 11, 8, .90) 0%,
                rgba(14, 11, 8, .86) 55%,
                rgba(14, 11, 8, .94) 100%) !important;
}

/* 27.3  contact.html garde sa maquette sombre, volontairement : c'est la
   seule page du site batie ainsi, et elle est cohErente. Ses surfaces
   doivent donc etre declarees sombres, sans quoi le rouge de marque y tombe
   a 3,71. */
.contact-v3,
.contact-v3 .ri,
[class~="bg-[#161616]"],
[class~="bg-[#222222]"] {
    --c-encre:  #FFFFFF;
    --c-encre2: rgba(255, 255, 255, .82);
    --c-encre3: rgba(255, 255, 255, .70);
    --c-rouge-clair: #E30613;
    --c-rouge-fonce: #E30613;
    --c-etoile: #FACC15;
}
/* La page contact declare elle-meme .ri en #E30613, et sa feuille passe apres
   la mienne : sans !important le rouge de marque y reste a 3,71 sur son fond
   a rgb(22,22,22). C'est le seul endroit du site ou j'ai besoin de trancher
   ainsi -- la maquette contact est autonome et assume ses propres regles. */
.contact-v3 [class~="text-[#E30613]"]:not([class*="bg-"]),
.contact-v3 .ri { color: var(--c-rouge-clair) !important; }

/* --------------------------------------------------------------------------
   28. LE BOUTON BLANC DE L'ENCADRE ROUGE

   Un encadre .cta-box est rouge, et il porte un bouton BLANC a texte sombre --
   c'est le contraste voulu, et une regle anterieure le posait deja.

   Mon invariant 25 l'a casse. Il dit "tout ce qui vit dans un porteur sature
   prend du texte blanc", ce qui est vrai du texte courant mais faux d'un
   bouton qui a renverse les roles. Le bouton s'est retrouve blanc sur blanc :
   1,00 contre 1, invisible. Douze occurrences sur la seule page d'article de
   l'echantillon.

   La regle du bouton est donc redite ici, apres l'invariant, avec le meme
   poids et le dernier mot. Et .cta-box entre dans les surfaces saturees du
   bloc 26 pour que son texte courant herite des teintes claires sans qu'on
   ait a l'ecrire. */
.cta-box a.text-white,
section:not(.tr-hero) .cta-box a.text-white,
article:not(.tr-hero) .cta-box a.text-white {
    background: #FFFFFF !important;
    color: #0A0A0A !important;
}
.cta-box a.text-white {
    --c-encre:  #1C1917;
    --c-encre2: #57534E;
    --c-rouge-clair: #E30613;
    --c-etoile: #8F6300;
}

/* 28.2  Le pied de la page 404 : text-slate-400 sur slate-50, a 2,45. La
   page n'a pas de <section>, ses regles de zone claire ne l'atteignaient
   donc pas. */
body.min-h-screen [class~="text-slate-400"]:not(footer *),
body.min-h-screen [class~="text-slate-500"]:not(footer *),
[class~="bg-slate-50"] [class~="text-slate-400"]:not(footer *) { color: #475569; }

/* --------------------------------------------------------------------------
   29. LE ROUGE DE MARQUE SUR LES SURFACES SOMBRES

   Cette regle existait sous le numero 24.5, et ma reecriture du bloc 26 l'a
   emportee -- elle vivait entre 26 et 27, dans la zone que je remplacais. Je
   la remets ici, apres le bloc 26, ou elle est mieux a sa place : elle ne
   fait que nommer une variable que ce bloc a deja definie.

   La barre de navigation, le menu mobile, le heros et les voiles noirs
   gardent leur fond sombre : #E30613 y tombe a 3,40. Le rouge clair de la
   palette y passe a 5,88.

   Le garde :not([class*="bg-"]) protege les elements qui ont leur PROPRE fond
   clair -- le bouton blanc du pied de page en est un. */
.tr-hero [class~="text-[#E30613]"]:not([class*="bg-"]),
nav[class*="glass-nav"] [class~="text-[#E30613]"]:not([class*="bg-"]),
.glass-nav-noir [class~="text-[#E30613]"]:not([class*="bg-"]),
#mobile-menu [class~="text-[#E30613]"]:not([class*="bg-"]),
[class*="bg-black/"] [class~="text-[#E30613]"]:not([class*="bg-"]):not(footer *),
.contact-v3 [class~="text-[#E30613]"]:not([class*="bg-"]) {
    color: var(--c-rouge-clair);
}

/* --------------------------------------------------------------------------
   30. LA SURFACE MESUREE PAR LE NAVIGATEUR

   Ce bloc est le dernier mot sur les teintes, et il a la priorite sur tous
   les precedents -- pas par force mais par exactitude : il ne repose sur
   aucune supposition.

   POURQUOI IL EXISTE. Une meme balise portant une meme classe rend tantot
   sombre, tantot clair : section.bg-slate-900 est ivoire dans une page et
   reste anthracite dans une autre, parce que cette feuille en eclaircit
   certaines et pas toutes. J'ai classe ces surfaces cinq fois -- par nom de
   classe, par balise, par contexte -- et l'audit a ramene chaque fois une
   poignee de cas qui echappaient a la regle. Aucune regle statique ne peut
   etre juste ici.

   Le navigateur, lui, connait la couleur qu'il vient de calculer. Le script
   la lui demande au chargement et marque chaque element qui pose un fond :
   data-tr-surf="s" pour sombre, "c" pour clair, seuil a 0,20 de luminance.
   Les variables etant heritees, tout le sous-arbre suit sans une ligne de
   plus.

   Le selecteur est double -- [data-tr-surf="s"][data-tr-surf] -- pour peser
   (0,2,0) et passer devant les regles de classes ci-dessus, qui montent a
   (0,1,1). Sans JavaScript rien n'est marque, et ce sont ces regles-la qui
   s'appliquent : justes dans l'immense majorite des cas. C'est une precision
   supplementaire, pas une bequille.
   -------------------------------------------------------------------------- */
[data-tr-surf="s"][data-tr-surf]:not(footer *) {
    --c-encre:  #FFFFFF;
    --c-encre2: rgba(255, 255, 255, .82);
    --c-encre3: rgba(255, 255, 255, .70);
    --c-rouge-clair: #E30613;
    --c-rouge-fonce: #E30613;
    --c-etoile: #FACC15;
    --c-vert:   #22C55E;
    --c-bleu:   #3B82F6;
    --c-orange: #F97316;
}
[data-tr-surf="c"][data-tr-surf]:not(footer *) {
    --c-encre:  #1C1917;
    --c-encre2: #57534E;
    --c-encre3: #6E6761;
    --c-rouge-clair: #E30613;
    --c-rouge-fonce: #E30613;
    --c-etoile: #8F6300;
    --c-vert:   #15803D;
    --c-bleu:   #1D4ED8;
    --c-orange: #C2410C;
}

/* Le rouge de marque ecrit en dur dans le HTML suit la meme mesure : sur une
   surface sombre il passe au rouge clair, sur une claire au rouge fonce. Le
   garde protege les elements qui posent eux-memes un fond -- ils seront
   marques a leur tour, et c'est leur propre marque qui devra decider. */
[data-tr-surf="s"] [class~="text-[#E30613]"]:not([class*="bg-"]):not([data-tr-surf]):not(footer *),
[data-tr-surf="c"] [class~="text-[#E30613]"]:not([class*="bg-"]):not([data-tr-surf]):not(footer *),
/* Le cas ou l'element EST sa propre surface : une pastille sombre qui porte
   elle-meme text-[#E30613]. Le garde :not([data-tr-surf]) de la ligne
   au-dessus l'excluait justement, il faut donc le nommer a part. */
[data-tr-surf="s"][class~="text-[#E30613]"]:not([aria-label]):not(footer *),
[data-tr-surf="c"][class~="text-[#E30613]"]:not([aria-label]):not(footer *) {
    /* !important assume : la surface est MESUREE, pas supposee. Quand le
       navigateur dit que ce bloc est noir, le rouge de marque y est illisible
       a 3,23 et doit passer au ton clair, quelle que soit la regle qui
       l'avait pose. C'est le seul endroit de la feuille ou je m'autorise a
       passer devant une decision de page, et c'est parce que la mesure me
       donne raison. */
    color: var(--c-rouge-fonce) !important;
}

/* 30.2  Un element SANS aucune classe, pose dans une surface marquee, doit
   suivre la couleur de cette surface. C'est le cas des coches "✓" des
   pastilles de fumisterie : un <span> nu que la page peint en rouge de
   marque, sur un fond a rgb(26,26,26) -- 3,57. */
[data-tr-surf="s"] span:not([class]):not(footer *),
[data-tr-surf="s"] i:not([class]):not(footer *),
[data-tr-surf="s"] em:not([class]):not(footer *),
[data-tr-surf="s"] b:not([class]):not(footer *),
[data-tr-surf="c"] span:not([class]):not(footer *),
[data-tr-surf="c"] i:not([class]):not(footer *) {
    /* var(--c-encre) et NON inherit. J'avais ecrit inherit, et l'audit m'a
       repris aussitot : les chiffres "1" et "2" des pastilles de fumisterie
       heritaient alors de l'encre de leur section claire tout en etant poses
       sur un badge rouge -- 1,56. La variable, elle, suit la surface : blanc
       sur le badge rouge, encre sur une carte claire. */
    color: var(--c-encre) !important;
}

/* 30.3  Le rouge de marque tenu par un element qui porte AUSSI un fond.
   Le garde :not([class*="bg-"]) des regles ci-dessus l'excluait -- il servait
   a proteger le bouton blanc du pied de page, qui a son propre fond clair.
   Mais un bloc qui porte a la fois bg-[#0A0A0A] et text-[#E30613] est bien
   sombre, et son rouge doit s'eclaircir. La marque tranche : si la surface
   mesuree est sombre, le rouge s'eclaircit, fond propre ou non. */
[data-tr-surf="s"] [class~="text-[#E30613]"]:not([aria-label]):not(footer *),
[data-tr-surf="s"] [class~="text-[#E30613]"]:not([aria-label]) *:not(.lv-l):not(footer *) {
    color: var(--c-rouge-clair) !important;
}

/* --------------------------------------------------------------------------
   31. LE LOGOTYPE EST HORS DE TOUTE REGLE DE LISIBILITE

   Le client l'a vu immediatement : TERRIER RAMONAGE etait passe au rouge
   clair dans l'en-tete d'une page, et pas des autres. Une marque ne change
   pas de couleur selon la page -- c'est meme tout ce qu'on lui demande.

   La norme le dit aussi : WCAG 1.4.3 exempte nommement le texte qui fait
   partie d'un logo ou d'un nom de marque. Mes regles de rouge n'avaient donc
   rien a y faire, et leur !important passait en plus devant l'animation qui
   fait alterner les deux couleurs toutes les cinq secondes.

   On les en sort par deux gardes : :not([aria-label]) sur le bloc de marque,
   qui porte aria-label="Terrier Ramonage", et :not(.lv-l) sur les lettres
   que le script decoupe. Le logotype reprend alors son cycle, identique sur
   les 575 pages. */

/* 30.1  LA COULEUR DE BASE D'UNE SURFACE MARQUEE

   Un lien "Postuler" pose sur un bloc noir s'affichait en rouge fonce : il
   n'a aucune classe de couleur, il HERITE donc de sa section, qui est claire
   et dont le rouge est le ton fonce. Sa propre surface, elle, est noire.

   On donne donc a chaque surface marquee sa couleur de base -- ce qu'une
   surface devrait toujours faire. Les elements qui declarent eux-memes une
   teinte gardent la leur : la longue serie de :not() les met a l'abri, et
   elle enumere les prefixes de couleur de Tailwind plutot que de deviner. */
[data-tr-surf="s"][data-tr-surf]:not([class*="text-white"]):not([class*="text-black"]):not([class*="text-["]):not([class*="text-gray-"]):not([class*="text-slate-"]):not([class*="text-red-"]):not([class*="text-green-"]):not([class*="text-blue-"]):not([class*="text-yellow-"]):not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-orange-"]):not([class*="text-neutral-"]):not([class*="text-stone-"]):not([class*="text-zinc-"]):not([class*="text-sky-"]):not([class*="text-indigo-"]):not([class*="text-rose-"]):not([class*="text-lime-"]):not([class*="text-teal-"]):not(footer *),
[data-tr-surf="c"][data-tr-surf]:not([class*="text-white"]):not([class*="text-black"]):not([class*="text-["]):not([class*="text-gray-"]):not([class*="text-slate-"]):not([class*="text-red-"]):not([class*="text-green-"]):not([class*="text-blue-"]):not([class*="text-yellow-"]):not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-orange-"]):not([class*="text-neutral-"]):not([class*="text-stone-"]):not([class*="text-zinc-"]):not([class*="text-sky-"]):not([class*="text-indigo-"]):not([class*="text-rose-"]):not([class*="text-lime-"]):not([class*="text-teal-"]):not(footer *) {
    color: var(--c-encre);
}

/* 31.1  LES SURTITRES DE HEROS EN 10 A 12 PX.
   Le rouge clair de la palette tient 5,88 sur le noir du heros, mais retombe
   a 4,27 la ou la photo est la plus claire sous le voile -- mesure sur le
   surtitre de la page prestations, en 10 px. Un cran plus clair le remonte a
   5,16 sans toucher au grand titre, qui garde le rouge de la marque. */
.tr-hero [class~="text-[#E30613]"][class~="text-[10px]"],
.tr-hero [class~="text-[#E30613]"][class~="text-[11px]"],
.tr-hero [class~="text-[#E30613]"][class~="text-xs"],
[data-tr-surf="s"] [class~="text-[#E30613]"][class~="text-[10px]"]:not(footer *),
[data-tr-surf="s"] [class~="text-[#E30613]"][class~="text-xs"]:not(footer *) {
    color: #FF7A84 !important;
}

/* --------------------------------------------------------------------------
   32. LA FORMULE RECOMMANDEE DES PAGES GRANULES

   Demande du client : promouvoir l'entretien complet, qui doit sauter aux
   yeux et venir EN PREMIER sur telephone -- ou les deux cartes s'empilent et
   ou il arrivait second, sous le ramonage simple.

   325 pages portent cette carte, reconnaissable a un jeu de classes qui
   n'appartient qu'a elle : article + rounded-2xl + border-4 + le rouge de
   marque. Les neuf autres border-4 rouges du site sont des cadres photo, en
   div et en rounded-lg : ils ne sont pas touches.

   L'ORDRE EST DESORMAIS DANS LE DOCUMENT, ET PLUS ICI. J'avais d'abord posé
   order:-1 sur la carte recommandee : une ligne, aucun HTML touche, et le
   telephone affichait l'entretien complet en premier. Le client a ensuite
   demande la meme chose sur grand ecran -- "mets a gauche l'entretien complet
   pour que le client le voie en premier".

   A ce moment la regle CSS devenait le mauvais outil. order ne deplace que ce
   que l'oeil voit : la tabulation au clavier atteignait toujours le ramonage
   simple d'abord, un lecteur d'ecran l'annoncait d'abord, et Google lisait
   toujours le document dans son ordre d'origine. Pour une comparaison de prix
   dont l'enjeu est justement l'ordre de lecture, c'est la sequence trompeuse
   que la regle WCAG 1.3.2 nomme explicitement.

   Les deux cartes ont donc ete interverties DANS LE HTML des 243 pages
   concernees -- une permutation pure, controlee au caractere pres. L'oeil, le
   clavier, la synthese vocale et le moteur voient maintenant la meme chose,
   et cette regle n'a plus d'objet. */

/* LE CADRE QUI TAPE A L'OEIL. Le bord rouge de 4 px existait deja, mais cette
   feuille eclaircit la carte : sur du blanc, un filet fin se voit beaucoup
   moins que sur le noir d'origine. On l'epaissit et on lui ajoute un halo,
   qui detache la carte de sa voisine sans rien changer a sa mise en page --
   le halo est une ombre, il ne prend pas de place. */
article[class~="rounded-2xl"][class~="border-4"][class~="border-[#E30613]"] {
    border-width: 5px !important;
    border-color: #E30613 !important;
    box-shadow: 0 0 0 5px rgba(227, 6, 19, .12),
                0 22px 44px -20px rgba(227, 6, 19, .55),
                0 6px 18px -12px rgba(0, 0, 0, .30) !important;
}
@media (min-width: 768px) {
    /* Sur large, la carte recommandee se detache aussi par un leger relief. */
    article[class~="rounded-2xl"][class~="border-4"][class~="border-[#E30613]"] {
        transform: translateY(-6px);
    }
}
/* La pastille "Recommande" gagne le meme halo, pour lire comme une etiquette
   posee sur le cadre et non comme un element flottant. */
article[class~="rounded-2xl"][class~="border-4"][class~="border-[#E30613]"]
[class~="bg-[#E30613]"][class~="rounded-full"]:not(footer *) {
    box-shadow: 0 0 0 4px rgba(227, 6, 19, .14),
                0 8px 18px -8px rgba(227, 6, 19, .6) !important;
}

/* --------------------------------------------------------------------------
   33. LE PIED DE PAGE EST HORS DE CETTE FEUILLE

   J'ai d'abord eclairci son rouge, puis je l'ai remis, puis j'ai epingle ses
   variables -- trois passes, et a chaque fois il s'ecartait un peu plus de
   celui de l'accueil. Ma derniere regle a meme peint ses liens en rouge
   fixe : [class*="text-[#E30613]"] attrape aussi hover:text-[#E30613].

   Le client a pose la bonne question : pourquoi le pied ne serait-il pas
   simplement le meme partout ? C'est un composant partage, identique dans
   les 575 fichiers et deja coherent avec lui-meme. Le faire entrer dans le
   modele clair/sombre de cette feuille n'apportait rien et creait 31 ecarts
   sur 43 elements -- releve fait en comparant l'accueil a une page ville.

   On l'en sort donc entierement : le script ne le marque plus, et plus
   aucune regle d'ici ne le nomme. Il s'affiche exactement comme sur
   l'accueil, sur les 575 pages.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   34. LE PIED DE PAGE N'A PLUS BESOIN DE RIEN ICI

   J'ai d'abord rattrape en CSS l'ecart entre le pied de l'accueil et celui
   des autres pages : six regles, puis des !important, puis des :not() pour
   passer devant mes propres regles. Chaque passe reduisait l'ecart sans le
   fermer.

   La cause etait ailleurs. Le pied de l'accueil avait ete mis a jour --
   text-slate-500 au lieu de text-gray-400, et des text-white redondants
   retires -- et les 574 autres pages etaient restees sur la version
   precedente du composant. Les deux pieds ont la meme structure, 63
   attributs class chacun, dont six differaient.

   Ces six-la ont ete corriges dans le HTML, la ou etait le probleme. Il ne
   reste donc rien a compenser ici, et c'est tant mieux : un composant
   partage doit etre identique dans les fichiers, pas rendu identique par
   une feuille.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   35. LE MENU DE L'EN-TETE, A PARTIR DE 1280 PX

   LA DEMANDE : "pour la coherence augmente egalement la dimension des phrases
   ACCUEIL, NOS PRESTATIONS etc. sur toutes les pages."

   LA MESURE DIT OU C'EST POSSIBLE, et la reponse n'est pas "partout". La barre
   est en justify-between, ses trois blocs se touchent :

       1024 px   barre 945 px   logo 182 + menu 531 + boutons 232 = 945   marge 0
       1152 px   barre 1073     logo 220 + menu 531 + boutons 267        marge 55
       1280 px   barre 1201     logo 220 + menu 531 + boutons 267        marge 183

   A 1024 il ne reste RIEN. Passer le menu a 14 px lui coute 89 px : la barre
   deborderait. A 1152 il reste 55 px, ce n'est pas assez non plus.

   ET LE LOGOTYPE N'A PAS UNE LARGEUR FIXE : sa baseline nomme la commune.
   "Specialiste Granules Saint-Germain-les-Arpajon" fait 46 caracteres et pousse
   le bloc de gauche a 349 px au lieu de 220. Sur CETTE page, a 1280 px, il ne
   reste que 53 px. C'est elle qui fixe la limite, pas la moyenne.

   Mesure sur cette page la, taille par taille, espacement compris :

       13   px + 22 px d'espacement   ->  47 px de marge
       13,5 px + 22 px                ->  29 px
       14   px + 22 px                ->  11 px, et la baseline commence a etre
                                            comprimee : trop court.

   On retient 13,5 px avec un espacement ramene de 32 a 22 px, a partir de
   1280 px. Le libelle gagne 12 %, la page la plus serree du site garde 29 px
   de jeu, et en dessous de 1280 px rien ne change -- donc aucune regression
   la ou il n'y avait deja plus un pixel.
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
    nav [class~="space-x-8"][class~="uppercase"] { font-size: 13.5px; }
    /* Tailwind pose l'espacement en (0,3,0) sur ce meme motif : on repasse
       devant avec le meme selecteur prefixe de nav. */
    nav [class~="space-x-8"][class~="uppercase"] > :not([hidden]) ~ :not([hidden]) {
        margin-left: 22px;
    }
}


/* --------------------------------------------------------------------------
   36. LE TITRE DES PAGES PRESTATIONS

   LA DEMANDE, capture a l'appui : "change toutes les polices de titre des
   pages prestations par une police comme la 2e capture, c'est magnifique --
   elle se trouve sur ramonage-entretien-difference.html".

   LA POLICE EST LA MEME. Les deux pages sont en Inter 900. Ce qui fait la
   difference, et que j'ai mesure avant de repondre, tient en trois points du
   gabarit des pages articles :

       font-size : clamp(1.75rem, 5.2vw, 3.2rem)   -- fluide, 28 a 51 px
       line-height : 1.02                          -- les lignes se touchent
       text-wrap : balance                         -- les lignes s'egalisent
       .hero-legible                               -- trois ombres portees

   C'est l'ombre qui donne la nettete sur la photo, et l'equilibrage qui donne
   le bloc bien pose. Les pages prestations n'avaient ni l'une ni l'autre.

   CE QU'ON NE FAIT PAS. Le gabarit article met ses deux lignes a la MEME
   taille. Le titre des prestations est en deux temps voulus : le service en
   36 px, puis le departement en 72 px, qui est l'accroche geographique de la
   page. Le client, a qui j'ai pose la question, a tranche pour garder cette
   hierarchie. Le service monte donc a 44 px -- assez pour peser, pas assez
   pour concurrencer le departement -- et le departement ne bouge pas.
   -------------------------------------------------------------------------- */
.tr-hero h1 {
    /* les trois ombres du gabarit article, a l'identique */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .95),
                 0 2px 8px rgba(0, 0, 0, .88),
                 0 0 22px rgba(0, 0, 0, .65);
    text-wrap: balance;
}
/* La ligne du service : de 36 px fixes a une taille fluide qui plafonne a
   44 px. Le selecteur vise la classe du plus grand cran declare par la page,
   ce qui laisse de cote les titres batis autrement. */
.tr-hero h1 [class~="lg:text-4xl"] {
    /* 3,95vw et non 3,5 : en dessous, le titre RETRECISSAIT entre 640 et
       1030 px par rapport aux crans Tailwind qu'il remplace. Mesure faite
       aux quatre points de rupture, cette valeur ne descend sous aucun. */
    font-size: clamp(1.5rem, 3.95vw, 2.75rem);
    line-height: 1.06;
}


/* --------------------------------------------------------------------------
   37. LE CADRE DU DIAPORAMA, EN APPAREIL

   LA DEMANDE : "l'encadrement de l'image qui defile, change l'encadrement pour
   un telephone ou une tablette. Pour l'instant uniquement sur la page pilier
   cheminee et poeles, avant d'appliquer sur toutes les pages."

   ESSAI SUR UNE PAGE, ET UNE SEULE. Les 155 pages qui portent .hero-media ont
   toutes le meme balisage : aucune ne se distingue par son <body>. On pose
   donc une classe dediee, .hero-appareil, sur la seule page cheminee. Etendre
   aux 154 autres ne demandera qu'un passage de script -- et revenir en
   arriere, qu'un retrait de classe.

   POURQUOI UNE TABLETTE ET NON UN TELEPHONE. Le cadre fait 600 px de haut pour
   un tiers de la largeur du heros, soit un rapport proche de 3/4 ; un chassis
   de telephone, deux fois plus haut que large, demanderait de changer les
   proportions du heros. La tablette epouse le cadre existant.

   LE DETAIL DE L'OBJECTIF EST PEINT PAR LE FOND. Un enfant ne peut pas
   dessiner dans la bordure -- overflow:hidden le rogne a la boite de
   remplissage. Mais le FOND, lui, se peint jusqu'au bord exterieur : avec
   background-origin: border-box, le degrade radial se pose dans le chassis
   lui-meme. Pas un element de plus dans la page.
   -------------------------------------------------------------------------- */
.tr-hero .hero-appareil {
    /* Toutes les pages n'ecrivent pas overflow-hidden dans leur balisage :
       sans lui, les coins de la photo depassent du chassis arrondi. On le
       pose ici pour les 155 pages d'un coup. */
    overflow: hidden;
    border-style: solid !important;
    border-width: 11px !important;
    border-color: #15171C !important;
    border-radius: 30px !important;
    /* l'objectif, puis le chassis */
    background-image: radial-gradient(circle 2.5px at 50% 5.5px,
                      #4A505C 0 100%, transparent 100%);
    background-repeat: no-repeat;
    background-origin: border-box;
    background-color: #15171C;
    box-shadow: 0 0 0 1.5px #3A404B,                  /* la tranche */
                0 0 0 3px rgba(255, 255, 255, .07),   /* le reflet du bord */
                0 26px 58px -22px rgba(0, 0, 0, .88),
                0 10px 24px -14px rgba(0, 0, 0, .55) !important;
}
/* L'APPAREIL GRANDIT, LA OU LA RANGEE LE PERMET.

   "La tablette agrandi et applique-le sur les autres pages hub et villes."

   LA MESURE DIT QUE LES DEUX CAS SONT DIFFERENTS. Sur la page pilier le
   visuel est en lg:w-1/3 : 396 px pour une rangee de 1233, gouttiere de 48,
   et le texte occupe les 789 restants -- il ne reste RIEN. Sur les pages
   villes il est en lg:w-1/2 et mesure deja 585 px : celui-la n'a pas besoin
   de grandir.

   On elargit donc le seul cas etroit, en prenant sur le bloc de texte : 36 %
   de la rangee, plafonnes a 470 px. A 1280 px le cadre passe de 396 a 444 et
   le texte de 789 a 741, ce qui lui laisse de quoi tenir son titre sur deux
   lignes -- verifie. En dessous de 1024 px la rangee passe en colonne et la
   question ne se pose plus.

   LA HAUTEUR MONTE POUR TOUT LE MONDE, de 600 a 660 px : elle ne coute aucune
   largeur, et c'est le seul levier qui profite aux 155 pages sans risque. */
@media (min-width: 1024px) {
    .tr-hero .hero-appareil { height: 660px; }
    .tr-hero .hero-appareil[class~="lg:w-1/3"] {
        width: clamp(340px, 36%, 470px);
        flex: 0 0 auto;
    }
}

@media (max-width: 639px) {
    /* sur telephone le cadre prend toute la largeur : un chassis plus fin et
       un rayon plus court, sinon l'appareil mange la photo. */
    .tr-hero .hero-appareil {
        border-width: 8px !important;
        border-radius: 24px !important;
        background-image: radial-gradient(circle 2px at 50% 4px,
                          #4A505C 0 100%, transparent 100%);
    }
}


/* --------------------------------------------------------------------------
   38. LA FAQ SUR DEUX COLONNES, COMME L'ACCUEIL

   LE CLIENT ME L'AVAIT DEJA DEMANDE : "je t'avais pas deja dit, pour les
   placements des FAQ on fait comme pour l'index ?" Il a raison. Mon bloc 12
   n'avait traite que l'ALLURE des accordeons -- angles, survol, ombre -- et
   pas leur MISE EN PAGE. La difference se mesure : la FAQ de l'accueil
   s'etale sur 1180 px, celle des pages piliers reste dans 896 px, avec du
   vide de chaque cote et une colonne de questions deux fois plus haute.

   ON REPREND LES VALEURS DE L'ACCUEIL, sans les reinventer : seuil a 900 px,
   conteneur a 1180 px, deux colonnes egales, gouttiere de 1 rem, et
   align-items:start pour qu'ouvrir une question n'etire pas sa voisine.

   MAIS PAS SON SELECTEUR. L'accueil vise section.bg-slate-50 > div.max-w-4xl,
   ce qui suffit chez lui. Sur le reste du site ce serait faux : 190 pages
   portent un conteneur space-y-4 qui ne contient AUCUN accordeon -- des
   listes de puces, des blocs d'etapes -- et les passer en grille casserait
   leur lecture. On ancre donc sur ce qui compte vraiment : la presence
   d'accordeons enfants directs, que :has() sait exprimer.

   :has() n'est pas un pari : s'il manquait, la regle entiere serait ignoree
   et la FAQ resterait sur une colonne. La degradation ne casse rien.

   space-y-4 pose une marge haute sur tous les freres sauf le premier ; dans
   une grille elle decalerait une colonne sur deux. On la remet a zero.

   LA DERNIERE QUESTION S'ETEND SUR TOUTE LA LARGEUR, mais seulement quand
   elle est impaire -- sinon elle laisserait un trou a sa droite. L'accueil
   l'etend sans condition parce qu'il en a neuf ; ici le nombre varie d'une
   page a l'autre. nth-of-type(odd) dit exactement cela.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
    section:not(.tr-hero) [class*="max-w-"]:has(> [class~="space-y-4"] > details) {
        max-width: 1180px;
    }
    section:not(.tr-hero) [class~="space-y-4"]:has(> details) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        align-items: start;
    }
    section:not(.tr-hero) [class~="space-y-4"]:has(> details) > * {
        margin-top: 0 !important;
    }
    section:not(.tr-hero) [class~="space-y-4"]:has(> details) > details:last-of-type:nth-of-type(odd),
    section:not(.tr-hero) [class~="space-y-4"]:has(> details) > :not(details) {
        grid-column: 1 / -1;
    }
}

/* --------------------------------------------------------------------------
   39. LE LOGOTYPE DE L'EN-TETE, A PARTIR DE 1280 PX

   LA DEMANDE : "pour la coherence du header, augmente egalement la dimension
   de ce que j'ai entoure -- c'est le seul truc qu'on n'a pas agrandi encore."

   LE BLOC DE GAUCHE EST FAIT DE TROIS CHOSES : l'icone du ramoneur, le
   mot-symbole TERRIER RAMONAGE en 18 px, et la baseline en 9 px qui nomme la
   commune. Sa LARGEUR est dictee par la plus large des deux lignes de texte,
   et sur les pages ville c'est toujours la baseline : "Specialiste Granules
   Saint-Germain-les-Arpajon" fait 46 caracteres.

   MESURE SUR CETTE PAGE-LA, a 1280 px, marge de la barre :

       etat actuel                        29 px
       mot-symbole a 21 px                29 px   -- gratuit
       + icone a 72 px                    24 px
       + baseline a 10 px                  0 px   <<<
       + baseline 10 et menu resserre     14 px

   LE MOT-SYMBOLE NE COUTE RIEN parce qu'a 21 px il mesure encore moins que
   la baseline : la largeur du bloc ne bouge pas d'un pixel. L'icone coute
   6 px, ce qui reste confortable. La BASELINE, elle, ramene la marge a zero
   sur la page la plus serree du site -- on n'y touche pas. C'est un intitule
   de 9 px sous un logotype ; ce n'est pas ce que l'oeil vient chercher.
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
    nav .logo-vivant span[class~="font-black"] { font-size: 21px; }
    nav .logo-vivant img { height: 72px; }
}

/* --------------------------------------------------------------------------
   40. LA PAGE CHAUDIERE A GRANULES

   Le client y veut la photo du technicien ramonant un conduit inox en
   chaufferie. Son heros pose deja un calque photo, mais a opacity-30 ET en
   mix-blend-overlay : superpose a un fond sombre, ce melange eteint l'image
   une seconde fois, et il n'en restait que 6 % -- changer l'URL sans toucher
   a cela n'aurait rien montre du tout.

   ON LUI REND SA PLEINE FORCE, et on donne au voile qui suit le dessin
   standard du site. C'est necessaire : le voile de cette page finit en
   to-transparent, donc transparent EN HAUT, la ou vit le titre. C'est
   exactement l'erreur que j'ai commise sur la page syndics ; ici la photo est
   demandee, alors on corrige le voile en meme temps au lieu de decouvrir le
   probleme apres coup.

   mix-blend-overlay n'existe que sur cette page : le selecteur ne peut pas
   deborder ailleurs. */
.tr-hero > [class~="mix-blend-overlay"] {
    opacity: 1;
    mix-blend-mode: normal;
}
@media (max-width: 767px) {
    /* la photo est posee en style en ligne, une seule URL pour tous les
       ecrans : sur telephone on lui substitue la variante 640w, qui pese
       23 Ko au lieu de 44. */
    .tr-hero > [class~="mix-blend-overlay"] {
        background-image: url("../../images2/hero-chaufferie-inox-640w.webp") !important;
    }
}
.tr-hero > [class~="mix-blend-overlay"] + [class~="inset-0"] {
    background: linear-gradient(180deg,
                rgba(14, 11, 8, .86) 0%,
                rgba(14, 11, 8, .80) 55%,
                rgba(14, 11, 8, .92) 100%) !important;
}
@media (min-width: 1024px) {
    .tr-hero > [class~="mix-blend-overlay"] + [class~="inset-0"] {
        background: linear-gradient(100deg,
                    rgba(14, 11, 8, .92) 0%,
                    rgba(14, 11, 8, .87) 42%,
                    rgba(14, 11, 8, .81) 74%,
                    rgba(14, 11, 8, .78) 100%) !important;
    }
}

/* --------------------------------------------------------------------------
   41. LE FOND DE LA PAGE CONTACT

   Le client : "laisse l'image de fond du heros, mais en dessous c'est tout
   noir -- mets plutot une image de fond." Mesure : .contact-v3 fait 1 405 px
   de #0A0A0A plat, sans image.

   On y pose le ramoneur sur les toits de Paris, sous un voile de 90 a 97 % :
   la photo ne passe qu'a 3-10 %. Elle donne de la matiere la ou il n'y avait
   qu'un aplat, et ne touche a aucun texte -- les panneaux poses dessus sont
   opaques. C'est le registre que le client avait lui-meme decrit : "discret,
   en rapport avec la page, et qui ne touche pas a la visibilite des textes".
   -------------------------------------------------------------------------- */
.contact-v3 {
    background-image:
        linear-gradient(180deg,
            rgba(10, 10, 10, .90) 0%,
            rgba(10, 10, 10, .94) 45%,
            rgba(10, 10, 10, .97) 100%),
        url("../../images2/mitron-1024w.webp");
    background-size: cover;
    background-position: center 18%;
    background-repeat: no-repeat;
}
@media (min-width: 1024px) {
    /* l'attache fixe donne la profondeur au defilement. Elle reste hors du
       telephone, ou elle saccade sur plusieurs navigateurs. */
    .contact-v3 { background-attachment: fixed; }
}
@media (max-width: 767px) {
    .contact-v3 {
        background-image:
            linear-gradient(180deg,
                rgba(10, 10, 10, .90) 0%,
                rgba(10, 10, 10, .94) 45%,
                rgba(10, 10, 10, .97) 100%),
            url("../../images2/mitron-640w.webp");
    }
}
/* --------------------------------------------------------------------------
   42. LE BOUTON D'APPEL QUI DEBORDAIT DE SON CADRE

   Le client, capture a l'appui : "ca depasse, remets le bouton en place." Sur
   la page chaudiere fioul, en telephone, le bouton rouge
   "PRENDRE RENDEZ-VOUS : 01 60 28 41 82" sortait de 46 px hors du cadre borde
   qui le contient.

   LA CAUSE, ET ELLE EST A TROIS ETAGES.
     - a[href^="tel:"] porte white-space: nowrap. L'intention est bonne : un
       numero de telephone ne doit jamais se couper en deux. Mais ici tout le
       libelle est DANS le lien, donc plus rien ne peut passer a la ligne.
     - px-8 ajoute 64 px de marge interne au bouton.
     - le cadre lui-meme porte p-8, soit 64 px de plus retires de la largeur
       disponible. Mesure a 375 px : bouton 355 px pour 275 px disponibles.

   POURQUOI PAS SIMPLEMENT LAISSER LE TEXTE REVENIR A LA LIGNE. Je l'ai
   essaye : le retour tombe AU MILIEU DU NUMERO ("...01 60 28" / "41 82").
   C'est precisement ce que le nowrap existe pour empecher, et un numero
   coupe en deux est pire qu'un bouton trop large.

   LA CORRECTION rend de la largeur des deux cotes -- le cadre passe a 1 rem,
   le bouton a 0,75 rem -- et laisse la taille de police suivre la largeur de
   l'ecran, comme le faisait deja la regle mobile des liens telephoniques.
   Mesures apres correction :
       375 px : bouton 274 pour 307 disponibles, 33 px de marge
       320 px : bouton 237 pour 252 disponibles, 15 px de marge
   Le numero reste sur une seule ligne aux deux largeurs.

   :has() cible le cadre par ce qu'il CONTIENT, ce qui evite de toucher aux
   autres blocs en p-8 du site.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    section [class~="p-8"]:has(> a[href^="tel:"]),
    article [class~="p-8"]:has(> a[href^="tel:"]) {
        padding: 1rem !important;
    }
    /* LE BOUTON N'EST VISE QUE DANS CE CADRE-LA. Ecrite sans cette
       ascendance, la regle rabotait les 165 pages du site qui portent un
       bouton telephonique en px-8 -- dont 148 avec un libelle court
       ("Obtenir un devis") qui n'a jamais deborde de rien. Corriger une page
       en en modifiant 164 autres n'est pas une correction. */
    section [class~="p-8"]:has(> a[href^="tel:"]) > a[href^="tel:"][class~="px-8"],
    article [class~="p-8"]:has(> a[href^="tel:"]) > a[href^="tel:"][class~="px-8"] {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
        letter-spacing: 0 !important;
        font-size: min(1em, 3.15vw) !important;
    }
}
/* --------------------------------------------------------------------------
   43. LA PAGE NE DOIT PAS ETRE PLUS LARGE QUE L'ECRAN

   Le client : "sur mobile, quand je descends avec mon doigt, ca bouge dans
   tous les sens, on dirait que la page est large." Il a raison, et c'est
   mesurable : sur service-test-etancheite.html, l'ecran fait 375 px et le
   document 434. Une page plus large que l'ecran se decale lateralement au
   moindre glissement du pouce -- le site donne l'impression d'etre casse
   alors que seuls deux elements depassent.

   POURQUOI overflow-x-hidden SUR LE BODY NE SUFFISAIT PAS. Les 575 pages le
   portent deja, et il s'applique bien : le calcul donne "hidden". Mais les
   navigateurs mobiles ne s'y tiennent pas de facon fiable pour le
   deplacement au doigt, et la propagation depuis le body vers la fenetre est
   un mecanisme fragile. Il faut le dire a la racine.

   POURQUOI clip ET NON hidden. hidden fabrique un conteneur de defilement, ce
   qui casserait tout position:sticky place a l'interieur. clip coupe sans
   creer ce conteneur. Ecrit seul, sans repli en hidden : les navigateurs qui
   ignorent clip gardent le comportement d'aujourd'hui -- aucune regression
   pour eux, un gain pour les autres. Les conteneurs a defilement horizontal
   voulu (5 pages) gardent le leur, qui est interne.
   -------------------------------------------------------------------------- */
html { overflow-x: clip; }

/* --------------------------------------------------------------------------
   43.2  LES BOUTONS INSECABLES QUI NE TIENNENT PAS DANS L'ECRAN

   whitespace-nowrap est pose sur plusieurs boutons du site. Sur un numero de
   telephone c'est indispensable -- un numero coupe en deux est illisible. Sur
   un libelle ordinaire ("Diagnostic par camera video", 390 px de large pour
   un ecran de 375), c'est ce qui fait deborder la page.

   On rend donc le retour a la ligne aux seuls boutons qui ne portent PAS de
   numero. Rien ne bouge pour ceux qui tiennent deja : white-space:normal ne
   fait passer a la ligne que ce qui ne rentre pas. Mesure sur le bouton
   fautif : 390 px sur une ligne, 291 px sur deux.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    a[class~="whitespace-nowrap"]:not([href^="tel:"]),
    button[class~="whitespace-nowrap"] {
        white-space: normal !important;
        max-width: 100%;
    }
}
/* --------------------------------------------------------------------------
   44. UNE PASTILLE NE DOIT PAS SE COUPER EN DEUX

   Le client, capture a l'appui : sur la page chaudiere granules en telephone,
   la pastille "NOUS NE FAISONS PAS CETTE PARTIE" s'affichait en DEUX
   rectangles noirs disjoints, et ses marges internes ne tenaient qu'aux deux
   extremites.

   LA CAUSE. Ces pastilles sont des <span> laisses en display:inline. Un
   element en ligne dont le texte passe a la ligne engendre deux boites de
   fragment : le fond se dedouble, le padding horizontal ne s'applique qu'au
   debut de la premiere et a la fin de la derniere. C'est le comportement
   normal de l'inline, pas un bogue du navigateur -- mais ce n'est pas ce
   qu'une pastille doit faire.

   POURQUOI UNE REGLE ET NON DEUX RETOUCHES. Le site compte 920 <span> batis
   sur ce meme motif -- fond + marge horizontale + coins arrondis -- sur des
   dizaines de pages. Deux n'allaient pas parce que leur texte est long ;
   les 918 autres tiennent aujourd'hui sur une ligne et casseraient de la meme
   facon sur un ecran plus etroit ou avec un texte plus long. On traite la
   cause.

   inline-block conserve le flux en ligne mais fabrique UNE seule boite : le
   fond reste d'un tenant, les marges s'appliquent aux quatre cotes, et le
   texte revient a la ligne A L'INTERIEUR de la pastille. Les elements deja
   declares inline-flex, block ou positionnes sont exclus : ils ont deja leur
   propre boite.
   -------------------------------------------------------------------------- */
span[class*="bg-"][class*="px-"][class*="rounded"]:not([class*="inline-"]):not([class*="flex"]):not([class*="block"]):not([class*="absolute"]):not([class*="fixed"]) {
    display: inline-block;
    max-width: 100%;
}
/* --------------------------------------------------------------------------
   45. LA SIGNATURE TERRIER RAMONAGE, IDENTIQUE EN HAUT ET EN BAS

   Le client : "sur le header, TERRIER est plus gros que RAMONAGE, c'est notre
   signature ; applique-le sur le footer de toutes les pages."

   CE QUE LA MESURE A MONTRE, ET QUI NUANCE LA DEMANDE. Le rapport entre les
   deux mots etait DEJA le meme des deux cotes : la regle
   span.font-black.tracking-tighter.uppercase > span.text-white pose RAMONAGE
   a .86em de TERRIER, dans l'en-tete comme dans le pied. Ce qui differait,
   c'est la taille absolue : au-dela de 1280 px, une regle donne 21 px au
   logotype de l'en-tete, tandis que le pied restait a 18 px (le text-lg de
   Tailwind). Le logotype du bas paraissait donc plus petit et plus plat,
   sans que le rapport entre les deux mots soit en cause.

   DEUX CORRECTIONS, DONC.
     - Le pied recoit le meme grandissement que l'en-tete au-dela de 1280 px.
       Meme signature, meme echelle, en haut comme en bas.
     - Le rapport passe de .86 a .80. A .86 l'ecart se devine plus qu'il ne se
       lit, surtout en capitales grasses ou toutes les lettres ont la meme
       hauteur ; a .80 la hierarchie entre le nom et le metier se voit
       franchement. Le changement porte sur les DEUX logotypes : une signature
       qui differe selon l'endroit n'en est plus une.
   -------------------------------------------------------------------------- */
span.font-black.tracking-tighter.uppercase > span.text-white {
    font-size: .80em;
    letter-spacing: -.01em;
}
@media (min-width: 1280px) {
    footer span[class~="font-black"][class~="tracking-tighter"][class~="uppercase"] {
        font-size: 21px;
    }
}

/* 45.2  LE RAMONEUR DU PIED DE PAGE ETAIT TROP PETIT

   Le client : "agrandis le logo qui est entoure, il est tout petit."
   Mesure : l'en-tete porte h-12 lg:h-16, soit 48 px qui passent a 64 sur
   grand ecran ; le pied restait fige a 48. A cote d'un logotype dont les
   capitales font 29 px de haut, le personnage paraissait ecrase.

   Il passe a 64 px, puis 80 au-dela de 1024 : legerement plus grand que
   celui de l'en-tete, ce qui se justifie -- le pied est plus aere, et c'est
   le dernier endroit ou la marque se signe. */
footer a[href="index.html"] img { height: 4rem; }
@media (min-width: 1024px) {
    footer a[href="index.html"] img { height: 5rem; }
}