/*
 * Fluidité : menu du header, transitions entre pages.
 * Chargé après la CSS Avada de chaque page (voir _tools/convert.mjs).
 */

:root {
  /* permet d'animer height / max-height vers « auto » et « max-content » (Chrome, Safari récents) */
  interpolate-size: allow-keywords;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
  /* ---------- Transition entre pages (View Transitions, navigation classique) ---------- */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation: page-out 180ms ease-in both;
  }

  ::view-transition-new(root) {
    animation: page-in 320ms var(--ease-out) both;
  }

  /* le bandeau d'en-tête reste en place pendant que le contenu change */
  .fusion-tb-header {
    view-transition-name: site-header;
    /* view-transition-name crée un contexte d'empilement : on garde le menu au-dessus des sections animées (z-index 2000) */
    position: relative;
    z-index: 2100;
  }

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

  ::view-transition-old(site-header),
  ::view-transition-new(site-header) {
    animation: none;
    mix-blend-mode: normal;
  }

  @keyframes page-out {
    to {
      opacity: 0;
      transform: translateY(-6px);
    }
  }

  @keyframes page-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  /* ---------- Menu mobile : panneau qui glisse vers le bas ---------- */
  .awb-menu.collapse-enabled.mobile-mode-collapse-to-button .awb-menu__main-ul {
    transform: translateY(-14px);
    transition:
      max-height 420ms var(--ease-out),
      opacity 240ms ease,
      transform 420ms var(--ease-out),
      visibility 0s linear 420ms;
    visibility: hidden;
    pointer-events: none;
  }

  .awb-menu.collapse-enabled.mobile-mode-collapse-to-button.expanded .awb-menu__main-ul {
    max-height: 85vh;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition:
      max-height 480ms var(--ease-out),
      opacity 260ms ease,
      transform 480ms var(--ease-out),
      visibility 0s;
  }

  /* les entrées du menu apparaissent l'une après l'autre */
  .awb-menu.collapse-enabled.expanded .awb-menu__main-ul > .awb-menu__li {
    animation: menu-item-in 460ms var(--ease-out) both;
  }

  .awb-menu.collapse-enabled.expanded .awb-menu__main-ul > .awb-menu__li:nth-child(1) { animation-delay: 40ms; }
  .awb-menu.collapse-enabled.expanded .awb-menu__main-ul > .awb-menu__li:nth-child(2) { animation-delay: 90ms; }
  .awb-menu.collapse-enabled.expanded .awb-menu__main-ul > .awb-menu__li:nth-child(3) { animation-delay: 140ms; }
  .awb-menu.collapse-enabled.expanded .awb-menu__main-ul > .awb-menu__li:nth-child(4) { animation-delay: 190ms; }
  .awb-menu.collapse-enabled.expanded .awb-menu__main-ul > .awb-menu__li:nth-child(5) { animation-delay: 240ms; }
  .awb-menu.collapse-enabled.expanded .awb-menu__main-ul > .awb-menu__li:nth-child(n + 6) { animation-delay: 290ms; }

  @keyframes menu-item-in {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
  }

  /* flèche des sous-menus : rotation douce */
  .awb-menu .awb-menu__open-nav-submenu_mobile .awb-menu__open-nav-submenu-icon,
  .awb-menu .awb-menu__open-nav-submenu_mobile::before,
  .awb-menu .awb-menu__open-nav-submenu_mobile::after {
    transition: transform 320ms var(--ease-out);
  }

  /* ---------- Menu desktop : sous-menus plus doux ---------- */
  .awb-menu_desktop .awb-menu__sub-ul,
  .awb-menu_desktop .awb-menu__main-a,
  .awb-menu_desktop .awb-menu__main-background-active,
  .awb-menu_desktop .awb-menu__main-background-default {
    transition-timing-function: var(--ease-out) !important;
  }

  .awb-menu_desktop.awb-menu_transition-slide_down.awb-menu_em-hover.awb-menu_row .awb-menu__sub-ul {
    transform: translateY(-10px);
  }

  .awb-menu_desktop.awb-menu_transition-slide_down.awb-menu_em-hover.awb-menu_row .awb-menu__li.menu-item-has-children.hover > .awb-menu__sub-ul,
  .awb-menu_desktop.awb-menu_transition-slide_down.awb-menu_em-hover.awb-menu_row .awb-menu__li.menu-item-has-children:focus-within > .awb-menu__sub-ul,
  .awb-menu_desktop.awb-menu_transition-slide_down.awb-menu_em-hover.awb-menu_row .awb-menu__li.menu-item-has-children:hover > .awb-menu__sub-ul {
    transform: translateY(0);
  }

  /* ---------- Boutons et liens : retours visuels plus fluides ---------- */
  .fusion-button,
  .fusion-button .fusion-button-text,
  a {
    transition-timing-function: var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}