/*!
Theme Name: extra-petitbijou
Template: Extra
Version: 1.0.1
Description: RTheatre Le Petit Bijou Biarritz Theme
Author: ABL Technics
*/

/*! Modifs sur Extra */
.body {color : white;}
.wp-caption{
    background:#0000;
}
.single article,
.page article {
    margin: 0 0 40px;
    padding: 0;
    background: #000;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    color:white; /* Redondant, mais laissé pour la clarté */
    margin-top: 0.2em;

}
.entry-title {
    margin-top:1em;
    text-align: center;
    /* Styles déplacés depuis single-event.php */
    color: white; /* Conserve la couleur blanche */
    font-variant: petite-caps; /* Conserve petite-caps */
    font-size: 2em; /* Conserve la taille */
}
#eo-widget-next-month {
    text-align:right;
    padding-right:3.3em;
}
.wcp-content-wrap{
    text-align:center;
}
@media (max-width: 767px) {
  .menu-secondaire-icones span {
    display: none !important;
  }
}

.telicon {
background-image: url('https://petitbijou-cafetheatre.com/wp-content/uploads/2025/07/icone_tel.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
width:10px;
height:10px;
}
.single article {
    margin:0 0 10px;
    background:#000;
}

.single .post-wrap .post-content, .page .post-wrap .post-content {
    margin:0 0 10px;
    background:#000;
}

.et_pb_menu .et_pb_menu__menu > nav {
    display: flex;
    align-items: inherit; /* Ou 'center', 'flex-start', 'flex-end' selon votre besoin exact */
    width: 100%; /* <<< C'EST LA LIGNE QUI FAIT LA DIFFÉRENCE */
    /* Ajoutez ou ajustez justify-content si vous voulez aligner le contenu à l'intérieur de <nav> */
    /* justify-content: flex-end; */ /* Pour aligner les éléments du menu à droite */
    /* justify-content: center; */    /* Pour centrer les éléments du menu */
}
.et_pb_extra_column_main{
    background:#000;
}

.et_extra_other_module {background-color:#FFF;}
footer#footer { background-color: #444; }

.sficn{
    opacity: 0.9;
}
.input::placeholder,
.textarea::placeholder,
select::placeholder,
textarea::placeholder,
input::placeholder,
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder {
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    font-weight: 400;
}

.et-top-search .et-search-field{
    position: relative;
    margin: 0 10 10px 10px;
    height: 23px;
}


/*! Modifs Event Org */

.eo-fullcalendar .fc-view>table>thead {
    background:#0000004d;
    font-weight:700;
    text-align:center
}

.eo-eb-event-box:hover{ opacity:0.5;}

.eo-event-board-items { margin: 5px; display:inline-block; }
.eo-event-board-items .eo-eb-event-box{z-index: 2; float:left; }
.eo-event-board-items .eo-eb-event-meta-container h1{ display: inline; }
.eo-event-board-items .eo-eb-event-meta-container h2{ display: inline; }
.eo-event-board-items .eo-eb-event-box{ width: 220px; padding: 10px; background:#303030; margin: 15px;opacity:0.91;border-radius: 5px;}
.eo-event-board-more{ cursor:pointer; text-align: center; font-weight:bold; background: #303030; width: 60%; margin:auto; padding:5px; opacity:0.91; border-radius: 5px;}

/*! Modifs Carousel */
.rpc_bg {
    background-color: #ececec00 !important;
    color:white;
}
.wcp-carousel-main-wrap figure.rpc-style-1 figcaption{
    padding : 5px 10px 20px 10px;
}
.wcp-carousel-main-wrap figure.rpc-x {

    font-family: inherit;
    color: #ffffff00;
    position: relative;
    overflow: hidden;
    margin: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1); ;
    color: blue;
    text-align: left;
    font-size: inherit;
    font-weight:bold;
}
.wcp-carousel-main-wrap .slick-list {
    z-index: 0;
}
.slick-prev {
    z-index: 1;
    font-size: 0px;
}
#carousel-172 .slick-prev, #carousel-172 .slick-next {
    z-index: 1;
    font-size: 0px;
}
#carousel-172 .slick-prev, .slick-next {
    z-index: 1;
    font-size: 0px;
}
.fc .fc-toolbar > * > :first-child {

    margin-left: 0;
    margin-right: 0;

}
.fc .fc-toolbar > * > * {

    float: left;
    margin-left: .37em;
    margin-right: .37em;
}

/**! Modifs Fullcalendar */
.fc-toolbar h2 {
color:black;
}

.fc-toolbar .fc-center {
    margin-top: 0.3em;
}

/*! Bouton Réservation */
/* Sandy Buttons */

	a.btn {
		display: block !important; /* Force le bouton sur une ligne à part et s'assure de l'application */
		float: none !important; /* Supprime tout flottement qui pourrait interférer */
		color: #666;
		background-color: #222;
		text-transform: uppercase;
		letter-spacing: 2px;
		border-radius: 1em;
		-moz-border-radius: 1em;
		-webkit-border-radius: 1em;
		border: 1px solid rgba(0,0,0,0.3);
		border-bottom-width: 3px;
		font-size: 1.7em; /* Taille par défaut pour les grands écrans */
		margin: 0 0 20px 0; /* Marge par défaut : haut droite bas gauche. 20px en bas pour l'espace. */
		width: fit-content; /* Le bouton ne prend que la largeur de son contenu */
	}

    a.btn:hover {
        background-color: #e3e3e3;
        border-color: rgba(0,0,0,0.5);
    }

    a.btn:active {
        background-color: #CCC;
        border-color: rgba(0,0,0,0.9);
    }

/* reserv button */
	a.btn.reserv {
		background-color: #876D00;
		border-color: rgba(0,0,0,0.3);
		text-shadow: 0 1px 0 rgba(0,0,0,0.5);
		color: #FFF;
		font-size: 1.7em; /* Conserve la taille pour les grands écrans */
		margin-left: 0; /* Aligne à gauche sur les écrans larges */
		margin-right: auto; /* Pousse le bouton à gauche sur les écrans larges */
		text-align: center; /* Centrer le texte *à l'intérieur* du bouton */
		margin: 0px;
	}
    a.btn.reserv:hover {
        background-color: #876D0090;
        border-color: rgba(0,0,0,0.5);
    }

    a.btn.reserv:active {
        background-color: #876D0080;
        border-color: rgba(0,0,0,0.9);
    }
eo-ABL-thumb {
    Color: white;
font-size: 16px;
    }
.video-responsive {
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}

.video-responsive iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
text-align:center;
}

/* Styles pour le Programme Spectacles */

/* Styles par défaut pour le titre H2 du programme (pour les écrans moyens/grands) */
.programme-month-title {
    text-align: center;
    margin-bottom: 20px;
    width: 100%; /* Assurer que le conteneur prend toute la largeur */
    max-width: 1200px; /* Limite la largeur du conteneur lui-même si nécessaire */
    margin-left: auto; /* Centre le conteneur lui-même */
    margin-right: auto; /* Centre le conteneur lui-même */
    /* float: none; - non nécessaire si le h2 est un élément de bloc par défaut */
}

/* Media Query pour les petits écrans (mobiles) */
@media (max-width: 599px) { /* Applique ces styles quand la largeur de l'écran est de 599px ou moins */
    .programme-month-title {
        text-align: center;
        font-size: 1.5em; /* Taille plus petite pour les mobiles */
        margin-top: 15px; /* Ajuster les marges pour les mobiles */
        margin-bottom: 15px;
    }
    /* Ajustement pour les petits écrans: prix au-dessus du bouton si pas assez de place */
    .spectacle-info-top {
        flex-direction: column; /* Empile les éléments verticalement */
        align-items: center; /* Centre les éléments horizontalement */
    }
    .spectacle-tarif {
        margin-bottom: 10px; /* Ajoute un peu d'espace sous le prix */
    }
}

/* Vous pouvez aussi utiliser min-width si vous préférez une approche "mobile first" plus stricte */
/* @media (min-width: 600px) { ... } */

