/* ================================================================
   BTN-PIXEL — Bouton pixel art 3D
   Nodes Figma : 1554-523 (Default) · 1570-584 (Hover)

   Structure DOM (gauche → droite) :
     left-001  → .btn-pixel__outer   2px × 52px, solid black, +4px top → encoche
     left-002  → .btn-pixel__mid     2px × 60px, padding:2px 0 → marche coin
                   [bd 4px][hl 2px][gd flex][hl 2px][sh 6px][bd 4px]
     left-003  → .btn-pixel__inner   2px × 60px, no padding
                   [bd 4px][hl 2px][gd flex][hl 2px][sh 6px][bd 4px]
     main      → .btn-pixel__body    flex-col
                   [bd 2px][hl 2px][center flex: label+icon][hl 2px][sh 6px][bd 2px]
     right-003 → .btn-pixel__inner   (idem left-003)
     right-002 → .btn-pixel__mid     py-2px, remplissage CRÈME (pas d'or, pas de corner-beads)
                   [bd 4px][cr flex][sh 6px][bd 4px]
     right-001 → .btn-pixel__outer   (idem left-001)

   Couleurs (Figma design tokens) :
     purple-700 / black : #1a0f26
     orange-100 / light : #fff3da
     orange-300 / gold  : #ffd793
     orange-700 / shade : #fe9e3a

   Hover  → .bp-sh 6px → 2px  +  padding-bottom 4px  (touche enfoncée)
   Active → .bp-sh 6px → 0px  +  padding-bottom 6px  (pression max)
================================================================ */

/* ── Variables locales ────────────────────────────────────────── */
.btn-pixel {
  --bp-h:     60px;
  --bp-step:   4px;    /* décalage outer → encoche coin */
  --bp-black: #1a0f26;
  --bp-light: #fff3da;
  --bp-gold:  #ffd793;
  --bp-shade: #fe9e3a;
}

/* ── Conteneur ────────────────────────────────────────────────── */
.btn-pixel {
  display:             inline-flex;
  align-items:         stretch;
  height:              var(--bp-h);
  text-decoration:     none;
  cursor:              pointer;
  user-select:         none;
  -webkit-user-select: none;
  transition:          padding-top 60ms linear;
}

/* ── Bords gauche/droit (wrapper 3 strips) ────────────────────── */
.btn-pixel__side {
  display:        flex;
  flex-direction: row;
  align-items:    stretch;
  flex-shrink:    0;
}

/* ── left-001 / right-001 : outer, 2px, hauteur = parent − 2×4px
   100% s'adapte dynamiquement à la hauteur utile du conteneur
   (60px default → 52px visible | 56px hover → 48px visible)       ── */
.btn-pixel__outer {
  flex-shrink: 0;
  width:       2px;
  height:      calc(100% - 2 * var(--bp-step)); /* adaptatif */
  background:  var(--bp-black);
  align-self:  flex-start;
  margin-top:  var(--bp-step);
}

/* ── left-002 / right-002 : mid, 2px
   Pas de hauteur fixe → flex stretch s'adapte au conteneur parent
   padding 2px en haut et en bas → zone vide = marche de coin step-2 ── */
.btn-pixel__mid {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  flex-shrink:    0;
  width:          2px;
  /* height: auto — stretch via align-items:stretch du parent */
  padding:        2px 0; /* ← les 2px vides créent la marche supplémentaire */
}

/* ── left-003 / right-003 : inner, 2px, sans padding
   Pas de hauteur fixe → flex stretch s'adapte au conteneur parent  ── */
.btn-pixel__inner {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  flex-shrink:    0;
  width:          2px;
  /* height: auto — stretch via align-items:stretch du parent */
}

/* ─────────────────────────────────────────────────────────────────
   Blocs couleur dans les strips verticaux (mid + inner)
   ───────────────────────────────────────────────────────────────── */

