/* ==========================================================================
   1. STRUCTURE GLOBALE ET RESET
   ========================================================================== */
body { overflow-x: hidden; }
.metro-header-wrapper {
    display: flex; align-items: stretch !important; justify-content: center;
    gap: 0px !important; width: 100%; height: 15vh; margin-bottom: 0px !important;
}
/* Nettoyage des marges autour du bandeau */
.vc_banner.block, center {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================================
   2. BANDEAU HAUT : CONFIGURATION DES PROPORTIONS
   ========================================================================== */

.metro-header-wrapper {
    display: flex;
    align-items: stretch !important; /* Force l'alignement vertical parfait */
    justify-content: space-between;
    gap: 5px; /* Espace entre le slider et les blocs de boutons */
    width: 100%;
    height: 15vh; /* Hauteur de référence */
	margin-bottom: 0px !important; /* Force à zéro */
    padding-bottom: 0px !important;
}
.metro-header-wrapper + hr,
.metro-header-wrapper + center,
.metro-header-wrapper + h3,
.metro-header-wrapper + div {
    margin-top: 0px !important;
    padding-top: 0px !important;
}
/* BLOCS LATERAUX : 22% de largeur chacun pour des boutons imposants */
.tuiles-mini {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 5px !important;
    width: 23% !important; 
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
}

/* LE SLIDER : 54% de largeur pour équilibrer l'ensemble */
.metro-header-wrapper .main-banner {
    width: 54% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    /* AJOUT DES BORDURES BLANCHES */
    border-top: none !important;
    border-bottom: none !important;
    border-left: 5px solid #ffffff !important;  /* Bordure gauche */
    border-right: 5px solid #ffffff !important; /* Bordure droite */
    
    border-radius: 0 !important; 
    overflow: hidden;
    position: relative;
    background: #000;
    box-sizing: border-box; /* Indispensable pour que la bordure ne décale pas les blocs */
}
/* ==========================================================================
   3. STYLE DES BOUTONS (TUILE-ITEM)
   ========================================================================== */
.tuiles-mini .tuile-item {
    background: linear-gradient(180deg, #6d7486 0%, #0a0d13 100%);
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 14px !important; /* Taille de police plus lisible */
    text-transform: uppercase;
    line-height: 1.1;
    padding: 5px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
    border-radius: 0 !important;
}
.tuiles-mini .tuile-item:hover {
    background: #d1d9e6 !important;
    color: #2e3b4e !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 5;
    border-top-color: transparent;
}
/* ==========================================================================
   4. COMPOSANTS DU SLIDER (IMAGES ET PROGRESSION)
   ========================================================================== */

/* On permet aux flèches de s'afficher correctement */
.main-banner {
    overflow: hidden; /* Garder hidden ici pour que l'image ne dépasse pas des coins */
    position: relative;
}

.main-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* Barre de progression */
.swiper-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 30;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #205081, #5b9bd5);
}

/* --- STYLE DES FLÈCHES PERSONNALISÉES --- */
.main-banner .swiper-button-next, 
.main-banner .swiper-button-prev {
    z-index: 99 !important;
    color: #2e3b4e !important;           /* Couleur bleu foncé des boutons */
    background: rgba(255, 255, 255, 0.7); /* Fond blanc translucide */
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;        /* Flèches rondes */
    transform: scale(0.6);                /* Taille globale */
    transition: all 0.3s ease;
}

/* Positionnement précis */
.main-banner .swiper-button-prev { left: 10px !important; }
.main-banner .swiper-button-next { right: 10px !important; }

/* Correction de la taille de l'icône interne */
.main-banner .swiper-button-next:after, 
.main-banner .swiper-button-prev:after {
    font-size: 18px !important;
    font-weight: bold;
}

/* Effet au survol des flèches */
.main-banner .swiper-button-next:hover, 
.main-banner .swiper-button-prev:hover {
    background: #2e3b4e !important;       /* Fond devient bleu foncé */
    color: #ffffff !important;            /* Flèche devient blanche */
    transform: scale(0.7);                /* S'agrandit légèrement */
}
/* ==========================================================================
   5. FENÊTRE POPUP (BOITE DE DIALOGUE)
   ========================================================================== */

.popup-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.popup-content {
    background-color: #fff;
    margin: 10% auto;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    position: relative;
    animation: slideDown 0.4s ease-out;
    overflow: hidden;
    text-align: center;
}

@keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-popup {
    position: absolute;
    top: 10px; right: 15px;
    color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer;
    z-index: 10;
}
.close-popup:hover { color: #e31e24; }

.popup-header { background: #2e3b4e; padding: 20px; }
.popup-logo { height: 50px; width: auto; }
.popup-body { padding: 30px; }

.popup-date { 
    background: #f8f9fa; 
    padding: 15px; 
    border-left: 4px solid #e31e24; 
    margin: 20px 0;
    font-weight: bold;
    font-size: 20px; 
    color: #2e3b4e;
}

.btn-popup {
    display: inline-block;
    background: #e31e24;
    color: white !important;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: 0.3s;
}
.btn-popup:hover { background: #2e3b4e; }

/* ==========================================================================
   6. RESPONSIVE MOBILE - CORRECTIF FINAL
   ========================================================================== */
@media (max-width: 767px) {
    .metro-header-wrapper {
        flex-direction: column !important; /* On empile les éléments */
        height: auto !important;           /* On libère la hauteur fixe */
        gap: 10px !important;              /* Espace entre les blocs sur mobile */
    }

    /* Le slider passe en haut et prend toute la place */
    .metro-header-wrapper .main-banner {
        width: 100% !important;
        height: 200px !important; /* Hauteur confortable pour mobile */
        order: 1;                 /* Affiche le slider en premier */
    }

    /* Les blocs de boutons passent en dessous */
    .tuiles-mini {
		border-left: none !important;
        border-right: none !important;
        width: 100% !important;
        height: 130px !important; /* Hauteur pour que les 4 boutons soient cliquables */
        order: 2;                 /* Affiche les boutons après le slider */
        grid-template-columns: repeat(2, 1fr) !important; /* Garde 2 colonnes */
    }

    .tuiles-mini .tuile-item {
        font-size: 12px !important;
        padding: 10px 5px !important;
    }
}

	#countdown-container {
		background: linear-gradient(180deg, #6d7486 0%, #0a0d13 100%);
		color: white;
		text-align: center;
		padding: 8px !important; /* Réduit de 15px à 8px */
		margin-bottom: 10px !important; /* Réduit l'espace sous le bandeau */
		border-radius: 4px;
	}
/* Réduire la taille du titre */
	.countdown-title {
		font-size: 1em;
		font-weight: bold;
		margin-bottom: 5px !important;
		text-transform: uppercase;
	}

	#countdown-timer {
		display: flex;
		justify-content: center;
		gap: 20px;
	}

	.time-unit {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 60px;
	}
/* Réduire la taille des nombres (Jours, Heures, etc.) */
	.time-unit span {
		font-size: 1.5em !important; /* Réduit de 2em à 1.5em */
		padding: 2px 8px !important; /* Moins d'espace autour du chiffre */
		font-weight: bold;
		background: rgba(255,255,255,0.1);
		padding: 5px 10px;
		border-radius: 4px;
		width: 100%;
	}
/* Réduire l'espace des étiquettes (Jours, Heures...) */
	.time-unit label {
		font-size: 0.7em !important;
		margin-top: 2px !important;
		color: #d1d9e6; /* Votre gris bleu hover */
	}

	@media (max-width: 767px) {
		#countdown-timer { gap: 10px; }
		.time-unit span { font-size: 1.5em; }
	}