/* ===== Animations (ajoutées lors de la migration hors Webflow) ===== */

@media (prefers-reduced-motion: no-preference) {

  /* --- Entrée en fondu du titre hero et des titres de section (en bloc, sans découpage par mot pour rester stable à toutes les tailles d'écran) --- */
  .heading_hero,
  .heading_primary {
    opacity: 0;
    transform: translateY(0.5em);
    animation: title-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.1s;
  }

  @keyframes title-rise {
    to { opacity: 1; transform: translateY(0); }
  }

  /* --- Reveal au scroll pour les sections et leurs items --- */
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  [data-reveal-item] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  [data-reveal-item].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Stagger des items dans une même section, via variable injectée en JS */
  [data-reveal-item] {
    transition-delay: calc(var(--reveal-index, 0) * 80ms);
  }

  /* --- Micro-interactions sur les boutons --- */
  .button, .w-button {
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  }
  .button:hover, .w-button:hover {
    transform: translateY(-2px);
  }
  .button:active, .w-button:active {
    transform: translateY(0px) scale(0.98);
  }

  /* --- Léger effet sur les liens de nav --- */
  .nav_link {
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nav_link:hover {
    opacity: 0.7;
  }

  /* --- Icônes sociales / petites images cliquables --- */
  .icon {
    transition: transform 0.25s ease;
  }
  a:hover > .icon, .icon:hover {
    transform: scale(1.08);
  }
}

/* Respect total de la préférence reduced-motion : tout est visible directement, sans mouvement */
@media (prefers-reduced-motion: reduce) {
  .heading_hero, .heading_primary, [data-reveal], [data-reveal-item] {
    opacity: 1;
    transform: none;
  }
}