/**
 * Theme Name:    mdewy
 * Author:         Kadence WP
 * Template:       kadence
 * Text Domain:	   mdewy
 * Description:    Kadence child Theme
 */



/* Page publication */

    /* Start: Recommended Isotope styles */


/* Styles par défaut pour le menu de filtrage */
#filters {
    list-style-type: none;
    padding: 0;
    text-align: center; /* Centrer le menu par défaut */
}

#filters li {
    display: inline-block;
    margin: 0 10px; /* Espacement entre les éléments */
}

#filters li a {
    font-family: "Myriad Pro light", Helvetica, sans-serif;
    color: #93278F;
    padding: 5px 10px;
    text-decoration: none;
	border: 1px solid #93278F;
    
}

ul#filters li a:hover
 {
    background:#BFD4B0!important;
    color: #fff!important;
    text-decoration: none;
}


.active-category {
    background-color: #BFD4B0; /* Couleur de fond pour l'élément actif */
    color: #fff !important; /* Couleur du texte pour l'élément actif */
}




.item {
	width:31%;
	margin: 1%;
	border:2px solid #D9F297;
    overflow: hidden;
    position: relative;
    text-align: center;
    /*box-shadow: 2px 2px 5px #000;*/
    cursor: default;
	font-size: 0.9em;
	
    
    
}
.item .mask{
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
	
}
.item img {
    display: block;
    position: relative;
	 max-width: 100%; /* Assure que l'image ne dépasse pas la largeur de son conteneur */
    height: 250px; 

}
.item h2 {
	text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 1em;
    padding: 10px;
	width:100%;
    background: rgba(0, 0, 0, 0.2);
}


.item p {
	font-size: 0.9em;
    font-family: Georgia, serif;
    font-style: italic;
    position: relative;
    color: #fff;
    text-align: center;
}



#isotope-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Ajoute de l'espace entre les éléments */
}



.view-first {
    position: relative;
    overflow: hidden; /* Pour cacher les débordements lors du zoom */
	
}

.view-first img {
    transition: transform 0.3s ease; /* Animation de zoom */
	
	
}

.view-first:hover img {
    transform: scale(1.1); /* Zoom de 10% au survol */
	
}

.mask {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0); /* Fond semi-transparent */
    color: white;
    padding: 10px;
    opacity: 1;
    transition: opacity 0.3s ease; /* Animation d'apparition */
	display: flex;
	justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
	height: 100%; /* Prendre toute la hauteur de la zone */
}

.view-first:hover .mask {
    opacity: 1; /* Affiche le masque au survol */
}

.view-first a {
    display: block; /* Rendre le lien cliquable sur toute la zone */
    height: 100%; /* Prendre toute la hauteur */
    width: 100%; /* Prendre toute la largeur */
}

.mask p {
    position: absolute;
    bottom: 10px; /* Ajustez la distance du bas selon vos besoins */
    right: 10px; /* Ajustez la distance de la droite selon vos besoins */
    margin: 0; 
}
.category-label {
	font-size: 0.8em;
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 10px;
    color: #fff; /* Couleur du texte */
    font-weight: bold; /* Mettre le texte en gras */
    z-index: 10; /* Assurez-vous qu'il soit au-dessus des autres éléments */
	 /* box-shadow: 2px 2px 5px #000;*/

}



@media (max-width: 800px) {
    .item {
        width: 48%; /* Deux articles par ligne sur tablette */
    }
	 #filters {
        display: flex; /* Utiliser flexbox pour un alignement différent */
        flex-direction: column; /* Aligner les éléments en colonne */
        align-items: center; /* Centrer les éléments */
    }

    #filters li {
        margin: 5px 0; /* Espacement vertical */
		 width: 100%; /* Prendre toute la largeur */
    }
	 #filters li a {
        display: block; /* Rendre le lien cliquable sur toute la largeur */
        text-align: center; /* Centrer le texte */
    }
}