.month-events-container {
    display: -webkit-box; /* Pour les anciennes versions de Safari */
    display: -webkit-flex; /* Pour les versions plus récentes de Safari de Safari */
    display: flex;
    -webkit-flex-wrap: wrap; /* Préfixe pour flex-wrap */
    flex-wrap: wrap;
    -webkit-box-pack: center; /* Préfixe pour justify-content */
    -webkit-justify-content: center; /* Préfixe pour justify-content */
    justify-content: center;
    -webkit-gap: 15px; /* Préfixe pour gap */
    gap: 15px; /* Espacement par défaut pour les petits écrans */
    -webkit-align-items: stretch; /* Préfixe pour align-items */
    align-items: stretch;
    margin-bottom: 30px;
    padding: 0 15px; /* Ajoute un peu de padding sur les côtés pour les petits écrans */
}

.spectacle-bloc {
    /*background-color: #333;
    border: 1px solid #555;*/
    /* MODIFIÉ: Réduction du padding interne du bloc pour le condenser */
    padding: 10px; /* Ancien: 15px */
    display: flex;
    flex-direction: column;
    align-items: center; /* <<< AJOUTÉ/RENFORCÉ : Centre les éléments enfants (image, bloc info) sur l'axe horizontal lorsque flex-direction est column */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    color: #DDD;
    width: 100%; /* Par défaut, prend toute la largeur sur mobile */
    max-width: 280px; /* Limite la largeur des blocs individuels */
    flex-basis: 250px; /* Largeur de base pour flexbox */
    flex-grow: 1; /* Permet aux blocs de s'étirer pour remplir la ligne */
    flex-shrink: 1; /* Permet aux blocs de rétrécir si nécessaire */
    text-align: center; /* <<< AJOUTÉ/RENFORCÉ : Pour centrer le texte et les éléments inline/inline-block directement contenus */
    height: auto;
    box-sizing: border-box;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.spectacle-bloc:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}

/* MODIFIÉ: Ajustements pour la première ligne (prix à gauche, bouton à droite) */
.spectacle-info-top {
    width: 100%;
    display: flex; /* Active Flexbox */
    justify-content: space-between; /* Place le premier élément à gauche, le dernier à droite */
    align-items: center; /* Centre verticalement les éléments */
    /* MODIFIÉ: Réduction des marges/paddings pour condenser */
    margin-bottom: 10px; /* Ancien: 15px */
    padding-bottom: 5px; /* Ancien: 10px */
    /*border-bottom: 1px solid #444;*/
    /* La propriété flex-direction sera gérée par les media queries */
}

.spectacle-tarif {
    font-weight: bold;
    font-size: 1.1em;
    color: #AAA;
    margin-bottom: 0; /* IMPORTANT: Supprime la marge du bas si elle était présente */
}

/* NOUVELLE CLASSE POUR LE CONTENEUR DU BOUTON RESERVER/COMPLET */
.spectacle-actions-button {
    display: flex; /* Utilise flex pour le bouton lui-même si besoin */
    align-items: center; /* Centre verticalement le bouton */
    justify-content: center; /* <<< AJOUTÉ/RENFORCÉ : Centre le bouton si le conteneur a de l'espace */
    width: 100%; /* Assure qu'il prend toute la largeur pour que justify-content: center; fonctionne bien */
}

.button-reserver, .button-complet {
    background-color: #d4151b;
    color: white;
    /* MODIFIÉ: Réduction du padding pour rendre les boutons plus petits */
    padding: 6px 10px; /* Ancien: 8px 12px */
    text-decoration: none;
    border-radius: 5px;
    /* MODIFIÉ: Réduction des marges des boutons si plusieurs sur la même ligne */
    margin: 3px; /* Ancien: 5px */
    font-weight: bold;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* Empêche le texte du bouton de se couper */
    display: inline-block; /* <<< AJOUTÉ/RENFORCÉ : Assure que le bouton peut être centré via text-align ou flex */
}

.button-complet {
    background-color: #d40c13;
}

.button-reserver:hover {
    background-color: #005a87;
}

/* La classe .spectacle-date est maintenant utilisée dans la section du bas */
.spectacle-date {
    font-weight: bold;
    font-size: 1.1em;
    color: #AAA; /* Couleur de la date */
    margin: 0 5px; /* Ajuste les marges pour l'alignement avec les heures */
}

/* NOUVELLE CLASSE POUR LA LIGNE DU BAS (DATE ET HEURES) */
.spectacle-date-time-bottom {
    width: 100%;
    text-align: center;
    /* MODIFIÉ: Réduction de la marge supérieure */
    margin-bottom: 10px; /* Ancien: 15px */
    font-weight: bold;
    font-size: 1.1em;
    color: #00BFFF; /* Couleur principale pour cette ligne */
    display: flex; /* Active flexbox */
    justify-content: center; /* Centre le contenu (date et heures) */
    align-items: baseline; /* Aligne les éléments à leur base si leurs tailles de police sont différentes */
}

.spectacle-date-time-bottom-text { /* Pour le texte des bons cadeaux */
    display: block; /* S'assure qu'il prend sa propre ligne */
    font-size: 0.9em; /* Ajustez la taille si besoin */
    color: #DDD; /* Couleur pour le texte du bon cadeau */
}

/* Styles pour la nouvelle ligne de plage de dates */
.spectacle-date-range {
    display:none;
    width: 100%;
    text-align: center;
    margin-top: 5px; /* Espace au-dessus de la plage de dates */
    margin-bottom: 10px; /* Espace en dessous de la plage de dates */
}

.spectacle-date-range-text {
    font-size: 1em; /* Taille légèrement plus petite que la date/heure principale */
    color: #FFF; /* Une couleur plus discrète, ou gardez #00BFFF si vous voulez */
    font-weight: bold; /* Normaliser le poids de la police si vous voulez */
}

/* Ajustements optionnels si vous souhaitez un espacement spécifique pour les éléments dans .spectacle-bloc */
.spectacle-bloc .spectacle-date-time {
    margin-bottom: 5px; /* Ajuste la marge sous la date/heure principale si nécessaire */
}

.spectacle-content-main {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* <<< AJOUTÉ/RENFORCÉ : Centre les éléments à l'intérieur de ce conteneur */
    text-align: center; /* <<< AJOUTÉ/RENFORCÉ : Pour le texte à l'intérieur de ce conteneur */
}

/* Styles existants pour .spectacle-affiche-wrapper */
.spectacle-affiche-wrapper {
    width: 100%;
    max-width: 200px;
    /* MODIFIÉ: Réduction de la marge sous l'affiche */
    margin: 0 auto 10px auto; /* Ancien: 15px */
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: box-shadow 0.2s ease-in-out;
    position: relative; /* AJOUT IMPORTANT: Pour positionner l'overlay "COMPLET" par rapport à cet élément */
}

/* Styles pour le texte "COMPLET" en superposition */
.spectacle-affiche-wrapper.complete::before { /* La pseudo-classe '::before' crée le texte */
    content: "COMPLET"; /* Le texte à afficher */
    position: absolute; /* Positionnement par rapport au parent (.spectacle-affiche-wrapper) */
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(-50%, -50%) rotate(-20deg); /* DÉCALAGE ET ROTATION: Centre l'élément et le fait pivoter */
    background-color: rgba(220, 50, 50, 0.8); /* Fond rouge semi-transparent */
    color: white;
    font-size: 2em; /* Grande taille de police */
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 10; /* Assure que le texte est au-dessus de l'image */
    pointer-events: none; /* Permet aux clics de passer à l'élément sous-jacent (l'image/lien) */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Ombre pour une meilleure lisibilité */
    width: 100%; /* S'étend sur la largeur de l'affiche */
    text-align: center; /* Centre le texte dans sa propre boîte */
    box-sizing: border-box; /* Inclut padding et border dans la largeur/hauteur */
}

/* Optionnel: Assombrir légèrement l'image quand le spectacle est complet */
.spectacle-affiche-wrapper.complete img {
    filter: brightness(60%); /* Réduit la luminosité de l'image */
    transition: filter 0.3s ease;
}

.spectacle-affiche-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* La classe .spectacle-details est maintenant vide car le titre a été retiré, vous pouvez la supprimer si elle n'est pas utilisée ailleurs */
.spectacle-details {
    width: 100%;
}

