/* ===================================================================
   STYLE GLOBAL DE LA PAGE ÉVÉNEMENT
   =================================================================== */

/* Conteneur principal de la page pour un espacement cohérent */
.single_event_listing .wpem-single-event-wrapper {
  padding-top: 2rem;
  gap: 3rem; /* Espace entre l'image et le contenu */
}

/* Bloc principal de l'événement avec bordure et ombre */
.single_event_listing {
  padding: 20px; /* espace intérieur */
  border: 1px solid #ccc; /* la bordure grise existante */
  border-radius: 8px; /* option : arrondir un peu les coins */
  background: #fff; /* option : fond blanc pour mieux détacher */
  box-sizing: border-box; /* évite que le padding élargisse le bloc */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* petite ombre douce */
}

/* Supprime la bordure grise du wrapper principal */
.wpem-single-event-wrapper {
  border: none !important; /* force la suppression de la bordure */
  box-shadow: none; /* si jamais il y a aussi une ombre */
  background: transparent; /* optionnel : supprime un fond forcé */
}

/* ===================================================================
   TITRES AVEC FALLBACKS GRADIENTS COMPLETS
   =================================================================== */

/* --------------------------------
   H1 TITRE PRINCIPAL DE LA PAGE
   -------------------------------- */

/* Titre H1 de l'en-tête de page - VERSION COMPLÈTE AVEC FALLBACKS */
h1.entry-title {
  font-size: 3.2rem; /* Très grand pour l'impact */
  font-weight: 900; /* Ultra-bold */
  line-height: 1.1;
  letter-spacing: -0.025em; /* Espacement serré pour l'élégance */
  margin-bottom: 1.5rem;
  text-align: center;
  padding: 0 1rem;

  /* FALLBACK : Couleur solide pour tous les navigateurs */
  color: #0f172a;

  /* FALLBACK : Ombre classique pour la profondeur */
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);

  /* MODERN : Gradient (seulement si supporté) */
  background: linear-gradient(
    135deg,
    #0f172a 0%,
    #1e293b 30%,
    #334155 70%,
    #475569 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* MODERN : Filter drop-shadow (meilleur que text-shadow) */
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12));

  /* Animation d'apparition */
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
  animation-delay: 0.1s;
}

/* Effet hover sur le H1 */
h1.entry-title:hover {
  transform: translateY(-3px) scale(1.01);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}

/* Fallback automatique pour H1 si gradient non supporté */
@supports not (background-clip: text) or not (-webkit-background-clip: text) {
  h1.entry-title {
    color: #0f172a !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    filter: none !important;
  }
}

/* --------------------------------
   H3 TITRE DE L'ÉVÉNEMENT
   -------------------------------- */

/* Titre principal de l'événement - VERSION COMPLÈTE AVEC FALLBACKS */
.wpem-single-event-short-info .wpem-event-title h3.wpem-heading-text {
  font-size: 2.8rem; /* Encore plus grand */
  font-weight: 900; /* Plus bold */
  margin-bottom: 0.8rem;
  line-height: 1.1;
  letter-spacing: -0.02em; /* Espacement des lettres plus serré */

  /* FALLBACK : Couleur solide */
  color: #1e293b;

  /* FALLBACK : Ombre classique */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  /* MODERN : Gradient */
  background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* MODERN : Filter */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));

  /* Animation d'apparition */
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.2s;
}

/* Effet hover sur le titre H3 */
.wpem-single-event-short-info .wpem-event-title h3.wpem-heading-text:hover {
  transform: translateY(-2px);
  transition: transform 0.3s ease;
}

/* Fallback automatique pour H3 si gradient non supporté */
@supports not (background-clip: text) or not (-webkit-background-clip: text) {
  .wpem-single-event-short-info .wpem-event-title h3.wpem-heading-text {
    color: #1e293b !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.08) !important;
    filter: none !important;
  }
}

/* --------------------------------
   ANIMATIONS COMMUNES
   -------------------------------- */

/* Animation d'apparition pour les titres */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Version responsive pour mobile */
@media (max-width: 768px) {
  h1.entry-title {
    font-size: 2.5rem;
    letter-spacing: -0.02em;
  }

  .wpem-single-event-short-info .wpem-event-title h3.wpem-heading-text {
    font-size: 2.2rem;
  }
}

/* ===================================================================
   COLONNE DE GAUCHE : IMAGE DE L'ÉVÉNEMENT AMÉLIORÉE
   =================================================================== */

/* Container de l'image avec ombre d'attache élégante */
.wpem-single-event-images {
  /* Ombre multicouche pour effet réaliste */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07),
    /* Ombre proche */ 0 1px 3px rgba(0, 0, 0, 0.1),
    /* Ombre très proche */ 0 15px 35px rgba(0, 0, 0, 0.08),
    /* Ombre de profondeur */ 0 5px 15px rgba(0, 0, 0, 0.06); /* Ombre intermédiaire */

  border-radius: 20px; /* Coins plus arrondis pour modernité */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Animation fluide */
  overflow: hidden; /* Évite les débordements */
}

/* Effet hover sur le container d'image */
.wpem-single-event-images:hover {
  transform: translateY(-4px) scale(1.02); /* Lift + zoom léger */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08),
    0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Images avec amélioration des bords et transitions */
.wpem-single-event-images .wpem-event-single-image-wrapper img,
.wpem-single-event-images .wpem-slider-items img {
  border-radius: 20px; /* Synchronisé avec le container */
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease; /* Animation plus douce */
}