@media (max-width: 480px) {
    .item {
        width: 100%; /* Un article par ligne sur smartphone */
    }
	
	 #filters {
        display: block; /* Afficher en bloc pour un affichage simple */
        text-align: left; /* Alignement à gauche */
    }

    #filters li {
        margin: 5px 0; /* Espacement vertical */
        width: 100%; /* Prendre toute la largeur */
    }

    #filters li a {
        display: block; /* Rendre le lien cliquable sur toute la largeur */
        text-align: center; /* Centrer le texte */
    }
}







 /* Page qui suis-je */

.titres-page-qui-suis-je {
    display: flex; /* Ajoutez cette ligne */
    align-items: center; /* Aligne verticalement les éléments */
	font-family: "Montserrat", "Helvetica", sans-serif;
	
}

.titres-page-qui-suis-je:before {
    margin: 10px 10px 0px 0px;
    content: "";
    text-shadow: none;
    background-image: url('https://www.sylvainlebert.fr/mdewy/wp-content/uploads/2025/05/fond-titre-gauche.png') ;
	 background-repeat: no-repeat; /* Empêche la répétition de l'image */
   background-position: center; /* Centre l'image dans l'élément */
    background-size: contain;
    display: block;
    width: 130px;
    height: 100px;
}

.titres-page-qui-suis-je:after {
    margin: 0px 0px 0px 10px;
    content: "";
    text-shadow: none;
    background-image: url('https://www.sylvainlebert.fr/mdewy/wp-content/uploads/2025/05/fond-titre-droit.png') ;
	 background-repeat: no-repeat; /* Empêche la répétition de l'image */
   background-position: center; /* Centre l'image dans l'élément */
    background-size: contain;
    display: block;
    width: 130px;
    height: 100px;
}









 /* Page accueil  */
 
 
 
 /* popup des evenements  */
 
 
#event-popup {
    position: fixed;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7); /* Réduction de 30 % */
    background-color: #ffffff; /* Couleur de fond blanche */
    border: 2px solid #ccc; /* Bordure verte */
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Ombre plus douce */
    border-radius: 10px; /* Coins arrondis */
    max-width: 400px; /* Largeur maximale */
    text-align: center; /* Centrer le texte */
    animation: popIn 0.9s forwards; /* Appliquer l'animation */
}

@keyframes popIn {
    from {
        transform: translate(-50%, -50%) scale(0); /* Échelle initiale */
        opacity: 0; /* Opacité initiale */
    }
    to {
        transform: translate(-50%, -50%) scale(0.7); /* Échelle finale réduite à 70 % */
        opacity: 1; /* Opacité finale */
    }
}




#event-popup h2 {
    color: #006837; /* Couleur du titre principal */
    font-size: 26px; /* Taille de police */
    margin-bottom: 15px; /* Espacement en bas */
    font-family: 'Arial', sans-serif; /* Police moderne */
}

#event-popup h3 {
    color: #333; /* Couleur du titre de l'événement */
    font-size: 25px; /* Taille de police */
    margin: 10px 0; /* Espacement */
}

#event-popup p {
    color: #555; /* Couleur du texte */
    font-size: 22px; /* Taille de police */
    margin: 5px 0; /* Espacement */
}

.thumbnail-pop-up img {
    width: 100%; /* Image responsive */
    height: auto; /* Conserver les proportions */
    border-radius: 5px; /* Coins arrondis pour l'image */
    margin-bottom: 15px; /* Espacement en bas de l'image */
}

#event-popup #close-popup {
    position: absolute; /* Positionner le bouton de fermeture */
    top: 7px; /* Ajustez selon vos besoins */
    right: 7px; /* Ajustez selon vos besoins */
    cursor: pointer; /* Curseur pointer pour le bouton */
}

#details-button {
	width:100%;
    display: inline-block; /* Affichage en bloc pour le bouton */
    margin-top: 10px; /* Espacement en haut */
    background-color: #006837; /* Couleur de fond */
    color: #fff; /* Couleur du texte */
    padding: 10px 20px; /* Espacement */
    border-radius: 5px; /* Coins arrondis */
    text-decoration: none; /* Pas de soulignement */
    transition: background-color 0.3s; /* Transition pour l'effet hover */
	font-size: 20px;
}

