/* =================================================================
   ICP — "Quel joueur êtes-vous ?"

   Comportement hover en deux temps simultanés :
     1. Portrait monte + déborde au-dessus de la carte (translateY)
     2. Panel info s'étend vers le haut (height 88px → 290px)

   Clés structurelles :
     - .icp__card           : overflow visible (laisse le portrait déborder)
     - .icp__card-inner     : PAS d'overflow:hidden (idem)
     - .icp__portrait       : overflow:hidden SUR LUI-MÊME (clippe l'image
                              dans son propre cadre) ; peut déborder card-inner
     - .icp__info           : overflow:hidden pour clipper le contenu extra
                              en état compact

   Variables couleur scoped par modificateur de personnage :
     --c-main       : bandes latérales + fond carte
     --c-light      : fond panel info
     --c-btn-bg     : fond bouton CHOISIR
     --c-btn-hi     : highlight bevel bouton
     --c-btn-shadow : shadow bevel bouton
     --c-btn-text   : texte bouton
================================================================= */

/* ─────────────────────────────────────────
   SECTION
───────────────────────────────────────── */
.icp {
  position:        relative;
  background:      var(--purple-950); /* #11051d — Figma exact */
  overflow:        hidden;
  --ch-accent:     var(--gold-fill);
  --heading-color: var(--text-on-dark);
}

/* ─────────────────────────────────────────
   EN-TÊTE
───────────────────────────────────────── */
/* heading → .ch__* (character.css) — vars sur .icp */

/* ─────────────────────────────────────────
   GRILLE DE CARTES
   Structure : .container > .row.padding-top > .icp__card
   (classes génériques dans sections.css)
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   RÉVÉLATION AU SCROLL
   État initial : invisible + décalé vers le bas
   .is-visible déclenché par icp.js (IntersectionObserver)
   --reveal-delay : défini inline sur chaque card (décalage échelonné)
───────────────────────────────────────── */
.icp__card {
  opacity:    0;
  transform:  translateY(80px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--reveal-delay, 0ms)),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--reveal-delay, 0ms));
}

.icp__card.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════════
   CARTE — Structure bevel pixel-art (Figma 1351-637 / 1351-648)

   Flex-row : xl (4px py-8) | bd (4px py-4) | inner (flex-1) | bd | xl
   Chaque "strip" contient un <div> qui remplit entre les paddings,
   créant les coins chamfrés pixel-art sans border-radius.

   Inner :
     portrait  → absolute, top:8 bottom:8, bg transparent (c-main visible)
     item      → absolute, bottom:8, height:88→290 au hover
       item bevel : xl (py-8) | bd (py-4) | item-inner | bd | xl
       item-inner → flex-col px-16 py-24
         item-heading → name + cta-mini (40×40)
         info-extra   → role + desc + btn (masqué en compact)
════════════════════════════════════════════════════════════════ */

/* ── Wrapper carte ── */
.icp__card {
  display:        flex;
  flex-direction: row;
  height:         452px;
  flex:           0 0 379px;
  width:          379px;
  cursor:         pointer;
  overflow:       visible; /* portrait peut déborder vers le haut au hover */

  /* ── Palette par défaut : Pixel Boy / cyan ── */
  --c-main:       #6ebeff;
  --c-light:      #c2e4ff;
  --c-btn-bg:     #aacefa;
  --c-btn-hi:     #f0fffd;
  --c-btn-shadow: #8ec1ff;
  --c-btn-text:   #1a0f26;
}

/* ── Strips bevel latéraux — outer (8px chamfer) ── */
.icp__xl {
  width:           4px;
  flex-shrink:     0;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding:         8px 0;
}
.icp__xl > div { flex: 1; width: 4px; background: var(--c-main); }

/* ── Strips bevel latéraux — border (4px chamfer) ── */
.icp__bd {
  width:           4px;
  flex-shrink:     0;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding:         4px 0;
}
.icp__bd > div { flex: 1; width: 4px; background: var(--c-main); }

/* ── Zone centrale carte ── */
.icp__inner {
  flex:       1;
  position:   relative;
  background: var(--c-main);
  overflow:   visible;
}

