/* Animations d'interface — module commun aux sites Illanes&Co.
   Se copie tel quel dans chaque site (voir appliquer-animations.js).

   Deux principes tiennent tout le fichier :

   1. Rien n'est masque tant que le script n'a pas pris la main. L'etat cache
      depend de la classe `anim-actif` posee sur <html> par animations.js.
      Si le script echoue ou est bloque, la page reste entierement lisible.

   2. On n'anime que `opacity` et `transform`, les deux seules proprietes que
      le navigateur traite sans recalculer la mise en page. Une animation sur
      `height` ou `top` ferait ramer les telephones. */

/* Quelqu'un qui a demande moins d'animations dans son systeme en recoit aucune.
   Ce n'est pas une option de confort : les mouvements declenchent des malaises
   chez les personnes sujettes au vertige. */
@media (prefers-reduced-motion: reduce) {
  .anim-actif .anim { opacity: 1 !important; transform: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Apparition au defilement ---------- */

.anim-actif .anim {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
              transform .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--retard, 0ms);
  will-change: opacity, transform;
}

.anim-actif .anim.vu {
  opacity: 1;
  transform: none;
}

/* Une fois l'element apparu, on relache la promesse faite au compositeur :
   garder `will-change` en permanence sature la memoire graphique. */
.anim-actif .anim.pose { will-change: auto; }

/* ---------- Entree du bandeau principal ---------- */

.anim-actif .hero-contenu > *,
.anim-actif .hero-texte > * {
  opacity: 0;
  transform: translateY(18px);
  animation: entree .7s cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: var(--retard, 0ms);
}

@keyframes entree {
  to { opacity: 1; transform: none; }
}

/* ---------- Finitions au survol ---------- */

.bouton {
  transition: background .2s, color .2s, border-color .2s,
              transform .18s cubic-bezier(.22, .61, .36, 1), box-shadow .18s;
}
@media (hover: hover) {
  .bouton:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }
}
.bouton:active { transform: translateY(0); box-shadow: none; }

/* Les photos de galerie zooment legerement sous le curseur. Le conteneur
   masque le debordement pour que l'image ne deborde pas de son cadre. */
.galerie, .signature-photo, .hero-image, .hero-visuel { overflow: hidden; }

@media (hover: hover) {
  .galerie .photo { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
  .galerie .photo:hover { transform: scale(1.04); }
}

/* Cartes et blocs : un leger soulevement suffit a signaler qu'on les survole. */
@media (hover: hover) {
  .bloc-tarifs, .grille-carte article, .grille-prestations article, .atout {
    transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s;
  }
  .bloc-tarifs:hover, .grille-carte article:hover,
  .grille-prestations article:hover, .atout:hover {
    transform: translateY(-3px);
  }
  .bloc-tarifs:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .09); }
}

/* Les liens de navigation revelent leur soulignement depuis la gauche. */
.entete nav a { position: relative; }
.entete nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.entete nav a:hover::after { transform: scaleX(1); }

/* ---------- Compteurs ---------- */

/* Le chiffre defile pendant le comptage : on fige sa largeur pour que la
   ligne ne tressaute pas a chaque increment. */
.compte-en-cours { font-variant-numeric: tabular-nums; }