#details-button:hover {
    background-color: #004d29; /* Couleur de fond au survol */
}

#overlay-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Couleur noire avec transparence */
    z-index: 999; /* Doit être en dessous de la pop-up */
    display: none; /* Masqué par défaut */
}



/* Media query pour les écrans de moins de 768px (tablettes et smartphones) */
@media (max-width: 768px) {
    #event-popup {
        width: 90%; /* Largeur de la pop-up à 90% de l'écran */
        max-width: none; /* Supprime la largeur maximale */
        padding: 15px; /* Réduit le padding */
    }

    #event-popup h2 {
        font-size: 20px; /* Réduit la taille du titre */
    }

    #event-popup h3 {
        font-size: 18px; /* Réduit la taille du sous-titre */
    }

    #event-popup p {
        font-size: 14px; /* Réduit la taille du texte */
    }

    #details-button {
        padding: 8px 16px; /* Réduit le padding du bouton */
    }
}

/* Media query pour les écrans de moins de 480px (smartphones) */
@media (max-width: 500px) {
    #event-popup {
        width: 95%; /* Ajuste la largeur à 95% pour les petits écrans */
   }

    #event-popup h2 {
        font-size: 18px; /* Réduit encore plus la taille du titre */
    }

    #event-popup h3 {
        font-size: 16px; /* Réduit encore plus la taille du sous-titre */
    }

    #event-popup p {
        font-size: 13px; /* Réduit encore plus la taille du texte */
    }

    #details-button {
        width: 100%; /* Rendre le bouton plein largeur */
    }
	
}








 
 
 .ico-accueil {
    display: inline-block; /* Pour s'assurer que l'icône s'affiche correctement */
    width: 35px; /* Ajustez la largeur selon vos besoins */
    height: 35px; /* Ajustez la hauteur selon vos besoins */
    background-image: url('http://mariedewynter.fr/wp-content/uploads/2025/05/ico-accueil.png'); /* Remplacez par l'URL de votre icône */
    background-size: contain; /* Pour que l'icône s'adapte à la taille de l'élément */
    background-repeat: no-repeat; /* Pour éviter que l'image ne se répète */
    vertical-align: middle; /* Pour aligner l'icône avec le texte, si nécessaire */
}


 .ico-accueil:hover {
   
    background-image: url('http://mariedewynter.fr/wp-content/uploads/2025/05/ico-accueil-hover.png'); 
   
}



.bouton-action{
  
  transition: all 0.5s;
}

.bouton-action:after {
  content: '»';
  position: absolute;
  opacity: 0;  
  top: -12px;
  right: -2px;
  transition: 0.5s;
  font-size: 2em;
}

.bouton-action:hover{
  padding-right: 50px;
  padding-left:8px;
}

.bouton-action:hover:after {
  opacity: 1;
  right: 10px;
}
 

.zoom-effect {
    position: relative;
    overflow: hidden;
    text-align: center; /* Centrer le texte sous l'image */
}

.zoom-effect img {
    transition: transform 0.3s ease; /* Transition pour l'effet de zoom */
}

.zoom-effect:hover img {
    transform: scale(1.1); /* Zoom sur l'image */
}

.zoom-effect:hover p {
    transform: scale(1.1); /* Zoom sur le texte */
    transition: transform 0.3s ease; /* Transition pour le texte */
}

/*.effet-titres {
  display: grid;
  grid-template-columns: minmax(50px, 1fr) auto minmax(50px, 1fr);
  align-items: center;
  text-align: center;
  gap: 3px;
}

.effet-titres::before, .effet-titres::after {
  content: '';
  border-top: 6px double;
}
*/







/* Page Evenements  */


.event-container {
display: flex;
flex-direction: row; /* Disposition en ligne par défaut */
background-color: #f0f0f0; /* Couleur de fond du rectangle */
border: 1px solid #ccc; /* Bordure du rectangle */
margin: 20px 0; /* Espacement entre les événements */
border-radius: 10px; /* Coins arrondis */
position: relative; /* Nécessaire pour positionner les pseudo-éléments */
height:auto;

}