/* ── Portrait — remplit inner, image clippée dans son propre div ── */
.icp__portrait {
  position:   absolute;
  top:        8px;
  left:       0;
  right:      0;
  bottom:     8px;
  overflow:   hidden;
  z-index:    0;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.icp__card:hover .icp__portrait { transform: translateY(-88px); }

.icp__portrait img {
  display: block;
  width:   100%;
  height:  auto;
}

/* ════════════════════════════════════════════════════════════════
   ITEM BAR — barre info en bas, bevel imbriqué (même système)
   Compact  : 88px  (nom + mini-CTA)
   Expanded : 290px (rôle + desc + bouton CHOISIR)
════════════════════════════════════════════════════════════════ */
.icp__item {
  position:   absolute;
  bottom:     8px;    /* aligne avec le py-8px de inner */
  left:       0;
  right:      0;
  display:    flex;
  height:     88px;
  overflow:   hidden;
  z-index:    1;
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.icp__card:hover .icp__item { height: 290px; }

/* strips xl / bd de l'item bar — couleur c-light */
.icp__item-xl {
  width:           4px;
  flex-shrink:     0;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end; /* ancré en bas : chamfer bas visible */
  padding:         8px 0;
}
.icp__item-xl > div { flex: 1; width: 4px; background: var(--c-light); }

.icp__item-bd {
  width:           4px;
  flex-shrink:     0;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  padding:         4px 0;
}
.icp__item-bd > div { flex: 1; width: 4px; background: var(--c-light); }

/* ── Contenu item bar ── */
.icp__item-inner {
  flex:            1;
  background:      var(--c-light);
  display:         flex;
  flex-direction:  column;
  padding:         24px 16px;
  gap:             8px;
  overflow:        hidden;
}

/* ── Heading : nom + bouton mini CTA ── */
.icp__item-heading {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          40px;   /* 24+40+24 = 88px total ✓ */
  flex-shrink:     0;
}

/* ── Nom du personnage ── */
.icp__name {
  font-family:    var(--font-heading);
  font-size:      24px;
  font-weight:    var(--fw-regular); /* 400 — Figma : Regular */
  color:          #0d111c;
  text-transform: uppercase;
  line-height:    1;
  letter-spacing: 0;
}

/* ── Mini CTA button (40×40 pixel-art) ──
   Border top/bottom : 2px white
   Sides via inset box-shadow pour simuler les strips latéraux
─────────────────────────────────────────────────────────────── */
.icp__cta-mini {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           40px;
  height:          40px;
  transition:      transform 0.12s ease;
}
.icp__cta-mini:hover  { transform: translateY(-1px); }

.icp__cta-mini img,
.icp__cta-mini svg {
  display: block;
  width:   40px;
  height:  40px;
}

/* ─────────────────────────────────────────
   INFO EXTRA — Rôle + description + CHOISIR
   Révélé quand le panel monte (overflow:hidden
   le masque en état compact)
───────────────────────────────────────── */
.icp__info-extra {
  display:    flex;
  flex-direction: column;
  gap:        8px;
  opacity:    0;
  transform:  translateY(6px);
  transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
}
.icp__card:hover .icp__info-extra {
  opacity:   1;
  transform: translateY(0);
  transition-delay: 0.15s; /* apparaît après l'ouverture du panel */
}

/* Rôle métier */
.icp__role {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--blue-icp);
  text-transform: uppercase;
  line-height: 1.3;
  opacity: 0.70;
  letter-spacing: 0.5px;
}

/* Description */
.icp__desc {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #484d87;
  line-height: 1.55;
}

/* ─────────────────────────────────────────
   BOUTON CHOISIR — CTA pixel-art
   Structure de layers (top → bottom) :
     2px dark border
     2px highlight
     centre bg + texte
     2px highlight
     6px shadow
     2px dark border
───────────────────────────────────────── */
.icp__action {
  padding-top:     16px;
  display:         flex;
  justify-content: center;
}

.icp__choose {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  background: var(--c-btn-bg);
  color: var(--c-btn-text);
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;

  /* Bevel pixel-art :
     top    → 2px dark + 2px highlight
     bottom → 2px highlight + 6px shadow + 2px dark */
  box-shadow:
    inset 0    2px  0 #1a0f26,
    inset 0    4px  0 var(--c-btn-hi),
    inset 0   -2px  0 #1a0f26,
    inset 0   -8px  0 var(--c-btn-hi),
    inset 0  -14px  0 var(--c-btn-shadow);

  transition: transform 0.12s ease, filter 0.12s ease;
}

.icp__choose:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.icp__choose:active {
  transform: translateY(1px);
  box-shadow:
    inset 0    2px  0 #1a0f26,
    inset 0    4px  0 var(--c-btn-shadow),
    inset 0   -2px  0 #1a0f26,
    inset 0   -8px  0 var(--c-btn-hi),
    inset 0  -14px  0 var(--c-btn-hi);
}

/* ─────────────────────────────────────────
   PERSONNAGES — Palettes de couleurs
───────────────────────────────────────── */
.icp__card--pixel-boy {
  --c-main:       #6ebeff;   /* cyan-500  */
  --c-light:      #f0fffd;   /* cyan-50   */
  --c-btn-bg:     #c2e4ff;   /* cyan-100  */
  --c-btn-hi:     #f0fffd;   /* cyan-50   */
  --c-btn-shadow: #3a8cfe;   /* cyan-700  */
  --c-btn-text:   #1a0f26;
}

.icp__card--ultra-color {
  --c-main:       #ffc15b;   /* orange-500 */
  --c-light:      #fff7e7;   /* orange-50  */
  --c-btn-bg:     #ffd793;   /* orange-100 */
  --c-btn-hi:     #fff7e7;   /* orange-50  */
  --c-btn-shadow: #fe9e3a;   /* orange-700 */
  --c-btn-text:   #1a0f26;
}

.icp__card--impacktor {
  --c-main:       #b493ff;   /* purple-500 */
  --c-light:      #edecff;   /* purple-50  */
  --c-btn-bg:     #d4c2ff;   /* purple-100 */
  --c-btn-hi:     #edecff;   /* purple-50  */
  --c-btn-shadow: #7b3dee;   /* purple-700 */
  --c-btn-text:   #1a0f26;
}

/* ─────────────────────────────────────────
   ÉTOILES DÉCORATIVES — Croix pixel-art
───────────────────────────────────────── */
.icp__star {
  position:          absolute;
  width:             20px;
  height:            20px;
  background-image:  url('../img/assets/star.svg');
  background-repeat: no-repeat;
  background-size:   100% 100%;
  pointer-events:    none;
}

.icp__star--1 { top: 32px;  left: 50%;  margin-left:  -400px; }
.icp__star--2 { top: 256px; left: 50%;  margin-left:  -660px; }
.icp__star--3 { top: 64px;  right: 50%; margin-right: -450px; }

/* ─────────────────────────────────────────
   PATTERN BAS — voir .pixel__pattern dans sections.css
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */

/* ── Tablette ≤ 1024px ── */
@media (max-width: 1024px) {
  .icp { padding-block: 80px; }

  /* .row remplace .icp__cards — gap réduit */
  .icp .row { gap: 20px; }

  .icp__card {
    flex:      1 1 0;
    width:     auto;
    min-width: 0;
    height:    420px;
  }
}

/* ── Mobile ≤ 768px ── */
@media (max-width: 768px) {
  .icp { padding-block: var(--space-8); }

  /* Passage en colonne sur mobile */
  .icp .row {
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-3);
  }

  .icp .container { padding: 0 var(--space-4); }

  .icp__card {
    flex:      none;
    width:     100%;
    max-width: 379px;
    height:    400px;
  }

  /* Sur mobile : pas de hover — tout reste en état compact */
  .icp__card:hover .icp__portrait { transform: none; }
  .icp__card:hover .icp__item     { height: 88px; }

  .icp__star--2 { display: none; }
}

/* ── Petit mobile ≤ 480px ── */
@media (max-width: 480px) {
  .icp__card { height: 360px; }
  .icp__name { font-size: 20px; }
}