/* Animations du site. Tout est pilote par la classe js-anim posee sur <html>
   par assets/site-anim.js : sans JavaScript, ou si le visiteur a demande de
   reduire les animations, rien n'est masque et la page reste normale.
   Seuls transform et opacity sont animes : aucun reflow, aucun decalage. */

:root {
  --anim-duree: .75s;
  --anim-courbe: cubic-bezier(.16, 1, .3, 1);
}

/* --- Etat de depart des blocs qui apparaissent au defilement --- */
.js-anim .anim {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity var(--anim-duree) var(--anim-courbe),
              transform var(--anim-duree) var(--anim-courbe);
  transition-delay: var(--anim-pas, 0ms);
}
.js-anim .anim-gauche { transform: translateX(-44px); }
.js-anim .anim-droite { transform: translateX(44px); }
.js-anim .anim-zoom   { transform: scale(.92); }
.js-anim .anim-pastille { transform: translateY(14px) scale(.88); }

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

/* --- Hero : leger zoom arriere continu sur la photo de fond --- */
.js-anim .site-hero-visuel img {
  animation: hero-respire 26s ease-in-out infinite alternate;
  transform-origin: 70% 50%;
}
@keyframes hero-respire {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

/* --- Etapes : un trait se trace au-dessus de la serie --- */
.js-anim ol.etapes { position: relative; padding-top: 2rem; }
@media (min-width: 1024px) {
  .js-anim ol.etapes::before {
    content: ''; position: absolute; left: 0; right: 0; top: .5rem; height: 2px;
    background: linear-gradient(to right, #0a5499, #2e9e6b);
    transform: scaleX(0); transform-origin: left;
    transition: transform 1.4s var(--anim-courbe) .2s;
  }
  .js-anim ol.etapes.vu::before { transform: scaleX(1); }
  /* Un point par etape, centre sur le trait. Le decalage negatif remonte le
     point au-dessus du padding-top de la liste, la ou passe le trait. */
  .js-anim ol.etapes > li::before {
    content: ''; position: absolute; top: -1.75rem; left: 0;
    width: 10px; height: 10px; border-radius: 50%; background: #0a5499;
    transform: scale(0); transition: transform .5s var(--anim-courbe) var(--anim-point, 0ms);
  }
  .js-anim ol.etapes > li { position: relative; }
  .js-anim ol.etapes > li.vu::before { transform: scale(1); }
}

/* --- Survol : les cartes cliquables se soulevent --- */
.js-anim .carte-relief { transition: transform .3s var(--anim-courbe), box-shadow .3s var(--anim-courbe); }
.js-anim .carte-relief:hover { transform: translateY(-8px); }

/* --- Compteurs : evite que la largeur saute pendant le defilement --- */
.js-anim .compteur { font-variant-numeric: tabular-nums; }

/* --- FAQ : le corps de reponse se devoile --- */
.js-anim details[data-accordeon] > summary { list-style: none; }
.js-anim details[data-accordeon] .faq-plus { transition: transform .35s var(--anim-courbe); }
.js-anim details[data-accordeon][open] .faq-plus { transform: rotate(45deg); }

/* --- Formulaire : champ actif mis en valeur --- */
.js-anim #devis input, .js-anim #devis select, .js-anim #devis textarea {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.js-anim #devis input:focus, .js-anim #devis select:focus, .js-anim #devis textarea:focus {
  box-shadow: 0 0 0 4px rgba(10, 84, 153, .14);
}

/* --- Bouton principal : reaction au clic --- */
.js-anim .hero-actions a, .js-anim a[href="#devis"] { transition: transform .18s var(--anim-courbe), background-color .2s ease, color .2s ease; }
.js-anim .hero-actions a:active, .js-anim a[href="#devis"]:active { transform: scale(.97); }

/* --- Respect du reglage systeme : on coupe tout --- */
@media (prefers-reduced-motion: reduce) {
  .js-anim .anim { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js-anim .site-hero-visuel img { animation: none !important; }
  .js-anim ol.etapes::before, .js-anim ol.etapes > li::before { transition: none !important; transform: none !important; }
  .js-anim .carte-relief { transition: none !important; }
}