/* k.dré — Immersive client experience
   La direction artistique vit dans les assets extraits du PSD.
   Ce fichier ne gère que la mise en scène : cadrage, empilement, contrôles. */

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

html, body { margin: 0; padding: 0; }
html { background: #fafafa; -webkit-text-size-adjust: 100%; }
body {
  background: #fafafa;
  color: #fff;
  font: 400 12px/1.4 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Scènes ---------- */
.scene {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg-top, #fff);
}
.scene::after { /* demi-bande basse pour les écrans non 16:9 */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  background: var(--bg-bottom, var(--bg-top, #fff));
  z-index: 0;
}
.scene .view {
  position: absolute; inset: 0;
  z-index: 1;
  will-change: transform;
}
.stage {
  position: absolute;
  left: 50%; top: 50%;
  transform-origin: 50% 50%;
  overflow: hidden;            /* le cadrage reste celui du PSD */
}
.cam {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
}
.stage img, .cam img {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.el { position: absolute; transform-origin: 50% 50%; }
.el > img { left: 0; top: 0; }
.line { position: absolute; overflow: hidden; }
.line > img { left: 0; top: 0; }
.win { position: absolute; overflow: hidden; }
.win > img { left: 0; top: 0; transform-origin: 50% 50%; }

/* ---------- Mode statique (mobile / mouvement réduit) ---------- */
html.is-static .scene { height: auto; }
html.is-static .scene .view { position: relative; inset: auto; }
html.is-static .stage { position: relative; left: 0; top: 0; transform-origin: 0 0; }

/* ---------- Chargement ---------- */
.veil {
  position: fixed; inset: 0; z-index: 100;
  background: #f2f2f2;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), visibility 0s linear .9s;
}
html.is-ready .veil { opacity: 0; visibility: hidden; }

/* ---------- Contrôles de présentation (discrets) ---------- */
.ui {
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none;
  mix-blend-mode: difference;
  color: #fff;
  opacity: 1;
  transition: opacity .6s ease;
}
html.ui-idle .ui, html.ui-hidden .ui { opacity: 0; }
html.ui-hidden .ui * { pointer-events: none !important; }

.ui-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(255,255,255,.12);
}
.ui-progress i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: rgba(255,255,255,.7);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.ui-dots {
  position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px;
  margin: 0; padding: 0; list-style: none;
}
.ui-dots button {
  pointer-events: auto;
  position: relative;
  display: block;
  width: 14px; height: 14px; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.ui-dots button::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transition: transform .4s ease, background .4s ease;
}
.ui-dots button[aria-current="true"]::before { background: #fff; transform: scale(1.5); }
.ui-dots button span {
  position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transition: opacity .3s ease;
}
.ui-dots button:hover span,
.ui-dots button:focus-visible span { opacity: .85; }

.ui-tools {
  position: absolute; right: 16px; bottom: 14px;
  display: flex; gap: 6px;
}
.ui-tools button {
  pointer-events: auto;
  width: 28px; height: 28px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: rgba(255,255,255,.55);
  display: grid; place-items: center;
  transition: color .3s ease;
}
.ui-tools button:hover, .ui-tools button:focus-visible { color: #fff; }
.ui-tools svg { width: 14px; height: 14px; display: block; }

.ui-help {
  position: absolute; left: 50%; bottom: 22px;
  transform: translateX(-50%);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
  opacity: 0; transition: opacity .5s ease;
}
html.help-on .ui-help { opacity: 1; }

button:focus { outline: none; }
button:focus-visible { outline: 1px solid rgba(255,255,255,.6); outline-offset: 2px; }

html.is-static .ui-dots, html.is-static .ui-help { display: none; }

@media (max-width: 767px) {
  .ui-dots { right: 8px; }
  .ui-tools { display: none; }
}