/* ============================================================
   LIBOLI COMMUNICATION — Styles custom partagés
   Design system : "Prestige Communication"
   (complète Tailwind CDN configuré dans chaque page)
   ============================================================ */

/* ---------- Hero (accueil) : UNE seule image de fond, immobile, responsive ---------- */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/hero.webp');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

@media (max-width: 480px) {
  .hero-bg { background-image: url('../images/hero-480.webp'); }
}

@media (min-width: 481px) and (max-width: 768px) {
  .hero-bg { background-image: url('../images/hero-768.webp'); }
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.92));
}

/* ---------- Titres rotatifs du hero ---------- */
.headline-slide {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease-in-out;
  position: absolute;
  width: 100%;
  text-align: center;
}

.headline-slide.active {
  opacity: 1;
  transform: translateY(0);
  position: relative;
}

/* ---------- Motif grille discret ---------- */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(198, 197, 213, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(198, 197, 213, 0.1) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ---------- Design plat : pas d'ombres sur les cartes ---------- */
.service-card {
  transition: background-color 0.3s ease;
}

.service-card:hover {
  background-color: #e2e9f9;
}

/* ---------- Retour du formulaire ---------- */
.form-feedback {
  display: none;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  font-size: 15px;
}

.form-feedback.success {
  display: block;
  background-color: #e6f6ec;
  color: #14632e;
}

.form-feedback.error {
  display: block;
  background-color: #ffdad6;
  color: #93000a;
}

/* ---------- Icônes Material remplies ---------- */
.icon-fill {
  font-variation-settings: 'FILL' 1;
}

.icon-fill-xl {
  font-size: 40px;
  font-variation-settings: 'FILL' 1;
}

/* ---------- FAQ (accordéon natif <details>) ---------- */
.faq-item summary {
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  transition: transform 0.3s ease;
}

.faq-item[open] .faq-icon {
  transform: rotate(180deg);
}

/* ---------- Menu mobile ---------- */
.mobile-menu {
  display: none;
}

.mobile-menu.open {
  display: block;
}

/* ---------- Texte justifié ---------- */
.text-justify {
  text-align: justify;
}

/* ---------- Cartes de choix du canal de contact ---------- */
/* Design épuré : bordure fine et fixe, aucun effet au survol. */
.channel-card {
  border: 1px solid #dfe3ee;
}

/* ---------- Icône téléphone fixe (images/telephone-fixe.webp) ---------- */
/* Le tracé du fichier est noir : on le force en blanc pour les fonds marine. */
.icone-tel-fixe {
  filter: brightness(0) invert(1);
}

/* ---------- Lien d'évitement (accessibilité clavier) ---------- */
/* Invisible tant qu'il n'a pas le focus, puis affiché en haut de page. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background-color: #00003c;
  color: #ffffff;
  font-size: 14px;
  border-radius: 0 0 0.5rem 0;
}

.skip-link:focus {
  left: 0;
}

/* ---------- Bouton flottant WhatsApp ---------- */
.fab-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background-color: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 60, 0.18);
  transition: background-color 0.2s ease;
}

.fab-whatsapp:hover,
.fab-whatsapp:focus-visible {
  background-color: #1da851;
  outline: none;
}

@media (min-width: 768px) {
  .fab-whatsapp {
    right: 32px;
    bottom: 32px;
  }
}

/* ============================================================
   CORRECTIONS RESPONSIVE (Mobile-first)
   ============================================================ */

/* ---------- Zones de clic minimales 48px (mobile & tablette) ---------- */
/* Recommandations Apple HIG / Google Material : cibles tactiles >= 48px */
@media (max-width: 1023px) {
  footer a:not([class*="py-"]):not([class*="rounded-full"]) {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  footer .flex a[aria-label] {
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .mobile-menu a {
    padding-top: 12px;
    padding-bottom: 12px;
    display: block;
  }

  /* Liens mailto, tel, WhatsApp */
  #contenu a[href*="mailto"],
  #contenu a[href*="tel:"],
  #contenu a[href*="wa.me"] {
    padding-top: 12px;
    padding-bottom: 12px;
    display: inline-flex;
    align-items: center;
  }

  /* Liens texte simples sans padding (Découvrir l'agence, En savoir plus, Obtenir l'itinéraire…) */
  #contenu a.underline,
  #contenu a:not([class*="bg-"]):not([class*="rounded-full"]):not([class*="px-"]):not([href*="mailto"]):not([href*="tel:"]):not([href*="wa.me"]) {
    padding-top: 12px;
    padding-bottom: 12px;
    display: inline-block;
  }

  .service-card a {
    padding-top: 12px;
    padding-bottom: 12px;
    display: inline-block;
  }
}

/* ---------- Coupure des mots longs dans le footer ---------- */
footer a {
  overflow-wrap: break-word;
  word-break: break-word;
}