/* ── HERO DES PAGES CIBLES (conciergerie.html, lmnp-gites.html) ──────────────
   Dédié à ces pages plutôt que de dépendre silencieusement de .about-hero h1
   dans about.css. Même rendu pour l'instant ; à ajuster ici si besoin. */

.hero-badge {
  font-size: 0.8rem;
}

/* Même traitement que le H1 de la page d'accueil (index.css .hero-title) :
   texte blanc plein, un seul mot-clé en dégradé animé, entrée en 2 lignes. */
.about-hero h1 {
  font-size: 4rem; font-weight: 900;
  letter-spacing: -0.05em; line-height: 1.08;
  color: #f8fafc; margin-bottom: 1.25rem;
  background: none; -webkit-text-fill-color: initial;
  animation: fadeUp 0.7s 0.18s cubic-bezier(.22,1,.36,1) both, glowPulse 4s 1.5s ease-in-out infinite;
}
.hero-title-grad {
  background: linear-gradient(270deg, #93c5fd 0%, #a78bfa 25%, #f472b6 50%, #a78bfa 75%, #93c5fd 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradShift 5s ease infinite;
  display: inline-block;
}
.about-hero h1 .line1,
.about-hero h1 .line2 { display: block; }
@keyframes glowPulse {
  0%,100% { text-shadow: 0 0 40px rgba(167,139,250,0.0); }
  50%      { text-shadow: 0 0 60px rgba(167,139,250,0.35), 0 0 120px rgba(147,197,253,0.2); }
}
@keyframes gradShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (max-width: 520px) {
  .about-hero h1 { font-size: 2rem; }
}