.activity-section {
    padding: 50px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.full-width-promo {
    background-color: #e9e9e9;
}
.secondary-color {
    background-color: #e9e9e9;
}

.activity-content-box {
    display: flex;
    flex-direction: row; 
    align-items: center;
    /* gap: 0 40px; */
    max-width: 100vw;
    /* border: 1px solid black; */
}





/* --- STYLE DE BASE & SECTIONS --- */
.activity-section {
    padding: 40px 0;
    width: 100%;
    overflow: hidden;
}

/* La bannière s'étend sur toute la largeur */
.banner {
    padding: 60px 0;
}
.banner, #activity-publish{
    background-color: #f4f4f4;
}
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
.banner strong{
    color: #fff;
}
/* --- LOGIQUE MOBILE FIRST (Empilé) --- */
.activity-content-box {
    display: grid;
    grid-template-columns: 1fr; /* Une seule colonne par défaut */
    gap: 20px;
    text-align: center;
    align-items: center;
}

/* Ordre Mobile : Texte (1), Image (2), Bouton (3) */
.text-content { order: 1; }
.image-placeholder { order: 2; }
.promo-button { order: 3; }

.image-placeholder img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- BOUTONS --- */
.promo-button {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid black;
    transition: 0.3s;
    cursor: pointer;
    width: 100%; /* S'étend sur mobile */
    max-width: 300px;
    margin: 10px auto;
    background: black;
    color: white;
}

/* Alternance des couleurs des boutons via une classe sur la section */
.alt-colors .promo-button {
    background: white;
    color: black;
}

/* --- GRANDS ÉCRANS (Tablettes larges & PC) --- */
@media (min-width: 768px) {
    .activity-content-box {
        grid-template-columns: 1fr 1fr; /* Deux colonnes */
        text-align: left;
        gap: 50px;
    }

    /* Réinitialisation de l'ordre pour l'alignement côte à côte */
    .text-content { order: 1; }
    .image-placeholder { order: 2; }

    /* Le bouton se place sous le texte dans la première colonne */
    /* ou on peut le centrer au milieu des deux colonnes comme demandé */
    .promo-button {
        order: 4;
        grid-column: 1 / span 2; /* Centré sur les deux colonnes */
        width: auto; /* Ne s'étend plus */
        justify-self: center; /* Centrage horizontal */
        margin-top: 20px;
    }

    /* Gestion du Reverse Layout (Image à droite par défaut, à gauche si reverse) */
    /* Mais vous demandiez l'image à droite pour reverse-layout */
    .reverse-layout .text-content {
        order: 1;
    }
    .reverse-layout .image-placeholder {
        order: 2;
    }
    
    /* Pour les sections SANS reverse-layout, on peut mettre l'image à gauche */
    .activity-content-box:not(.reverse-layout) .text-content {
        order: 2;
    }
    .activity-content-box:not(.reverse-layout) .image-placeholder {
        order: 1;
    }

    /* Titres de la bannière */
    .banner h1 {
        font-size: 2.5em;
        margin-bottom: 10px;
    }
}


.reverse-layout {
    flex-direction: row-reverse;
}


.activity-content-box .image-placeholder {
    flex: 1;
    text-align: center;
}

.activity-content-box .text-content {
    flex: 1;
    text-align: left;
}

.activity-image-index {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: none; 
}

.promo-button {
    background: white;
    color: black;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 20px;
    text-decoration: none; 
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    transition: background-color 0.3s;
}
.promo-button:hover,.secondary-button:hover  {
    color: white;
    background-color: #000;
}

.tertiary-button {
    background-color: #000;
    color: white;
}
.tertiary-button:hover {
    background-color: #fff;
    color: #000;}

@media (max-width: 800px) {
    .activity-content-box {
        flex-direction: column; 
        text-align: center;
    }
    .reverse-layout {
        flex-direction: column; 
    }
    .activity-content-box .text-content {
        text-align: center;
    }
}




.hidden-login-area {
    display: none !important; 
}

.cancel-login-button {
    margin-top: 20px;
    background-color: #000; 
    color: white;
    border: none;
    width: 100px;
    height: 40px;
    cursor: pointer;
    border-radius: 20px;
    transition: background-color 0.3s;
    /* padding: 10px 20px; */
}
.cancel-login-button:hover {
    background-color: white;
    color: #000;
}