/* ========================================================
   Ets Poirier — Animations & effets partagés
   ======================================================== */

/* ── 1. HEADER SCROLL ── */
header { transition: background .3s, box-shadow .3s, backdrop-filter .3s; }
header.scrolled {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.13);
}

/* ── 2. NAV — indicateur de lien actif + hover animé ── */
nav a { position: relative; overflow: hidden; }
nav a::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  width: 0; height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: width .25s ease, left .25s ease;
}
nav a:hover::after,
nav a[aria-current="page"]::after {
  width: 70%;
  left: 15%;
}

/* ── 3. HAMBURGER — animation en croix ── */
.nav-toggle { position: relative; width: 40px; height: 40px; padding: 0 !important; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle .bar {
  display: block; width: 22px; height: 2px;
  background: var(--primary); border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease, top .3s ease;
  position: relative;
}
.nav-toggle.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 4. MENU DRAWER — slide-in animé ── */
.nav-drawer {
  transform: translateY(-10px);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.nav-drawer.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  display: flex !important;
}
.nav-drawer a {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .2s ease, transform .2s ease, background .2s, color .2s;
}
.nav-drawer.open a { opacity: 1; transform: translateX(0); }
.nav-drawer.open a:nth-child(1) { transition-delay: .04s; }
.nav-drawer.open a:nth-child(2) { transition-delay: .08s; }
.nav-drawer.open a:nth-child(3) { transition-delay: .12s; }
.nav-drawer.open a:nth-child(4) { transition-delay: .16s; }
.nav-drawer.open a:nth-child(5) { transition-delay: .20s; }
.nav-drawer.open a:nth-child(6) { transition-delay: .24s; }

/* ── 5. SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.93);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* délais en cascade pour les grilles */
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .40s; }
.reveal-delay-6 { transition-delay: .48s; }

/* ── 6. RIPPLE EFFECT sur les boutons ── */
.btn { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: ripple-anim .5s linear;
  pointer-events: none;
}
@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* ── 7. HERO — animation d'entrée ── */
.hero-anim-1 { animation: fadeSlideUp .7s ease both; animation-delay: .1s; }
.hero-anim-2 { animation: fadeSlideUp .7s ease both; animation-delay: .25s; }
.hero-anim-3 { animation: fadeSlideUp .7s ease both; animation-delay: .4s; }
.hero-anim-4 { animation: fadeSlideUp .7s ease both; animation-delay: .55s; }
.hero-anim-5 { animation: fadeSlideUp .7s ease both; animation-delay: .7s; }
.hero-visual-anim { animation: fadeSlideRight .8s ease both; animation-delay: .3s; }
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── 8. COMPTEUR animé ── */
.count-up { display: inline-block; }

/* ── 9. BADGE pulsation (hero) ── */
.hero-badge { animation: pulseBadge 3s ease-in-out infinite; }
@keyframes pulseBadge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); }
  50%       { box-shadow: 0 0 0 6px rgba(192,57,43,0.12); }
}

/* ── 10. SERVICE CARD — hover enrichi ── */
.service-card { transition: border-color .25s, box-shadow .25s, transform .25s; }
.service-card:hover { transform: translateY(-4px); }
.service-card-img img { transition: transform .5s ease; }
.service-card:hover .service-card-img img { transform: scale(1.07); }

/* ── 11. RÉALISATION CARD ── */
.real-card { transition: transform .3s ease, box-shadow .3s ease; }
.real-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
.real-card img { transition: transform .5s ease; }
.real-card:hover img { transform: scale(1.07); }

/* ── 12. WHY / AVIS CARD ── */
.why-item { transition: transform .25s ease, box-shadow .25s; }
.why-item:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(26,42,74,0.1); }
.avis-card { transition: transform .25s ease, box-shadow .25s; }
.avis-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }

/* ── 13. ZONE TAGS ── */
.zone-tag {
  transition: background .2s, color .2s, transform .2s, border-color .2s;
}
.zone-tag:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* ── 14. BOUTON HEADER ── */
.btn-header { transition: background .2s, transform .15s, box-shadow .2s; }
.btn-header:hover { box-shadow: 0 4px 14px rgba(204,31,31,0.35); }

/* ── 15. SF (service-full) hover ── */
.sf-visual img { transition: transform .5s ease; }
.service-full:hover .sf-visual img { transform: scale(1.04); }

/* ── 16. FOOTER LINK hover + lien actif ── */
.footer-links a, .footer-contact a {
  transition: color .2s, padding-left .2s;
}
.footer-links a:hover, .footer-contact a:hover { padding-left: 4px; }
.footer-links a[aria-current="page"],
.footer-contact a[aria-current="page"] {
  color: #ffffff;
  font-weight: 600;
  padding-left: 6px;
  border-left: 2px solid var(--accent);
}

/* ── 17. PAGE HERO — particule flottante déco ── */
.hero::after,
.hero-page::after,
.page-hero::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204,31,31,0.08) 0%, transparent 70%);
  bottom: -80px; right: -60px;
  pointer-events: none;
  animation: floatOrb 8s ease-in-out infinite;
}
@keyframes floatOrb {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-20px) scale(1.05); }
}

/* ── 18. FAQ details ── */
details { transition: box-shadow .2s; }
details[open] { box-shadow: 0 4px 18px rgba(26,42,74,0.09); }
summary { transition: color .2s; }
details[open] summary { color: var(--accent); }

/* ── 19. Barre de score (avis) ── */
.bar-fill {
  width: 0 !important;
  transition: width 1.2s cubic-bezier(.25,.8,.25,1);
}
.bar-fill.animated { width: var(--target-w) !important; }

/* ── 20. scroll progress bar ── */
#scroll-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--accent);
  z-index: 9999;
  width: 0%;
  transition: width .1s linear;
}