main > * {
  margin: 0;}

.colonne-activites {
    background-color: var(--clair, #ebd9c2);
    flex: 2;
    display: grid;
    gap: var(--spacing-md, 1.3rem);
    grid-template-columns: 1fr 1fr;
    border-radius: 0 var(--border-radius, 2.8rem) 0 var(--border-radius, 2.8rem);
    padding-top: var(--spacing-xs, .7rem);
    padding-left: var(--spacing-md, 1.3rem);
    padding-right: var(--spacing-lg, 1.5rem);
    padding-bottom: var(--spacing-2xl, 2.4rem);
    margin-top: var(--spacing-md, 1.3rem)
}

.activite {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px
}

.colonne-adresse {
    flex: 1;
    padding: var(--spacing-lg, 1.5rem);
    padding-top: 5rem
}

.activite h3 {
    color: var(--vert, #0b522d)
}

.colonne-adresse p,
.h1-sub {
    color: var(--clair, #ebd9c2)
}

.colonne-adresse img {
    margin-bottom: var(--spacing-lg, 1.5rem)
}

@media screen and (max-width:1199px) {
    .onglet-content {
        flex-direction: column;
        gap: var(--spacing-xl, 2rem)
    }

    .colonne-adresse img {
        max-width: 300px;
        margin-bottom: auto
    }

    .colonne-adresse {
        display: flex;
        gap: var(--spacing-md, 1.3rem);
        margin-bottom: var(--spacing-lg, 1.5rem);
        flex-direction: column;
        padding-top: var(--spacing-xl)
    }
}

@media screen and (max-width:850px) {
    .colonne-activites {
        grid-template-columns: 1fr
    }
}

@media screen and (min-width:500px) and (max-width:1199px) {
    .colonne-adresse {
        flex-direction: row
    }
}

.h1-sub {
    font-size: var(--font-size-h2-sub, .9rem);
    line-height: 120%
}

.activites-section .container {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl)
}

@media screen and (min-width:1200px) {
    .onglet-content {
        display: flex;
        padding: 0 var(--margin-page, 1.2rem) 0 var(--margin-page, 1.2rem)
    }

    .h1-sub {
        max-width: 60%
    }

    .activites-section .container {
        padding-left: 0;
        padding-right: 0
    }
}

footer {
    margin-top: var(--spacing-xl) !important
}

/* Bloc: boutons vers les 2 autres activites */
.activites-related-links {
    --related-activity-btn-width: clamp(16rem, 34vw, 24rem);
    width: 100%;
    background: var(--clair, #ebd9c2);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, var(--related-activity-btn-width)));
    justify-content: center;
    gap: var(--spacing-sm, 1rem);
    padding-top: var(--spacing-lg, 1.5rem);
    padding-bottom: var(--spacing-lg, 1.5rem);
}

.activites-related-button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm, 1rem);
    color: var(--clair, #ebd9c2);
    padding: var(--spacing-sm, 1rem) var(--spacing-lg, 1.5rem);
    border-radius: 50px 0;
}

.activites-related-button--solidarite { background: var(--vert, #0b522d); }
.activites-related-button--loisirs { background: var(--violet, #65336a); }
.activites-related-button--mieux-manger-pour-tous { background: var(--orange, #dd614a); }

.activites-related-button:hover {
    filter: brightness(1.08);
}

@media screen and (max-width: 720px) {
    .activites-related-links {
        grid-template-columns: minmax(0, min(100%, 28rem));
        padding-left: var(--spacing-md, 1.3rem);
        padding-right: var(--spacing-md, 1.3rem);
    }
}

@media screen and (max-width: 1199px) {
    .activites-section .container {
        padding-left: var(--spacing-sm, 1rem);
        padding-right: var(--spacing-sm, 1rem);
    }
}