/* ==========================================================================
   Cartes « Nos produits » : compositions en HTML/CSS (texte net, pas d'image
   aplatie). Un produit, une action, un résultat visible.
   - Au repos et sur mobile : le résultat, fixe.
   - Ordinateur, au survol de la carte : l'action se rejoue en ~2,5 s.
   Toutes les mesures en cqw (largeur du visuel) : la composition garde ses
   proportions à toutes les tailles. Le visuel est décoratif (aria-hidden).
   Deux pistes en essai : .pv-a (extraits réels) et .pv-b (maquette).
   ========================================================================== */

.sumo-refonte .sumo-card__media.pv { position: relative; container-type: inline-size; background: var(--pv-fond); font-family: Lato, "Helvetica Neue", Arial, sans-serif; color: #1d1d1b; line-height: 1.25; }
.pv * { box-sizing: border-box; }
.pv-logo { position: absolute; left: 5.5cqw; top: 5.5cqw; z-index: 6; display: flex; align-items: center; gap: 3cqw; }
.pv-logo img { display: block; height: 6.5cqw; width: auto; }
.pv-panel { position: absolute; background: #fff; border-radius: 1.8cqw; box-shadow: 0 2.5cqw 7cqw -2.5cqw rgba(0, 0, 0, .22); overflow: hidden; }
.pv-txt-s { font-size: 2.3cqw; color: #6b6b6b; }
.pv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 1.4cqw; border-radius: 1.2cqw; font-weight: 700; color: #fff; white-space: nowrap; }

/* ---------- A · Portail du Bijou : catalogue → fiche → panier ----------- */
.pv--pdb { --pv-fond: #f5efe4; --pv-or: #ba8e3d; --pv-ink: #1d1d1b; }
.pv-a.pv--pdb .pv-cat { left: 5.5cqw; top: 19cqw; width: 50cqw; height: 90cqw; padding: 4cqw 3.5cqw; }
.pv-a.pv--pdb .pv-cat__titre { font-size: 3.2cqw; margin: 0 0 3cqw; }
.pv-a.pv--pdb .pv-cat__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5cqw; }
.pv-a.pv--pdb .pv-tuile { border-radius: 1cqw; outline: .6cqw solid transparent; outline-offset: .6cqw; }
.pv-a.pv--pdb .pv-tuile.is-choisi { outline-color: var(--pv-ink); }
.pv-a.pv--pdb .pv-tuile img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.pv-a.pv--pdb .pv-tuile span { display: block; background: var(--pv-or); color: #fff; font-size: 1.9cqw; padding: 1.2cqw; min-height: 9cqw; }
.pv-a.pv--pdb .pv-fiche { left: 47cqw; top: 11cqw; width: 58cqw; height: 92cqw; padding: 3cqw 4cqw; }
.pv-a.pv--pdb .pv-fiche img { display: block; height: 33cqw; margin: 0 auto 2.5cqw; }
.pv-a.pv--pdb .pv-fiche b { display: block; font-size: 3.6cqw; }
.pv-a.pv--pdb .pv-prix { font-size: 4.2cqw; font-weight: 700; color: var(--pv-or); margin: 1.2cqw 0 3cqw; }
.pv-a.pv--pdb .pv-btn { background: var(--pv-ink); font-size: 2.8cqw; padding: 2.6cqw 4cqw; }
.pv-toast { position: absolute; z-index: 5; display: flex; align-items: center; gap: 1.6cqw; background: #fff; border-radius: 99px; padding: 1.8cqw 3.2cqw 1.8cqw 1.8cqw; font-size: 2.6cqw; font-weight: 700; box-shadow: 0 2cqw 5cqw -1.5cqw rgba(0, 0, 0, .25); white-space: nowrap; }
.pv-toast i { width: 4cqw; height: 4cqw; border-radius: 50%; background: #1f9d55; display: grid; place-items: center; }
.pv-toast i::after { content: ""; width: 1.8cqw; height: .9cqw; border: .5cqw solid #fff; border-top: 0; border-right: 0; rotate: -45deg; translate: 0 -.25cqw; }
.pv-a.pv--pdb .pv-toast { left: 8cqw; bottom: 6cqw; }

/* ---------- A · VizProof : référence / actuel → différence ------------- */
.pv--viz { --pv-fond: #ebf3ee; --pv-vert: #163f35; --pv-corail: #e97157; }
.pv-a.pv--viz .pv-vue { top: 21cqw; width: 44cqw; height: 90cqw; padding: 0; }
.pv-a.pv--viz .pv-vue--ref { left: 5.5cqw; }
.pv-a.pv--viz .pv-vue--act { left: 52cqw; width: 46cqw; }
.pv-vue__tete { font: 600 2cqw/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: #6b7c74; padding: 2.2cqw 3cqw; border-bottom: 1px solid #e4ebe6; }
.pv-vue__corps { position: relative; padding: 3cqw; }
.pv-vue__corps b { display: block; font-size: 3.8cqw; color: var(--pv-vert); margin-bottom: 2.6cqw; }
.pv-champ { margin-bottom: 2.4cqw; }
.pv-champ span { display: block; font-size: 1.9cqw; color: #7b8a83; margin-bottom: .8cqw; }
.pv-champ i { display: block; height: 5cqw; border: 1px solid #dbe4de; border-radius: .9cqw; background: #f8faf8; }
.pv-a.pv--viz .pv-btn { width: 100%; background: var(--pv-vert); font-size: 2.5cqw; padding: 2.4cqw; margin-top: 1cqw; }
.pv-a.pv--viz .pv-vue--act .pv-btn { margin-top: 8cqw; }               /* la régression : le bouton a glissé */
.pv-ecart { position: absolute; left: 1.6cqw; right: 1.6cqw; bottom: -1.6cqw; height: 15cqw; border: .55cqw dashed var(--pv-corail); border-radius: 1.4cqw; }
.pv-ecart span { position: absolute; left: -.55cqw; top: -4.4cqw; background: var(--pv-corail); color: #fff; font-size: 1.9cqw; font-weight: 700; padding: .8cqw 1.4cqw; border-radius: .8cqw; white-space: nowrap; }
.pv-notif { position: absolute; z-index: 5; display: flex; gap: 2cqw; align-items: center; background: #fff; border-radius: 1.6cqw; padding: 2.2cqw 3cqw; box-shadow: 0 2cqw 6cqw -2cqw rgba(0, 0, 0, .25); white-space: nowrap; }
.pv-notif b { display: block; font-size: 2.8cqw; }
.pv-a.pv--viz .pv-notif { right: 4.5cqw; top: 4cqw; }
.pv-a.pv--viz .pv-notif em { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--pv-corail); box-shadow: 0 0 0 1.2cqw rgba(233, 113, 87, .2); }
.pv-balai { position: absolute; z-index: 4; top: 18cqw; bottom: 0; width: .5cqw; left: 3cqw; background: var(--pv-corail); box-shadow: 0 0 3cqw 1cqw rgba(233, 113, 87, .35); opacity: 0; }

/* ---------- A · Odilon : question → réponse → démarche ---------------- */
.pv--odi { --pv-fond: #f1f1fa; --pv-marine: #0a0d60; --pv-rose: #ff3b6b; }
.pv-a.pv--odi .pv-chat { left: 5.5cqw; top: 18cqw; width: 64cqw; height: 92cqw; }
.pv-chat__tete { display: flex; align-items: center; gap: 1.8cqw; background: var(--pv-marine); color: #fff; font-size: 2.6cqw; font-weight: 700; padding: 2.6cqw 3.4cqw; }
.pv-chat__tete i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--pv-rose); }
.pv-chat__fil { display: flex; flex-direction: column; gap: 2.4cqw; padding: 3.4cqw; }
.pv-bulle { max-width: 82%; font-size: 2.6cqw; padding: 2.2cqw 3cqw; border-radius: 2cqw; }
.pv-bulle--moi { align-self: flex-end; background: var(--pv-marine); color: #fff; border-bottom-right-radius: .6cqw; }
.pv-bulle--eux { align-self: flex-start; background: #eceefa; color: var(--pv-marine); border-bottom-left-radius: .6cqw; }
.pv-points { position: absolute; left: 3.4cqw; top: 25cqw; display: flex; gap: .9cqw; padding: 2.4cqw 3cqw; background: #eceefa; border-radius: 2cqw; opacity: 0; }
.pv-points i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--pv-marine); opacity: .4; }
.pv-a.pv--odi .pv-demarche { left: 44cqw; top: 54cqw; width: 60cqw; padding: 3.4cqw 4cqw; display: grid; grid-template-columns: auto 1fr; gap: 1cqw 2.6cqw; align-items: center; }
.pv-demarche__ico { grid-row: span 2; width: 8cqw; height: 8cqw; border-radius: 1.6cqw; background: #ffe3ea; display: grid; place-items: center; }
.pv-demarche__ico::after { content: ""; width: 4.4cqw; height: 3cqw; border: .5cqw solid var(--pv-rose); border-radius: .5cqw; }
.pv-demarche b { font-size: 3cqw; color: var(--pv-marine); }
.pv-demarche .pv-btn { grid-column: 1 / -1; justify-self: start; background: var(--pv-rose); font-size: 2.6cqw; padding: 2.2cqw 3.4cqw; margin-top: 1.6cqw; }

/* ---------- B · la maquette proposée ------------------------------------ */
.pv-b .pv-logo img { height: 7.5cqw; }
.pv-b.pv--pdb .pv-logo img { height: 9cqw; }
.pv-b .pv-logo__nom { font: 600 2.6cqw/1 Lato, sans-serif; letter-spacing: .3em; text-transform: uppercase; padding-left: 3cqw; border-left: 1px solid rgba(0, 0, 0, .5); }
/* Portail du Bijou : la photo du produit occupe toute la vignette */
.pv-b.pv--pdb { --pv-fond: #efe6d8; }
.pv-b.pv--pdb .pv-photo { position: absolute; left: -4cqw; top: 13cqw; width: 66cqw; mix-blend-mode: multiply; }
.pv-b.pv--pdb .pv-fiche { right: 4.5cqw; bottom: 4.5cqw; width: 50cqw; padding: 3.6cqw; }
.pv-b.pv--pdb .pv-fiche b { display: block; font-size: 3.4cqw; }
.pv-b.pv--pdb .pv-prix { font-size: 2.6cqw; color: #6b6b6b; margin: .8cqw 0 2.6cqw; padding-bottom: 2.6cqw; border-bottom: 1px solid #e6e6e6; }
.pv-b.pv--pdb .pv-btn { width: 100%; background: #1d1d1b; font-size: 2.6cqw; padding: 2.6cqw; }
.pv-b.pv--pdb .pv-toast { right: 4.5cqw; top: 25cqw; border-radius: 1.4cqw; }
/* VizProof : avant / après, poignée de comparaison, alerte */
.pv-b.pv--viz { --pv-fond: #e3f4ea; }
.pv-b.pv--viz .pv-logo img { height: 6.5cqw; }
.pv-fen { top: 26cqw; width: 42cqw; height: 52cqw; padding: 2.6cqw; }
.pv-fen--avant { left: 5cqw; }
.pv-fen--apres { left: 38cqw; top: 29cqw; z-index: 2; clip-path: inset(0 0 0 0); }
.pv-tag { position: absolute; z-index: 3; font-size: 2.4cqw; font-weight: 700; color: #fff; padding: 1cqw 2cqw; border-radius: .9cqw; }
.pv-tag--avant { left: 7cqw; top: 20cqw; background: #6b6f6d; }
.pv-tag--apres { left: 50cqw; top: 23cqw; background: #1f8a54; }
.pv-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.pv-mini__img { aspect-ratio: 1; background: #f1f1f1; border-radius: .8cqw; display: grid; place-items: center; }
.pv-mini__img svg { width: 45%; }
.pv-mini__lignes i { display: block; height: 1.4cqw; background: #e5e5e5; border-radius: 1cqw; margin-bottom: 1.6cqw; }
.pv-mini__lignes i:nth-child(2) { width: 80%; }
.pv-mini__lignes i:nth-child(3) { width: 60%; }
.pv-mini__btn { display: block; height: 4cqw; border-radius: .8cqw; background: #2d2d2d; margin-top: 3cqw; width: 70%; }
.pv-fen--apres .pv-mini__btn { background: #1f6b4a; width: 88%; margin-top: 4.6cqw; outline: .5cqw solid #e5383b; outline-offset: 1.2cqw; }
.pv-poignee { position: absolute; z-index: 4; left: 38cqw; top: 26cqw; bottom: 0; width: 0; border-left: 1px solid rgba(0, 0, 0, .12); }
.pv-poignee::after { content: "‹ ›"; position: absolute; top: 18cqw; left: -4cqw; width: 8cqw; height: 8cqw; border-radius: 50%; background: #fff; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .2); display: grid; place-items: center; font: 700 3cqw/1 Lato, sans-serif; color: #1d1d1b; }
.pv-b.pv--viz .pv-notif { left: 22cqw; bottom: 5cqw; }
.pv-b.pv--viz .pv-notif em { width: 6cqw; height: 6cqw; border-radius: 50%; background: #e5383b; color: #fff; display: grid; place-items: center; font: 700 3.4cqw/1 Lato, sans-serif; font-style: normal; }
/* Odilon : la page de la salle derrière, l'assistant devant */
.pv-b.pv--odi { --pv-fond: #e2e5fb; }
.pv-b.pv--odi .pv-page { right: 4cqw; top: 8cqw; width: 50cqw; height: 72cqw; padding: 3.4cqw; }
.pv-page__tete { display: flex; align-items: center; gap: 2cqw; font-size: 2.8cqw; font-weight: 700; color: var(--pv-marine); margin-bottom: 3cqw; }
.pv-page__tete svg { width: 10cqw; height: 10cqw; }
.pv-page i { display: block; height: 1.4cqw; background: #e6e8f2; border-radius: 1cqw; margin-bottom: 1.8cqw; }
.pv-page i:nth-of-type(2n) { width: 70%; }
.pv-b.pv--odi .pv-chat { left: 5cqw; top: 20cqw; width: 68cqw; }
.pv-b.pv--odi .pv-chat__fil { gap: 2cqw; padding: 3cqw; }
.pv-b.pv--odi .pv-chat__tete { justify-content: space-between; }
.pv-b.pv--odi .pv-chat__tete i { background: none; width: auto; height: auto; font-style: normal; }
.pv-ligne { display: flex; gap: 2cqw; align-items: flex-start; }
.pv-avatar { flex: none; width: 6cqw; height: 6cqw; border-radius: 50%; background: #dfe3fb; }
.pv-avatar--bot { background: var(--pv-marine); }
.pv-b .pv-bulle--moi { background: #e8ebfd; color: var(--pv-marine); align-self: auto; border-radius: 2cqw; }
.pv-b .pv-bulle--eux { background: #fff; border: 1px solid #e6e8f2; color: #33364d; align-self: auto; border-radius: 2cqw; }
.pv-b.pv--odi .pv-btn { background: var(--pv-rose); font-size: 2.8cqw; padding: 2.6cqw 4cqw; margin: 0 3.4cqw; align-self: flex-end; }

/* ---------- Artificial Sumo : une simple photo → une image de campagne -- */
.pv--art { --pv-fond: #efece8; --pv-noir: #0e0f11; --pv-rouge: #e0412b; }
.pv--art .pv-logo img { height: 6cqw; border-radius: 1.3cqw; }
.pv-logo__art { font: 800 3.2cqw/1 "Archivo", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; color: var(--pv-noir); }
.pv-logo__art span { font-weight: 300; }
.pv--art .pv-logo { gap: 1.8cqw; }
.pv-avant { position: absolute; z-index: 3; background: #fff; padding: 1.4cqw 1.4cqw 1.2cqw; border-radius: 1.4cqw; box-shadow: 0 2cqw 6cqw -2cqw rgba(0, 0, 0, .3); }
.pv-avant img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .6cqw; }
.pv-avant span { display: block; font-size: 2.1cqw; color: #6b6b6b; margin-top: 1cqw; }
.pv-ia { position: absolute; overflow: hidden; border-radius: 1.8cqw; }
.pv-ia img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-puce { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 1.2cqw; background: var(--pv-noir); color: #fff; font-size: 2.3cqw; font-weight: 700; padding: 1.3cqw 2.2cqw; border-radius: 99px; white-space: nowrap; }
.pv-puce i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--pv-rouge); }
.pv-fleche { position: absolute; z-index: 4; width: 9cqw; height: 9cqw; border-radius: 50%; background: var(--pv-rouge); display: grid; place-items: center; box-shadow: 0 1.4cqw 4cqw -1cqw rgba(224, 65, 43, .6); }
.pv-fleche::after { content: ""; width: 3cqw; height: 3cqw; border: .7cqw solid #fff; border-left: 0; border-bottom: 0; rotate: 45deg; translate: -.6cqw 0; }
/* A : la photo d'origine à gauche, le résultat occupe le reste */
.pv-a.pv--art .pv-ia { left: 33cqw; top: 15cqw; width: 72cqw; height: 56cqw; border-radius: 1.8cqw 0 0 1.8cqw; }
.pv-a.pv--art .pv-ia img { object-position: 50% 78%; }   /* le collier, pas seulement le visage */
.pv-a.pv--art .pv-avant { left: 5.5cqw; top: 27cqw; width: 23cqw; rotate: -3deg; }
.pv-a.pv--art .pv-fleche { left: 26cqw; top: 39cqw; }
.pv-a.pv--art .pv-puce { right: 4cqw; top: 19cqw; }
/* B : le résultat en grand, la photo d'origine en vignette */
.pv-b.pv--art { --pv-fond: #0e0f11; }
.pv-b.pv--art .pv-logo__art { color: #fff; }
.pv-b.pv--art .pv-ia { inset: 0; border-radius: 0; }
.pv-b.pv--art .pv-ia img { object-position: 60% 30%; }
.pv-b.pv--art .pv-ia::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 22cqw; background: linear-gradient(rgba(14, 15, 17, .75), transparent); z-index: 1; }
.pv-b.pv--art .pv-avant { left: 5cqw; bottom: 5cqw; width: 21cqw; }
.pv-b.pv--art .pv-puce { right: 4.5cqw; bottom: 6cqw; background: #fff; color: var(--pv-noir); }

/* Quatre produits : deux par ligne (les compositions restent lisibles) */
.sumo-refonte .sumo-cards--quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(40px, 4vw, 56px); }
@media (max-width: 781px) { .sumo-refonte .sumo-cards--quatre { grid-template-columns: 1fr; } }

/* ---------- Mouvement (sans réduction des animations) ----------------------
   Ordinateur : au survol de la carte. Mobile et tablette : produits.js pose
   .is-joue sur la carte au centre de l'écran (une seule à la fois) et relance
   l'action en boucle tant qu'elle y reste. */
@media (min-width: 901px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
	.sumo-card:is(:hover, :focus-within) .pv [data-pv] { animation: var(--pv-anim) 2.6s cubic-bezier(.3, .7, .2, 1) both; }
	.sumo-card:is(:hover, :focus-within) .pv .pv-points { animation: pv-points 2.6s linear both; }
}
@media (prefers-reduced-motion: no-preference) {
	:is(.sumo-card, .vit-scene).is-joue .pv [data-pv] { animation: var(--pv-anim) 2.6s cubic-bezier(.3, .7, .2, 1) both; }
	:is(.sumo-card, .vit-scene).is-joue .pv .pv-points { animation: pv-points 2.6s linear both; }
	@keyframes pv-entre-droite { 0%, 30% { opacity: 0; translate: 18cqw 0; } 48%, 100% { opacity: 1; translate: 0 0; } }
	@keyframes pv-entre-bas    { 0%, 62% { opacity: 0; translate: 0 5cqw; } 76%, 100% { opacity: 1; translate: 0 0; } }
	@keyframes pv-entre-haut   { 0%, 66% { opacity: 0; translate: 0 -6cqw; } 80%, 100% { opacity: 1; translate: 0 0; } }
	@keyframes pv-choisi       { 0%, 8% { outline-color: transparent; } 22%, 100% { outline-color: #1d1d1b; } }
	@keyframes pv-appui        { 0%, 52% { scale: 1; } 57% { scale: .94; } 64%, 100% { scale: 1; } }
	@keyframes pv-balaie       { 0% { opacity: 0; left: 3cqw; } 6% { opacity: 1; } 46% { opacity: 1; left: 98cqw; } 52%, 100% { opacity: 0; left: 98cqw; } }
	@keyframes pv-ecart        { 0%, 48% { opacity: 0; scale: 1.15; } 60%, 100% { opacity: 1; scale: 1; } }
	@keyframes pv-q            { 0%, 4% { opacity: 0; translate: 0 3cqw; } 16%, 100% { opacity: 1; translate: 0 0; } }
	@keyframes pv-r            { 0%, 42% { opacity: 0; translate: 0 3cqw; } 54%, 100% { opacity: 1; translate: 0 0; } }
	@keyframes pv-points       { 0%, 18% { opacity: 0; } 22%, 40% { opacity: 1; } 42%, 100% { opacity: 0; } }
	@keyframes pv-volet        { 0%, 6% { clip-path: inset(0 100% 0 0); } 44%, 100% { clip-path: inset(0 0 0 0); } }
	@keyframes pv-poignee      { 0%, 6% { translate: -33cqw 0; } 44%, 100% { translate: 0 0; } }
	@keyframes pv-zoom         { 0% { scale: 1.06; } 100% { scale: 1; } }
	@keyframes pv-revele       { 0%, 22% { clip-path: inset(0 100% 0 0); } 62%, 100% { clip-path: inset(0 0 0 0); } }
	@keyframes pv-eclot        { 0%, 18% { clip-path: circle(0% at 15% 85%); } 70%, 100% { clip-path: circle(150% at 15% 85%); } }
	@keyframes pv-avant        { 0% { opacity: 0; translate: 0 4cqw; } 14%, 100% { opacity: 1; translate: 0 0; } }
	@keyframes pv-pulse        { 0%, 16% { scale: .6; opacity: 0; } 24% { scale: 1.12; opacity: 1; } 30%, 100% { scale: 1; opacity: 1; } }
	.pv [data-pv="droite"] { --pv-anim: pv-entre-droite; }
	.pv [data-pv="bas"]    { --pv-anim: pv-entre-bas; }
	.pv [data-pv="haut"]   { --pv-anim: pv-entre-haut; }
	.pv [data-pv="choisi"] { --pv-anim: pv-choisi; }
	.pv [data-pv="appui"]  { --pv-anim: pv-appui; }
	.pv [data-pv="balaie"] { --pv-anim: pv-balaie; }
	.pv [data-pv="ecart"]  { --pv-anim: pv-ecart; }
	.pv [data-pv="q"]      { --pv-anim: pv-q; }
	.pv [data-pv="r"]      { --pv-anim: pv-r; }
	.pv [data-pv="volet"]  { --pv-anim: pv-volet; }
	.pv [data-pv="poignee"]{ --pv-anim: pv-poignee; }
	.pv [data-pv="zoom"]   { --pv-anim: pv-zoom; }
	.pv [data-pv="revele"] { --pv-anim: pv-revele; }
	.pv [data-pv="eclot"]  { --pv-anim: pv-eclot; }
	.pv [data-pv="avant"]  { --pv-anim: pv-avant; }
	.pv [data-pv="pulse"]  { --pv-anim: pv-pulse; }
}

/* Contrastes AA dans les compositions (textes sur couleurs de marque) */
.pv-a.pv--pdb .pv-tuile span { background: #7d5e25; }
.pv-a.pv--pdb .pv-prix { color: #7d5e25; }
.pv-vue__tete, .pv-champ span { color: #56665f; }
.pv-ecart span { background: #b8452e; }
.pv.pv--odi .pv-btn { background: #d61f50; }
.pv-tag--apres { background: #187244; }

/* ==========================================================================
   Piste C · la vitrine : les produits en onglets à gauche, une grande scène
   à droite. Sur mobile : carrousel horizontal, une scène à la fois.
   Sans JS : les quatre scènes l'une sous l'autre, tout lisible.
   ========================================================================== */
.vitrine { margin-top: clamp(28px, 4vw, 48px); }
.vit-onglets { list-style: none; margin: 0; padding: 0; display: none; }
.vit-scene + .vit-scene { margin-top: 40px; }
.vit-scene .sumo-card__media { margin-bottom: 14px; }
.vit-scene__nom { margin: 0 0 14px; font-size: 1rem; color: #555; }
.vit-scene__nom strong { display: block; font-family: var(--font-title); font-size: 1.375rem; color: var(--sumo-ink, #111); }
.vit-scene__lien { margin: 0; }
.vit-scene__lien a { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--sumo-red-text, #d9171f); text-decoration: none; }
.vit-scene__lien a:hover svg { translate: 5px 0; }
.vit-scene__lien svg { transition: translate .25s ease; }

/* Ordinateur, avec JS : onglets + une scène */
@media (min-width: 901px) {
	.vitrine.is-pret { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
	.vitrine.is-pret .vit-onglets { display: block; }
	.vitrine.is-pret .vit-scenes { display: grid; }
	.vitrine.is-pret .vit-scene { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
	.vitrine.is-pret .vit-scene.is-active { opacity: 1; visibility: visible; transition: opacity .35s ease; }
	.vitrine.is-pret .vit-scene__nom { display: none; }
	.vit-onglets li + li { border-top: 1px solid var(--sumo-line, #e3e3e3); }
	.vit-onglet {
		position: relative; display: flex; align-items: center; gap: 16px; width: 100%;
		padding: 20px 0 20px 20px; background: none; border: 0; text-align: left; cursor: pointer;
		font: inherit; color: #555;
	}
	.vit-onglet::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; background: var(--sumo-line, #e3e3e3); transition: background .3s ease; }
	.vit-onglet img { flex: none; width: 40px; height: 40px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .3s ease, opacity .3s ease; }
	.vit-onglet__txt strong { display: block; font-family: var(--font-title); font-size: 1.375rem; line-height: 1.15; color: var(--sumo-ink, #111); }
	.vit-onglet__txt span { display: block; font-size: .9375rem; line-height: 1.45; margin-top: 4px; }
	.vit-onglet[aria-selected="true"]::before { background: var(--sumo-red, #ed1c24); }
	.vit-onglet[aria-selected="true"] img,
	.vit-onglet:hover img { filter: none; opacity: 1; }
	.vit-onglet:focus-visible { outline: 3px solid var(--sumo-red, #ed1c24); outline-offset: -3px; }
	/* le thème habille tous les boutons au survol (fond noir) : pas ici */
	.sumo-refonte .vitrine .vit-onglet:is(:hover, :focus, :active) { background: none !important; color: #555 !important; border: 0 !important; box-shadow: none !important; }
	.vit-onglet:hover .vit-onglet__txt strong { color: var(--sumo-red-text, #d9171f); }
}
/* Mobile : carrousel, une scène par écran */
@media (max-width: 900px) {
	.vit-scenes { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 6px; scroll-padding-inline: 20px; }
	.vit-scenes::-webkit-scrollbar { display: none; }
	.vit-scene { flex: 0 0 86%; scroll-snap-align: start; margin: 0 !important; }
}