/* ============================================================
   Alb's Events — Section "Comment ça marche"
   Style thelma.pet : scroll pinné, typo display massive,
   mises en page alternées, maquettes UI réalistes,
   barre de progression verticale. Animations : GSAP (scrubbing).
   Police : Satoshi (Black dispo). Accent : #e28e2a
   ============================================================ */

.hiw {
  --hiw-ink:    #15140f;
  --hiw-ink-2:  #6a655c;
  --hiw-accent: #e28e2a;
  --hiw-cream:  #faf5ec;
  --hiw-line:   rgba(21,18,12,0.10);
  --hiw-ease:   cubic-bezier(0.16,1,0.3,1);

  position: relative;
  height: 500vh;                         /* longueur de défilement = 4 plans */
  background:
    radial-gradient(130% 60% at 78% 8%, #f7ead9 0%, rgba(247,234,217,0) 55%),
    radial-gradient(120% 55% at 10% 95%, #f3e7e2 0%, rgba(243,231,226,0) 55%),
    #f3efe7;
  font-family: 'Satoshi', 'Satoshi Variable', sans-serif;
}

/* Scène figée */
.hiw-inner {
  position: sticky; top: 0;
  height: 100vh; min-height: 600px;
  display: flex; align-items: center;
  padding: clamp(7rem, 13vh, 9rem) clamp(1.5rem, 6vw, 5.5rem) clamp(3rem, 6vh, 4.5rem);
  overflow: hidden;
}
.hiw-stage { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; height: 100%; }

/* Un plan = un panneau plein écran empilé */
.hiw-step {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  opacity: 0; visibility: hidden;        /* piloté par GSAP (autoAlpha) */
}
.hiw-step:first-child { opacity: 1; visibility: visible; }   /* fallback sans JS */

/* Alternance gauche / droite */
.hiw-text   { grid-column: 1; grid-row: 1; }
.hiw-visual { grid-column: 2; grid-row: 1; }
.hiw-step:nth-child(even) .hiw-text   { grid-column: 2; text-align: right; }
.hiw-step:nth-child(even) .hiw-visual { grid-column: 1; }

/* Typo display */
.hiw-kicker {
  display: block; margin-bottom: clamp(0.9rem, 2vh, 1.5rem);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--hiw-accent);
}
.hiw-h {
  margin: 0; font-weight: 900;
  font-size: clamp(2.5rem, 6.2vw, 5.4rem); line-height: 0.92; letter-spacing: -0.045em;
  color: var(--hiw-ink); text-wrap: balance;
}
.hiw-h em { font-style: italic; color: var(--hiw-accent); }
.hiw-p {
  font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.5; color: var(--hiw-ink-2);
  margin: clamp(1.1rem, 2.5vh, 1.8rem) 0 0; max-width: 34ch;
}
.hiw-step:nth-child(even) .hiw-p { margin-left: auto; }
.hiw-link {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.4rem;
  font-size: 0.95rem; font-weight: 700; color: var(--hiw-ink); text-decoration: none;
  transition: gap 0.25s var(--hiw-ease), color 0.25s;
}
.hiw-link svg { width: 1.05rem; height: 1.05rem; }
.hiw-link:hover { color: var(--hiw-accent); gap: 0.7rem; }
.hiw-step:nth-child(even) .hiw-link { flex-direction: row-reverse; }

/* Colonne visuelle */
.hiw-visual { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; }

/* base carte/maquette */
.mock {
  position: relative; background: #fff; border: 1px solid var(--hiw-line);
  border-radius: 1.25rem; box-shadow: 0 32px 70px -24px rgba(21,18,12,0.32);
}

/* — Étape 1 : fenêtre app (configurateur 3D) — */
.mock-app { width: min(460px, 100%); overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 0.7rem 0.9rem; background: #faf8f4; border-bottom: 1px solid var(--hiw-line); }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e3ded4; }
.mock-bar i:first-child { background: #f0b6a0; } .mock-bar i:nth-child(2){ background:#f3d9a6; } .mock-bar i:nth-child(3){ background:#bcd9b6; }
.mock-url { margin-left: 0.6rem; font-size: 0.72rem; color: var(--hiw-ink-2); font-weight: 500; }
.mock-screen { position: relative; aspect-ratio: 16 / 12.5; background: #0d0f17; overflow: hidden; display: flex; }

/* — Scène 3D (gauche) — */
.mock-stage { position: relative; flex: 1.35; overflow: hidden; background: #15161c; }
.ms-render { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 30%; display: block; }
.mock-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,15,23,0.05) 0%, rgba(13,15,23,0.15) 55%, rgba(13,15,23,0.65) 100%);
}

.mock-chips { position: absolute; left: 0.85rem; bottom: 0.85rem; display: flex; gap: 0.4rem; z-index: 1; }
.mc { font-size: 0.7rem; font-weight: 600; color: #fff; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(6px); padding: 0.28rem 0.6rem; border-radius: 999px; }
.mc.on { background: var(--hiw-accent); border-color: var(--hiw-accent); }
.mock-toast {
  position: absolute; left: 0.85rem; top: 0.85rem; display: flex; align-items: center; gap: 0.4rem; z-index: 1;
  background: #fff; color: var(--hiw-ink); font-size: 0.74rem; font-weight: 700;
  padding: 0.4rem 0.65rem; border-radius: 0.6rem; box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}
.mock-toast svg { width: 0.95rem; height: 0.95rem; color: var(--hiw-accent); }
.mock-cursor { position: absolute; left: 68%; top: 52%; width: 1.4rem; height: 1.4rem; color: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); z-index: 1; }

/* — Panneau produits (droite) — */
.mock-cart { flex: 1; background: #fff; padding: 0.9rem 0.85rem; display: flex; flex-direction: column; gap: 0.55rem; }
.mcart-row { padding-bottom: 0.55rem; border-bottom: 1px solid var(--hiw-line); }
.mcart-row-top { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.78rem; }
.mcart-row-top b { color: var(--hiw-ink); font-weight: 700; }
.mcart-row-top span { color: var(--hiw-accent); font-weight: 700; white-space: nowrap; }
.mcart-row-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 0.3rem; }
.mcart-row-bottom small { font-size: 0.68rem; color: var(--hiw-ink-2); }
.mcart-qty { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 700; color: var(--hiw-ink); background: var(--hiw-cream); border-radius: 999px; padding: 0.15rem 0.5rem; }
.mcart-qty i { font-style: normal; color: var(--hiw-ink-2); }
.mcart-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--hiw-line); font-size: 0.8rem; }
.mcart-total span { color: var(--hiw-ink-2); font-weight: 600; }
.mcart-total b { font-size: 1.1rem; font-weight: 900; color: var(--hiw-accent); letter-spacing: -0.02em; }
.mcart-cta { text-align: center; background: var(--hiw-ink); color: #fff; font-weight: 700; font-size: 0.74rem; padding: 0.55rem; border-radius: 0.55rem; }

/* — Étape 2 : carte commande — */
.mock-order { width: min(430px, 100%); padding: 1.4rem 1.5rem 1.5rem; text-align: left; }
.mo-head { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--hiw-line); }
.mo-check { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #2e7d52; display: flex; align-items: center; justify-content: center; }
.mo-check svg { width: 1.3rem; height: 1.3rem; color: #fff; }
.mo-head strong { display: block; font-size: 1.05rem; font-weight: 700; color: var(--hiw-ink); }
.mo-head small { font-size: 0.78rem; color: var(--hiw-ink-2); }
.mo-rows { padding: 1rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
.mo-row { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--hiw-ink-2); }
.mo-row b { color: var(--hiw-ink); font-weight: 700; }
.mo-dates { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--hiw-ink-2); padding: 0.7rem 0; border-top: 1px dashed var(--hiw-line); }
.mo-dates svg { width: 1rem; height: 1rem; color: var(--hiw-accent); }
.mo-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.6rem; padding-top: 0.85rem; border-top: 1px solid var(--hiw-line); }
.mo-total span { font-weight: 600; color: var(--hiw-ink); } .mo-total b { font-size: 1.4rem; font-weight: 900; color: var(--hiw-accent); letter-spacing: -0.02em; }

