/* ========================================================================== VÉLO SHOP OBERNAI — prod-clair.css — 18/08/2026 « je veux toute la page d'accueil en fond clair mnt stp » — Maxime, ce jour. Ce fichier fait passer TOUTE la page d'accueil en clair : l'ouverture, la galerie du showroom, la route, les guides, la location, les pièces, la carte de France et le pied de page. Les quatre sections déjà claires (showroom hors galerie, magasin, marques, preuve) ne sont pas touchées. C'est une feuille de SURCHARGE : à charger en DERNIER, après vsx.css, prod.css, prod-v3.css, showroom-v5.css et hf.css. Elle ne repose que les couleurs — fonds, textes, lisérés, ombres. Grilles, espacements, tailles de police : rien ne bouge. Un changement de lumière, pas une refonte. POUR REVENIR EN ARRIÈRE : ne plus charger CE fichier. La page redevient sombre à l'identique, sans rien restaurer. POURQUOI CERTAINES CLASSES SONT ÉCRITES EN DOUBLE (.vrg.vrg, .gv2.gv2) Plusieurs sections portent leurs couleurs à l'intérieur même de leur bloc HTML, qui passe après les feuilles de style. Doubler la classe fait peser la règle plus lourd, sans « !important » : c'est le seul moyen propre de gagner quel que soit l'ordre de chargement. Pour le showroom, le bloc utilise déjà des « !important » : on répond avec la même arme et le préfixe « html », exactement comme le fait showroom-v5.css aujourd'hui. LE RYTHME DES FONDS — pour que dix sections claires ne fassent pas un couloir d'hôpital, trois tons de la même famille alternent : 1 ouverture vidéo sous voile d'encre — LA SEULE ZONE SOMBRE 2 showroom crème #f4f1e7 (existant) — la galerie passe en clair ici 3 route crème soutenu #ece7d8 (grande traversée) 4 magasin blanc cassé #fdfcf9 — FUSIONNÉE le 19/08 avec la carte de France, elle porte désormais ses propres couleurs 5 guides crème #f4f1e7 6 location blanc cassé #fdfcf9 7 pièces crème #f4f1e7 8 marques blanc cassé #fdfcf9 (existant, pas touché) 9 rappel crème soutenu #ece7d8 — bandeau mince de 90 px, ce qui reste de la carte de France 10 preuve crème #f4f1e7 (existant, pas touché) — pied crème soutenu #ece7d8 (repris de prod-pied-clair.css) Aucune section n'a le même fond que sa voisine. LES COULEURS DE TEXTE, TOUTES MESURÉES (règle WCAG, minimum 4,5:1) : · encre #16140f : 14,9 à 17,9:1 selon le mur — le texte courant ; · doré lisible #7a5c05 : 5,1:1 sur #ece7d8, 5,5:1 sur crème, 6,1:1 sur blanc cassé, 6,3:1 sur blanc — le SEUL accent doré autorisé en texte ; · l'ambre foncé #a9810a mesure 2,9 à 3,6:1 : jamais en texte, seulement en liséré ou décor ; l'ambre vif #f0c417 mesure 1,4:1 : formes uniquement (pastilles, boutons pleins avec texte sombre dessus) ; · l'encre posée en transparence ne descend jamais sous 62 % (4,8:1 sur le mur le plus sombre #ece7d8) ; · sur bouton ambre, le texte #1a1206 donne 11,1:1. LES PHOTOS RESTENT DES PHOTOS. Aucune n'est voilée ni délavée : sur fond clair on ne sépare pas par la lumière mais par la matière — cadres nets, ombres portées, et pour la vignette ouverte de la galerie une élévation et un halo. Les cartes-photos de la LOCATION et du MAGASIN gardent leur fond sombre et leur dégradé d'encre sous le texte blanc : ce sont des blocs profonds posés sur un mur clair, le parti déjà validé du magasin. Les cartes de la ROUTE, elles, sont passées en jour le 18/08 : leurs photos catalogue sont sur fond BLANC, le dégradé d'encre y fabriquait une salissure grise au bas de chaque carte (voir section 3). Zéro animation permanente, zéro dépendance, rien d'enregistré dans le navigateur. Les textes ne changent pas d'un mot : on ne fait que les habiller. ========================================================================== */ /* ========================================================================== 1 · L'OUVERTURE (.vsp.vsh2) — VOLONTAIREMENT LAISSÉE TELLE QUELLE. « juste le hero je sais pas pourquoi ya un filtre blanc, remet comme avant » — Maxime, 18/08/2026, après avoir vu la page en clair. Cette section posait un voile crème sur la vidéo du magasin et passait le texte en encre. Mesuré : le voile montait à 0,97 d'opacité sur le tiers gauche, ce qui délavait la vidéo — c'est le « filtre blanc ». Tout a été retiré. L'ouverture retrouve son voile d'encre et son texte blanc, à l'identique de la version validée. L'ouverture est donc la seule zone sombre de la page, et c'est un parti, pas un oubli : la vidéo arrive en pleine matière, la page s'éclaire juste après. NE PAS « harmoniser » cette section avec le reste sans un accord de Maxime. ========================================================================== */ /* ========================================================================== 2 · LA GALERIE DU SHOWROOM — le point qui avait échoué ce matin. Ce qui avait raté : un voile crème et une désaturation à 32 % sur les photos fermées — des vélos gris délavés sur crème (prod-showroom-v6). Ici, l'inverse : LES PHOTOS FERMÉES RESTENT DES PHOTOS. Pleine saturation, aucun voile, le filtre d'assombrissement (brightness .66) tombe. Ce qui les tient ensemble, c'est le cadre : la scène prend le blanc cassé de la vitrine, un fin liséré clair sépare les vignettes comme les montants d'une devanture, et la vignette OUVERTE se détache par une ombre portée de chaque côté et son halo ambré — par la mise en scène, pas par l'obscurité. Le bandeau d'encre en bas de chaque photo (déjà dans le bloc) est GARDÉ : c'est l'assise du titre vertical blanc — ≥ 12:1 même sur photo blanche — le même geste que les cartes-photos du magasin, déjà validées en clair. Le reste de la section (mur, cadre, colonne, marques, téléphone, mentions) est déjà clair par showroom-v5.css : pas touché. Les « !important » répondent à ceux du bloc HTML — mêmes armes que v5. -------------------------------------------------------------------------- */ /* la scène : du noir au blanc cassé de la vitrine */ html #vsx-live.vs.vs2 .galfull .acc { background: #fdfcf9 !important; box-shadow: inset 0 1px 0 rgba(12, 13, 16, 0.08); /* fine ligne sous la barre de marques */ } /* les joints que v5 avait noircis contre la scène sombre redeviennent doux */ html #vsx-live.vs.vs2 .bstrip { border-bottom-color: rgba(12, 13, 16, 0.12); } html #vsx-live.vs.vs2 .vtabs { border-right-color: rgba(12, 13, 16, 0.12); } /* chaque vignette : le liséré blanc cassé entre les photos reste — ce sont les montants de la vitrine. Le FOND de la vignette, lui, reprend celui du .com (`linear-gradient(165deg,#2c2d33,#121318)`), et ce n'est pas cosmétique : plusieurs photos produit sont des PNG à fond transparent (les Segway). Sur un fond crème, le `brightness(.66)` ne les assombrit pas — il n'agit que sur l'image, pas sur ce qu'il y a derrière — et le titre blanc tombait à 1,42:1 contre 2,38:1 sur les photos opaques. Sur le fond du .com, les deux cas se comportent pareil. */ html #vsx-live.vs.vs2 .galfull .s { background: linear-gradient(165deg, #2c2d33, #121318); border-left-color: #fdfcf9 !important; } /* L'ASSOMBRISSEMENT DE LA PHOTO FERMÉE — « reprends le shadow » de la section qui vend, Maxime, 23/08. C'était ici la vraie erreur, et elle datait du 18/08 : en passant l'accueil en clair, j'avais écrit `filter: none` pour que « un vélo en photo reste un vélo en photo ». Sauf que le .com ne tient pas ses titres avec son dégradé — il les tient avec CE filtre : .vs .s .bg{ … filter:brightness(.66) … } (section .com, mot pour mot) Le dégradé du .com (`transparent 40 % → encre .9`) ne couvre que le bas ; c'est le brightness .66 qui tient les 40 % du haut. En le retirant, j'avais cassé la moitié du mécanisme — d'où le voile pleine hauteur du 19/08, jugé trop sombre le 23/08. On remet la pièce manquante, et le dégradé du .com redevient suffisant : plus de rustine. La vignette OUVERTE n'est pas concernée : le bloc met `.bg` à opacity 0. */ html #vsx-live.vs.vs2 .galfull .s .bg { filter: brightness(0.66); } /* le titre vertical reste blanc, mais son ombre est resserrée : les longs noms montent au-dessus du bandeau d'encre, et certaines photos produit sont sur fond blanc — ce halo d'encre garde le blanc lisible partout (≥ 12:1 sur photo blanche comme sur photo sombre) */ html #vsx-live.vs.vs2 .galfull .s .vl { text-shadow: 0 1px 2px rgba(12, 13, 16, 0.9), 0 0 6px rgba(12, 13, 16, 0.55), 0 2px 14px rgba(12, 13, 16, 0.5); } /* la vignette ouverte flotte au-dessus de ses voisines : ombre portée des deux côtés + le halo ambré du bloc (conservé) sur son fond blanc */ html #vsx-live.vs.vs2 .galfull .s.on { z-index: 2; box-shadow: 18px 0 40px -14px rgba(58, 47, 15, 0.38), -18px 0 40px -14px rgba(58, 47, 15, 0.38); } /* LE VOILE DES VIGNETTES FERMÉES — celui du .com, mot pour mot. Histoire, parce qu'elle explique trois allers-retours : 18/08 passage de l'accueil en clair → j'enlève `brightness(.66)` sur la photo. Le titre vertical blanc perd son assise. 19/08 « remets l'ombre plus foncée » → je compense avec un voile pleine hauteur (0,66 → 0,95). Je traitais le symptôme. 23/08 « trop sombre » → j'ajoute un ruban le long du titre. Toujours le symptôme. 23/08 « reprends le shadow de » → la cause. Le .com tient ses titres avec DEUX pièces : le `brightness(.66)` sur la photo (voir plus haut, § photo fermée) ET ce dégradé, qui ne couvre que le bas. La pièce manquante remise, le dégradé du .com suffit seul. Donc ici : la ligne du .com, sans un caractère de plus. Vérification : `python3 _mesure_galerie.py`. La vignette OUVERTE n'est pas concernée : le bloc met son voile à opacity 0, et on ne touche pas à cette règle. */ html #vsx-live.vs.vs2 .galfull .s .ov { background: linear-gradient(transparent 40%, rgba(8, 9, 12, 0.9)) !important; } /* NE PAS TOUCHER, et c'est voulu : le titre vertical blanc (.vl), la pastille ambre (.badge), le fond blanc du produit ouvert, le panneau et la mensualité — tout cela vient du bloc et de showroom-v5.css, et fonctionne tel quel sur la scène claire. */ /* ========================================================================== 3 · LA ROUTE (.vrg) — mur crème soutenu #ece7d8, la première « grande traversée ». Les 41 photos catalogue (Kellys, Superior) sont des vélos détourés sur FOND BLANC : le parti « bloc profond » du magasin ne leur va pas — le voile d'encre du bloc fabriquait un dégradé blanc→gris→noir au bas de chaque carte (« enlève le noir autour des cartes », Maxime, ce jour). Ici les cartes passent en jour elles aussi : blanc cassé, voile clair sous le texte, encre et doré. -------------------------------------------------------------------------- */ .vrg.vrg { background: #ece7d8; color: #16140f; -webkit-font-smoothing: auto; } .vrg.vrg .vrg-hdr .eb { color: #7a5c05; } /* 5,1:1 */ .vrg.vrg .vrg-hdr .eb .d { background: #7a5c05; box-shadow: 0 0 0 4px rgba(240, 196, 23, 0.32); } .vrg.vrg .vrg-h2 { color: #16140f; } /* 14,9:1 */ .vrg.vrg .vrg-h2 em { color: #7a5c05; } /* 5,1:1 */ /* le grand mot fantôme qui défile : un décor, volontairement pâle — même discrétion qu'en sombre (il était à 9 % de blanc), traduite en encre */ .vrg.vrg .vrg-mqi { color: rgba(12, 13, 16, 0.07); -webkit-text-stroke: 1.2px rgba(12, 13, 16, 0.26); } .vrg.vrg .vrg-mqi i { color: rgba(169, 129, 10, 0.85); } .vrg.vrg .vrg-mqi em { color: rgba(169, 129, 10, 0.85); } .vrg.vrg .sub { color: rgba(22, 20, 15, 0.72); } /* 6,6:1 */ .vrg.vrg .sub b { color: #7a5c05; } /* 5,1:1 */ /* les onglets Route / Gravel / VTT : cartes blanc cassé, texte encre — l'onglet actif garde sa pastille ambre à texte sombre (11,1:1) */ .vrg.vrg .vtabs button { background: #fdfcf9; border-color: rgba(12, 13, 16, 0.18); color: rgba(22, 20, 15, 0.78); } .vrg.vrg .vtabs button .n { opacity: 0.8; } /* le compteur : 5,1:1 */ .vrg.vrg .vtabs button:hover { color: #16140f; border-color: rgba(12, 13, 16, 0.45); } /* l'onglet actif est REDIT ici : nos règles pèsent plus lourd que celles du bloc, il faut donc redire aussi l'état actif pour ne pas l'écraser */ .vrg.vrg .vtabs button.on { background: #f0c417; color: #1a1206; border-color: #f0c417; } /* les flèches du carrousel */ .vrg.vrg .nav button { background: #fdfcf9; border-color: rgba(12, 13, 16, 0.34); color: #16140f; } .vrg.vrg .nav button:hover { background: #f0c417; color: #1a1206; border-color: #f0c417; } .vrg.vrg a:focus-visible, .vrg.vrg button:focus-visible { outline-color: #7a5c05; } /* LES CARTES — le point du jour. Le bloc les peint en nuit : fond #15161b, voile d'encre montant du bas pour porter du texte blanc. Sur ces photos à fond blanc, c'était le voile qui noircissait le bas des cartes. Le parti : la carte prend le blanc cassé des cartes claires du site — il se fond avec le fond blanc des photos — et le voile devient blanc cassé lui aussi. Invisible sur photo blanche, il n'existe que sur les vélos sombres, où il assoit le texte. Le texte passe du blanc à l'encre, le prix de l'ambre vif (1,5:1 en jour) au doré lisible. Tous les ratios ci-dessous sont mesurés au PIRE CAS : un vélo noir dont la roue descend jusqu'en bas de la carte, au petit format 240×320. */ .vrg.vrg .bk { background: #fdfcf9; /* l'attente avant la photo — plus de noir sous les photos */ color: #16140f; border-color: rgba(12, 13, 16, 0.18); /* liséré encre à la place du liséré blanc de la nuit */ box-shadow: 0 24px 50px -30px rgba(12, 10, 9, 0.45); /* carte claire sur mur crème (1,2:1 entre les deux fonds) : c'est le liséré et l'ombre — un cran plus présents qu'ailleurs — qui la détachent, plus la couleur */ } /* LE BAS DE CARTE — « enlève l'ombre blanche », Maxime, 19/08. Le voile précédent était un dégradé long : il montait jusqu'à 60 % de la hauteur et posait une brume laiteuse sur la roue arrière des vélos. C'est l'ombre blanche qu'il voyait. Remplacé par un BANDEAU NET : blanc cassé plein sous le texte, transition de 18 px seulement, puis plus rien. Au-dessus de 118 px du bas, la photo est intacte — aucune brume. Le nom et le prix se posent sur une surface pleine, comme la légende d'une fiche catalogue. Pire cas mesuré sur les 41 photos réelles, aux deux formats : 6,09:1. */ .vrg.vrg .bksc { background: linear-gradient(0deg, #fdfcf9 0, #fdfcf9 100px, rgba(253, 252, 249, 0) 118px); } /* la pastille Route/Gravel : du noir translucide au blanc cassé cerclé d'encre — le cercle est un box-shadow pour ne pas toucher sa taille */ .vrg.vrg .bktag { background: rgba(253, 252, 249, 0.9); color: #16140f; /* 14,3:1 même sur photo noire */ box-shadow: inset 0 0 0 1px rgba(12, 13, 16, 0.16); } /* le bloc du bas : nom en encre profonde, prix en doré lisible */ .vrg.vrg .bkbr { color: #7a5c05; } /* la marque, souvent vide : 4,9:1 au pire */ .vrg.vrg .bknm { color: #0c0d10; } /* 15,5:1 au pire, 18,9:1 sur photo blanche */ .vrg.vrg .bkpr { color: rgba(22, 20, 15, 0.75); } /* le « dès » : 7,5:1 au pire */ .vrg.vrg .bkpr b { color: #7a5c05; } /* le prix : 5,4:1 au pire, 6,1:1 sur blanc */ /* NE PAS TOUCHER, et c'est voulu : la pastille flèche .bkgo garde son ambre vif à texte sombre (11,1:1) — le seul endroit où l'ambre vif est juste, une forme au survol, pas une lettre. Et la photo .bkimg n'a jamais été filtrée : rien à neutraliser, elle est déjà pleine couleur. */ .vrg.vrg .btn-line { background: transparent; border-color: rgba(22, 20, 15, 0.45); color: #16140f; } .vrg.vrg .hint { color: rgba(22, 20, 15, 0.62); } /* 4,8:1 — le plancher */ /* piège vérifié au rendu : la rangée de boutons du bloc s'appelle « foot », comme le pied générique de vsx.css qui peint tout .foot en encre. Sur la page sombre ce fond ne se voyait pas ; sur le mur clair, si. */ .vrg.vrg .foot { background: transparent; color: inherit; } /* ========================================================================== 4 & 5 · GUIDES ET PIÈCES (.vsp.vsp-pcs — les deux sections partagent la même ossature). Mur crème #f4f1e7. Les cartes sombres deviennent des cartes BLANCHES à liséré encre et ombre douce — la matière des cartes du site — et les grands compteurs ambre deviennent doré lisible (6,3:1 sur carte blanche). La carte « Toutes les pièces » garde sa teinte ambrée, en version jour. -------------------------------------------------------------------------- */ .vsp.vsp-pcs { --bord: rgba(12, 13, 16, 0.12); /* tous les lisérés « nuit » de l'ossature */ background: #f4f1e7; color: #16140f; border-bottom-color: rgba(12, 13, 16, 0.12); -webkit-font-smoothing: auto; } /* l'en-tête commun */ .vsp.vsp-pcs .vsp-eyebrow { color: #7a5c05; } /* 5,5:1 */ .vsp.vsp-pcs .vsp-eyebrow i { background: #7a5c05; box-shadow: 0 0 0 4px rgba(240, 196, 23, 0.28); } .vsp.vsp-pcs .vsp-h2 { color: #16140f; } .vsp.vsp-pcs .vsp-h2 em { color: #7a5c05; } .vsp.vsp-pcs .vsp-lead { color: rgba(22, 20, 15, 0.7); } /* 6,5:1 */ .vsp.vsp-pcs .vsp-btn-line { background: transparent; border-color: rgba(22, 20, 15, 0.45); color: #16140f; } .vsp.vsp-pcs a:focus-visible, .vsp.vsp-pcs button:focus-visible { outline-color: #7a5c05; } /* les cartes de marques (Shimano, Hope…) : blanches, posées sur le crème */ .vsp.vsp-pcs .vsp-pcs-b { background: #ffffff; border-color: rgba(12, 13, 16, 0.12); box-shadow: 0 18px 38px -28px rgba(12, 10, 9, 0.4); } .vsp.vsp-pcs .vsp-pcs-b .vsp-nm { color: #16140f; } .vsp.vsp-pcs .vsp-pcs-b .vsp-ct { color: rgba(22, 20, 15, 0.62); } /* 5,2:1 sur blanc */ .vsp.vsp-pcs .vsp-pcs-b .vsp-ct b { color: #7a5c05; } /* les compteurs : 6,3:1 */ .vsp.vsp-pcs .vsp-pcs-b .vsp-ar { background: rgba(12, 13, 16, 0.06); border-color: rgba(12, 13, 16, 0.22); color: #16140f; } /* les survols sont REDITS : nos règles pèsent plus lourd que celles d'origine, sans ces lignes les cartes ne réagiraient plus à la souris. Le liséré de survol passe à l'ambre foncé : l'ambre vif ne se voit pas sur fond clair (1,5:1 ; l'ambre foncé fait 3,6:1). */ .vsp.vsp-pcs a.vsp-pcs-b:hover { border-color: rgba(169, 129, 10, 0.65); background: #fffdf4; } .vsp.vsp-pcs a.vsp-pcs-b:hover .vsp-ar { background: #f0c417; color: #1a1206; border-color: #f0c417; } /* la carte « Toutes les pièces » : teinte ambrée de jour, liséré doré en pointillés (décor — le texte, lui, est au-dessus du minimum) */ .vsp.vsp-pcs .vsp-pcs-all { background: rgba(240, 196, 23, 0.1); border-color: rgba(169, 129, 10, 0.6); } .vsp.vsp-pcs .vsp-pcs-all .vsp-nm { color: #7a5c05; } .vsp.vsp-pcs .vsp-pcs-all p { color: rgba(22, 20, 15, 0.66); } .vsp.vsp-pcs .vsp-pcs-all .vsp-go { color: #16140f; } .vsp.vsp-pcs a.vsp-pcs-all:hover .vsp-go { color: #7a5c05; } /* l'ambre vif du survol serait illisible */ /* les guides */ .vsp.vsp-pcs .vsp-gui { border-top-color: rgba(12, 13, 16, 0.14); } .vsp.vsp-pcs .vsp-gui-stat { color: rgba(22, 20, 15, 0.7); } .vsp.vsp-pcs .vsp-gui-stat b { color: #7a5c05; } /* 5,5:1 sur crème */ /* la grande carte mise en avant : blanche, chauffée d'ambre en haut */ .vsp.vsp-pcs .vsp-gui-feat { background: linear-gradient(160deg, rgba(240, 196, 23, 0.2), rgba(240, 196, 23, 0.06) 55%), #ffffff; border-color: rgba(169, 129, 10, 0.5); box-shadow: 0 18px 38px -28px rgba(12, 10, 9, 0.4); } .vsp.vsp-pcs .vsp-gui-feat b { color: #16140f; } .vsp.vsp-pcs .vsp-gui-feat p { color: rgba(22, 20, 15, 0.72); } .vsp.vsp-pcs .vsp-gui-feat .vsp-go { color: #7a5c05; } .vsp.vsp-pcs a.vsp-gui-feat:hover { border-color: #a9810a; } /* survol redit, version jour */ /* les cartes de guides ordinaires */ .vsp.vsp-pcs .vsp-gui-c { background: #ffffff; border-color: rgba(12, 13, 16, 0.12); box-shadow: 0 18px 38px -28px rgba(12, 10, 9, 0.4); } .vsp.vsp-pcs .vsp-gui-c .vsp-gchip { color: #7a5c05; /* 5,7:1 sur sa pastille */ background: rgba(240, 196, 23, 0.16); border-color: rgba(169, 129, 10, 0.45); } .vsp.vsp-pcs .vsp-gui-c b { color: #16140f; } .vsp.vsp-pcs .vsp-gui-c p { color: rgba(22, 20, 15, 0.66); } /* 5,9:1 sur blanc */ .vsp.vsp-pcs .vsp-gui-c .vsp-go { color: #7a5c05; } .vsp.vsp-pcs a.vsp-gui-c:hover { border-color: rgba(169, 129, 10, 0.65); background: #fffdf4; } /* survol redit */ /* les deux cartes renforcées du bloc guides (loi 2026 et speedbike) : leurs couleurs de nuit sont écrites dans le bloc lui-même — on les repose ici */ .vsp.vsp-pcs .vsp-loi-facts { border-top-color: rgba(12, 13, 16, 0.22); } .vsp.vsp-pcs .vsp-loi-f { color: rgba(22, 20, 15, 0.7); } .vsp.vsp-pcs .vsp-loi-f b { color: #16140f; } .vsp.vsp-pcs .vsp-sbk .vsp-go-2 { color: rgba(22, 20, 15, 0.72); } .vsp.vsp-pcs .vsp-sbk .vsp-fine { color: rgba(22, 20, 15, 0.62); } /* 5,2:1 sur blanc */ /* ========================================================================== 6 · LA LOCATION (.vsp.vsl3) — mur blanc cassé #fdfcf9. Les trois grandes cartes-photos (VTT électrique, ville, journée) ne changent pas : photo pleine couleur, dégradé d'encre, texte blanc — elles gagnent l'ombre des cartes claires. Les pastilles d'infos et la ligne « forfait » passent à l'encre. -------------------------------------------------------------------------- */ .vsp.vsl3 { --bord: rgba(12, 13, 16, 0.12); background: #fdfcf9; color: #16140f; -webkit-font-smoothing: auto; } .vsp.vsl3 .vsp-eyebrow { color: #7a5c05; } /* 6,1:1 */ .vsp.vsl3 .vsp-eyebrow i { background: #7a5c05; box-shadow: 0 0 0 4px rgba(240, 196, 23, 0.28); } .vsp.vsl3 .vsp-h2 { color: #16140f; } .vsp.vsl3 .vsp-h2 em { color: #7a5c05; } .vsp.vsl3 .vsp-lead { color: rgba(22, 20, 15, 0.7); } /* 6,8:1 */ .vsp.vsl3 .vsp-btn-line { background: transparent; border-color: rgba(22, 20, 15, 0.45); color: #16140f; } .vsp.vsl3 a:focus-visible, .vsp.vsl3 button:focus-visible { outline-color: #7a5c05; } /* les cartes-photos : posées sur le mur au lieu de fondre dans le noir */ .vsp.vsl3 .vsl3-ride { box-shadow: 0 24px 50px -30px rgba(12, 10, 9, 0.35); } /* les pastilles d'infos (caution, casque…) : liséré et texte encre */ .vsp.vsl3 .vsl3-f { border-color: rgba(12, 13, 16, 0.24); color: rgba(22, 20, 15, 0.8); } .vsp.vsl3 .vsl3-f b { color: #16140f; } /* la ligne du forfait journée */ .vsp.vsl3 .vsl3-deal { color: rgba(22, 20, 15, 0.72); } /* 7,3:1 */ .vsp.vsl3 .vsl3-deal b { color: #7a5c05; } /* 6,1:1 */ /* ========================================================================== 7 · LA CARTE DE FRANCE (.gv2) — RÈGLES DEVENUES INERTES LE 19/08/2026. La section .gv2 n'existe plus sur la page : elle a fusionné avec la section « magasin » (« ok go », Maxime, 19/08). Ce qui reste à sa place est un bandeau mince .fm-rappel, qui porte ses propres couleurs. CES RÈGLES SONT CONSERVÉES, PAS SUPPRIMÉES : si l'ancienne section était un jour restaurée, elle retrouverait son habillage clair sans qu'on ait rien à réécrire. Elles ne coûtent que 2 Ko et ne s'appliquent à rien. -------------------------------------------------------------------------- */ /* (l'ancien commentaire, conservé pour mémoire) 7 · LA CARTE DE FRANCE (.gv2) — mur crème soutenu #ece7d8, la seconde « grande traversée ». Le panneau d'adresse devient une carte blanche ; la carte de France passe de l'encre blanche sur nuit à l'encre pleine sur crème. Le point d'Obernai et son étiquette : doré lisible. -------------------------------------------------------------------------- */ .gv2.gv2 { background: radial-gradient(60% 80% at 84% 40%, rgba(240, 196, 23, 0.12), transparent 60%), #ece7d8; color: #16140f; -webkit-font-smoothing: auto; } /* le panneau : une carte blanche posée sur le mur */ .gv2.gv2 .panel { background: #fdfcf9; border-color: rgba(12, 13, 16, 0.12); box-shadow: 0 24px 50px -30px rgba(12, 10, 9, 0.35); } .gv2.gv2 .eyebrow { color: #7a5c05; } /* 6,1:1 sur le panneau */ .gv2.gv2 .eyebrow i { background: #7a5c05; box-shadow: 0 0 0 4px rgba(240, 196, 23, 0.28); } .gv2.gv2 h2 { color: #16140f; } .gv2.gv2 h2 em { color: #7a5c05; } .gv2.gv2 .lead { color: rgba(22, 20, 15, 0.7); } /* 6,8:1 */ .gv2.gv2 .facts { border-top-color: rgba(12, 13, 16, 0.14); } .gv2.gv2 .fact .l { color: #7a5c05; } .gv2.gv2 .fact b { color: #16140f; } .gv2.gv2 .fact b a { color: #16140f; } .gv2.gv2 .fact b a:hover { color: #7a5c05; } .gv2.gv2 .fact span { color: rgba(22, 20, 15, 0.66); } /* 5,9:1 */ .gv2.gv2 .btn-line { background: transparent; border-color: rgba(22, 20, 15, 0.45); color: #16140f; } .gv2.gv2 a:focus-visible { outline-color: #7a5c05; } /* la carte de France elle-même (un dessin, pas une photo) : traits d'encre */ .gv2.gv2 .map .fr { fill: rgba(12, 13, 16, 0.05); stroke: rgba(12, 13, 16, 0.32); } .gv2.gv2 .map .corse { fill: rgba(12, 13, 16, 0.07); stroke: rgba(12, 13, 16, 0.4); } .gv2.gv2 .map .ring { stroke: rgba(12, 13, 16, 0.1); } .gv2.gv2 .map .beam { stroke: #a9810a; opacity: 0.55; } /* rayons décoratifs */ .gv2.gv2 .map .city { fill: #16140f; } .gv2.gv2 .map .clab { fill: rgba(22, 20, 15, 0.72); } /* noms de villes : 6,6:1 */ .gv2.gv2 .map .ob { fill: #7a5c05; } /* le point d'Obernai */ .gv2.gv2 .map .obring { stroke: #a9810a; } .gv2.gv2 .map .oblab { fill: #7a5c05; } /* « Obernai » : 5,1:1 */ /* le bandeau sous la carte : il portait du blanc sur un dégradé de nuit — même dégradé, en crème, texte encre, coche verte assombrie pour rester visible sur clair (3,5:1, seuil des pictos : 3:1) */ .gv2.gv2 .ribbon { background: linear-gradient(0deg, rgba(236, 231, 216, 0.97), transparent); color: rgba(22, 20, 15, 0.8); /* 8,6:1 */ } .gv2.gv2 .ribbon svg { stroke: #1e8a4f; } /* ========================================================================== 8 · LE PIED DE PAGE (.vsf) — LAISSÉ EN NOIR, À LA DEMANDE DE MAXIME. « le footer laisse en noir » — 19/08/2026. Cette section passait le pied de page en crème soutenu #ece7d8. Tout a été retiré : le pied garde le noir de hf.css, à l'identique. Avec l'ouverture (section 1), c'est la deuxième zone sombre de la page — et c'est cohérent : la page s'ouvre et se ferme dans la matière, elle s'éclaire au milieu. NE PAS « harmoniser » sans accord de Maxime. Le travail de contraste en version claire n'est pas perdu : il reste dans prod-pied-clair.css, prêt à servir si l'avis change. ========================================================================== */ /* ========================================================================== CE QUE CE FICHIER NE TOUCHE PAS, ET POURQUOI · le showroom hors galerie, le magasin, les marques, la preuve : déjà clairs et validés — ils servent de référence ; · L'OUVERTURE : remise telle qu'elle était, voile d'encre et texte blanc (demande de Maxime du 18/08 — voir la section 1) ; · l'intérieur des cartes-photos de la location, du magasin et de la galerie : photo pleine couleur + bandeau d'encre + texte blanc, le parti validé. Les cartes de la route font exception depuis le 18/08 ; · la salle de projection vidéo (.vsmlb) : sombre quel que soit le fond ; · l'en-tête et le bandeau du haut : hors demande du jour ; · aucun texte, aucun chiffre, aucune grille, aucun espacement. ========================================================================== */