/* ════════════════════════════════════════════════════════════════
   eMB — SKELETON LOADING SPECTACULAIRE (global, tous modules)
   ----------------------------------------------------------------
   Style : shimmer TURQUOISE (#1DD1A1) — vague de lumière signature eMB
           + apparition en CASCADE des cartes (une après l'autre)

   1. Images : voile turquoise qui pulse → fondu vers la vraie image
   2. Grilles : les cartes surgissent en cascade au chargement
   3. Transition entre pages : overlay skeleton plein écran

   Appliqué automatiquement par emb-skeleton.js — aucune vue à modifier.
   ════════════════════════════════════════════════════════════════ */

/* ── Animations ── */
@keyframes emb-sk-wave {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes emb-sk-in {
  0%   { opacity: 0; transform: translateY(14px) scale(.98); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ────────────────────────────────────────────────
   1. SKELETON SUR LES IMAGES — shimmer turquoise
   ──────────────────────────────────────────────── */
.emb-imgskel {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(29,209,161,.05) 25%,
    rgba(29,209,161,.26) 50%,
    rgba(29,209,161,.05) 75%);
  background-size: 200% 100%;
  animation: emb-sk-wave 1.5s ease-in-out infinite;
  transition: opacity .45s ease;
  pointer-events: none;
}

/* Fond sombre neutre sous le voile, le temps du chargement */
.emb-img-loading {
  background-color: #0c1a17 !important;
}

/* Image chargée → le voile s'efface en fondu */
.emb-img-done .emb-imgskel { opacity: 0; }

/* Balises <img> : fondu à l'apparition */
img.emb-img-fade {
  opacity: 0;
  transition: opacity .55s ease;
}
img.emb-img-fade.emb-img-loaded { opacity: 1; }


/* ────────────────────────────────────────────────
   2. APPARITION EN CASCADE DES CARTES
   Le JS ajoute .emb-casc aux cartes d'une grille, avec
   un délai croissant via --emb-casc-i (index de la carte).
   ──────────────────────────────────────────────── */
.emb-casc {
  animation: emb-sk-in .5s cubic-bezier(.4,0,.2,1) both;
  animation-delay: calc(var(--emb-casc-i, 0) * 70ms);
}


/* ────────────────────────────────────────────────
   3. OVERLAY DE TRANSITION ENTRE PAGES
   ──────────────────────────────────────────────── */
.emb-page-skel {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #070A11;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.emb-page-skel.show { opacity: 1; visibility: visible; }

.emb-page-skel .ps-nav {
  height: 62px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
  flex-shrink: 0;
}
.emb-page-skel .ps-logo { width: 120px; height: 22px; border-radius: 6px; }
.emb-page-skel .ps-nav-sp { flex: 1; }
.emb-page-skel .ps-pill { width: 70px; height: 30px; border-radius: 8px; }

.emb-page-skel .ps-body {
  padding: 24px 20px;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}
.emb-page-skel .ps-hero { height: 160px; border-radius: 16px; margin-bottom: 24px; }
.emb-page-skel .ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.emb-page-skel .ps-card {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  animation: emb-sk-in .5s cubic-bezier(.4,0,.2,1) both;
}
.emb-page-skel .ps-card:nth-child(1){animation-delay:.05s}
.emb-page-skel .ps-card:nth-child(2){animation-delay:.12s}
.emb-page-skel .ps-card:nth-child(3){animation-delay:.19s}
.emb-page-skel .ps-card:nth-child(4){animation-delay:.26s}
.emb-page-skel .ps-card:nth-child(5){animation-delay:.33s}
.emb-page-skel .ps-card:nth-child(6){animation-delay:.40s}
.emb-page-skel .ps-card:nth-child(7){animation-delay:.47s}
.emb-page-skel .ps-card:nth-child(8){animation-delay:.54s}
.emb-page-skel .ps-card-img { height: 150px; }
.emb-page-skel .ps-card-body { padding: 12px; }
.emb-page-skel .ps-line { height: 12px; border-radius: 4px; margin-bottom: 8px; }
.emb-page-skel .ps-line.short { width: 55%; }

/* Blocs gris de l'overlay : shimmer turquoise aussi */
.emb-page-skel .ps-logo,
.emb-page-skel .ps-pill,
.emb-page-skel .ps-hero,
.emb-page-skel .ps-card-img,
.emb-page-skel .ps-line {
  background: linear-gradient(90deg,
    rgba(29,209,161,.05) 25%,
    rgba(29,209,161,.22) 50%,
    rgba(29,209,161,.05) 75%);
  background-size: 200% 100%;
  animation: emb-sk-wave 1.5s ease-in-out infinite;
}

/* Accessibilité : coupe les animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .emb-imgskel,
  .emb-casc,
  .emb-page-skel .ps-card,
  .emb-page-skel .ps-logo,
  .emb-page-skel .ps-pill,
  .emb-page-skel .ps-hero,
  .emb-page-skel .ps-card-img,
  .emb-page-skel .ps-line {
    animation: none;
  }
  .emb-casc { opacity: 1; transform: none; }
}


/* ════════════════════════════════════════════════════════════════
   RÉVÉLATION DES SECTIONS AU SCROLL (façon Facebook / fil d'actu)
   ----------------------------------------------------------------
   Chaque section de contenu démarre légèrement décalée + transparente,
   puis se révèle en fondu quand elle entre dans l'écran.
   Appliqué automatiquement par emb-skeleton.js (IntersectionObserver).

   Note : géré en JS avec fallback — si le JS ne tourne pas, tout reste
   visible (pas de contenu caché). La classe .emb-reveal-on n'est ajoutée
   QUE si le JS confirme le support, donc aucun risque de contenu invisible.
   ════════════════════════════════════════════════════════════════ */

/* État initial : section en attente de révélation (seulement si JS actif) */
.emb-reveal-ready .emb-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s cubic-bezier(.4,0,.2,1),
              transform .55s cubic-bezier(.4,0,.2,1);
  will-change: opacity, transform;
}

/* Section révélée : remise en place */
.emb-reveal-ready .emb-reveal.emb-reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* Accessibilité : pas de mouvement si l'utilisateur le refuse */
@media (prefers-reduced-motion: reduce) {
  .emb-reveal-ready .emb-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}