/* La classe .spectacle-time est maintenant utilisée dans la section du bas */
.spectacle-time {
    font-weight: bold;
    font-size: 1.1em;
    color: #00BFFF; /* Couleur des heures */
    margin: 0 5px; /* Ajuste les marges pour l'alignement avec la date */
}


.spectacle-no-events {
    text-align: center;
    font-size: 1.2em;
    margin-top: 50px;
    color: white;
}

/* --- Media Queries pour la Responsivité --- */

/* Pour les écrans plus larges que 600px (smartphones en paysage, petites tablettes) */
@media (min-width: 600px) {
    /* MODIFIÉ: Assure que prix et bouton sont côte à côte sur les écrans plus larges */
    .spectacle-info-top {
        flex-direction: row; /* Revenir à l'alignement en ligne pour tarif et bouton */
        justify-content: space-between; /* Confirme le prix à gauche, bouton à droite */
    }
    .spectacle-tarif {
        margin-bottom: 0; /* Pas de marge en bas si aligné horizontalement */
    }

    .spectacle-bloc {
        -webkit-flex-basis: calc(50% - 22.5px); /* Préfixe pour flex-basis */
        flex-basis: calc(50% - 22.5px); /* Deux blocs par ligne avec un gap de 15px */
    }
    .month-events-container {
        -webkit-gap: 15px; /* Préfixe pour gap */
        gap: 15px; /* Ajuster le gap si nécessaire */
    }
}

/* Pour les écrans plus larges que 900px (tablettes, petits laptops) */
@media (min-width: 900px) {
    .spectacle-bloc {
        -webkit-flex-basis: calc(33.33% - 20px); /* Préfixe pour flex-basis */
        flex-basis: calc(33.33% - 20px); /* Trois blocs par ligne avec un gap de 30px */
        /* (30px * 2 pour les gaps entre 3 éléments, divisé par 3 éléments) */
    }
    .month-events-container {
        -webkit-gap: 30px; /* Préfixe pour gap */
        gap: 30px; /* Gap original */
    }
}

/* Pour les écrans plus larges que 1200px (ordinateurs de bureau) */
@media (min-width: 1200px) {
    .spectacle-bloc {
        -webkit-flex-basis: calc(25% - 22.5px); /* Préfixe pour flex-basis */
        flex-basis: calc(25% - 22.5px); /* Quatre blocs par ligne avec un gap de 30px */
    }
}

/* Styles pour la fiche spectale single_event.php */
/* --- Styles pour la page de l'événement unique (single-event.php) --- */
.single-event #main-header,
.post-type-archive-event #main-header,
.event-template-default #main-header {
    background-color: #000000 !important; /* Force le fond noir */
    z-index: 9999 !important; /* S'assure qu'il est au-dessus d'autres éléments si nécessaire */
}

/* Si le menu lui-même a un fond, assurez-vous qu'il soit aussi noir */
.single-event .et_pb_menu_0 .et_pb_menu__menu,
.post-type-archive-event .et_pb_menu_0 .et_pb_menu__menu,
.event-template-default .et_pb_menu_0 .et_pb_menu__menu {
    background-color: #000000 !important;
}

/* Si les éléments de menu changent de couleur au survol ou par défaut */
.single-event .et_pb_menu_0 .et_pb_menu__menu ul li a,
.post-type-archive-event .et_pb_menu_0 .et_pb_menu__menu ul li a,
.event-template-default .et_pb_menu_0 .et_pb_menu__menu ul li a {
    color: white !important; /* Assure que le texte du menu reste blanc */
}

/* Bloc de présentation (Image à gauche, Détails à droite) */
.entry-content { /* MODIFIED: Moved margin here from inline style in single-event.php */
    margin: 0.5em; /* From inline style */
}

/* Conteneur principal qui deviendra flexbox */
.eo-ABL-meta-top { /* C'est le conteneur parent qui contient l'image et les détails */
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */
    gap: 20px; /* Espace entre l'image et les détails */
    align-items: flex-start; /* Aligne les éléments en haut */
    width: 100%; /* Assure que le conteneur prend toute la largeur disponible */
    box-sizing: border-box;
    /* Ajoutez ou supprimez les styles en ligne que vous aviez mis sur ce div si nécessaire */
    color: white; /* Assurez-vous que le texte à l'intérieur est blanc */
    font-size: 1.2em; /* Assurez la taille de police */
    flex-direction: column; /* Par défaut, empile les éléments verticalement (pour mobile) */
    align-items: center; /* Centre les éléments horizontalement (pour mobile) */
}

/* Style pour le bouton de réservation */
.spectacle-single-actions {
    width: 100%; /* S'assure que le conteneur du bouton prend toute la largeur */
    text-align: center; /* Centre le bouton dans le conteneur */
    margin-top: 20px;
    margin-bottom: 20px;
    z-index: 10; /* S'assure que le bouton est au-dessus de l'image */
    position: relative; /* Nécessaire pour que z-index fonctionne */
    order: 1; /* Place le bouton en premier dans l'ordre Flexbox (visuellement en haut) */
	z-index:9999 !important;
}

/* Le bouton lui-même */
a.btn.reserv {
    display: block; /* Permet à text-align: center sur le parent de fonctionner */
    margin: 0 auto; /* Centre explicitement le bouton */
    background-color: #876D00; /* Conserve la couleur de votre bouton */
    border-color: rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    color: #FFF;
    font-size: 1.7em; /* Taille par défaut pour les grands écrans */
    border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border: 1px solid rgba(0,0,0,0.3);
    border-bottom-width: 3px;
    letter-spacing: 2px;
    text-transform: uppercase;
    width: fit-content;
	min-height:2em;
}
a.btn.reserv:hover {
    background-color: #876D0090;
    border-color: rgba(0,0,0,0.5);
}
a.btn.reserv:active {
    background-color: #876D0080;
    border-color: rgba(0,0,0,0.9);
}


/* Style pour la colonne de l'image (div.eo-ABL-thumb) */
.eo-ABL-meta-top .eo-ABL-thumb {
    /* Annule les flottants et largeurs du plugin qui étaient en ligne */
    float: none !important;
    width: auto !important;
    max-width: none !important;

    /* DÉFINIT LA LARGEUR DE LA COLONNE À 22% POUR LES GRANDS ÉCRANS VIA flex-basis */
    flex: 0 0 auto; /* Ne grandit pas, ne rétrécit pas, taille automatique */
    order: 2; /* Place l'image après le bouton dans l'ordre Flexbox */
    box-sizing: border-box;
    margin: 0 !important; /* Supprime les marges par défaut si elles posaient problème */
    padding: 0 !important;
    position: relative !important;; /* Nécessaire pour z-index */
    z-index: 1 !important; /* S'assure qu'elle est en dessous du bouton */
}

/* S'assurer que l'image à l'intérieur ne dépasse pas sa colonne */
.eo-ABL-meta-top .eo-ABL-thumb img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: contain !important; /* CRUCIAL : Affiche l'image entière, sans la couper. Ajout de !important */
    width: 100% !important; /* L'image remplit la largeur disponible de son conteneur */
    max-height: 75vh !important; /* L'image ne dépassera pas 75% de la hauteur du viewport */
}

/* Style pour la colonne des détails (la nouvelle classe eo-meta-details-wrap) */
.eo-ABL-meta-top .eo-meta-details-wrap {
    flex: 1; /* Prend tout l'espace restant */
    min-width: 70%; /* S'assure qu'elle ne soit pas trop petite sur desktop */
    order: 3; /* Place les détails après l'image */
    box-sizing: border-box;
    margin: 0 !important; /* Supprime les marges par défaut */
    padding: 0 !important;

    /* NOUVEAU: Fait de ce conteneur un flexbox en colonne pour ses enfants (nouvelle ligne top et contenu) */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espace entre la ligne du haut et le contenu principal */
}

/* NOUVEAU: Style pour le conteneur flex des dates et détails additionnels */
.eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */
    gap: 20px; /* Espace entre les dates et les détails additionnels */
    width: 100%; /* S'assure qu'il prend toute la largeur de son parent */
    align-items: flex-start; /* Aligne les contenus en haut */
}

