/* Animation métier du bandeau d'accueil (SVG + CSS, sans dépendance) */
/* ---------- commun ---------- */
.anim-metier { position: relative; width: 320px; margin: 0 auto; }
.etiquette {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  background: #ffffff; color: #0b3a8a; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.3px;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25); opacity: 0;
}
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #33cc33; margin-right: 8px; vertical-align: middle; }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- clim ---------- */
  .anim-clim .aiguille { transform-origin: 160px 150px; animation: aiguille 6s ease-in-out infinite; }
  .anim-clim .temp { animation: none; }
  .anim-clim .flocon { opacity: 0; animation: flocon 6s ease-in-out infinite; transform-origin: 160px 262px; }
  .etiquette-clim { animation: etiq 6s ease-in-out infinite; }
  @keyframes aiguille { 0%,8% { transform: rotate(120deg); } 45%,85% { transform: rotate(-35deg); } 100% { transform: rotate(120deg); } }
  @keyframes flocon { 0%,40% { opacity: 0; } 50%,85% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes etiq { 0%,42% { opacity: 0; transform: translate(-50%, 8px); } 52%,88% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 8px); } }

  /* ---------- élec ---------- */
  .anim-elec .manette { transform-origin: center; animation: manette 6s ease-in-out infinite; }
  .anim-elec .m1 { animation-delay: 0.15s; } .anim-elec .m2 { animation-delay: 0.3s; } .anim-elec .m3 { animation-delay: 0.45s; }
  .anim-elec .fil { animation: fil 6s ease-in-out infinite; }
  .anim-elec .halo { animation: halo 6s ease-in-out infinite; }
  .anim-elec .filament { animation: filament 6s ease-in-out infinite; }
  .anim-elec .verre { animation: verre 6s ease-in-out infinite; }
  .etiquette-elec { animation: etiq 6s ease-in-out infinite; }
  @keyframes manette { 0%,15% { transform: translateY(8px); } 25%,88% { transform: translateY(-8px); } 100% { transform: translateY(8px); } }
  @keyframes fil { 0%,22% { stroke-dashoffset: 140; } 38%,88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 140; } }
  @keyframes halo { 0%,36% { fill-opacity: 0; } 44%,88% { fill-opacity: 0.35; } 100% { fill-opacity: 0; } }
  @keyframes filament { 0%,36% { stroke-opacity: 0; } 44%,88% { stroke-opacity: 1; } 100% { stroke-opacity: 0; } }
  @keyframes verre { 0%,36% { fill: #ffffff; fill-opacity: 0.25; } 44%,88% { fill: #ffd54f; fill-opacity: 0.9; } 100% { fill: #ffffff; fill-opacity: 0.25; } }


}

/* ---------- Mise en page du bandeau avec l'animation ---------- */
.hero-grille { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: center; }
.hero-grille .visuel { justify-self: center; padding-bottom: 22px; }
@media (max-width: 860px) { .hero-grille { grid-template-columns: 1fr; } .hero-grille .visuel { transform: scale(0.85); margin: -10px 0 -20px; } }