/* bp-bd : Stroket — bande noire, 4px haute */
.btn-pixel__mid  > .bp-bd,
.btn-pixel__inner > .bp-bd {
  flex-shrink: 0;
  width:       2px;
  height:      4px;
  background:  var(--bp-black);
}

/* bp-hl : Corner — highlight crème, 2px haute (left-002 / inner seulement) */
.btn-pixel__mid  > .bp-hl,
.btn-pixel__inner > .bp-hl {
  flex-shrink: 0;
  width:       2px;
  height:      2px;
  background:  var(--bp-light);
}

/* bp-gd : red-500 — remplissage or, flex (left-002 + left-003 + right-003) */
.btn-pixel__mid  > .bp-gd,
.btn-pixel__inner > .bp-gd {
  flex:       1 0 0;
  min-height: 1px;
  width:      2px;
  background: var(--bp-gold);
}

/* bp-cr : Corner — remplissage crème, flex (right-002 uniquement, pas de corner-beads) */
.btn-pixel__mid > .bp-cr {
  flex:       1 0 0;
  min-height: 1px;
  width:      2px;
  background: var(--bp-light);
}

/* bp-sh : 3D — ombre de profondeur, 6px haute par défaut (→ 2px hover, 0px active) */
.btn-pixel__mid  > .bp-sh,
.btn-pixel__inner > .bp-sh {
  flex-shrink: 0;
  width:       2px;
  height:      6px;
  background:  var(--bp-shade);
  transition:  height 60ms linear;
}

/* ── Corps central (main) ─────────────────────────────────────── */
.btn-pixel__body {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  min-width:      0;
}

/* Bandes horizontales du corps */
.btn-pixel__body > .bp-bd {
  flex-shrink: 0;
  height:      2px;
  background:  var(--bp-black);
}

.btn-pixel__body > .bp-hl {
  flex-shrink: 0;
  height:      2px;
  background:  var(--bp-light);
}

.btn-pixel__body > .bp-sh {
  flex-shrink: 0;
  height:      6px;
  background:  var(--bp-shade);
  transition:  height 60ms linear;
}

/* ── Zone centrale : label + chevron, fond or flex ────────────── */
.btn-pixel__center {
  flex:        1 0 0;
  min-height:  1px;
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     0 16px;
  background:  var(--bp-gold);
}

/* ── Label ────────────────────────────────────────────────────── */
.btn-pixel__label {
  font-family:    var(--font-mono); /* VCR OSD Mono */
  font-size:      16px;
  font-weight:    400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height:    1;
  color:          var(--bp-black);
  white-space:    nowrap;
}

/* ── Icône chevron ────────────────────────────────────────────── */
.btn-pixel__icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  color:       var(--bp-black);
}

/* ── Variante Cyan (Figma 1575-724) ─────────────────────────── */
.btn-pixel--cyan {
  --bp-light: #f0fffd;
  --bp-gold:  #c2e4ff;
  --bp-shade: #3a8cfe;
}

/* ── Variante Violet (Figma 1575-922) ───────────────────────── */
.btn-pixel--violet {
  --bp-light: #edecff;   /* purple-50  */
  --bp-gold:  #d4c2ff;   /* purple-100 */
  --bp-shade: #7b3dee;   /* purple-700 */
}

/* ── Hover : touche enfoncée pixel-art (Figma 1570-584)
   • padding-bottom 4px → contenu glisse vers le bas
   • .bp-sh  6px → 2px → profondeur 3D réduite (illusion de pression)
   ─────────────────────────────────────────────────────────────── */
.btn-pixel:hover {
  padding-top: 4px;
}

.btn-pixel:hover .bp-sh {
  height: 2px;
}

/* ── Active : pression maximale (ombre 3D → 0px = surface plate) ─ */
.btn-pixel:active {
  padding-top: 6px;
}

.btn-pixel:active .bp-sh {
  height: 0;
}