/* NOUVEAU: Styles pour le bloc des dates (dans eo-meta-top-row) */
.eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row .eo-event-meta-details {
    flex: 1; /* Permet de prendre de l'espace */
    min-width: 180px; /* Largeur minimale pour les dates */
    text-align: left; /* Alignement du texte des dates */
    color: #ffd700;
}
/* Styles pour la liste des dates (ancienne eo-dates + nouvelle eo-dates-list) */
.eo-ABL-meta-top .eo-dates-list {
    padding-top: 0px;
    list-style: none; /* Enlève les puces de liste si vous ne les voulez pas */
    margin: 0;
    padding: 0;
}
.eo-ABL-meta-top .eo-dates-list li {
    margin-bottom: 0px; /* Espace entre chaque date */
    color: white; /* Couleur bleue pour les dates, comme demandé précédemment */
    font-weight: bold; /* Rendre les dates en gras */
}
.eo-ABL-meta-top .eo-dates-list p { /* Style pour la date simple */
    margin-bottom: 5px;
    color: white;
    font-weight: bold;
}
.eo-ABL-meta-top .eo-dates-list p strong {
    color: white; /* Label "Date:" en blanc */
}


/* NOUVEAU: Styles pour le bloc des détails additionnels (dans eo-meta-top-row) */
.eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row .eo-additional-details-block {
    flex: 2; /* Prend plus d'espace que le bloc des dates */
    min-width: 250px; /* Largeur minimale pour les détails */
    text-align: left; /* Alignement du texte des détails */
    color: white; /* Couleur de texte générale pour ce bloc */
    background-color: #1a1a1a; /* Suggestion: un fond légèrement différent pour le distinguer */
    padding: 15px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
}
.eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row .eo-additional-details-block p {
    margin-bottom: 8px; /* Espacement entre chaque ligne de détail */
    line-height: 1em !important;
}
.eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row .eo-additional-details-block p:last-child {
    margin-bottom: 0; /* Pas de marge sous le dernier paragraphe */
}
.eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row .eo-additional-details-block strong {
    color: #ffd700; /* Suggestion: couleur or pour les labels (Artiste, Auteur, etc.) */
}


/* Styles pour le contenu de l'événement dans la colonne de droite */
.eo-ABL-meta-top .eo-meta-details-wrap .eo-event-content {
    margin-top: 0; /* Le gap sur le parent gère l'espace */
    color: white; /* Assure que le texte est blanc */
    text-align: left; /* Maintenir l'alignement à gauche pour la lisibilité du texte long */
}
/* Styles pour les paragraphes du contenu principal */
.eo-ABL-meta-top .eo-meta-details-wrap .eo-event-content p {
    margin-bottom: 1em; /* Espacement entre les paragraphes */
    line-height: 1.6; /* Hauteur de ligne pour une meilleure lisibilité */
}
/* Styles pour les titres (H2, H3, etc.) dans le contenu principal */
.eo-ABL-meta-top .eo-meta-details-wrap .eo-event-content h2,
.eo-ABL-meta-top .eo-meta-details-wrap .eo-event-content h3,
.eo-ABL-meta-top .eo-meta-details-wrap .eo-event-content h4 {
    color: #ffffff; /* Couleur or pour les titres dans le contenu */
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

/* Classe utilitaire pour remplacer les clear/float/height inline */
.eo-clear {
    clear: both;
    float: none;
    height: 0px;
}

/* Media query pour les grands écrans (desktop) */
@media (min-width: 769px) {
    .eo-ABL-meta-top {
        flex-direction: row; /* Revenir à l'alignement en ligne sur desktop */
        align-items: flex-start; /* Aligne les éléments en haut */
        justify-content: center; /* Centre les blocs image/détails */
    }

    .spectacle-single-actions {
        text-align: right; /* Revenir à l'alignement à droite sur desktop */
        order: unset; /* Réinitialiser l'ordre */
        width: auto; /* Permet au conteneur de s'adapter au contenu */
    }

    a.btn.reserv {
        margin-left: auto; /* Aligne à droite si `text-align: right` n'est pas utilisé ou insuffisant */
        /* margin-right: 0; */ /* garder bouton au mlilieu */
    }

    .eo-ABL-meta-top .eo-ABL-thumb {
        flex-basis: 22%; /* Largeur de 22% pour l'image sur desktop */
        order: unset; /* Réinitialiser l'ordre */
    }

    .eo-ABL-meta-top .eo-meta-details-wrap {
        flex: 1;
        min-width: 55%; /* Laisser Flexbox gérer la largeur restante */
        order: unset; /* Réinitialiser l'ordre */
    }
}


/* Media query pour les petits écrans (tablettes et mobiles) */
@media (max-width: 768px) {
    .entry-content .bloc-presentation {
        flex-direction: column;
        align-items: center;
        padding: 0 10px;
    }

    .entry-content .bloc-presentation .presentation-image {
        max-width: 100%;
        width: 100%;
        margin-bottom: 20px;
        max-height: 50vh;
        height: auto;
    }

    .entry-content .bloc-presentation .presentation-image img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
        object-fit: contain !important;
        width: 100% !important;
        max-height: 100% !important;
    }

    .entry-content .bloc-presentation .presentation-details {
        min-width: 100%;
        text-align: center;
        padding: 0 5px;
    }

    a.btn.reserv {
        font-size: 1.4em; /* Police plus raisonnable sur mobile (ajustez cette valeur si besoin) */
        margin-left: auto; /* Centre le bouton sur mobile */
        margin-right: auto; /* Centre le bouton sur mobile */
    }

    .eo-ABL-meta-top .eo-ABL-thumb {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto !important;
        margin-bottom: 20px !important;
    }

    .eo-ABL-meta-top .eo-meta-details-wrap {
        width: 100% !important;
        min-width: unset !important;
        text-align: center;
        padding: 0 5px;
        gap: 20px;
    }

    .eo-ABL-meta-top .eo-meta-details-wrap .eo-event-content {
        text-align: left;
        margin: 5px;
    }

    /* Ajustement de la bande "COMPLET" sur mobile */
    .eo-ABL-thumb.eo-complete-thumb::before {
        font-size: 5vw; /* Revert to 5vw for reasonable size on mobile */
        left: -60%; /* Déplace la bande encore plus à gauche */
        width: 220%; /* Rendre la bande encore plus large pour couvrir la diagonale */
        top: 50%; /* Maintenir le centrage vertical */
        transform: rotate(-30deg) translateY(-50%); /* Conserver la transformation */
    }

    /* NOUVEAU: Media query pour empiler les dates et détails additionnels sur mobile */
    .eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row {
        flex-direction: column; /* Empile verticalement */
        align-items: stretch; /* Les blocs prennent toute la largeur disponible */
        gap: 15px; /* Espace entre les blocs empilés */
    }
    .eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row .eo-event-meta-details,
    .eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row .eo-additional-details-block {
        width: 100%; /* S'assure qu'ils prennent toute la largeur sur mobile */
        min-width: unset; /* Retire la contrainte de largeur minimale */
        text-align: left; /* Aligne le texte à gauche pour les deux blocs sur mobile */
        padding: 10px; /* Ajuste le padding pour mobile si besoin */
    }
    /* S'assurer que les puces de liste des dates sont visibles si list-style est remis */
    .eo-ABL-meta-top .eo-dates-list {
        padding-left: 20px; /* Ajoute un padding pour les puces de liste */
    }
}

/* Styles pour les fonds des blocs de dates et détails */
.eo-dates-block,
.eo-additional-details-block {
    background-color: #555; /* Un gris un peu foncé */
    padding: 20px; /* Espace interne pour que le texte ne colle pas aux bords */
    border-radius: 8px; /* Bords légèrement arrondis pour un aspect plus doux */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Une légère ombre pour un effet de profondeur */
	padding-bottom: 5px;
	margin-bottom: 10px;
}

/* Ajustements pour les propriétés Flexbox précédentes */
.eo-meta-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Aligne les éléments au début (en haut) de l'axe transversal */
    width: 100%;
    flex-wrap: wrap;
    gap: 20px; /* Ajoute un espace entre les éléments flexibles, remplace padding-right */
}

.eo-event-meta-details {
    flex: 1; /* Permet à ce bloc de prendre l'espace restant à gauche */
    min-width: 250px;
    box-sizing: border-box;
    /* padding-right: 20px;  Supprimé, remplacé par gap sur le parent */
}

