/* =========================================================
   Configurateur 3D — refonte 2026 (CGT Alkor)
   Scène iframe plein cadre + plein écran.
   Mobile-first. S'appuie sur refonte.css + content-pages.css.
   ========================================================= */

/* ---------- Hero ---------- */
.page-configurator .content-hero--cfg {
  min-height: clamp(280px, 46vw, 420px);
  padding-block: clamp(32px, 9vw, 72px) clamp(28px, 7vw, 56px);
}

.page-configurator .content-hero--cfg .content-hero-inner {
  width: 100%;
}

.page-configurator .content-hero--cfg .crumb {
  margin-bottom: clamp(14px, 3vw, 22px);
}

.page-configurator .cfg-head-text {
  max-width: 64ch;
}

.page-configurator .cfg-title {
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.02;
  margin: 10px 0 0;
  max-width: 16ch;
}

.page-configurator .cfg-lede {
  margin: 14px 0 0;
  max-width: 58ch;
  color: var(--text-2);
}

/* ---------- Scène ---------- */
.page-configurator .cfg-page {
  display: flex;
  flex-direction: column;
}

@media (min-width: 720px) {
  .page-configurator .cfg-page-hero {
    order: 1;
  }

  .page-configurator .cfg-page-stage {
    order: 2;
  }

  .page-configurator .cfg-page-hub {
    order: 3;
  }
}

.page-configurator .cfg-stage-wrap {
  padding-block: clamp(20px, 4vw, 32px) clamp(8px, 2vw, 16px);
}

.page-configurator .cfg-stage {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-1);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(14, 58, 102, 0.4), transparent 60%),
    var(--bg-deep);
  min-height: clamp(460px, 78vh, 760px);
}

.page-configurator .cfg-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page-configurator .cfg-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.page-configurator .cfg-fullscreen {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-2);
  background: rgba(4, 23, 48, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  cursor: pointer;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.page-configurator .cfg-fullscreen:hover {
  background: rgba(8, 44, 82, 0.85);
  border-color: rgba(97, 177, 188, 0.45);
  transform: translateY(-1px);
}

.page-configurator .cfg-fullscreen:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page-configurator .cfg-stage:fullscreen,
.page-configurator .cfg-stage:-webkit-full-screen {
  border-radius: 0;
  border: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- Mobile immersif (comportement proche master) ---------- */
@media (max-width: 719px) {
  .page-configurator {
    --cfg-shell-offset: calc(56px + env(safe-area-inset-top, 0px));
  }

  .page-configurator .cfg-page-hero,
  .page-configurator .cfg-page-hub,
  .page-configurator .footer {
    display: none;
  }

  .page-configurator #main-content {
    padding-bottom: 0;
  }

  .page-configurator .cfg-page-stage.container {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: 0;
    padding-block: 0;
  }

  .page-configurator .cfg-stage {
    min-height: max(89dvh, calc(100dvh - var(--cfg-shell-offset)));
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }

  .page-configurator .cfg-fullscreen {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
  }

  body.cfg-stage-fullscreen {
    overflow: hidden;
  }

  body.cfg-stage-fullscreen .header {
    opacity: 0;
    pointer-events: none;
  }

  .page-configurator .content-hero--cfg {
    min-height: clamp(240px, 58vw, 360px);
    padding-block: clamp(28px, 10vw, 56px) clamp(22px, 8vw, 40px);
  }

  .page-configurator .cfg-title {
    max-width: 100%;
    font-size: clamp(30px, 9vw, 44px);
    line-height: 1.04;
  }

  .page-configurator .cfg-lede {
    font-size: 15px;
    line-height: 1.6;
  }
}