/* ==========================================================================
   JURISFORMA — Animations sobres (CSS natif, sans bibliothèque)
   --------------------------------------------------------------------------
   Chargé après style.css. Tout est conditionné à la classe « motion » que
   motion.js pose sur <html> — absente si JavaScript est inactif, si
   IntersectionObserver manque ou si l'utilisateur a réduit les animations
   (prefers-reduced-motion) : dans ces cas rien n'est masqué ni animé.

   Sommaire
     1. Révélation au défilement ([data-reveal])
     2. Cascade du hero (accueil)
     3. Survol : cartes, boutons, liens de navigation
     4. Catalogue : fondu au changement de filtre
     5. Garde-fous : reduced-motion, impression

   Choix assumés
     - Les <section> conteneurs de l'accueil ne portent pas data-reveal : ce
       sont leur en-tête et leurs cartes qui apparaissent (un double fondu
       conteneur + cartes serait lourd). Même logique pour .prose quand il
       contient des éléments révélés (frise, tuiles, tableaux, encadrés).
     - L'élévation au survol vise les cartes et les boutons d'action
       (btn-primary, btn-secondary, nav-cta) ; les bascules de filtre du
       catalogue (.filter-btn) gardent leur simple changement de couleur.
     - Le lien de navigation de la page courante reste souligné.
     - Le décalage de 80 ms entre cartes est plafonné à 480 ms (motion.js).
   ========================================================================== */

@keyframes jf-reveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ===================== 1. RÉVÉLATION AU DÉFILEMENT ====================== */
/* Masqué tant que l'élément n'est pas entré dans l'écran, puis fondu +
   translation de 20 px (500 ms, ease-out). --reveal-delay = décalage posé
   par motion.js (80 ms entre les cartes d'une même grille).
   Une fois l'animation terminée (.reveal-done), plus aucune règle ne
   s'applique : l'élément retrouve son état naturel (survol, etc.). */
.motion [data-reveal]:not(.is-visible) { opacity: 0; }
.motion [data-reveal].is-visible:not(.reveal-done) {
  animation: jf-reveal 0.5s ease-out both;
  animation-delay: var(--reveal-delay, 0ms);
}
/* Navigation clavier : un élément qui reçoit le focus est toujours visible */
.motion [data-reveal]:focus-within { opacity: 1; animation: none; }


/* ===================== 2. CASCADE DU HERO (ACCUEIL) ===================== */
/* Titre puis sous-titre, 150 ms d'écart, une seule fois au chargement. */
.motion .hero-title { animation: jf-reveal 0.5s ease-out both; }
.motion .hero-desc  { animation: jf-reveal 0.5s ease-out 0.15s both; }


/* ============================ 3. SURVOL ================================= */
/* Cartes et boutons : élévation de 3 px + ombre, 200 ms. Réservé aux
   pointeurs fins (pas d'état « collé » après un toucher sur mobile). */
@media (hover: hover) and (pointer: fine) {
  .motion .formation-card,
  .motion .matiere-card,
  .motion .btn-primary,
  .motion .btn-secondary {
    transition: transform 0.2s ease, box-shadow 0.2s ease,
                background 0.2s, border-color 0.2s, color 0.2s;
  }
  .motion .nav-cta {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s !important;
  }
  .motion .formation-card:hover,
  .motion .matiere-card:hover,
  .motion .btn-primary:hover,
  .motion .btn-secondary:hover,
  .motion .nav-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(10, 10, 10, 0.12);
  }
  /* Les cartes vivent dans des grilles à filets de 1 px : la carte soulevée
     passe au-dessus de ses voisines, et une ombre plate de sa couleur de
     fond couvre le filet découvert sous son bord inférieur. */
  .motion .formation-card:hover,
  .motion .matiere-card:hover {
    position: relative; z-index: 1;
    box-shadow: 0 3px 0 0 var(--gris), 0 10px 24px rgba(10, 10, 10, 0.12);
  }
}

/* Liens de navigation (desktop) : soulignement qui s'étend depuis la gauche.
   Le lien de la page courante reste souligné. */
@media (min-width: 901px) {
  .nav-links a:not(.nav-cta) { position: relative; }
  .nav-links a:not(.nav-cta)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left center;
  }
  .motion .nav-links a:not(.nav-cta)::after { transition: transform 0.2s ease; }
  .nav-links a:not(.nav-cta):hover::after,
  .nav-links a:not(.nav-cta):focus-visible::after,
  .nav-links a[aria-current="page"]:not(.nav-cta)::after { transform: scaleX(1); }
}


/* ================== 4. CATALOGUE : FONDU AU FILTRAGE ==================== */
/* catalogue.js pose .is-filtering 200 ms avant de reconstruire la grille :
   les cartes sortent en fondu, les nouvelles entrent via [data-reveal]. */
.motion .catalogue-grid.is-filtering .formation-card {
  opacity: 0;
  animation: none;            /* une carte encore en cours de révélation fond aussi */
  transition: opacity 0.2s ease;
}


/* ============================ 5. GARDE-FOUS ============================= */
/* Double sécurité : même si la classe « motion » était présente, aucune
   animation ni masquage pour qui a réduit les animations. */
@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal],
  .motion .hero-title,
  .motion .hero-desc,
  .motion .catalogue-grid.is-filtering .formation-card {
    opacity: 1 !important; animation: none !important;
    transition: none !important; transform: none !important;
  }
  .motion .formation-card:hover,
  .motion .matiere-card:hover,
  .motion .btn-primary:hover,
  .motion .btn-secondary:hover,
  .motion .nav-cta:hover { transform: none !important; box-shadow: none !important; }
}

@media print {
  [data-reveal], .hero-title, .hero-desc {
    opacity: 1 !important; animation: none !important; transform: none !important;
  }
}