/* Un volet plein écran par service. En cliquant une affiche du carrousel,
   on arrive directement sur SON volet — les deux autres suivent plus bas
   (l'ordre exact est décidé par js/ui.js selon l'affiche choisie).
   Une marge blanche sépare toujours deux volets, même après réorganisation
   (c'est une propriété du volet lui-même, pas un élément séparé — donc ça
   reste correct quel que soit l'ordre). */
#service-panels {
  background: var(--white);
}

.service-panel {
  min-height: 100vh;
  margin-bottom: var(--sp-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  scroll-snap-align: start;
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.service-panel:last-child { margin-bottom: 0; }

.service-panel.is-visible {
  opacity: 1;
  transform: none;
  /* Léger "vent" en continu : l'image entière dérive très doucement — la
     seule chose animable sans que l'illustration soit découpée en calques
     séparés (ciel / plantes) par-dessus lesquels on n'a pas la main. */
  animation: panel-drift 26s ease-in-out infinite;
}

@keyframes panel-drift {
  0%, 100% { background-position: 50% 50%; }
  50% { background-position: 53% 47%; }
}

/* Petit clin d'œil au clic : toute la scène frémit brièvement, comme si
   quelque chose avait bougé dedans. */
.service-panel.is-poked {
  animation: panel-drift 26s ease-in-out infinite, panel-shake 0.6s ease;
}

@keyframes panel-shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-5px, 2px) rotate(-0.6deg); }
  40% { transform: translate(4px, -3px) rotate(0.5deg); }
  60% { transform: translate(-3px, 2px) rotate(-0.3deg); }
  80% { transform: translate(2px, -1px) rotate(0.2deg); }
}

.service-panel--air { background-color: #4E6C82; background-image: url('../images/bg-elagage.webp'); }
.service-panel--terre { background-color: var(--primary); background-image: url('../images/bg-entretien.webp'); }
.service-panel--eau { background-color: #16324F; background-image: url('../images/bg-nettoyage.webp'); }
.service-panel--revalorisation { background-color: #5c5340; background-image: url('../images/bg-hero.webp'); }

.service-panel-inner {
  max-width: 640px;
  padding: var(--sp-lg) var(--sp-md);
  background: rgba(10,14,10,0.32);
  border-radius: var(--radius);
  backdrop-filter: blur(2px);
}

.service-title {
  font-family: var(--font-title);
  font-weight: 800;
  color: var(--white);
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  margin-bottom: var(--sp-sm);
  text-shadow: 0 3px 16px rgba(0,0,0,0.55);
}

.service-desc {
  font-size: 1.05rem;
  opacity: 0.95;
  margin: 0 auto var(--sp-md);
  max-width: 46ch;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.service-note {
  font-size: 0.9rem;
  opacity: 0.85;
  margin: calc(-1 * var(--sp-sm)) auto var(--sp-md);
  max-width: 46ch;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.service-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: var(--sp-lg);
  font-size: 1rem;
}

.service-points li::before { content: "✓"; font-weight: 600; margin-right: 10px; opacity: 0.85; }

.btn-panel {
  background: var(--white);
  color: var(--text);
  font-weight: 500;
  padding: 14px 32px;
}

.btn-panel:hover { background: rgba(255,255,255,0.85); }

@media (max-width: 640px) {
  .service-panel { min-height: auto; padding: var(--sp-xl) 0; }
}