/* ============================================================
   WRAPPER GLOBAL + BACKGROUND
   Formulaire centré + scroll désactivé
============================================================ */

/* On s'assure que la page prend toute la hauteur
   et qu'il n'y a pas de scroll global */
html, body{
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* empêche le scroll de la page */
}

/* Wrapper plein écran */
.quote-wrapper{
  position: fixed;      /* occupe tout l'écran */
  inset: 0;             /* top:0; right:0; bottom:0; left:0; */

  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  isolation: isolate;
  z-index: 1;

  /* Perf: limite les repaints */
  contain: layout paint;
}

/* JS prêt → on autorise l'affichage */
.quote-wrapper.is-ready {
  visibility: visible;
}

/* Le form centre la carte active */
#quoteForm{
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  contain: layout paint;
}

/* BACKGROUND PHOTO + HALOS */
.quote-bg{
  position: fixed;
  inset: 0;
  z-index: -10;

  background-image: var(--current-step-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  filter: none;

  /* ⚠️ transition background-image = coûteux (repaint massif) */
  transition: background-image .7s ease-in-out;
}

.quote-bg::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(1200px 800px at 50% 35%,
      rgba(0,0,0,0.00),
      rgba(0,0,0,0.16) 70%,
      rgba(0,0,0,0.26) 100%);
}

.quote-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(1200px 520px at 50% -14%,
      rgba(255,255,255,0.14),
      transparent 60%),
    radial-gradient(900px 420px at 50% 114%,
      rgba(230,214,158,0.14),
      transparent 70%);
}

/* ============================================================
   ✅ PERF MODE MOBILE (Huawei-friendly)
   - évite fixed plein écran si possible
   - supprime halos lourds
   - supprime transition background-image
============================================================ */

@media (hover:none) and (pointer:coarse){
  /* Sur certains Android, fixed + zoom = repaints violents.
     On garde le wrapper fixed, mais on met le background en absolute
     et on coupe les effets lourds. */
  .quote-bg{
    position: absolute;
    inset: 0;
    z-index: -10;

    transition: none;
  }

  .quote-bg::before,
  .quote-bg::after{
    /* halos off = gros gain */
    display: none;
    content: none;
  }
}

/* ============================================================
   ✅ REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce){
  .quote-bg{
    transition: none !important;
  }
}