.eo-additional-details-block {
    flex-basis: 75%; /* Largeur de base pour le bloc de droite (ajustez selon votre design) */
    text-align: left;
    box-sizing: border-box;
    margin-bottom: 1em;
    line-height: 1em;
    /* margin-left: 20px;  Supprimé, remplacé par gap sur le parent */
    /* padding-left: 0;  Pas nécessaire si padding général est défini */
}

/* Ajustements pour les petits écrans */
@media (max-width: 768px) {
    .eo-meta-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px; /* Ajuste le gap pour les écrans mobiles */
    }

    .eo-event-meta-details,
    .eo-additional-details-block {
        flex-basis: auto;
        width: 100%;
        margin-top: 0; /* Pas de marge top supplémentaire ici si gap est utilisé */
    }
}

/* Styles pour la vidéo responsive */
.video-wrapper {
    max-width: 800px; /* Largeur maximale de la vidéo */
    margin: 40px auto; /* Centre la vidéo horizontalement et ajoute de l'espace */
    box-sizing: border-box;
    padding: 0 15px; /* Petit padding pour éviter que la vidéo touche les bords sur mobile */
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 (9 / 16 * 100) */
    height: 0;
    overflow: hidden;
    background-color: #000; /* Fond noir pour les bords */
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Styles pour la galerie photo */
.photo-gallery-wrapper {
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center; /* Pour centrer le titre H2 */
}

.photo-gallery-container {
    display: grid; /* Utilise Grid pour une disposition de galerie */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 250px min par colonne, s'adapte */
    -webkit-gap: 20px; /* Préfixe pour gap */
    gap: 20px; /* Espace entre les images */
    max-width: 1000px; /* Largeur maximale de la grille de galerie */
    margin: 0 auto; /* Centre la grille */
    box-sizing: border-box;
    padding: 0 15px;
}

.photo-gallery-container .gallery-item {
    overflow: hidden; /* Cache les débordements */
    border-radius: 5px; /* Bords légèrement arrondis */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Légère ombre */
}

.photo-gallery-container .gallery-item img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Recadre l'image pour qu'elle remplisse l'espace sans déformer */
    width: 100%; /* S'assure que l'image remplit la largeur de l'item de la galerie */
}

/* Si vous voulez une mise en page de diaporama (uniquement une image visible à la fois),
    cela nécessitera JavaScript. Le CSS ci-dessus est pour une grille d'images.
    Pour un diaporama, le CSS serait différent (positionnement absolu, etc.)
    et un script JS serait indispensable pour les boutons de navigation et l'auto-lecture. */

/* Ajustements pour le bouton de réservation déjà existant */
.spectacle-single-actions {
    /* Gardez vos styles existants pour .spectacle-single-actions qui aligne le bouton à droite */
    text-align: right;
    margin-top: 20px;
    margin-bottom: 20px; /* Ajout d'un peu de marge en bas aussi */
}

/* Styles pour les boutons "Réserver" et "COMPLET" existants */
.btn.reserv {
    /* Assurez-vous que vos styles pour les boutons ressemblent à cela */
    display: inline-block;
    padding: 10px 20px;
    background-color: #C20000; /* Exemple de bleu */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn.reserv:hover {
    background-color: #A30000;
}

.btn.reserv.button-complet {
    background-color: #dc3545; /* Rouge pour COMPLET */
}

.btn.reserv.button-complet:hover {
    background-color: #c82333;
}

.btn.reserv.button-empty {
    /* Style pour le bouton vide */
    background-color: transparent;
    color: transparent;
    border: none;
    padding: 0;
    pointer-events: none; /* Ne pas réagir aux événements de la souris */
}

/***********************************************************************************************/
/* Bouton rechercher dans barre hautte du site
/* Styles pour le bouton de déclenchement de la recherche */
.search-toggle-button {
    background-color: #f0f0f0; /* Fond clair */
    color: #333; /* Texte "Recherche" en gris foncé pour un bon contraste avec le fond clair */
    padding: 0px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #ccc; /* Bordure légère */
    min-width: 100px; /* Largeur minimale pour le bouton */
    box-sizing: border-box; /* Inclut padding et border dans la largeur */
}

.search-toggle-button:hover {
    background-color: #e0e0e0; /* Légèrement plus foncé au survol */
    color: #000;
}

/* Formulaire de recherche (initialement caché) */
.event-search-form {
    display: flex; /* Utilise Flexbox pour aligner le champ et le bouton */
    align-items: center; /* Centre verticalement */
    background-color: #333; /* Fond sombre pour le formulaire quand il est visible */
    border-radius: 5px;
    overflow: hidden;
    height: 30px;
    width: 0; /* Commence avec une largeur de 0 pour être invisible */
    opacity: 0; /* Commence avec une opacité de 0 */
    transition: all 0.3s ease-in-out; /* Animation pour l'apparition/disparition */
    position: absolute; /* Permet un positionnement flexible */
    right: 15px; /* Ajuster la position par rapport à la droite de l'en-tête */
    top: 50%; /* Centre verticalement par rapport à l'en-tête */
    transform: translateY(-50%); /* Ajustement pour un centrage parfait */
    z-index: 10; /* Assure qu'il est au-dessus des autres éléments si nécessaire */
    pointer-events: none; /* Ne pas interagir avec la souris quand caché */
}

.event-search-form.visible { /* Classe ajoutée par JavaScript */
    width: 250px; /* Largeur quand le formulaire est visible */
    opacity: 1; /* Pleine opacité */
    pointer-events: auto; /* Re-active les interactions de la souris */
}

/* Ajustements pour les éléments du formulaire quand il est visible */
.event-search-form .search-field {
    border: none;
    padding: 0 15px;
    height: 100%;
    flex-grow: 1;
    font-size: 12px;
    background-color: transparent;
    color: white;
    outline: none;
}

.event-search-form .search-field::placeholder {
    color: #bbb;
}

.event-search-form .search-submit {
    background-color: #c20000;
    color: white;
    border: none;
    padding: 0 15px;
    height: 100%;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.event-search-form .search-submit:hover {
    background-color: #a30000;
}

.event-search-form .search-submit .et_pb_icon {
    font-family: 'ETmodules';
    font-size: 12px;
    line-height: 1;
}

/* Masquer le texte du label pour les lecteurs d'écran */
.event-search-form .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Ajustements pour les petits écrans */
@media (max-width: 768px) {
    .search-toggle-button {
        width: 80%; /* Plus large sur mobile */
        margin: 10px auto; /* Centré sur mobile */
    }
    .event-search-form {
        position: static; /* Retire le positionnement absolu sur mobile */
        width: 100%;
        transform: translateY(0);
        margin-top: 15px; /* Espace si apparaît en dessous */
        left: auto; /* Supprime les positionnements absolus */
        right: auto;
    }
    .event-search-form.visible {
        width: 100%;
    }
}

/***********************************************************************************************/
/* Styles pour la galerie de spectacles */
.spectacles-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    -webkit-gap: 30px; /* Préfixe pour gap */
    gap: 30px;
    padding: 30px 0;
}

.spectacle-item {
    background-color: #222;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.spectacle-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.4);
}

.spectacle-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.spectacle-thumbnail-wrapper {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.spectacle-thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.spectacle-item:hover .spectacle-thumbnail-wrapper img {
    transform: scale(1.05);
}

.spectacle-info {
    padding: 20px;
    color: white;
    display: flex; /* Utilise flexbox pour le contenu */
    flex-direction: column;
    justify-content: space-between; /* Pour pousser le bouton en bas */
    min-height: 120px; /* Ajustez si nécessaire pour que toutes les cartes aient une hauteur similaire */
}

.spectacle-info h3 {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px;
    color: #ffd700;
    line-height: 1.3;
}

/* Nouvelle classe pour les dates du spectacle (première et dernière) */
.spectacle-dates {
    font-size: 0.95em;
    color: #aaa;
    margin-bottom: 20px; /* Plus d'espace avant le bouton */
    flex-grow: 1; /* Permet à cet élément de prendre de l'espace si le titre est court */
}

.spectacle-dates .date-single,
.spectacle-dates .date-range {
    font-weight: bold;
}

/* Le bouton "Voir le spectacle" */
.read-more-button {
    display: inline-block;
    background-color: #c20000;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    align-self: flex-start; /* Aligne le bouton à gauche dans flexbox */
}

.read-more-button:hover {
    background-color: #a30000;
}

.no-events-message {
    text-align: center;
    color: #aaa;
    font-size: 1.2em;
    padding: 50px 0;
}

/* Ajustements Responsive */
@media (max-width: 980px) {
    .spectacles-gallery {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        -webkit-gap: 20px; /* Préfixe pour gap */
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .spectacles-gallery {
        grid-template-columns: 1fr;
        -webkit-gap: 25px; /* Préfixe pour gap */
        gap: 25px;
        padding: 20px;
    }
    .spectacle-thumbnail-wrapper {
        height: 220px;
    }
    .spectacle-info h3 {
        font-size: 1.3em;
    }
}
/* Style pour le texte saisi dans le champ de recherche */
input[type="search"] {
    color: #FFFFFF !important; /* Texte blanc */
}

/* Style pour le placeholder (texte d'indication) */
input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.7) !important; /* Blanc légèrement transparent */
}

