/* Congo242 — finitions de largeur, superposition et contenus de démonstration */

/* 1. Le menu et ses sous-menus doivent toujours rester au-dessus des cartes Leaflet. */
.c242-header,
.site-header,
.ast-primary-header-bar {
    position: relative;
    z-index: 5000 !important;
}
.c242-nav,
.c242-nav .sub-menu,
.main-header-menu .sub-menu,
.ast-desktop .main-header-menu .sub-menu {
    z-index: 5100 !important;
}
.leaflet-container,
.c242-map,
[id*="map"] .leaflet-container {
    position: relative;
    z-index: 1 !important;
}

/* 2. Communauté : utiliser toute la largeur disponible de la page. */
.c242-slug-communaute .c242-page-content,
.c242-slug-communaute .c242-community-public {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.c242-slug-communaute .c242-community-public-intro {
    width: 100% !important;
    max-width: none !important;
    padding: 38px 42px !important;
}
.c242-slug-communaute .c242-community-public-intro p {
    max-width: 980px !important;
}
.c242-slug-communaute .c242-teaser-grid,
.c242-slug-communaute .c242-space-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
}
.c242-slug-communaute .c242-teaser-card,
.c242-slug-communaute .c242-space-card {
    min-width: 0;
}

/* 3. Publicité & partenariats : même largeur visuelle que les grandes rubriques. */
.c242-slug-publicite-partenariats .c242-page-content,
.c242-ads-page,
.c242-demo-page {
    width: 100% !important;
    max-width: none !important;
}

.c242-demo-intro,
.c242-ads-charter,
.c242-ads-pricing,
.c242-demo-cta {
    border: 1px solid #dfe6e3;
    border-radius: 18px;
    background: #fff;
    padding: 34px 38px;
    margin: 0 0 28px;
    box-shadow: 0 8px 28px rgba(24, 50, 74, .035);
}
.c242-demo-intro {
    background: #f5f8f7;
}
.c242-demo-eyebrow,
.c242-demo-card-label {
    display: inline-block;
    color: #087553;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 9px;
}
.c242-demo-intro h2,
.c242-ads-charter h2,
.c242-ads-pricing h2,
.c242-demo-cta h2 {
    margin: 0 0 12px;
    color: #18324a;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.18;
}
.c242-demo-intro p,
.c242-ads-charter p,
.c242-ads-charter li,
.c242-demo-muted,
.c242-demo-card p,
.c242-demo-cta p,
.c242-demo-note {
    color: #5f7180;
    line-height: 1.7;
}
.c242-ads-charter {
    background: #fff8eb;
    border-left: 4px solid #d9a441;
}
.c242-ads-charter ul {
    margin: 14px 0 18px 22px;
}
.c242-ads-charter li {
    margin: 8px 0;
}
.c242-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 22px;
    border-radius: 14px;
    border: 1px solid #dce4e8;
}
.c242-ads-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    background: #fff;
}
.c242-ads-table th,
.c242-ads-table td {
    padding: 16px 18px;
    border-right: 1px solid #dce4e8;
    border-bottom: 1px solid #dce4e8;
    text-align: left;
    vertical-align: top;
}
.c242-ads-table thead th {
    background: #18324a;
    color: #fff;
    font-size: 14px;
}
.c242-ads-table tbody th {
    background: #f4f7f5;
    color: #526474;
}
.c242-ads-table td {
    color: #087553;
    font-weight: 800;
}
.c242-ads-formats,
.c242-demo-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0 0 28px;
}
.c242-ads-formats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.c242-demo-card {
    border: 1px solid #dfe6eb;
    border-radius: 16px;
    background: #fff;
    padding: 24px;
    min-height: 190px;
    box-shadow: 0 8px 24px rgba(19, 43, 65, .035);
}
.c242-demo-card h3 {
    margin: 0 0 10px;
    color: #18324a;
    font-size: 20px;
    line-height: 1.3;
}
.c242-demo-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background: #eef7f3;
}
.c242-demo-cta > div {
    max-width: 850px;
}
.c242-demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 9px;
    background: #087553;
    border: 1px solid #087553;
    color: #fff !important;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
}
.c242-demo-btn:hover {
    background: #065f43;
}
.c242-demo-note {
    padding: 20px 24px;
    border: 1px dashed #cbd6dc;
    border-radius: 14px;
    background: #fbfcfc;
    margin-top: 24px;
}

/* 4. Les grilles de contenus créés par les shortcodes existants gagnent de la largeur. */
.c242-slug-emploi .c242-content-grid,
.c242-slug-annuaire .c242-content-grid,
.c242-slug-services .c242-service-grid,
.c242-slug-evenements .c242-post-grid {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

@media (max-width: 1050px) {
    .c242-slug-communaute .c242-teaser-grid,
    .c242-slug-communaute .c242-space-grid,
    .c242-demo-card-grid,
    .c242-ads-formats,
    .c242-slug-emploi .c242-content-grid,
    .c242-slug-annuaire .c242-content-grid,
    .c242-slug-services .c242-service-grid,
    .c242-slug-evenements .c242-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 680px) {
    .c242-slug-communaute .c242-community-public-intro,
    .c242-demo-intro,
    .c242-ads-charter,
    .c242-ads-pricing,
    .c242-demo-cta {
        padding: 24px 20px !important;
    }
    .c242-slug-communaute .c242-teaser-grid,
    .c242-slug-communaute .c242-space-grid,
    .c242-demo-card-grid,
    .c242-ads-formats,
    .c242-slug-emploi .c242-content-grid,
    .c242-slug-annuaire .c242-content-grid,
    .c242-slug-services .c242-service-grid,
    .c242-slug-evenements .c242-post-grid {
        grid-template-columns: 1fr !important;
    }
    .c242-demo-cta {
        display: block;
    }
    .c242-demo-cta .c242-demo-btn {
        margin-top: 18px;
    }
}