/* ================================================================
   folio.css — Section "Nos réalisations"
   Figma node : 1281-1611
================================================================ */

/* ── Section ──────────────────────────────────────────────────── */
.folio {
  --ch-accent: var(--purple-700);   /* #7b3dee — dots + em heading */
  overflow:    hidden; /* clip les cartes qui débordent */
  position:    relative;
}

/* ── Galerie : 2 rangées ──────────────────────────────────────── */
.folio__gallery {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4); /* 32px entre ligne 1 et ligne 2 */
}

/* ── Rangée conteneur ────────────────────────────────────────── */
.folio__row {
  overflow: hidden; /* clip les tracks qui débordent */
}

/* ── Tape animée : contient 2 tracks identiques ──────────────── */
/*   translateX(-50%) = exactement 1 track (la moitié de la tape) */
.folio__tape {
  display:     flex;        /* tracks côte à côte */
  width:       max-content; /* tape = 2 × track width */
  will-change: transform;
}

/* Ligne 1 — droite → gauche */
.folio__tape--rtl {
  animation: folio-rtl 35s linear infinite;
}

/* Ligne 2 — gauche → droite */
.folio__tape--ltr {
  animation: folio-ltr 40s linear infinite;
}

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes folio-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes folio-ltr {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ── Track : 1 set de cartes ─────────────────────────────────── */
.folio__track {
  display:       flex;
  flex-shrink:   0;
  gap:           32px;
  padding-right: 32px; /* maintient l'espacement au raccord des 2 tracks */
}

/* ── Carte ────────────────────────────────────────────────────── */
/*    Coins pixel-art via 4 images 12×12 positionnées aux coins    */
/*    boolean-operations Figma (node 1281-1622), fill cyan-50      */
/*    Même technique que .versus__corner                           */
.folio__card {
  position:    relative; /* ancre les 4 coins absolus */
  width:       584px;
  height:      584px;
  flex-shrink: 0;
}

.folio__card > img:not(.folio__corner) {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* ── Coins pixel-art (images 12×12, débordement 4px aux angles) ─ */
.folio__corner {
  position:        absolute;
  width:           12px;
  height:          12px;
  z-index:         2;
  pointer-events:  none;
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* fallback Firefox */
}

.folio__corner--tl { top: -4px;    left: -4px;   }
.folio__corner--tr { top: -4px;    right: -4px;  }
.folio__corner--br { bottom: -4px; right: -4px;  }
.folio__corner--bl { bottom: -4px; left: -4px;   }

/* ── Responsive — Tablette ≤ 1024px ────────────────────────────── */
@media (max-width: 1024px) {
  .folio {
    padding: var(--space-8) 0;
  }

  .folio__card {
    width:  420px;
    height: 420px;
  }
}

/* ── Responsive — Mobile ≤ 768px ───────────────────────────────── */
@media (max-width: 768px) {
  .folio {
    padding: var(--space-8) 0;
  }

  .folio__card {
    width:  260px;
    height: 260px;
  }

  .folio__track {
    gap:           16px;
    padding-right: 16px;
  }
}