/* --- Réduction de l'espacement du menu mobile --- */

@media (max-width: 980px) { /* Cible les écrans de taille tablette et mobile */

    /* Cible les liens du menu mobile */
    .et_mobile_menu li a {
        padding-top: 5px !important;    /* Réduit le remplissage au-dessus */
        padding-bottom: 5px !important; /* Réduit le remplissage en dessous */
        line-height: 1.3 !important;    /* Réduit la hauteur de ligne */
        font-size: 15px !important;     /* Ajuste la taille de la police si besoin */
    }

    /* Cible les éléments de liste du menu mobile */
    .et_mobile_menu li {
        margin-bottom: 0px !important; /* Supprime les marges inférieures entre les éléments */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Ligne de séparation subtile, ajustez ou supprimez */
    }

    /* Ajustement de la dernière ligne si vous avez des bordures */
    .et_mobile_menu li:last-child {
        border-bottom: none !important;
    }

    /* Si le menu burger a des problèmes d'alignement */
    .mobile_nav.opened .et_toggle_fullscreen_menu_wrapper {
        padding-top: 10px !important; /* Ajuste le padding en haut du conteneur du menu déroulant */
    }
}
/* Styles pour la fiche spectacle single_event.php - Section bloc-presentation (Image et Détails) */

/* Conteneur principal qui deviendra flexbox */
.eo-ABL-meta-top { /* C'est le conteneur parent qui contient l'image et les détails */
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */
    gap: 20px; /* Espace entre l'image et les détails */
    align-items: flex-start; /* Aligne les éléments en haut */
    width: 100%; /* Assure que le conteneur prend toute la largeur disponible */
    box-sizing: border-box;
    /* Ajoutez ou supprimez les styles en ligne que vous aviez mis sur ce div si nécessaire */
    color:white; /* Assurez-vous que le texte à l'intérieur est blanc */
    font-size:1.2em; /* Assurez la taille de police */
}

/* Style pour la colonne de l'image (div.eo-ABL-thumb) */
.eo-ABL-meta-top .eo-ABL-thumb {
    /* Annule les flottants et largeurs du plugin qui étaient en ligne */
    float: none !important;
    width: auto !important;
    max-width: none !important;

    /* DÉFINIT LA LARGEUR DE LA COLONNE À 22% POUR LES GRANDS ÉCRANS VIA flex-basis */
    flex: 0 0 22%; /* Ne grandit pas, ne rétrécit pas, prend 22% de la largeur du parent */
    box-sizing: border-box;
    margin: 0 !important; /* Supprime les marges par défaut si elles posaient problème */
    padding: 0 !important;
}

/* S'assurer que l'image à l'intérieur ne dépasse pas sa colonne */
.eo-ABL-meta-top .eo-ABL-thumb img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: contain !important; /* Affiche l'image entière sans la couper */
}


/* Style pour la colonne des détails (la nouvelle classe eo-meta-details-wrap) */
.eo-ABL-meta-top .eo-meta-details-wrap {
    flex: 1; /* Prend tout l'espace restant */
    min-width: 70%; /* S'assure qu'elle ne soit pas trop petite sur desktop */
    box-sizing: border-box;
    margin: 0 !important; /* Supprime les marges par défaut */
    padding: 0 !important;

    /* NOUVEAU: Fait de ce conteneur un flexbox en colonne pour ses enfants (nouvelle ligne top et contenu) */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espace entre la ligne du haut et le contenu principal */
}

/* NOUVEAU: Style pour le conteneur flex des dates et détails additionnels */
.eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */
    gap: 20px; /* Espace entre les dates et les détails additionnels */
    width: 100%; /* S'assure qu'il prend toute la largeur de son parent */
    align-items: flex-start; /* Aligne les contenus en haut */
}

/* NOUVEAU: Styles pour le bloc des dates (dans eo-meta-top-row) */
.eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row .eo-event-meta-details {
    flex: 1; /* Permet de prendre de l'espace */
    min-width: 180px; /* Largeur minimale pour les dates */
    text-align: left; /* Alignement du texte des dates */
	color:#ffd700;
    /* column-width: auto; - Removed as it might conflict with flex */
    /* -webkit-column-width: auto; */
    /* -moz-column-width: auto; */
}
/* Styles pour la liste des dates (ancienne eo-dates + nouvelle eo-dates-list) */
.eo-ABL-meta-top .eo-dates-list {
    padding-top: 0px;
    list-style: none; /* Enlève les puces de liste si vous ne les voulez pas */
    margin: 0;
    padding: 0;
}
.eo-ABL-meta-top .eo-dates-list li {
    margin-bottom: 0px; /* Espace entre chaque date */
    color: white; /* Couleur bleue pour les dates, comme demandé précédemment */
    font-weight: bold; /* Rendre les dates en gras */
}
.eo-ABL-meta-top .eo-dates-list p { /* Style pour la date simple */
    margin-bottom: 5px;
    color: white;
    font-weight: bold;
}
.eo-ABL-meta-top .eo-dates-list p strong {
    color: white; /* Label "Date:" en blanc */
}


/* NOUVEAU: Styles pour le bloc des détails additionnels (dans eo-meta-top-row) */
.eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row .eo-additional-details-block {
    flex: 2; /* Prend plus d'espace que le bloc des dates */
    min-width: 250px; /* Largeur minimale pour les détails */
    text-align: left; /* Alignement du texte des détails */
    color: white; /* Couleur de texte générale pour ce bloc */
    background-color: #1a1a1a; /* Suggestion: un fond légèrement différent pour le distinguer */
    padding: 15px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
}
.eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row .eo-additional-details-block p {
    margin-bottom: 8px; /* Espacement entre chaque ligne de détail */
    line-height: 1em !important;
}
.eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row .eo-additional-details-block p:last-child {
    margin-bottom: 0; /* Pas de marge sous le dernier paragraphe */
}
.eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row .eo-additional-details-block strong {
    color: #ffd700; /* Suggestion: couleur or pour les labels (Artiste, Auteur, etc.) */
}


/* Styles pour le contenu de l'événement dans la colonne de droite */
.eo-ABL-meta-top .eo-meta-details-wrap .eo-event-content {
    margin-top: 0; /* Le gap sur le parent gère l'espace */
    color: white; /* Assure que le texte est blanc */
    text-align: left; /* Maintenir l'alignement à gauche pour la lisibilité du texte long */
}
/* Styles pour les paragraphes du contenu principal */
.eo-ABL-meta-top .eo-meta-details-wrap .eo-event-content p {
    margin-bottom: 1em; /* Espacement entre les paragraphes */
    line-height: 1.6; /* Hauteur de ligne pour une meilleure lisibilité */
}
/* Styles pour les titres (H2, H3, etc.) dans le contenu principal */
.eo-ABL-meta-top .eo-meta-details-wrap .eo-event-content h2,
.eo-ABL-meta-top .eo-meta-details-wrap .eo-event-content h3,
.eo-ABL-meta-top .eo-meta-details-wrap .eo-event-content h4 {
    color: #ffffff; /* Couleur or pour les titres dans le contenu */
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}


/* Classe utilitaire pour remplacer les clear/float/height inline */
.eo-clear {
    clear: both;
    float: none;
    height: 0px;
}

