/* QUALITE24 : carte produit (feuille qui monte du bas) et panier relié à la boutique. Essai local, non publié. */
html { scrollbar-gutter: stable; }
html.fp-fige { overflow: hidden; }
.fp-racine { position: fixed; inset: 0; z-index: 60; pointer-events: none; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; color: #1d1d1f; }
.fp-racine[hidden] { display: none; }
.fp-racine.on { pointer-events: auto; }
.fp-fond { position: absolute; inset: 0; background: rgba(0,0,0,.42); opacity: 0; transition: opacity .4s ease; -webkit-tap-highlight-color: transparent; }
.fp-racine.on .fp-fond { opacity: 1; }
.fp-feuille { position: absolute; left: 50%; bottom: 0; width: min(100%, 560px); max-height: 100%; background: #fff; border-radius: 28px 28px 0 0; box-shadow: 0 -10px 50px rgba(0,0,0,.28); display: flex; flex-direction: column; overflow: hidden; transform: translate(-50%, 104%); transition: transform .46s cubic-bezier(.32,.72,0,1), height .4s cubic-bezier(.32,.72,0,1); outline: 0; padding-bottom: env(safe-area-inset-bottom); }
.fp-racine.on .fp-feuille { transform: translate(-50%, 0); }
.fp-feuille.glisse { transition: none; }
.fp-feuille.glisse ~ * { transition: none; }
.fp-poignee { flex: none; height: 44px; width: 100%; border: 0; padding: 0; background: transparent; cursor: grab; touch-action: none; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.fp-poignee i { display: block; width: 40px; height: 5px; border-radius: 3px; background: #c7c7cc; }
.fp-x { position: absolute; right: 8px; top: 2px; z-index: 3; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; color: #3a3a3c; padding: 0; }
.fp-x span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #efeff1; font-size: 20px; line-height: 1; }
.fp-corps { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 0 0 4px; }
.fp-pad { padding: 0 20px; }
.fp-feuille :focus-visible { outline: 3px solid #0a84ff; outline-offset: 2px; }

/* carrousel */
.fp-car { position: relative; margin: 0 0 14px; background: #f5f5f7; }
.fp-piste { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.fp-piste::-webkit-scrollbar { display: none; }
.fp-piste:focus-visible { outline-offset: -3px; }
.fp-vue { flex: none; width: 100%; aspect-ratio: 1 / 1; max-height: 46dvh; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; position: relative; }
.fp-vue img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.fp-vue.ko::after { content: "Photo indisponible"; position: absolute; font-size: 14px; color: #6e6e73; }
.fp-vue.ko img { visibility: hidden; }
.fp-pts { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; min-height: 28px; padding: 0 10px; }
.fp-pts button { width: 22px; height: 28px; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.fp-pts button i { width: 7px; height: 7px; border-radius: 50%; background: rgba(60,60,67,.3); transition: all .25s; }
.fp-pts button[aria-current="true"] i { background: #1d1d1f; width: 18px; border-radius: 5px; }
.fp-compte { position: absolute; right: 12px; bottom: 34px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; pointer-events: none; }
.fp-fl { position: absolute; top: calc(50% - 22px); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); box-shadow: 0 2px 10px rgba(0,0,0,.2); cursor: pointer; font-size: 20px; color: #1d1d1f; display: none; place-items: center; padding: 0; }
.fp-fl.g { left: 10px; } .fp-fl.d { right: 10px; }
.fp-fl[disabled] { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .fp-fl { display: grid; } }
.fp-vide { aspect-ratio: 16/9; display: grid; place-items: center; color: #6e6e73; font-size: 14px; text-align: center; padding: 0 24px; }

/* texte et choix */
.fp-titre { margin: 4px 0 6px; font-size: 21px; line-height: 1.22; letter-spacing: -.015em; font-weight: 700; padding-right: 0; }
.fp-prix { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 2px; }
.fp-prix.sans { font-size: 17px; }
.fp-mention { font-size: 12.5px; color: #6e6e73; margin: 0 0 8px; }
.fp-mention:empty { display: none; }
.fp-dispo { font-size: 14px; font-weight: 600; margin: 8px 0 12px; color: #1b7a3a; }
.fp-dispo.non { color: #b42318; }
.fp-groupe { margin: 14px 0 0; border: 0; padding: 0; min-width: 0; }
.fp-groupe legend { font-size: 13px; color: #6e6e73; padding: 0; margin: 0 0 4px; }
.fp-groupe legend b { color: #1d1d1f; font-weight: 600; }
.fp-choix { display: flex; flex-wrap: wrap; gap: 0 8px; }
.fp-sw { width: 44px; height: 44px; border: 0; background: transparent; padding: 0; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.fp-sw span { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); display: block; transition: box-shadow .15s; }
.fp-sw[aria-pressed="true"] span { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 3px #fff, 0 0 0 5px #1d1d1f; }
.fp-pil { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: #f2f2f4; color: #1d1d1f; font: 600 14.5px/1 inherit; font-family: inherit; cursor: pointer; margin: 0 0 8px; box-shadow: inset 0 0 0 1px transparent; }
.fp-pil[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 2px #1d1d1f; }
.fp-extrait { font-size: 14.5px; line-height: 1.5; color: #3a3a3c; margin: 14px 0 14px; }
.fp-extrait:empty { display: none; }

/* bouton principal collé en bas de la zone de défilement */
.fp-pied { flex: none; }
.fp-pied:empty { display: none; }
.fp-achat { padding: 10px 20px 10px; background: #fff; box-shadow: 0 -1px 0 rgba(0,0,0,.08); }
.fp-btn { display: grid; place-items: center; width: 100%; min-height: 52px; border-radius: 999px; border: 0; background: #8f1f2b; color: #fff; font: 700 17px/1 inherit; font-family: inherit; cursor: pointer; text-decoration: none; padding: 0 22px; text-align: center; -webkit-tap-highlight-color: transparent; transition: transform .15s, background .2s; }
.fp-btn:active { transform: scale(.985); }
.fp-btn[disabled], .fp-btn[aria-disabled="true"] { background: #d1d1d6; color: #6e6e73; cursor: default; }
.fp-btn.ok { background: #1b7a3a; }
.fp-btn.contour { background: #fff; color: #1d1d1f; box-shadow: inset 0 0 0 1.5px #1d1d1f; }
.fp-etat { min-height: 0; font-size: 14px; margin: 8px 0 0; text-align: center; color: #1b7a3a; font-weight: 600; }
.fp-etat:empty { display: none; }
.fp-etat button { border: 0; background: transparent; color: #8f1f2b; font: 700 14px/1 inherit; font-family: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 8px; }
.fp-lien { display: flex; align-items: center; justify-content: center; min-height: 48px; font-size: 16px; font-weight: 600; color: #8f1f2b; text-decoration: none; margin: 2px 20px 0; border-radius: 14px; }
.fp-lien:hover { text-decoration: underline; }
.fp-note { font-size: 12px; color: #6e6e73; margin: 6px 20px 22px; text-align: center; line-height: 1.45; }

/* panier */
.fp-chip { position: fixed; z-index: 40; right: max(12px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 2px 12px rgba(0,0,0,.25); -webkit-tap-highlight-color: transparent; }
.fp-chip.fond-clair { background: rgba(255,255,255,.92); color: #1d1d1f; box-shadow: 0 2px 12px rgba(0,0,0,.18); }
.fp-chip svg { width: 22px; height: 22px; display: block; }
.fp-chip b { position: absolute; right: -2px; top: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #8f1f2b; color: #fff; font: 700 12px/20px -apple-system, system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.fp-chip b[hidden] { display: none; }
.fp-chip.pop b { animation: fp-pop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes fp-pop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
body.mode-film .mention { right: 68px; }
.fp-t2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.02em; font-weight: 700; padding: 0 20px; }
.fp-lignes { list-style: none; margin: 8px 0 0; padding: 0 20px; }
.fp-ligne { display: grid; grid-template-columns: 72px 1fr; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid #e5e5ea; }
.fp-ligne img { width: 72px; height: 72px; object-fit: contain; background: #f5f5f7; border-radius: 12px; grid-row: span 2; }
.fp-ligne .t { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.fp-ligne .d { font-size: 12.5px; color: #6e6e73; margin-top: 2px; }
.fp-ligne .bas { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fp-qte { display: inline-flex; align-items: center; border-radius: 999px; background: #f2f2f4; }
.fp-qte button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 22px; cursor: pointer; border-radius: 50%; color: #1d1d1f; padding: 0; }
.fp-qte button[disabled] { opacity: .3; cursor: default; }
.fp-qte output { min-width: 26px; text-align: center; font-weight: 700; font-size: 16px; }
.fp-ligne .pl { font-weight: 700; font-size: 16px; }
.fp-retire { border: 0; background: transparent; color: #8f1f2b; font: 600 14px/1 inherit; font-family: inherit; min-height: 44px; padding: 0 6px; cursor: pointer; text-decoration: underline; }
.fp-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 20px 2px; font-size: 17px; }
.fp-total b { font-size: 26px; letter-spacing: -.02em; }
.fp-aide { font-size: 12.5px; color: #6e6e73; line-height: 1.45; margin: 2px 20px 6px; }
.fp-aide.ok { color: #1b7a3a; font-weight: 600; }
.fp-vider { display: block; margin: 0 auto 22px; border: 0; background: transparent; color: #6e6e73; font: 500 14px/1 inherit; font-family: inherit; min-height: 44px; padding: 0 12px; cursor: pointer; text-decoration: underline; }
.fp-vide-panier { text-align: center; padding: 26px 24px 8px; color: #3a3a3c; font-size: 15.5px; line-height: 1.5; }
.fp-vide-panier .fp-btn { margin-top: 16px; }

@media (min-width: 700px) { .fp-feuille { border-radius: 28px 28px 0 0; } .fp-vue { max-height: 42dvh; } }
@media (prefers-reduced-motion: reduce) { .fp-fond, .fp-feuille, .fp-pts button i, .fp-btn { transition: none; } .fp-chip.pop b { animation: none; } .fp-piste { scroll-behavior: auto; } }
/* la ligne de marque passe à gauche de la pastille panier (elle se replie sur 2 lignes au lieu de passer dessous) */
body.mode-film .marque { max-width: calc(100% - 20px - 68px); }

/* vignette 3D, description, caractéristiques, même rayon */
.fp-3d { background: radial-gradient(120% 90% at 50% 35%, #3a3d44, #17181b); color: #fff; }
.fp-3d-go { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; display: grid; place-content: center; justify-items: center; gap: 6px; -webkit-tap-highlight-color: transparent; }
.fp-3d-go[hidden] { display: none; }
.fp-3d-cube { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 36px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.fp-3d-go b { font-size: 22px; letter-spacing: -.01em; }
.fp-3d-go small { font-size: 14px; opacity: .8; }
.fp-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.fp-3d-leg { position: absolute; left: 12px; bottom: 10px; font-size: 12px; background: rgba(0,0,0,.5); color: #fff; padding: 3px 9px; border-radius: 999px; pointer-events: none; }
.fp-3d-msg { position: absolute; left: 0; right: 0; top: 14px; text-align: center; font-size: 14px; padding: 0 20px; pointer-events: none; }
.fp-3d-x { position: absolute; left: 10px; top: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(255,255,255,.92); color: #1d1d1f; font: 600 14px/1 inherit; font-family: inherit; cursor: pointer; }
.fp-3d-x[hidden] { display: none; }
.fp-sec { margin: 22px 0 0; }
.fp-h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.01em; }
.fp-h4 { margin: 12px 0 4px; font-size: 15px; }
.fp-p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; color: #3a3a3c; }
.fp-ul { margin: 0 0 10px; padding-left: 20px; font-size: 14.5px; line-height: 1.55; color: #3a3a3c; }
.fp-ul li { margin: 2px 0; }
.fp-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 16px; margin: 0; font-size: 14.5px; }
.fp-dl dt { color: #6e6e73; padding: 8px 0; border-bottom: 1px solid #e5e5ea; }
.fp-dl dd { margin: 0; padding: 8px 0; border-bottom: 1px solid #e5e5ea; font-weight: 600; }
.fp-liens { display: flex; flex-wrap: wrap; gap: 0 18px; }
.fp-liens a { display: inline-flex; align-items: center; min-height: 44px; color: #8f1f2b; font-weight: 600; font-size: 15px; }
.fp-rayon { margin-top: 26px; }
.fp-rayon .fp-h3 { margin-bottom: 10px; }
.fp-rang { list-style: none; margin: 0; padding: 0 20px 6px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 20px; scrollbar-width: none; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.fp-rang::-webkit-scrollbar { display: none; }
.fp-vign { flex: none; width: 150px; position: relative; scroll-snap-align: start; }
.fp-vign a { display: block; text-decoration: none; color: inherit; border-radius: 14px; }
.fp-vign img { width: 150px; height: 150px; object-fit: contain; background: #f5f5f7; border-radius: 14px; display: block; }
.fp-vign .tt { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; font-size: 13px; line-height: 1.3; margin: 6px 0 2px; height: 34px; }
.fp-vign b { font-size: 15px; display: block; padding-bottom: 4px; }
.fp-plus { position: absolute; right: 4px; top: 102px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #8f1f2b; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.fp-etat-r { padding: 0 20px; }

/* paiement direct (12/11) : « Payer maintenant » + ligne « Paiement rapide » (noms des moyens en texte, aucun faux bouton Apple Pay / Google Pay) */
.fp-btn { transition: transform .15s, background .25s, color .25s, box-shadow .25s; }
.fp-btn.contour[aria-disabled="true"] { background: #fff; color: #8e8e93; box-shadow: inset 0 0 0 1.5px #d1d1d6; cursor: default; }
.fp-achat .fp-payer { min-height: 48px; margin-top: 8px; font-size: 16px; }
.fp-rapide { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: #6e6e73; text-align: center; animation: fp-fondu .4s ease both; }
.fp-rapide-t { font-weight: 600; margin-right: 4px; }
.fp-rapide-l { display: inline; margin: 0; padding: 0; list-style: none; }
.fp-rapide-l li { display: inline; }
.fp-rapide-l li + li::before { content: " · "; }
.fp-payer-bloc .fp-rapide { margin-bottom: 4px; }
@keyframes fp-fondu { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fp-rapide { animation: none; } .fp-btn { transition: none; } }