/* ==========================================================================
Panneaux de collection — accueil
Anatole Lebreton
Un seul geste pour les trois panneaux. Le registre est celui des maisons
de parfum : lent, ample, sans rebond. Rien ne doit « sauter ».
Trois durées différentes, volontairement — c'est ce qui crée la
profondeur. Si tout bougeait à la même vitesse, l'ensemble paraîtrait
plat et mécanique :
· l'image 1200 ms — le plan le plus lointain, le plus lent
· le voile 700 ms
· le bouton 520 ms — le plan le plus proche, le plus vif
Markup :
========================================================================== */
.alb-collection,
.alb-collection-colonne,
.alb-collection-ligne {
/* Courbe et durée PROPRES à l'icône. Elles ne suivent pas celles du
panneau, et c'est voulu : `--col-courbe` est une sortie exponentielle
qui parcourt 75 % de la distance dans les 20 premiers pour-cent du
temps. Sur une image qui voyage 1200 ms, ça donne de l'ampleur ; sur
3 px en 520 ms, ça donne un à-coup.
Ici : départ et arrivée également amortis, course réduite, durée
allongée — le déplacement se lit comme une glissade, pas comme un
déclic.
1000 ms place l'icône entre le voile (700) et l'image (1200) : les
trois mouvements appartiennent alors à la même famille au lieu que le
plus petit soit le plus pressé. */
--icone-course: 2px;
--icone-duree: 1000ms;
--icone-courbe: cubic-bezier(.33, 0, .2, 1);
--lueur-duree: 1100ms;
}
.alb-collection {
--col-ivoire: #F2F0EB;
--col-encre: #090947;
--col-lent: 1200ms;
--col-moyen: 700ms;
--col-vif: 520ms;
/* Courbe sortante, sans dépassement. Un cubic-bezier qui rebondit
(effet « ressort ») est exactement ce qui fait bon marché ici. */
--col-courbe: cubic-bezier(.22, 1, .36, 1);
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
min-height: 420px;
padding: 48px 32px 52px;
overflow: hidden; /* contient l'image pendant son zoom */
text-align: center;
isolation: isolate;
}
/* --- L'image de fond ---------------------------------------------------- */
.alb-collection__media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.alb-collection__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.02); /* léger sur-cadrage au repos : sans lui, les
bords découvrent le fond pendant le retour */
transform-origin: center center;
transition: transform var(--col-lent) var(--col-courbe);
will-change: transform;
}
.alb-collection:hover .alb-collection__media img,
.alb-collection:focus-within .alb-collection__media img {
transform: scale(1.05);
}
/* Voile de lisibilité. Dégradé plutôt qu'aplat : le texte est en bas, c'est
là qu'il faut assombrir, et le haut de l'image reste lisible.
Ce voile n'est pas décoratif — voir la note de contraste en fin de fichier. */
.alb-collection__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(9, 9, 71, .15) 0%,
rgba(9, 9, 71, .45) 55%,
rgba(9, 9, 71, .72) 100%
);
transition: opacity var(--col-moyen) var(--col-courbe);
opacity: 1;
}
.alb-collection:hover .alb-collection__media::after,
.alb-collection:focus-within .alb-collection__media::after {
opacity: .88; /* s'éclaircit à peine : l'image reprend la main */
}
/* --- Le contenu --------------------------------------------------------- */
.alb-collection__contenu {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
color: #fff;
}
.alb-collection__titre {
margin: 0;
font-size: 30px;
line-height: 1.15;
font-weight: 400;
}
/* Chaque collection garde sa voix typographique : c'est la seule chose qui
les distingue maintenant que le geste est commun. */
.alb-collection--origines .alb-collection__titre { font-family: "EB Garamond", Georgia, serif; font-style: italic; }
.alb-collection--artefacts .alb-collection__titre { font-family: "Anti Design Endeavour", Montserrat, sans-serif; letter-spacing: .04em; }
.alb-collection--interstices .alb-collection__titre { font-family: "Anti Design Endeavour", Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .03em; }
.alb-collection__accroche {
margin: 0;
max-width: 32ch;
font: 400 14.5px/1.55 Montserrat, system-ui, sans-serif;
color: rgba(255, 255, 255, .92);
}
/* --- Le bouton : un seul geste pour les trois --------------------------- */
/* VERRE FUMÉ — verre teinté de flacon, pas vitre.
Trois couches, dans cet ordre :
1. le FLOU d'arrière-plan backdrop-filter: blur()
C'est lui qui fait l'épaisseur du verre. Sans lui, il ne reste qu'un
aplat translucide.
2. le PRODUIT brightness() dans le backdrop-filter
`brightness(.55)` multiplie chaque canal du fond par 0,55 : c'est
littéralement un mode produit, appliqué au fond réel.
⚠️ Pourquoi PAS `mix-blend-mode: multiply` sur une couche enfant, qui
serait le réflexe : `backdrop-filter` crée un contexte d'empilement
sur le bouton. Une couche enfant en mode produit se compose alors
avec ce qui est peint DANS ce contexte — c'est-à-dire rien. Résultat,
elle ne multiplie pas le fond, elle s'affiche en aplat. Essayé,
rendu en aplat lavande : le verre disparaît.
Le seul mode produit qui atteigne le fond est celui du filtre.
3. le REFLET ::before, en fusion normale
Dégradé clair en haut + voile blanc très faible.
Le voile blanc de 5 % du reflet n'est pas cosmétique : le produit ne sait
qu'ASSOMBRIR. Sur le panneau marine, déjà sombre, le bouton virerait au
noir et perdrait son aspect verre. Ces 5 % le retiennent. */
.alb-cta {
--verre-teinte: rgba(32, 32, 92, .18); /* la couleur, légère */
--verre-produit: .55; /* le facteur de multiplication */
--verre-flou: 20px;
position: relative;
display: inline-flex;
align-items: center;
gap: 13px;
padding: 15px 28px;
min-height: 52px;
border: 0;
border-radius: 3px;
overflow: hidden;
text-decoration: none;
color: #fff;
font: 400 16px/1.2 Montserrat, system-ui, sans-serif;
letter-spacing: .02em;
cursor: pointer;
background: var(--verre-teinte);
-webkit-backdrop-filter: blur(var(--verre-flou)) saturate(115%) brightness(var(--verre-produit));
backdrop-filter: blur(var(--verre-flou)) saturate(115%) brightness(var(--verre-produit));
/* L'arête : filet clair en haut (la lumière qui accroche le bord supérieur
du verre), contour discret, ombre portée basse qui décolle le bouton. */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .42),
inset 0 0 0 1px rgba(255, 255, 255, .22),
0 10px 28px rgba(9, 9, 71, .24);
/* backdrop-filter volontairement hors de la transition : voir plus bas */
transition: background var(--col-vif) var(--col-courbe),
box-shadow var(--col-vif) var(--col-courbe);
-webkit-tap-highlight-color: transparent;
}
/* 3 · le reflet */
.alb-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(
to bottom,
rgba(255, 255, 255, .18) 0%,
rgba(255, 255, 255, .05) 34%,
rgba(255, 255, 255, 0) 60%,
rgba(255, 255, 255, .07) 100%
),
rgba(255, 255, 255, .05); /* empêche le noir sur fond déjà sombre */
transition: opacity var(--col-vif) var(--col-courbe);
}
.alb-cta__label,
.alb-cta__icon { position: relative; z-index: 2; }
/* Les icônes du Figma n'ont ni les mêmes proportions ni le même poids :
Origines 70×72, Artéfacts 40×72, Interstices 77×73. À hauteur égale,
Artéfacts paraît maigre et Interstices s'empâte.
Les hauteurs ci-dessous ne sont pas réglées à l'œil : j'ai rendu les trois
tracés à hauteur commune et mesuré leur surface d'encre réelle.
origines couverture 75,3 % ×0,97 → 19,5 px
artefacts couverture 88,3 % ×1,18 → 23 px
interstices couverture 79,5 % ×0,91 → 18,5 px
Elles ont donc le même poids visuel, pas la même boîte. La largeur suit la
proportion de chaque tracé — ne pas la forcer, ça écraserait le flacon
d'Artéfacts, qui est le plus étroit. */
.alb-cta__icon {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
transition: transform var(--icone-duree, 1000ms) var(--icone-courbe, cubic-bezier(.33, 0, .2, 1));
}
.alb-cta__icon svg {
display: block;
height: 20px;
width: auto;
fill: currentColor;
}
.alb-collection--origines .alb-cta__icon svg { height: 19.5px; }
.alb-collection--artefacts .alb-cta__icon svg { height: 23px; }
.alb-collection--interstices .alb-cta__icon svg { height: 18.5px; }
/* Le survol du PANNEAU déclenche le bouton, pas seulement le survol du
bouton : l'image et le verre doivent partir ensemble, sinon on voit deux
animations distinctes au lieu d'un seul mouvement.
Le verre s'épaissit — la teinte se densifie, le flou augmente, l'arête
s'allume. Le contraste du texte MONTE donc au survol : c'est le bon sens
de variation, l'état survolé ne doit jamais être le moins lisible. */
.alb-collection:hover .alb-cta,
.alb-collection:focus-within .alb-cta,
.alb-cta:hover,
.alb-cta:focus-visible {
/* le verre s'épaissit : plus de flou, produit plus serré, teinte un peu
plus présente. Le contraste passe de 5,67:1 à 7,39:1. */
background: rgba(32, 32, 92, .34);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .58),
inset 0 0 0 1px rgba(255, 255, 255, .34),
0 14px 34px rgba(9, 9, 71, .3);
}
.alb-collection:hover .alb-cta__icon,
.alb-collection:focus-within .alb-cta__icon,
.alb-cta:hover .alb-cta__icon,
.alb-cta:focus-visible .alb-cta__icon {
transform: translateX(var(--icone-course, 2px));
}
/* Sans backdrop-filter — Firefox avant 103, quelques navigateurs mobiles
anciens — il n'y a pas de flou possible. Le mode produit, lui, fonctionne
partout depuis longtemps : le bouton reste donc assombri et coloré, il perd
seulement l'épaisseur. On ajoute un aplat opaque pour compenser l'absence
de flou, sinon la texture du fond traverse et brouille le libellé. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.alb-cta { background: rgba(9, 9, 71, .5); }
.alb-collection:hover .alb-cta,
.alb-collection:focus-within .alb-cta { background: rgba(9, 9, 71, .62); }
}
/* Contour de focus lisible sur n'importe quel fond : un trait clair doublé
d'un trait sombre. Un seul des deux ressort toujours. */
.alb-cta:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
box-shadow: inset 0 0 0 1px var(--col-ivoire), 0 0 0 5px rgba(9, 9, 71, .85);
}
/* --- Tactile ------------------------------------------------------------ */
/* Le survol n'existe pas au doigt : ni l'image ni le bouton ne bougeraient.
On montre donc l'état plein au repos, qui est aussi le plus lisible. */
@media (hover: none) {
/* On montre d'emblée le verre épais, qui est aussi le plus lisible. */
.alb-cta { background: rgba(32, 32, 92, .34); }
.alb-cta:active { background: rgba(32, 32, 92, .44); }
.alb-collection__media img { transform: scale(1.02); }
}
/* --- Mouvement réduit --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.alb-collection__media img,
.alb-collection__media::after,
.alb-cta,
.alb-cta__icon { transition: none !important; }
/* L'image ne bouge plus du tout — un zoom instantané serait pire que pas
de zoom. Le bouton garde un changement d'état franc, qui reste
perceptible sans animation. */
.alb-collection:hover .alb-collection__media img { transform: scale(1.02); }
}
/* ==========================================================================
VARIANTE DIVI — garder le balisage existant
Sur le staging, les trois panneaux sont déjà montés : une section, une
rangée de trois colonnes, et la photo posée en FOND DE COLONNE Divi
(`background-image` sur `.et_pb_column_…`), pas en `![]()
`.
Or un `background-image` ne peut pas être animé en `transform`. Plutôt que
de refaire le balisage, un pseudo-élément REPREND l'image de la colonne
avec `background-image: inherit` — et lui, il est animable.
DEUX CLASSES, et il faut choisir :
· `alb-collection-colonne` sur CHACUNE des trois colonnes
· `alb-collection-ligne` sur la LIGNE, une seule fois
Elles font la même chose. La seconde évite de répéter la manipulation
trois fois dans Divi.
⚠️ Ne jamais mettre les deux. Et surtout, la classe de LIGNE ne style
JAMAIS la ligne elle-même — seulement ses colonnes. Une première version
traitait les deux d'un coup : la ligne héritait alors du recadrage, du
voile et du zoom, ce qui produisait des bandes de couleur sur les côtés
(la ligne est plus large que les trois colonnes) et faisait bouger tout
le bloc au survol.
Ne PAS viser `.et_pb_column_21` et consorts : ces numéros changent dès
qu'on ajoute ou déplace un module ailleurs dans la page.
========================================================================== */
.alb-collection-colonne,
.alb-collection-ligne > .et_pb_column {
position: relative !important;
overflow: hidden !important;
isolation: isolate;
}
/* La photo, reprise de la colonne et rendue animable.
⚠️ LE FORMAT DES IMAGES EST LE VRAI SUJET. Mesuré sur le staging :
colonne 341 × 950 ratio 0,36 (bande très haute)
Origines.png 755 × 755 ratio 1,00 (carrée)
Artefacts.png 763 × 759 ratio 1,01 (carrée)
Rectangle-29-4 1439 × 954 ratio 1,51 (paysage)
En `cover`, une image carrée dans une bande de ratio 0,36 est agrandie
jusqu'à couvrir les 950 px de haut, puis rognée : on n'en voit plus que
36 % de la largeur, et elle est déjà agrandie 1,26 fois au repos. D'où
l'aspect étrange, qui n'a rien à voir avec l'animation — Divi faisait
déjà exactement ce recadrage avant.
Le zoom est passé de 1,08 à 1,05 pour limiter la casse, mais la vraie
correction est de réexporter des visuels EN HAUTEUR, autour de
700 × 1900, recadrés sur ce qu'on veut voir. */
.alb-collection-colonne::before,
.alb-collection-ligne > .et_pb_column::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: inherit; /* la photo posée par Divi, pas une seconde image */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: scale(1.02);
transition: transform var(--col-lent, 1200ms) var(--col-courbe, cubic-bezier(.22, 1, .36, 1));
will-change: transform;
}
.alb-collection-colonne:hover::before,
.alb-collection-colonne:focus-within::before,
.alb-collection-ligne > .et_pb_column:hover::before,
.alb-collection-ligne > .et_pb_column:focus-within::before {
transform: scale(1.05);
}
/* Le voile de lisibilité. */
.alb-collection-colonne::after,
.alb-collection-ligne > .et_pb_column::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(9, 9, 71, .15) 0%,
rgba(9, 9, 71, .45) 55%,
rgba(9, 9, 71, .72) 100%
);
transition: opacity var(--col-moyen, 700ms) var(--col-courbe, cubic-bezier(.22, 1, .36, 1));
}
.alb-collection-colonne:hover::after,
.alb-collection-colonne:focus-within::after,
.alb-collection-ligne > .et_pb_column:hover::after,
.alb-collection-ligne > .et_pb_column:focus-within::after { opacity: .88; }
/* Les modules Divi repassent au-dessus des deux pseudo-éléments. */
.alb-collection-colonne > *,
.alb-collection-ligne > .et_pb_column > * { position: relative; z-index: 1; }
/* --------------------------------------------------------------------------
LE BOUTON DIVI HABILLÉ EN VERRE — sans remplacer le module
Le module Bouton de Divi reste en place ; on lui met le verre et notre
icône par-dessus. Le lien se renseigne normalement dans les réglages du
module.
DEUX CHOSES RELEVÉES SUR LE STAGING, qui expliquent les contorsions :
1. La spécificité. Divi écrit une règle PAR BOUTON, de la forme
body #page-container .et_pb_section .et_pb_button_12 { … !important }
soit (1,2,1) avec !important. Un simple `.alb-collection-colonne
.et_pb_button { … !important }` perd. D'où le préfixe ci-dessous.
Testé sans : la couleur du texte et le retrait gauche ne passaient pas.
2. Les pseudo-éléments. `::after` porte la flèche de Divi (caractère « 5 »
de la fonte ETmodules) ; on la masque. `::before` porte le même
caractère mais est déjà en `display: none` — il est donc libre.
L'icône est posée en MASQUE et non en image de fond : un masque prend la
couleur de `currentColor`, donc l'icône suit la couleur du libellé.
⚠️ Un masque n'utilise que le canal alpha du SVG. Les exports Figma bruts
portent `fill-opacity="0.8"` : l'icône sortirait à 80 % d'opacité, plus
pâle que le texte. Utiliser les fichiers nettoyés.
-------------------------------------------------------------------------- */
body #page-container .et_pb_section .alb-collection-colonne .et_pb_button,
body #page-container .et_pb_section .alb-collection-colonne .et_pb_button:hover,
body #page-container .et_pb_section .alb-collection-ligne .et_pb_button,
body #page-container .et_pb_section .alb-collection-ligne .et_pb_button:hover {
position: relative !important;
overflow: hidden !important; /* rogne le reflet qui traverse */
color: #fff !important;
background: rgba(32, 32, 92, .18) !important;
border: 0 !important;
border-radius: 3px !important;
font-size: 16px !important;
font-weight: 400 !important;
letter-spacing: .02em !important;
/* 80 à gauche = 24 (marge) + 24 (gouttière de l'icône) + 32 (air avant
le texte). Voir la note sur la gouttière plus bas.
L'air est volontairement plus large que la marge : une icône collée au
texte se lit comme un caractère de la phrase, détachée elle se lit
comme un repère. */
padding: 15px 28px 15px 80px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .42),
inset 0 0 0 1px rgba(255, 255, 255, .22),
0 10px 28px rgba(9, 9, 71, .24) !important;
-webkit-backdrop-filter: blur(20px) saturate(115%) brightness(.55);
backdrop-filter: blur(20px) saturate(115%) brightness(.55);
/* On ne transitionne PAS backdrop-filter : animer un flou oblige le
navigateur à le recalculer à chaque image, et le fond « nage » à
l'intérieur du bouton. C'est ce mouvement bizarre. Le flou reste donc
fixe, et l'épaississement du verre passe par la teinte et l'ombre,
qui s'animent proprement. */
transition: background var(--col-vif, 520ms) var(--col-courbe, cubic-bezier(.22, 1, .36, 1)),
box-shadow var(--col-vif, 520ms) var(--col-courbe, cubic-bezier(.22, 1, .36, 1)) !important;
}
/* la flèche ETmodules de Divi laisse la place */
/* LA LUMIÈRE QUI PASSE.
`::after` portait la flèche de Divi ; plutôt que de simplement la masquer,
on la récupère pour en faire un reflet qui traverse le verre au survol.
Pas de balise en plus, pas de pseudo-élément à inventer : il était déjà
là, inutilisé.
Une ANIMATION et non une transition : une transition rejouerait le reflet
à l'envers quand la souris repart, ce qui n'a aucun sens physique. Là, le
reflet traverse une fois, sort du cadre, et l'élément revient à sa
position de départ hors champ — invisible.
L'angle de 105° suit la diagonale du bouton plutôt que la verticale : une
lumière qui descend droit se lit comme un balayage mécanique, une lumière
oblique comme un reflet. */
body #page-container .et_pb_section .alb-collection-colonne .et_pb_button::after,
body #page-container .et_pb_section .alb-collection-ligne .et_pb_button::after {
content: "" !important;
display: block !important;
opacity: 1 !important;
position: absolute !important;
inset: 0 !important;
margin: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
pointer-events: none;
background: linear-gradient(
105deg,
rgba(255, 255, 255, 0) 38%,
rgba(255, 255, 255, .20) 50%,
rgba(255, 255, 255, 0) 62%
) !important;
transform: translateX(-130%);
transition: none !important;
}
body #page-container .et_pb_section .alb-collection-colonne:hover .et_pb_button::after,
body #page-container .et_pb_section .alb-collection-ligne > .et_pb_column:hover .et_pb_button::after,
body #page-container .et_pb_section .alb-collection-ligne > .et_pb_column:focus-within .et_pb_button::after {
animation: alb-lueur var(--lueur-duree, 1100ms) var(--icone-courbe, cubic-bezier(.33, 0, .2, 1));
}
@keyframes alb-lueur {
from { transform: translateX(-130%); }
to { transform: translateX(130%); }
}
/* notre icône.
Trois verrous de Divi à lever, tous découverts à l'écran et pas en lisant
le CSS — le pseudo-élément calculait juste et ne peignait rien :
· `display: none` sur ::before et ::after
· `opacity: 0` sur ::before et ::after ← le plus sournois
· `transition: all .2s` sur ::before
Le troisième est la vraie cause du symptôme « display et taille corrects,
rien à l'écran » : avec `transition: all`, l'opacité forcée à 1 restait
coincée à 0. On ne transitionne donc QUE `transform`, ce qui sort
`opacity` de la transition et la laisse à 1 — tout en gardant l'animation
de l'icône au survol.
Et tout cela au préfixe de spécificité, sinon Divi l'emporte. */
body #page-container .et_pb_section .alb-collection-colonne .et_pb_button::before,
body #page-container .et_pb_section .alb-collection-ligne .et_pb_button::before {
content: "" !important;
display: block !important;
opacity: 1 !important;
position: absolute !important;
/* L'icône est centrée dans une GOUTTIÈRE FIXE de 24 px, pas posée à une
distance fixe du bord. Sans ça, l'écart jusqu'au texte varie d'un
bouton à l'autre : les trois tracés n'ont pas la même largeur
(19 / 13 / 19,5 px), donc à `left` identique, Artéfacts avait 6 px
d'écart de plus que les deux autres. */
left: 24px !important;
right: auto !important;
width: 24px !important;
top: 50% !important;
margin: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
transform: translateY(-50%);
background-color: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
transition: transform var(--icone-duree, 1000ms) var(--icone-courbe, cubic-bezier(.33, 0, .2, 1)) !important;
}
/* Une icône par colonne, dans l'ordre d'affichage. Les tailles viennent de
la mesure de surface d'encre — voir NOTE-ICONES.md. */
body #page-container .et_pb_section .alb-collection-ligne > .et_pb_column:nth-child(1) .et_pb_button::before,
body #page-container .et_pb_section .alb-collection-colonne:nth-child(1) .et_pb_button::before {
height: 19.5px !important;
-webkit-mask-image: url("/wp-content/uploads/alb/icones/origines.svg") !important;
mask-image: url("/wp-content/uploads/alb/icones/origines.svg") !important;
}
body #page-container .et_pb_section .alb-collection-ligne > .et_pb_column:nth-child(2) .et_pb_button::before,
body #page-container .et_pb_section .alb-collection-colonne:nth-child(2) .et_pb_button::before {
height: 23px !important;
-webkit-mask-image: url("/wp-content/uploads/alb/icones/artefacts.svg") !important;
mask-image: url("/wp-content/uploads/alb/icones/artefacts.svg") !important;
}
body #page-container .et_pb_section .alb-collection-ligne > .et_pb_column:nth-child(3) .et_pb_button::before,
body #page-container .et_pb_section .alb-collection-colonne:nth-child(3) .et_pb_button::before {
height: 18.5px !important;
-webkit-mask-image: url("/wp-content/uploads/alb/icones/interstices.svg") !important;
mask-image: url("/wp-content/uploads/alb/icones/interstices.svg") !important;
}
/* Le survol de la COLONNE épaissit le verre : la photo et le bouton partent
ensemble. */
body #page-container .et_pb_section .alb-collection-colonne:hover .et_pb_button,
body #page-container .et_pb_section .alb-collection-colonne:focus-within .et_pb_button,
body #page-container .et_pb_section .alb-collection-ligne > .et_pb_column:hover .et_pb_button,
body #page-container .et_pb_section .alb-collection-ligne > .et_pb_column:focus-within .et_pb_button {
/* teinte plus dense : le verre s'épaissit sans toucher au flou */
background: rgba(32, 32, 92, .34) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .58),
inset 0 0 0 1px rgba(255, 255, 255, .34),
0 14px 34px rgba(9, 9, 71, .3) !important;
}
.alb-collection-colonne:hover .et_pb_button::before,
.alb-collection-ligne > .et_pb_column:hover .et_pb_button::before,
.alb-collection-ligne > .et_pb_column:focus-within .et_pb_button::before {
transform: translateY(-50%) translateX(var(--icone-course, 2px));
}
@media (hover: none) {
.alb-collection-colonne:hover::before,
.alb-collection-ligne > .et_pb_column:hover::before { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
body #page-container .et_pb_section .alb-collection-colonne:hover .et_pb_button::after,
body #page-container .et_pb_section .alb-collection-ligne > .et_pb_column:hover .et_pb_button::after {
animation: none !important;
}
.alb-collection-colonne::before,
.alb-collection-colonne::after,
.alb-collection-ligne > .et_pb_column::before,
.alb-collection-ligne > .et_pb_column::after { transition: none !important; }
.alb-collection-colonne:hover::before,
.alb-collection-ligne > .et_pb_column:hover::before { transform: scale(1.02); }
}
/* --- Réactif ------------------------------------------------------------ */
@media (max-width: 860px) {
.alb-collection { min-height: 340px; padding: 36px 24px 40px; }
.alb-collection__titre { font-size: 26px; }
}
@media (max-width: 640px) {
.alb-cta { width: 100%; justify-content: center; }
}
/* ==========================================================================
NOTE DE CONTRASTE — à lire avant d'alléger le voile
Mesuré sur la maquette du 7 novembre, en échantillonnant les pixels :
Origines #090944 sur lavande #A59EBF ...... 7,27:1 conforme
Artéfacts blanc sur la photo de sable ...... 2,29:1 INSUFFISANT
Interstices blanc sur #08052E ................ 19,60:1 conforme
Le minimum WCAG AA est de 4,5:1. Le panneau Artéfacts était donc illisible
en l'état : photo claire, texte blanc.
D'où un verre qui ASSOMBRIT, et le mode produit plutôt qu'une teinte alpha.
Une teinte CLAIRE est impossible quel que soit le réglage : blanc sur verre
clair plafonne à 1,9:1 à 18 % et EMPIRE en opacifiant (1,3:1 à 45 %).
Teinte multipliée, pire cas sur les cinq fonds testés (sable clair, sable,
sable sombre, magenta, marine) :
Produit par brightness() + teinte marine, pire cas sur cinq fonds (sable
clair, sable, sable sombre, magenta, marine), avec l'écart de luminance
restant entre ces fonds — c'est lui qui dit si la matière de la photo
reste visible à travers le verre :
brightness teinte pire ratio matière conservée
.55 18 % 5,67:1 13,0 ← repos
.50 18 % 6,41:1 10,9
.45 22 % 7,39:1 8,2 ← survol
.35 26 % 10,27:1 4,7 trop sombre, verre opaque
Au repos .55 / 18 % : au-dessus du seuil avec de la marge, et c'est le
réglage qui laisse le plus de matière. Au survol .45 / 22 % : le contraste
MONTE, ce qui est le bon sens de variation — l'état survolé ne doit jamais
être le moins lisible.
Le dégradé de `__media::after` reste nécessaire pour le TITRE et
l'accroche, qui sont posés directement sur la photo sans verre.
Si quelqu'un veut alléger l'une ou l'autre valeur, il faut refaire la
mesure, pas la régler à l'œil : sur une photo claire, l'œil d'un graphiste
sur écran calibré n'est pas celui d'un visiteur en plein soleil.
========================================================================== */