/* Media query pour les petits écrans (tablettes et mobiles) */
@media (max-width: 768px) {
    .eo-ABL-meta-top {
        flex-direction: column;
        align-items: center;
        padding: 0 10px;
    }
    .eo-ABL-meta-top .eo-ABL-thumb {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto !important;
        margin-bottom: 20px !important;
    }
    .eo-ABL-meta-top .eo-meta-details-wrap {
        width: 100% !important;
        min-width: unset !important;
        text-align: center; /* This centers the children if they are inline-block or have auto margins */
        padding: 0 5px;
        gap: 20px; /* Ajuste l'espace sur mobile */
    }
    .eo-ABL-meta-top .eo-meta-details-wrap .eo-event-content {
        text-align: left; /* Keep text content left-aligned for readability */
		margin : 5px;
    }
    .eo-ABL-meta-top .eo-event-meta-details {
        column-width: auto;
        -webkit-column-width: auto;
        -moz-column-width: auto;
    }

    /* Ajustement de la bande "COMPLET" sur mobile */
    .eo-ABL-thumb.eo-complete-thumb::before {
        font-size: 5vw; /* Revert to 5vw for reasonable size on mobile */
        left: -60%; /* Déplace la bande encore plus à gauche */
        width: 220%; /* Rendre la bande encore plus large pour couvrir la diagonale */
        top: 50%; /* Maintenir le centrage vertical */
        transform: rotate(-30deg) translateY(-50%); /* Conserver la transformation */
    }

    /* NOUVEAU: Media query pour empiler les dates et détails additionnels sur mobile */
    .eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row {
        flex-direction: column; /* Empile verticalement */
        align-items: stretch; /* Les blocs prennent toute la largeur disponible */
        gap: 15px; /* Espace entre les blocs empilés */
    }
    .eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row .eo-event-meta-details,
    .eo-ABL-meta-top .eo-meta-details-wrap .eo-meta-top-row .eo-additional-details-block {
        width: 100%; /* S'assure qu'ils prennent toute la largeur sur mobile */
        min-width: unset; /* Retire la contrainte de largeur minimale */
        text-align: left; /* Aligne le texte à gauche pour les deux blocs sur mobile */
        padding: 10px; /* Ajuste le padding pour mobile si besoin */
    }
    /* S'assurer que les puces de liste des dates sont visibles si list-style est remis */
    .eo-ABL-meta-top .eo-dates-list {
        padding-left: 20px; /* Ajoute un padding pour les puces de liste */
    }
    a.btn.reserv {
        font-size: 1.4em; /* Police plus raisonnable sur mobile (ajustez cette valeur si besoin) */
        margin-left: auto; /* Centre le bouton sur mobile */
        margin-right: auto; /* Centre le bouton sur mobile */
    }
}
.eo-meta-top-row {
    display: flex; /* Active Flexbox */
    justify-content: space-between; /* Espace les deux blocs */
    align-items: flex-start; /* Aligne les éléments au début (en haut) de l'axe transversal */
    width: 100%; /* S'assure que le conteneur prend toute la largeur */
    flex-wrap: wrap; /* Permet le retour à la ligne sur petits écrans */
}

.eo-event-meta-details {
    flex: 1; /* Prend l'espace flexible restant */
    min-width: 250px; /* Largeur minimale pour le contenu des dates */
    /* Assurez-vous qu'il n'y a pas de marges ou padding non désirés ici qui pourraient désaligner */
    padding-right: 20px; /* Ajoute un peu d'espace à droite avant le bloc suivant */
    box-sizing: border-box; /* Inclut padding et border dans la largeur totale */
}

.eo-additional-details-block {
    flex-basis: 75%; /* Largeur de base pour ce bloc (ajustez selon besoin) */
    /* Alternativement, une largeur fixe: width: 300px; */
    text-align: left; /* Aligne le texte à gauche à l'intérieur du bloc */
    /* Supprimez margin-left si vous utilisez space-between sur le parent et voulez un alignement strict */
    /* margin-left: 20px; */ /* Retiré car justify-content: space-between gère l'espacement */
    padding-left: 0; /* Assurez-vous qu'il n'y a pas de padding à gauche qui désalignerait */
    box-sizing: border-box; /* Inclut padding et border dans la largeur totale */
    /* Si les deux blocs ont un padding ou une bordure, assurez-vous qu'ils soient cohérents ou réinitialisés */
}

/* Ajustements pour les petits écrans */
@media (max-width: 768px) {
    .eo-meta-top-row {
        flex-direction: column; /* Les blocs s'empilent verticalement */
        align-items: flex-start; /* Aligne les blocs empilés à gauche */
    }

    .eo-event-meta-details,
    .eo-additional-details-block {
        flex-basis: auto; /* Supprime la largeur fixe/flex-basis */
        width: 100%; /* Prend toute la largeur disponible */
        margin-left: 0; /* Supprime les marges de gauche */
        padding-right: 0; /* Supprime le padding droit */
        margin-top: 15px; /* Ajoute un peu d'espace entre les blocs empilés */
    }
}
/* Styles pour les fonds des blocs de dates et détails */
.eo-dates-block,
.eo-additional-details-block {
    background-color: #555; /* Un gris un peu foncé */
    padding: 20px; /* Espace interne pour que le texte ne colle pas aux bords */
    border-radius: 8px; /* Bords légèrement arrondis pour un aspect plus doux */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Une légère ombre pour un effet de profondeur */
	padding-bottom: 5px;
	margin-bottom: 10px;

}

/* Ajustements pour les propriétés Flexbox précédentes */
.eo-meta-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Aligne les éléments au début (en haut) de l'axe transversal */
    width: 100%;
    flex-wrap: wrap;
    gap: 20px; /* Ajoute un espace entre les éléments flexibles, remplace padding-right */
}

.eo-event-meta-details {
    flex: 1; /* Permet à ce bloc de prendre l'espace restant à gauche */
    min-width: 250px;
    box-sizing: border-box;
    /* padding-right: 20px;  Supprimé, remplacé par gap sur le parent */
}

.eo-additional-details-block {
    flex-basis: 75%; /* Largeur de base pour le bloc de droite (ajustez selon votre design) */
    text-align: left;
    box-sizing: border-box;
	margin-bottom: 1em;
	line-height: 1em;
    /* margin-left: 20px;  Supprimé, remplacé par gap sur le parent */
    /* padding-left: 0;  Pas nécessaire si padding général est défini */
}

