/* ==========================================================================
   ilem - fluidite / animations (branche perf-animations)
   Uniquement transform + opacity. Rien n'est masque sans JS (classes posees par
   assets/js/motion.js) ; tout est neutralise avec prefers-reduced-motion.
   ========================================================================== */

/* <picture> genere par ilem_img() : transparent pour la mise en page (flex/grid) */
.ilem-pic {
  display: contents;
}

/* <source> n'a pas de display:none par defaut : sans cette regle il deviendrait un
   element flex/grid vide (et prendrait un « gap ») une fois <picture> en display:contents */
.ilem-pic > source {
  display: none;
}

/* --------------------------------------------------------------------------
   Apparition des blocs au scroll
   Courbe « expo-out douce » : depart franc, arrivee tres posee (lecture editoriale).
   -------------------------------------------------------------------------- */
:root {
  --reveal-distance: 20px;
  --reveal-duration: 560ms;
  --reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 767px) {
  :root {
    --reveal-distance: 16px;
    --reveal-duration: 480ms;
  }
}

/* etat initial : seulement pour les blocs SOUS la ligne de flottaison au chargement */
[data-reveal].reveal-pending {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
}

/* entree : fondu + montee legere, decalage en cascade via --reveal-delay */
[data-reveal].reveal-in {
  transition:
    opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay, 0ms),
    transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-pending,
  .reveal-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media print {
  .reveal-pending {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Transitions de page (View Transitions entre documents : Chrome/Edge 126+,
   Safari 18.2+ ; ignore ailleurs). En-tete fixe : il ne clignote pas.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  #header {
    view-transition-name: ilem-header;
  }

  ::view-transition-old(root) {
    animation: 160ms cubic-bezier(0.4, 0, 1, 1) both ilem-vt-out;
  }

  ::view-transition-new(root) {
    animation: 260ms cubic-bezier(0.2, 0.7, 0.2, 1) 60ms both ilem-vt-in;
  }

  ::view-transition-group(ilem-header) {
    animation-duration: 0s;
  }
}

@keyframes ilem-vt-out {
  to {
    opacity: 0;
  }
}

@keyframes ilem-vt-in {
  from {
    opacity: 0;
  }
}