/* LOVEVENT : mouvement. Discret, rapide, jamais remarqué. On n'anime que opacity et transform
   (exceptions assumées : changement de couleur de fond des boutons, ombre des cartes au survol, couleur de l'en-tête). */

/* ---------- Apparition au défilement (un seul effet, tout le site) ---------- */
.js .reveal { opacity: 0; transform: translateY(var(--motion-distance)); }
.js .reveal.vu {
  opacity: 1; transform: none;
  transition: opacity var(--motion-base) var(--motion-ease) var(--d, 0ms), transform var(--motion-base) var(--motion-ease) var(--d, 0ms);
}
.js .reveal.now { transition: none; }   /* déjà à l'écran au chargement : affiché directement */

/* ---------- Boutons ---------- */
.btn { transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } }

/* ---------- Cartes prestations ---------- */
.carte { transition: transform var(--motion-medium) var(--motion-ease), box-shadow var(--motion-medium) var(--motion-ease); }
.carte img { transition: transform var(--motion-slow) var(--motion-ease); }
.carte__lien .fl { display: inline-block; transition: transform var(--motion-fast) var(--motion-ease); }
@media (hover: hover) {
  .carte:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(80, 40, 50, .45); }
  .carte:hover img { transform: scale(1.03); }
  .carte:hover .fl { transform: translateX(4px); }
}

/* ---------- Menu : soulignement qui se trace de gauche à droite ---------- */
.menu a { position: relative; border-bottom: 0; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--motion-fast) var(--motion-ease); }
.menu a[aria-current="page"]::after, .menu a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) { .menu a:hover::after { transform: scaleX(1); } }

/* ---------- En-tête : hauteur FIXE, seul un fond (opacity) et un léger décalage (transform) changent ---------- */
:root { --eh: var(--entete-h-bureau); --ehd: var(--entete-h-defile); --eh-decal: calc((var(--ehd) - var(--eh)) / 2); }
@media (max-width: 1140px) { :root { --eh: 84px; --ehd: 76px; } }
.entete, .entete.defile, .entete.menu-ouvert, .interieur .entete, .interieur .entete.menu-ouvert {
  height: var(--eh); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: color var(--motion-medium) var(--motion-ease); pointer-events: none;
}
.entete .conteneur > *, .entete .logo { pointer-events: auto; }
.entete::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--ehd); z-index: -1;
  background: color-mix(in srgb, var(--c-fond) 96%, transparent); box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 8px 20px -14px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity var(--motion-medium) var(--motion-ease);
}
.entete.defile::before, .interieur .entete::before { opacity: 1; }
.entete.menu-ouvert::before { opacity: 1; background: #1f1417; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.entete .logo, .entete .entete__droite { transform-origin: left center; transition: transform var(--motion-medium) var(--motion-ease); }
.entete.defile .logo, .interieur .entete .logo { transform: translateY(var(--eh-decal)) scale(.94); }
.entete.defile .entete__droite, .interieur .entete .entete__droite { transform: translateY(var(--eh-decal)); }
@media (min-width: 1141px) {
  .entete .menu { transition: transform var(--motion-medium) var(--motion-ease); }
  .entete.defile .menu, .interieur .entete .menu { transform: translateY(var(--eh-decal)); }
}

/* ---------- Menu mobile : fondu + glissement, 280 ms ---------- */
@media (max-width: 1140px) {
  .navigation {
    display: flex; visibility: hidden; opacity: 0; transform: translateY(-12px); pointer-events: none;
    transition: opacity var(--motion-menu) var(--motion-ease), transform var(--motion-menu) var(--motion-ease), visibility 0s linear var(--motion-menu);
  }
  .menu-ouvert .navigation { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
}

/* ---------- Mouvement réduit : aucun fondu, aucun déplacement ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.vu { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  .btn:hover, .carte:hover, .carte:hover img, .carte:hover .fl { transform: none; }
}