/* ALPECC — animations de marque (communes à toutes les pages).
   Principe : peu d'effets, lents et précis, qui accompagnent la lecture.
   Tout est désactivé si le visiteur a demandé « réduire les animations ». */

:root {
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --m-orange: #D96E2F;
}

/* 1. Titres : chaque ligne monte derrière un masque, l'une après l'autre */
.m-line { display: block; overflow: hidden; padding-bottom: 0.24em; margin-bottom: -0.24em; }
.m-line > .m-in { display: block; transform: translateY(105%); transition: transform 1.1s var(--m-ease); }
.m-split.m-on .m-line > .m-in { transform: none; }
.m-split { opacity: 1 !important; animation: none !important; }

/* 2. Signature : un trait de pinceau orange se dessine sous le mot en italique */
.m-brush { position: relative; display: inline-block; }
.m-brush svg { position: absolute; left: -2%; bottom: -0.16em; width: 104%; height: 0.32em; overflow: visible; pointer-events: none; }
.m-brush path { fill: none; stroke: var(--m-orange); stroke-width: 3; stroke-linecap: round; opacity: 0.85;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--m-ease) 0.5s; }
.m-on .m-brush path, .m-brush.m-on path { stroke-dashoffset: 0; }

/* 3. Filets : le trait orange s'étire depuis la gauche (ou le centre) */
.divider-gold.m-draw { transform: scaleX(0); transform-origin: left center; transition: transform 1.2s var(--m-ease) 0.2s; }
.manifeste .divider-gold.m-draw { transform-origin: center; }
.divider-gold.m-draw.m-on { transform: scaleX(1); }

/* 4. Boutons principaux : un reflet de lumière traverse au survol */
.hero-cta-primary, .contact-action--primary, .nav-cta, .btn-submit { position: relative; overflow: hidden; isolation: isolate; }
.hero-cta-primary::after, .contact-action--primary::after, .nav-cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.9s var(--m-ease);
}
.hero-cta-primary:hover::after, .contact-action--primary:hover::after, .nav-cta:hover::after { transform: translateX(120%); }

/* 5. Cartes de services : légère élévation et filet orange qui se trace sous le titre */
@media (hover: hover) {
  .service-card, .services-promesses .serv-item { transition: transform 0.6s var(--m-ease), box-shadow 0.6s var(--m-ease), background 0.55s var(--m-ease); }
  .service-card:hover, .services-promesses .serv-item:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(15,31,54,0.35); z-index: 1; }
  .service-name, .serv-item-name-promise { background: linear-gradient(var(--m-orange), var(--m-orange)) no-repeat 0 100% / 0 1px; padding-bottom: 4px; transition: background-size 0.7s var(--m-ease), color 0.55s var(--m-ease); }
  .service-card:hover .service-name, .services-promesses .serv-item:hover .serv-item-name-promise { background-size: 64px 1px; }
}

/* 6. Questions fréquentes : ouverture fluide (la hauteur est animée par motion.js) */
.faq-answer.m-anim { overflow: hidden; }

/* 7. Bandeau d'accueil : le fond glisse plus lentement que le texte (profondeur) */
.m-parallax { will-change: transform; }

/* 8. Bouton « Appeler » (mobile) : apparaît en douceur une fois l'accueil passé */
@media (max-width: 768px) {
  .call-bar.m-hide { transform: translateY(110%); }
  .call-bar { transition: transform 0.6s var(--m-ease); }
}

@media (prefers-reduced-motion: reduce) {
  .m-line > .m-in { transform: none !important; transition: none !important; }
  .m-brush path { stroke-dashoffset: 0 !important; transition: none !important; }
  .divider-gold.m-draw { transform: none !important; }
  .call-bar.m-hide { transform: none !important; }
}