/* =========================================================================== MaPièce Auto — jetons de design de la vitrine (SOURCE UNIQUE des couleurs). THÈME CLAIR, thème unique de `vitrine.html` depuis le 2026-09-21. La classe `body.vitrine` remplace l'ancienne `body.dark` : aucune règle sombre ne subsiste. Chargée AVANT vitrine.css, vitrine-home.css et vitrine-home-sections.css, qui n'écrivent plus aucune couleur, aucun espacement, aucun rayon ni aucune durée en dur. Les propriétés personnalisées se résolvent à la valeur calculée : l'ordre des feuilles n'a donc aucune incidence sur leur valeur. Direction : gris bleuté très clair (jamais de blanc pur à plat), surfaces blanches posées dessus, texte presque noir, UN accent orange réservé aux actions et aux bandeaux-titres. Aucune police externe (CSP `default-src 'self'`) : pile système, traitement typographique marqué (capitales espacées pour les sur-titres, graisse 800 pour les titres). Contrastes mesurés (WCAG 2.1, texte normal >= 4.5:1, graphiques >= 3:1) : --color-text #1b1d23 sur --color-surface #ffffff 16,8:1 --color-text #1b1d23 sur --color-base #f4f5f8 15,5:1 --color-muted #5b6070 sur --color-surface 6,3:1 --color-muted #5b6070 sur --color-base 5,8:1 --color-muted #5b6070 sur --color-surface-2 #eceef3 5,4:1 --color-accent-text #a83007 sur --color-surface 6,8:1 --color-accent-text #a83007 sur --color-base 6,2:1 --color-on-accent #ffffff sur --color-accent-strong 5,1:1 --color-on-accent #ffffff sur --color-accent-deep 6,8:1 --color-ok #1a7f37 sur --color-surface 5,1:1 --color-ko #c62828 sur --color-surface 5,6:1 --color-focus #0b57d0 sur --color-surface 6,4:1 L'accent de marque #e8450a n'est JAMAIS un fond de texte blanc (3,97:1) ni un texte sur fond clair (3,6:1) : il ne sert que de trait, de liseré, de puce et de survol — `--color-accent-strong` et `--color-accent-deep` portent tout ce qui doit être lu. =========================================================================== */ :root { --color-base: #f4f5f8; --color-surface: #ffffff; --color-surface-2: #eceef3; --color-surface-3: #e3e6ee; --color-line: #e2e5ec; --color-line-strong: #c9cdd8; --color-text: #1b1d23; --color-text-strong: #0d0f14; --color-muted: #5b6070; --color-accent: #e8450a; --color-accent-strong: #c93a08; --color-accent-deep: #a83007; --color-accent-text: #a83007; --color-accent-soft: #fdeee8; --color-on-accent: #ffffff; --color-focus: #0b57d0; --color-ok: #1a7f37; --color-ko: #c62828; --color-ko-soft: #fdecea; --color-ko-ink: #8a1c1c; /* Pastilles de statut : `style.css` pose un ocre (3,2:1 avec du blanc) et un gris (2,9:1) qui échouent au niveau AA. La vitrine les remplace. */ --color-warn: #8a6100; --color-neutral: #555a66; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-section: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); --shell-max: 1200px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --radius-pill: 999px; /* Profondeur en clair : deux couches, l'une serrée pour poser la surface, l'autre large et très diffuse pour la détacher du fond. */ --shadow-sm: 0 1px 2px rgb(16 18 28 / 6%), 0 1px 1px rgb(16 18 28 / 4%); --shadow-md: 0 10px 26px rgb(16 18 28 / 10%), 0 2px 6px rgb(16 18 28 / 6%); --shadow-raised: 0 22px 44px rgb(168 48 7 / 24%), 0 6px 14px rgb(16 18 28 / 10%); --text-eyebrow: clamp(.72rem, .68rem + .2vw, .82rem); --text-sm: .8125rem; --text-base: clamp(.9375rem, .9rem + .2vw, 1rem); --text-lg: clamp(1.05rem, .98rem + .35vw, 1.3rem); --text-xl: clamp(1.3rem, 1.05rem + 1.1vw, 2rem); --text-display: clamp(1.7rem, 1.15rem + 2.4vw, 3rem); --duration-fast: 120ms; --duration-normal: 240ms; --ease-out: cubic-bezier(.16, 1, .3, 1); /* Photo de catégorie en FOND de carte (`images/photos/`, 720×480), posée sur `--color-surface`. Opacité MESURÉE le 2026-09-21 sur les 13 photos, pixel par pixel ; pire cas = pixel noir pur, présent dans 11 photos sur 13 : --color-text sur photo à .16 : 11,6:1 au pire (moyenne 12,8:1 électricité, la plus sombre ; 13,0:1 échappement ; 16,1:1 filtration, la plus claire) --color-accent-text sur photo à .16 : 4,7:1 au pire (« Voir plus ») À .20, l'accent tomberait à 4,2:1 : ne pas dépasser .16 sans remesurer. Le masque de fondu (vitrine-home-sections.css) ne fait qu'éclaircir. */ --photo-fond-opacite: .16; --photo-fond-largeur: min(62%, 240px); /* Illustration SVG de repli (tuile sombre) : simple filigrane. */ --illu-fond-opacite: .07; } /* Ossature partagée par les feuilles de la vitrine. */ body.vitrine { background: var(--color-base); color: var(--color-text); } body.vitrine :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } /* Sur un fond accent plein, l'anneau bleu tomberait à 1,06:1 : il passe au blanc. */ body.vitrine .col-plaque :focus-visible, body.vitrine .lien-panier:focus-visible { outline-color: var(--color-on-accent); } .shell { width: 100%; max-width: var(--shell-max); margin: 0 auto; padding: 0 var(--space-5); } #view-home > section, #view-home > .shell { margin-block: var(--space-section); } #view-home > .shell:first-child { margin-top: var(--space-6); } .surtitre { margin: 0; font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent-text); } .titre-centre { margin: 0 0 var(--space-5); text-align: center; color: var(--color-text-strong); font-size: var(--text-xl); font-weight: 800; letter-spacing: -.01em; } .message-inline { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-accent-text); } .message-inline:empty { display: none; } @media (width < 560px) { .shell { padding: 0 var(--space-4); } } /* Mouvement : la page n'anime que `transform` et `opacity`, et s'arrête net quand le système le demande. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } .famille-tete:hover .famille-img, #categories .cat-card:hover { transform: none; } }