/* Styles de base et réinitialisation */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px 0;
    background-color: white; 
}

body#accueil h2 {font-size:1.4em;font-weight:bold;color:#000}
body#accueil h3 {font-weight:normal}

a.event,a.logo {text-decoration: none;}

/* Conteneur principal de l'en-tête */
.header-content {
    width: 100%; /* Prend 95% de la largeur */
    margin: 20px auto; /* Centre le conteneur */
    display: flex; /* Active Flexbox */
    align-items: center; /* Centre verticalement les éléments */
    padding: 0;
    border-radius: 0;
    position: relative;
}

/* Boîte de date */

.date-box {
    background-color: #C22D4A; /* Couleur de fond rouge/bordeaux */
    color: white;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    /* AUGMENTATION DU PADDING VERTICAL POUR FAIRE DÉBORDER LA BOÎTE */
    padding: 20px 25px;
	margin-left:30px;
    border-radius: 5px; 
    text-align: center;
    font-weight: bold;
    line-height: 1.2;
    min-width: 90px;
    flex-shrink: 0;
    z-index: 2; /* Reste au-dessus de la bande rose */
    position: relative;
}

.date-box .day {
    font-size: 1.3em;
}

.date-box .month {
    font-size: 2em;
    margin: 2px 0;
}

.date-box .year {
    font-size: 2em;
}

/* Section des titres avec la bande rose */
.titles {
    flex-grow: 1; 
    color: #333;
    background-color: #fffcfc; /* La bande rose pâle */
    /* PADDING VERTICAL AJUSTÉ : doit être INFÉRIEUR au padding vertical du date-box */
    padding: 15px 30px 15px 50px; 
    margin-left: -20px; /* Décalage pour chevaucher la boîte de date */
    z-index: 1; 
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.titles h1 {
    font-size: 1.9em;
    margin: 0;
    color: #333;
    font-weight: bold;
}

.titles h2 {
    font-size: 1.2em;
    margin: 5px 0 0 0;
    color: #666;
    font-weight: normal;
}
.image-salon img {height:13em;
				margin-right:9em;}


/* Adaptation Mobile (inchangé, à moins que vous souhaitiez le débordement sur mobile aussi) */
@media (max-width: 600px) {
    .header-content {
        width: 90%;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
    }
	
	
	
	body#accueil .container {border-bottom:solid 1px #aaa;
							margin-bottom:2em;
							padding-bottom.5em;}

    .date-box {
        padding-left: 0;
		margin:0;
        width: 100%;
        padding: 15px 0;
        border-radius: 5px 5px 0 0;
    }
	
	.titles {background-color:#fff;}
	
	div.image-salon {text-align:center;}
	div.image-salon img {width:70%;
						margin-right:0;
						height:auto;}


    .titles {
        margin-left: 0;
        padding: 15px 20px;
        width: 100%;
        text-align: left;
        border-radius: 0 0 5px 5px;
    }

    .titles h1 {
        font-size: 1.6em;
    }

    .titles h2 {
        font-size: 1.1em;
    }
}

		header{Text-align:center;}
		
		header .logo-ouiwine img {width:15%;
								min-width:150px;}
								
		.header-content .date-box {background-color:#bf3959}
		
		.description-text,.breadcrumb,.main-content {margin-left:30px;width:60%}
		
		
		.three-column-layout {
    display: flex; /* Active le mode Flexbox pour aligner les enfants horizontalement */
    gap: 1em; /* Définit la marge (gouttière) de 1em entre les sections */
    
    /* Styles de centrage et de cadre du conteneur (facultatif mais recommandé) */
    padding: 1em; 
    width: 90%; 
    margin: 0 auto;
    box-sizing: border-box;
}

/* 2. Sections Enfants (Les 3 BLOCS) */
.bloc {
    /* Propriété clé pour la taille égale et le comportement flexible */
    flex: 1; 
    /* Chaque section prend une part égale de l'espace disponible (1/3) */

    /* Styles de visualisation (facultatif) */
    padding: 20px;

}
		section.info-pratiques   { border: 1px solid #CCC;}
		section.exposants-list {background-color:#fffcfc}

		section .section-title	{font-size:1.5em;font-weight:bold;margin-bottom:1.2em}		
		
		.info-item p {line-height:1.2em;margin:0}
		.info-item p.p-title{font-weight:bold;margin-top:1.5em;}
		
		.exposant-item {margin-bottom:1em;width:100%;float:left;}
		.exposant-logo	{width:40%;float:left;height:5em;}
		h3 {margin-bottom:0.2em;font-size:1em;margin-top:0em}
		.exposant-details p {margin:0;font-size:1em;}
		.exposant-logo img {width:8em;}
		.exposants-note {text-align:center}
		
		
.map-placeholder {
    padding: 0; /* Retirer le padding interne pour que la carte colle aux bords */
    display: flex; /* Pour s'assurer que l'iframe est bien géré */
    flex-direction: column;
}

.map-placeholder iframe {
    /* Le wrapper n'est pas nécessaire ici si l'iframe est le seul enfant du bloc */
    width: 100%; /* L'iframe prend 100% de la largeur du bloc */
    height: 100%; /* L'iframe prend 100% de la hauteur du bloc (si le bloc a une hauteur) */
    min-height: 450px; /* Définit une hauteur minimale pour la carte */
    border-radius: 8px; /* Applique le même arrondi que la section parente */
}
		
		
		@media (max-width: 768px) {

    .three-column-layout {
        flex-direction: column; /* Les blocs s'empilent verticalement */
        gap: 20px; /* Espace plus grand entre les blocs empilés */
        width: 95%; /* Plus de largeur sur mobile */
    }

    .bloc {
        /* Plus besoin de flex: 1 car ils prennent 100% de la largeur par défaut */
        flex: auto;
    }
}