/* ═══════════════════════════════════════════════════════
   KOLBENZ — Page d'attente v7
   ────────────────────────────────────────────────────
   Stratégie : Poster fixe 430×764 px, scalé par JS
   (viewBox SVG source = 4500×8000, scale = 430/4500)

   Couches (z-index) :
     1 → poster.svg   : fond vectoriel (logo, titre, note, Instagram)
     2 → hero-wheel   : PNG RGBA transparence native
     3 → form-block   : formulaire HTML interactif
     3 → ig-link      : zone de tap Instagram
═══════════════════════════════════════════════════════ */


/* ─── Fonts ──────────────────────────────────────────── */

@font-face {
  font-family: 'Placard-Cn-Bold';
  src: url('/assets/fonts/PlacardNextCnBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Placard-Bold';
  src: url('/assets/fonts/PlacardNextBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ─── Reset ──────────────────────────────────────────── */

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


/* ─── Fond extérieur ─────────────────────────────────── */

html {
  background: #f9f9f9;
  width: 100%;
  height: 100%;
}


/* ═══════════════════════════════════════════════════════
   POSTER — 430 × 764 px
   JS applique translate + scale depuis transform-origin 0 0
═══════════════════════════════════════════════════════ */

body {
  position: fixed;
  top: 0;
  left: 0;
  width:  430px;
  height: 764px;
  transform-origin: 0 0;
  overflow: hidden;
  background: #f9f9f9;
}


/* ─── Accessibilité ──────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.bot-trap {
  display: none;
  visibility: hidden;
}


/* ─── ① Poster SVG — couche vectorielle de base ──────── */

.poster-bg {
  position: absolute;
  top:    0;
  left:   0;
  width:  430px;
  height: 764px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  z-index: 1;
}


/* ─── ② Roue PNG RGBA ────────────────────────────────── */
/* HERO.png = 3000×4500 RGBA.                                    */
/* Dans le SVG source : roue = 344px large, left=43px, top=205px */
/* → même dimensions ici : width=344px left=43px top=205px       */
/* → height = 344 × (4500/3000) = 516px — identique au SVG      */

.hero-wheel {
  position: absolute;
  top:  205px;
  left:  43px;
  width:  344px;
  height: auto;           /* ratio préservé → 516 px */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  z-index: 2;
}


/* ─── Voile anti-doublon SVG ─────────────────────────── */
/* Le SVG poster-bg rend le formulaire, la note et l'icône   */
/* Instagram en couche 1. La roue (z-index 2) ne couvre que  */
/* jusqu'à y≈607. En dessous, les éléments SVG restent        */
/* visibles et se superposent aux HTML → effet de doublon.    */
/* Ce voile #f9f9f9 couvre y=607→700 pour les effacer.       */

.bottom-cover {
  position: absolute;
  top:    607px;
  left:     0;
  width:  430px;
  height:  95px;   /* couvre 607→702, laisse l'icône Instagram (y≈706) */
  background: #f9f9f9;
  pointer-events: none;
  z-index: 2;
}


/* ─── ③ Formulaire interactif ────────────────────────── */
/* Position exacte du pill SVG (scale = 430/4500 = 0.09556)     */
/* x=984.918 → 94px  y=6698.98 → 640px  w total=239px h=24px   */

.form-block {
  position: absolute;
  top:  640px;
  left:  94px;
  width: 239px;
  z-index: 3;
}

.form-row {
  width: 100%;
  height: 24px;
  display: flex;
  align-items: stretch;   /* le bouton prend toute la hauteur */
  background: #d9d9d9;
  border-radius: 100px;
  padding: 0 2px 0 11px; /* 2px right pour inset du bouton */
  gap: 0;
}

input[type="email"] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Placard-Bold', 'Arial Narrow', Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  color: #000;
  min-width: 0;
  line-height: 1;
  padding: 0;
}

input[type="email"]::placeholder {
  color: rgba(0, 0, 0, 0.38);
}

input[type="email"]:focus::placeholder {
  color: transparent;
}

button[type="submit"] {
  /* SVG : bouton = 860 unités / total pill 2503 = 34% → 82px */
  flex-shrink: 0;
  width: 82px;
  background: #000;
  color: #fff;
  font-family: 'Placard-Bold', 'Arial Narrow', Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: none;
  border-radius: 100px;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: opacity 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

button[type="submit"]:hover  { opacity: 0.80; }
button[type="submit"]:active { opacity: 0.60; }

/* Succès */
.form-success {
  font-family: 'Placard-Bold', 'Arial Narrow', Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  color: #000;
  text-align: center;
  letter-spacing: 0.03em;
  opacity: 0;
  animation: k-fade-in 0.5s ease 0.1s forwards;
}

@keyframes k-fade-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0);   }
}


/* ─── Note sous le formulaire ───────────────────────── */
/* SVG y ≈ 7032-7100 → display y ≈ 672-679px, centré          */

.form-note {
  position: absolute;
  top:    671px;
  left:     0;
  width:  430px;
  text-align: center;
  font-family: 'Placard-Bold', 'Arial Narrow', Arial, sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.03em;
  pointer-events: none;
  z-index: 3;
}


/* ─── ④ Lien Instagram ───────────────────────────────── */
/* Centre icône dans SVG : x≈215px y≈714px                      */
/* Zone de tap : 40×40 px centrée                               */

.ig-link {
  position: absolute;
  top:  694px;   /* 714 - 20 */
  left: 195px;   /* 215 - 20 */
  width:  40px;
  height: 40px;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.ig-link:hover { opacity: 0.50; }