.home h2{
        position: relative;
        display: inline-block;
        color: var(--dark-pink-color);
        text-align: center;
        font-size: 36px;
        font-weight: 500;
        line-height: normal;
        margin: 0;
}
.home h2::after{
        content: "";
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: var(--pink-color);
}

.home .hero {
        position: relative;
}
.home .hero .img {
        width: 100%;
        height: 352px;
        object-fit: cover;
}
.home .hero .content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: var(--max-width-section);
        margin: 0 auto;
}
.home .hero .content-inner {
        position: absolute;
        top: 0;
        left: var(--margin-section);
        display: flex;
        flex-direction: column;
        justify-content: center;
        row-gap: 4px;
        height: 100%;
        padding: 0 120px 0 calc(100%/12 - 24px);
        background: var(--dark-pink-color);
        color: #fff;
        border-top-right-radius: 504px;
        border-bottom-right-radius: 504px;
}
.home .hero .content-inner::before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -1000px;
        width: 1000px;
        height: 100%;
        background-color: var(--dark-pink-color);
}

.home .hero .content-inner h1 {
        position: relative;
        padding: 24px 0 0 0;
        color: #fff;
        font-size: 48px;
        font-weight: 700;
        margin: 0;
}
.home .hero .content-inner h1::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 104px;
        height: 8px;
        background-color: var(--green-blue-color);
}
.home .hero .content-inner p {
        width: 344px;
        font-size: 20px;
        color: #fff;
        font-weight: 400;
}

.home .hero .form {
        position: absolute;
        top: 100%;
        left: 10%;
        width: 312px;
}

.home .posts .posts-grid {
        row-gap: 48px;
}

.posts-grid .post-item {
        grid-column: 3 / span 4;
        grid-row: span 1;
}
.posts-grid .post-item:nth-child(2n) {
        grid-column: 7 / span 4;
}

.contacts-sn-grid .contacts-sn-item:nth-child(3n + 1) {
        grid-column: 2 / span 3; /* Le premier élément commence à la 2e colonne et prend 3 colonnes */
}

.contacts-sn-grid .contacts-sn-item:nth-child(3n + 2) {
        grid-column: 5 / span 4; /* Le deuxième commence à la 5e colonne et prend 4 colonnes */
}

.contacts-sn-grid .contacts-sn-item:nth-child(3n + 3) {
        grid-column: 9 / span 3; /* Le troisième commence à la 9e colonne et prend 3 colonnes */
}

.contacts-sn-item {
        display: flex;
        justify-content: center;
        column-gap: 16px;
        padding: 24px 32px 24px 0;
}
.contacts-sn-item .icon svg {
        width: 40px;
        height: auto;
}

.contacts-sn-infos {
        display: flex;
        flex-direction: column;
        row-gap: 12px;
}
.contacts-sn-infos span {
        text-transform: uppercase;
        color: var(--dark-color);
        font-size: 14px;
        font-weight: 500;
        line-height: normal;
}

.contacts-sn-item.newsletter {
        background: var(--pink-color);
}
.contacts-sn-item.sn {
        background: var(--dark-pink-color);
}
.contacts-sn-item.contact {
        background: var(--green-color);
}

.contacts-sn-item .sn-container {
        display: flex;
        column-gap: 16px;
}
.contacts-sn-item.sn .contacts-sn-infos span {
        color: #fff;
}
.contacts-sn-item.contact .contacts-sn-infos {
        padding-top: 10px;
}

.home .form-footer{
        display: none;
}

.agenda-img {
        width: 100%;
        grid-column: 2 / span 10;
}

@media (max-width: 1440px) {
        .home .hero .form{
                width: 286px;
        }
}

@media (max-width: 1200px) {
        .posts-grid .post-item {
                grid-column: 2 / span 5;
        }
        .posts-grid .post-item:nth-child(2n) {
                grid-column: 7 / span 5;
        }

        .contacts-sn-item {
                padding: 24px 32px;
                flex-direction: column;
                row-gap: 16px;
        }
        .contacts-sn-item.contact .contacts-sn-infos {
                padding-top: 0;
        }
}

@media (max-width: 992px) {
        .home .hero .img {
                height: 256px;
        }
        .home .hero .content-inner h1 {
                font-size: 40px;
        }
        .home .hero .content-inner p {
                width: 280px;
                font-size: 16px;
        }
        .home .hero .form{
                width: 186px;
        }

        .posts-grid .post-item {
                grid-column: 1 / span 6;
        }
        .posts-grid .post-item:nth-child(2n) {
                grid-column: 7 / span 6;
        }

        .contacts-sn-grid .contacts-sn-item:nth-child(3n + 1) {
                grid-column: 1 / span 4;
        }
        .contacts-sn-grid .contacts-sn-item:nth-child(3n + 3) {
                grid-column: 9 / span 4;
        }
}

@media (max-width: 768px) {
        .home h2{
                font-size: 32px;
        }

        .home .hero .content-inner {
                padding: 0 32px 0 0;
        }
        .home .hero .img {
                height: 200px;
        }
        .home .hero .content-inner h1 {
                font-size: 28px;
        }
        .home .hero .content-inner p {
                width: 240px;
                font-size: 14px;
        }

        .contacts-sn-grid .contacts-sn-item:nth-child(3n + 1) {
                grid-column: 1/7;
        }
        .contacts-sn-grid .contacts-sn-item:nth-child(3n + 2) {
                grid-column: 7 / 13;
        }
        .contacts-sn-grid .contacts-sn-item:nth-child(3n + 3) {
                grid-column: 4 / span 6;
        }

        .agenda-img{
                grid-column: 1 / span 12;
        }

}

@media (max-width: 576px) {
        .home .hero .form{
                display: none;
        }

        .contacts-sn-grid .contacts-sn-item:nth-child(3n + 1),
        .contacts-sn-grid .contacts-sn-item:nth-child(3n + 2),
        .contacts-sn-grid .contacts-sn-item:nth-child(3n + 3) {
                grid-column: 1/13;
        }

        .posts-grid .post-item,
        .posts-grid .post-item:nth-child(2n) {
                grid-column: 1 / 13;
                grid-column: 1 / 13;
        }

        .contacts-sn h2::after {
                left: 50%;
                transform: translate(-50%, 0);
                width: 70%;
        }
}