/* Veloria — pop-up d'upsells avant achat, UN produit par étape (2026-10-01) : rouge #C8102E, Urbanist, angles droits. */
.vu-pop { margin: auto; inset: 0; width: min(420px, calc(100vw - 20px)); max-height: calc(100vh - 20px); padding: 0; border: 0; border-radius: 0; color: #111; font: 400 14px/1.45 var(--ve-font, 'Urbanist', sans-serif); background: #fff; overflow-y: auto; }
.vu-pop::backdrop { background: rgba(0, 0, 0, .55); }
.vu-pop * { box-sizing: border-box; }
.vu-ok { margin: 0; padding: 9px 44px 9px 14px; background: #1b7a3a; color: #fff; font-size: 13px; font-weight: 700; }
.vu-ok[hidden] { display: none; }
.vu-pop__x { position: absolute; top: 4px; right: 4px; z-index: 3; width: 34px; height: 34px; border: 0; background: rgba(255, 255, 255, .9); font-size: 24px; line-height: 1; cursor: pointer; color: #111; }
.vu-step[hidden] { display: none; }
.vu-step { animation: vu-in .28s ease-out; }
@keyframes vu-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.vu-media { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #F7F1EE; height: min(300px, 46vh); }
.vu-media__vid { width: 100%; height: 100%; object-fit: cover; display: block; background: #111; }
.vu-media__img { display: block; height: 100%; overflow: hidden; }
.vu-media__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vu-media:has(.vu-media__vid) { grid-template-columns: 1fr 1fr; }
.vu-media:not(:has(.vu-media__vid)) { grid-template-columns: 1fr; }
.vu-body { padding: 12px 16px 14px; text-align: center; }
.vu-badge { display: inline-block; background: #C4511F; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; letter-spacing: .02em; }
.vu-title { margin: 8px 0 0; font-size: 21px; font-weight: 800; line-height: 1.15; }
.vu-title b { color: var(--ve-accent, #C8102E); }
.vu-benefit { margin: 6px 0 0; font-size: 14px; color: #444; }
.vu-price { margin: 10px 0 12px; font-size: 22px; white-space: nowrap; }
.vu-price s { color: #8a8a8a; font-size: 15px; }
.vu-price b { color: var(--ve-accent, #C8102E); font-weight: 800; }
.vu-pct { display: inline-block; background: var(--ve-accent, #C8102E); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 6px; vertical-align: 3px; }
.vu-add { width: 100%; height: 54px; border: 0; background: var(--ve-accent, #C8102E); color: #fff; font: 800 16px var(--ve-font, sans-serif); cursor: pointer; letter-spacing: .01em; }
.vu-add[disabled] { opacity: .6; cursor: default; }
.vu-refuse { display: block; margin: 8px auto 0; border: 0; background: none; color: #8a8a8a; font: 400 12.5px var(--ve-font, sans-serif); text-decoration: underline; cursor: pointer; padding: 4px 8px; }
/* Saison (reprise 01/10) : orange automne #C4511F, texte blanc (contraste 4,6:1, AA) ; le rouge reste la couleur du prix. */
.ve-season-badge { display: inline-flex; align-items: center; gap: 4px; background: #C4511F !important; color: #fff; font-weight: 700; letter-spacing: .02em; }
.ve-season-badge .ve-leaf { flex: 0 0 auto; }
.vd-season { color: #C4511F; }
.ve-sz { min-width: 34px; height: 28px; padding: 0 6px; border: 1px solid #CFC7C5; background: #fff; color: #111; font: 600 12px var(--ve-font, 'Urbanist', sans-serif); cursor: pointer; border-radius: 0; }
.ve-sz[aria-checked="true"] { border-color: #111; background: #111; color: #fff; }
.vu-name { margin: 8px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #3d3d3d; }
.vu-name + .vu-title { margin-top: 2px; }
.vu-onesize { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: #3d3d3d; vertical-align: 3px; }
.vu-sizes { display: flex; justify-content: center; gap: 6px; margin: -4px 0 12px; flex-wrap: wrap; }
/* Boutons cohérents avec le site (2026-10-01) : Urbanist 600, rayon 10 px ; rouge = couleur du prix. */
.vu-add { font: 700 16.5px/1.2 var(--ve-font, 'Urbanist', sans-serif); letter-spacing: .01em; border-radius: 10px !important; box-shadow: 0 6px 18px rgba(200,16,46,.22); }
.vu-add:hover { background: #A50D26; }
.vu-add:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
@media (max-width: 360px) { .vu-title { font-size: 19px; } .vu-price { font-size: 20px; } .vu-media { height: min(260px, 40vh); } }
@supports (height: 100dvh) { .vu-pop { max-height: calc(100dvh - 20px); } }
.vu-media { grid-template-rows: 100%; overflow: hidden; }
.vu-media > * { min-height: 0; min-width: 0; }