/** Shopify CDN: Minification failed
Line 2156:72 Unexpected "`"
Line 2157:84 Unterminated string token
Line 2162:61 Unterminated string token
Line 2163:53 Unexpected "`"
Line 2165:81 Unterminated string token
Line 2166:64 Unterminated string token
Line 2168:19 Unterminated string token
Line 2169:69 Unterminated string token
Line 2172:78 Unterminated string token
Line 2173:33 Unterminated string token
... and 4 more hidden warnings
**/
/* ═══════════════════════════════════════════════════════════════
Bisou Rivage V5 — bisou-variant-ui.css
Scoped under .bisou-rv5
Sections :
1. Overrides globaux (sticky fix, flush padding)
2. Grille 50/50 desktop (image gauche sticky, info droite)
3. Fond transparent sur les images produit
4. Masquage du variant picker natif
5. Variables CSS (fonts, couleurs, spacing fluid)
6. Container flex + petits laptops
7. Top bar (ref + share + stars)
8. Cartel (titre + artiste + prix)
9. Reassurance (desktop bullets + mobile icons)
10. Stock bar (progress + hint)
11. Format label + format list (lignes A2/A3/A4)
12. Finition container (sans/avec + swatches couleur)
13. ATC button (override theme)
14. Bottom info (secure, shipping)
15. Compression verticale desktop
16. Responsive mobile (< 900px)
17. Divers (tax, error, view details, delivery)
18. Masquage anciennes sections
19. Accordions
20. S1 wrapper + S1 sticky (centrage premier ecran)
21. S2 associated products (grille + cards)
═══════════════════════════════════════════════════════════════ */
/* ── Fix sticky: prevent overflow-x hidden from killing position:sticky ── */
/* Sans :has sur la racine (28/10) : html:has()/body:has() faisaient restyler
toute la page à chaque changement. Même condition : cette feuille n'est
chargée que par sections/main-product.liquid et bisou-tshirt-product.liquid,
qui posent tous deux .bisou-rv5 sans condition.
Même raison (28/10) : « .page-width .product.bisou-rv5-fiche » remplace
« .page-width .product:has(.bisou-rv5) », même poids. La classe est posée sur
le .product par ces deux mêmes sections, qui contient toujours .bisou-rv5. */
html,
body {
overflow-x: visible !important;
/* ════════ MOLETTES MOBILE (régler ici, au px près) ════════ */
--rv5-m-gap: 0px; /* écart VERTICAL avec associez le */
--rv5-m-pad-x: 16px; /* marge GAUCHE/DROITE (image + texte). Baisse-la pour gagner du terrain (ex. 12px) */
/* ═══════════════════════════════════════════════════════════ */
}
/* ── Le débord horizontal de la fiche mobile, pour mémoire (25/08) ──
L'overflow-x: visible ci-dessus n'est PAS la cause de la bande blanche : il
est le révélateur. Ce qui débordait, c'était le toast « Lien copié ! » du
bouton partage — ~196 px, centré sur un bouton de 28 px collé au bord droit,
et laissé DANS LE FLUX (opacity:0 seulement). Corrigé dans
assets/bisou-variant-ui.js : display:none tant qu'il est caché, ancré à
droite quand il s'affiche. Ne pas « réparer » ça en remettant overflow:hidden
ici : ça masquerait le symptôme et tuerait le position:sticky de la colonne
image sur ordinateur. */
/* ── Flush ALL section padding (overrides the 60px from editor settings) ── */
div:has(> .page-width .bisou-rv5),
section:has(.bisou-rv5),
.section-template--main-product-padding,
[class*="section-template"][class*="padding"]:has(.bisou-rv5) {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
product-info:has(.bisou-rv5) {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ══════════════════════════════════════════════════════
3. GRILLE 50/50 & IMAGE GAUCHE (ORDINATEUR)
══════════════════════════════════════════════════════ */
@media screen and (min-width: 900px) {
.page-width:has(> .bisou-rv5), .page-width:has(.bisou-rv5) { padding: 0 !important; max-width: 100% !important; }
/* ── 50/50 STRICT, ET POUR DE BON (Max, 26/08) ──
`1fr 1fr` ne donnait pas deux moities. Une piste `1fr` vaut
`minmax(auto, 1fr)` : elle ne descend jamais sous le minimum automatique
de son contenu. Le selecteur de droite — la table des formats, ses
libelles mono, `max-width: 600px` sur .product__info-container et 55 a
80 px de marge de chaque cote — a un min-content de 609,5 px. La piste
droite s'y calait, et la gauche prenait le reste.
Mesure au navigateur le 26/08, colonnes calculees :
900 px → 258,5 / 609,5 (29 / 71)
950 px → 340,5 / 609,5 (36 / 64)
990 px → 380,5 / 609,5 (38 / 62)
1100 px → 490,5 / 609,5 (45 / 55)
1220 px → enfin 610 / 610
C'est exactement le « pas toujours » de Max : au-dessus de 1220 px on
voyait deux moities, en dessous non.
`minmax(0, 1fr)` autorise la piste a passer sous son min-content : les
deux moities sont alors vraies a toutes les largeurs de ce palier. Le
plancher de marge laterale descend en consequence (voir plus bas) —
sinon la colonne droite gagne l'egalite mais perd sa respiration. */
.page-width .product.bisou-rv5-fiche {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
align-items: start !important;
}
.page-width .product.bisou-rv5-fiche .grid__item { max-width: 100% !important; width: 100% !important; }
/* BLOC GAUCHE (GRIS + STICKY 100VH) */
.page-width .product.bisou-rv5-fiche .product__media-wrapper {
position: sticky !important;
top: 0 !important;
height: 100vh !important;
max-height: 100vh !important;
align-self: start !important;
background-color: #F7F7F7 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
margin-top: calc(-1 * var(--header-height, 85px)) !important;
z-index: 0 !important;
/* Pousse le contenu (la photo) vers le bas pour compenser le header et la centrer à l'œil */
padding: var(--header-height, 85px) 0 0 0 !important;
}
/* ── TAILLE RÉGLABLE DE L'OEUVRE ── */
.page-width .product.bisou-rv5-fiche media-gallery {
display: block !important;
margin: 0 auto !important;
/* Petit laptop (900-1200px) : image prend quasi toute la place
Grand écran (1400px+) : padding naturel autour */
width: clamp(80%, 70vw, 85%) !important;
max-width: 600px;
}
/* VERTICALES : proportions différentes */
.page-width .product:has(.is-vertical) media-gallery {
width: clamp(60%, 50vw, 75%) !important;
max-width: none;
}
/* BLOC DROITE — colonne simple, pas de centrage ici (S1-wrapper gère) */
.page-width .product.bisou-rv5-fiche .product__info-wrapper {
position: static !important;
height: auto !important;
max-height: none !important;
display: block !important;
padding: 0 clamp(2rem, 4vw, 5rem) !important;
}
/* Le conteneur flex interne */
.page-width .product.bisou-rv5-fiche .product__info-container {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 600px !important;
margin: 0 auto !important;
}
} /* fin @media min-width: 900px */
/* ── Kill white bg on gallery images (all breakpoints) ── */
.page-width .product.bisou-rv5-fiche .product__media-wrapper .media,
.page-width .product.bisou-rv5-fiche .product__media-wrapper .product__media,
.page-width .product.bisou-rv5-fiche .product__media-wrapper img,
.page-width .product.bisou-rv5-fiche .product__media-gallery .media,
.page-width .product.bisou-rv5-fiche .global-media-settings,
.page-width .product.bisou-rv5-fiche .global-media-settings::before,
.page-width .product.bisou-rv5-fiche .global-media-settings::after {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* ── Hide native variant picker (keep in DOM for JS)
NOTE iOS : pas de pointer-events:none. Sur WebKit, pointer-events:none sur
un element invisible peut empecher le bubbling des events synthetiques
(dispatchEvent) vers les listeners parents (pubsub Shopify). Garder
opacity:0 + width/height:0 suffit a cacher sans bloquer les events. ── */
variant-selects,
variant-radios,
.product-form__input--dropdown {
position: absolute !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
clip: rect(0, 0, 0, 0) !important;
}
/* ── Variables ── */
.bisou-rv5 {
--rv5-serif: 'Cormorant Garamond', Georgia, serif;
--rv5-mono: 'Space Mono', monospace;
--rv5-black: #111111;
--rv5-white: #ffffff;
--rv5-gray: #888888;
--rv5-light-gray: #b0b0b0;
--rv5-border: #d4d4d4;
--rv5-speed: .2s;
--rv5-ease: cubic-bezier(.4, 0, .2, 1);
/* ── Fluid scaling: 13" laptop → 3K ultra-wide ── */
--rv5-pad-side: clamp(2rem, 4vw, 5rem);
--rv5-pad-top: clamp(2rem, 4vh, 4rem);
--rv5-title-fz: clamp(14px, 1vw, 17px);
--rv5-date-fz: clamp(14px, 1vw, 17px);
--rv5-price-fz: clamp(22px, 1.5vw, 26px);
--rv5-gap-cartel: clamp(4px, 1vh, 8px);
--rv5-gap-sections: clamp(1rem, 2vh, 2rem);
/* Molettes mobile (--rv5-m-gap / --rv5-m-pad-x) définies plus haut sur html, body */
}
/* ── Respiration pour petits laptops (900–1600px) ──
Padding direct sur le wrapper (les CSS vars ne cascadent pas au parent).
Min 55px top/left/right. Bottom généreux pour que le contenu ne colle
pas au mockup en scrollant. À 1600px → rejoint les valeurs par défaut.
┌──────────┬──── top ────┬── left/right ──┬── bottom ──┐
│ 900px │ 55px │ 55px │ 80px │
│ 1250px │ ~60px │ ~60px │ ~96px │
│ 1600px │ ~64px │ ~64px │ ~108px │
└──────────┴─────────────┴────────────────┴────────────┘ */
@media screen and (min-width: 900px) and (max-width: 1600px) {
/* Petits laptops : plus de padding latéral sur le wrapper.
26/08 — Le plancher descend de 55 px a 26 px. Avec `minmax(0, 1fr)`, la
colonne droite fait desormais la moitie de l'ecran : 450 px a 900 px de
large. A 55 px de marge de chaque cote il ne restait que 340 px pour la
table des formats, qui en demande 500. Le plafond de 80 px ne bouge pas :
au-dela de 1250 px la colonne est large et retrouve ses marges pleines. */
.page-width .product.bisou-rv5-fiche .product__info-wrapper {
padding-left: clamp(26px, calc(3.4vw - 4px), 80px) !important;
padding-right: clamp(26px, calc(3.4vw - 4px), 80px) !important;
}
}
/* ── Section container as flex column (must override the display:block from sticky kill) ── */
.bisou-rv5 {
display: flex !important;
flex-direction: column !important;
gap: 0;
padding: 0;
}
/* Disable theme's sticky block display if active */
.bisou-rv5.product__column-sticky {
display: flex;
}
/* ══════════════════════════════════════════════════════
TOP BAR
══════════════════════════════════════════════════════ */
.rv5-top-bar {
order: 10;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
}
.rv5-ref-group {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
min-width: 0;
}
/* ── Nom de l'œuvre en tête de fiche (remplace la référence depuis le 19/08) ──
Reprend le style de .rv5-ref, mais un nom fait jusqu'à trente caractères là
où une référence en faisait cinq : deux lignes maximum, puis ellipse, et
deux paliers de taille calés sur ceux de l'en-tête mobile (18 / 28 car.). */
.rv5-name {
font-family: var(--rv5-mono);
font-size: 24px;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--rv5-black);
margin: 0;
line-height: 1.2;
min-width: 0;
flex: 1 1 12ch;
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rv5-name--long {
font-size: 20px;
}
.rv5-name--very-long {
font-size: 17px;
}
.rv5-ref {
font-family: var(--rv5-mono);
font-size: 24px;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--rv5-black);
margin: 0;
line-height: 1.2;
}
.rv5-edition-tag {
font-family: var(--rv5-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rv5-black);
border: 1px solid var(--rv5-black);
border-radius: 4px;
padding: 4px 8px;
line-height: 1;
white-space: nowrap;
}
/* ── Bloc droit de la barre du haut (19/08) ──
Étoiles, artiste, partage et cœur réunis à droite. La ligne du titre est
libre : un nom long ne se fait plus rogner par les actions. */
.rv5-top-bar__aside {
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
margin-left: 16px;
}
.rv5-top-actions {
display: flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
/* Point médian entre la date et la référence, dans le cartel et sur mobile. */
.rv5-cartel-sep {
color: var(--rv5-light-gray);
font-family: var(--rv5-mono);
font-size: 11px;
line-height: 1;
}
.rv5-btn-share {
background: none;
border: none;
cursor: pointer;
color: var(--rv5-gray);
display: flex;
align-items: center;
padding: 4px;
transition: color 0.2s;
}
.rv5-btn-share:hover {
color: var(--rv5-black);
}
/* .rv5-stars a ete retire le 19/08 : plus d'etoiles en dur sur la fiche.
Elles reviendront avec de vrais avis, et leur style avec elles. */
.rv5-mobile-header {
display: none;
}
/* Cœur + partage en surimpression du mockup : mobile seulement. Sur ordinateur
la .rv5-top-bar garde les siens, rien ne se pose sur le tirage. */
.rv5-media-actions {
display: none;
}
/* Badge « Édition limitée » en face du titre FORMAT : mobile seulement.
Sur ordinateur il reste sur la ligne de l'artiste (.rv5-cartel-right), et
c'est « Édité en N exemplaires » qui fait face à FORMAT. */
.rv5-flbl-edition {
display: none;
}
/* ══════════════════════════════════════════════════════
CARTEL (Title + Artist + Price)
══════════════════════════════════════════════════════ */
.rv5-cartel-row {
order: 20;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-top: 8px;
padding-bottom: var(--rv5-gap-sections);
}
.rv5-cartel-left {
display: flex;
flex-direction: column;
gap: 0px;
flex: 1;
padding-right: 16px;
}
.rv5-title-line {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.rv5-title {
font-family: var(--rv5-mono);
font-size: var(--rv5-title-fz);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 0;
white-space: nowrap;
color: var(--rv5-black);
}
/* Référence descendue dans le cartel : petite et grise, sans guillemets. */
.rv5-title--ref {
color: var(--rv5-gray);
font-weight: 400;
letter-spacing: 0.1em;
}
/* ══════════════════════════════════════════════════════
HISTOIRE DE L'ARTISTE (métachamp custom.br_story)
Rien n'existe dans le DOM si le métachamp est vide.
══════════════════════════════════════════════════════ */
.rv5-story {
order: 24;
margin: 0 0 var(--rv5-gap-sections) 0;
}
/* Ventes & fidélité cache ce bloc, mais par un style posé tout en bas de la page : au téléphone il s'affichait
puis disparaissait, et la liste des formats remontait de 134 px au chargement. La même règle ici, chargée
avant la fiche, le cache dès le premier affichage (chaîne site-animations, 25/10) */
html:not(.bvf-off) #rv5-bloc-story { display: none !important; }
.rv5-story__text {
font-family: var(--rv5-serif);
font-size: 14px;
font-style: italic;
line-height: 1.5;
color: var(--rv5-gray);
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rv5-story__more {
display: inline-block;
margin-top: 4px;
font-family: var(--rv5-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--rv5-black);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.rv5-story__more-close {
display: none;
}
.rv5-story__toggle:checked ~ .rv5-story__text {
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: visible;
}
.rv5-story__toggle:checked ~ .rv5-story__more .rv5-story__more-open {
display: none;
}
.rv5-story__toggle:checked ~ .rv5-story__more .rv5-story__more-close {
display: inline;
}
.rv5-date {
font-family: var(--rv5-serif);
font-size: var(--rv5-date-fz);
color: var(--rv5-gray);
font-style: italic;
white-space: nowrap;
}
.rv5-artist {
font-family: var(--rv5-mono);
font-size: 12px;
color: var(--rv5-gray);
font-style: normal;
padding-top: 4px;
letter-spacing: 0.04em;
}
.rv5-artist a {
color: var(--rv5-gray);
text-decoration: none;
transition: color 0.2s, background-color 0.2s;
background: linear-gradient(to top, rgba(17,17,17,0.06) 40%, transparent 40%);
padding: 1px 2px;
}
.rv5-artist a:hover {
color: var(--rv5-black);
background: linear-gradient(to top, rgba(17,17,17,0.12) 40%, transparent 40%);
}
/* Mobile: artist in topbar (right side), hidden on desktop */
.rv5-artist--topbar {
display: none;
}
/* Desktop: artist in cartel, hidden on mobile (overridden below) */
.rv5-artist--cartel {
display: block;
}
/* Price wrapper — override theme price styles */
.rv5-price-wrap {
flex-shrink: 0;
}
.rv5-price-wrap .price {
display: flex;
align-items: flex-start;
gap: 0;
}
.rv5-price-wrap .price__container {
display: contents;
}
.rv5-price-wrap .price__regular {
display: contents;
}
.rv5-price-wrap .price-item--regular {
font-family: var(--rv5-mono);
font-size: var(--rv5-price-fz);
font-weight: 200;
line-height: 1;
color: var(--rv5-black);
}
.rv5-price-wrap .price__sale .price-item--regular {
font-size: 16px;
text-decoration: line-through;
opacity: 0.5;
}
.rv5-price-wrap .price-item--sale {
font-family: var(--rv5-mono);
font-size: var(--rv5-price-fz);
font-weight: 200;
line-height: 1;
color: var(--rv5-black);
}
.rv5-price-wrap .price .badge,
.rv5-price-wrap .price__badge-sale,
.rv5-price-wrap .price__badge-sold-out,
.rv5-price-wrap .unit-price {
display: none;
}
/* ══════════════════════════════════════════════════════
REASSURANCE
══════════════════════════════════════════════════════ */
.rv5-reassurance {
order: 30;
list-style: none;
margin: 0 0 10px 0;
padding: 0;
}
.rv5-reassurance li {
font-family: var(--rv5-serif);
font-size: 15px;
color: #333;
margin-bottom: 8px;
display: flex;
align-items: flex-start;
line-height: 1.4;
}
.rv5-reassurance--desktop li::before {
content: '•';
font-family: var(--rv5-mono);
font-size: 14px;
margin-right: 12px;
color: var(--rv5-black);
flex-shrink: 0;
}
/* Mobile reassurance with icons */
.rv5-reassurance--mobile {
display: none;
}
.rv5-reassurance--mobile li::before {
display: none;
}
.rv5-trust-icon {
flex-shrink: 0;
margin-right: 10px;
position: relative;
top: 2px;
}
/* ══════════════════════════════════════════════════════
STOCK BAR
══════════════════════════════════════════════════════ */
.rv5-stock-container {
order: 100; /* Desktop : sous finition (80), au-dessus de ATC (100) */
margin-top: 0;
margin-bottom: var(--rv5-gap-sections);
/* ── Réglages espacement desktop ──
margin-top : espace AU-DESSUS de la barre stock (sous finition)
margin-bottom : espace EN-DESSOUS de la barre stock (avant ATC) */
}
.rv5-stock-text {
font-family: var(--rv5-mono);
font-size: 10px;
color: var(--rv5-black);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 400;
}
.rv5-progress {
display: block !important;
width: 100%;
height: 3px !important;
background-color: #E0E0E0 !important;
overflow: hidden;
margin: 0;
border-radius: 2px;
}
.rv5-progress-fill {
display: block !important;
height: 3px !important;
min-height: 100% !important;
transition: width 0.3s;
}
.rv5-stock-under {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: 6px;
}
.rv5-stock-hint {
font-family: var(--rv5-mono);
font-size: 10px;
color: var(--rv5-gray);
letter-spacing: 0.05em;
}
/* Collision de numero de tirage : « le n°4 vient d'etre achete, vous aurez le
n°5 ». Pose par assets/bisou-variant-ui.js, masque tant qu'il ne s'est rien
passe. Meme famille et meme graisse que la barre de stock — c'est la meme
information, pas une alerte. */
.rv5-stock-notice {
font-family: var(--rv5-mono);
font-size: 10px;
line-height: 1.5;
color: var(--rv5-black);
letter-spacing: 0.04em;
margin: 6px 0 0;
}
.rv5-stock-notice[hidden] { display: none; }
/* ══════════════════════════════════════════════════════
FORMAT LABEL + LIST
══════════════════════════════════════════════════════ */
.rv5-flbl {
font-family: var(--rv5-mono);
font-size: 15px;
color: var(--rv5-black);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.rv5-flbl-aside {
font-size: 9px;
font-weight: 400;
color: var(--rv5-light-gray);
letter-spacing: 0.05em;
text-transform: uppercase;
transition: color 0.3s ease;
}
.rv5-flbl-aside.rv5-ship-free {
color: #2e7d32;
}
.rv5-flbl-fmt {
order: 50;
}
.rv5-flbl-fin {
order: 70;
}
.rv5-format-list {
order: 60;
display: flex;
flex-direction: column;
border: 1px solid var(--rv5-border);
border-radius: 2px;
margin-bottom: var(--rv5-gap-sections);
overflow: hidden;
}
.rv5-format-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
padding: 14px 16px;
border-bottom: 1px solid var(--rv5-border);
cursor: pointer;
background: var(--rv5-white);
transition: all 0.2s;
}
.rv5-format-row:last-child {
border-bottom: none;
}
.rv5-format-row:hover:not(.active) {
background: #fafafa;
}
.rv5-format-row.active {
background: var(--rv5-black);
color: var(--rv5-white);
}
.rv5-format-row.active .rv5-f-dim-lbl,
.rv5-format-row.active .rv5-f-dim-val,
.rv5-format-row.active .rv5-f-paper {
color: var(--rv5-white);
opacity: 0.8;
}
.rv5-f-left {
display: flex;
align-items: center;
white-space: nowrap;
}
.rv5-f-name {
font-family: var(--rv5-mono);
font-size: 11px;
font-weight: 700;
}
.rv5-f-dot {
margin: 0 6px;
color: var(--rv5-light-gray);
font-size: 12px;
}
.rv5-f-paper {
font-family: var(--rv5-mono);
font-size: 11px;
}
.rv5-f-right {
font-family: var(--rv5-mono);
font-size: 10px;
color: var(--rv5-gray);
text-align: center;
white-space: nowrap;
}
.rv5-f-dim-lbl {
display: none;
}
.rv5-f-dim-val {
opacity: 0.8;
}
.rv5-f-price {
font-family: var(--rv5-mono);
font-size: 13px;
font-weight: 200;
text-align: right;
color: var(--rv5-black);
}
.rv5-format-row.active .rv5-f-price {
color: var(--rv5-white);
}
/* ══════════════════════════════════════════════════════
FINITION CONTAINER
══════════════════════════════════════════════════════ */
.rv5-finish-container {
order: 80;
display: flex !important;
flex-wrap: nowrap;
width: 100%;
height: 54px;
margin-bottom: var(--rv5-gap-sections);
border-radius: 2px;
border: 1px solid var(--rv5-border);
overflow: hidden;
}
/* Part A: Avec / Sans — 50/50 split */
.rv5-finish-part-a {
display: flex;
width: 50%;
border-right: 1px solid var(--rv5-border);
}
.rv5-btn-avec {
width: 50%;
background: transparent;
color: var(--rv5-gray);
border: none;
border-right: 1px solid var(--rv5-border);
font-family: var(--rv5-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: all 0.2s;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.rv5-btn-sans {
width: 50%;
background: transparent;
color: var(--rv5-gray);
border: none;
font-family: var(--rv5-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: all 0.2s;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.rv5-btn-sans.active,
.rv5-btn-avec.active {
background: var(--rv5-black);
color: var(--rv5-white);
}
/* ── Focus clavier du selecteur (format, avec/sans cadre, pastilles).
Anneau visible au clavier seulement (:focus-visible), jamais au clic ni au
doigt. Lignes et boutons : anneau interieur (le conteneur coupe ce qui
deborde), blanc sur l'element actif noir. ── */
.rv5-format-row:focus-visible,
.rv5-btn-avec:focus-visible,
.rv5-btn-sans:focus-visible {
outline: 2px solid var(--rv5-black);
outline-offset: -4px;
box-shadow: none;
}
.rv5-format-row.active:focus-visible,
.rv5-btn-avec.active:focus-visible,
.rv5-btn-sans.active:focus-visible {
outline-color: var(--rv5-white);
}
/* ── Thème sombre : la ligne du format choisi se voit (fiche site-mockups-6-galerie-points-et-format-sombre, 25/10).
bisou-theme-sombre.css passe toutes les lignes sur la surface, la choisie comprise : seul son nom restait blanc.
L'inverse du clair (fond noir, texte blanc) : l'ivoire du texte en fond, la page en texte (15:1), l'anneau clavier
de la couleur de la page. (1,4,0) passe devant la règle des surfaces (1,3,0). Ici plutôt que dans
bisou-theme-sombre.css, tenue par une autre fiche ce matin-là ; peut l'y rejoindre. Réversible : retirer ce bloc. ── */
:root.br-sombre:not(#br-0) .rv5-format-row.active {
background-color: rgb(var(--br-texte)) !important;
color: rgb(var(--br-page));
}
:root.br-sombre:not(#br-0) .rv5-format-row.active :is(.rv5-f-name, .rv5-f-paper, .rv5-f-dim-lbl, .rv5-f-dim-val, .rv5-f-price) {
color: rgb(var(--br-page)) !important;
}
:root.br-sombre:not(#br-0) .rv5-format-row.active .rv5-f-dot { color: rgba(var(--br-page), 0.45); }
:root.br-sombre:not(#br-0) .rv5-format-row.active:focus-visible { outline-color: rgb(var(--br-page)); }
/* ── Thème sombre : « Avec cadre » ou « Sans cadre » choisi se marque comme le format choisi juste au-dessus (fiche
site-mockups-8-choix-du-cadre-sombre, 26/10). Il gardait le noir du clair (#111) sur la page sombre : seul son texte
blanc le distinguait. Même inversion : fond ivoire, texte et anneau clavier de la couleur de la page. (1,4,0). Ici
plutôt que dans bisou-theme-sombre.css, tenue par deux autres fiches ; peut l'y rejoindre avec le bloc du dessus. ── */
:root.br-sombre:not(#br-0) :is(.rv5-btn-avec, .rv5-btn-sans).active {
background-color: rgb(var(--br-texte));
color: rgb(var(--br-page));
}
:root.br-sombre:not(#br-0) :is(.rv5-btn-avec, .rv5-btn-sans).active:focus-visible { outline-color: rgb(var(--br-page)); }
/* ── Thème sombre : la pastille « papier » choisie (« Sans cadre ») se voit (fiche site-mockups-10-pastille-papier-sombre,
26/10). Le clair la marque d'un bord noir de 1 px ; en sombre, ce bord #111 se perdait sur la case des pastilles.
Même geste, en ivoire : 1 px de --br-texte (14:1 sur la case). (1,5,0) et !important pour passer le !important du clair.
Ici plutôt que dans bisou-theme-sombre.css, tenue par une autre fiche ; peut l'y rejoindre avec les deux blocs du dessus. ── */
:root.br-sombre:not(#br-0) .rv5-color-swatch.rv5-c-none.active { border-color: rgb(var(--br-texte)) !important; }
.rv5-color-swatch:focus-visible {
outline: 2px solid var(--rv5-black);
outline-offset: 2px;
box-shadow: none;
}
/* Part B: Swatches centered */
.rv5-finish-part-b {
display: flex !important;
width: 50%;
overflow: hidden;
align-items: center;
justify-content: center;
padding: 0 12px;
background: #fafafa;
}
.rv5-part-b-info {
display: none;
}
.rv5-f-arrow {
color: var(--rv5-gray);
display: flex;
align-items: center;
}
.rv5-color-label {
font-family: var(--rv5-mono);
font-size: 10px;
color: var(--rv5-black);
text-transform: uppercase;
letter-spacing: 0.05em;
padding-left: 6px;
}
.rv5-swatches-wrap {
display: flex;
gap: 6px;
margin: 0 auto;
}
.rv5-color-swatch {
display: block !important;
width: 22px;
height: 22px;
border-radius: 50% !important;
border: 1px solid var(--rv5-border);
cursor: pointer;
flex-shrink: 0;
transition: transform 0.2s, border-color 0.2s;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
touch-action: manipulation;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
@media (hover: hover) {
.rv5-color-swatch:hover {
transform: scale(1.1);
}
}
.rv5-color-swatch.active {
border: 2px solid var(--rv5-black);
}
/* Swatch colors */
.rv5-c-none {
background: linear-gradient(to top right, transparent 49%, #e74c3c 49%, #e74c3c 51%, transparent 51%) !important;
overflow: hidden;
}
.rv5-c-none.active {
background: linear-gradient(to top right, transparent 49%, #e74c3c 49%, #e74c3c 51%, transparent 51%) !important;
border: 1px solid var(--rv5-black) !important;
}
.rv5-c-noir {
background-color: #111111 !important;
}
.rv5-c-noir.active {
border: 1.5px solid #ffffff !important;
outline: 1px solid var(--rv5-black) !important;
outline-offset: 0 !important;
}
.rv5-c-blanc {
background-color: #ffffff !important;
}
.rv5-c-chene {
background-color: #c19a6b !important;
}
.rv5-c-bouleau {
background-color: #e2d3b8 !important;
}
/* ══════════════════════════════════════════════════════
ATC BUTTON (override theme button)
══════════════════════════════════════════════════════ */
.bisou-rv5 .product-form {
width: 100%;
}
.bisou-rv5 .product-form__buttons {
margin: 0;
}
.bisou-rv5 .product-form__submit {
width: 100%;
height: 60px;
background: var(--rv5-black) !important;
color: var(--rv5-white) !important;
border: none !important;
font-family: var(--rv5-mono);
font-size: 11px;
letter-spacing: .15em;
text-transform: uppercase;
cursor: pointer;
border-radius: 2px;
margin-bottom: 8px;
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
flex-wrap: nowrap;
white-space: nowrap;
transition: background 0.2s, transform 0.1s;
min-height: unset;
}
/* Empêche le label et le prix de se scinder (le € ne retombe jamais sous le texte) */
.bisou-rv5 .product-form__submit > span {
white-space: nowrap;
}
.bisou-rv5 .product-form__submit:hover {
background: #333 !important;
}
.bisou-rv5 .product-form__submit:active {
transform: scale(.99);
}
.bisou-rv5 .bisou-atc-price {
font-size: 14px;
font-weight: 400;
opacity: 1;
white-space: nowrap;
}
/* Hide dynamic checkout, payment terms, pickup within rv5 */
.bisou-rv5 .shopify-payment-button,
.bisou-rv5 .installment,
.bisou-rv5 .product__pickup-availabilities {
display: none;
}
/* ══════════════════════════════════════════════════════
SECURE INFO
══════════════════════════════════════════════════════ */
.rv5-bottom-info {
order: 110;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline;
gap: 0 6px;
width: 100%;
font-family: var(--rv5-mono);
font-size: 9px;
color: var(--rv5-gray);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 4px;
}
/* ── COMPRESSION VERTICALE POUR LAPTOPS (scales with fluid variables) ── */
@media screen and (min-width: 900px) {
.rv5-cartel-row { padding-top: var(--rv5-gap-cartel) !important; padding-bottom: var(--rv5-gap-cartel) !important; }
.rv5-reassurance { margin-bottom: var(--rv5-gap-sections) !important; }
.rv5-reassurance li { margin-bottom: 4px !important; font-size: 14px !important; }
.rv5-stock-container { margin-bottom: var(--rv5-gap-sections) !important; }
.rv5-format-list { margin-bottom: var(--rv5-gap-sections) !important; }
.rv5-format-row { padding: 10px 14px !important; }
.rv5-finish-container { height: 48px !important; margin-bottom: var(--rv5-gap-sections) !important; }
.bisou-rv5 .product-form__submit { height: 52px !important; margin-bottom: 8px !important; }
#bloc-accordions { margin-top: var(--rv5-gap-sections) !important; }
}
/* ══════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* ─── Espacement vertical entre blocs (mobile) — réglable via --rv5-m-gap ─── */
.bisou-rv5 {
gap: var(--rv5-m-gap) !important;
}
/* Mobile uses a dedicated compact two-row header. */
.rv5-top-bar,
.rv5-cartel-row {
display: none !important;
}
/* ─── Padding au-dessus de l'image produit mobile ─── */
.page-width .product.bisou-rv5-fiche .product__media-wrapper {
padding-top: 8px !important;
}
/* ─── Tête du sélecteur : UNE colonne, tout aligné à gauche (25/08) ───
Avant : deux rangées en space-between, le nom à gauche / le cœur à droite,
puis la date à gauche / l'artiste à droite. « 09 » tombait sous le titre et
« 2025 Espagne » était écrasé contre le bord. Maintenant les trois lignes
s'empilent, chacune sur son propre axe gauche. */
.rv5-mobile-header {
order: 10;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
margin: 2px 0 12px;
text-align: left;
}
/* 26/08 — Deux rangees. Chacune : un cote souple a gauche qui coupe a
l'ellipse, un cote fixe a droite qui ne cede jamais. */
.rv5-mobile-header__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
min-width: 0;
}
.rv5-mobile-header__row--meta {
align-items: baseline;
}
.rv5-mobile-header__meta {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0 6px;
flex: 1 1 auto;
min-width: 0;
}
.rv5-mobile-header__title {
flex: 1 1 auto;
min-width: 0;
margin: 0;
color: var(--rv5-black);
font-family: var(--rv5-mono);
font-size: clamp(13px, 3.8vw, 16px);
font-weight: 700;
letter-spacing: 0.07em;
line-height: 1.2;
overflow-wrap: anywhere;
text-transform: uppercase;
white-space: normal;
}
.rv5-mobile-header__title--long {
font-size: clamp(12px, 3.4vw, 15px);
}
.rv5-mobile-header__title--very-long {
font-size: clamp(11px, 3.1vw, 14px);
}
/* 26/08 — Le cœur et le partage sont revenus sur la ligne du TITRE, à droite
(Max, point 3.2). Ils ne sont plus en surimpression du tirage : le bloc
.rv5-media-actions vit désormais dans .rv5-mobile-header. */
.rv5-mobile-header .rv5-media-actions {
position: static;
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.rv5-media-actions .bisou-wish-btn--pdp,
.rv5-btn-share--mobile {
flex: 0 0 28px;
width: 28px;
height: 28px;
margin-top: 0;
}
/* La référence a rejoint la ligne de date : même petit gris qu'elle. */
.rv5-mobile-header__ref {
flex-shrink: 0;
color: var(--rv5-light-gray);
font-family: var(--rv5-mono);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.06em;
line-height: 1.35;
}
.rv5-mobile-header__date {
color: var(--rv5-light-gray);
font-family: var(--rv5-serif);
font-size: 15px;
font-style: italic;
line-height: 1.2;
white-space: normal;
}
/* 26/08 — L'artiste se pose à DROITE de la ligne « pays / année », sous le
cœur et le partage (Max, point 3.2). Il ne se fait plus écraser comme au
24/08 : c'est le cas fixe de la rangée, la date à gauche est le cas souple
et c'est elle qui cède si la place manque. */
.rv5-mobile-header__artist {
flex: 0 0 auto;
max-width: 52%;
overflow: hidden;
padding-top: 0;
font-size: 11px;
line-height: 1.2;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.rv5-mobile-header__artist a {
display: block;
overflow: hidden;
background: none;
padding: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.rv5-mobile-header__artist a:hover {
background: none;
}
.rv5-bottom-info {
display: none !important;
}
/* ─── Bloc 3 : Reassurance mobile ─── */
.rv5-reassurance--desktop {
display: none !important;
}
.rv5-reassurance--mobile {
display: block !important;
order: 25;
list-style: none;
margin: 0 0 14px 0;
padding: 0;
}
.rv5-reassurance--mobile li {
font-family: var(--rv5-mono);
font-size: 10px;
color: #555;
margin-bottom: 6px;
display: flex;
align-items: flex-start;
line-height: 1.4;
letter-spacing: 0.02em;
}
/* ─── Desktop-only asides hidden on mobile ─── */
.rv5-edition-aside { display: none !important; }
.rv5-shipping-aside { display: none !important; }
/* ─── Bloc 4 & 6 : Labels Format / Finition ─── */
.rv5-flbl {
font-size: 11px !important;
margin-bottom: 6px !important;
margin-top: 6px !important;
}
.rv5-flbl-aside {
font-size: 8px;
}
.rv5-flbl-fin {
margin-top: 10px !important;
}
/* ─── Format rows: compact, smaller prices, centered dims ─── */
.rv5-format-row {
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: center !important;
padding: 10px 10px !important;
column-gap: 4px !important;
}
.rv5-f-left {
grid-column: 1 / 2 !important;
grid-row: 1 / 2 !important;
}
.rv5-f-name {
font-size: 10px !important;
}
.rv5-f-paper {
font-size: 10px !important;
}
.rv5-f-dot {
font-size: 8px !important;
margin: 0 3px !important;
}
.rv5-f-right {
grid-column: 2 / 3 !important;
grid-row: 1 / 2 !important;
text-align: center !important;
font-size: 9px !important;
}
.rv5-f-price {
grid-column: 3 / 4 !important;
grid-row: 1 / 2 !important;
align-self: center !important;
margin-left: 0 !important;
font-size: 11px !important;
font-weight: 400 !important;
text-align: right !important;
white-space: nowrap !important;
}
/* ─── Bloc 5 : Tableau formats ─── */
.rv5-format-list {
margin-bottom: 8px !important;
}
/* ─── Bloc 7 : Finition container ─── */
.rv5-finish-container {
flex-direction: column;
height: auto;
margin-bottom: 10px !important;
}
.rv5-finish-part-a,
.rv5-finish-part-b {
width: 100%;
height: 44px;
border-right: none;
}
.rv5-finish-part-a {
border-bottom: 1px solid var(--rv5-border);
}
.rv5-btn-avec, .rv5-btn-sans {
width: 50% !important;
padding: 0 4px !important;
font-size: 10px;
}
.rv5-finish-part-b {
justify-content: center !important;
height: 58px !important; /* hauteur de la case couleurs de cadre (mobile) */
}
.rv5-finish-part-b .rv5-swatches-wrap {
gap: 10px !important;
}
.rv5-finish-part-b .rv5-color-swatch {
width: 30px !important; /* taille des pastilles (mobile) */
height: 30px !important;
}
/* ─── Bloc 9 : ATC button ─── */
.bisou-rv5 .product-form {
margin-top: 6px !important;
}
.bisou-rv5 .product-form__submit {
margin-bottom: 0 !important;
gap: 10px !important;
letter-spacing: .08em !important;
}
/* ─── Bloc 8 : Stock AU-DESSUS de ATC (order 95) ─── */
.rv5-stock-container {
order: 95 !important;
margin-top: 14px !important;
margin-bottom: 18px !important; /* espace sous « ...10/10 restants » */
}
/* Progress bar lighter at 100% on mobile */
.rv5-progress {
height: 3px !important;
background-color: #eee !important;
}
/* ─── Bloc 10 : Delivery info ─── */
.rv5-delivery-info {
display: block !important;
order: 106;
margin-top: 12px;
margin-bottom: 1rem;
padding-bottom: 1.5rem;
}
/* ─── Marge latérale globale mobile (image + texte) = --rv5-m-pad-x ─── */
.page-width:has(.bisou-rv5) {
padding-left: var(--rv5-m-pad-x) !important;
padding-right: var(--rv5-m-pad-x) !important;
}
/* ─── ÉLARGISSEMENT DU BLOC D'ACHAT (25/08) ───
La marge latérale du sélecteur valait 40 px de chaque côté : 20 px de
.page-width (--rv5-m-pad-x) PLUS 20 px posés sur .product__info-wrapper
par assets/base.css l. 3987. Deux paddings empilés que rien n'annonçait :
le tableau FORMAT finissait 20 px avant l'image.
On en grignote 60 % : 40 px → 16 px. Le padding du wrapper tombe à zéro et
--rv5-m-pad-x descend à 16, donc l'image, le tableau FORMAT, le bloc
FINITION, la description, la barre de stock et le bouton « Ajouter au
panier » partent tous du MÊME axe, sur toute la hauteur du sélecteur.
Pour rendre de l'air : remonter --rv5-m-pad-x, une seule valeur à changer. */
.product__info-wrapper:has(.bisou-rv5) {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ─── Cœur + partage, en haut à droite du mockup (M1) ───
En surimpression, sur pastilles blanches pour rester lisibles quel que soit
le tirage. Le coin haut droit est celui que les futures flèches du mockup
3D occuperont : la cohabitation se réglera ici, à un seul endroit. */
.rv5-media-actions {
position: absolute;
top: 6px;
right: 6px;
z-index: 3;
display: flex;
align-items: center;
gap: 6px;
}
.rv5-media-actions .bisou-wish-btn--pdp,
.rv5-media-actions .rv5-btn-share--mobile {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--rv5-border, #d4d4d4);
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
color: #6f6f6f;
}
/* Le panneau « Édition limitée » recouvre la scène : les actions s'effacent
le temps qu'il est ouvert, sinon elles flottent par-dessus son texte. */
.rv5-media-stage.rv5-edition-open .rv5-media-actions {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
/* ─── Badge « Édition limitée » en face de FORMAT (M4) ───
La place à droite du titre était libre sur mobile : « Édité en N
exemplaires » y est masqué depuis toujours (.rv5-edition-aside, plus haut).
26/08 — DEUX CORRECTIONS (Max, point 3.1).
1. LA TAILLE. Ces déclarations ne s'appliquaient pas. `.rv5-flbl-edition`
et `.rv5-edition-tag--gold` pèsent exactement le même poids — une
classe chacune — et la seconde est écrite 860 lignes PLUS BAS. À
spécificité égale, c'est l'ordre du fichier qui tranche : le badge
gardait ses 10 px et ses 5/9 px de marge, jamais les 8 px voulus ici.
Le sélecteur descend donc dans la rangée (`.rv5-flbl .rv5-edition-tag--gold`)
et passe devant. C'est la seule façon de gagner sans `!important`.
2. L'ALIGNEMENT. `align-self: center` centrait le badge sur la hauteur de
la rangée, alors que la rangée est en `align-items: baseline` : le mot
« FORMAT » et le badge ne partageaient aucune ligne. `baseline` les
pose sur la même. */
.rv5-flbl .rv5-edition-tag--gold.rv5-flbl-edition {
display: inline-block;
flex: 0 0 auto;
align-self: baseline;
padding: 3px 6px;
font-size: 8.5px;
letter-spacing: 0.1em;
border-radius: 3px;
}
}
/* Tablette en portrait, de 750 a 899 px (22/10) : la fiche passe sur deux
colonnes et la tete du selecteur ouvre celle de droite, collee a la ligne de
l’en-tete (titre a 6 px, coeur a 2 px). On lui rend l’air qu’elle a a
l’ordinateur (coeur a 22 px de l’en-tete a 1 024 px). Au telephone, elle
suit l’image : rien ne change. */
@media screen and (min-width: 750px) and (max-width: 899px) {
.rv5-mobile-header {
margin-top: 22px;
}
}
/* Meme palier (22/10, suite) : la colonne de droite garde le padding nul du
telephone (« ELARGISSEMENT DU BLOC D'ACHAT », plus haut), son texte part du
bord du bloc de l'image. Panneau « Edition limitee » ouvert, ce bloc devient
noir : titre, formats, boutons et reassurance y collaient (0 px). On lui rend
le plancher de l'ordinateur a 900 px (26 px). Au telephone : rien ne change.
La fiche t-shirt charge ce fichier mais reste sur une colonne a ces largeurs :
elle n'a pas .rv5-mobile-header, la regle ne l'atteint pas. */
@media screen and (min-width: 750px) and (max-width: 899px) {
.product__info-wrapper:has(.rv5-mobile-header) {
padding-left: 26px !important;
}
}
/* ── Product tax/shipping line ── */
.bisou-rv5 .product__tax {
display: none;
}
/* ── Error message within form ── */
.bisou-rv5 .product-form__error-message-wrapper {
order: 99;
}
/* ── Hide view details link ── */
.bisou-rv5 .product__view-details {
display: none;
}
/* ── Desktop: shipping link in bottom info ── */
.rv5-shipping-link {
color: var(--rv5-gray);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
transition: color 0.2s;
}
.rv5-shipping-link:hover {
color: var(--rv5-black);
}
/* ── Delivery info (mobile only, hidden on desktop) ── */
.rv5-delivery-info {
order: 106;
display: none;
}
.rv5-delivery-line {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--rv5-mono);
font-size: 9px;
color: var(--rv5-gray);
letter-spacing: 0.03em;
margin-bottom: 4px;
}
.rv5-delivery-line svg {
flex-shrink: 0;
color: var(--rv5-light-gray);
stroke: var(--rv5-light-gray);
}
/* ── Progress bar: subtle at 100% ── */
.rv5-progress-fill[style*="width: 100%"],
.rv5-progress-fill[style*="width:100%"] {
background-color: var(--rv5-light-gray) !important;
border-radius: 2px;
}
/* ── Hide old collapsible sections & dividers below main product ── */
.section-custom_liquid_LCgf9j,
.section-collapsible_content_AG49Ff,
.section-custom_liquid_qiCrnE,
[id*="custom_liquid_LCgf9j"],
[id*="collapsible_content_AG49Ff"],
[id*="custom_liquid_qiCrnE"] {
display: none !important;
}
/* ══════════════════════════════════════════════════════
ACCORDIONS
══════════════════════════════════════════════════════ */
#bloc-accordions {
order: 120;
margin-top: 2rem;
border-top: 1px solid var(--rv5-border);
padding-top: 1rem;
}
.rv5-accordions-title {
font-family: var(--rv5-mono);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--rv5-black);
margin-bottom: 1rem;
}
.rv5-accordion {
border-bottom: 1px solid var(--rv5-border);
}
.rv5-accordion summary {
list-style: none;
padding: 1.2rem 0;
font-family: var(--rv5-mono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--rv5-black);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.rv5-accordion summary::-webkit-details-marker {
display: none;
}
.rv5-accordion summary::after {
content: '+';
font-size: 16px;
font-weight: 400;
color: var(--rv5-gray);
}
.rv5-accordion[open] summary::after {
content: '-';
}
.rv5-accordion .content {
font-family: var(--rv5-serif);
font-size: 15px;
line-height: 1.5;
color: #444;
padding-bottom: 1.5rem;
}
.rv5-accordion .content strong {
font-family: var(--rv5-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
display: block;
margin-top: 10px;
margin-bottom: 4px;
color: var(--rv5-black);
}
/* ══════════════════════════════════════════════════════
S1 & S2 — EFFET PARALLAX / STICKY INTERNE (CORRIGÉ)
══════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════
S1 WRAPPER + S1 STICKY — centrage CSS pur
══════════════════════════════════════════════════════ */
/* Le conteneur flex pour le order des éléments (all breakpoints) */
.bisou-s1-sticky {
display: flex !important;
flex-direction: column !important;
gap: 0;
width: 100%;
}
@media screen and (min-width: 900px) {
/* S1-wrapper centré dans le 1er écran (header tient car plus de snap auto-scroll) */
.bisou-s1-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
min-height: calc(100vh - var(--header-height, 85px));
width: 100%;
box-sizing: border-box;
padding-top: clamp(0.5rem, 1vh, 1.5rem);
padding-bottom: clamp(1.5rem, 3vh, 3rem);
}
/* Pas de sticky/transform — juste un bloc flex normal */
.bisou-s1-sticky {
position: static;
transform: none;
}
}
@media (max-width: 899px) {
.bisou-s1-wrapper {
display: flex;
flex-direction: column;
width: 100%;
}
}
@media screen and (max-width: 749px) {
/* Full-bleed 100vw par MARGES (sans transform — un transform inline
résiduel le casserait). !important car la règle de base
.rv5-associated { width:100% } arrive PLUS BAS dans le fichier. */
.rv5-associated {
width: 100vw !important;
max-width: 100vw !important;
position: relative;
left: auto !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
transform: none !important;
}
.rv5-associated-header,
.rv5-associated-line {
padding-left: calc(1.5rem + 20px);
padding-right: calc(1.5rem + 20px);
}
}
/* S2 — apparaît au scroll, monte plus vite (piloté par JS) */
.rv5-associated {
width: 100%;
padding-top: 2rem;
padding-bottom: 3rem;
will-change: transform;
}
/* ── « ASSOCIEZ LE » : UNE BOITE DE LA TAILLE DE SON CONTENU (Max, 28/08) ──
Ce bloc a longtemps porte `min-height: 100vh`, du temps ou il etait une
diapo plein ecran comme les deux precedentes : la boite faisait un ecran, le
calage posait la boite sur l'ecran, tout tombait juste.
Ce n'est plus ainsi qu'on cale. Le scroll aimante mesure les vignettes et
les pose sur la ligne de centre du tirage — la hauteur de la boite n'entre
plus dans le calcul. Le `100vh` ne faisait donc plus qu'une chose : trainer
sous le dernier bouton un demi-ecran de vide, avec son contenu range en
haut. Le tirage collant le recouvrait, on ne le voyait pas. Depuis que la
colonne remonte avec la page, il se voit — et la reserve ne pouvait rien
contre lui, elle ne sait qu'ajouter de la place, jamais en retirer.
La boite fait maintenant la taille de son contenu, et c'est
assets/bisou-mockup.js qui pose sur ce bloc un `padding-bottom` en ligne :
le peu d'air necessaire pour que le bas de la grille produit tombe pile ou
le tirage finit de remonter. Une hauteur decidee au pixel plutot qu'un ecran
entier pose a l'aveugle. Le `padding-bottom: 0` ci-dessous n'est pas en
`!important` : le style en ligne l'emporte, comme prevu. ── */
@media screen and (min-width: 900px) {
.rv5-associated {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: 0;
padding-bottom: 0;
}
}
/* ── PLUS GRAND QUAND L'ECRAN EST GRAND (Max, 28/08) ──
La colonne de droite est plafonnee a 600 px (.product__info-container, plus
haut dans ce fichier). Au-dela de 1600 px de large, la moitie d'ecran fait
800 px et plus, et « Associez le » n'en occupait pas la moitie. Max le veut
« legerement » plus grand sur grand ecran, sans changer ses regles — deux
cartes, meme ratio, meme grille.
Le bloc deborde donc du conteneur par des marges negatives, symetriques, et
ne touche a rien d'autre : le titre, la ligne, la grille et le bouton
suivent parce qu'ils sont dedans. La marge est prise sur le jeu qui existe
VRAIMENT a ces largeurs — a 1700 px la colonne garde 57 px de chaque cote
du conteneur, a 1920 pres de 100, a 2300 pres de 200. On n'en prend jamais
plus qu'il n'y en a, donc rien ne sort de la colonne. Sous 1700 px rien ne
change : « sur petit ecran laisser comme ca ». */
@media screen and (min-width: 1700px) {
.rv5-associated {
width: calc(100% + 100px);
margin-left: -50px;
margin-right: -50px;
}
}
@media screen and (min-width: 1920px) {
.rv5-associated {
width: calc(100% + 160px);
margin-left: -80px;
margin-right: -80px;
}
}
@media screen and (min-width: 2300px) {
.rv5-associated {
width: calc(100% + 200px);
margin-left: -100px;
margin-right: -100px;
}
}
/* Nettoyage anciens spacers */
.rv5-fold-spacer { display: none !important; }
/* ══════════════════════════════════════════════════════
DESIGN DE LA GRILLE "ASSOCIEZ LE"
══════════════════════════════════════════════════════ */
.rv5-associated-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 1rem;
}
.rv5-associated-title {
font-family: var(--rv5-mono);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--rv5-black);
}
.rv5-associated-link {
font-family: var(--rv5-mono);
font-size: 10px;
color: var(--rv5-gray);
text-decoration: underline;
text-transform: uppercase;
}
.rv5-associated-line {
height: 1px;
background: var(--rv5-border);
margin-bottom: 1.5rem;
}
/* ── Grille 2 colonnes ── */
/* Carrousel : 2 cartes visibles, défilement horizontal (flèches desktop / swipe mobile) */
.rv5-assoc-wrap { position: relative; }
.rv5-associated-grid {
display: flex;
gap: 2px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.rv5-associated-grid::-webkit-scrollbar { display: none; }
.rv5-associated-grid .rv5-assoc-card {
flex: 0 0 calc(50% - 1px);
scroll-snap-align: start;
}
.rv5-assoc-arrow {
display: none;
position: absolute;
/* aligné sur le centre des IMAGES (l'info titre/prix sous la carte fait ~64px) */
top: calc(50% - 32px);
transform: translateY(-50%);
z-index: 2;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
border: 1px solid #e2e2e2;
cursor: pointer;
color: #111;
transition: border-color 0.15s ease, opacity 0.15s ease;
padding: 0;
}
.rv5-assoc-arrow:hover { border-color: #111; }
.rv5-assoc-arrow svg { width: 16px; height: 16px; display: block; }
.rv5-assoc-arrow--prev { left: -20px; }
.rv5-assoc-arrow--next { right: -20px; }
.rv5-assoc-arrow[hidden] { display: none !important; }
@media screen and (min-width: 900px) {
.rv5-assoc-arrow { display: inline-flex; }
}
/* ── Carrousel mobile : UNE carte, agrandie, CENTRÉE (25/08) ──
Avant : deux vignettes de front calées au bord gauche. Max en veut une seule,
en pleine lecture, centrée quel que soit le rang — y compris sur la dernière,
« c'est là que ce genre de carrousel décroche ».
Le mécanisme tient en trois pièces qui vont ensemble :
- la carte fait 76 % de la largeur, il reste donc 24 % à partager ;
- la PREMIÈRE porte 12 % de marge à gauche, la DERNIÈRE 12 % à droite —
des marges, pas un padding de conteneur : un padding-inline de fin est
ignoré par plusieurs moteurs sur un conteneur flex qui défile, la marge
du dernier enfant, elle, compte partout dans l'étendue de défilement ;
- scroll-snap-align: center sur chaque carte.
Résultat : à scrollLeft = 0 la première est centrée, à scrollLeft = max la
dernière l'est aussi, et les 12 % de chaque bord laissent dépasser un morceau
des voisines — on voit qu'il y en a d'autres. ── */
@media screen and (max-width: 749px) {
.rv5-assoc-wrap {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
.rv5-associated-grid {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
gap: 2px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory;
scroll-padding: 0 !important;
scroll-behavior: auto;
transform: none !important;
}
.rv5-associated-grid .rv5-assoc-card {
flex: 0 0 76% !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
transform: none !important;
scroll-snap-align: center !important;
scroll-snap-stop: always;
}
/* Les deux demi-marges qui rendent le centrage possible aux deux bouts. */
.rv5-associated-grid .rv5-assoc-card:first-child {
margin-left: 12% !important;
}
.rv5-associated-grid .rv5-assoc-card:last-child {
margin-right: 12% !important;
}
.rv5-associated-grid .rv5-assoc-card-img img {
max-width: 90%;
max-height: 92%;
}
}
/* ── Product card ── */
.rv5-assoc-card {
text-decoration: none;
display: flex;
flex-direction: column;
background: #F7F7F7;
}
/* ── Image container ── */
.rv5-assoc-card-img {
width: 100%;
aspect-ratio: 5 / 6.5;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #F7F7F7;
}
.rv5-assoc-card-img img {
/* max-width + max-height : les HORIZONTALES gardent leur rendu (largeur 88%)
et les VERTICALES tiennent dans le conteneur au lieu d'être cropées. */
max-width: 88%;
max-height: 88%;
width: auto;
height: auto;
display: block;
object-fit: contain;
}
/* ── Infos sous l'image — LA COMPOSITION DU TRIO ──
C'est d'ici que part la composition des trois vues : Max a designe cette
typo comme reference le 24/08. Le pendant pour la grille de collection et
« Bisou Featured Collection » est dans assets/bisou-product-card.css — memes
proportions, corps ajustes a une vignette plus large. Toute retouche ici doit
se rejouer la-bas, et l'inverse. */
.rv5-assoc-card-info {
padding: 12px 8px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
/* L'air entre les trois lignes : une seule gouttiere, pas trois marges qui
se cherchent. */
row-gap: 8px;
}
/* 1. Le titre de l'oeuvre — ET PLUS RIEN D'AUTRE (Max, 26/08)
Le nom de l'artiste et le prix ne sont plus ecrits dans la carte : voir
assets/bisou-variant-ui.js, fonction qui monte `.rv5-assoc-card`.
La composition suit la nouvelle reference, « TIRAGES DU MEME ARTISTE »
(.baa-card-title de sections/bisou-about-artist.liquid), mesuree au
navigateur le 26/08 : Archivo 11 px, graisse 400, chasse 0,055 em,
capitales, #111, interligne 1,2. Le pendant pour les grilles est dans
assets/bisou-product-card.css — memes valeurs. Toute retouche ici se rejoue
la-bas, et l'inverse.
L'ALIGNEMENT — un titre sur deux lignes decalait la carte voisine d'une
ligne entiere. Le titre occupe desormais TOUJOURS deux lignes de boite :
les images tiennent deja leur rang par `aspect-ratio`, les titres tiennent
le leur par cette hauteur. Au-dela de deux lignes, l'ellipse. */
.rv5-assoc-card-title {
font-family: var(--font-body-family);
font-size: 11px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.055em;
line-height: 1.2;
color: #111;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
min-height: 2.4em; /* 2 lignes × 1,2 : toutes les cartes finissent au meme fer */
width: 100%;
}
/* 2. Le nom de l'artiste, et 3. sa pastille ronde A DROITE.
Meme geste que .rv5-artist-line sur la fiche et .bisou-card-artist sur les
vignettes : le nom, six pixels, le rond. */
.rv5-assoc-card-vendor {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
max-width: 100%;
min-width: 0;
font-family: 'Space Mono', 'Roboto Mono', monospace;
font-size: 9px;
font-weight: 400;
color: var(--rv5-gray);
letter-spacing: 0.06em;
line-height: 1.2;
}
.rv5-assoc-card-vendor-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rv5-assoc-card-pastille {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex: 0 0 18px;
border-radius: 50%;
overflow: hidden;
background: #e3e3e3;
}
.rv5-assoc-card-pastille img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Metaobjet sans photo : l'initiale sur fond gris, jamais un trou. */
.rv5-assoc-card-initial {
font-size: 9px;
line-height: 1;
color: #6d6d6d;
}
/* 4. Le prix — EN NOIR. Il etait gris, et depuis des semaines il ne
s'affichait meme pas : voir le cartouche « ASSOCIEZ LE » plus bas. */
.rv5-assoc-card-price {
font-family: 'Space Mono', 'Roboto Mono', monospace;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--rv5-black);
}
/* ── Bloc 1 allégé (petits écrans) : liste 3 points remplacée par « • + d'infos » ── */
.rv5-more-link {
display: none;
font-family: var(--rv5-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: #555;
text-decoration: none;
margin: 2px 0 12px;
}
.rv5-more-link:hover,
.rv5-more-link:active {
color: #111;
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 899px) {
.rv5-reassurance--mobile { display: none !important; }
}
/* « + d'infos » → repère « descendre », centré sur le BLOC DE DROITE (≈75 % de largeur),
collé en bas. Un peu plus grand + clignotement doux. UNIQUEMENT >749px (sinon pas la place). */
@keyframes rv5-scrolldown-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes rv5-scrolldown-blink { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (min-width: 750px) {
.rv5-more-link.rv5-scrolldown {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
position: fixed;
left: 75%;
bottom: 16px;
transform: translateX(-50%);
z-index: 60;
margin: 0;
padding: 5px 12px;
color: #6f6f6f;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
background: none;
animation: rv5-scrolldown-blink 2.6s ease-in-out infinite;
transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s ease;
}
.rv5-more-link.rv5-scrolldown:hover { color: #222; }
.rv5-more-link.rv5-scrolldown.is-hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(6px); animation: none; }
.rv5-more-link.rv5-scrolldown .rv5-scrolldown-label { line-height: 1; }
.rv5-more-link.rv5-scrolldown .rv5-scrolldown-chev { line-height: 0; }
.rv5-more-link.rv5-scrolldown .rv5-scrolldown-chev svg { width: 17px; height: 18px; animation: rv5-scrolldown-bob 1.8s ease-in-out infinite; }
}
/* ══════════════════════════════════════════════════════════════════
« ASSOCIEZ LE » — LE RENDU DES CARTES
⚠ CE BLOC ETAIT CASSE, et depuis longtemps.
Son cartouche s'ouvrait sur « CORRECTIONS "ASSOCIEZ LE" MOBILE (FULL W » et
ne se refermait jamais. Le commentaire avalait donc tout jusqu'au `*/`
suivant — y compris l'ouverture `@media (max-width: 749px) { .rv5-associated {`
qui devait cantonner ces regles au mobile. Ce qui restait tombait au premier
niveau : des declarations orphelines, ignorees, puis CINQ regles appliquees
a TOUTES les largeurs au lieu du seul mobile.
L'une des cinq masquait le prix : `.rv5-assoc-card-vendor,
.rv5-assoc-card-price { display: none !important }`. Mesure au navigateur le
25/08 sur /products/abricot-michel-martin a 1440 px : le prix calculait bien
`display: none`. « Associez-le » n'a donc jamais montre de prix, nulle part,
et c'est ce qui lui donnait cet air si different des grilles.
CE QU'ON EN FAIT
On referme le commentaire et on reecrit les regles telles qu'elles
S'APPLIQUENT AUJOURD'HUI — a toutes les largeurs. Les rendre au mobile
changerait le desktop (fond gris de la carte, cadrage 5/6.5 au lieu de 4/5),
et ce n'est pas ce que Max a demande. Une seule regle disparait : celle qui
masquait l'artiste et le prix.
Le plein cadre mobile de .rv5-associated n'est pas ici : il vit dans le
{% style %} de sections/main-product.liquid, en marges plutot qu'en
translate, et il marche. Les declarations orphelines qui trainaient ici pour
le refaire sont parties.
══════════════════════════════════════════════════════════════════ */
/* ── Le carrousel reste dans le viewport, jamais de debordement ── */
@media (max-width: 899px) {
.rv5-assoc-wrap {
width: 100%;
max-width: 100%;
overflow: hidden;
}
.rv5-associated-grid {
width: 100%;
max-width: 100%;
}
.rv5-associated-grid .rv5-assoc-card {
flex: 0 0 calc(50% - 1px);
min-width: 0;
}
}
/* Une SIXIEME regle vivait ici, une gouttiere de 1,5 rem sur
.rv5-associated-header et .rv5-associated-line. Elle n'a JAMAIS rien fait :
les declarations orphelines qui la precedaient n'etaient pas refermees, et
l'analyseur CSS les avalait dans son selecteur — un selecteur invalide, donc
une regle jetee. Mesure au navigateur le 25/08 : padding calcule 0 en desktop
et 35 px en mobile, valeurs qui viennent d'ailleurs.
On ne la ressuscite pas. La retablir deplacerait le titre « ASSOCIEZ LE » sur
les trois largeurs, et ce n'est pas ce que Max a demande. Ce lot ne change
que le trio.
1. La carte n'a pas de fond : c'est l'image qui porte le gris. */
.rv5-assoc-card {
background: transparent !important;
}
.rv5-assoc-card-img {
background-color: #F7F7F7 !important;
aspect-ratio: 4 / 5 !important;
width: 100% !important;
border-radius: 0 !important;
}
.rv5-assoc-card-img img {
width: 82% !important;
height: auto !important;
}
.rv5-assoc-card-info {
background: transparent !important;
}
/* ═══════════════════════════════════════════════════════════════════════
22. FICHE CIBLE — 19/08/2026
Cible : _maquettes/fiche-cible.png (fiche « Gobi », H-020).
Deux lignes en haut, un badge dore qui brille, une pastille d'artiste,
la loupe hors de l'image, une seule ligne legale sous le panier.
Tout est bati sur les jetons deja declares plus haut (--rv5-*) : aucune
variable neuve, aucun schema de couleur touche.
═══════════════════════════════════════════════════════════════════════ */
/* ── LIGNE 1 — « Gobi » 2025 Egypte ────────────────────────────────────
Le nom et la date tiennent sur UNE ligne. Le groupe heritait de
flex-wrap:wrap et le titre de flex:1 1 12ch : le titre prenait toute la
largeur et poussait la date au retour a la ligne — trois lignes d'en-tete
au lieu de deux. Ici : pas de retour a la ligne, et c'est le TITRE qui
retrecit (flex-shrink) pendant que la date garde sa taille. */
.rv5-ref-group {
align-items: baseline;
gap: 10px;
flex-wrap: nowrap;
}
.rv5-ref-group .rv5-name {
flex: 0 1 auto;
min-width: 0;
}
/* La date suit le nom SUR LA MEME LIGNE, italique serif, plus petite.
Elle ne se coupe jamais : c'est le nom qui cede la place. */
.rv5-date--title {
flex: 0 1 auto;
font-size: clamp(13px, 0.95vw, 16px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── LIGNE 1 (droite) — reference, partage, coeur ────────────────────── */
.rv5-top-bar__aside {
gap: 10px;
}
/* H-020 : petit, mono, gris. Porte l'infobulle « Reference ». */
.rv5-ref-chip {
position: relative;
font-family: var(--rv5-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--rv5-gray);
white-space: nowrap;
cursor: default;
}
/* Infobulle : elle attend ~300 ms avant de paraitre, pour ne pas sauter
au visage de quelqu'un qui ne fait que traverser la ligne. */
.rv5-ref-chip::after {
content: attr(data-rv5-tip);
position: absolute;
top: calc(100% + 7px);
right: 0;
z-index: 30;
padding: 4px 8px;
border-radius: 3px;
background: var(--rv5-black);
color: var(--rv5-white);
font-family: var(--rv5-mono);
font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transform: translateY(-3px);
transition: opacity 0.18s ease 0.3s, transform 0.18s ease 0.3s;
}
.rv5-ref-chip:hover::after,
.rv5-ref-chip:focus-visible::after,
.rv5-ref-chip.is-tapped::after {
opacity: 1;
transform: translateY(0);
}
/* Au tap mobile, l'infobulle parait tout de suite (pas de survol a attendre). */
.rv5-ref-chip.is-tapped::after {
transition-delay: 0s;
}
/* ── LIGNE 2 (gauche) — @artiste + pastille ────────────────────────────
LE SOULIGNEMENT. Max l'a signale deux fois, et les deux traits n'ont rien a
voir. Ce qui etait pose : un POINTILLE d'un pixel, sous le TEXTE SEUL,
`border-bottom: 1px dotted` sur .rv5-artist-name — il s'arretait donc avant
la pastille. Ce que demande la maquette (_maquettes/fiche-cible.png.jpg,
« @Elise Brillac ») : une bande PLEINE, EPAISSE et GRIS CLAIR qui court sur
TOUTE la ligne et va se glisser SOUS LE CERCLE de la photo de profil.
26/08 — CORRECTION. Le lot M2 avait lu la maquette comme une bande de
13 px calee en bas de ligne. A 13 px, elle remonte jusqu'au milieu des
lettres : ce n'est plus un soulignement, c'est un surlignage, et le nom
passe dessous. Max : « c'est un SOUS-lignage, pas un SUR-lignage ».
Ce qui est garde : la couleur #ededed, le fond plutot que la bordure, et
la course sur TOUTE la ligne, qui passe sous le cercle de la photo de
profil.
Ce qui change : la hauteur, 13 px → 2 px, et trois pixels de garde sous le
texte pour que le trait ne touche pas les jambages.
C'est un fond, pas une bordure : un `background-image` se peint SOUS le
texte et SOUS la pastille sans rien empiler. Une bordure, elle, aurait
demande de rogner la hauteur de ligne, et un ::after positionne serait passe
PAR-DESSUS le texte. La pastille garde son fond opaque : le trait passe
derriere elle et reapparait dans les coins de sa boite — « jusque sous le
cercle », exactement.
La bande suit le `scale(1.06)` du survol, comme le reste de la ligne. */
.rv5-artist-line {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
transform-origin: left center;
transition: transform 0.15s var(--rv5-ease);
/* La ligne doit epouser son contenu, sinon la bande depasse largement le
cercle. `inline-flex` ne suffit pas : .rv5-cartel-left est un conteneur
flex en COLONNE, ses enfants sont blockifies et etires sur toute la
largeur — mesure au navigateur, 463 px pour 99 px de contenu. Tant que la
bande etait un pointille sur le NOM seul, personne ne le voyait. */
align-self: flex-start;
/* 27/08 — LA BANDE EST CALEE SUR LA PASTILLE, PLUS SUR LE BAS DE BOITE.
Max redessine : elle part de la MOITIE du texte, descend un peu en
dessous, s'arrete au MILIEU du cercle en longueur et au BAS du cercle en
hauteur. Trois reperes, tous pris sur la pastille — 20 px de cote, dernier
element de la rangee, donc collee au bord droit.
La rangee est en `align-items: center` sur une ligne de 20 px, celle de la
pastille : le milieu du texte est donc a 10 px du haut, et le bas du cercle
a 20. La bande fait ces 10 px-la.
LARGEUR — `calc(100% - 10px)`. La boite s'arrete au bord droit du cercle ;
retirer la moitie de son diametre l'arrete en son milieu.
HAUTEUR ET POSITION — 10 px de haut, poses a `calc(100% - 5px)`. La zone
de fond est la boite de REMBOURRAGE, 25 px avec la garde du bas : un
`background-position-y` en calc place le HAUT de l'image a
(25 - 10) - 5 = 10 px, donc son bas a 20. Le compte tombe juste des deux
cotes — milieu du texte en haut, bas du cercle en bas.
C'est toujours un fond, pas une bordure : il se peint SOUS le texte et SOUS
la pastille sans rien empiler. La pastille garde son fond opaque, la bande
passe derriere elle et reapparait dans les coins de sa boite. */
padding-bottom: 5px;
background-image: linear-gradient(#ededed, #ededed);
background-repeat: no-repeat;
background-size: calc(100% - 10px) 10px;
background-position: left calc(100% - 5px);
}
.rv5-artist-name {
font-family: var(--rv5-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--rv5-gray);
transition: color 0.15s var(--rv5-ease);
}
.rv5-artist-pastille {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex: 0 0 20px;
border-radius: 50%;
overflow: hidden;
background: #e3e3e3;
}
.rv5-artist-pastille img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Metaobjet sans photo : l'initiale sur fond gris, jamais un trou. */
.rv5-artist-pastille__initial {
font-family: var(--rv5-mono);
font-size: 10px;
line-height: 1;
color: #6d6d6d;
}
/* Le nom ET la pastille grossissent ensemble : un seul geste, pas deux. */
.rv5-artist-line:hover,
.rv5-artist-line:focus-visible {
transform: scale(1.06);
}
.rv5-artist-line:hover .rv5-artist-name,
.rv5-artist-line:focus-visible .rv5-artist-name {
color: var(--rv5-black);
}
@media (prefers-reduced-motion: reduce) {
.rv5-artist-line { transition: none; }
.rv5-artist-line:hover,
.rv5-artist-line:focus-visible { transform: none; }
}
/* ── LIGNE 2 (droite) — badge dore + prix masque ─────────────────────── */
.rv5-cartel-row {
align-items: center;
}
.rv5-cartel-right {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
/* Le prix serveur RESTE dans le DOM — product-info.js y reinjecte le montant a
chaque changement de variante et bisou-variant-ui.js l'observe pour recopier
le prix dans le bouton. On le masque, on ne le supprime pas. */
.rv5-price-wrap--hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
/* ── LE BADGE ÉDITION LIMITÉE ────────────────────────────────────────
Or du theme (#c9a96e, deja le jeton du bouton ATC), contour fin, mono
espace. Le reflet reprend la GEOMETRIE de l'app cockpit — bande de 420 px
FIXES parcourue en 1,1 s lineaire (« .p-af-sk » dans vote-dashboard/app/
artists/portal.css, recopiee dans « .gal-shiny ») — pour que la boutique et
l'app aient le meme geste. Seule la cadence change : le badge se tait
~2,9 s entre deux passages, la ou un squelette de chargement enchaine.
1,1 s de balayage sur 4 s de cycle = 27,5 %. */
.rv5-edition-tag--gold {
font-family: var(--rv5-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #9a7c42;
border: 1px solid #c9a96e;
border-radius: 4px;
padding: 5px 9px;
line-height: 1;
white-space: nowrap;
cursor: pointer;
position: relative;
overflow: hidden;
background-color: rgba(201, 169, 110, 0.08);
background-image: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.9) 50%, transparent 100%);
background-size: 420px 100%;
background-repeat: no-repeat;
background-position: -420px 0;
/* deux éclats à l'arrivée, puis le badge se tait pour de bon : rien ne bouge en boucle pendant qu'on lit
(chaîne site-animations, 25/10) */
animation: rv5-badge-briller 4s linear 2;
transition: color 0.2s var(--rv5-ease), border-color 0.2s var(--rv5-ease);
}
@keyframes rv5-badge-briller {
0% { background-position: -420px 0; }
27.5% { background-position: 420px 0; } /* 1,1 s : la vitesse de l'app */
100% { background-position: 420px 0; } /* puis le badge se tait */
}
.rv5-edition-tag--gold:hover,
.rv5-edition-tag--gold.is-on {
color: #7d6231;
border-color: #b1893f;
}
@media (prefers-reduced-motion: reduce) {
.rv5-edition-tag--gold {
animation: none;
background-image: none;
}
}
/* ── COLONNE IMAGE : outils hors image + scene ───────────────────────── */
/* La loupe posee DANS le coin du mockup s'en va : rien ne se superpose plus
au tirage. Le zoom reste joignable par le bouton « agrandir » ci-dessous
et par le clic sur l'image (.product__media-toggle, intact). */
.page-width .product.bisou-rv5-fiche .product__media-icon {
display: none !important;
}
.rv5-media-tools {
display: flex;
justify-content: flex-end;
width: clamp(80%, 70vw, 85%);
max-width: 600px;
margin: 0 auto;
padding-bottom: 6px;
flex: 0 0 auto;
}
/* Plus de rond blanc ni de bordure, partout (Max, 26/10 : « le expand du haut est pas assez grand et pas de rond blanc
derrière » ; fiche a26-fiche-commandes-image) : l'icône seule, plus grande et plus grasse, dans l'encre du fond ; sur
une image, le ton mesuré sous elle (blanc ou encre, bisou-product-gallery.css). */
.rv5-expand-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: rgb(var(--color-foreground));
cursor: pointer;
transition: color 0.2s ease, opacity 0.2s ease;
}
.rv5-expand-btn svg {
width: 22px;
height: 22px;
stroke-width: 2;
}
.rv5-expand-btn:hover {
opacity: 0.7;
}
/* ═══════════════════════════════════════════════════════════════════
LE BLOC GRIS DEVIENT NOIR — panneau « edition limitee » (Max, 27/08)
═══════════════════════════════════════════════════════════════════
Trois etats du meme bloc, jamais une page ni un calque qui recouvre :
1. le fond passe de #F7F7F7 au noir, lentement ;
2. l'oeuvre retrecit et glisse vers la DROITE — elle reste visible,
c'est elle qu'on met en valeur ;
3. le texte prend la place liberee a GAUCHE, en glissant de la gauche
vers la droite, lettre apres lettre.
Historique : le panneau a recouvert la scene image en transparent (25/08),
puis pris la moitie droite de la fenetre en `position: fixed` sous
(26/08). Les deux cachaient quelque chose — le tirage dans un cas, le
selecteur dans l'autre. Ici il ne cache rien : il occupe le vide que
l'oeuvre libere en reculant.
Plus aucun `position: fixed` : le bloc englobant est .product__media-wrapper,
c'est-a-dire la zone grise elle-meme. Le panneau ne peut plus en sortir, et
la question du bloc englobant — un `transform` sur un ancetre suffit a
deplacer un `fixed` — ne se pose plus du tout. */
.rv5-media-stage {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 0;
transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.rv5-media-frame {
width: 100%;
}
/* ═══ L'AGRANDISSEMENT DE L'ARRIVEE (Max, 27/08) ═══
La fiche s'ouvre sur « A4 sans cadre » pour afficher 35 € plutot que 175.
Reste que le A4 est petit : a taille reelle il aurait l'air de ce qu'il
coute. Il arrive donc agrandi de moitie.
150 %, et le chiffre est mesure, pas choisi : sur les rendus 2000x2500, le
tirage occupe 52 x 59 % du canevas en A4 sans cadre contre 85 x 96 % en A2.
Il faudrait 163 % pour egaler exactement le A2 ; a 150 % le A4 reste juste
en dessous, ce que Max demande. Verifie a 390, 1000 et 1745 px de large : le
tirage agrandi tient dans la zone visible, seul le canevas transparent
deborde — et les rendus sont centres a 0,6 % pres, donc rien ne se coupe
d'un cote plutot que de l'autre.
L'echelle vit sur .rv5-media-frame et NON sur .rv5-media-stage, qui porte
deja celle du panneau « edition limitee ». Deux calques, deux transformees :
elles se composent au lieu de s'ecraser.
La transition n'arrive qu'avec .rv5-boot-zoom--anim, posee deux trames plus
tard par le script. Sans ce decalage la page s'ouvrirait sur un travelling
avant, alors qu'on veut arriver DEJA agrandi : la transition ne sert qu'a la
sortie, quand le visiteur choisit un format et que le tirage reprend sa
taille de catalogue. */
.product__media-wrapper.rv5-boot-zoom .rv5-media-frame {
transform: scale(1.5);
}
.product__media-wrapper.rv5-boot-zoom--anim .rv5-media-frame {
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.product__media-wrapper.rv5-boot-zoom--anim .rv5-media-frame {
transition: none;
}
}
/* Sous 900 px la zone grise n'est pas positionnee : elle doit l'etre pour
servir de bloc englobant au panneau. */
.product__media-wrapper { position: relative; }
/* ── 1. LE FOND ──
La transition est LONGUE et la courbe traine en fin de course : c'est le
geste qu'on remarque, il ne doit pas claquer. Le selecteur double la
specificite de la regle « BLOC GAUCHE » plus haut, qui pose #F7F7F7 en
`!important` — a specificite egale on ne gagne pas. */
.page-width .product.bisou-rv5-fiche .product__media-wrapper {
transition:
background-color 0.85s cubic-bezier(0.22, 1, 0.36, 1),
min-height 0.6s ease !important;
}
.page-width .product.bisou-rv5-fiche .product__media-wrapper.rv5-edition-on {
background-color: #0B0B0C !important;
}
/* ── 2. L'OEUVRE ──
Elle recule, elle ne disparait pas.
28/08 — LE TIRAGE SORTAIT DU BLOC. Le calibrage precedent posait une
ECHELLE en dur sur la scene (0,88, ou 0,62 sous 1200 px) et la poussait de
24 %. Une echelle ne connait pas la largeur du papier : elle a ete mesuree
sur un tirage VERTICAL, ou le tirage occupe 52 % du canevas en A4. Sur un
tirage HORIZONTAL il en occupe 65 %, et 96 % en A2 — le meme 0,88 y donnait
un papier de 0,54 de bloc centre a 0,74 : bord droit a 1,01, coupe net par
le `overflow: hidden` du bloc gris, bord gauche colle au texte. Ajoutez
l'agrandissement d'arrivee (1,5 sur .rv5-media-frame, qui multiplie AUSSI
le decalage quand il vit sous lui) et le debord passait a 8 % du bloc.
Ce qui suit ne mesure plus rien. Deux gestes, chacun en POURCENTAGE de la
largeur du bloc — donc vrais a toutes les largeurs, sur les deux
orientations, avec ou sans agrandissement d'arrivee :
1. la GALERIE cede de la largeur : 47 % du bloc au lieu de ses 85 %
(600 px) plafonnes. Le papier vit DANS ce canevas, il ne peut donc
jamais depasser 47 % ;
2. la SCENE glisse de 23,5 %, ce qui porte le centre de l'oeuvre de 0,50
a 0,735. Le canevas occupe alors 0,50 → 0,97, et le papier, centre
dedans, au pire 0,509 → 0,961.
Le texte part a 0,07 et fait au plus 0,40 : il s'arrete a 0,47. Il reste au
minimum 0,039 de bloc entre le mot et le papier, et 0,039 entre le papier et
le bord — 39 px a 1000 px de bloc, 22 px a 560 px. Sous 1200 px le panneau
se resserre deja tout seul (38 % + 6 %, plus bas) : plus besoin du palier
0,62 qui vivait ici.
Le glissement va sur la SCENE et non sur la galerie : l'agrandissement
d'arrivee vit entre les deux, sur .rv5-media-frame, et un decalage pose sous
lui serait multiplie par 1,5. Au-dessus, il ne l'est pas. */
@media screen and (min-width: 900px) {
.page-width .product.bisou-rv5-fiche .product__media-wrapper.rv5-edition-on .rv5-media-stage {
transform: translateX(23.5%);
}
.page-width .product.bisou-rv5-fiche .product__media-wrapper.rv5-edition-on media-gallery {
width: 47% !important;
}
/* La transition vit hors de l'etat ouvert : elle sert a l'aller ET au
retour. Redimensionner la galerie est sans danger ici — sur ordinateur la
galerie n'est pas un carrousel qui defile (`slider--mobile`), la diapo
active est la seule affichee. */
.page-width .product.bisou-rv5-fiche media-gallery {
transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
}
/* La barre d'outils de l'image s'efface : le bouton « agrandir » n'a rien a
dire pendant qu'on lit, et il flottait par-dessus le texte. */
.rv5-media-tools {
transition: opacity 0.35s ease;
}
.product__media-wrapper.rv5-edition-on .rv5-media-tools {
opacity: 0;
pointer-events: none;
}
/* ── 3. LE PANNEAU ──
Cale sur toute la zone grise, mais TRANSPARENT : le noir vient du bloc, pas
de lui. Il ne fait que tenir le texte a gauche. Il ne prend le clic que la
ou il y a quelque chose a cliquer — sinon il volerait le curseur a l'oeuvre
pour ne rien en faire. */
.rv5-edition-panel {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: flex-start;
padding: clamp(1.5rem, 3vw, 4rem);
padding-left: clamp(2rem, 7%, 6rem);
background: none;
color: #F4F1EA;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.rv5-edition-panel.is-open {
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease 0.15s, visibility 0s;
}
/* Le glissement de la GAUCHE vers la droite. Il porte sur le bloc de texte,
pas sur le panneau : le panneau ne bouge pas, il n'a pas de bord visible. */
.rv5-edition-panel__inner {
width: min(40%, 26rem);
max-width: none;
pointer-events: auto;
transform: translateX(-2.5rem);
transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.rv5-edition-panel.is-open .rv5-edition-panel__inner {
transform: translateX(0);
}
@media screen and (min-width: 900px) and (max-width: 1199px) {
.rv5-edition-panel { padding-left: clamp(1.5rem, 6%, 3rem); }
.rv5-edition-panel__inner { width: 38%; }
}
/* ── LE PANNEAU COMMENCE SOUS L'EN-TETE ──
Le bloc gris monte jusqu'en haut de page : il porte
`margin-top: -header-height` et rattrape par un `padding-top` de la meme
valeur, pour que l'oeuvre se centre a l'oeil SOUS l'en-tete. Un panneau
cale a `inset: 0` se centre, lui, sur la boite de rembourrage — donc plus
haut que l'oeuvre, et sa croix passe derriere l'en-tete colle.
Il reprend donc le meme retrait. Texte et oeuvre partagent alors la meme
boite de centrage, et la croix reste joignable. */
@media screen and (min-width: 900px) {
.rv5-edition-panel {
top: var(--header-height, 85px);
}
}
/* ── L'EXERGUE — d'ou l'on vient ──
Le meme mot que le badge dore sur lequel on vient d'appuyer, dans le meme
or. Le filet dessous tient lieu de titre de section. */
.rv5-edition-panel__kicker {
font-family: var(--rv5-mono, monospace);
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #C9A96E;
margin: 0 0 clamp(0.9rem, 1.6vw, 1.4rem);
padding-bottom: clamp(0.7rem, 1.2vw, 1rem);
border-bottom: 1px solid rgba(201, 169, 110, 0.32);
}
.rv5-edition-panel__title {
font-family: var(--rv5-serif, Georgia, serif);
font-size: clamp(21px, 2.1vw, 32px);
font-weight: 400;
font-style: italic;
color: #FFFFFF;
margin: 0 0 clamp(0.8rem, 1.4vw, 1.2rem);
line-height: 1.18;
}
.rv5-edition-panel__text {
font-family: var(--rv5-serif, Georgia, serif);
font-size: clamp(13px, 0.92vw, 15px);
line-height: 1.75;
color: rgba(255, 255, 255, 0.86);
margin: 0;
}
/* ── LE COMPTEUR ──
Le mot AU-DESSUS du chiffre (Max, 27/08). La colonne avait ete inversee
pour mettre le chiffre en premier ; a l'oeil c'est l'inverse qui tient, le
petit mono gris annonce et le chiffre repond. C'est aussi l'ordre du
balisage — puis , le seul valide dans un —, donc plus rien a
inverser : la colonne se lit dans l'ordre du DOM. */
.rv5-edition-panel__facts {
display: flex;
gap: clamp(1.6rem, 3vw, 2.6rem);
margin: clamp(1.4rem, 2.6vw, 2.2rem) 0 0;
padding-top: clamp(1rem, 1.8vw, 1.4rem);
border-top: 1px solid rgba(201, 169, 110, 0.32);
}
.rv5-edition-panel__fact {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.rv5-edition-panel__facts dt {
font-family: var(--rv5-mono, monospace);
font-size: 8.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin: 0;
}
/* La capitale se prend ICI, pas dans le script. bisou-variant-ui.js ecrit
« n°1 » en bas de casse, et cette chaine est aussi celle de la ligne
« Vous obtiendrez le tirage n°1 » de la colonne de droite, ou la bas de
casse est juste. Une capitale en dur la-bas les changerait toutes les deux ;
`text-transform` ne change que ce qui est peint ici. */
.rv5-edition-panel__facts dd {
font-family: var(--rv5-mono, monospace);
text-transform: uppercase;
font-size: clamp(22px, 2vw, 30px);
font-weight: 400;
letter-spacing: 0.01em;
line-height: 1;
color: #FFFFFF;
margin: 0;
font-variant-numeric: tabular-nums;
}
/* ── LA CROIX ──
Deux traits, dans le coin haut droit de la ZONE GRISE — pas du bloc de
texte : c'est le panneau entier qu'elle ferme. Creme sur noir. */
.rv5-edition-panel__close {
position: absolute;
top: clamp(1rem, 2.2vw, 2rem);
right: clamp(1rem, 2.2vw, 2rem);
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: rgba(244, 241, 234, 0.6);
cursor: pointer;
pointer-events: auto;
transition: color 0.2s ease, transform 0.25s ease;
}
.rv5-edition-panel__close svg {
width: 28px;
height: 28px;
}
.rv5-edition-panel__close:hover,
.rv5-edition-panel__close:focus-visible {
color: #FFFFFF;
transform: rotate(90deg);
}
/* ── LE TEXTE QUI ARRIVE LETTRE APRES LETTRE ──
Le decoupage est fait par assets/bisou-fiche.js, au clic. Deux niveaux :
un par MOT, qui garde `nowrap` pour que la ligne se coupe encore
entre les mots et jamais au milieu d'un — c'est ce qu'un `inline-block` sur
chaque lettre casserait sinon ; un par LETTRE a l'interieur, qui
monte, s'eclaircit et se defloute.
Le retard de chaque lettre est pose en ligne par le script : une valeur
calculee ne peut pas vivre dans une feuille. */
.rv5-rv-word {
display: inline-block;
white-space: nowrap;
}
.rv5-rv-char {
display: inline-block;
opacity: 0;
transform: translateY(0.42em);
filter: blur(5px);
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}
[data-rv5-reveal].is-revealed .rv5-rv-char {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* ── TELEPHONE ET TABLETTE ──
Sous 900 px la zone grise n'est ni collante ni haute d'un ecran : elle fait
la hauteur de l'image. Le texte n'y tiendrait pas a cote de l'oeuvre. Le
bloc s'ouvre donc en HAUTEUR — il grandit, l'oeuvre s'efface derriere, le
texte occupe toute la largeur. Pas de defilement dans une boite : c'est ce
qui debordait avant.
28/08 — CE BLOC NE S'APPLIQUAIT PAS. La regle d'ordinateur ne portait aucune
requete de media et pesait six classes (`.page-width .product:has(.bisou-rv5)
.product__media-wrapper.rv5-edition-on .rv5-media-stage`) contre trois ici :
sur telephone aussi, l'oeuvre partait de 24 % vers la droite a l'echelle 0,88,
et seule l'opacite d'ici passait. La regle d'ordinateur est maintenant enfermee
dans `min-width: 900px` — ce palier-ci est enfin le seul a parler sous 900. */
@media screen and (max-width: 899px) {
.rv5-media-stage {
transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.product__media-wrapper.rv5-edition-on {
background-color: #0B0B0C;
min-height: 78vh;
}
.product__media-wrapper.rv5-edition-on .rv5-media-stage {
transform: scale(0.62);
opacity: 0.18;
}
.rv5-edition-panel {
padding: clamp(1.5rem, 7vw, 2.5rem);
align-items: center;
justify-content: center;
}
.rv5-edition-panel__inner {
width: 100%;
max-width: 32rem;
}
.rv5-edition-panel__facts { gap: 1.8rem; }
}
/* Mouvement reduit : le fond change quand meme — c'est une couleur, pas un
mouvement — mais rien ne glisse, et les lettres arrivent d'un bloc. Le
script ne decoupe alors meme pas le texte. */
@media (prefers-reduced-motion: reduce) {
.rv5-media-stage,
.rv5-edition-panel__inner {
transition: opacity 0.2s ease;
transform: none !important;
}
.rv5-edition-panel__close:hover { transform: none; }
.rv5-rv-char {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
}
/* ── LIVRAISON : deux etats, jamais les deux a la fois ───────────────── */
.rv5-shipping-aside {
display: inline-flex;
align-items: center;
gap: 5px;
}
/* La pastille verte n'existe QUE quand la livraison est effectivement offerte. */
.rv5-ship-dot {
display: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: #2e7d32;
}
.rv5-shipping-aside.rv5-ship-free .rv5-ship-dot {
display: inline-block;
}
/* 22/10 (Max, v7-8 : « comme il est sur le site actuellement ») : « Édité en N exemplaires » et « Livraison
offerte dès 150 € » reviennent à droite des libellés Format et Finition, comme sur le site en ligne (masqués du
21/10, v4-1, au 22/10). Au téléphone, ils restent masqués (plus haut), comme en ligne. */
/* ── LIGNE LEGALE + « + D'INFOS » ────────────────────────────────────── */
.rv5-bottom-info__sep {
color: var(--rv5-light-gray);
}
.rv5-bottom-info a,
.rv5-bottom-info .rv5-shipping-link {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
/* « + D'INFOS » descend SOUS la ligne legale et se cale a DROITE de la
colonne (maquette du 19/08). Il ne flotte plus a 75 % du viewport : sur un
ecran large il tombait au milieu de nulle part. */
@media (min-width: 750px) {
.rv5-more-link.rv5-scrolldown {
position: static;
left: auto;
bottom: auto;
transform: none;
align-self: flex-end;
margin-top: clamp(0.75rem, 2vh, 1.75rem);
}
.rv5-more-link.rv5-scrolldown.is-hidden {
opacity: 0;
pointer-events: none;
transform: translateY(6px);
animation: none;
}
}
/* ══════════════════════════════════════════════════════════════════
LOT M2 — 26/08/2026
══════════════════════════════════════════════════════════════════ */
/* ── N3 — « ASSOCIEZ-LE » : LA FIN DE COURSE TOMBE SUR UN CRAN ─────────
La piste est en `scroll-snap-type: x mandatory` : le navigateur a
l'INTERDICTION de s'immobiliser ailleurs que sur un cran. Or les crans sont
poses par `scroll-snap-align: start`, donc a 0, 301, 602… tous les pas d'une
carte — et le bout de la course, lui, vaut `scrollWidth - clientWidth`, qui
ne tombe sur un multiple du pas que par chance. Mesure au navigateur sur la
colonne de 600 px, huit cartes : le cran de la derniere carte est a 2107, le
bout de course a 1806. 301 px d'ecart. Quand les deux ne coincident pas, le
navigateur refuse de rester au bout, revient au cran d'avant, et la derniere
vignette reste coupee.
La derniere carte s'aligne donc par sa FIN : son cran vaut exactement le
bout de la course, quel que soit le nombre de cartes servi par
/recommendations/products.json — cinq, sept ou huit. C'est le pendant, sur
ordinateur, de la marge de 12 % posee sur `:last-child` en mobile le 25/08 :
meme probleme, meme endroit, la solution que le 2-cartes permet.
Le desaxage progressif du carrousel, lui, ne se reglait pas ici : le pas
envoye par les fleches valait 300 px pour un pas reel de 301. C'est corrige
dans assets/bisou-variant-ui.js, fonction setupAssocCarousel. */
@media screen and (min-width: 750px) {
.rv5-associated-grid .rv5-assoc-card:last-child {
scroll-snap-align: end;
}
}
/* ── N2 — « EN SAVOIR PLUS » N'EXISTE PLUS SUR ORDINATEUR ──────────────
Il a ete decide que la PILE prendrait le relais : un clic a droite du
bouton d'achat, des volets plein ecran qui s'empilent. Tant qu'elle
n'existe pas, le lien ne reste pas a l'ecran a faire semblant — il ne fait
que ramener le visiteur plus bas dans la meme page, ce que la molette fait
deja. La capture « APRES » de Max ne le montre pas non plus.
Sur mobile rien ne bouge : ce lien-la n'a JAMAIS ete affiche en petit —
`.rv5-more-link` vaut `display: none` par defaut et les deux regles qui
l'allument sont a >= 750 px (ici) et >= 900 px (bisou-mockup.css). Le
« En savoir plus » du telephone est un autre bouton, `.bmx-btn`, pose par
assets/bisou-mockup.js dans #bisou-mockup-btn : celui-la est intact.
Le balisage reste en place dans sections/main-product.liquid, et
bisou-mockup.js continue de le trouver sans rien casser. Rendre le lien,
c'est retirer ces quatre lignes.
Deux classes, donc plus lourd que la regle a une classe de
bisou-mockup.css : pas besoin de !important, et pas de dependance a l'ordre
de chargement des deux feuilles. */
@media (min-width: 750px) {
.rv5-more-link.rv5-scrolldown {
display: none;
}
}
/* ── N5 — L'AIR DU SELECTEUR SE DESSERRE AVEC L'ECRAN ──────────────────
`--rv5-gap-sections` est la seule gouttiere du selecteur : elle separe le
cartel, FORMAT, FINITION, la barre de stock et les badges. Elle valait
`clamp(1rem, 2vh, 2rem)` — indexee sur la HAUTEUR. Or ce que Max compare,
ce sont deux largeurs d'ecran : entre un 13 pouces et un 27 pouces la
hauteur bouge a peine, la valeur restait clouee au plafond de 2 rem et
l'espacement paraissait fige. La maquette APRES montre l'inverse : plus
l'ecran est large, plus les blocs respirent.
La gouttiere passe donc a la LARGEUR :
1.5625vw vaut exactement 20 px a 1280 et 40 px a 2560 — la
rampe demandee, sans reste ni arrondi.
clamp(1rem, …, 2.5rem) plancher 16 px sous 1024 px de large, plafond
40 px au-dela de 2560.
PAS DE GARDE-FOU EN HAUTEUR ICI, et c'est deliberе : il existe deja, une
feuille plus loin. assets/bisou-mockup.css l. 429 tient
`@media (min-width: 900px) and (max-height: 820px)`, qui repasse la
gouttiere a `clamp(0.5rem, 1.4vh, 1.1rem) !important` pour que le bloc
d'achat tienne dans le premier ecran d'un MacBook 13/14 pouces. Ce
!important bat la regle ci-dessous : les ecrans courts gardent leur version
compacte, quelle que soit leur largeur. En ajouter un second ici n'aurait
fait que brider la rampe sans rien proteger de plus.
Releve au navigateur (Chrome, colonne de 600 px, hauteur > 820 px pour
sortir de la regle compacte) :
1280 → 20,0 px 1600 → 25,0 px 2200 → 34,4 px
1440 → 22,5 px 1920 → 30,0 px 2560 → 40,0 px
Sous 900 px la definition d'origine reste seule : le mobile a ses propres
molettes (--rv5-m-gap) et n'a rien demande. */
@media screen and (min-width: 900px) {
.bisou-rv5 {
--rv5-gap-sections: clamp(1rem, 1.5625vw, 2.5rem);
}
}
/* ── MOBILE ──────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
/* Le panneau recouvre l'image avec la meme animation qu'en grand. */
/* 25/08 : plus de padding a droite. Depuis que .product__info-wrapper a rendu
ses 20px, la colonne info finit au bord de .page-width — le bouton
« agrandir » doit finir la aussi, pas 16px avant. */
.rv5-media-tools {
width: 100%;
padding-right: 0;
}
/* ── La scène tient ses deux calques (25/08) ──
Deux choses dépassent de la scène sans qu'on les voie :
- le de la galerie porte margin-left/right: -1.5rem
(assets/section-main-product.css, bloc mobile) : il déborde de 15 px de
chaque côté, dont 15 px à droite. Au repos ça passe d'un cheveu — la
marge latérale vaut 16 px — mais descendre --rv5-m-pad-x sous 15 px,
ce que le commentaire du haut invite à faire, ramènerait la bande
blanche ;
- quand le panneau « Édition limitée » s'ouvre, le cadre glisse de 14 %
vers la droite (.rv5-edition-open .rv5-media-frame) : +40 px. Mesuré à
320 px : 39 px de défilement horizontal, panneau ouvert. Le bug existe
déjà en ligne, il devient visible maintenant que le badge est posé en
face de FORMAT et qu'on a envie d'appuyer dessus.
On clôt donc la scène. Ce n'est PAS le overflow:hidden interdit : celui-là
se met sur html/body et tue le position:sticky de la colonne image. Ici on
clôt un DESCENDANT du bloc collant — sur ordinateur .product__media-wrapper
porte déjà overflow:hidden, le sticky s'en porte très bien. Et ce qu'on
rogne est vide : l'image occupe exactement la scène, 16 → 344 à 360 px. */
.rv5-media-stage {
overflow: hidden;
}
}
/* ═══════════════════════════════════════════════════════════════════
PLEIN ECRAN — une image, entiere, centree (Max, 28/08)
═══════════════════════════════════════════════════════════════════
La modale de Dawn est pensee pour le panoramique : sur mobile elle pose
l'image a sa largeur native (1100 px) dans un conteneur qui defile, et sur
ordinateur elle EMPILE toutes les images du produit. Sur un tirage ca donne
un coin de mur agrandi et une longue colonne de cadres. Ici : UNE image, la
diapo active, entiere dans l'ecran, centree. Le reste de la modale — le
bouton fermer, la fermeture au clic, le focus — reste celui du theme.
La modale est deplacee sous par ModalDialog (global.js:624), donc
ces regles ne passent pas par .page-width. Elles portent
.product-media-modal en tete pour gagner sur celles de
section-main-product.css a specificite egale, quel que soit l'ordre de
chargement. */
.product-media-modal .product-media-modal__dialog {
height: 100vh;
height: 100dvh;
align-items: center;
justify-content: center;
}
.product-media-modal .product-media-modal__content {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-height: none;
padding: 0;
overflow: hidden;
}
.product-media-modal .product-media-modal__content > *:not(.active) {
display: none;
}
.product-media-modal .product-media-modal__content > .active {
display: block;
width: auto;
height: auto;
max-width: calc(100vw - 2rem);
max-height: calc(100vh - 2rem);
max-height: calc(100dvh - 2rem);
object-fit: contain;
margin: 0;
}
@media screen and (min-width: 750px) {
.product-media-modal .product-media-modal__content > .active {
max-width: calc(100vw - 8rem);
max-height: calc(100vh - 4rem);
}
}
/* ═══ LE BOUTON « AGRANDIR », SUR ORDINATEUR (Max, 28/08) ═══
Plus de bulle : le pictogramme seul, en haut a droite du BLOC GRIS. Le bloc
commence sous l'en-tete (il porte padding-top: --header-height), donc le
bouton se cale a cette hauteur, pas au bord de la fenetre. Il sort du flux
au passage : la scene se recentre d'autant. Sur mobile rien ne change.
Et le clic sur le tirage lui-meme ouvre le plein ecran — voir
assets/bisou-fiche.js ; ici on ne fait que le dire au curseur. */
@media screen and (min-width: 900px) {
.page-width .product.bisou-rv5-fiche .rv5-media-tools {
position: absolute;
top: calc(var(--header-height, 85px) + 16px);
right: 16px;
width: auto;
max-width: none;
margin: 0;
padding: 0;
z-index: 2;
}
.rv5-expand-btn {
width: auto;
height: auto;
padding: 6px;
border: 0;
border-radius: 0;
background: transparent;
}
.rv5-expand-btn svg {
width: 28px;
height: 28px;
}
.rv5-media-frame .product__media-item:not(.rv5-mk-slide) img {
cursor: zoom-in;
}
}
/* ═══ ZOOM DANS LE PLEIN ECRAN, SUR ORDINATEUR (Max, 28/08) ═══
L'image entiere invite au zoom : un clic dessus la double, centree sur le
point clique, et le conteneur se met a defiler (molette, barres). Un second
clic la rend entiere. Le clic A COTE ferme toujours, comme chez Dawn. La
largeur zoomee est posee en ligne par assets/bisou-fiche.js ; ici on ne
pose que l'etat. */
.product-media-modal .product-media-modal__content > .active {
cursor: zoom-in;
}
.product-media-modal.rv5-zoomed .product-media-modal__content {
display: block;
position: relative;
overflow: auto;
}
.product-media-modal.rv5-zoomed .product-media-modal__content > .active {
max-width: none;
max-height: none;
margin: 0 auto;
cursor: zoom-out;
}
/* zoome : la main dit qu'on peut faire glisser l'image (assets/bisou-fiche.js) ; un clic sans glisser la rend entiere */
@media (hover: hover) and (pointer: fine) {
.product-media-modal.rv5-zoomed .product-media-modal__content > .active { cursor: grab; }
.product-media-modal.rv5-zoomed .product-media-modal__content.rv5-glisse,
.product-media-modal.rv5-zoomed .product-media-modal__content.rv5-glisse > .active { cursor: grabbing; user-select: none; }
}
/* ── LE BLOC D'ACHAT A LA TAILLE DU SITE EN LIGNE (Max, 22/10, v7-8) ──
« Il faut qu'il soit vraiment comme avant, au tout début, c'est-à-dire
comme il est sur le site actuellement […] c'est tout le temps centré ».
Les paliers de zoom du 20 et du 21/10 (0,85 à 1,105 selon l'écran) sont
retirés : 600 px de large à toutes les tailles d'ordinateur, comme en
ligne, et le bloc retrouve sa hauteur, donc sa place dans le premier
écran. Associez-le suit (assets/bisou-duo.css). */
/* ── LE ROND DE L'ARTISTE REVIENT AU TELEPHONE (Max, 20/10) ──
L'en-tete telephone n'avait que le nom. Meme geste que .rv5-artist-line :
le nom, six pixels, le rond ; c'est le nom qui coupe a l'ellipse, jamais
le rond. Meme palier que l'en-tete telephone (900 px). */
@media screen and (max-width: 900px) {
.rv5-mobile-header__artist a {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
vertical-align: middle;
}
.rv5-mobile-header__artist-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* ── LA FINITION COMME SUR LE SITE EN LIGNE (Max, 22/10, v7-8) ──
« Je vois aussi que finition, c'est plus comme avant […] Là je vois noir
et blanc sous le truc, non, il faut que ça soit comme avant. » Les noms
sous les pastilles (21/10) sont retirés : l'interrupteur Avec / Sans et
les cinq pastilles sans nom, rond « sans cadre » compris, comme en ligne.
Le data-name du snippet reste, sans effet. */
/* Revue téléphone, défaut 10 (21/10) : « Édition limitée » (8,5 px) et les dimensions des formats (9 px)
passent à 10 et 10,5 px, au téléphone et à l'iPad (même palier que leurs tailles, 900 px). */
@media screen and (max-width: 900px) {
.rv5-flbl .rv5-edition-tag--gold.rv5-flbl-edition { font-size: 10px; }
.bisou-rv5 .rv5-format-row .rv5-f-dim-val { font-size: 10.5px; }
}
/* ── Finition : le nom de la couleur choisie, tout à droite des pastilles (Max, 23/10, 14 h : « dans finition on
peut écrire la couleur tout à droite des points quand c'est sélectionné, sinon les points reviennent centrés » ;
fiche wk-produit-galerie-scroll-droite). Un cadre de couleur choisi : les pastilles à gauche, son nom à droite
(l'étiquette #rv5-color-label, tenue à jour par assets/bisou-variant-ui.js, masquée depuis le 21/10) ; « Sans
cadre » : les pastilles seules, centrées, comme avant. Réversible : retirer ce bloc. */
.rv5-finish-part-b:has(.rv5-color-swatch.active:not(.rv5-c-none)) { justify-content: flex-start !important; }
.rv5-finish-part-b:has(.rv5-color-swatch.active:not(.rv5-c-none)) .rv5-swatches-wrap { margin: 0; }
.rv5-finish-part-b:has(.rv5-color-swatch.active:not(.rv5-c-none)) .rv5-part-b-info {
display: flex;
align-items: center;
margin-left: auto;
padding-left: 10px;
white-space: nowrap;
}
.rv5-finish-part-b .rv5-f-arrow { display: none; }
.rv5-finish-part-b .rv5-color-label { padding-left: 0; }
/* Langues (fiche d'un tirage, 4e tour, 28/10) : sous 390 px, le nom du cadre ne tenait pas à côté des cinq pastilles
(à 320 : « MARCO DE ABEDUL » sortait de 37 px, « CADRE BOULEAU » de 24, 「ブラックフレーム」 coupé par le bord).
Il passe sur deux lignes, coupé entre deux mots (U+200B dans locales/ja.json pour le japonais), aligné à droite ;
les pastilles gardent leur taille. À 390 et plus, rien ne change. */
@media (max-width: 389px) {
.rv5-finish-part-b:has(.rv5-color-swatch.active:not(.rv5-c-none)) .rv5-part-b-info { white-space: normal; text-align: right; line-height: 1.25; }
html:lang(ja) .rv5-finish-part-b .rv5-color-label { word-break: keep-all; overflow-wrap: anywhere; }
}
/* ═══════════════════════════════════════════════════════════════════
Cibles au doigt, téléphone (amélioration continue, 24/10)
Le cœur, le partage (28 px) et l'agrandissement (30 px) gardent leur
taille à l'œil ; leur zone de toucher déborde jusqu'à 44 px de haut,
et de 4 px sur les côtés, sans mordre sur le voisin (8 px d'écart).
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 749px) {
.rv5-expand-btn {
position: relative;
}
.rv5-media-actions .bisou-wish-btn--pdp::after,
.rv5-btn-share--mobile::after,
.rv5-expand-btn::after {
content: "";
position: absolute;
inset: -8px -4px;
}
/* 25/10, tour 6 : 44 px de large aussi. Le cœur gagne vers la gauche, le partage vers la
droite (côtés libres) ; l'agrandissement des deux côtés. Les 8 px du milieu ne bougent pas. */
.rv5-media-actions .bisou-wish-btn--pdp::after { inset: -8px -4px -8px -12px; }
.rv5-btn-share--mobile::after { inset: -8px -12px -8px -4px; }
.rv5-expand-btn::after { inset: -8px -7px; }
}
/* « Sans cadre », téléphone : le tirage nu remplit la diapo jusqu'en bas, et
sa marge (numéro « 1/10 », titre, signature à la main) passait sous les
points et les flèches de la galerie. L'image s'arrête 44 px plus haut,
au-dessus de cette rangée ; « Avec cadre » ne bouge pas. */
@media (max-width: 749px) {
.product:has(.rv5-btn-sans.active) :is(.product__media-list > .product__media-item:first-child .product__media img, .product__media img[data-rv5-src-origine]) {
height: calc(100% - 44px);
}
}
/* Fiche tirage au téléphone, suite (tirage horizontal, 24/10).
1. Les pastilles de cadre (30 px, 10 px d'écart) et « Édition limitée »
(18 px de haut) gardent leur dessin ; leur zone de toucher déborde :
40 × 44 px pour les pastilles, sans mordre sur la voisine ; 40 px de
haut pour l'étiquette, surtout vers le haut (7 px seulement la
séparent de la ligne « Petit », qu'elle ne doit pas prendre). La
pastille « Papier » et l'étiquette coupaient ce qui dépasse
(overflow) : leur trait rouge et leur reflet restent coupés par
l'arrondi, comme avant.
2. « Agrandir » montrait le tirage moins large que la fiche (marge de
16 px de chaque côté) : un tirage horizontal rapetissait en plein
écran. Au téléphone il prend toute la largeur de l'écran. */
@media (max-width: 749px) {
.rv5-finish-part-b .rv5-color-swatch.rv5-c-none,
.rv5-edition-tag--gold {
overflow: visible;
}
.rv5-edition-tag {
position: relative;
}
.rv5-finish-part-b .rv5-color-swatch::after,
.rv5-edition-tag::after {
content: "";
position: absolute;
inset: -9px -6px;
}
.rv5-edition-tag::after {
inset: -18px 0 -6px -8px;
}
.product-media-modal .product-media-modal__content > .active {
max-width: 100vw;
}
}
/* Cibles au doigt, tablette (horizontale 5, 25/10). Les règles du téléphone s'arrêtent à 749 px : sur iPad
(820 debout, 1 180 couché) le cœur, le partage, « Agrandir », les pastilles et « Édition limitée » restaient
à 22–30 px. Même principe, seulement au doigt : le dessin ne bouge pas, la zone déborde jusqu'à 44 px,
en partageant l'écart avec le voisin. */
@media (min-width: 750px) and (hover: none) and (pointer: coarse) {
/* Fiche tirage 8 : le partage n'était positionné que vers 1,3 s ; d'ici là sa zone de toucher couvrait toute la
colonne, puis se repliait (saut 0,13 sur iPad debout, 0,15 couché). */
.rv5-expand-btn,
.rv5-btn-share {
position: relative;
}
.rv5-expand-btn::after,
.bisou-wish-btn--pdp::after,
.rv5-btn-share::after,
.rv5-finish-part-b .rv5-color-swatch::after,
.rv5-edition-tag::after {
content: "";
position: absolute;
}
.rv5-finish-part-b .rv5-color-swatch.rv5-c-none,
.rv5-edition-tag--gold {
overflow: visible;
}
/* Agrandir : 32 px (40 au-delà de 900), centré. */
.rv5-expand-btn::after { inset: min(0px, calc(50% - 22px)); }
}
/* Debout (750–899) : en-tête à une colonne. Cœur et partage 28 px, 8 px entre eux, le nom de l'artiste 5 px
dessous ; pastilles 30 px au pas de 40 ; « Édition limitée » 18 px, 20 px sous le nom. */
@media (min-width: 750px) and (max-width: 899px) and (hover: none) and (pointer: coarse) {
.bisou-wish-btn--pdp::after { inset: -11px -4px -5px -12px; }
.rv5-btn-share--mobile::after { inset: -11px -12px -5px -4px; }
.rv5-finish-part-b .rv5-color-swatch::after { inset: -7px -5px; }
.rv5-edition-tag::after { inset: -20px 0 -6px; }
}
/* Couché (900 et plus) : partage 24 px et cœur 30 px côte à côte (6 px), la référence 10 px à gauche,
« Édition limitée » 11 px dessous ; pastilles 22 px au pas de 28. */
@media (min-width: 900px) and (hover: none) and (pointer: coarse) {
.bisou-wish-btn--pdp::after { inset: -9px -11px -5px -3px; }
.rv5-btn-share:not(.rv5-btn-share--mobile)::after { inset: -10px -3px -10px -5px; }
.rv5-finish-part-b .rv5-color-swatch::after { inset: -11px -3px; }
.rv5-edition-tag::after { inset: -4px 0 -18px; }
}
/* Accessibilité, 25/10 : les dimensions des formats non choisis (« encadré 30 × 40 cm ») sortaient en
#a0a0a0 sur blanc (gris #888 à 80 %), 2,6:1, illisibles pour beaucoup ; le minimum (WCAG AA) est 4,5:1.
L'encre de la fiche à 60 % donne #707070, 4,9:1, et reste plus claire que le nom du format ; tirée des
variables, elle suivra un thème qui les change. Le format choisi (fond noir) ne bouge pas ; [data-f] :
les formats d'un tirage seulement (les lignes du t-shirt portent aussi .rv5-format-row). */
.rv5-format-row[data-f]:not(.active) .rv5-f-dim-val {
color: var(--rv5-black);
opacity: 0.6;
}
/* Fiche tirage 8, 26/10 — iPad debout (750 à 899 px) : « Associez-le » (#bvf-assoc, assets/bisou-duo.js) n'arrive
qu'après le premier affichage et prend la place de l'ancien bloc, 400 px plus haut ; « À propos de l'artiste »,
visible sous la fiche, était poussé hors de l'écran (saut 0,21 à 0,27 à chaque arrivée). L'ancien bloc garde
d'emblée la hauteur du nouveau (mesurée de 768 à 834 : 466 à 485 px, au prorata de la largeur ; un tirage
horizontal, mur plus bas : 406 à 416 px) ; il se cache quand le nouveau arrive (bvf-duo-on), et bisou-duo.js
pose bvf-duo-off s'il ne construit rien.
Fiche tirage horizontale 7 : ces hauteurs comptaient aussi les 72 px d'« En savoir plus » (64 + 8 d'écart), qui
arrivait après ; sa place est désormais gardée dans la rangée d'achat (bisou-mockup-layer.css) : 72 px de moins ici. */
@media screen and (min-width: 750px) and (max-width: 899px) {
html:not(.bvf-duo-on):not(.bvf-duo-off) .bisou-rv5:has(.rv5-format-row[data-f]) #rv5-bloc-associated {
min-height: calc(28.8vw + 173px);
}
html:not(.bvf-duo-on):not(.bvf-duo-off) .product:has([data-orientation="horizontal"]) .bisou-rv5:has(.rv5-format-row[data-f]) #rv5-bloc-associated {
min-height: calc(19.2vw + 186px);
}
}
/* 27/10 (langues-continue-fiche-tirage-horizontal) : en japonais, la pile japonaise après Space Mono ;
avec le seul « monospace », le japonais tombe sur une police à chasse fixe (MS Gothic sous Windows). */
:root:lang(ja) :is(.bisou-rv5, .rv5-edition-panel) {
--rv5-mono: 'Space Mono', var(--br-ja-sans);
}
/* ══ b27-fiche-edition-limitee (27/10) — le tirage SANS CADRE, EN GRAND, et un cartel ══
Max : « on n'a pas besoin d'avoir le morceau avec un cadre ; dans l'édition limitée,
on peut l'avoir sans cadre, en grand, et un truc encore un peu plus stylé ».
assets/bisou-fiche.js pose dans le panneau la variante « sans cadre » du format choisi
(.rv5-ed-print, classe .has-print sur le panneau) et range les deux compteurs dans un
cartel (.rv5-ed-cartel) sous la mention « Édité en N exemplaires · A3 » de la fiche.
Sans script, ou sans image sans cadre, rien de ceci ne s'applique : l'ancien panneau.
Le mouvement et la croix sont ceux du volet « En savoir plus » : un fondu, une croix
simple dans un rond, un fond léger au survol. Aucun dégradé. */
.rv5-edition-panel.has-print {
transition: opacity .25s ease, visibility 0s linear .25s;
}
.rv5-edition-panel.has-print.is-open {
transition: opacity .3s ease .12s, visibility 0s;
}
.rv5-edition-panel.has-print .rv5-edition-panel__inner,
.rv5-edition-panel.has-print.is-open .rv5-edition-panel__inner {
transform: none;
}
/* Le tirage : seul, net, sa marge blanche comprise ; il se pose doucement. */
.rv5-ed-print {
margin: 0;
min-width: 0;
/* le canevas agrandi déborde de sa boîte par ses bords transparents : on les rogne (sinon,
au téléphone, la page s'élargit) ; le bas garde de quoi montrer l'ombre du papier. */
overflow: hidden;
padding: 6px 6px 30px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transform: translateY(12px) scale(.985);
transition: opacity .25s ease, transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.rv5-edition-panel.is-open .rv5-ed-print {
opacity: 1;
transform: none;
transition: opacity .45s ease .12s, transform .85s cubic-bezier(0.22, 1, 0.36, 1) .12s;
}
.rv5-ed-print[hidden] { display: none; }
.rv5-ed-print img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transform-origin: 50% 50%;
filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .5));
}
/* Le cartel : la mention de l'édition, puis les deux compteurs côte à côte, un filet entre eux. */
.rv5-ed-cartel {
margin: clamp(1.4rem, 2.6vw, 2.2rem) 0 0;
padding: clamp(.95rem, 1.4vw, 1.3rem) clamp(1rem, 1.6vw, 1.4rem);
border: 1px solid rgba(244, 241, 234, .24);
}
.rv5-ed-cartel__ed {
font-family: var(--rv5-mono, monospace);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(244, 241, 234, .78);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
margin: 0 0 clamp(.8rem, 1.2vw, 1rem);
padding-bottom: clamp(.7rem, 1.1vw, .9rem);
border-bottom: 1px solid rgba(244, 241, 234, .14);
}
.rv5-ed-cartel__fmt { flex: none; color: #FFFFFF; }
.rv5-ed-cartel .rv5-edition-panel__facts {
margin: 0;
padding: 0;
border: 0;
gap: 0;
}
.rv5-ed-cartel .rv5-edition-panel__fact { flex: 1 1 0; gap: 8px; }
.rv5-ed-cartel .rv5-edition-panel__fact + .rv5-edition-panel__fact {
padding-left: clamp(1rem, 1.6vw, 1.4rem);
border-left: 1px solid rgba(244, 241, 234, .14);
}
.rv5-ed-cartel .rv5-edition-panel__facts dt { font-size: 10px; color: rgba(244, 241, 234, .6); }
.rv5-edition-panel.has-print .rv5-edition-panel__kicker { font-size: 10px; }
/* La croix du volet « En savoir plus » : 22 px dans un rond de 44, un fond léger au survol. */
.rv5-edition-panel.has-print .rv5-edition-panel__close {
border-radius: 50%;
color: rgba(244, 241, 234, .82);
transition: background-color .2s ease, color .2s ease;
}
.rv5-edition-panel.has-print .rv5-edition-panel__close svg { width: 22px; height: 22px; }
.rv5-edition-panel.has-print .rv5-edition-panel__close:hover,
.rv5-edition-panel.has-print .rv5-edition-panel__close:focus-visible {
transform: none;
color: #FFFFFF;
background: rgba(244, 241, 234, .1);
}
.rv5-edition-panel.has-print .rv5-edition-panel__close:focus-visible { outline: 2px solid rgba(244, 241, 234, .7); outline-offset: 2px; }
/* Ordinateur : le texte à gauche, plus étroit ; le tirage prend tout le reste, en hauteur
comme en largeur. Le tirage encadré de la fiche s'efface au lieu de reculer. */
@media screen and (min-width: 900px) {
.page-width .product.bisou-rv5-fiche .product__media-wrapper.rv5-edition-on:has(.rv5-edition-panel.has-print) .rv5-media-stage {
opacity: 0;
transition: opacity .25s ease;
}
.rv5-edition-panel.has-print {
gap: clamp(28px, 4%, 64px);
padding-left: clamp(28px, 5%, 72px);
padding-right: clamp(24px, 4.5%, 64px);
padding-top: clamp(56px, 7vh, 88px);
padding-bottom: clamp(32px, 6vh, 72px);
}
.rv5-edition-panel.has-print .rv5-edition-panel__inner {
flex: 0 0 auto;
width: clamp(250px, 29%, 340px);
}
/* Petit ordinateur (le bloc fait moins de 800 px) : la colonne et les marges se serrent, le tirage gagne la place. */
@media (max-width: 1599px) {
.rv5-edition-panel.has-print { gap: 28px; padding-left: 28px; padding-right: 24px; }
.rv5-edition-panel.has-print .rv5-edition-panel__inner { width: clamp(220px, 34%, 250px); }
}
.rv5-edition-panel.has-print .rv5-ed-print {
flex: 1 1 0;
align-self: stretch;
}
.rv5-edition-panel.has-print .rv5-edition-panel__close {
top: clamp(.9rem, 2vh, 1.6rem);
right: clamp(1rem, 2vw, 1.8rem);
}
}
/* Téléphone et tablette : le tirage d'abord, en haut, puis le texte et le cartel. Le bloc
s'ouvre assez haut pour les deux ; le tirage encadré ne se devine plus derrière. */
@media screen and (max-width: 899px) {
.product__media-wrapper.rv5-edition-on:has(.rv5-edition-panel.has-print) {
min-height: max(78vh, 700px);
}
/* Tirage vertical : le papier remplit déjà la hauteur de sa boîte, rien à resserrer ; à
384 × 832, le cartel passait de 34 px sous le nom du tirage. Le bloc grandit avec l'image. */
.product__media-wrapper.rv5-edition-on:has(.rv5-ed-print.is-vertical:not([hidden])) {
min-height: max(78vh, 700px, calc(min(40vh, 340px) + 470px));
}
.product__media-wrapper.rv5-edition-on:has(.rv5-edition-panel.has-print) .rv5-media-stage {
opacity: 0;
}
.rv5-edition-panel.has-print {
flex-direction: column;
justify-content: center;
gap: clamp(1.3rem, 5vw, 2rem);
padding-top: 56px;
}
.rv5-edition-panel.has-print .rv5-ed-print {
order: -1;
flex: 0 0 auto;
width: 100%;
}
.rv5-edition-panel.has-print .rv5-ed-print img {
max-height: min(40vh, 340px);
/* la boîte se resserre sur le papier agrandi (canevas horizontal, mesuré par bisou-fiche.js) */
margin-block: calc(-1 * var(--ed-rogne, 0%));
}
.rv5-edition-panel.has-print .rv5-edition-panel__close { top: 8px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.rv5-ed-print,
.rv5-edition-panel.is-open .rv5-ed-print {
transform: none;
transition: opacity .2s ease;
}
}