/* ===================================================================== KENTROW — Tokens de design (source unique de vérité) --------------------------------------------------------------------- AUCUNE couleur ne doit être écrite en dur ailleurs : tout passe par ces variables. C'est ce qui rend le thème sombre et les retouches futures triviales. Thème : piloté par l'attribut data-theme sur ou ===================================================================== */ :root { /* ---------- Palette de base (indépendante du thème) ---------- */ --color-brand-red: #e4271b; /* accent unique : sélection, panier */ --color-brand-red-dark: #b81d13; --color-brand-purple: #3b0f63; /* VIOLET ICONIQUE — banderole */ --color-brand-purple-d: #2a0847; --color-night: #101a2c; /* bleu nuit — newsletter + footer */ --color-night-soft: #16233b; /* ---------- THÈME CLAIR (par défaut) ---------- */ --color-bg: #ffffff; /* fond des pages */ --color-bg-alt: #fafafa; /* fonds secondaires (cadres, cartes) */ --color-bg-inset: #f2f2f2; /* creux, placeholders */ --color-surface: #ffffff; /* surfaces surélevées (tiroirs, modales) */ --color-text: #111111; /* texte courant */ --color-text-strong: #000000; /* titres pleins */ --color-text-muted: #6a6a6a; /* texte secondaire */ --color-text-invert: #ffffff; /* texte sur fond sombre */ --color-border: #e6e6e6; /* filets, cadres */ --color-border-strong: #2b2b2b; /* bordures marquées (cases de taille) */ --color-overlay: rgba(0, 0, 0, .45); --color-shadow: rgba(0, 0, 0, .14); /* Zones latérales : elles portent désormais les planches wax de la marque (assets/img/cote-1.png et cote-2.png, voir .side-rail dans style.css). --color-side-bg ne sert plus qu'aux surfaces sobres qui reprennent la trame ci-dessous ; --color-side-pattern la colore. */ --color-side-bg: #f4f4f4; --color-side-pattern: rgba(0, 0, 0, .05); /* Bandeau défilant — le fond SUIT LE THÈME, à l'inverse de la page : noir quand la page est claire, blanc quand elle est sombre. Le bandeau tranche ainsi toujours sur ce qui l'entoure (voir la redéfinition dans le bloc [data-theme="dark"] plus bas). */ --color-marquee-bg: #000000; --color-marquee-text: #ffffff; /* Accent bordeaux de la 3e bandeaux (au-dessus de « La collection »). Deux valeurs, et ce n'est pas un caprice : le bordeaux foncé demandé donne 1,9:1 sur fond noir, soit un texte quasi invisible. Il est donc réservé au thème sombre, où le bandeau est blanc (9,1:1). Sur fond noir, on garde la même teinte éclaircie juste ce qu'il faut pour repasser au-dessus du seuil de lisibilité. */ --color-marquee-accent: #d4566e; /* sur bandeau NOIR (thème clair) */ /* Newsletter — fond bleu nuit */ --color-news-bg: var(--color-night); --color-news-text: #ffffff; --color-news-muted: rgba(255, 255, 255, .72); /* Sections sombres (Notre Histoire, storytelling) */ --color-dark-bg: #0d0d0f; --color-dark-bg-alt: #16161a; --color-dark-text: #f4f4f4; --color-dark-muted: rgba(255, 255, 255, .68); --color-dark-pattern: rgba(255, 255, 255, .045); /* Blanc FIXE : pour le texte posé sur un fond sombre par nature (badge panier, bandeau) — ne doit pas s'inverser avec le thème, sinon il deviendrait illisible. */ --color-text-invert-fixed: #ffffff; /* Boutons pleins (Ajouter au panier, Voir nos produits, …). NE JAMAIS utiliser --color-text-strong comme fond : il vaut #000 en clair mais #fff en sombre, ce qui donnait un bouton blanc sur texte blanc. Ce couple-ci s'inverse proprement, ensemble. */ --color-btn-bg: #111111; --color-btn-text: #ffffff; --color-btn-bg-hover: var(--color-brand-red); --color-btn-text-hover: #ffffff; --color-btn-bg-off: #9a9a9a; /* bouton désactivé */ /* Label central du disque vinyle — violet iconique de la marque */ --color-vinyl-label: var(--color-brand-purple); --color-vinyl-label-lite: #4d1a7e; /* reflet du label */ /* Anneau de focus (accessibilité clavier) */ /* Anneau de focus (accessibilité clavier). WCAG 2.2 §1.4.11 exige 3:1 pour un indicateur d'état d'interface. L'ancienne valeur (.28) ne donnait que 1,85:1 sur une carte blanche : l'anneau existait, mais restait sous le seuil qu'il devait satisfaire. .55 le porte au-delà de 3:1 — calculé, pas estimé. */ --color-focus-ring: rgba(16, 26, 44, .55); /* Disque vinyle (loader « à venir ») */ --color-vinyl-a: #0d0d0d; --color-vinyl-b: #1e1e1e; /* États */ --color-success: #1c9a3f; --color-error: var(--color-brand-red); --color-info-bg: #f4effb; --color-info-text: #2a0847; --color-info-border: #d9c9ef; /* ---------- Typographie ---------- */ /* Police de MARQUE : lettrage rond et plein, dans l'esprit du logo « bulle » KentRow. Chewy n'a qu'une seule graisse (400) — ne jamais lui appliquer font-weight, le navigateur la graisserait artificiellement. ⚠ Elle doit être chargée page par page : toute page qui utilise --font-brand doit ajouter family=Chewy à son lien Google Fonts, sinon le repli silencieux sur Poppins passe inaperçu. */ --font-brand: 'Chewy', 'Anton', 'Poppins', cursive; --font-display: 'Anton', 'Poppins', Impact, sans-serif; /* titres affiche */ --font-head: 'Poppins', 'Inter', sans-serif; /* sous-titres, boutons */ --font-body: 'Inter', 'Poppins', sans-serif; /* corps de texte */ --fs-display: clamp(2rem, 7vw, 3.4rem); --fs-h1: clamp(1.6rem, 6vw, 2.4rem); --fs-h2: clamp(1.15rem, 3.6vw, 1.5rem); --fs-body: 1rem; --fs-small: .86rem; --fs-tiny: .76rem; --tracking-display: .5px; --tracking-wide: 1.5px; /* ---------- Espacements ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ---------- Mise en page ---------- */ --container: 900px; --container-wide: 1100px; --header-h: 64px; --pad-x: 18px; --radius: 4px; --radius-sm: 2px; /* ---------- Transitions ---------- */ --t-fast: .18s ease; --t-normal: .3s ease; --t-theme: .35s ease; } /* ===================================================================== THÈME SOMBRE Seules les variables de surface/texte changent : tous les composants suivent automatiquement. ===================================================================== */ :root[data-theme="dark"] { --color-bg: #0d0d0f; --color-bg-alt: #16161a; --color-bg-inset: #1c1c21; --color-surface: #16161a; --color-text: #ececef; /* contraste 15.8:1 sur --color-bg → AAA */ --color-text-strong: #ffffff; --color-text-muted: #a0a0a8; /* contraste 6.9:1 → AA */ --color-text-invert: #0d0d0f; --color-border: #2a2a31; --color-border-strong: #4a4a55; --color-overlay: rgba(0, 0, 0, .65); --color-shadow: rgba(0, 0, 0, .5); --color-side-bg: #131317; --color-side-pattern: rgba(255, 255, 255, .04); /* La banderole s'INVERSE avec le thème : fond blanc et lettrage noir quand la page est sombre. Elle garde ainsi le même rôle visuel — une bande qui tranche franchement sur ce qui l'entoure — au lieu de se fondre dans un fond de page devenu presque aussi noir qu'elle. Le lettrage de banderole-blanc.png étant blanc, il est inversé en CSS (filter sur .marquee__img, voir style.css) pour rester visible. */ --color-marquee-bg: #ffffff; --color-marquee-text: #0d0d0f; /* Bordeaux foncé demandé : ici il porte, car le bandeau est blanc. */ --color-marquee-accent: #7b2233; /* sur bandeau BLANC (thème sombre) */ /* Boutons pleins : on inverse le couple fond/texte d'un bloc, pour qu'ils restent lisibles sur fond sombre. */ --color-btn-bg: #ffffff; --color-btn-text: #0d0d0f; --color-btn-text-hover: #ffffff; --color-btn-bg-off: #3a3a42; /* Le rouge de marque est éclairci pour rester lisible sur fond sombre */ --color-brand-red: #ff4436; --color-info-bg: #1b1526; --color-info-text: #d8c9f0; --color-info-border: #3a2d52; --color-success: #4ade80; /* Le vinyle s'éclaircit légèrement pour rester visible sur fond sombre */ --color-vinyl-a: #1a1a1e; --color-vinyl-b: #2e2e36; /* .3 ne donnait que 2,70:1 sur --color-surface (#16161a) : sous le seuil WCAG de 3:1. .5 le dépasse nettement. */ --color-focus-ring: rgba(255, 255, 255, .5); } /* Transition douce entre les thèmes (désactivée pendant le 1er rendu par la classe .theme-init, pour éviter tout flash au chargement). */ body:not(.theme-init), body:not(.theme-init) .site-header, body:not(.theme-init) .site-footer, body:not(.theme-init) .product-card__frame, body:not(.theme-init) .pp__main { transition: background-color var(--t-theme), color var(--t-theme), border-color var(--t-theme); } @media (prefers-reduced-motion: reduce) { body, body * { transition-duration: .01ms !important; } } /* ===================================================================== MOTIF DES ZONES LATÉRALES ET DES FONDS SOBRES Généré en CSS : poids nul, net sur tous les écrans, et suit le thème. Pour y injecter un motif personnalisé plus tard, il suffit de redéfinir --pattern-image sur .side-rail ou .pattern-surface. ===================================================================== */ :root { /* Trame diagonale discrète */ --pattern-image: repeating-linear-gradient( 45deg, var(--color-side-pattern) 0 1px, transparent 1px 9px ); --pattern-size: auto; }