/* ==========================================================================
   ANIMATIONS.CSS — Atelier Visible
   Fichier isole : toutes les animations douces du site vivent ici.
   Pour tout desactiver/retirer plus tard : supprimer ce fichier + son
   <link> + animations.js, sans toucher au reste du code.
   ========================================================================== */

:root{
  --anim-fast:.2s;
  --anim-base:.3s;
  --anim-slow:.4s;
  --anim-ease:cubic-bezier(.22,.68,0,1.2);
}

/* --------------------------------------------------------------------------
   1. Fade-in au scroll (sections produits / realisations / temoignages)
   Active par animations.js (ajoute .fade-armed puis .is-visible).
   Si JS indisponible, le contenu reste visible (pas de classe .fade-armed).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .fade-in-scroll.fade-armed{
    opacity:0;
    transform:translateY(20px);
    transition:opacity var(--anim-slow) var(--anim-ease), transform var(--anim-slow) var(--anim-ease);
  }
  .fade-in-scroll.fade-armed.is-visible{
    opacity:1;
    transform:translateY(0);
  }
}

/* --------------------------------------------------------------------------
   2. Hover discret sur cartes produits (elevation + ombre)
   Classe utilitaire reutilisable ; certaines cartes (carrousel homepage,
   grille /nos-produits.html) ont deja un hover equivalent dans leur propre
   CSS et n'ont pas besoin de cette classe.
   -------------------------------------------------------------------------- */
.hover-lift{
  transition:box-shadow var(--anim-base) var(--anim-ease);
}
.hover-lift:hover{
  box-shadow:0 18px 36px rgba(42,33,24,.16);
}
@media (prefers-reduced-motion: no-preference){
  .hover-lift{
    transition:box-shadow var(--anim-base) var(--anim-ease), transform var(--anim-base) var(--anim-ease);
  }
  .hover-lift:hover{
    transform:translateY(-4px);
  }
}

/* --------------------------------------------------------------------------
   3. Transition boutons CTA (devis / contact) : couleur + micro-scale
   Cible directement les classes de boutons deja utilisees sur le site,
   aucune modification HTML necessaire.
   -------------------------------------------------------------------------- */
.nav-cta, .hero-cta, .btn-or-band, .side-cta{
  transition:background var(--anim-base) var(--anim-ease), opacity var(--anim-base) var(--anim-ease), color var(--anim-base) var(--anim-ease);
}
@media (prefers-reduced-motion: no-preference){
  .nav-cta, .hero-cta, .btn-or-band, .side-cta{
    transition:background var(--anim-base) var(--anim-ease), opacity var(--anim-base) var(--anim-ease), color var(--anim-base) var(--anim-ease), transform var(--anim-fast) var(--anim-ease);
  }
  .nav-cta:hover, .hero-cta:hover, .btn-or-band:hover, .side-cta:hover{
    transform:scale(1.03);
  }
  .nav-cta:active, .hero-cta:active, .btn-or-band:active, .side-cta:active{
    transform:scale(.97);
  }
}

/* --------------------------------------------------------------------------
   4. Underline anime sur les liens du menu principal
   Cible .nav-center (menu desktop), present sur toutes les pages.
   -------------------------------------------------------------------------- */
.nav-center > a{
  position:relative;
}
.nav-center > a::after{
  content:'';
  position:absolute;
  left:0;bottom:-4px;
  width:100%;height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--anim-base) var(--anim-ease);
}
.nav-center > a:hover::after{
  transform:scaleX(1);
}

/* --------------------------------------------------------------------------
   6. Correctif nav : le menu desktop (.nav-center) et le numero de
   telephone se chevauchaient entre ~1024px et ~1300px sur les pages qui
   redeclarent .nav-center{display:flex} dans leur propre <style> (regle
   non conditionnelle chargee avant ce fichier). Ce fichier est charge en
   dernier sur (quasi) toutes les pages : on force ici le point de
   bascule vers le menu hamburger a 1300px au lieu de 1024px, de facon
   fiable quelle que soit la page.
   -------------------------------------------------------------------------- */
@media(max-width:1200px){
  .nav-center{ display:none !important; }
  .nav-links{ display:none !important; }
  .bretagne-badge{ display:none !important; }
  .nav-burger{ display:flex !important; }
}

/* --------------------------------------------------------------------------
   5. Compteur anime (chiffres cles homepage)
   Le comptage lui-meme est gere en JS (animations.js) sur les elements
   .count-n[data-target] deja presents dans le HTML. Cette regle assure
   juste un alignement numerique stable pendant le comptage.
   -------------------------------------------------------------------------- */
.count-n{
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   Repli global prefers-reduced-motion : neutralise toute transition/
   animation restante au cas ou une regle ci-dessus serait heritee ailleurs.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .fade-in-scroll,
  .hover-lift,
  .nav-cta, .hero-cta, .btn-or-band, .side-cta,
  .nav-center > a::after{
    transition:none !important;
  }
  .hover-lift:hover,
  .nav-cta:hover, .hero-cta:hover, .btn-or-band:hover, .side-cta:hover,
  .nav-cta:active, .hero-cta:active, .btn-or-band:active, .side-cta:active{
    transform:none !important;
  }
}