/* ================================================================
   how.css — Section "Comment lancer une partie ?"
   Figma node : 1281-1291
   Section outer : var(--cyan-50)
   Wrapper inner : var(--purple-900) — fond sombre principal
================================================================ */

/* ── Section ────────────────────────────────────────────────── */
.how {
  background: var(--cyan-50);
  position:   relative;
}

/* ── Wrapper — fond sombre + pattern ────────────────────────── */
/* heading → .ch__* (character.css) — vars ici */
.how .wrapper {
  background-color:    var(--purple-900);
  background-image:    url('../img/assets/background_pattern_purple.png');
  background-repeat:   repeat;
  background-position: 0 0;
  --ch-accent:         var(--gold-fill);
  --heading-color:     var(--text-on-dark);
}

/* ── Colonne skater (gauche) — 4/12 colonnes ────────────────── */
.how__skater-col {
  flex:                  4;
  max-width:             376px;
  aspect-ratio:          1 / 1;
  position:              sticky;
  top:                   calc(50vh - 130px); /* affiné par JS */
  background-image:      url('../img/assets/pascal.png');
  background-repeat:     no-repeat;
  background-position:   center bottom;
  background-size:       contain;
  image-rendering:       pixelated;
  image-rendering:       crisp-edges;
  animation:             how-glide 3s ease-in-out infinite;
}

@keyframes how-glide {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(10px); }
}

/* ── Colonne cartes (droite) — 8/12 colonnes ────────────────── */
.how__cards-col {
  flex:           8;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  overflow-x:     clip;
}

/* ═══════════════════════════════════════════════════════════════
   CARTE ÉTAPE — structure pixel-art bevel (Figma 1281-1420)
   Flex row : hc-bevel | hc-inner | hc-bevel--r
   Fond .how__card : purple-900 → visible dans les encoches
═══════════════════════════════════════════════════════════════ */

.how__card {
  display:        flex;
  flex-direction: row;
  align-items:    stretch;
  background:     var(--purple-900);

  /* Révélation au scroll — état initial */
  opacity:   0;
  transform: translateX(48px);
  transition: opacity  0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.how__card.is-visible {
  opacity:   1;
  transform: translateX(0);
}

/* ── Bevel container ─────────────────────────────────────────── */
.hc-bevel {
  display:        flex;
  flex-direction: row;
  align-items:    stretch;
  flex-shrink:    0;
}

.hc-bevel--r {
  flex-direction: row-reverse;
}

/* ── Strip XL : 4px, encoche 8px ────────────────────────────── */
.hc-xl {
  flex-shrink:    0;
  width:          4px;
  display:        flex;
  flex-direction: column;
  padding:        8px 0;
}

/* ── Strip BD : 4px, encoche 4px ────────────────────────────── */
.hc-bd {
  flex-shrink:    0;
  width:          4px;
  display:        flex;
  flex-direction: column;
  padding:        4px 0;
}

/* Remplissage strips — même couleur que hc-inner */
.hc-xl > span,
.hc-bd > span {
  flex:       1;
  background: var(--orange-50);
}

/* ── Zone contenu ────────────────────────────────────────────── */
.hc-inner {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            15px;
  padding:        16px 24px;
  background:     var(--orange-50);
  min-width:      0;
}

/* ═══════════════════════════════════════════════════════════════
   HEADING CARTE — puce + titre en flex-row (Figma 1281-1428)
   gap : 16px — items : center
═══════════════════════════════════════════════════════════════ */

.hc-heading {
  display:     flex;
  align-items: center;
  gap:         16px;
}

/* ═══════════════════════════════════════════════════════════════
   PUCE NUMÉRO (Figma 1281-1429)
   Flex row : border-left (2px py-2px) | center (32px) | border-right
   Tout en var(--gold-fill) #ffd793 — pas de fond sur .how__badge
═══════════════════════════════════════════════════════════════ */

.how__badge {
  display:     inline-flex;
  align-items: stretch;
  height:      40px;
  flex-shrink: 0;
}

/* ── Bords latéraux : 2px, py-2px, fill or ──────────────────── */
.hb-side {
  flex-shrink:    0;
  width:          2px;
  display:        flex;
  flex-direction: column;
  padding:        2px 0;
}

.hb-side > span {
  flex:       1;
  background: var(--gold-fill); /* #ffd794 */
}

/* ── Centre : 32px, fond or, texte Raw Pixel ─────────────────── */
.hb-center {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  padding:         0 4px;
  background:      var(--gold-fill);
  font-family:     var(--font-heading);
  font-size:       16px;
  font-weight:     400;
  line-height:     1;
  color:           var(--purple-900);
  text-transform:  uppercase;
  letter-spacing:  1.28px;
  white-space:     nowrap;
}

/* ── Titre de la carte ───────────────────────────────────────── */
.how__card-title {
  font-family: var(--font-heading);
  font-size:   var(--text-h3);   /* 32px */
  line-height: var(--lh-heading);
  font-weight: 400;
  color:       var(--orange-700); /* #fe9e3a */
  white-space: nowrap;
}

/* ── Corps texte ─────────────────────────────────────────────── */
.how__card-body {
  font-family: var(--font-body);
  font-size:   var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.65;
  color:       var(--black-insight);
}

/* ── Connecteur pixel (Figma 1281-1455) ──────────────────────── */
.how__connector {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  padding:        16px 34px;
}

.how__dot {
  display:    block;
  flex-shrink: 0;
  width:      4px;
  height:     4px;
  background: var(--gold-fill); /* #ffd793 */
  opacity:    0;
  transform:  scale(0);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.how__dot.is-on {
  opacity:   1;
  transform: scale(1);
}

/* ── CTA ─────────────────────────────────────────────────────── */
.how__cta {
  display:         flex;
  justify-content: center;
}

/* ── Responsive — Tablette ≤ 1024px ─────────────────────────── */
@media (max-width: 1024px) {
  .how__skater-col { flex: 0 0 200px; }
}

/* ── Responsive — Mobile ≤ 768px ────────────────────────────── */
@media (max-width: 768px) {
  .how .wrapper    { flex-direction: column; gap: 24px; }
  .how__skater-col {
    flex:      none;
    width:     160px;
    position:  relative;
    top:       auto;
    animation: none;
  }
  .hc-inner        { padding: 12px 16px; }
  .how__card-title { font-size: var(--text-h4); white-space: normal; }
}