/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS MOBILES — Starting Block
   Effets 3D et profondeur, actifs uniquement sur écran ≤ 768px.
   N'altère pas l'affichage ordinateur.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─── Cartes qui jaillissent en 3D au défilement (effet marqué) ─── */
  .certif-card,
  .exp-certif,
  .disp-card,
  .prog-card,
  .exp-ip {
    opacity: 0;
    transform: translateY(80px) rotateX(-32deg) scale(.86);
    transform-origin: center bottom;
    transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.34,1.4,.5,1);
    will-change: transform, opacity;
  }
  .certif-card.mfx-in,
  .exp-certif.mfx-in,
  .disp-card.mfx-in,
  .prog-card.mfx-in,
  .exp-ip.mfx-in {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
  }

  /* Les cartes d'expertise (.rv) : effet 3D bien visible */
  .ecard.rv {
    transform: translateY(60px) rotateX(-25deg) scale(.9);
    transform-origin: center bottom;
    transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.34,1.4,.5,1) !important;
  }
  .ecard.rv.in {
    transform: translateY(0) rotateX(0) scale(1);
  }

  /* Conteneurs en perspective renforcée pour un effet 3D prononcé */
  .egrid, .rgrid, .progs, .exp-info, .cards-3d,
  .disp-grid, #rgrid, .ecards, .rblocs {
    perspective: 700px;
    perspective-origin: center top;
  }

  /* ─── Chiffres clés : léger effet 3D (sans casser l'affichage) ─── */
  .rb-m {
    opacity: 0;
    transform: scale(.6) rotateY(40deg);
    transition: opacity .8s cubic-bezier(.34,1.56,.64,1), transform .8s cubic-bezier(.34,1.56,.64,1);
    will-change: transform, opacity;
  }
  .rb-m.mfx-in {
    opacity: 1;
    transform: scale(1) rotateY(0);
  }

  /* ─── Effet de pression tactile sur les cartes cliquables ─── */
  .ecard:active,
  .prog-card:active,
  .disp-card:active {
    transform: scale(.97);
    transition: transform .15s ease-out;
  }
}

/* Respect de la préférence "réduire les animations" */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .certif-card, .exp-certif, .disp-card, .prog-card, .exp-ip, .rb-m,
  .ecard.rv {
    opacity: 1 !important;
    transform: none !important;
  }
}