/* ================================================================
   MOXIE HOME — Section « Powerbank 10 000 mAh » (moxiehome/views/templates/sections/powerbank.tpl)
   Reprise de pub-powerbank.html (.pb, préfixe pb-), confinée à #moxie-powerbank.
   Police système de la pub, fond clair, bouton bleu ; tailles inchangées. Photos : ../../img/powerbank/.
   La scène est en container-type: size : elle a TOUJOURS une hauteur explicite (jamais height: auto),
   sinon elle s'écrase à 0 et tout disparaît (cf. Rabbit, 9a0874fa).
   ================================================================ */
#moxie-powerbank *, #moxie-powerbank *::before, #moxie-powerbank *::after { box-sizing: border-box; }
/* base commune .moxie-home-section neutralisée : la pub garde ses propres marges et sa hauteur */
#moxie-powerbank { min-height: 0; max-height: none; overflow: visible; line-height: normal; }
/* pleine largeur, d'un bord à l'autre de l'écran, même dans un conteneur limité du thème
   (body a déjà overflow-x: hidden ; clip en plus : rien ne dépasse de la section) */
#moxie-powerbank { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); overflow-x: clip; }
#moxie-powerbank [hidden] { display: none !important; }
#moxie-powerbank h2, #moxie-powerbank h3 { font-family: inherit; color: inherit; text-transform: none; }
#moxie-powerbank img { max-width: none; }

/* ---------- Pub Powerbank 10 000 mAh : courte, claire, percutante — uniquement les vraies photos ---------- */
#moxie-powerbank { --encre: #1d1d1f; --gris: #6e6e73; --fond: #fbfbfd;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--fond); color: var(--encre); padding: 0 0 40px; -webkit-font-smoothing: antialiased; }
/* toute la largeur ; hauteur 16/9 bornée à l'écran : l'animation (en cqw/cqh) suit la taille de la scène */
#moxie-powerbank .pb-scene { position: relative; width: 100%; height: min(56.25vw, 86svh); overflow: hidden; background: var(--fond); container-type: size; }
/* les photos de studio, fondues dans un fond de leur couleur : elles paraissent plein cadre */
#moxie-powerbank .pb-studio { position: absolute; inset: 0; opacity: 0; }
#moxie-powerbank .pb-studio img { position: absolute; left: 50%; top: 54%; height: 116cqh; aspect-ratio: 1; translate: -50% -50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); }
/* la vraie batterie, détourée ; son écran affiche la charge en direct */
#moxie-powerbank .pb-produit { position: absolute; left: 50%; top: 56%; height: 78cqh; aspect-ratio: 1; translate: -50% -50%; opacity: 0; }
#moxie-powerbank .pb-produit canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#moxie-powerbank .pb-produit .pb-base { filter: drop-shadow(0 3cqh 4cqh rgba(40,60,100,.22)); }
#moxie-powerbank .pb-texte { position: absolute; z-index: 3; left: 0; right: 0; top: 7cqh; text-align: center; padding-inline: 6cqw; opacity: 0; pointer-events: none; }
#moxie-powerbank .pb-texte h2, #moxie-powerbank .pb-texte h3 { margin: 0; font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; }
#moxie-powerbank .pb-texte h2 { font-size: clamp(44px, 12cqmin, 124px); }
#moxie-powerbank .pb-texte h3 { font-size: clamp(32px, 8cqmin, 80px); }
#moxie-powerbank .pb-texte p { margin: .45em 0 0; font-size: clamp(17px, 3.4cqmin, 28px); font-weight: 500; letter-spacing: -0.01em; color: var(--gris); }
/* le « 22,5 W » géant qui claque */
#moxie-powerbank .pb-geant { position: absolute; z-index: 3; left: 6cqw; top: 50%; translate: 0 -50%; opacity: 0; pointer-events: none; transform-origin: 0 50%; }
#moxie-powerbank .pb-geant b { display: block; font-size: clamp(70px, 26cqmin, 260px); font-weight: 700; letter-spacing: -0.06em; line-height: .88; color: #fff; text-shadow: 0 1cqmin 4cqmin rgba(60,30,110,.25); }
#moxie-powerbank .pb-geant span { display: block; margin-top: .3em; font-size: clamp(18px, 4cqmin, 36px); font-weight: 600; color: rgba(255,255,255,.92); }
#moxie-powerbank .pb-couleur { position: absolute; z-index: 3; left: 0; right: 0; top: 7cqh; text-align: center; font-size: clamp(32px, 8cqmin, 80px); font-weight: 600; letter-spacing: -0.035em; opacity: 0; pointer-events: none; }

/* sous la scène : couleur, prix, achat */
#moxie-powerbank .pb-achat { max-width: 980px; margin: 22px auto 0; padding-inline: 16px; display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
#moxie-powerbank .pb-couleurs { display: flex; align-items: center; gap: 12px; }
#moxie-powerbank .pb-couleurs button { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .2s; }
#moxie-powerbank .pb-couleurs button[aria-pressed="true"] { outline-color: #0071e3; }
#moxie-powerbank .pb-couleurs span { font-size: 14px; color: var(--gris); min-width: 6.5em; }
#moxie-powerbank .pb-achat-prix { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
/* le bouton d'achat commun (.moxie-home-achat), habillé comme celui de la pub */
#moxie-powerbank .pb-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 0; background: #0071e3; color: #fff; font-family: inherit; font-size: 17px; font-weight: 500; line-height: 1.2; cursor: pointer; }
#moxie-powerbank .pb-btn:hover, #moxie-powerbank .pb-btn.is-ajoute { background: #0077ed; color: #fff; }
#moxie-powerbank .pb-btn.is-erreur { background: #d63a12; color: #fff; }
#moxie-powerbank .moxie-home-achat.is-indisponible { min-height: 44px; font-family: inherit; font-size: 17px; font-weight: 500; line-height: 1.2; }
#moxie-powerbank .pb-lien { color: #0066cc; font-size: 17px; text-decoration: none; }
#moxie-powerbank .pb-lien:hover { text-decoration: underline; }
@media (max-width: 760px) {
  #moxie-powerbank .pb-scene { height: 125vw; }
  #moxie-powerbank .pb-studio img { top: 60%; height: auto; width: 122cqw; }
  #moxie-powerbank .pb-produit { height: auto; width: 100cqw; top: 60%; }
  #moxie-powerbank .pb-geant { left: 0; right: 0; top: 9cqh; translate: none; text-align: center; transform-origin: 50% 0; }
  #moxie-powerbank .pb-achat { gap: 14px; }
}