/* — Étape 3 : carte livraison — */
.mock-ship { width: min(430px, 100%); padding: 1.4rem 1.5rem 1.5rem; text-align: left; }
.ms-toggle { display: inline-flex; background: var(--hiw-cream); border: 1px solid var(--hiw-line); border-radius: 999px; padding: 0.22rem; margin-bottom: 1.7rem; }
.ms-toggle span { font-size: 0.8rem; font-weight: 700; color: var(--hiw-ink-2); padding: 0.35rem 0.9rem; border-radius: 999px; }
.ms-toggle .on { background: var(--hiw-ink); color: #fff; }
.ms-route { position: relative; display: flex; align-items: center; height: 2.5rem; margin: 0 0.3rem 1.4rem; }
.ms-line { position: absolute; left: 0.5rem; right: 0.5rem; height: 3px; background: repeating-linear-gradient(90deg, var(--hiw-line) 0 7px, transparent 7px 13px); }
.ms-dot { position: relative; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--hiw-ink); z-index: 1; }
.ms-pin { position: absolute; right: 0; color: var(--hiw-accent); z-index: 1; } .ms-pin svg { width: 1.5rem; height: 1.5rem; }
.ms-van { position: absolute; left: 38%; z-index: 1; background: #fff; padding: 0 0.2rem; color: var(--hiw-ink); } .ms-van svg { width: 2rem; height: 1.4rem; }
.ms-info { display: flex; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px dashed var(--hiw-line); }
.ms-info small { display: block; font-size: 0.72rem; color: var(--hiw-ink-2); } .ms-info b { font-size: 0.95rem; color: var(--hiw-ink); } .ms-info .r { text-align: right; }
.ms-eta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--hiw-ink); }
.ms-eta svg { width: 1rem; height: 1rem; color: var(--hiw-accent); }