/* Zoom subtil de l'image au hover */
.wpem-single-event-images:hover img {
  transform: scale(1.05); /* Zoom léger de l'image */
}

/* --------------------------------
   LAYOUT RESPONSIVE DE L'IMAGE
   -------------------------------- */

/* Largeur minimale de 600px pour l'image sur grands écrans */
@media (min-width: 1200px) {
  .wpem-single-event-wrapper > .wpem-row > .wpem-col-md-5 {
    flex: 0 0 600px; /* Base fixe */
    max-width: 600px;
  }
  .wpem-single-event-wrapper > .wpem-row > .wpem-col-md-7 {
    flex-grow: 1; /* Le contenu prend le reste de la place */
  }
}

/* Suppression des points de navigation du slider */
.wpem-single-event-slider .slick-dots,
button[id^="slick-slide-control"] {
  display: none !important;
}

/* ===================================================================
   COLONNE DE DROITE : CONTENU DE L'ÉVÉNEMENT
   =================================================================== */

/* Nom de l'organisateur */
.wpem-event-organizer-name {
  font-size: 1rem;
  color: #6b7280;
  margin-bottom: 1.5rem;
}

/* Contenu de la description principale */
.wpem-single-event-body-content {
  margin-top: 2rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #374151;
}

.wpem-single-event-body-content p {
  margin-bottom: 1rem;
}

/* ===================================================================
   SIDEBAR AVEC OMBRE D'ATTACHE
   =================================================================== */

/* Container principal de la sidebar avec ombre élégante */
.wpem-single-event-body-sidebar {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  transition: box-shadow 0.3s ease;
}

/* Effet hover sur la sidebar */
.wpem-single-event-body-sidebar:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12),
    0 12px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* --------------------------------
   CONTENU DE LA SIDEBAR
   -------------------------------- */

/* Container principal des informations */
.wpem-single-event-sidebar-info {
  background: #f9fafb; /* Fond légèrement grisé */
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  margin-top: 1.5rem;
  font-family: "Inter", "Segoe UI", Roboto, sans-serif;
}

/* Titres de section (Date, Lieu, etc.) */
.wpem-single-event-sidebar-info h3.wpem-heading-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: #4b5563;
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wpem-single-event-sidebar-info h3.wpem-heading-text:after {
  display: none;
}

/* --------------------------------
   ICÔNES POUR CHAQUE SECTION
   -------------------------------- */

/* Icône pour la section "Date et heure" */
h3.wpem-heading-text:has(+ .wpem-event-date-time)::before {
  content: "📅";
}

/* Icône pour la section "Commune" */
.event-commune-header h3.wpem-heading-text::before {
  content: "📍";
}

/* Icône pour la section "Catégorie d'événement" */
.event-meta-block h3.wpem-heading-text::before {
  content: "📂";
}

/* Alternative plus spécifique pour les catégories si nécessaire */
h3.wpem-heading-text:has(+ .event-meta-content)::before {
  content: "📂";
}

/* Si vous avez une section pour les types d'événements */
h3.wpem-heading-text:has(+ div .event-types)::before {
  content: "🏷️";
}

/* --------------------------------
   BLOCS D'INFORMATIONS
   -------------------------------- */

/* Blocs d'informations (Date, Adresse...) */
.wpem-event-date-time,
.event-address {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.5;
}

/* Suppression de l'icône emoji en ::after */
.wpem-event-date-time::after {
  display: none;
}

.event-address {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --------------------------------
   LIENS ET BOUTONS
   -------------------------------- */

/* Lien "Voir sur la carte" */
.event-address .map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #eff6ff;
  color: #2563eb;
  text-decoration: none;
  transition: all 0.2s ease;
}

.event-address .map-link:hover {
  background: #dbeafe;
  color: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* --------------------------------
   COMMUNE ET CATÉGORIES
   -------------------------------- */

/* Commune, Catégories & Types */
.event-commune-header {
  margin-bottom: 1rem; /* Plus d'espace sous le nom de la commune */
}

.event-commune-name,
.event-meta-content a {
  padding: 6px 12px;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.event-commune-name {
  color: #1d4ed8;
  background: #dbeafe;
}

/* Catégories d'événements - État normal */
.event-meta-content a {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f1aeb5;
}

/* Catégories d'événements - État survol (CORRIGÉ) */
.event-meta-content a:hover {
  background: #ffabb2;
  color: #4c1218 !important; /* Force la couleur pour éviter les conflits */
  border: 1px solid #ff4888; /* Une seule déclaration border */
  transform: translateY(-1px); /* Petit effet de lift au survol */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* ===================================================================
   BOUTON D'INSCRIPTION PRINCIPAL
   =================================================================== */

.event_registrations .wpem-event-registration-button {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #2563eb; /* Bleu vif */
  color: #ffffff !important;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 16px;
  border-radius: 12px;
  text-decoration: none;
  margin: 1.5rem 0;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.event_registrations .wpem-event-registration-button:hover {
  background-color: #1d4ed8; /* Bleu plus foncé */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

/* ===================================================================
   CLASSE DE TEST POUR GRADIENT (DEBUG)
   =================================================================== */

/* Test simple pour vérifier le support des gradients */
.gradient-test {
  background: linear-gradient(45deg, red, blue);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: red; /* Fallback visible si gradient échoue */
}