/*
CTC Separate Stylesheet
Updated: 2025-10-26 19:09:25
*/

#primary{
    width: 100%;
}

#content{
    padding: 0 0 0 0; 
}

.page-header{
    padding: 0 0 0 0;
}

.wpadverts-blocks.wpadverts-block-search.atw-flex.atw-flex-col{
     padding: 20px 0 0 0;
}

/* Solution 1 : Fond blanc semi-transparent simple */
.bandeau-full-width {
    position: relative;
    width: 100%;
}

.bandeau-full-width img {
     object-position: center -30px !important; /* Remonte de xx px */
    width: 45%; /* Réduit à 80% de la largeur */
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain; /* Garde les proportions */
}

.overlay-texte {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.8); /* Blanc à 80% d'opacité */
    padding: 30px 40px;
    border-radius: 10px;
    max-width: 80%;
}

.overlay-texte h2 {
    color: #333;
    margin: 0 0 15px 0;
    font-size: 2em;
}

.overlay-texte p {
    color: #666;
    margin: 0;
    font-size: 1.1em;
}

/* Solution 1 : Masquer le titre sur TOUTES les pages */
.page .entry-title,
.page .page-title,
.page-header h1,
.entry-header h1.entry-title {
    display: none !important;
}

/* Solution 1 : Classe CSS à ajouter à votre image */

.bandeau-full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 400px;
    overflow: hidden;
    background: #f0f0f0; /* Couleur de fond si l'image ne remplit pas */
}


/* Responsive */
@media (max-width: 768px) {
    .overlay-texte,
    .overlay-texte-bordure {
        padding: 20px;
        max-width: 90%;
    }
    
    .overlay-texte h2 {
        font-size: 1.5em;
    }
    
    .overlay-gauche {
        left: 20px;
        max-width: calc(100% - 40px);
    }
}


/* VERSION FORCÉE avec !important */
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    margin: 0 !important;
}

#page {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    width: 100% !important;
}

#content {
    flex: 1 !important;
}

#colophon {
    margin-top: auto !important;
}

.badge-event {
    padding: 6px 12px !important;
    font-size: 0.75em !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;

}

.icon-event {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
    flex-shrink: 0 !important;
}