/* ═════════════════════════════════════════════════════════════════════════════ THÈME PARTAGÉ — FrenchShopper Chargé par toutes les pages publiques avant leur feuille de style propre, de la même façon que nav.js factorise la barre du haut et le pied de page. Avant ce fichier, chaque page redéclarait sa palette : sept copies à modifier pour changer une couleur, et elles avaient déjà divergé. ═════════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────────── PALETTE DE MARQUE — LE SEUL BLOC À REMPLACER QUAND LE NOUVEAU LOGO ARRIVERA. Neuf couleurs. Tout le reste du site en dérive, y compris le nav et le pied de page injectés par nav.js : aucune couleur n'est écrite en dur ailleurs. ───────────────────────────────────────────────────────────────────────────── */ :root{ /* Bleu canard, et non turquoise : sa teinte est à 186°, celle du turquoise à 174-176°. Ce commentaire annonçait « turquoise » et a entretenu la confusion pendant des semaines. Un essai en turquoise électrique #00FFEF a été déployé puis annulé — voir .backups/theme.css.avant-electrique dans l'historique. */ --brand:#0E7A86; /* bleu canard principal — boutons, chiffres, icônes */ --brand-deep:#0A5B65; /* survol, et texte de marque sur fond clair */ --brand-pale:#DDF0F2; /* turquoise très clair — pastilles et aplats d'accent */ --brand-wash:#F1F9FA; /* turquoise lavé — grandes surfaces */ --brand-vivid:#7DEBE0; /* turquoise vif — réservé aux fonds sombres */ --sand:#F6F1E6; /* beige clair — fond des sections alternées */ --sand-deep:#E7DCC7; /* beige soutenu — bordures et séparateurs */ --night:#0D1B1E; /* fond des bandes sombres */ --cta:#0B5F69; /* fond des appels à l'action pleine largeur */ } /* Variables dérivées. Les noms sont historiques : « white » signifie « surface de premier plan », pas la couleur blanche — il devient sombre en mode nuit. Ils sont conservés parce que nav.js et les onze autres pages les lisent déjà. */ :root{ --white:#FFFFFF; --bg-soft:var(--sand); --bg-deep:var(--night); --ink:#101718; --ink-soft:#59696B; --ink-faint:#6F7C7E; --accent:var(--brand); --accent-dark:var(--brand-deep); --accent-light:var(--brand-pale); --accent-lighter:var(--brand-wash); --lime:var(--brand-vivid); --on-accent:#FFFFFF; /* texte posé sur --accent */ --line:var(--sand-deep); /* Ambre et rouge : états d'alerte, hors palette de marque — ils doivent rester lisibles comme signaux quelle que soit la couleur de la marque. */ --amber:#9A6206; --amber-light:#FBF0DF; --error:#B3261E; --error-light:#FCE9E7; --r-xl:34px; --r-lg:24px; --r-md:16px; --r-sm:10px; /* Déclaré explicitement, et pas seulement en mode sombre : sans ça, tout composant dessiné par le navigateur — menus déroulants natifs, barres de défilement, champs de saisie, et le widget d'autocomplétion de Google — suit la préférence du SYSTÈME au lieu de celle du site. Un Mac en mode sombre sur un site en mode clair donnait un champ de recherche d'adresse noir au milieu du beige. */ color-scheme: light; --shadow:0 30px 60px -32px rgba(24,34,20,.26); --shadow-sm:0 12px 28px -18px rgba(24,34,20,.20); } /* Mode sombre : on ne repeint que la palette de marque, les dérivées suivent. Le beige devient un gris sombre légèrement bleuté, assorti au turquoise, plutôt /* Plus Jakarta Sans — la police système était le premier marqueur « amateur » : elle dit au visiteur qu'aucune décision typographique n'a été prise. Déclarée ici pour que toutes les pages la partagent ; la @font-face vient du Google Fonts posé dans chaque , en display=swap pour que le texte reste lisible pendant le téléchargement. */ body{ font-family:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }