/* ===================================================================== STELVOREN — JETONS DE DESIGN Source de vérité, relevée de la maquette Figma « Refonte » (Wiukeiz8DyfOof3a1OSaPR) le 21/08/2026 — plan de démarrage §4. Ces variables sont reprises à l'identique dans les réglages globaux d'Elementor (couleurs / polices V3, Variables V4) sous les mêmes noms. En cas de divergence, CE FICHIER fait foi : le tiroir panier et la carte produit ne passent pas par Elementor. ================================================================== */ :root { /* --- Couleurs — les sept variables Figma --------------------------- */ --stv-noir: #020a12; /* textes, bordures, filet pied de page */ --stv-anthracite: #24262e; /* boutons primaires, libellés collection, onglet actif */ --stv-bleu-petrole: #001d3d; /* fond réassurance haute, sur-titres */ --stv-gris-clair: #f2f6f8; /* fond cartes, champ recherche, marques, pied */ /* Figma `lightblue`. Bouton secondaire, PUIS — relevé du 21/09 — en-tête des pages légales (156:9309), encadré « L'essentiel » (156:9536), corps du tableau de prose (156:9617), section garantie du SAV. Aucun second bleu clair n'est nécessaire : les trois relevés donnent la valeur du bouton, au chiffre près. */ --stv-bleu-clair: #ecf7fe; /* Figma `Beige`. Le « crème » des inventaires de passe 1 : fond mission, textes réassurance haute, pastille du tiroir, en-têtes de Nos marques (156:10324) et de La marque (156:10630), voiles de l'Espace pro / Notre histoire / SAV, mosaïque de la FAQ, section du Contact, ligne de titre du compte (156:5777). Neuf emplois, une valeur — déjà la bonne depuis le 21/08. */ --stv-beige: #fef5ec; --stv-blanc: #ffffff; /* --- Dérivés relevés, présents partout ----------------------------- */ --stv-texte: var(--stv-noir); --stv-texte-secondaire: rgba(2, 10, 18, 0.8); --stv-texte-champ: rgba(2, 10, 18, 0.7); /* Référence produit, fil de la fiche, dernier maillon du fil d'Ariane, états d'achat — relevé Dev Mode 118:5866 à 0,5. Passé à 0,6 le 29/10 (tâche 168, B.2 et B.3) : 0,5 sur blanc donne 3,74:1, sous les 4,5:1 de WCAG 1.4.3 pour du texte de 12 à 14 (campagne Lighthouse du 08/10, 27 pages). 0,6 ≈ 5,3:1 sur blanc et 5,2:1 sur le gris des cartes, et c'est une opacité que la maquette emploie déjà ailleurs. Écart visuel assumé. */ --stv-texte-tertiaire: rgba(2, 10, 18, 0.6); --stv-filet-onglets: rgba(36, 38, 46, 0.4); --stv-filet-puces: rgba(2, 10, 18, 0.25); /* cadres des puces de livraison — relevé Dev Mode 156:11124 */ --stv-onglet-inactif: rgba(36, 38, 46, 0.8); --stv-fond-etat: rgba(36, 38, 46, 0.05); /* cadre « Sur commande » — relevé Dev Mode 118:5885 */ --stv-pastille: rgba(0, 29, 61, 0.1); --stv-fond-quantite: rgba(2, 10, 18, 0.1); /* boutons − et + du sélecteur compact — relevé Dev Mode 156:11412, 156:11415 */ --stv-fond-action: #e2e6e9; /* carré des commandes d'une carte : cœur 156:5296, corbeille 156:5375, flèches de galerie 156:5364 */ --stv-voile-references: rgba(2, 10, 18, 0.6); /* --- Formulaires — relevé Dev Mode du 21/09 sur 156:10526 → 156:10582 (Espace pro). Les cinq formulaires du site partagent ces trois valeurs : SAV, Contact, infolettre, commande et compte. */ --stv-filet-champ: rgba(36, 38, 46, 0.35); /* bordure de champ — 156:10530 */ --stv-texte-indication: rgba(36, 38, 46, 0.5); /* placeholder — 156:10531 */ --stv-texte-mention: rgba(36, 38, 46, 0.7); /* mention sous le bouton — 156:10582 */ /* --- Filets DONT LE TRAIT N'A PAS PU ÊTRE RELEVÉ ------------------ Les deux filets ci-dessous sont dessinés en vecteur dans Figma et le Dev Mode les sert en SVG, sans variable ni valeur lisible ; le serveur d'assets n'était pas joignable depuis le conteneur le 21/09. Les valeurs sont donc PROVISOIRES, choisies dans la logique de la palette et conformes au rendu. Elles sont en tête de la liste « à confirmer » du relevé du jour : deux lignes à changer le jour où le designer livre ses fichiers. */ --stv-filet-entete: rgba(2, 10, 18, 0.15); /* filets de la citation — 156:10633 */ --stv-filet-tableau: var(--stv-blanc); /* lignes du tableau — 156:9623 */ /* Anthracite à 20 % : sous la barre d'outils du catalogue (156:6693) et sous chaque question de la FAQ de catégorie (156:10129). Vu deux fois le 24/09 — donc un jeton. */ --stv-filet-liste: rgba(36, 38, 46, 0.2); /* Anthracite à 15 % : sous l'en-tête du tableau du panier (156:10694) et entre ses lignes (156:10699). Vu deux fois le 28/09 — le récapitulatif de la commande (145) le reprendra entre les articles. */ --stv-filet-panier: rgba(36, 38, 46, 0.15); /* --- Voiles des bannières et bandeaux ------------------------------ Trois voiles relevés, trois emplois distincts — à ne pas confondre avec `--stv-voile-hero`, qui appartient au seul hero de l'accueil. */ /* Voile plat, Espace pro (156:10509) — et SAV, même famille. */ --stv-voile-creme: rgba(254, 245, 236, 0.8); /* Voile latéral, Notre histoire (156:9485) : crème opaque à gauche, presque transparent à droite, pour un texte posé à gauche. */ --stv-voile-creme-lateral: linear-gradient( 90deg, #fef5ec 10.367%, rgba(254, 245, 236, 0.8) 40.245%, rgba(254, 245, 236, 0.1) 100% ); /* Bandeau photo à texte blanc (156:10651, 156:9531) : bleu pétrole, léger en haut, appuyé en bas, là où le texte se pose. RENFORCÉ LE 30/09 (La marque, décision de Logan). La maquette dessine .05 → .5 à 90 % ; mesuré pixel par pixel sous le titre blanc, sur la vraie photo du showroom, ce voile laissait 24 % des pixels sous 4,5:1 en 1840 (minimum 2,7) et 47 % en 393 (minimum 2,1 — le titre y est plus haut dans le cadre, là où le voile est léger). Avec .6 dès 45 % et .7 en bas, TOUS les pixels sont au-dessus de 4,5:1 : minimum 5,5 en 1840, 4,9 en 393. Le haut de la photo ne change pas ; le bas est plus sombre que la maquette — écart assumé, la règle du site est le contraste. Seul le bandeau emploie ce jeton (La marque, puis le guide 126). */ --stv-voile-bandeau: linear-gradient( 180deg, rgba(0, 29, 61, 0.05) 0%, rgba(0, 29, 61, 0.6) 45%, rgba(0, 29, 61, 0.7) 100% ); /* Le même voile pour un texte CENTRÉ en hauteur — ajouté le 05/10 (pages conseils). En mobile, le bandeau d'en-tête de page (`stv-bandeau--tete`, 156:8678) centre son H1 dans le cadre de 420 : le titre monte là où le voile ci-dessus est encore léger. Mesuré pixel par pixel à 393 sous le H1 du guide Pilates : minimum 2,7:1 avec `--stv-voile-bandeau`, 5,6 avec celui-ci, qui s'appuie dès le haut. Seule la règle mobile du bandeau d'en-tête l'emploie (socle § 11). */ --stv-voile-bandeau-centre: linear-gradient( 180deg, rgba(0, 29, 61, 0.4) 0%, rgba(0, 29, 61, 0.65) 25%, rgba(0, 29, 61, 0.7) 100% ); /* Le même voile pour un texte posé À DROITE — ajouté le 23/10 (fiche produit, section « Image + texte », 315:17636 : colonne de 672 à 80 du bord droit, soit de 59 % à 96 % de la largeur). La maquette dessine un voile qui s'appuie à GAUCHE (bleu pétrole .8 → 0 vers la droite) : sous le texte il ne vaut plus que .33 à .03, et le blanc ne tient pas 4,5:1 sur une photo claire. Retourné ici, léger à gauche, appuyé sous la colonne de texte ; valeurs mesurées pixel par pixel sur la photo réelle du produit témoin (relevé du lot). Seule la variante `stv-bandeau--lateral` l'emploie (socle § 3). */ --stv-voile-bandeau-lateral: linear-gradient( 90deg, rgba(0, 29, 61, 0.1) 0%, rgba(0, 29, 61, 0.45) 40%, rgba(0, 29, 61, 0.7) 58%, rgba(0, 29, 61, 0.75) 100% ); /* Voile des panneaux latéraux (156:11328) : bleu pétrole à 40 %, flou de 2 px posé à côté (composants.css). Le tiroir panier aujourd'hui, le panneau de filtres du catalogue (92) demain — un module, un voile. */ --stv-voile-lateral: rgba(0, 29, 61, 0.4); /* --- Messages — NON DESSINÉS DANS LA MAQUETTE --------------------- Les deux couleurs ci-dessous ne sont pas dans la palette Figma : ce sont celles de WooCommerce, gardées parce qu'elles DISENT quelque chose — même parti que le vert et le rouge d'Elementor sur l'infolettre du pied. Elles ne servent qu'en liseré, jamais en fond, et la question part au designer avec la fiche 142. */ --stv-message-succes: #0f834d; --stv-message-erreur: #cc1818; /* Voile du hero : dégradé vertical .65 → .12 à 35 % → .65 à 65 % */ --stv-voile-hero: linear-gradient( 180deg, rgba(2, 10, 18, 0.65) 0%, rgba(2, 10, 18, 0.12) 35%, rgba(2, 10, 18, 0.65) 65% ); /* --- Typographie --------------------------------------------------- */ --stv-police-titres: "Outfit", system-ui, sans-serif; --stv-police-texte: "Inter", system-ui, sans-serif; /* Tailles desktop ; les bascules mobiles sont en fin de fichier. */ --stv-taille-hero: 62px; /* titre hero, phrase-manifeste — 1.1, -0.01em */ --stv-taille-h2: 50px; /* H2 de section — 1.1, -0.005em */ --stv-taille-h2-sombre: 48px; /* H2 sur fond sombre (références) */ --stv-taille-h3: 32px; /* citation d'en-tête de page (156:10634), titre de carte de formulaire (156:10525) — 1.1 */ --stv-taille-intertitre: 24px; /* intertitres de prose, en-tête de tableau (156:9614) — 1.5 */ --stv-taille-carte: 20px; /* titres de carte, titres du pied, onglets */ --stv-taille-texte: 16px; /* corps, navigation, noms de produit — 1.5 */ --stv-taille-accroche: 20px; /* accroche du hero, chapeaux de section — 1.5 */ --stv-taille-surtitre: 16px; /* sur-titre avec icône ↳, bleu pétrole */ --stv-taille-petit: 14px; /* prix, dates, pastilles, URL studio */ --stv-taille-copyright: 12px; /* copyright du pied, date des pages légales en mobile (156:8205) */ --stv-taille-liste-liens: 24px; /* liste-liens de la mission — 1.1 */ --stv-interligne-titre: 1.1; --stv-interligne-texte: 1.5; /* --- Espacements — échelle relevée --------------------------------- */ --stv-espace-4: 4px; --stv-espace-6: 6px; --stv-espace-8: 8px; --stv-espace-12: 12px; --stv-espace-16: 16px; --stv-espace-24: 24px; --stv-espace-32: 32px; --stv-espace-48: 48px; --stv-espace-80: 80px; --stv-section-y: var(--stv-espace-80); /* marge interne de section */ --stv-entete-grille: var(--stv-espace-80); /* entre en-tête de section et grille */ --stv-carte-padding: var(--stv-espace-16); /* --- Grille et formes ---------------------------------------------- */ --stv-largeur-contenu: 1680px; /* 4 × 384 + 3 × 48 */ /* La colonne de lecture des pages de contenu : filets de l'en-tête (156:10633), encadré (156:9536), colonne de prose des pages légales (156:9317), colonne de texte des sections texte + image (156:10637), tableau (156:9612). Vue six fois — donc un jeton. */ --stv-largeur-texte: 816px; /* La largeur d'une carte blanche de page : carte de formulaire de l'Espace pro (156:10524), du SAV (156:10922), du Contact (156:9215) et carte téléphone du Contact (156:9255). Vue quatre fois — devenue jeton le 23/09 ; elle vivait jusque-là dans `stv-carte--formulaire`. */ --stv-largeur-carte: 648px; /* Marge latérale d'une section pleine largeur : 1840 − 1680 = 160, soit 80 de chaque côté. 32 en tablette, 20 en mobile (plus bas). LA RÈGLE DU CADRE (26/10 — nœud 331:20582 « Animations, règles et intégration », recette d'Estevan R11 / R12, tâche 193) : le contenu se borne à 1 680 et la navigation à 1 776 ; au-delà de 1 840 les deux se centrent et seuls les fonds continuent. Marges latérales : navigation 32 / 24 / 16, contenu 80 / 32 / 20 (écrans 1 440, 980, 393 de la planche). Le 16 de tablette et de mobile d'avant (« au rythme de l'en-tête ») disparaît : l'en-tête a désormais sa propre marge, `--stv-entete-gouttiere`, et le contenu des pages du thème rejoint celui des pages Elementor (32 et 20 depuis le kit). */ --stv-page-gouttiere: var(--stv-espace-80); --stv-largeur-navigation: 1776px; /* 1840 − 2 × 32 */ /* Marge de la barre de navigation SOUS 1 025. Au-dessus, la barre suit `--stv-entete-rythme` (composants.css : 16 à 1 025, 32 dès 1 440). */ --stv-entete-gouttiere: var(--stv-espace-32); --stv-colonne: 384px; --stv-gouttiere: 48px; --stv-rayon: 0; /* AUCUN arrondi nulle part — maquette du 21/08 */ /* Largeur d'un panneau latéral (156:11304). Sous 608, il prend l'écran. */ --stv-lateral-largeur: 608px; /* --- Boutons -------------------------------------------------------- */ --stv-bouton-hauteur: 48px; --stv-bouton-padding: 12px 24px; --stv-bouton-primaire-fond: var(--stv-anthracite); --stv-bouton-primaire-texte: var(--stv-blanc); --stv-bouton-secondaire-fond: var(--stv-bleu-clair); --stv-bouton-secondaire-texte: var(--stv-noir); /* Tertiaire (331:10561) : gris neutre, texte gris moyen. Deux valeurs hors palette, telles que relevées — un seul emploi possible. */ --stv-bouton-tertiaire-fond: #d3d4d5; --stv-bouton-tertiaire-texte: #7c7d82; /* SURVOLS — dessinés le 26/10 (composant 331:10548, recette d'Estevan R4, tâche 191). Chaque survol = un fond + une LUEUR INTÉRIEURE venue du haut, portée par `box-shadow: inset` (ne déplace rien, ne change aucune dimension). Jetons et non valeurs : les boutons primaires du panier, du tunnel, de la fiche, du devis et des formulaires les reprennent tous, pour qu'un seul survol existe sur le site. */ --stv-bouton-primaire-survol-fond: var(--stv-noir); /* 331:10551 */ --stv-bouton-primaire-survol-lueur: inset 0 6px 22.6px rgba(255, 255, 255, 0.14); --stv-bouton-secondaire-survol-fond: var(--stv-beige); /* 331:10557 */ --stv-bouton-secondaire-survol-lueur: inset 0 4px 10.9px var(--stv-blanc); --stv-bouton-tertiaire-survol-fond: var(--stv-noir); /* 331:10563 */ --stv-bouton-tertiaire-survol-texte: var(--stv-blanc); --stv-bouton-transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; /* SURVOL DES PHOTOS — recette d'Estevan R27 / R29 (28/10, tâche 204) : « diminuer le zoom de l'image et accélérer l'anim », puis le même survol sur les photos du méga-menu. Valeurs validées par Logan : × 1,08 en 0,3 s (la carte article zoomait × 1,29 en 0,5 s, la cote de 331:12485). Deux composants, un seul réglage. */ --stv-survol-zoom: 1.08; --stv-survol-duree: 0.3s; --stv-survol-courbe: cubic-bezier(0.4, 0, 0.2, 1); /* --- En-tête (relevé navbar du 24/08, nœuds 11:3726 et 11:3961) ----- */ /* 80 depuis le 26/10 (recette d'Estevan R2, tâche 189 ; arbitrage de Logan) : padding vertical 24 → 16, logo inchangé (293 × 48). Était 96. */ --stv-entete-hauteur: 80px; /* desktop */ --stv-entete-hauteur-mobile: 56px; /* Barre « Livraison offerte dès 80€ d'achat ». Relevée à 40 le 24/08 sur un nœud antérieur ; les variantes définitives donnent 48 en desktop (11:3726) et 30 en mobile (11:3961). Corrigé le 27/08. */ --stv-annonce-hauteur: 48px; --stv-annonce-hauteur-mobile: 30px; } /* --- Bascule tablette (≤ 1024 px) ------------------------------------ */ @media (max-width: 1024px) { :root { --stv-page-gouttiere: var(--stv-espace-32); /* 331:20602 — était 16 */ --stv-entete-gouttiere: var(--stv-espace-24); /* 331:20599 */ } } /* --- Bascule mobile (≤ 767 px, point de rupture Elementor) ----------- */ @media (max-width: 767px) { :root { --stv-page-gouttiere: 20px; /* 331:20609 — était 16 */ --stv-entete-gouttiere: var(--stv-espace-16); /* 331:20606 */ --stv-taille-hero: 42px; --stv-taille-h2: 32px; --stv-taille-h2-sombre: 32px; --stv-taille-h3: 24px; --stv-taille-intertitre: 20px; --stv-taille-surtitre: 14px; --stv-taille-accroche: 16px; --stv-taille-liste-liens: 18px; --stv-section-y: var(--stv-espace-32); --stv-entete-grille: var(--stv-espace-32); } }