.event-container:before,
.event-container:after {
content: '';
position: absolute;
width: 50%;
height: 60%;
z-index: -1; /* Pour que l'ombre soit derrière le conteneur */
}

.event-container:before {
bottom: 30px;
left: 20px;
transform: rotate(-5deg);
box-shadow: 7px 10px 20px #9d9c9c;
}

.event-container:after {
bottom: 30px;
right: 20px;
transform: rotate(5deg);
box-shadow: -7px 10px 20px #9d9c9c;
}

.event-content {
width: 70%; /* 2/3 du rectangle */
padding: 20px; /* Espacement interne */
}

.event-title span {
display: block; /* Date au-dessus du titre */
font-size: 0.9em; /* Taille de la date */
color: #666; /* Couleur de la date */
}

.event-title h2 {
margin: 10px 0; /* Espacement autour du titre */
font-size: 1em;	
}

.event-excerpt {
margin: 10px 0; /* Espacement autour de l'extrait */
font-size: 0.9em;	
}

.external-button {
background-color: #8E3089; /* Couleur du bouton */
color: white; /* Texte en blanc */
padding: 10px 15px; /* Espacement interne du bouton */
border-radius: 5px; /* Coins arrondis du bouton */
text-decoration: none; /* Pas de soulignement */
align-self: center; /* Centrer le bouton verticalement */
margin-right: 2%; /* Pousser le bouton à droite */
width:200px;
text-align:center;
}

.thumbnail-background {
position: absolute; /* Positionner l'image en arrière-plan */

top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0; /* Mettre l'image derrière le texte */
}

.event-date {
position: relative; /* Nécessaire pour positionner les éléments enfants */
border-radius: 10px; /* Coins arrondis */
color: white; /* Texte en blanc */
width: 33%; /* 1/3 du rectangle */
display: flex;
justify-content: center;
align-items: center;
font-size: 2em; /* Taille de la date */

}

.date-overlay {
position: relative; /* Pour que le texte soit au-dessus de l'image */
width:100%;
text-align:center;
background: rgba(0, 0, 0, 0.4);
z-index: 1; /* S'assurer que le texte est au-dessus */
}

.thumbnail-background img {
height: 100%;
border-radius:10px 0 0 10px;
}

/* Styles pour les tablettes */
@media (max-width: 768px) {
    .event-container {
			 flex-direction: column; /* Passer à une disposition en colonne */
			border-radius: 10px  ; /* Coins arrondis */
			padding-bottom:20px
		
    }
.event-container:before{
	box-shadow:none;
    }	
	.event-container:after{
	box-shadow:none;
    }	

	
	

    .event-date {
				  width: 100%; /* Prendre toute la largeur */
        font-size: 1.5em; /* Ajuster la taille de la date */
			
    }


    .event-content {
			position:relative;
			z-index:2;
        width: 100%; /* Prendre toute la largeur */
    }
.thumbnail-background {
    position: relative; /* ou absolute selon votre besoin */
    z-index: 1;
	
}
.date-overlay {
    position: absolute; /* Assurez-vous que c'est positionné */
    z-index: 4; /* Mettre un z-index supérieur */
	font-size: 2em;
}

	
 .thumbnail-background img {
			 width: 100%; /* L'image prend toute la largeur */
        height: auto; /* Garder le ratio d'aspect */
				border-radius: 10px 10px 0 0  ; /* Coins arrondis */
    }
}

/* Styles pour les smartphones */
@media (max-width: 480px) {
    .event-title h2 {
        font-size: 1.2em; /* Ajuster la taille du titre */
    }

    .event-excerpt {
        font-size: 0.8em; /* Ajuster la taille de l'extrait */
    }

    .external-button {
        width: 70%; /* Le bouton prend toute la largeur */
        margin: 10px 0; /* Espacement autour du bouton */
    }
	
	.date-overlay {
    	font-size: 1em;
}
	
	
}






/* Page prestations */


/* Footer  */

.site-footer-section {
  z-index: 0;