/* ========================================================================== galerie.css — le bloc Galerie et l'habillage de PhotoSwipe 5 -------------------------------------------------------------------------- Chargé après photoswipe.css (assets/vendor/), uniquement sur les pages qui ont une galerie ou une fiche produit — voir fb_galerie_assets() dans inc/blocs.php. Les dessins de Fabian (objets/, livrés le 9 septembre 2026) existent en deux couleurs : NOIR sur la page, BLANC sur le voile de la visionneuse. C'est le seul choix que fait ce fichier. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Le bloc Galerie — un diaporama, une image à la fois -------------------------------------------------------------------------- `scroll-snap` fait le diaporama : au doigt, à la molette, au clavier (la piste est focusable), sans script. Les flèches (galerie.js) ne font que défiler d'une diapositive. Chaque diapositive prend TOUTE la largeur du bloc : la première version en faisait une frise (les images se suivaient, chacune à sa largeur), et Fabian a demandé le 17 septembre 2026 qu'on ne voie qu'une image à la fois. L'image garde ses proportions dans la hauteur du bloc (`--fb-galerie-h`), centrée dans sa diapositive. */ .fb-galerie { position: relative; --fb-galerie-h: 420px; --fb-galerie-ecart: clamp(0.75rem, 2vw, 1.25rem); } .fb-galerie__piste { display: flex; gap: var(--fb-galerie-ecart); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; -webkit-overflow-scrolling: touch; /* Pas de barre de défilement : les flèches et le doigt suffisent, et une barre grise sous un dessin est la première chose qu'on voit. */ scrollbar-width: none; } .fb-galerie__piste::-webkit-scrollbar { display: none; } .fb-galerie__piste:focus-visible { outline: 2px solid var(--fb-vert); outline-offset: 4px; } /* `flex: 0 0 100%` et non `width: 100%` seul : dans une piste flex, un enfant à `width: 100%` se laisse encore rétrécir pour faire de la place au suivant — et on retrouverait deux images côte à côte. */ .fb-galerie__diapo { flex: 0 0 100%; width: 100%; margin: 0; scroll-snap-align: start; } .fb-galerie__lien { display: block; line-height: 0; } .fb-galerie__image { display: block; width: 100%; height: var(--fb-galerie-h); /* LE PLAFOND EN `vh` EST UN GARDE-FOU, PAS UN RÉGLAGE. Une galerie plus haute que la fenêtre oblige à faire défiler pour voir une seule image : on ne la laisse donc jamais dépasser la hauteur utile de l'écran. 70 → 85vh le 23 septembre 2026, avec le passage du réglage de hauteur à 1200 px : Fabian veut de grandes images verticales (« est-ce possible qu'on puisse mettre des images de plus de 800 pixels de haut ? ») et à 70vh un portrait réglé sur 1000 px retombait à 630 sur un portable. ⚠ C'est ce plafond qui gagne sur les écrans bas, pas le réglage de l'éditeur. Si Fabian règle 1200 et n'en voit que 800, ce n'est pas une panne : sa fenêtre fait 940 px de haut. */ max-height: 85vh; object-fit: contain; } .fb-galerie__legende { margin-top: 0.5em; font-size: var(--fb-petit); color: var(--fb-gris); text-align: center; line-height: 1.3; } /* Sur téléphone, la hauteur fixe ferait des images minuscules dans un grand vide : l'image prend la largeur et dicte sa hauteur. */ @media (max-width: 700px) { .fb-galerie__image { height: auto; max-height: none; } } /* LES FLÈCHES NOIRES, à mi-hauteur, POSÉES SUR L'IMAGE. ------------------------------------------------------------------------- ⚠ ELLES ÉTAIENT À CÔTÉ DE LA PISTE JUSQU'AU 23 SEPTEMBRE 2026, en dehors (`left: calc(-1 * écart - 26px)`), et c'est ce qui faisait dépasser la galerie de 46 px de chaque côté de la colonne de texte — mesuré à 272→1168 pour une colonne de 318→1122. Fabian : « possible de faire qu'elles ne dépassent pas de la colonne ? » Les rentrer, c'est les poser SUR l'image. La première version leur donnait donc un disque blanc translucide, pour qu'un trait noir reste lisible sur une photo sombre — c'était déjà la solution retenue sous 900 px, elle est devenue la seule, à toutes les largeurs. ⚠ LE DISQUE EST RETIRÉ DEPUIS LE 23 SEPTEMBRE 2026 (Fabian : « retire le fond blanc sur le bouton »). La flèche est posée nue sur l'image. C'EST UN CHOIX, ET IL A UN COÛT À CONNAÎTRE. Le disque n'était pas décoratif, il garantissait le contraste : un trait noir sur une photo sombre n'est plus visible, et rien dans le thème ne peut le rattraper — le CSS ne sait pas ce qu'il y a dans l'image. Tant que Fabian met des dessins sur fond clair, la flèche se lit. Le jour où une galerie contient une photo de nuit, elle disparaîtra dans son coin gauche, et ce ne sera pas une panne : ce sera ce compromis-ci. Les trois réponses possibles, si ça arrive : remettre le disque, passer aux flèches BLANCHES que Fabian a déjà dessinées (`fleche-*-blanc.png`, utilisées par la visionneuse), ou les ressortir de l'image — ce qui rouvrirait le débordement de colonne corrigé plus haut. Fabian les a dessinées pleines (82 × 164), donc hautes et étroites. ⚠ `background-size` DOIT NOMMER LA HAUTEUR, PAS LA LARGEUR — c'est la correction du 23 septembre 2026 (« corriger les flèches dans les blocs de galerie d'image »), et le symptôme ne désignait pas sa cause. `background-size: 60%` ne règle QUE la largeur ; la hauteur reste `auto`, donc proportionnelle. Sur un dessin deux fois plus haut que large, 60 % de 40 px font 24 px de large… et 48 px de haut, dans une boîte qui en fait 40. Le haut et le bas de la flèche étaient coupés de 4 px chacun : la pointe disparaissait, et il restait un coin noir massif qui ne ressemblait plus à une flèche. `auto 70%` prend le problème par le bon bout : 28 px de haut, 14 de large, la flèche entière dans sa boîte. Régler la hauteur est la bonne façon de dimensionner un dessin vertical — c'est elle qui bute contre la boîte. Les 70 % restent après le retrait du disque, et ce n'est pas un oubli : la boîte de 40 px reste la CIBLE CLIQUABLE, que les WCAG veulent à 24 px au moins. Les 12 px de vide autour du dessin sont ce qui rend la flèche facile à viser. Mettre `100%` agrandirait le dessin sans agrandir la cible. Au survol, la flèche passe au vert. `is-bout` : plus rien dans ce sens, la flèche s'efface. */ .fb-galerie__fleche { position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; transform: translateY(-50%); transition: opacity var(--fb-transition); } .fb-galerie__fleche--prec { left: 0.5rem; } .fb-galerie__fleche--suiv { right: 0.5rem; } .fb-galerie__fleche--dessinee::before { content: ""; position: absolute; inset: 0; background: center / auto 70% no-repeat; } .fb-galerie__fleche--prec.fb-galerie__fleche--dessinee::before { background-image: url("../img/objets/fleche-gauche-noir.png"); } .fb-galerie__fleche--suiv.fb-galerie__fleche--dessinee::before { background-image: url("../img/objets/fleche-droite-noir.png"); } /* AU SURVOL, LA MÊME FLÈCHE EN VERT — un vrai second fichier, pas un filtre. (Fabian, 23 septembre 2026 : « je veux la même flèche mais en vert ».) C'était un `filter: invert() sepia() saturate() hue-rotate() brightness()`. Ça teintait, et ce n'était quand même pas la bonne réponse, pour deux raisons. 1. UNE CHAÎNE DE FILTRES N'ATTEINT PAS UNE COULEUR EXACTE. Elle arrive à côté, et « à côté » du vert de Fabian n'est pas son vert. On ne pouvait pas non plus la corriger : ces cinq nombres ne se règlent qu'à tâtons. 2. LE FILTRE S'APPLIQUAIT AU BOUTON ENTIER. Tant qu'il y avait un disque blanc sous la flèche, il virait au gris verdâtre avec elle. Le disque a disparu depuis, mais la raison 1 suffit largement. `fleche-*-vert.png` est fabriqué par le build (tools/build-assets.sh) à partir du trait noir, rempli de la variable `$VERT` — la même source unique que la croix du panier et le cadre du champ de quantité. La couleur est juste au pixel près. Le survol ne change QUE `background-image` : la taille et la position sont déclarées une fois au-dessus et ne sont pas réécrites ici. */ .fb-galerie__fleche--prec.fb-galerie__fleche--dessinee:hover::before, .fb-galerie__fleche--prec.fb-galerie__fleche--dessinee:focus-visible::before { background-image: url("../img/objets/fleche-gauche-vert.png"); } .fb-galerie__fleche--suiv.fb-galerie__fleche--dessinee:hover::before, .fb-galerie__fleche--suiv.fb-galerie__fleche--dessinee:focus-visible::before { background-image: url("../img/objets/fleche-droite-vert.png"); } /* Repli sans dessin : un chevron en texte, centré sur la même boîte de 40 px. Lui n'a pas de version dessinée à échanger : c'est sa couleur de texte qui passe au vert, ce qui est exact pour un caractère. */ .fb-galerie__fleche:not(.fb-galerie__fleche--dessinee)::before { content: "‹"; font-size: 2rem; line-height: 40px; } .fb-galerie__fleche--suiv:not(.fb-galerie__fleche--dessinee)::before { content: "›"; } .fb-galerie__fleche:not(.fb-galerie__fleche--dessinee):hover, .fb-galerie__fleche:not(.fb-galerie__fleche--dessinee):focus-visible { color: var(--fb-vert); } .fb-galerie__fleche.is-bout { opacity: 0.2; pointer-events: none; } /* -------------------------------------------------------------------------- 2. La loupe noire sur la galerie produit -------------------------------------------------------------------------- Posée par galerie.js à la place du « 🔍 » de WooCommerce. `Loupe_noir`, 80 × 71. ⚠ ELLE EST EN BAS À DROITE DEPUIS LE 23 SEPTEMBRE 2026 (Fabian : « la loupe en bas à droite de l'image »), et le point de référence a changé avec elle. Elle était ancrée sur `.woocommerce-product-gallery`, qui contient AUSSI la rangée de miniatures quand le produit a plusieurs photos : en bas de cette boîte-là, la loupe se serait retrouvée sous les miniatures, donc plus du tout « en bas de l'image ». galerie.js la déplace maintenant dans `.flex-viewport` — la fenêtre du diaporama, celle qui ne contient que la photo affichée — dès que WooCommerce l'a créée. Les deux conteneurs sont donc des références de position, et c'est le seul qui existe qui sert. */ .woocommerce-product-gallery, .woocommerce-product-gallery .flex-viewport { position: relative; } .fb-galerie__loupe { position: absolute; bottom: 0.5rem; right: 0.5rem; z-index: 3; width: 36px; height: 32px; padding: 0; border: 0; background: url("../img/objets/loupe-noir.png") center / contain no-repeat; opacity: 0.85; transition: opacity var(--fb-transition), transform var(--fb-transition); } .fb-galerie__loupe:hover, .fb-galerie__loupe:focus-visible { opacity: 1; transform: scale(1.08); } /* Le zoom de WooCommerce pose son image agrandie en absolu par-dessus : la loupe doit rester au-dessus d'elle. */ .woocommerce-product-gallery .zoomImg { z-index: 2; } /* -------------------------------------------------------------------------- 2 bis. Les miniatures sous la grande image, découpées elles aussi -------------------------------------------------------------------------- Fabian (23 septembre 2026) : « mettre les masques sur les petites images en dessous de la grande image dans la fiche produit ». C'était la dernière image carrée du site : la grande est découpée depuis le 17 septembre (fb_masque_image_fiche, inc/woocommerce.php), les vignettes du shop et du portfolio depuis toujours, et cette rangée-là restait en rectangles nets. ⚠ CE MASQUE NE PEUT PAS SE POSER EN PHP, ET C'EST POUR ÇA QU'IL EST ICI. Les miniatures ne sont pas rendues par WordPress : FlexSlider les FABRIQUE en JavaScript, à partir de l'attribut `data-thumb` de chaque diapositive. Il n'y a donc aucun HTML à filtrer — `woocommerce_single_product_image_thumbnail_html` ne voit passer que les diapositives, pas leurs miniatures. Le seul point de prise est le sélecteur CSS, sur le
    que FlexSlider écrit lui-même. LA FORME VARIE PAR POSITION, PAS PAR PRODUIT. Ailleurs sur le site, la forme est tirée de l'identifiant du contenu : stable et différente d'une fiche à l'autre. Ici il n'y a pas d'identifiant à lire — du CSS ne sait rien du produit. On cycle donc sur quatre formes par rang (`nth-child`), ce qui donne le même effet à l'œil : une rangée de découpes qui ne se répètent pas, et qui ne bougent pas d'un chargement à l'autre. Quatre suffisent : au-delà de quatre photos, la reprise tombe si loin qu'elle ne se voit pas. `onload` de WooCommerce écrit `width` et `height` en attributs à partir de la taille native du fichier : d'où le `width: 100%` et le `height: auto`, sinon une miniature de 100 px resterait à 100 px dans une case plus large. */ .woocommerce-product-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.4rem, 1.2vw, 0.75rem); margin: clamp(0.5rem, 1.5vw, 1rem) 0 0; padding: 0; list-style: none; } .woocommerce-product-gallery .flex-control-thumbs li { width: auto !important; margin: 0 !important; float: none !important; list-style: none; } .woocommerce-product-gallery .flex-control-thumbs img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1; object-fit: cover; opacity: 0.75; transition: opacity var(--fb-transition); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* Les quatre formes du cycle. Ce sont celles de `.fb-masque--NN` (style.css, section 10) : le même dossier, les mêmes dessins, juste choisis autrement. */ .woocommerce-product-gallery .flex-control-thumbs li:nth-child(4n + 1) img { -webkit-mask-image: url("../img/masques/masque-03.png"); mask-image: url("../img/masques/masque-03.png"); } .woocommerce-product-gallery .flex-control-thumbs li:nth-child(4n + 2) img { -webkit-mask-image: url("../img/masques/masque-07.png"); mask-image: url("../img/masques/masque-07.png"); } .woocommerce-product-gallery .flex-control-thumbs li:nth-child(4n + 3) img { -webkit-mask-image: url("../img/masques/masque-11.png"); mask-image: url("../img/masques/masque-11.png"); } .woocommerce-product-gallery .flex-control-thumbs li:nth-child(4n + 4) img { -webkit-mask-image: url("../img/masques/masque-15.png"); mask-image: url("../img/masques/masque-15.png"); } /* La miniature en cours, et celle qu'on survole, à pleine opacité. FlexSlider pose `flex-active` sur l'image elle-même, pas sur le
  1. . */ .woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; } /* -------------------------------------------------------------------------- 3. La visionneuse — les boutons blancs de Fabian -------------------------------------------------------------------------- PhotoSwipe 5 dessine ses boutons en SVG ; galerie.js passe des SVG vides (`closeSVG: ''`…), il ne reste que des boutons nus de 50 × 60 px. On y pose les dessins blancs en fond. Les flèches (82 × 164) sont hautes et étroites, les trois autres (80 × 71) presque carrés : `contain` et une taille par famille. */ .pswp__button { background-repeat: no-repeat !important; background-position: center !important; background-size: 22px auto !important; opacity: 0.85; transition: opacity 140ms ease-out, transform 140ms ease-out; } .pswp__button:hover, .pswp__button:focus-visible { opacity: 1; transform: scale(1.1); } .pswp__button--close { background-image: url("../img/objets/fermer-blanc.png") !important; } .pswp__button--zoom { background-image: url("../img/objets/loupe-blanc.png") !important; } .pswp__button--fb-plein-ecran { background-image: url("../img/objets/agrandir-blanc.png") !important; } .pswp__button--arrow--prev { background-image: url("../img/objets/fleche-gauche-blanc.png") !important; } .pswp__button--arrow--next { background-image: url("../img/objets/fleche-droite-blanc.png") !important; } .pswp__button--arrow--prev, .pswp__button--arrow--next { background-size: 16px auto !important; } /* Les flèches un peu plus loin du bord que par défaut, et jamais sur l'image sur grand écran : le `padding` passé dans les options réserve la place. */ .pswp__button--arrow--prev { left: 12px; } .pswp__button--arrow--next { right: 12px; } /* Le compteur « 2 / 7 » en Garamond, comme le reste du site. */ .pswp__counter { font-family: var(--fb-serif, Georgia, serif); font-size: 0.95rem; font-weight: 700; opacity: 0.9; } /* LE CURSEUR DE LA VISIONNEUSE N'EST PLUS TRAITÉ ICI. PhotoSwipe pose `cursor: zoom-in`, `grab` et `grabbing` sur ses images ; le thème les écrasait avec un `cursor: inherit !important` posé juste ici. Depuis le 23 septembre 2026, les curseurs dessinés sont déclarés en `!important` sur `*` dans _sprites.css : plus aucune feuille tierce ne peut reprendre le curseur, et `.pswp__img` est nommée parmi les cibles de la main (elle se clique pour agrandir). Une règle de moins à tenir ici. */