/* Cumulus — page Boutique (/boutique/), 15/10/2026.
   S'ajoute a /v2/site.css (memes couleurs, memes polices).
   Animations : transform et opacity seulement, coupees si prefers-reduced-motion.
   16/10 : objets 3D qui tournent (WEBP animes poses sur l'affiche sans l'objet), halo, flottement, etincelles, emblemes des
   titres, noms en degrade, inclinaison 3D au survol, apparition des cartes au defilement, etoiles filantes (fin du fichier). */

html, body { overflow-x: clip; }
html:has(dialog[open]) { overflow: hidden; }

/* ---------------------------------------------------------------- haut de page : ciel du soir anime */
.b-heros { position: relative; overflow: hidden; color: var(--blanc); text-align: center; padding: 128px 0 104px;
  background: linear-gradient(180deg, #141838 0%, #262c63 26%, #5b4fc4 56%, #c97ac9 78%, #ff9fb0 90%, #ffb48f 100%); }
.b-ciel { position: absolute; inset: 0; pointer-events: none; }
.b-etoile { position: absolute; left: var(--x); top: var(--y); width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%; background: #fff;
  box-shadow: 0 0 8px 1px rgba(255, 255, 255, .75); opacity: .5; animation: b-scintille var(--t, 3s) ease-in-out var(--d, 0s) infinite; }
.b-etoile.grande { --s: 12px; border-radius: 0; box-shadow: none; background: #fff6d6;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
@keyframes b-scintille { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }

.b-nuage { position: absolute; left: var(--x); top: var(--y); width: var(--l, 260px); height: auto; color: #fff; opacity: var(--o, .5);
  animation: b-derive var(--t, 60s) ease-in-out var(--d, 0s) infinite alternate; }
@keyframes b-derive { from { transform: translateX(-6vw); } to { transform: translateX(6vw); } }

.b-heros-contenu { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; }
.b-heros-contenu > * { animation: b-fondu .9s cubic-bezier(.2, .7, .3, 1) backwards; }
.b-heros-contenu > :nth-child(2) { animation-delay: .12s; }
.b-heros-contenu > :nth-child(3) { animation-delay: .24s; }
.b-heros-contenu > :nth-child(4) { animation-delay: .36s; }
@keyframes b-fondu { from { opacity: 0; transform: translateY(14px); } }
.b-heros .sur-titre { color: var(--menthe-2); margin: 0; }
.b-heros h1 { font-size: clamp(38px, 8vw, 66px); font-weight: 700; text-shadow: 0 6px 30px rgba(10, 12, 40, .45); }
.b-promesse { font: 600 clamp(15px, 2.4vw, 19px)/1.5 var(--display); color: rgba(255, 255, 255, .95); max-width: 40ch; }
.b-promesse span { white-space: nowrap; }

/* bandeau promo qui brille */
.b-promo { margin-top: 6px; }
/* 16/10 : la place du bandeau est toujours gardee (il apparait apres la lecture du catalogue : plus de decalage de la page, CLS) */
.b-promo[hidden] { display: block; visibility: hidden; }
.b-promo span { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px;
  background: linear-gradient(90deg, #ffcc3d, #ffe07a 50%, #ffcc3d); color: var(--encre); font: 700 17px var(--display);
  box-shadow: 0 12px 30px -12px rgba(255, 186, 30, .95), 0 0 0 4px rgba(255, 204, 61, .25); }
.b-promo span::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-130%) skewX(-20deg); animation: b-balaye 3.6s ease-in-out 1s infinite; }
@keyframes b-balaye { 0%, 55% { transform: translateX(-130%) skewX(-20deg); } 100% { transform: translateX(330%) skewX(-20deg); } }

/* ---------------------------------------------------------------- corps de page */
.b-corps { padding: 34px 0 90px; }

/* retour de paiement (merci / annule) */
.b-retour { position: relative; overflow: hidden; border-radius: 22px; padding: 26px 22px; margin-bottom: 26px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.b-retour[hidden] { display: none; }
.b-pseudo + .b-retour { margin-top: 22px; }
.b-retour h2 { font-size: clamp(26px, 5vw, 36px); }
.b-retour p { max-width: 56ch; }
.b-retour.merci { background: linear-gradient(160deg, #2a2e70 0%, #6b5bd6 55%, #ff8fb6 100%); color: #fff; box-shadow: var(--ombre); animation: b-pop .6s cubic-bezier(.2, .9, .3, 1.2) backwards; }
.b-retour.merci p { color: rgba(255, 255, 255, .92); }
.b-retour.annule { background: var(--blanc); border: 1px solid var(--trait); }
.b-retour.annule p { color: var(--doux); }
.b-retour .icone { font-size: 40px; line-height: 1; }
.b-retour .fermer-retour { margin-top: 8px; }
@keyframes b-pop { from { opacity: 0; transform: scale(.94); } }

/* pseudo */
.b-pseudo { position: relative; z-index: 3; background: var(--blanc); border-radius: 22px; padding: 20px; box-shadow: var(--ombre); border: 1px solid var(--trait);
  display: grid; gap: 10px; max-width: 640px; margin: -70px auto 0; }
.b-pseudo label { font: 700 19px var(--display); }
.b-pseudo-ligne { display: flex; gap: 10px; }
.b-pseudo input { flex: 1; min-width: 0; font: 600 18px var(--corps); color: var(--encre); padding: 13px 16px; border-radius: 14px; border: 2px solid var(--trait); background: var(--creme); }
.b-pseudo input:focus { outline: none; border-color: var(--lavande); background: #fff; }
.b-pseudo.ok .b-pseudo-ligne input { border-color: var(--menthe); }
.b-pseudo.ko .b-pseudo-ligne input { border-color: #ff6f9e; }
.b-pseudo .btn { flex: none; min-height: 52px; justify-content: center; }
.b-pseudo-aide { font-size: 15px; color: var(--doux); }
.b-pseudo.ok .b-pseudo-aide { color: #1c8a64; font-weight: 700; }
.b-pseudo.ko .b-pseudo-aide { color: #d6336c; font-weight: 700; }
.b-pseudo.secoue { animation: b-secoue .45s ease; }
@keyframes b-secoue { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* code createur (16/10) : un seul par achat, sous le pseudo */
.b-code { display: grid; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--trait); }
.b-pseudo .b-code label { font: 700 16px var(--display); }
.b-code label span { font: 500 14px var(--corps); color: var(--doux); }
.b-pseudo .b-code input { font-size: 17px; padding: 11px 16px; letter-spacing: .06em; text-transform: uppercase; }
.b-pseudo .b-code input::placeholder { letter-spacing: 0; text-transform: none; }
.b-code.ok input { border-color: var(--menthe); }
.b-code.ko input { border-color: #ff6f9e; }
.b-code-aide { font-size: 14.5px; color: var(--doux); }
.b-code.ok .b-code-aide { color: #1c8a64; font-weight: 700; }
.b-code.ko .b-code-aide { color: #d6336c; font-weight: 700; }
.b-code.verif .b-code-aide { font-style: italic; }

/* raccourcis vers les categories */
.b-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 30px 0 6px; }
.b-categories a { text-decoration: none; font: 600 15px var(--display); padding: 9px 16px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--trait); color: var(--encre);
  transition: transform .15s ease, background .15s ease; }
.b-categories a:hover { transform: translateY(-2px); background: var(--creme-2); }

/* une categorie */
.b-groupe { margin-top: 54px; scroll-margin-top: 90px; }
.b-groupe-tete { margin-bottom: 20px; }
.b-groupe h2 { font-size: clamp(26px, 4vw, 36px); }
.b-groupe-tete p { margin-top: 8px; color: var(--doux); max-width: 70ch; }

/* ---------------------------------------------------------------- cartes */
.b-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.b-carte { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 20px; overflow: hidden; color: var(--blanc);
  background: linear-gradient(180deg, var(--nuit-3), var(--nuit)); border: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--ombre);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease, border-color .28s ease; }
/* apparition en cascade quand la carte arrive a l'ecran (boutique.js : b-attente -> b-vue) */
.b-carte.b-attente { opacity: 0; }
.b-carte.b-vue { animation: b-cascade .75s cubic-bezier(.2, .7, .3, 1) var(--delai, 0ms) backwards; }
@keyframes b-cascade { from { opacity: 0; transform: perspective(1100px) translateY(34px) rotateX(9deg) scale(.96); } }

.b-image { position: relative; aspect-ratio: 1000 / 1316; overflow: hidden; background: var(--nuit-2); }
.b-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-image.repli img:not(.b-fond) { object-fit: contain; }
.b-image .b-fond { filter: blur(22px) saturate(1.25) brightness(.8); transform: scale(1.25); }
.b-image.vide { background: radial-gradient(circle at 50% 35%, #3a3f8a, var(--nuit-2)); }
.b-reflet { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform .9s ease; }
.b-remise { position: absolute; z-index: 2; top: 10px; right: 10px; font: 700 14px var(--display); padding: 5px 11px; border-radius: 999px; background: #ff5f8f; color: #fff;
  box-shadow: 0 6px 16px -6px rgba(255, 60, 120, .9); }

.b-carte-corps { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.b-cat { font: 700 12px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--menthe); }
.b-carte h3 { font-size: 20px; overflow-wrap: anywhere; }
.b-resume { color: rgba(255, 255, 255, .76); font-size: 14.5px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.b-prix { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.b-prix b { font: 700 23px var(--display); color: var(--or); }
.b-prix s { font: 600 15px var(--display); color: rgba(255, 255, 255, .55); }
.b-actions { display: grid; gap: 8px; margin-top: 4px; }
.b-actions .btn { justify-content: center; min-height: 50px; width: 100%; }
.b-voir { min-height: 42px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); color: #fff; font: 600 15px var(--display); cursor: pointer;
  transition: background .15s ease, border-color .15s ease; }
.b-voir:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .55); }

@media (hover: hover) {
  .b-carte:hover { --ty: -7px; border-color: rgba(255, 255, 255, .32); box-shadow: 0 30px 60px -26px rgba(20, 24, 56, .8); }
  .b-carte:hover .b-reflet { transform: translateX(130%); }
}

/* categorie d'un seul article : carte en largeur (image a gauche) */
.b-grille.seul { grid-template-columns: minmax(0, 720px); }
.b-grille.seul .b-carte { flex-direction: row; }
.b-grille.seul .b-image { flex: none; width: 42%; max-width: 300px; aspect-ratio: 1000 / 1316; align-self: stretch; }
.b-grille.seul .b-carte-corps { padding: 22px 22px 22px; gap: 8px; }
.b-grille.seul .b-carte h3 { font-size: 24px; }
.b-grille.seul .b-resume { -webkit-line-clamp: 5; font-size: 15.5px; }
.b-grille.seul .b-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* bouton Acheter avec un eclat */
.b-acheter { position: relative; overflow: hidden; isolation: isolate; }
.b-acheter::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .9), transparent);
  transform: translateX(-140%) skewX(-20deg); animation: b-eclat 5s ease-in-out var(--eclat, 1.5s) infinite; }
@keyframes b-eclat { 0%, 72% { transform: translateX(-140%) skewX(-20deg); } 100% { transform: translateX(420%) skewX(-20deg); } }

/* chargement du catalogue (16/10 : la zone garde une grande hauteur jusqu'aux vraies cartes, pour que le bas de page ne saute pas) */
#b-catalogue { min-height: 130vh; }
#b-catalogue:has(.b-carte:not(.squelette)), #b-catalogue:has(.b-panne) { min-height: 0; }
.b-carte.squelette { animation: none; }
.b-carte.squelette .b-image, .b-carte.squelette .ligne { background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)); background-size: 200% 100%;
  animation: b-luit 1.4s linear infinite; }
.b-carte.squelette .ligne { height: 14px; border-radius: 7px; }
.b-carte.squelette .ligne.courte { width: 50%; }
@keyframes b-luit { to { background-position: -200% 0; } }

/* API en panne */
.b-panne { margin: 40px auto 0; max-width: 620px; text-align: center; background: var(--blanc); border: 1px solid var(--trait); border-radius: 22px; padding: 30px 22px; box-shadow: var(--ombre);
  display: grid; gap: 12px; justify-items: center; }
.b-panne .icone { font-size: 46px; line-height: 1; }
.b-panne h2 { font-size: clamp(24px, 4vw, 30px); }
.b-panne p { color: var(--doux); }
.b-panne .boutons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.b-panne .btn { min-height: 50px; justify-content: center; }

/* mentions de paiement */
.b-legal { margin-top: 60px; text-align: center; font-size: 14px; color: var(--doux); display: grid; gap: 6px; }
.b-legal a { color: #5b4bd6; }

/* ---------------------------------------------------------------- fenetres (details, achat) */
.b-fenetre { border: 0; padding: 0; border-radius: 24px; width: min(880px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain;
  background: var(--creme); color: var(--encre); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); }
.b-fenetre:focus, .b-fenetre:focus-visible { outline: none; }
.b-fenetre[open] { animation: b-ouvre .3s cubic-bezier(.2, .8, .3, 1); }
.b-fenetre::backdrop { background: rgba(10, 12, 32, .78); backdrop-filter: blur(4px); }
@keyframes b-ouvre { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.b-fermer { position: sticky; top: 10px; float: right; margin: 10px 10px -56px 0; z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(20, 24, 56, .72); color: #fff; font-size: 26px; line-height: 1; display: grid; place-items: center; }
.b-fermer:hover { background: rgba(20, 24, 56, .9); }

.b-details { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.b-details-visuel { background: radial-gradient(circle at 50% 30%, var(--nuit-3), var(--nuit)); display: grid; align-content: start; justify-items: center; }
.b-details-visuel .b-image { width: 100%; position: sticky; top: 0; }
.b-details-texte { padding: 26px 26px 28px; display: grid; gap: 10px; align-content: start; }
.b-details-texte .b-cat { color: #d6336c; }
.b-details-texte h2 { font-size: clamp(26px, 4vw, 34px); padding-right: 40px; }
.b-details .b-prix b { color: var(--encre); }
.b-details .b-prix s { color: var(--doux); }
.b-details .b-remise { position: static; align-self: center; }
.b-desc { color: #3a3e6a; font-size: 16px; display: grid; gap: 10px; overflow-wrap: anywhere; }
.b-desc p, .b-desc ul, .b-desc ol, .b-desc h3, .b-desc h4 { margin: 0; }
.b-desc ul, .b-desc ol { padding-left: 22px; }
.b-desc h3, .b-desc h4 { font-size: 19px; }
.b-desc a { color: #5b4bd6; }
.b-desc img { border-radius: 12px; }
.b-details .b-actions { grid-template-columns: minmax(0, 1fr); position: sticky; bottom: 0; z-index: 2; margin: 0 -6px -10px; padding: 18px 6px 10px;
  background: linear-gradient(180deg, rgba(255, 249, 242, 0), var(--creme) 28%); }
.b-pour { font-size: 14px; color: var(--doux); text-align: center; }
/* « Offrir a un joueur » (28/10) */
.b-offrir { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--blanc); border: 1px solid var(--trait); }
.b-offrir.ouvert { border-color: var(--lavande); }
.b-offrir-coche { display: flex; align-items: center; gap: 10px; font: 700 16px var(--display); cursor: pointer; min-height: 32px; }
.b-offrir-coche input { width: 20px; height: 20px; accent-color: #5b4bd6; flex: none; }
.b-offrir-pseudo { font: 600 17px var(--corps); color: var(--encre); padding: 11px 14px; border-radius: 12px; border: 2px solid var(--trait); background: var(--creme); width: 100%; min-width: 0; }
.b-offrir-pseudo:focus { outline: none; border-color: var(--lavande); background: #fff; }
.b-offrir.ko .b-offrir-pseudo { border-color: #ff6f9e; }
.b-offrir-aide { font-size: 14px; color: var(--doux); }
@media (max-width: 720px) {
  .b-details { grid-template-columns: minmax(0, 1fr); }
  .b-details-visuel { padding: 14px 0 0; }
  .b-details-visuel .b-image { position: relative; width: min(100% - 28px, 290px, 34dvh); border-radius: 14px; }
  .b-details-texte { padding: 20px 18px 22px; }
}

/* fenetre d'achat */
.b-fenetre.achat { width: min(470px, calc(100% - 24px)); }
.b-achat { padding: 30px 22px 26px; display: grid; gap: 12px; text-align: center; justify-items: center; }
.b-achat h2 { font-size: 24px; }
.b-achat .pour { color: var(--doux); }
.b-achat .pour b { color: var(--encre); }
.b-achat-code { font-size: 14.5px; font-weight: 700; color: #1c8a64; margin-top: -4px; }
.b-achat-code.ignore { color: #d6336c; }
.b-etapes .b-total s { color: var(--doux); font-weight: 600; }
.b-etapes .b-total b { color: #1c8a64; font-weight: 800; }
.b-etapes { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; justify-self: stretch; }
.b-etapes li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--trait); color: var(--doux); font-weight: 600; }
.b-etapes li::before { content: ""; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--trait); display: grid; place-items: center; font: 700 14px var(--display); }
.b-etapes li.en-cours { color: var(--encre); border-color: var(--lavande); }
.b-etapes li.en-cours::before { border-color: var(--lavande) var(--lavande) var(--lavande) transparent; animation: b-tourne .8s linear infinite; }
.b-etapes li.fait { color: var(--encre); }
.b-etapes li.fait::before { content: "✓"; border-color: var(--menthe); background: var(--menthe); color: var(--encre); }
.b-etapes li.erreur { color: #b0234f; border-color: #ffb3c9; }
.b-etapes li.erreur::before { content: "✕"; border-color: #ff6f9e; background: #ff6f9e; color: #fff; }
.b-erreur { background: #fff0f4; border: 1px solid #ffc2d3; color: #8a1d43; border-radius: 14px; padding: 12px 14px; font-weight: 600; justify-self: stretch; text-align: left; }
.b-erreur[hidden], .b-achat-boutons[hidden] { display: none; }
.b-achat-boutons { display: grid; gap: 10px; justify-self: stretch; }
.b-achat-boutons .btn { justify-content: center; min-height: 50px; }
.b-lien-secours { font-size: 14px; color: var(--doux); }
.b-lien-secours a { color: #5b4bd6; }

/* petite animation de chargement : un nuage et des etoiles en orbite */
.b-charge { position: relative; width: 92px; height: 92px; }
.b-charge svg { position: absolute; inset: 22px 14px; width: 64px; height: 48px; color: #fff; filter: drop-shadow(0 6px 12px rgba(91, 79, 196, .45)); animation: b-flotte 1.8s ease-in-out infinite; }
.b-charge .orbite { position: absolute; inset: 0; animation: b-tourne 1.6s linear infinite; }
.b-charge .orbite i { position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin-left: -6px; background: var(--or);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.b-charge .orbite.deux { animation-duration: 2.4s; animation-direction: reverse; }
.b-charge .orbite.deux i { top: auto; bottom: 4px; background: var(--rose); width: 9px; height: 9px; }
.b-charge-fond { position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(circle, #e9e4ff, #c8bfff 70%); }
.b-charge.arret .orbite, .b-charge.arret svg { animation: none; }
.b-charge.arret .orbite { opacity: 0; }
@keyframes b-tourne { to { transform: rotate(360deg); } }
@keyframes b-flotte { 50% { transform: translateY(-5px); } }

/* confettis et etoiles du merci */
.b-confettis { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.b-confettis i { position: absolute; top: 0; left: 0; width: 9px; height: 14px; border-radius: 2px; background: var(--c); opacity: 0;
  animation: b-chute var(--t) cubic-bezier(.25, .6, .45, 1) var(--d) forwards; }
.b-confettis i.etoile { width: 16px; height: 16px; border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes b-chute {
  0% { opacity: 1; transform: translate3d(var(--x), -30px, 0) rotate(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(calc(var(--x) + var(--dx)), 100vh, 0) rotate(var(--r)); }
}

/* ---------------------------------------------------------------- telephone */
@media (max-width: 620px) {
  .b-heros { padding: 112px 0 96px; }
  .b-pseudo { padding: 16px; margin-top: -64px; }
  .b-pseudo-ligne { flex-direction: column; }
  .b-pseudo .btn { width: 100%; }
  .b-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .b-carte { border-radius: 16px; }
  .b-carte-corps { padding: 11px 11px 12px; gap: 5px; }
  .b-carte h3 { font-size: 16.5px; }
  .b-resume { font-size: 13.5px; -webkit-line-clamp: 3; }
  .b-prix b { font-size: 20px; }
  .b-prix s { font-size: 13.5px; }
  .b-actions .btn { min-height: 48px; padding: 12px 10px; font-size: 16px; }
  .b-remise { top: 8px; right: 8px; font-size: 12.5px; padding: 4px 9px; }
  .b-cat { font-size: 11px; letter-spacing: .06em; }
  .b-groupe { margin-top: 44px; }
}
@media (max-width: 620px) {
  .b-grille.seul { grid-template-columns: minmax(0, 1fr); }
  .b-grille.seul .b-image { width: 44%; aspect-ratio: auto; }
  .b-grille.seul .b-carte-corps { padding: 12px 12px 13px; gap: 5px; }
  .b-grille.seul .b-carte h3 { font-size: 18px; }
  .b-grille.seul .b-resume { -webkit-line-clamp: 4; font-size: 13.5px; }
  .b-grille.seul .b-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 340px) { .b-grille { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- mouvement reduit */
@media (prefers-reduced-motion: reduce) {
  .b-heros *, .b-heros *::before, .b-heros *::after, .b-carte, .b-acheter::after, .b-retour, .b-fenetre[open], .b-pseudo.secoue, .b-charge *, .b-etapes li::before,
  .b-scene *, .b-scene *::before, .b-scene *::after, .b-nom-anime span {
    animation: none !important; }
  .b-carte, .b-reflet, .b-categories a, .b-acheter { transition: none !important; }
  .b-carte, .b-carte:hover { transform: none; }
  .b-carte.b-attente { opacity: 1; }
  .b-scene .b-etincelle, .b-filante, .b-lustre { display: none; }
  .b-confettis { display: none; }
}

/* ================================================================ 16/10 : boutique animee */

/* ---------------------------------------------------------------- objet 3D qui tourne, pose sur l'affiche sans l'objet */
.b-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: transform .35s cubic-bezier(.2, .7, .3, 1); }
.b-scene > * { position: absolute; }
/* l'affiche est en object-fit: cover : quand le cadre n'a pas ses proportions (carte seule sur telephone), la scene suit
   l'affiche telle qu'elle est affichee (unites de conteneur), pour que l'objet reste exactement a sa place */
@supports (width: 1cqw) {
  .b-image.anime { container-type: size; }
  .b-image.anime .b-scene { inset: auto; --l: max(100cqw, 100cqh * .7599); --h: max(100cqh, 100cqw * 1.316);
    width: var(--l); height: var(--h); left: calc((100cqw - var(--l)) / 2); top: calc((100cqh - var(--h)) / 2); }
}
.b-halo { aspect-ratio: 1; border-radius: 50%; opacity: .55;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 70%, #fff) 0%, color-mix(in srgb, var(--c) 45%, transparent) 38%, transparent 100%);
  animation: b-pulse 3.6s ease-in-out var(--d, 0s) infinite; }
@keyframes b-pulse { 0%, 100% { opacity: .38; transform: scale(.9); } 50% { opacity: .78; transform: scale(1.06); } }
.b-ombre { height: 3.2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(4, 4, 20, .62), transparent);
  animation: b-ombre 4.2s ease-in-out var(--d, 0s) infinite; }
@keyframes b-ombre { 50% { transform: scale(.82); opacity: .6; } }
.b-flotte { animation: b-flotte-objet 4.2s ease-in-out var(--d, 0s) infinite; will-change: transform; }
@keyframes b-flotte-objet { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.6%); } }
.b-image .b-objet { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }

/* etincelles et etoiles qui montent (la colonne est fixe, l'etoile monte de toute sa hauteur) */
.b-etincelle { width: 0; }
.b-etincelle i { position: absolute; left: 0; top: 0; width: 0; height: 100%; animation: b-monte var(--t, 3.6s) ease-in-out var(--d, 0s) infinite; will-change: transform, opacity; }
.b-etincelle i::after { content: ""; position: absolute; bottom: 0; left: calc(var(--s) / -2); width: var(--s); height: var(--s); background: var(--c, #fff);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 3px var(--c, #fff)); }
@keyframes b-monte {
  0% { transform: translateY(0) scale(.4); opacity: 0; }
  15% { opacity: 1; }
  70% { opacity: .9; }
  100% { transform: translateY(-100%) scale(1.05) rotate(90deg); opacity: 0; }
}

/* ---------------------------------------------------------------- titres : embleme qui pulse */
.b-embleme { aspect-ratio: 1; }
.b-embleme > span { position: absolute; inset: 0; border-radius: 50%; }
.b-aura { background: radial-gradient(closest-side, transparent 62%, color-mix(in srgb, var(--c) 75%, transparent) 76%, transparent 100%);
  animation: b-pulse 3.4s ease-in-out infinite; }
.b-onde { border: 2px solid color-mix(in srgb, var(--c) 70%, #fff); opacity: 0; animation: b-onde 3.6s cubic-bezier(.2, .6, .4, 1) infinite; }
.b-onde.deux { animation-delay: -1.8s; }
@keyframes b-onde { 0% { transform: scale(.94); opacity: .85; } 100% { transform: scale(1.32); opacity: 0; } }
.b-eclair { overflow: hidden; }
.b-eclair::after { content: ""; position: absolute; inset: -10% -60%; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .38) 50%, transparent 58%);
  transform: translateX(-60%); animation: b-eclair 5.2s ease-in-out 1s infinite; }
@keyframes b-eclair { 0%, 62% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }

/* nom du titre en degrade qui defile, avec un reflet */
.b-nom-anime span { background-image: linear-gradient(100deg, transparent 44%, rgba(255, 255, 255, .95) 50%, transparent 56%), linear-gradient(90deg, var(--deg));
  background-size: 300% 100%, 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .14)); animation: b-degrade 7s linear infinite; }
@keyframes b-degrade { from { background-position: 0% 0, 0% 0; } to { background-position: 150% 0, 200% 0; } }

/* pause hors ecran (boutique.js) : rien ne bouge tant que la carte n'est pas visible */
.b-pause *, .b-pause *::before, .b-pause *::after { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- survol : inclinaison 3D, reflet qui suit la souris, profondeur */
.b-lustre { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 28%, transparent 55%); }
.b-carte.b-incline { transition: transform .12s ease-out, box-shadow .28s ease, border-color .28s ease; }
.b-carte.b-incline .b-lustre { opacity: 1; }
.b-carte.b-incline .b-scene { transform: translate(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 10px)); transition: transform .12s ease-out; }

/* ---------------------------------------------------------------- bouton Acheter qui brille au survol */
.b-acheter { transition: transform .18s ease, box-shadow .25s ease, background .2s ease; }
@media (hover: hover) {
  .b-acheter:hover { background: linear-gradient(100deg, #ffcc3d, #ffe38a 50%, #ffcc3d);
    box-shadow: 0 0 0 3px rgba(255, 214, 92, .35), 0 12px 34px -8px rgba(255, 186, 30, 1), 0 0 26px -4px rgba(255, 214, 92, .9); }
  .b-acheter:hover::after { animation: b-eclat-vite 1.1s ease-in-out infinite; }
}
@keyframes b-eclat-vite { from { transform: translateX(-140%) skewX(-20deg); } to { transform: translateX(420%) skewX(-20deg); } }

/* ---------------------------------------------------------------- haut de page : etoiles filantes */
.b-filante { position: absolute; left: var(--x); top: var(--y); width: 130px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9)); transform: rotate(-24deg);
  animation: b-filante var(--t, 9s) ease-in var(--d, 0s) infinite; }
.b-filante::after { content: ""; position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px #fff6d6; }
@keyframes b-filante {
  0%, 88% { opacity: 0; transform: rotate(-24deg) translateX(0); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-24deg) translateX(320px); }
}

/* telephone : etincelles plus petites, flottement plus doux */
@media (max-width: 620px) {
  .b-etincelle i::after { width: calc(var(--s) * .7); height: calc(var(--s) * .7); }
  .b-filante { width: 80px; }
}

/* ---------------------------------------------------------------- panier (02/11) */
.b-actions-bas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.b-actions-bas .b-voir { padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-voir.b-ajout.dans { border-color: var(--menthe); background: rgba(95, 224, 181, .16); color: var(--menthe-2); }
.b-details .btn.b-ajout { background: var(--blanc); color: var(--encre); border: 2px solid var(--encre); box-shadow: none; }
.b-details .btn.b-ajout:hover { background: var(--creme-2); }
.b-details .btn.b-ajout.dans { border-color: #1c8a64; color: #1c8a64; }
.b-details .btn.b-ajout[hidden] { display: none; }

/* barre en bas de l'ecran */
.b-barre-panier { position: fixed; z-index: 40; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 10px 10px 10px 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(255, 204, 61, .55); background: var(--nuit); color: var(--blanc); font: 600 16px var(--display);
  box-shadow: 0 18px 40px -14px rgba(10, 12, 32, .8); animation: b-barre .35s cubic-bezier(.2, .9, .3, 1.2) backwards; }
.b-barre-panier[hidden] { display: none; }
.b-barre-panier:hover { background: var(--nuit-3); }
.b-barre-panier:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
.b-barre-icone { font-size: 20px; line-height: 1; }
.b-barre-texte { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.b-barre-texte b { color: var(--or); }
.b-barre-voir { flex: none; padding: 9px 16px; border-radius: 999px; background: var(--or); color: var(--encre); font-weight: 700; }
.b-barre-panier.rebond { animation: b-rebond .45s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes b-barre { from { opacity: 0; transform: translateY(24px); } }
@keyframes b-rebond { 40% { transform: scale(1.07); } }
body.avec-panier .pied { padding-bottom: 90px; }

/* fenetre du panier */
.b-fenetre.panier { width: min(560px, calc(100% - 24px)); }
.b-panier { padding: 28px 22px 24px; display: grid; gap: 14px; }
.b-panier h2 { font-size: 26px; padding-right: 48px; }
.b-panier-message { font-weight: 700; color: #d6336c; }
.b-panier-vide { color: var(--doux); }
.b-panier-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.b-panier-liste li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 40px; align-items: center; gap: 12px; padding: 8px; border-radius: 16px;
  background: var(--blanc); border: 1px solid var(--trait); }
.b-panier-img { width: 52px; height: 68px; object-fit: cover; border-radius: 10px; background: var(--nuit-2); display: block; }
.b-panier-nom { display: grid; gap: 2px; min-width: 0; }
.b-panier-nom b { font: 700 16px var(--display); overflow-wrap: anywhere; }
.b-panier-nom span { font-size: 13px; color: var(--doux); }
.b-panier-prix { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.b-panier-prix b { font: 700 16px var(--display); }
.b-panier-prix s { font-size: 13px; color: var(--doux); }
.b-retirer { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--trait); background: var(--creme); color: var(--doux); font-size: 22px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; }
.b-retirer:hover { background: #ffe3ec; border-color: #ff8fb6; color: #d6336c; }
.b-panier-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 6px 0; font: 700 18px var(--display); font-variant-numeric: tabular-nums; }
.b-panier-total s { font-size: 15px; color: var(--doux); font-weight: 600; }
.b-panier-total b { font-size: 24px; }
@media (max-width: 620px) {
  .b-actions-bas .b-voir { font-size: 14px; padding: 0 4px; }
  .b-barre-panier { font-size: 15px; padding: 8px 8px 8px 14px; gap: 8px; }
  .b-barre-voir { padding: 8px 12px; }
  .b-panier-liste li { grid-template-columns: 44px minmax(0, 1fr) auto 36px; gap: 9px; }
  .b-panier-img { width: 44px; height: 58px; }
  .b-retirer { width: 36px; height: 36px; }
}
@media (max-width: 380px) { .b-barre-voir { display: none; } }
@media (prefers-reduced-motion: reduce) { .b-barre-panier, .b-barre-panier.rebond { animation: none !important; } }