/** Shopify CDN: Minification failed
Line 2068:72 Unexpected "`"
Line 2069:84 Unterminated string token
Line 2074:61 Unterminated string token
Line 2075:53 Unexpected "`"
Line 2077:81 Unterminated string token
Line 2078:64 Unterminated string token
Line 2080:19 Unterminated string token
Line 2081:69 Unterminated string token
Line 2084:78 Unterminated string token
Line 2085: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 ── */
body:has(.bisou-rv5),
html:has(.bisou-rv5) {
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:has(.bisou-rv5) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
align-items: start !important;
}
.page-width .product:has(.bisou-rv5) .grid__item { max-width: 100% !important; width: 100% !important; }
/* BLOC GAUCHE (GRIS + STICKY 100VH) */
.page-width .product:has(.bisou-rv5) .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:has(.bisou-rv5) 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:has(.bisou-rv5) .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:has(.bisou-rv5) .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:has(.bisou-rv5) .product__media-wrapper .media,
.page-width .product:has(.bisou-rv5) .product__media-wrapper .product__media,
.page-width .product:has(.bisou-rv5) .product__media-wrapper img,
.page-width .product:has(.bisou-rv5) .product__media-gallery .media,
.page-width .product:has(.bisou-rv5) .global-media-settings,
.page-width .product:has(.bisou-rv5) .global-media-settings::before,
.page-width .product:has(.bisou-rv5) .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 body:has(.bisou-rv5) */
}
/* ── 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:has(.bisou-rv5) .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;
}
.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);
}
/* 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:has(.bisou-rv5) .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;
}
}
/* ── 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;
animation: rv5-badge-briller 4s linear infinite;
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:has(.bisou-rv5) .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;
}
.rv5-expand-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid var(--rv5-border, #d4d4d4);
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
color: #6f6f6f;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.rv5-expand-btn svg {
width: 14px;
height: 14px;
}
.rv5-expand-btn:hover {
color: #111;
border-color: #999;
background: #fff;
}
/* ═══════════════════════════════════════════════════════════════════
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:has(.bisou-rv5) .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:has(.bisou-rv5) .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:has(.bisou-rv5) .product__media-wrapper.rv5-edition-on .rv5-media-stage {
transform: translateX(23.5%);
}
.page-width .product:has(.bisou-rv5) .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:has(.bisou-rv5) 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;
}
/* ── 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:has(.bisou-rv5) .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: 4px;
border: 0;
border-radius: 0;
background: transparent;
}
.rv5-expand-btn svg {
width: 18px;
height: 18px;
}
.rv5-expand-btn:hover {
background: transparent;
border-color: transparent;
}
.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;
}