/* — Étape 4 : scène encadrée + notice — */
.mock-scene { position: relative; width: min(460px, 100%); display: flex; justify-content: center; }
.mf-frame { margin: 0; padding: 0.7rem; background: linear-gradient(150deg, #2a2118, #4a3a28); border-radius: 0.5rem; box-shadow: 0 34px 70px -22px rgba(21,18,12,0.5); }
.mf-frame img { display: block; width: 100%; max-width: 360px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.2rem; border: 3px solid #c9a35e; }
.mf-note {
  position: absolute; right: -1.2rem; bottom: -1.4rem; width: 11rem;
  background: #fff; border: 1px solid var(--hiw-line); border-radius: 0.9rem; padding: 0.9rem 1rem;
  box-shadow: 0 16px 36px rgba(21,18,12,0.16);
}
.mf-badge { display: inline-block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hiw-accent); background: #fbedda; padding: 0.25rem 0.5rem; border-radius: 0.4rem; }
.mf-lines { display: flex; flex-direction: column; gap: 0.32rem; margin: 0.7rem 0 0.6rem; }
.mf-lines i { height: 0.42rem; border-radius: 0.21rem; background: var(--hiw-line); }
.mf-lines i:nth-child(1){ width: 100%; } .mf-lines i:nth-child(2){ width: 80%; } .mf-lines i:nth-child(3){ width: 60%; }
.mf-note small { font-size: 0.74rem; color: var(--hiw-ink-2); font-weight: 600; }

/* Barre de progression verticale (droite) */
.hiw-progress {
  position: absolute; top: 16%; bottom: 16%; right: clamp(0.25rem, 1.5vw, 1rem);
  width: 3px; background: var(--hiw-line); border-radius: 3px; overflow: hidden;
}
.hiw-progress-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: linear-gradient(180deg, var(--hiw-accent), #f0a850); border-radius: 3px; }

/* anciennes classes SVG neutralisées (au cas où) */
.an-beam,.an-sweep,.an-float,.an-floatX,.an-spin,.an-wheel,.an-twinkle,.an-dot { animation: none; }

/* Mobile */
@media (max-width: 900px) {
  .hiw { height: 460vh; }
  .hiw-inner { padding: clamp(6rem,11vh,7.5rem) 1.4rem clamp(2.5rem,5vh,3.5rem); }
  .hiw-step,
  .hiw-text,
  .hiw-visual,
  .hiw-step:nth-child(even) .hiw-text,
  .hiw-step:nth-child(even) .hiw-visual { grid-template-columns: 1fr; grid-column: 1; }
  .hiw-step { gap: 1.6rem; align-content: center; justify-items: center; text-align: center; grid-template-rows: auto auto; }
  .hiw-text { grid-row: 2; text-align: center; }
  .hiw-step:nth-child(even) .hiw-text { text-align: center; }
  .hiw-visual { grid-row: 1; }
  .hiw-p, .hiw-step:nth-child(even) .hiw-p { margin-left: auto; margin-right: auto; }
  .hiw-step:nth-child(even) .hiw-link { flex-direction: row; }
  .hiw-h { font-size: clamp(2.2rem, 9vw, 3.4rem); }
  .mock-app, .mock-order, .mock-ship, .mock-scene { width: min(340px, 86vw); }
  .mf-note { right: -0.5rem; bottom: -1rem; width: 9rem; }
  .hiw-progress { display: none; }
}