/* ================================================================
   MOXIE HOME — Section « Configurateur BeFluo » (moxiehome/views/templates/sections/befluo.tpl)
   Le configurateur occupe tout l'écran sous le titre (maquette : .befluo-3d / .cf-lancer)
   ================================================================ */
.moxie-befluo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: calc(100vh - var(--moxie-home-entete));
  height: calc(100svh - var(--moxie-home-entete));
  min-height: 520px;
  max-height: none;
  max-width: 1320px;
  margin: 0 auto;
  padding-top: clamp(20px, 3vh, 40px);
  padding-bottom: clamp(8px, 1.2vh, 16px); /* iframe plus bas : sa barre « Ajouter au panier » (fixée en bas) descend d'autant */
}

.moxie-befluo__tete { flex: none; }
.moxie-befluo__surtitre {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 6px;
}
.moxie-befluo__titre {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: .95;
  text-transform: uppercase;
  color: #0a0a0a;
  margin: 0;
}

.moxie-befluo__ecran {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
.moxie-befluo__cadre,
.moxie-befluo__lancer {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 14px;
}
.moxie-befluo__cadre {
  display: block;
  background: #121214;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45);
}
.moxie-befluo__cadre[hidden],
.moxie-befluo__lancer[hidden] { display: none; }

.moxie-befluo__lancer {
  cursor: pointer;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: radial-gradient(60% 80% at 50% 40%, #6D3FD0 0%, #2a1460 45%, #0b0a18 100%);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45);
}
.moxie-befluo__lancer span {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  color: #432E7D;
  display: grid;
  place-items: center;
  font-size: 28px;
  padding-left: 5px;
  transition: transform .2s;
}
.moxie-befluo__lancer:hover span { transform: scale(1.08); }
.moxie-befluo__lancer b { font-size: 20px; }
.moxie-befluo__lancer small { color: #CFC8EE; font-size: 14px; }

@media (max-width: 767.98px) {
  .moxie-befluo { gap: 10px; padding-left: 12px; padding-right: 12px; }
  .moxie-befluo__cadre, .moxie-befluo__lancer { border-radius: 12px; }
  .moxie-befluo__lancer b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .moxie-befluo__lancer span { transition: none; }
}