/* ==========================================================================
   dropyourkey — coque de la démonstration 3D
   Charte identique au site : #06070b / #2e6bff / argent.
   ATTENTION — deux règles sont FONCTIONNELLES, pas décoratives :
   1. `#webgl canvas { width:100%; height:100% }` : le moteur appelle
      setSize(w, h, false) donc il ne touche JAMAIS au style du canvas.
      Sans cette règle, le canvas s'affiche à sa taille intrinsèque × DPR.
   2. `#config { position: absolute }` : le configurateur lit sa propre
      position calculée pour décider s'il s'ouvre déplié (dans le flux) ou
      replié (flottant fixe). Absolute => déplié d'office, ce qu'on veut ici.
   Aucun backdrop-filter, aucun mix-blend-mode au-dessus du canvas.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg: #06070b;
  --surface: #0b0e15;
  --raised: #10141d;
  --ink: #eef1f7;
  --muted: #98a1b3;
  --accent: #2e6bff;
  --accent-soft: #6f9dff;
  --line: rgba(238, 241, 247, 0.1);
  --line-strong: rgba(238, 241, 247, 0.3);
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

/* ---------------- Scène ---------------- */

.stage {
  position: fixed;
  inset: 0;
}

/* FONCTIONNEL — voir l'en-tête. */
.stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

/* ---------------- Rideau de chargement ---------------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.loader-in {
  display: flex;
  width: min(340px, 72vw);
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loader-mark {
  width: 168px;
  height: auto;
  opacity: 0.92;
}

.loader-num {
  font-family: var(--mono);
  font-size: clamp(40px, 9vw, 72px);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
}

.loader-num sup {
  margin-left: 3px;
  font-size: 0.3em;
  color: var(--muted);
  vertical-align: super;
}

.loader-bar {
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.loader-fill {
  width: 0%;
  height: 100%;
  background: var(--accent);
}

.loader-txt {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ---------------- Bandeau haut ---------------- */

.hud {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(16px, 3vw, 36px);
  pointer-events: none;
}

.hud > * {
  pointer-events: auto;
}

.hud-mark {
  display: block;
  height: 26px;
  width: auto;
  opacity: 0.95;
}

.hud-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tag {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent-soft);
  text-transform: uppercase;
  background: rgba(11, 14, 21, 0.72);
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  background: rgba(11, 14, 21, 0.72);
  transition: border-color 0.25s ease, transform 0.25s var(--ease);
}

.btn-back:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: #2456cf;
  transition: background-color 0.25s ease, transform 0.25s var(--ease);
}

.btn-cta:hover {
  background: var(--accent);
  transform: translateY(-1px);
}

/* ---------------- Indice de manipulation ---------------- */

.drag-hint {
  position: fixed;
  z-index: 15;
  bottom: clamp(22px, 4vh, 34px);
  left: clamp(16px, 3vw, 36px);
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  pointer-events: none;
}

.drag-hint svg {
  width: 16px;
  height: 16px;
}

/* ---------------- Configurateur ---------------- */

/* FONCTIONNEL — `position: absolute` (pas `fixed`) fait démarrer le panneau
   DÉPLIÉ : configurator.js lit getComputedStyle(config).position. */
.config {
  position: absolute;
  z-index: 25;
  right: clamp(16px, 3vw, 36px);
  bottom: clamp(20px, 4vh, 34px);
  width: min(330px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(11, 14, 21, 0.9);
}

.config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
}

.config-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-transform: uppercase;
}

/* Bouton généré par configurator.js — ne pas l'écrire dans le HTML. */
.config-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding-left: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}

.config-toggle:hover {
  color: var(--ink);
}

.config-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.35s var(--ease);
}

.config.is-collapsed .config-toggle svg {
  transform: rotate(180deg);
}

.config-body {
  padding: 14px 15px 16px;
}

.config-row + .config-row {
  margin-top: 14px;
}

.config.is-collapsed .config-row-finish,
.config.is-collapsed .config-row-caliper {
  display: none;
}

.config-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
}

.config-label b {
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.swatches {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}

/* La variable --c est posée par configurator.js sur chaque pastille. */
.sw {
  position: relative;
  aspect-ratio: 1;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: var(--c);
  transition: transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
}

.sw:hover {
  transform: scale(1.16);
}

.sw[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(46, 107, 255, 0.32);
}

.sw.is-chrome {
  background: linear-gradient(135deg, #e8ecef 0%, #8d949c 30%, #f2f5f7 52%, #6f767e 74%, #dfe4e8 100%);
}

.sw.is-iri {
  background: linear-gradient(120deg, #7ce7ff, #c08cff 45%, #ffd06e);
}

.segs {
  display: flex;
  gap: 5px;
}

.seg {
  flex: 1;
  min-height: 38px;
  padding: 9px 4px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.seg:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.seg[aria-pressed="true"] {
  color: #fff;
  background: #2456cf;
  border-color: #2456cf;
}

.config-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 15px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.26);
}

.config-price {
  min-width: 0;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.config-price b {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

.config-price .dim {
  display: block;
  color: var(--accent-soft);
}

.config-foot .seg {
  flex: none;
  padding: 9px 14px;
}

/* ---------------- Mobile ---------------- */

@media (max-width: 720px) {
  .config {
    /* `fixed` et non `absolute` : c'est FONCTIONNEL. Le configurateur lit sa
       propre position calculée pour décider s'il s'ouvre déplié (dans le flux)
       ou replié (flottant). Déplié, il mangeait la moitié de la hauteur de
       l'écran et la voiture passait derrière ; replié, il ne montre que le
       film et le bouton PPF, et le bouton « Options » ouvre le reste. */
    position: fixed;
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
  }

  .swatches {
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
  }

  .drag-hint {
    display: none;
  }

  .hud {
    padding: 12px 14px;
  }

  .hud-mark {
    height: 22px;
  }

  .tag {
    display: none;
  }
}

@media (max-width: 420px) {
  .btn-back span {
    display: none;
  }
}

/* ---------------- Mouvement réduit ---------------- */

@media (prefers-reduced-motion: reduce) {
  .sw,
  .seg,
  .btn-back,
  .btn-cta,
  .config-toggle svg {
    transition: none;
  }
}