/* =============================================================
   ALGUAMAT — LE SITE VIVANT (commun aux deux pages)
   -------------------------------------------------------------
   Inspiré de jntproductions.com, aux couleurs d'Alguamat. Tout ce
   qui bouge sur le site est ici, dans un seul fichier, pour que
   l'accueil et la boutique réagissent de la même façon.

   Ce qui réagit :
     1. Les titres arrivent mot par mot, chaque mot un peu après
        l'autre (classes .devoile / .mot posées par vivant.js).
     2. Les boutons principaux portent une lueur verte, et sont
        « aimantés » : ils se penchent vers la souris.
     3. Le deuxième membre du grand titre est en vert (<em>).
     4. Les avis défilent tout seuls, lentement, en continu.
     5. Les cartes s'inclinent en 3D sous la souris, avec une lueur
        qui suit le pointeur.
     6. Une fine barre verte en haut montre où on en est dans la page.
     7. Chaque clic fait une onde dans l'eau (la goutte du curseur
        touche le lac).
     8. L'ouverture et la porte d'entrée bougent légèrement avec la
        souris (parallaxe), le logo de la porte se penche.

   Pourquoi les propriétés `translate`, `rotate` et `scale` plutôt
   que `transform` : elles se combinent avec le `transform` que GSAP
   et les scripts des pages écrivent déjà sur les mêmes éléments.
   Deux scripts peuvent ainsi bouger le même bloc sans s'écraser.

   Un visiteur qui a demandé moins d'animations (réglage Windows /
   macOS) voit tout, mais immobile. Sur écran tactile, ce qui dépend
   de la souris reste simplement inactif.
   ============================================================= */

/* ---- 1. Titres mot par mot ---- */
.devoile{display:inline-block}
.devoile .mot{display:inline-block;opacity:0;transform:translateY(.65em);filter:blur(5px);
  transition:transform .85s cubic-bezier(.2,.75,.2,1),opacity .5s ease,filter .6s ease;
  transition-delay:calc(var(--i,0)*60ms)}
.devoile.vu .mot{opacity:1;transform:none;filter:none}

/* ---- 2. Boutons : lueur + aimant ---- */
.btn-primary,.bq-ajouter,.nav-cta,#loading-enter{
  box-shadow:0 10px 28px -12px rgba(26,155,123,.75)!important;
  transition:translate .5s cubic-bezier(.2,.9,.3,1.35),scale .3s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,filter .25s ease!important}
.btn-primary:hover,.bq-ajouter:hover:not(:disabled),.nav-cta:hover,#loading-enter:hover{
  translate:0 -2px;box-shadow:0 16px 34px -12px rgba(26,155,123,.95),0 0 24px rgba(26,155,123,.35)!important}
.btn-primary:active,.bq-ajouter:active,.nav-cta:active,#loading-enter:active{scale:.97}
/* Le ressort : quand la souris est dessus, le bouton suit vite ;
   quand elle part, il revient en rebondissant. */
.aimant{transition:translate .5s cubic-bezier(.2,.9,.3,1.35),scale .3s ease}
.aimant.pres{transition:translate .12s ease-out,scale .15s ease,box-shadow .25s ease!important}

/* ---- 3. Le mot en vert dans les grands titres ---- */
.hero-title em,.bq-titre em,.section-title em{font-style:normal;color:var(--aqua-green,#1A9B7B)}

/* ---- 4. Avis qui défilent ----
   La liste est doublée dans vivant.js ; elle glisse d'une moitié, puis
   recommence : le mouvement n'a ni début ni fin visibles. Elle s'arrête
   sous la souris, pour qu'on puisse lire. */
.alg-avis-liste.defile{display:flex;gap:0;overflow:hidden;border-top:1px solid rgba(245,240,232,.09);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.alg-avis-liste.defile .alg-avis-piste{display:flex;width:max-content;animation:avis-defilent 48s linear infinite}
.alg-avis-liste.defile:hover .alg-avis-piste{animation-play-state:paused}
.alg-avis-liste.defile .alg-avis-item{flex:0 0 min(360px,80vw);padding:28px 28px 28px 0;border-left:none}
.alg-avis-liste.defile .alg-avis-item+.alg-avis-item{padding-left:28px;border-left:1px solid rgba(245,240,232,.09)}
@keyframes avis-defilent{to{transform:translateX(-50%)}}

/* ---- 5. Cartes : inclinaison 3D + lueur qui suit la souris ---- */
.who-card,.step-card,.bq-vignette,.alg-avis-item,.myrio-card,.mud-card{position:relative}
.who-card,.step-card,.bq-faq-item,.bq-vignette,.alg-avis-item,.mud-card{transition:translate .35s cubic-bezier(.2,.75,.2,1),box-shadow .35s ease,background .35s ease,border-color .35s ease,opacity .35s ease}
.who-card:hover,.step-card:hover,.mud-card:hover{translate:0 -6px}
.bq-vignette:hover{translate:0 -3px}
.bq-faq-item:hover{background:linear-gradient(90deg,rgba(26,155,123,.06),transparent 60%)}
.alg-avis-item:hover .alg-avis-texte{color:var(--sand-white,#F5F0E8)}
.alg-avis-texte{transition:color .35s ease}
/* Pendant que la souris est dessus, la carte suit sans traîner. */
.incline{transition:transform .18s ease-out!important;will-change:transform}
.lueur{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(240px circle at var(--lx,50%) var(--ly,50%),rgba(26,155,123,.24),transparent 65%)}
.incline>.lueur{opacity:1}
/* Les photos zooment doucement sous la souris. */
.bq-vignette{overflow:hidden}
.bq-vignette img,.mud-card img{transition:scale .7s cubic-bezier(.2,.8,.2,1)}
.bq-vignette:hover img,.mud-card:hover img{scale:1.06}

/* ---- 6. Barre de progression ---- */
#vivant-progres{position:fixed;left:0;top:0;width:100%;height:2px;z-index:10001;pointer-events:none;
  background:linear-gradient(90deg,var(--aqua-green,#1A9B7B),#7cf0c4);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* ---- 7. Onde au clic ---- */
.onde{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;z-index:10002;
  border:1.5px solid rgba(124,240,196,.85);animation:onde-s-etend .75s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes onde-s-etend{to{transform:scale(8);opacity:0;border-width:.5px}}

/* ---- 8. Parallaxe : ouverture et porte ---- */
.hero-bg-photo,.hero-content,.bq-fond-net,.bq-ouverture-contenu,#loading-halo,#loading-logo,#loading-logo-img{
  transition:translate .9s cubic-bezier(.2,.8,.2,1),rotate .6s ease}
#loading{perspective:900px}

/* ---- Téléphone : les mots arrivent sans flou (moins de calcul) ---- */
@media(max-width:768px){.devoile .mot{filter:none}}

/* ---- Moins d'animations demandé : tout reste visible, rien ne bouge ---- */
@media(prefers-reduced-motion:reduce){
  .devoile .mot{opacity:1;transform:none;filter:none;transition:none}
  .alg-avis-liste.defile .alg-avis-piste{animation:none}
  .btn-primary:hover,.bq-ajouter:hover,.nav-cta:hover,.who-card:hover,.step-card:hover,.mud-card:hover,.bq-vignette:hover{translate:none}
  .bq-vignette:hover img,.mud-card:hover img{scale:none}
  .onde{display:none}
}