/* ===================================================================== STELVOREN — FICHE PRODUIT, SQUELETTE (tâche 70) Mesures relevées sur les frames Figma 118:5827 (desktop, 1840) et 118:5671 (mobile, 393) : contenu 1680, colonne galerie ≈ 960, colonne résumé 672, gouttière 48. La somme tombe juste — 960 + 48 + 672 = 1680 — et ce n'est pas un hasard : la barre d'achat collante de la tâche 76 fait elle aussi 672, parce qu'elle s'aligne sur cette colonne. Ce fichier ne porte QUE la mise en page du squelette. L'habillage des blocs arrive avec eux : galerie (71), résumé (72), achat (73), puces (75), barre (76), onglets (77), collection (78). Les jetons font foi (assets/css/jetons.css). Aucune valeur en dur qui existe déjà comme variable. ================================================================== */ /* --------------------------------------------------------------------- La marge latérale, en une variable Échelle décidée pour l'accueil et reprise ici : 80 / 48 / 32 / 20. Une variable plutôt qu'une règle par bloc : les quatre sections de la fiche doivent s'aligner au pixel, et trois déclarations séparées finissent toujours par diverger. ------------------------------------------------------------------ */ /* LE PLAFOND DE HELLO ELEMENTOR. `main.site-main` reçoit une largeur maximale des réglages de mise en page du thème parent (Hello Elementor → Réglages → Mise en page, largeur de contenu, 1140 par défaut). Notre grille a beau viser 1680, elle est enfermée bien avant — constaté le 15/09 sur la fiche, contenu rendu à ~1110 px au lieu de 1680. On lève le plafond LÀ OÙ IL EST, sur la seule page produit, plutôt que de changer un réglage global qui toucherait toutes les pages du site et qu'il faudrait re-capturer. Même raisonnement que pour le hero, dont le plafond venait d'Elementor. Classe répétée : le sélecteur du parent n'est pas connu avec certitude et peut changer d'une version à l'autre. Deux fois la même classe pèse 0,2,0 et passe devant tout ce que Hello écrit avec une classe et un élément — c'est l'idiome de `piege-specificite-elementor.md`. */ main.stv-fiche-page.stv-fiche-page { max-width: none; width: 100%; padding-inline: 0; /* LE FOND DE LA SECTION — relevé au screenshot Figma du 15/09. Gris clair du bandeau du haut jusqu'au bas des onglets. « Dans la même collection » repasse en blanc plus bas ; la réassurance vit hors de `main` et garde son propre fond bleu pétrole. Posé ICI plutôt que sur une enveloppe dédiée : le fil d'Ariane est rendu par `single-product.php` et les onglets par `content-single-product.php`, donc aucun élément commun ne les contient tous les deux sans toucher aux deux gabarits. `main` les contient déjà. */ background: var(--stv-gris-clair); /* LES 48 DU HAUT SONT UN PADDING, PAS UNE MARGE SUR LE FIL. Elles l'étaient, et ça se voyait : une marge haute portée par le PREMIER enfant d'un conteneur sans bordure ni marge intérieure FUSIONNE avec celle du conteneur et ressort de lui. Les 48 px poussaient donc `main` vers le bas au lieu de s'y ajouter, et la bande ainsi libérée montrait le fond de page — un ruban blanc au ras du menu, là où la maquette veut du gris. Un padding ne fusionne jamais. C'est aussi ce qui referme la boîte de `main` : tant qu'elle n'a ni bordure ni padding en haut, toute marge de premier enfant s'échappera de la même façon. */ padding-block-start: var(--stv-espace-48); } /* … et la collection reprend le blanc : pleine largeur dans `main`, son propre fond suffit à couper le gris. Ses règles vivent avec elle, dans la section « Dans la même collection » en fin de fichier (78). */ .stv-fiche-page { --stv-fiche-marge: var(--stv-espace-80); /* Vignettes de la galerie — relevé `118:5841` et `118:5848`. Déclarées ici et non sur `.stv-galerie` : la grille les lit aussi. */ --stv-vignette: 64px; --stv-vignette-gouttiere: var(--stv-espace-16); } @media (max-width: 1439px) { .stv-fiche-page { --stv-fiche-marge: var(--stv-espace-48); } } @media (max-width: 1024px) { .stv-fiche-page { --stv-fiche-marge: var(--stv-espace-32); } } @media (max-width: 767px) { .stv-fiche-page { --stv-fiche-marge: 20px; } } /* --------------------------------------------------------------------- Le bandeau de contenu Marge et plafond sur le MÊME élément, plutôt qu'une enveloppe et un intérieur comme le pied : le plafond intègre les deux marges, donc la zone de contenu fait bien 1680 et non 1680 moins les marges. C'est la seule subtilité de ce fichier, et elle vaut mieux qu'un div de plus dans chaque section. ------------------------------------------------------------------ */ .stv-fil, .stv-fiche__grille { box-sizing: border-box; max-width: calc(var(--stv-largeur-contenu) + 2 * var(--stv-fiche-marge)); margin-inline: auto; padding-inline: var(--stv-fiche-marge); } /* LES ONGLETS ET LA COLLECTION SONT SORTIS DE CE BANDEAU le 15/09, et pas pour la même raison. Les onglets sont une CARTE BLANCHE sur le gris (`118:5911`, 1680 de large, 48 de marge intérieure) : leur fond s'arrête à la largeur de contenu, donc leur boîte fait 1680 et non 1680 + les gouttières. La collection est une SECTION BLANCHE pleine largeur (`118:5929`) : son fond va d'un bord à l'autre de l'écran, et c'est son contenu qui est capé. Avec l'ancien bandeau, un écran de 2560 laissait 360 px de gris de chaque côté. `width: calc(100% - 2 * marge)` plutôt que `padding-inline` : la gouttière reste à l'EXTÉRIEUR du fond blanc, ce que la maquette demande, alors qu'un padding l'aurait peinte en blanc. */ .stv-fiche__onglets { box-sizing: border-box; width: calc(100% - 2 * var(--stv-fiche-marge)); max-width: var(--stv-largeur-contenu); margin-inline: auto; background: var(--stv-blanc); } /* --------------------------------------------------------------------- Le fil d'Ariane — relevé `118:5831` Inter Light 14 en noir plein pour les maillons cliquables, Inter Regular 14 à 50 % pour le dernier. Le contraste s'inverse donc par rapport à ce qui était posé : les liens étaient à 80 % et le dernier à 70 %, presque indistincts. Marges : 8 px au-dessus et en dessous du texte (`py-8` de la maquette), et 48 px entre le haut de la section et le fil — la frame `118:5830` commence à y = 48 dans `118:5829`. La maquette ne montre pas le nom du produit dans le fil ; ce point attend la réponse du designer (tâche 67), donc rien n'est retiré. ------------------------------------------------------------------ */ /* LE DERNIER MAILLON N'EST PAS UN ÉLÉMENT — c'est un nœud de texte nu. `woocommerce/breadcrumb.php` n'enveloppe pas le dernier maillon : il l'écrit en texte, sans balise. Aucun sélecteur CSS ne peut l'atteindre, et les deux sélecteurs posés à la 70 pour le griser (`.breadcrumb_last`, `> span > span:last-child`) ne touchaient rien — vérifié en façade le 15/09 : zéro correspondance. On prend donc le problème dans l'autre sens. Le NAV porte la couleur du dernier maillon, et ce sont les LIENS qui remontent en noir plein. Le texte nu hérite, sans qu'on ait à le nommer. Effet de bord bienvenu : les chevrons séparateurs prennent eux aussi le ton pâle, ce que fait la maquette. `line-height: normal` et non l'interligne de texte : la maquette donne un fil de 33 px de haut pour 8 px de marge au-dessus et en dessous, soit 17 px de texte — du 14 px à 1,2, pas à 1,5. */ .stv-fil { padding-block: var(--stv-espace-8); font-size: var(--stv-taille-petit); font-weight: 400; line-height: normal; color: var(--stv-texte-tertiaire); } /* CLASSE RÉPÉTÉE SUR LE NAV — huitième occurrence du piège. `.stv-fil a` pèse 0,1,1, exactement comme `.elementor-kit-44301 a`. À égalité, c'est l'ordre de chargement qui tranche, et le kit passe après le thème : les maillons sortaient en Regular avec l'interligne du kit, d'où un fil de 40 px là où la maquette en donne 33. Le symptôme est sournois parce que la COULEUR passait — le kit n'en pose pas sur `a` — et qu'une couleur juste avec une graisse fausse ne se lit pas sur une capture. `.stv-fil.stv-fil a` pèse 0,2,1 et reprend la main sur les trois propriétés. */ .stv-fil.stv-fil a { color: var(--stv-texte); /* `font-size` REDÉCLARÉE, alors que le nav la porte déjà. L'héritage est la plus faible des sources : n'importe quelle déclaration visant `a` directement l'emporte, quelle que soit sa spécificité. Le kit en pose une — les maillons sortaient à 16 px dans un fil réglé à 14. C'est la variante silencieuse du piège de spécificité : ici ce n'est pas un sélecteur plus lourd qui gagne, c'est le simple fait qu'une valeur héritée n'est pas une valeur déclarée. Corollaire pour la suite : dans un bloc où le kit peut écrire sur `a`, `button` ou un titre, il ne suffit pas de régler le parent. */ font-size: var(--stv-taille-petit); font-weight: 300; line-height: normal; text-decoration: none; } .stv-fil.stv-fil a:hover, .stv-fil.stv-fil a:focus-visible { text-decoration: underline; } /* Yoast, lui, enveloppe le dernier maillon. Il hérite déjà du bon ton ; la règle reste pour le cas où un lien s'y glisserait. */ .stv-fil .breadcrumb_last, .stv-fil a.breadcrumb_last { color: var(--stv-texte-tertiaire); font-weight: 400; } /* MOBILE : UNE SEULE LIGNE, QUI GLISSE SOUS LE DOIGT — relevé `118:5675`. La maquette mobile ne replie pas le fil : 12 px, écart 8, et un fil plus large que l'écran (444 px de texte pour 353 de large) dont la fin disparaît sous un FONDU vers le gris de la section — le nœud `118:5683`, un dégradé de transparent à `#f2f6f8` sur les 18 derniers pour cent. Le glissement est natif : `overflow-x: auto` et rien d'autre, pas une ligne de script. Le fondu est un MASQUE (`mask-image`) et non un calque posé par-dessus : un masque s'applique à la boîte visible de l'élément et reste donc à sa place quand le contenu défile, là où un `::after` en position absolue défilerait avec le texte. Le fondu est permanent, comme dans la maquette — y compris une fois arrivé au bout. Le faire disparaître à la fin du défilement demanderait un écouteur `scroll` ; on ne l'ajoute pas pour 18 % d'une ligne de 12 px. Le dégradé part de la couleur de section (`--stv-gris-clair`) : si le fond de la fiche change, c'est le jeton qui suit, pas ce bloc. `padding-inline` conservé : la marge latérale de la page reste la même, et le début du fil s'aligne sur la galerie en dessous. */ @media (max-width: 767px) { .stv-fil { /* 15 px de haut dans la maquette (`118:5675`) : le texte seul, sans les 8 px de marge du desktop. Le rythme vertical mobile est posé plus bas, avec la grille. */ padding-block: 0; font-size: var(--stv-taille-copyright); white-space: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 81.6%, transparent); mask-image: linear-gradient(to right, #000 81.6%, transparent); } .stv-fil::-webkit-scrollbar { display: none; } /* L'espace de fin. Un conteneur qui défile en ligne ignore sa marge intérieure droite dans plusieurs navigateurs : sans cet élément vide, le dernier maillon vient buter contre le bord de l'écran une fois le fil tiré au bout. Il mesure la marge de page, donc la fin du fil s'aligne aussi. */ .stv-fil::after { content: ""; display: inline-block; width: var(--stv-fiche-marge); height: 1px; } /* Regular partout en mobile (`118:5676`), et non Light comme en desktop : à 12 px, le Light ne tient plus le contraste. */ .stv-fil.stv-fil a { font-size: var(--stv-taille-copyright); font-weight: 400; } } /* --------------------------------------------------------------------- La grille galerie | résumé Colonnes proportionnelles et non en pixels : entre 980 et 1680 elles se resserrent ensemble au lieu de déborder. Même raisonnement que la grille du pied. L'IMAGE TIENT DANS LA FENÊTRE — demande de Logan du 15/09. La maquette est dessinée à 1840 × 4578 : une frame sans hauteur de fenêtre. Sur un écran de 1920 × 937, la grande image de 880 dépasse le bas de l'écran et se retrouve coupée ; c'est le cas courant d'un portable. La règle : la colonne galerie prend la plus PETITE de deux largeurs — sa part proportionnelle (960 sur 1632 du contenu hors gouttière, la proportion de la maquette) ou ce que la hauteur disponible autorise pour une image carrée. La colonne de droite prend tout le reste (`1fr`), et non plus 672 fixes. La hauteur disponible se calcule depuis les jetons : barre d'annonce, en-tête, les 48 du haut de section, le fil (33, sa hauteur relevée), les 24 au-dessus de la grille, et 48 de respiration sous l'image. La barre d'administration WordPress s'ajoute quand elle est là — c'est la variable que WordPress pose lui-même sur `html`. La colonne étant plus large que l'image de la colonne de vignettes et de sa gouttière (80), ces 80 sont rendus au calcul ; sur une galerie à une seule image il n'y a pas de colonne de vignettes, et `.stv-fiche--galerie-unique` les retire. `100vh` et non `100dvh` : la règle ne s'applique qu'à partir de 980, là où la barre d'adresse mobile n'existe pas. Sur un grand écran, `min()` garde la proportion de la maquette : la hauteur ne contraint que lorsqu'elle manque. CONSÉQUENCE POUR LA 76, plus vraie encore : la colonne de droite ne fait 672 px que sur un écran assez haut ET assez large. La barre d'achat collante devra lire la largeur réelle de `.stv-fiche__resume`. ------------------------------------------------------------------ */ .stv-fiche__grille { --stv-fiche-haut: calc( var(--wp-admin--admin-bar--height, 0px) + var(--stv-annonce-hauteur) + var(--stv-entete-hauteur) + var(--stv-espace-48) + 33px + var(--stv-espace-24) ); --stv-galerie-decalage: calc(var(--stv-vignette) + var(--stv-vignette-gouttiere)); --stv-galerie-plafond: calc(100vh - var(--stv-fiche-haut) - var(--stv-espace-48) + var(--stv-galerie-decalage)); --stv-galerie-part: calc((100% - var(--stv-gouttiere)) * 960 / 1632); display: grid; grid-template-columns: minmax(0, min(var(--stv-galerie-part), var(--stv-galerie-plafond))) minmax(0, 1fr); gap: var(--stv-gouttiere); align-items: start; /* 24 au-dessus, et non 48 : les 48 du haut de section sont passés au fil d'Ariane, qui est désormais le premier élément de la page. Relevé `118:5839`, à y = 57 dans une frame dont le fil occupe les 33 premiers pixels. */ padding-block: var(--stv-espace-24) var(--stv-section-y); } .stv-fiche--galerie-unique .stv-fiche__grille { --stv-galerie-decalage: 0px; } /* Empilement sous 980 : la règle de la tâche 8, reprise telle quelle. */ @media (max-width: 979px) { .stv-fiche__grille { grid-template-columns: minmax(0, 1fr); gap: var(--stv-espace-32); } } /* LE RYTHME VERTICAL MOBILE — relevé `118:5671`, signalé par Logan le 15/09. Les valeurs desktop (48 / 8 / 24 / 80 / 48) ne descendent pas telles quelles sur 393 px : la maquette mobile resserre tout. y = 86 fin de l'en-tête (30 + 56, les jetons mobiles) +12 marge haute de la section → `main`, 12 et non 48 15 le fil, texte seul → `.stv-fil`, plus haut +12 avant la galerie → grille, 12 et non 24 580 la galerie +32 avant le résumé → `gap` de la grille, déjà 32 … +32 sous la fiche, avant la carte → grille, 32 et non 80 16 marge intérieure de la carte → onglets, 16 et non 48 +32 sous la carte → onglets, 32 et non 80 Point de rupture à 767 comme pour les jetons : entre 768 et 979 la grille est déjà empilée mais garde les espacements desktop — la maquette n'a pas de frame tablette, et c'est la lecture la plus proche des deux qu'elle a. */ @media (max-width: 767px) { main.stv-fiche-page.stv-fiche-page { padding-block-start: var(--stv-espace-12); } .stv-fiche__grille { padding-block: var(--stv-espace-12) var(--stv-espace-32); } /* La carte des onglets (16 / 32) est réglée à côté de sa règle desktop, plus bas : à poids égal, c'est l'ordre qui tranche. */ } .stv-fiche__galerie, .stv-fiche__resume { min-width: 0; /* sans quoi une image large fait déborder la colonne */ } /* LA COLONNE DE DROITE EST UNE SEULE COLONNE À 24 — relevé 72. La maquette ne sépare pas « le résumé » et « l'achat » : `118:5861` est un unique empilement à écart 24, du nom de marque jusqu'à la liste « Choisir une option ». Nos blocs sont découpés par tâche — 72 le résumé, 73 le formulaire, 74 Alma, 75 les puces — mais le rythme, lui, appartient à la colonne, pas aux blocs. Il est donc posé ICI, une fois, et aucun des quatre n'aura à porter de marge basse. */ .stv-fiche__resume { display: flex; flex-direction: column; gap: var(--stv-espace-24); } /* --------------------------------------------------------------------- Le rythme vertical des sections basses ------------------------------------------------------------------ */ /* Les onglets : 48 de marge intérieure sur les quatre côtés (relevé `118:5912`, premiers enfants à x = 48 et y = 48), et 80 sous la carte avant la section suivante — les 80 du dessus viennent déjà du bas de la grille. */ .stv-fiche__onglets { padding: var(--stv-espace-48); margin-block-end: var(--stv-section-y); } /* Mobile — relevé `118:5749` : 16 de marge intérieure, 32 dessous. ICI et non dans le bloc mobile de la grille : même poids que la règle du dessus, donc elle doit venir après. */ @media (max-width: 767px) { .stv-fiche__onglets { padding: var(--stv-espace-16); margin-block-end: var(--stv-espace-32); } } /* `:empty` A ÉTÉ RETIRÉ LE 15/09 — il ne marchait pas. Un gabarit PHP laisse des sauts de ligne et des tabulations entre ses balises, et en local `stelvoren_fiche_partie()` dépose en plus un commentaire HTML. Chrome ne considère pas un élément à espaces blancs comme vide : la règle n'a jamais rien masqué depuis la 70. Invisible tant que ces conteneurs n'avaient ni fond ni marge — la collection est devenue une bande blanche de 160 px le jour où elle a reçu les deux. C'est `stelvoren_fiche_section()` qui décide maintenant, en PHP : pas de contenu, pas de conteneur. Une règle CSS ne peut pas juger du vide, le PHP si. */ /* --------------------------------------------------------------------- Les zones d'injection Volontairement SANS plafond ni marge latérale : la section Elementor que le client y dépose porte ses propres réglages de largeur, et la contraindre ici lui interdirait le pleine-largeur. On ne règle que le rythme vertical. ------------------------------------------------------------------ */ /* LA ZONE N'ÉCARTE PLUS RIEN — 18/09. Elle posait 80 de marge haute et basse. Or un bloc injecté est un conteneur Elementor, et le kit donne aux conteneurs une marge INTÉRIEURE de 80 en desktop, 32 en tablette, 20 en mobile. Les deux s'additionnaient : 160 px au-dessus des cartes services, pour 80 voulus par la maquette. Et depuis que ces blocs portent un fond — les cartes services sont sur du blanc alors que la fiche est sur du gris —, une marge posée DEHORS laisse voir la couleur de la page entre la section précédente et le fond du bloc. Le bloc doit donc aller bord à bord, et porter lui-même sa respiration. La règle est ainsi : l'espacement d'un bloc injecté appartient au bloc, jamais à la zone. C'est aussi ce qui permet au client de le régler dans Elementor sans qu'on ait à toucher au thème. */ /* Dans la colonne résumé, la zone reste dans le flux de la colonne et n'a pas à s'écarter autant. */ /* Dans la colonne de droite, l'écart de 24 vient maintenant de la colonne elle-même (voir plus haut) : ce complément de 8 porte le total à 32 et garde le bloc client visiblement détaché du produit, ce qui était l'intention de la 70. */ .stv-fiche__resume .stv-fiche__zone { margin-block: var(--stv-espace-8) 0; } /* --------------------------------------------------------------------- Réassurance — PLUS RIEN ICI, le 17/09. La fiche en rendait une copie ; elle vient du pied de page, pour toutes les pages du site (`stelvoren_pied_reassurance()`), et c'est `section.stv-reassurance` qui porte son habillage. Le gabarit et la règle `.stv-fiche__reassurance > *` sont partis ensemble. ------------------------------------------------------------------ */ /* ===================================================================== LA GALERIE — tâche 71 Frames 118:5827 (desktop) et 118:5671 (mobile). Colonne de vignettes à gauche, grande image carrée sur `--stv-gris-clair` (#f2f6f8), badge en haut à gauche, flèches en bas au centre, plein écran en bas à droite. Mobile : une image en glissement, compteur. MESURES CORRIGÉES LE 15/09, AU RELEVÉ DEV MODE. La première version posait des vignettes de 80 px et une gouttière de 24 : c'était un relevé à l'œil dans Chrome, noté « ≈ 80 px » dans le plan du 14/09. Dev Mode donne `118:5840` = 960 de large, `118:5841` = **64**, et la grande image `118:5848` à **x = 80** — soit 64 + 16 + 880 = 960, une somme qui tombe juste, ce que 80 + 24 + 856 ne faisait pas. L'écart vertical entre vignettes est relevé à 10,667 px — la trace d'un composant dessiné à 96 px puis mis à l'échelle ⅔. On garde le jeton 12 : l'écart au dessin est de 1,3 px par vignette, invisible, et une valeur hors échelle dans la feuille coûterait plus cher à maintenir qu'elle ne rapporte. LE CAS COURANT N'EST PAS CELUI QUI EST DESSINÉ. Relevé 68 : 133 produits sur 476 n'ont qu'UNE image (28 %), 287 en ont deux à quatre, 56 seulement en ont cinq ou plus. Les états dégradés ne sont donc pas une finition, c'est le régime normal — d'où le modificateur `--unique`, et une colonne de vignettes qui se contente de ce qu'elle a au lieu de réserver cinq emplacements. ================================================================== */ /* PAS UNE GRILLE, ET C'EST VOULU. La colonne de vignettes doit faire exactement la hauteur de la grande image. En grille, c'est impossible à écrire proprement : la hauteur de la rangée est le maximum des deux éléments, donc douze vignettes étireraient la rangée et l'image carrée avec elle. On tourne en rond. On sort donc la colonne du flux. La grande image devient le seul enfant en flux : la hauteur de la galerie est la sienne, et la colonne s'y ajuste au pixel par `top: 0; bottom: 0`. Un décalage à gauche réserve sa place. Effet de bord heureux : à pleine largeur l'image fait 880 px de haut, soit **onze** vignettes de 64 px au lieu des cinq que tenait la hauteur fixe. Le défilement ne sert donc plus que dans les cas extrêmes — 56 produits sur 476 passent cinq images, aucun ne passe onze — ce qui était la demande. */ .stv-galerie { /* Les mesures des vignettes (`--stv-vignette`, `--stv-vignette-gouttiere`) sont déclarées sur `.stv-fiche-page`, en tête de fichier : la grille en a besoin pour calculer la largeur de colonne qui fait tenir l'image dans la fenêtre. Ici on ne garde que ce qui n'a pas à remonter. */ /* `rgba(0,29,61,0.25)` — c'est le jeton `--stv-pastille` à 0,25 au lieu de 0,1. Deux opacités du même bleu, pas deux couleurs. */ --stv-vignette-filet: rgba(0, 29, 61, 0.25); position: relative; } .stv-galerie--multiple { padding-left: calc(var(--stv-vignette) + var(--stv-vignette-gouttiere)); } /* --- La colonne de vignettes ---------------------------------------- */ .stv-galerie__vignettes { position: absolute; top: 0; bottom: 0; left: 0; width: var(--stv-vignette); display: flex; flex-direction: column; gap: var(--stv-espace-12); overflow-y: auto; /* `clip` EXPLICITE sur l'axe horizontal. La règle CSS est contre- intuitive : dès qu'un axe n'est plus `visible`, l'autre ne peut plus l'être non plus et bascule en `auto`. Déclarer seulement `overflow-y: auto` créait donc une barre horizontale en prime — c'est ce qu'on voyait le 15/09, deux barres pour un débordement de 2 px. */ overflow-x: clip; /* Barre masquée, comme sur la piste principale : la maquette n'en dessine pas, et une barre de 8 px dans une colonne de 80 se voit plus qu'elle ne sert. CE QUE ÇA COÛTE, et pourquoi ce n'est pas gratuit : plus rien n'annonce visuellement qu'il y a une sixième vignette. La contrepartie est dans galerie.js, qui fait suivre la colonne à l'image affichée — au clic sur une flèche, au glissement, au clavier. La vignette active est donc TOUJOURS visible, et c'est ce mouvement qui dit qu'il y a autre chose en dessous. La colonne étant en `position: absolute`, elle est d'office le repère de `offsetTop` de ses vignettes — c'est ce dont ce calcul a besoin. */ scrollbar-width: none; overscroll-behavior: contain; } .stv-galerie__vignettes::-webkit-scrollbar { display: none; } /* CLASSE RÉPÉTÉE, ET CE N'EST PAS UNE COQUETTERIE. Le kit Elementor écrit `.elementor-kit-44301 button` — une classe et un élément, poids 0,1,1. Une règle à classe unique perd, et les vignettes sortaient avec le fond sombre du kit et son survol rose. Septième occurrence du piège décrit dans `piege-specificite-elementor.md` ; la barre de flèches du thème s'en protège déjà par `.stv-fleches .stv-fleches__bouton`. Classe répétée plutôt qu'ancêtre de portée : la galerie ne vit pas forcément dans un seul conteneur — le plein écran, demain, pourra la rendre ailleurs. */ .stv-galerie__vignette.stv-galerie__vignette { /* `border-box` EXPLICITE, et c'est la cause du défaut du 15/09 : sans lui, la bordure d'un pixel s'ajoutait aux 80 px, chaque vignette faisait 82, et cinq d'entre elles dépassaient de 10 px la hauteur calculée pour en contenir exactement cinq. D'où la barre verticale là où il ne devait pas y en avoir — et, par la règle rappelée au-dessus, la barre horizontale avec. On ne se repose pas sur une règle globale : le thème enfant rend des composants qui vivent aussi hors des pages Elementor. */ box-sizing: border-box; flex: 0 0 var(--stv-vignette); width: var(--stv-vignette); height: var(--stv-vignette); padding: 0; /* Bordure au repos : `rgba(0,29,61,0.25)`, relevée sur `118:5844`. Elle est POSÉE, pas transparente — une vignette sans contour se confond avec le fond gris de la section. */ border: 1px solid var(--stv-vignette-filet); border-radius: var(--stv-rayon); background: var(--stv-blanc); color: inherit; cursor: pointer; transition: border-color 0.15s ease; } /* Le survol du kit est rose : on pose explicitement le nôtre. */ .stv-galerie__vignette.stv-galerie__vignette:hover, .stv-galerie__vignette.stv-galerie__vignette:focus { background: var(--stv-blanc); border-color: var(--stv-texte-secondaire); } /* L'ACTIVE : 2 px d'anthracite. La maquette dessine 1,33 px — c'est un composant à l'échelle ⅔, donc 2 px à la source, et 1,33 ne se rend proprement sur aucun écran non-Retina. On garde l'entier, et c'est la COULEUR qui porte l'état de toute façon : anthracite plein contre un bleu à 25 %. `box-sizing: border-box` est déjà posé plus haut : la vignette active ne grandit donc pas d'un pixel en devenant active — c'est l'image intérieure qui perd 2 px, ce que la maquette fait aussi. */ .stv-galerie__vignette.stv-galerie__vignette[aria-current="true"] { border-width: 2px; border-color: var(--stv-anthracite); } .stv-galerie__vignette.stv-galerie__vignette:focus-visible { outline: 2px solid var(--stv-anthracite); outline-offset: 2px; } .stv-galerie__vignette-image { display: block; width: 100%; height: 100%; object-fit: contain; } /* --- La scène -------------------------------------------------------- */ /* LA SCÈNE EST BLANCHE, LA SECTION EST GRISE — relevé du 15/09. C'est l'inverse de ce qui était posé, et l'inverse de ce que disait le plan du 14/09 (« grande image carrée sur #f2f6f8 »), qui lisait un aplat gris sur une maquette zoomée sans voir qu'il appartenait à la section et non à l'image. Le contraste de la maquette vient de là : une carte blanche posée sur un fond gris. `mix-blend-mode` retiré en même temps. Il servait à noyer le fond blanc des photos dans le gris — sur un fond blanc il n'a plus d'objet, et il ne coûtait pas rien : il assombrit toute photo prise sur fond sombre, et il crée un contexte d'empilement qui complique le plein écran. */ .stv-galerie__scene { position: relative; aspect-ratio: 1 / 1; background: var(--stv-blanc); } .stv-galerie__image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* La piste. Zone défilante à accroche : elle fonctionne au doigt, à la molette et au clavier SANS JavaScript. Les flèches et le compteur sont un supplément — c'est ce qui permet à l'image principale, qui est le LCP, de ne dépendre d'aucun script. */ .stv-galerie__piste { display: flex; height: 100%; overflow-x: auto; /* `hidden` EXPLICITE sur l'axe vertical (recette d'Estevan R32, 28/10) : un axe `auto` fait passer l'autre en `auto`, et une image plus haute que la scène (photo en portrait, ou image qui ne se charge pas) rendait la piste défilante EN HAUTEUR — la molette, sur l'image, faisait monter et descendre l'image dans son cadre au lieu de faire défiler la page. Relevé : 3 000 de haut pour 578 visibles. La piste ne défile plus qu'en largeur ; la molette verticale revient à la page. */ overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .stv-galerie__piste::-webkit-scrollbar { display: none; } .stv-galerie__piste:focus-visible { outline: 2px solid var(--stv-anthracite); outline-offset: -2px; } /* À LA SOURIS, LA PISTE NE DÉFILE PLUS À LA MAIN (recette d'Estevan R32, 28/10, tâche 206 : « il est possible de scroller dans le visualiseur d'images »). Un geste latéral du pavé tactile — ou une diagonale en faisant défiler la page — faisait glisser les images librement. Une fois la galerie équipée par galerie.js (`data-stv-equipee`), la piste passe en `overflow-x: hidden` : elle reste une zone défilante pour le script (`scrollTo`, accroche comprise), qui la mène par les flèches, les vignettes et les flèches du clavier. Seulement à partir de 980 (là où flèches et vignettes existent) et à la souris : au doigt (téléphone, tablette même large), le glissement reste le geste principal. Sans script, rien ne change : la piste défile, c'est ce qui garde la galerie utilisable. */ @media (min-width: 980px) and (hover: hover) and (pointer: fine) { .stv-galerie[data-stv-equipee] .stv-galerie__piste { overflow-x: hidden; } } /* `min-width: 0` (28/10, vu en reproduisant R32) : une image qui ne se charge pas s'affiche à la largeur de son attribut `width` avec son texte alternatif, et le minimum automatique d'un élément flexible élargissait alors sa vue (3 000 au lieu de 578) — les flèches et les vignettes visaient des positions fausses. La vue garde sa largeur quoi qu'il arrive ; avec de vraies images, rien ne change (même cause que les cartes, composants.css « HAUTEUR DES IMAGES », 26/10). */ .stv-galerie__vue { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; display: grid; /* Une case de la taille de la vue (28/10, R32) : sans pistes définies, la rangée prenait la hauteur de l'image, et son `max-height: 100%` ne se résolvait contre rien — une photo en portrait débordait de la scène. L'image tient désormais dans le carré, en largeur ET en hauteur. */ grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; margin: 0; cursor: zoom-in; } /* --- Badge ----------------------------------------------------------- */ /* LE BADGE — relevé `118:5853`. Rien de ce qui était posé n'était juste : fond anthracite au lieu du jeton pastille, texte blanc au lieu du bleu pétrole, 14 px au lieu de 16, et 16 px de marge au lieu de 32. Le badge dessiné est DISCRET — un aplat bleu à 10 % avec du texte bleu dessus — et il avait été posé en pastille sombre à fort contraste. La variante Promo reste PROVISOIRE : la maquette ne dessine que « Nouveauté ». Elle garde le bleu pétrole plein, qui se distingue de la nouveauté sans inventer une couleur hors palette, en attendant la réponse du designer (tâche 67). */ .stv-galerie__badge { position: absolute; z-index: 2; top: var(--stv-espace-32); left: var(--stv-espace-32); padding: var(--stv-espace-4) var(--stv-espace-12); background: var(--stv-pastille); color: var(--stv-bleu-petrole); font-size: var(--stv-taille-texte); line-height: var(--stv-interligne-titre); } .stv-galerie__badge--promo { background: var(--stv-bleu-petrole); color: var(--stv-blanc); } /* --- Flèches, compteur, plein écran ---------------------------------- */ /* `.stv-fleches` est à `display: none` par défaut dans composants.css et ne s'allume qu'en dessous de 1025 px — c'est la règle du carrousel des collections, où les flèches montent sur la ligne des onglets en desktop. La galerie, elle, les veut en bas au centre de la scène à toutes les largeurs : on rallume, sans toucher à la règle d'origine. */ /* 32 du bas, et non 16 : les deux commandes sont à y = 787 dans une scène de 859, soit 32 sous leurs 40 px de haut (`118:5850` et `118:5855`). Même marge que le badge — c'est la marge intérieure de la scène, pas trois valeurs indépendantes. */ .stv-galerie__fleches { display: flex; gap: var(--stv-espace-24); position: absolute; z-index: 2; bottom: var(--stv-espace-32); left: 50%; transform: translateX(-50%); margin-top: 0; } /* Même piège, même parade : c'est un