/* Ajustements pour les petits écrans */
@media (max-width: 768px) {
    .eo-meta-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px; /* Ajuste le gap pour les écrans mobiles */
    }

    .eo-event-meta-details,
    .eo-additional-details-block {
        flex-basis: auto;
        width: 100%;
        margin-top: 0; /* Pas de marge top supplémentaire ici si gap est utilisé */
    }
}
/* Pour les labels : fond clair et tentative d'alignement avec float */
.sib-email-area label,
.sib-NOM-area label,
.sib-PRENOM-area label {
    display: inline-block; /* Rend le label capable de recevoir une largeur */
    width: 10%; /* Largeur pour le label, ajustez */
    background-color: #575757; /* Fond clair */
    padding: 8px 10px; /* Padding */
    box-sizing: border-box;
    text-align: right; /* Aligne le texte du label à droite */
    vertical-align: top; /* Alignement vertical avec le champ */
    margin-right: -4px; /* Peut aider à coller au champ, ajustez */
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* Pour les champs input : prend l'espace restant */
/* Styles pour le bouton submit du formulaire (S'inscrire à la newsletter) */
.sib-default-btn {
    background-color: #938e8e !important; /* Fond gris clair */
    color: white !important; /* Texte blanc */
    /* Les autres propriétés pour le padding, border, etc., que vous aviez déjà */
    padding: 10px 20px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background-color 0.3s ease; /* Ajoute une transition pour l'effet de survol */
}

.sib-default-btn:hover {
    background-color: #7b7575 !important; /* Un gris légèrement plus foncé au survol */
}
.sib-email-area input[type=email],
.sib-NOM-area input[type=text],
.sib-PRENOM-area input[type=text] {
    width: calc(90% - 1px); /* Prend le reste de la largeur (100% - largeur label), ajustez */
    /* -1px pour compenser le margin-right négatif du label si applicable */
    display: inline-block; /* Pour qu'il soit sur la même ligne que le label */
    background-color: #938e8e; /* Fond clair */
	color:white;
	vertical-align: top; /* Alignement vertical avec le champ */
	border:1px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
	margin: 0px 0px 0px 0px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;}

/* Pour le bouton : alignement à droite avec float */
.sib-default-btn {
    float: right; /* Aligne le bouton à droite */
    margin-top: 15px; /* Espace au-dessus du bouton */
    /* Gardez tous les autres styles de bouton que vous souhaitez */
    background-color: #007bff; /* Exemple de couleur */
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    border: 1px solid transparent;
}
.sib-default-btn:hover {
    background-color: #0056b3;
}

/* Important: Clearfix pour gérer les floats */
/* Ajoutez une classe à votre formulaire si vous pouvez, ou au conteneur parent du formulaire */
.sib-form-container:after { /* Si vous avez ajouté <form class="sib-form-container"> */
    content: "";
    display: table;
    clear: both;
}

/* Ou si le formulaire est directement dans un div conteneur: */
/* .votre-conteneur-formulaire:after {
    content: "";
    display: table;
    clear: both;
} */


/* Responsive pour les labels et inputs si HTML est rigide */
@media (max-width: 600px) {
    .sib-email-area label,
    .sib-NOM-area label,
    .sib-PRENOM-area label {
        width: 100%; /* Prend toute la largeur */
        display: block; /* S'empile au-dessus de l'input */
        text-align: left; /* Aligne le texte à gauche */
        border-radius: 4px 4px 0 0; /* Arrondit seulement le haut */
        margin-right: 0;
        padding-bottom: 5px;
    }
    .sib-email-area input[type=email],
    .sib-NOM-area input[type=text],
    .sib-PRENOM-area input[type=text] {
        width: 100%; /* Prend toute la largeur */
        display: block; /* S'empile en dessous du label */
        border-radius: 0 0 4px 4px; /* Arrondit seulement le bas */
        margin-top: -1px; /* Colle au label */
    }
    .sib-default-btn {
        float: none; /* Désactive le float */
        display: block; /* Prend toute la largeur */
        width: 100%; /* Prend toute la largeur */
        text-align: center; /* Centre le texte */
        margin-left: auto;
        margin-right: auto;
    }
}
/* Styles pour le conteneur principal de la liste des spectacles Divi */
.d-months-container.eo-events-shortcode,
.d-months-container.eo-events-downloads { /* Cible les conteneurs de la galerie Divi */
    display: grid !important; /* Force l'affichage en grille */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; /* Ajuste la taille et le nombre de colonnes, min 280px */
    gap: 30px !important; /* Espace entre les images/éléments */
    padding: 30px 0 !important; /* Maintient un padding vertical */
    justify-content: center !important; /* Centre la grille si l'espace le permet */
    align-items: flex-start !important; /* Aligne les éléments en haut de leur cellule de grille */
}

/* Styles pour chaque élément individuel de spectacle */
.spectacle-bloc { /* Cible chaque bloc de spectacle individuel */
    background-color: #222 !important; /* Fond sombre pour chaque carte */
    border-radius: 8px !important; /* Coins arrondis */
    overflow: hidden !important; /* Cache tout ce qui dépasse des bords arrondis */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; /* Ombre subtile */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* Transition douce pour les effets hover */
    /* Ces propriétés neutralisent des comportements potentiels de Divi qui pourraient casser la grille */
    float: none !important;
    width: auto !important;
    margin: 0 !important; /* Supprime les marges par défaut */
}

/* Effet au survol des éléments de spectacle */
.spectacle-bloc:hover {
    transform: translateY(-5px) !important; /* Légère élévation au survol */
    box-shadow: 0 8px 15px rgba(0,0,0,0.4) !important; /* Ombre plus prononcée */
}

/* Styles pour l'image à l'intérieur de chaque bloc de spectacle */
.spectacle-bloc .attachment-medium { /* Cible spécifiquement l'image au sein du bloc */
    width: 100% !important; /* L'image remplit la largeur de son conteneur */
    height: auto !important; /* Permet à la hauteur de s'adapter automatiquement */
    object-fit: contain !important; /* L'image s'adapte entièrement sans être coupée */
    display: block !important;
}
/* Vous pourriez vouloir ajouter une hauteur minimale au conteneur de l'image si nécessaire,
   pour éviter que les cartes ne soient de hauteurs trop différentes, par exemple : */
.spectacle-bloc .spectacle-thumbnail-wrapper { /* Si cette classe est présente dans votre HTML */
    min-height: 180px !important; /* Une hauteur minimale pour le conteneur de l'image */
    display: flex !important; /* Utilise flexbox pour centrer l'image verticalement si elle est plus petite */
    align-items: center !important; /* Centre l'image verticalement */
    justify-content: center !important; /* Centre l'image horizontalement */
}
/* Vous pourriez vouloir ajouter une hauteur minimale au conteneur de l'image si nécessaire,
   pour éviter que les cartes ne soient de hauteurs trop différentes, par exemple : */
.spectacle-bloc .spectacle-thumbnail-wrapper { /* Si cette classe est présente dans votre HTML */
    min-height: 180px !important; /* Une hauteur minimale pour le conteneur de l'image */
    display: flex !important; /* Utilise flexbox pour centrer l'image verticalement si elle est plus petite */
    align-items: center !important; /* Centre l'image verticalement */
    justify-content: center !important; /* Centre l'image horizontalement */
}
/* --- Ajustements Responsive pour la Galerie de Spectacles Divi --- */

/* Pour les écrans de taille tablette (entre 980px et 768px) */
@media (max-width: 980px) {
    .d-months-container.eo-events-shortcode,
    .d-months-container.eo-events-downloads {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; /* Min 250px */
        gap: 20px !important; /* Espace réduit */
    }
}

/* Pour les écrans de taille mobile (inférieur à 767px) */
@media (max-width: 767px) {
    .d-months-container.eo-events-shortcode,
    .d-months-container.eo-events-downloads {
        grid-template-columns: 1fr !important; /* Une seule colonne sur mobile */
        gap: 25px !important; /* Espace ajusté */
        padding: 20px !important; /* Padding ajusté */
    }
    .spectacle-bloc .attachment-medium {
        height: 220px !important; /* Hauteur de l'image ajustée pour mobile */
    }
}

/* Ajustements pour les éléments de la barre d'en-tête sur mobile */
@media (max-width: 980px) { /* Cible les écrans de taille tablette et mobile */

    /* Cibler les éléments de la barre du haut (téléphone, mail, adresse) */
    /* Ces sélecteurs sont des exemples courants dans Divi, il faudra peut-être ajuster */
    .et_pb_top_header_right_on_mobile .et_pb_info_line span,
    .et_pb_top_header_right_on_mobile .et_pb_info_line a {
        padding-left: 5px !important;  /* Espace à gauche */
        padding-right: 5px !important; /* Espace à droite */
        /* Ou si ce sont des éléments de liste (li) */
        margin-right: 10px !important; /* Marge à droite pour séparer les éléments */
    }

    /* Si les icônes et le texte sont dans des éléments séparés, par exemple */
    .et_pb_info_line .et-pb-icon {
        margin-right: 3px !important; /* Espace entre l'icône et le texte */
    }

    /* Si les éléments sont des liens directs et très collés */
    .et_pb_top_header_right_on_mobile .et-social-icon a,
    .et_pb_top_header_right_on_mobile #et-info a {
        padding: 5px 8px !important; /* Ajuste le padding autour des liens */
    }

    /* Si le conteneur des informations de contact est trop serré */
    #et-info { /* L'ID classique du conteneur d'informations de contact dans Divi */
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/*************************************************************************************/
/* Css page Calendrier */
.eo-fullcalendar, .eo-fullcalendar button {
  font-size: 1em;
  color: white;
}
.fc-toolbar h2 {
  color: white;
}
.fc-row .fc-content-skeleton {
  position: relative;
  z-index: 4;
  padding-bottom: 2px;
  color: black;
}
.fc th {
  text-align: center;
  color: black;
}
.post-footer .social-icons p{
  color: white;
}