/* ============================================================ AVIS — LA SECTION EN CLAIR ------------------------------------------------------------ Ce fichier a été un prototype comparatif ; c'est maintenant la version du site. L'attribut data-avis="clair" est écrit EN DUR sur dans index.html (13 août 2026) — le sélecteur de pied de page, la clé localStorage `gmd-avis` et le script inline du qui les rejouait ont tous été retirés. POURQUOI GARDER L'ATTRIBUT plutôt que de déprefixer les règles : la spécificité. html[data-avis="clair"] .avis[data-tone="dark"] vaut (0,3,1) et bat sans !important le [data-tone="dark"] (0,1,0) de styles.css. Retirer le préfixe ferait tomber ces règles à (0,1,0) ou (0,2,0) selon les cas, et la section redeviendrait noire par endroits. L'attribut n'est donc pas un reste de prototype : c'est le poids qui fait tenir le fichier. CE QUI NE CHANGE PAS — et c'est le point : rien du dessin. Mise en page, position et taille des cartes, gouttières, typographie, cinématique de la grille inclinée, rotation des avis toutes les 10 s, survols, spotlight jaune, filet de gravure, étoiles : aucune de ces règles n'est touchée. Ce fichier ne redéfinit que des JETONS DE COULEUR sur la section `.avis`, exactement comme le fait `[data-tone="light"]` sur les autres sections. Le système de tons a été conçu pour ça — « une section pose data-tone et tout son sous-arbre se recolore ». On s'en sert, on ne le contourne pas. POURQUOI PAS UN SIMPLE data-tone="paper" DANS LE HTML — parce que la section AU-DESSUS (« Rendez-vous ») est déjà en papier : deux papiers qui se suivent, et la couture disparaît. La variante claire prend donc la valeur juste en dessous, --paper-2, qui laisse la section respirer entre le papier du formulaire et le blanc du contact. C'est le même rôle que jouait le noir — une respiration — joué en valeurs claires. Rendez-vous #f5f4f1 (papier) Avis #eceae5 (papier profond) ← ici Contact #ffffff (blanc) TROIS ADAPTATIONS RÉELLES sont nécessaires, aucune n'est cosmétique — elles sont commentées une à une plus bas : 1. les étoiles (le jaune de marque n'a pas de bord sur clair) ; 2. les lueurs jaunes (elles ÉCLAIRENT sur noir, elles doivent MARQUER sur blanc) ; 3. la cinématique : brightness(0) « sort du noir » — sur clair il peindrait un rectangle NOIR. Cf. --tilt-emerge. Le HTML garde son data-tone="dark" d'origine sur la section : c'est la spécificité décrite en tête qui fait gagner les jetons clairs, pas une réécriture du balisage. ============================================================ */ html[data-avis="clair"] .avis[data-tone="dark"] { /* ---- Fonds et surfaces ---- */ --bg: var(--paper-2); /* #eceae5, gris chaud très clair */ --surface: var(--white); /* les tuiles : blanc pur */ --surface-2: var(--paper); --card-bg: var(--white); --card-bg-hover: #fffdf0; /* ---- Filets ---- */ --border: rgba(10, 10, 11, .11); --border-strong: rgba(10, 10, 11, .22); /* ---- Encres ---- Contrastes mesurés sur #eceae5 : ink 17,9:1 · dim 6,4:1 · faint 4,5:1 · warm 4,3:1. Ce sont les valeurs du ton clair, reprises telles quelles : elles ont été choisies pour passer sur blanc, elles passent donc a fortiori ici. */ --text: var(--ink); --text-dim: #5c5a55; --text-faint: #75726d; --ink-warm: #7d7568; /* « confiance. » du titre */ /* ---- Accents ---- Sur clair, un filet de 1 px de jaune disparaît : l'épaisseur passe à 3 px. C'est le jeton qui fait tout tenir, et il n'a rien de décoratif — c'est lui qui donne au filet de gravure des cartes (`.review[data-reveal]`) sa visibilité au moment de la révélation. */ --rule: 3px; --rule-w: 28px; /* Le jaune ne s'ALLUME pas sur du clair. Les lueurs deviennent des liserés francs et des ombres chaudes — mêmes jetons, mêmes usages, valeurs du ton clair. */ --glow: 0 0 0 1px rgb(var(--yellow-rgb) / .9), 0 10px 26px -10px rgb(var(--yellow-rgb) / .55); --glow-soft: 0 0 0 1px rgb(var(--yellow-rgb) / .6), 0 8px 20px -12px rgb(var(--yellow-rgb) / .38); --glow-line: none; --elev-1: 0 1px 2px rgba(10,10,11,.05), 0 10px 26px -14px rgba(10,10,11,.18); --elev-2: 0 2px 6px rgba(10,10,11,.07), 0 22px 46px -20px rgba(10,10,11,.26); --wash: rgba(255, 255, 255, .55); /* la nappe ÉCLAIRE ici */ --losange-rgb: 10 10 11; --losange-op: .055; --ghost-stroke: rgba(10, 10, 11, .07); /* le « 04 » fantôme */ --glass: rgba(255, 255, 255, .74); --glass-solid: rgba(255, 255, 255, .93); --tick-off: rgba(10, 10, 11, .16); --focus: var(--ink); --accent-text: var(--ink); --link-hot: var(--ink); --sheen-hot: #7a6c00; /* ---- 1 · LES ÉTOILES ---- Demande explicite : garder EXACTEMENT le jaune Renault, ici comme ailleurs. On le garde donc en remplissage — au lieu de l'or #dfb400 que le ton clair emploie partout ailleurs sur le site. Mais #EFDF00 sur #eceae5 tombe à 1,3:1 : une notation qu'on ne voit pas ne note rien. Le contour ci-dessous (§ bas de fichier) rend à la forme le bord que la couleur n'a pas, sans toucher au remplissage. */ --star: var(--yellow); --star-shadow: none; } /* ---- 1 · (suite) le bord des étoiles ---- -webkit-text-stroke, pas une ombre portée : une ombre déplacerait l'étoile et salirait le blanc autour. Le contour est centré sur le tracé, dans le jaune PROFOND du site (--yellow-deep, le jeton qui existe précisément pour « le jaune pur, posé sur du blanc, n'a plus assez de bord »). Le remplissage reste #EFDF00 au pixel près. */ html[data-avis="clair"] .avis .stars { -webkit-text-stroke: .6px var(--yellow-deep); } html[data-avis="clair"] .avis .stars-lg { -webkit-text-stroke: .85px var(--yellow-deep); /* 1,35rem : le trait suit le corps */ } /* Les étoiles ÉTEINTES (demi-étoile grise, étoiles vides) héritent du contour de `.stars` — il faut le leur retirer, sinon un liseré jaune redessine des étoiles qui ne sont pas acquises. Seule la moitié REMPLIE de la demi-étoile — le ::before superposé, clippé à 50 % — le reprend. */ html[data-avis="clair"] .avis .star-half, html[data-avis="clair"] .avis .star-empty { -webkit-text-stroke-width: 0; } html[data-avis="clair"] .avis .star-half::before { -webkit-text-stroke: .85px var(--yellow-deep); } /* ---- 2 · LES LUEURS JAUNES ---- Elles restent, à l'identique dans leur géométrie (mêmes rayons, mêmes positions, mêmes durées) : seule l'OPACITÉ change, parce qu'une lueur qui fonctionne sur du noir se dilue sur du blanc. Le liseré de survol (`.review::after`, radial de 200 px suivant le curseur) n'a besoin de rien : styles.css lui donne déjà des opacités hautes hors ton sombre — c'est la règle `[data-tone="dark"] .review::after` qui les baissait, et notre sélecteur la neutralise en gagnant en spécificité. */ html[data-avis="clair"] .avis .review::before { /* 300 px de nappe chaude sous le curseur : .12 se voyait sur noir, il faut .22 pour exister sur blanc. */ background: radial-gradient(circle, rgb(var(--yellow-rgb) / .22), transparent 62%); } html[data-avis="clair"] .avis .review::after { background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--yellow-rgb) / .95), rgb(var(--yellow-rgb) / .25) 55%, transparent 78%) border-box; } /* Le liseré de repos au survol : jaune de marque, mais opaque — à 35 % sur blanc il donnait un beige. Même couleur, moins de transparence. */ html[data-avis="clair"] .avis .review:hover { border-color: rgb(var(--yellow-rgb) / .75); } /* ---- Les tuiles ---- Sur noir, la carte se détachait en étant PLUS CLAIRE que le fond. Sur clair, blanc sur #eceae5 ne suffit pas : c'est le filet + une ombre de contact qui redonnent l'arête. Rien d'autre ne bouge — ni la taille (aspect-ratio 3/4), ni le rayon, ni la position. */ html[data-avis="clair"] .avis .tilt-card { box-shadow: var(--elev-1); } /* ---- 3 · LA CINÉMATIQUE ---- La grille inclinée est intégralement conservée : mêmes poses, mêmes courbes, mêmes durées (motion.js § 4). Un seul terme du filtre ne PEUT pas être conservé — brightness. Sur noir, brightness(0) fait fondre la tuile DANS le fond : c'est ce qui donne l'impression qu'elle sort de l'ombre. Sur clair, brightness(0) peint un rectangle NOIR au milieu du blanc, et aucune valeur de brightness ne peut faire l'inverse (une carte blanche à brightness(3) reste blanche, et son texte noir reste noir). Le seul terme qui fait disparaître une tuile dans un fond CLAIR est l'opacité. D'où ce jeton, lu UNE FOIS par motion.js à l'initialisation : il dit à la cinématique dans quel sens elle doit faire apparaître les tuiles. La géométrie — translation, rotation, rotateX, skew, scaleY interne, flou — reste identique au caractère près. Le contraste suit le même renversement : 4 → 1 « écrase vers le noir » à l'entrée ; sur clair, .7 → 1 délave, comme un tirage qui vient au révélateur. */ html[data-avis="clair"] .avis { --tilt-emerge: clair; }