/* ==========================================================================
   Collect Univers – animations douces
   --------------------------------------------------------------------------
   Chargé après cu-responsive.css (voir _partials/head.tpl).
   POUR RÉGLER : modifiez les variables ci-dessous (durée, couleur, force du
   survol des produits). Pour tout couper : retirez la ligne « cu-animations »
   de head.tpl et de layout-both-columns.tpl.
   Tout le mouvement est désactivé pour les personnes qui ont demandé
   « réduire les animations » dans leur système (prefers-reduced-motion).
   ========================================================================== */
:root {
  --cu-ease: cubic-bezier(.22, .61, .36, 1);   /* départ vif, arrivée très douce */
  --cu-dur: .3s;                               /* durée des petits effets */
  --cu-anim-color: var(--cu-accent, #ffc7e0);  /* soulignement du menu, vague au clic */
  --cu-lift: 4px;                              /* hauteur de soulèvement d'un produit */
  --cu-zoom: 1.04;                             /* zoom de la photo au survol */
  --cu-page-in: .4s;                           /* fondu à l'arrivée sur une page (plus petit = plus discret) */
  --cu-page-out: .35s;                         /* fondu au départ (idem) */
  --cu-cross: .5s;                             /* durée du fondu enchaîné entre deux pages */
}

/* ==========================================================================
   Retour visuel au clic (barre, estompe, logo qui rebondit) : affiché pour TOUS
   les visiteurs, même ceux qui ont réduit les animations dans leur téléphone,
   car c'est l'indication que la page est en train de charger.
   ========================================================================== */
/* Dès le clic : la page s'estompe légèrement et une barre pastel avance en haut,
   pour montrer tout de suite que ça charge (même si le serveur met un instant). */
html.cu-leaving body {
  opacity: .78;
  transition: opacity .35s ease-out var(--cu-logo-delay, .3s);
}
html.cu-leaving::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--cu-anim-color);
  box-shadow: 0 0 8px var(--cu-anim-color);
  z-index: 2147483647;
  pointer-events: none;
  animation: cu-bar 2.4s cubic-bezier(.1, .7, .2, 1) .12s forwards;
}

/* Logo qui traverse l'écran de gauche à droite en faisant des petits bonds pendant le chargement.
   Mouvement en CSS pur : le bloc avance, le logo à l'intérieur saute.
   Il n'apparaît qu'après 0,3 s d'attente (si la page arrive vite, on ne le voit pas).
   Taille : --cu-logo-size. Pour le retirer : supprimez ce bloc. */
.cu-logo-bounce {
  --cu-logo-size: 110px;
  display: none;
  position: fixed;
  left: 0;
  top: calc(50% - var(--cu-logo-size) / 2 + 40px);
  width: var(--cu-logo-size);
  height: var(--cu-logo-size);
  z-index: 2147483646;
  pointer-events: none;
  will-change: translate;
}
.cu-logo-bounce img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .18));
  will-change: transform;
}
html.cu-leaving .cu-logo-bounce {
  display: block;
  animation: cu-run 4s linear var(--cu-logo-delay, .3s) infinite backwards;
}
html.cu-leaving .cu-logo-bounce img {
  animation: cu-hop .7s infinite var(--cu-logo-delay, .3s) backwards,
             cu-fade-in .2s ease-out var(--cu-logo-delay, .3s) both;
}
/* Téléphones et tablettes : la page suivante arrive presque tout de suite (préchargée au toucher),
   le logo apparaît donc sans attendre */
