/* ═══════════════════════════════════════════════════
   PEPS – Animation "distribution de cartes"
   À inclure dans index.html APRÈS le lien styles.css :
   <link rel="stylesheet" href="animation-peps.css">
═══════════════════════════════════════════════════ */

/*
  Principe : les 4 lettres partent empilées depuis le centre
  du logo, puis sont "distribuées" vers leur position finale —
  comme des cartes lancées depuis un paquet.
  Le centre du logo est ~130px à droite de pl1, ~40px de pl2.
*/

/* ── Lettre P (teal) — vole vers la gauche ── */
@keyframes cardDeal1 {
  0%   { transform: rotate(1deg) translate(130px, 2px) scale(0.88); opacity: 0; }
  18%  { opacity: 1; }
  62%  { transform: rotate(-3.5deg) translate(14px, -22px) scale(1.03); }
  80%  { transform: rotate(-1.8deg) translate(0,  5px) scale(1); }
  100% { transform: rotate(-2deg)   translate(0,  0)   scale(1); }
}

/* ── Lettre E (pêche) — départ du centre, vole légèrement à gauche ── */
@keyframes cardDeal2 {
  0%   { transform: rotate(1deg) translate(40px, -4px) scale(0.88); opacity: 0; }
  18%  { opacity: 1; }
  62%  { transform: rotate(2.5deg)  translate(4px,  -18px) scale(1.03); }
  80%  { transform: rotate(1.7deg)  translate(0,   13px)   scale(1); }
  100% { transform: rotate(1.5deg)  translate(0,    8px)   scale(1); }
}

/* ── Lettre P (jaune) — départ du centre, vole légèrement à droite ── */
@keyframes cardDeal3 {
  0%   { transform: rotate(1deg)  translate(-40px, -2px) scale(0.88); opacity: 0; }
  18%  { opacity: 1; }
  62%  { transform: rotate(-1.5deg) translate(-4px, -15px) scale(1.03); }
  80%  { transform: rotate(-0.8deg) translate(0,    9px)   scale(1); }
  100% { transform: rotate(-1deg)   translate(0,    4px)   scale(1); }
}

/* ── Lettre S (dark) — vole vers la droite ── */
@keyframes cardDeal4 {
  0%   { transform: rotate(1deg) translate(-130px, 4px) scale(0.88); opacity: 0; }
  18%  { opacity: 1; }
  62%  { transform: rotate(3.5deg) translate(-14px, -24px) scale(1.03); }
  80%  { transform: rotate(2.3deg) translate(0,     16px)  scale(1); }
  100% { transform: rotate(2deg)   translate(0,     10px)  scale(1); }
}

/*
  cubic-bezier(0.22, 1, 0.36, 1) = départ rapide + décélération nette
  → effet "lancé de carte"
  Délai échelonné : ~0.2s entre chaque carte
*/
.peps-letter.pl1 { animation: cardDeal1 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }
.peps-letter.pl2 { animation: cardDeal2 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; }
.peps-letter.pl3 { animation: cardDeal3 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both; }
.peps-letter.pl4 { animation: cardDeal4 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both; }

/* ── Hover : soulever la carte comme on la ramasse ── */
.peps-letter:hover {
  transform: translateY(-14px) scale(1.06) rotate(-1deg) !important;
  box-shadow: 8px 14px 0px rgba(0,0,0,.18) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  z-index: 10 !important;
  cursor: pointer;
}