/* 1. STYLE DES BLOCS DANS LE CALENDRIER */
.mec-calendar-day-events a, 
.mec-event-title a,
.mec-event-anchor {
    display: block !important;
    color: #ffffff !important; 
    padding: 3px 6px 3px 25px !important; /* Marge pour laisser la place à l'icône */
    margin-bottom: 3px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    font-size: 11px !important;
    text-decoration: none !important;
    position: relative !important; /* Nécessaire pour l'icône */
}

/* 2. RÉAFFICHAGE DE L'ICÔNE (À gauche du texte) */
.mec-calendar-day-events i, 
.mec-event-title i {
    display: inline-block !important;
    position: absolute !important;
    left: 5px !important;
    color: #ffffff !important;
    visibility: visible !important;
}

/* 3. COULEURS PAR SLUGS (S'applique aux anciens et nouveaux si l'URL contient le mot) */
a[href*="projection-video"] { background-color: #e74c3c !important; }
a[href*="reunion-de-bureau"] { background-color: #f771e1 !important; }
a[href*="reunion-technique-du-lundi"] { background-color: #86cbd8 !important; }
a[href*="commission"] { background-color: #9b59b6 !important; }
a[href*="rv-et-evenement-particulier"] { background-color: #f39c12 !important; }
a[href*="assemblee-generale"] { background-color: #34495e !important; }
a[href*="rappel"] { background-color: #f1c40f !important; color: #000 !important; }

/* 4. PROTECTION : ON NE TOUCHE PAS AU TITRE DANS LA FICHE DÉTAILLÉE */
.single-mec-events .mec-event-title, 
.single-mec-events h1, 
.single-mec-events h2 {
    color: initial !important; 
    background-color: transparent !important;
}

/* 5. ON CACHE LES PETITS POINTS MEC */
.mec-event-point, .mec-event-color { display: none !important; }










/* 🔍 Barre de recherche */
.search-bar {
  text-align: center;
  margin-bottom: 30px;
}

.search-bar input {
  width: 60%;
  padding: 12px;
  border-radius: 25px;
  border: 1px solid #ccc;
  font-size: 16px;
}

/* 🗂️ Grille des régions */
.regions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* 📦 Bloc région */
.region {
  padding: 15px;
  border-radius: 12px;
  background: #f5f5f5;
}

/* 🎨 Couleurs différentes */
.region1 { background: #ffdddd; }
.region2 { background: #ddffdd; }
.region3 { background: #ddddff; }
.region4 { background: #fff0cc; }
.region5 { background: #e0ccff; }
.region6 { background: #ccffff; }
.region7 { background: #ffd9b3; }
.region8 { background: #e6e6e6; }

/* 📋 Liste clubs */
.clubs {
  list-style: none;
  padding-left: 0;
}

.hidden {
  display: none;
}

.hidden.show {
  display: block;
}

/* 🔘 Bouton */
.toggle-btn {
  margin-top: 10px;
  padding: 5px 10px;
  border: none;
  background: #333;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}




















































.galerie-flip figure {
	position: relative;
	perspective: 1000px;
}

.galerie-flip figure img {
	width: 100%;
	display: block;
	transition: transform .8s ease;
	backface-visibility: hidden;
}

.galerie-flip figure::after {
	content: "CINÉMA";
/* remplace par le mot que tu veux */
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	background: black;
/* couleur du dos */
	color: white;
	transform: rotateY(180deg);
	backface-visibility: hidden;
	transition: transform .8s ease;
}

.galerie-flip figure:hover img {
	transform: rotateY(180deg);
}

.galerie-flip figure:hover::after {
	transform: rotateY(0deg);
}

.page-id-10320 #primary {
	width: 100%;
}

.page-id-13019 #secondary {
	display: none;
}

.page-id-13019 #primary {
	width: 100%;
}

.page-id-12500 #secondary {
	display: none;
}

.page-id-12500 #primary {
	width: 100%;
}

.page-id-12867 #secondary {
	display: none;
}

.page-id-12878 #secondary {
	display: none;
}

.page-id-12878 #primary {
	width: 100%;
}

.page-id-13002 #secondary {
	display: none;
}

.page-id-13002 #primary {
	width: 100%;
}

.mes-4-flips {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.carte-flip {
	width: 450px;
	height: 450px;
	perspective: 1000px;
}

.interieur-flip {
	width: 100%;
	height: 100%;
	position: relative;
	transition: transform .8s;
	transform-style: preserve-3d;
}

.carte-flip:hover .interieur-flip {
	transform: rotateY(180deg);
}

.avant, .arriere {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}

.avant img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.arriere {
	background: black;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	transform: rotateY(180deg);
}