@media (hover: none), (max-width: 1024px) {
  :root { --cu-logo-delay: 0s; }
}
@keyframes cu-run {
  from { translate: calc(var(--cu-logo-size, 110px) * -1.5) 0; }
  to   { translate: calc(100vw + 20px) 0; }
}
@keyframes cu-hop {
  0%   { transform: translateY(0) scale(1.12, .88) rotate(-6deg); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  50%  { transform: translateY(-80px) scale(.95, 1.06) rotate(6deg); animation-timing-function: cubic-bezier(.6, 0, .8, .3); }
  100% { transform: translateY(0) scale(1.12, .88) rotate(-6deg); }
}
@keyframes cu-bar {
  0% { width: 0; }
  100% { width: 88%; }
}
@keyframes cu-fade-in {
  from { opacity: 0; }
}


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

  /* ------------------------------------------------------------------------
     1. Changement de page en fondu (tous les navigateurs)
        - arrivée : la page apparaît en fondu ;
        - départ : au clic sur un lien, cu-animations.js pose la classe
          « cu-leaving » et la page s'efface avant de charger la suivante.
     ------------------------------------------------------------------------ */
  /* Arrivée sur une page : l'en-tête reste en place, le contenu apparaît en un fondu très court.
     Durée : --cu-page-in (plus petit = plus discret). */
  #wrapper {
    animation: cu-rise var(--cu-page-in) ease-in-out backwards;
  }

  html {
    scroll-behavior: smooth;
  }

  /* ------------------------------------------------------------------------
     2. Menu du haut
     ------------------------------------------------------------------------ */
  /* Soulignement qui glisse : entre par la gauche, ressort par la droite */
  #_desktop_top_menu .top-menu[data-depth="0"] > li > a[data-depth="0"] {
    position: relative;
    transition: color var(--cu-dur) var(--cu-ease);
  }
  #_desktop_top_menu .top-menu[data-depth="0"] > li > a[data-depth="0"]::after {
    content: "";
    position: absolute;
    left: .625rem;
    right: .625rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--cu-anim-color);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .4s var(--cu-ease);
    pointer-events: none;
  }
  #_desktop_top_menu .top-menu[data-depth="0"] > li:hover > a[data-depth="0"]::after,
  #_desktop_top_menu .top-menu[data-depth="0"] > li > a[data-depth="0"]:focus-visible::after,
  #_desktop_top_menu .top-menu[data-depth="0"] > li.current > a[data-depth="0"]::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
  /* Appui : le lien s'enfonce très légèrement */
  #_desktop_top_menu .top-menu[data-depth="0"] > li > a[data-depth="0"]:active {
    opacity: .7;
    transition-duration: .08s;
  }

  /* Sous-menu : apparition en descendant doucement */
  #_desktop_top_menu .top-menu[data-depth="0"] li:hover .sub-menu {
    animation: cu-drop .28s var(--cu-ease);
  }
  #_desktop_top_menu .top-menu .sub-menu a {
    transition: color var(--cu-dur) var(--cu-ease), transform var(--cu-dur) var(--cu-ease);
  }
  #_desktop_top_menu .top-menu .sub-menu a:hover {
    transform: translateX(3px);
  }

  /* Menu Creative Elements (celui de votre en-tête) */
  .elementor-nav-menu--main .elementor-item {
    transition: color var(--cu-dur) var(--cu-ease), background-color .35s var(--cu-ease),
                transform .15s var(--cu-ease) !important;
  }
  .elementor-nav-menu--main .elementor-item:active {
    transform: scale(.95);
  }
  /* Au clic : une pastille pastel se pose derrière le mot */
  .elementor-nav-menu--main .elementor-item.cu-pressed {
    background-color: color-mix(in srgb, var(--cu-anim-color) 55%, transparent) !important;
    border-radius: 999px;
  }
  .elementor-nav-menu--main li:hover > .sub-menu,
  .elementor-nav-menu--main li:focus-within > .sub-menu {
    animation: cu-drop .3s var(--cu-ease);
  }
  .elementor-nav-menu--main .sub-menu .elementor-sub-item {
    transition: color var(--cu-dur) var(--cu-ease), padding-left var(--cu-dur) var(--cu-ease),
                background-color var(--cu-dur) var(--cu-ease) !important;
  }
  .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover {
    padding-left: calc(1.25em + 4px);
  }

  /* ------------------------------------------------------------------------
     3. Cartes produit
     ------------------------------------------------------------------------ */
  .product-miniature .thumbnail-container {
    transition: transform .4s var(--cu-ease), box-shadow .4s var(--cu-ease);
  }
  .product-miniature .product-thumbnail img {
    transition: transform .7s var(--cu-ease);
  }
  @media (hover: hover) {
    .product-miniature .thumbnail-container:hover {
      transform: translateY(calc(var(--cu-lift) * -1));
      box-shadow: 0 14px 30px rgba(22, 22, 22, .08);
    }
    .product-miniature .thumbnail-container:hover .product-thumbnail img {
      transform: scale(var(--cu-zoom));
    }
  }
  /* Clic : la carte s'enfonce un instant avant l'ouverture de la fiche */
  .product-miniature .thumbnail-container:active {
    transform: translateY(-1px) scale(.985);
    transition-duration: .12s;
  }

  /* ------------------------------------------------------------------------
     4. Cœur de la liste de souhaits et boutons
     ------------------------------------------------------------------------ */
  .wishlist-button-add i,
  .ets-wishlist-button-add svg,
  .ets-wishlist-button-add i {
    transition: transform .25s var(--cu-ease);
  }
  .wishlist-button-add:hover i,
  .ets-wishlist-button-add:hover svg,
  .ets-wishlist-button-add:hover i {
    transform: scale(1.12);
  }
  .wishlist-button-add:active i,
  .ets-wishlist-button-add:active svg,
  .ets-wishlist-button-add:active i {
    transform: scale(.82);
    transition-duration: .1s;
  }

  .btn,
  .add-to-cart {
    transition: background-color var(--cu-dur) var(--cu-ease), color var(--cu-dur) var(--cu-ease),
                border-color var(--cu-dur) var(--cu-ease), box-shadow var(--cu-dur) var(--cu-ease),
                transform .15s var(--cu-ease);
  }
  .btn:active,
  .add-to-cart:active {
    transform: scale(.97);
  }

  /* Vague pastel au clic sur un bouton (créée par cu-animations.js) */
  .cu-ripple-host {
    position: relative;
    overflow: hidden;
  }
  .cu-ripple {
    position: absolute;
    border-radius: 50%;
    background: var(--cu-anim-color);
    opacity: .55;
    transform: scale(0);
    animation: cu-ripple .6s var(--cu-ease) forwards;
    pointer-events: none;
  }

  /* ------------------------------------------------------------------------
     Mouvements
     ------------------------------------------------------------------------ */
  @keyframes cu-rise {
    from { opacity: 0; }
  }
  @keyframes cu-drop {
    from { opacity: 0; transform: translateY(-8px); }
  }
  @keyframes cu-ripple {
    to { transform: scale(1); opacity: 0; }
  }
}