:root {
    --small-margin: 40px;
    --medium-margin: 70px;
    --ltspace: 70px;
    --mdspace: 120px;
    --bigspace: 180px;
    --side-base: 8vw;


    --Noir: #000E1C;
    --Blanc: #FFFFFF;
    --Bleu-SAOE: #1492CF;
    --Rose:#ED4365;
    --Jaune:#D68000;
    --Vert:#04AA57;
    --Gris-tres-Clair: #E3E8ED;

}


::selection {
    background-color: var(--Noir);
    color: white;
}

/* Firefox */
::-moz-selection {
    background-color: var(--Noir);
    color: white;
}

/* width */
::-webkit-scrollbar {
    width: 2px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--Blanc);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--Noir);
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--Noir);
    width: 2px;
}

body{
    background: white;
    color: var(--Noir);
    overflow-x: hidden;
}

#header{
    height: fit-content ;
    padding: 0 ;
    position: sticky ;
    top:0;
    transition: transform 0.3s ease;
    background-color: var(--Blanc);
}

#header.hide {
    transform: translateY(-102%);
}

#header.nav-open {
    position: fixed;
}

#site-title .screen-reader-text{

}

#site-title>a{
    background-color: var(--Bleu-SAOE);
    padding: 13px 50px;
    font-size: 0;
    display: block;
    width: fit-content;
}

#site-title>a img{
    min-width: 120px;
    width: 10vw;
    max-width: 173px !important;
    transition: 0.2s ease-in;
}

#site-title>a:hover img{
    transform:  translateY(-5px);
}

#menu{
    margin: auto var(--side-base) 14px auto;
    padding-left: 40px;
}

.menu-main-menu-container{
    display: flex;
    position: relative;
}

#menu .menu{
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0 0 0 auto;
}

#main-menu-underline {
    position: absolute;
    bottom: -14px;
    height: 8px;
    background-color: var(--Bleu-SAOE);
    transition: all 0.3s ease;
    transform-origin: left;
    pointer-events: none;
    box-sizing: border-box;
    border-left: solid 16px var(--Blanc);
    border-right: solid 16px var(--Blanc);
}

#menu .menu>li>a{
    color: var(--Noir, #000E1C);
    font-family: Poppins;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 115.667%; /* 27.76px */
    letter-spacing: -0.128px;
    margin: 0;
    text-transform: unset;

    position: relative;
    display: inline-block;
    padding: 10px 16px;
}

#main-menu-container .menu>li:last-of-type>a{
   padding-right: 0px;
}

#main-menu-container #menu-main-menu.menu>li:hover ~ #main-menu-underline{
    border-right: solid 16px var(--Blanc);
}

#main-menu-container .menu>li:last-of-type:hover ~ #main-menu-underline, #main-menu-container .menu>li:last-of-type.current_page_item ~ #main-menu-underline, #main-menu-container #menu-main-menu>li:last-of-type.current_page_item:hover ~ #main-menu-underline, #main-menu-container #menu-main-menu>li:last-of-type:hover ~ #main-menu-underline{
    border-right: solid 0px;
}

#menu .menu>.current_page_item>a{
    color: var(--Noir, #000E1C);
}

#container{
    padding: 0;
    background: white;
}
* {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}

#menu.toggled>.menu-toggle {
    display: flex;
}

#menu .menu-text {
    color: var(--Noir);
}

#menu .menu-icon span{
    background-color: var(--Noir);
}

#menu.toggled .menu-text {
    color: var(--Blanc);
}

#menu.toggled .menu-icon span{
    background-color: var(--Blanc);
}


/* landing */

.landing{
    position: relative;
    min-height: 453px;
    height: calc(100svh - 114px);
    overflow: hidden;
    background-color: var(--Noir);
}

.landing.bandeau{
    height: calc(60vh - 114px);
}

.landing>div:first-child{
    position: absolute;
    width: 70%;
    max-width: 835px;
    z-index: 2;
    inset: auto auto 15% var(--side-base);
}

h1, h2, h3, h4, p{
    word-break: break-word;
    overflow-wrap: break-word;
}

strong {
    font-weight: 600;
}

h1{
    position: relative;
    color: var(--Noir, #000E1C);
    leading-trim: both;
    text-edge: cap;
    font-family: Poppins;
    font-size: 56px;
    font-weight: 700;
    line-height: 111%; /* 73.26px */
    letter-spacing: -1.436px;
    background-color: var(--Blanc);
    padding: 40px 54px;
    margin: 0;
    z-index: 2;
    width: fit-content;
    max-width: 650px;
    margin-bottom: -40px;
}

.h1_accueil{
    max-width: 570px;
    margin-right: 20px;
}

.landing p{
    color: var(--Blanc);
    /* 36-reg */
    font-family: Poppins;
    font-size: 30px;
    line-height: 112.667%; /* 40.56px */
    letter-spacing: 0.168px;
    background-color: var(--Bleu-SAOE);
    padding: 66px 40px 36px;
    margin: 0 0 0 60px;
    z-index: 1;
    width: fit-content;
}

.landing video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prochainement, .c_quoi, .perso_ecoute, .activites, .apercu_reseaux, .affichage_activite, .le_saoe, .l_equipe, .prochaines_act, .historique, .liens, .page_souvenir, .formulaire, .presence, .content-page{
    padding: var(--mdspace) var(--side-base) 0 var(--side-base);
}

.content-page h1{
    padding: 0 0 30px 0;
    color: var(--Bleu-SAOE);
}

h2{
    color: var(--Noir);

    /* h2-Accueil */
    font-size: 48px;
    font-weight: 600;
    line-height: 110%; /* 66px */
    letter-spacing: -1.32px;
}

.prochainement ul{
    margin: 44px 0;
}

.prochainement li{
    display: flex;
    gap: 10px;
    height: fit-content;
    max-width: 80%;
    margin: 16px 0;
}

.prochainement li>div{
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 126%; /* 30.24px */
    padding: 30px 40px;
    background-color: var(--Noir);
    color: var(--Blanc);
    margin: 0;
    height: fit-content;
    width: 100%;
}

.prochainement li>div>p{
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 126%; /* 30.24px */
    color: var(--Blanc);
    margin: 0;
}

.prochainement li>div>p strong{
    text-decoration: underline;
}

.prochainement .date{
    opacity: 0.7;
}

.prochainement .date::first-letter{
    text-transform: uppercase;
}

.prochainement li img{
    aspect-ratio: 1/1;
    height: 120px;
    max-width: unset !important;
}

.prochainement>ul>li:nth-child(2){
    flex-direction: row-reverse;
    margin-left: auto;
    margin-right: 0;
}

.prochainement>ul>li:nth-child(2)>div{
    background-color: var(--Vert);
}

.prochainement>ul>li:last-child>div{
    background-color: var(--Jaune);
}

.c_quoi{
    display: flex;
    gap: 11%;
    box-sizing: border-box;
    align-items: center;

}

.c_quoi>div:first-child{
    width: 39%;
}

p{
    color: var(--Noir, #000E1C);
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;
}

.c_quoi>div>p{
    margin: 20px 0;
}

.c_quoi>div>h2{
    margin: 20px 0 22px 0;
}

.c_quoi>.legende{
    width: 50%;
    position: relative;
    height: fit-content;
}

.c_quoi > .legende::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Ton dégradé bleu semi-transparent */
    background: linear-gradient(0deg, rgba(1, 127, 216, 0.10) 0%, rgba(1, 127, 216, 0.10) 100%);

    pointer-events: none;
    z-index: 1;
}

.c_quoi>.legende>img{
    width: 100%;
    height: auto;
    aspect-ratio: 14/10;
}



.c_quoi>.legende>span{
    position: absolute;
    background-color: var(--Bleu-SAOE);
    color: var(--Blanc, #FFF);
    font-family: "Neue Haas Grotesk Display Pro", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 124%; /* 24.8px */

    padding: 8px 18px;
    width: fit-content;
    inset: auto 20px -15px auto ;
}

.perso_ecoute>ul>li{
    color: var(--Noir, #000E1C);
    font-family: Poppins;
    font-size: 44px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 47.3px */
    letter-spacing: -1.211px;
    line-height: 70px;
}

.perso_ecoute>ul>li:first-child{
    padding: 80px 0 44px 16%;

}

.perso_ecoute>ul>li:nth-child(2){
    padding: 44px 0;
}

.perso_ecoute>ul>li:nth-child(3){
    padding: 44px 0 44px 24%;
}

.perso_ecoute>ul>li>span{
    padding: 10px 20px;
    color: var(--Blanc, #FFF);
    font-size: 44px;
    font-weight: 600;
    background-color: var(--Rose);
}

.video_move{
    position: absolute;
    top:0;
    left:0;
    overflow: hidden;
    height: 300px;
    width: 300px;
    z-index:9999;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    transform-origin: center;
    transition: 0.2s;
}

.perso_ecoute>ul{
    position: relative;
}

.perso_ecoute>ul:hover>.video_move{
}

.perso_ecoute>ul:not(:hover)>.video_move{
}

.video_move>div{
    display: flex;
    flex-direction: column;
}

.video_move>div video{
    height: 300px;
    object-fit: cover;
}

.card_ecoute{
    margin: 0;
    padding: 0;
    height: 300px;
    background-color: rgba(255, 255, 255, 0);
}

.card_ecoute>p{
    display: none;
    margin: 0;
    padding: 0;
}

/* slider */

.activites{
    padding-right: 0;
}

.activites h2{
    padding-right: var(--side-base);
}

.activites .slider{
    display: flex;
    height: fit-content;
    box-sizing: border-box;
    margin-top: 46px;
}

.activites .swiper {
    overflow: hidden;
    padding-right: calc(10vw + var(--side-base));
    height: fit-content;
    padding-bottom: 150px;
    max-width: 100%;
}

.activites .slider .fleches{
    display: flex;
    gap: 4px;
    height: fit-content;
    z-index: 10;
}

.activites .slider .fleches>div{
    color: var(--Blanc);
    background-color: var(--Bleu-SAOE);
    position: static;
    height: 60px;
    width: 60px;
    margin: 0;
}

.activites .slider .fleches>div:after{
    display: none;
}

.activites .slider .fleches>div>svg{
    width: 12px;
    height: 23px;
}

.activites .slider .swiper-wrapper{
    width: 100%;
    aspect-ratio: 10/6;
    height: auto;
    max-height: 900px;
}

.activites .slider .swiper-slide{
    width: 100%;
    height: 100%;
    padding: 0 ;
    margin: 0 !important;
}

.swiper-slide {
    opacity: 0.4;
    transition: opacity 0.3s ease;
    transform: scale(0.9);
}

.swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}

.activites .activite img, .activites .activite video{
    width: calc(100% - 32px);
    height: 100%;
    margin-left: 30px;
    margin-right: 2px;
    object-fit: cover;
    object-position: center;
}

.activites .activite{
    color: var(--Blanc);
}

.activites .activite .info_article{
    position: relative;
    margin: -60px auto auto 30px;
    opacity: 0;
}

.activite .info_article svg{
    min-width: 10px;
    margin-bottom: 0px;
}

.activites .swiper-slide-active .info_article{
    opacity: 1;
}

.activites .activite .info_article>.titre_act{
    position: absolute;
    background-color: var(--Bleu-SAOE);
    color: var(--Blanc);
    padding: 25px 28px 25px 36px;
    inset: -73px auto auto -30px;
    display: flex;
    align-items: flex-end;
    z-index:3;
    gap: 8px;
}

.activites .activite:hover svg, .liste_activites .activite:hover svg, .affichage_activite .action_filtre>a:hover svg, .prochaines_act>div:first-child a:hover svg, .souvenir:hover svg, .btn_unique:hover svg, .affichage_activite>.lien_horaires svg{
    transform: translateX(50%);
}

.bouton_retour:hover svg{
    transform: translateX(-30%);
}

.activites .activite h3{
    margin: 0 0 5px 0;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 126%; /* 30.24px */
}

.activites .activite .info_article>.titre_act p{
    color: var(--Blanc);
    margin: 0;
    /* Paragraphe */
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;
    padding-right: 6px;
}

.activites .activite .info_article>p{
    background-color: var(--Noir);
    color: var(--Blanc);
    height: fit-content;
    padding: 60px 36px 30px;
    margin: 0px auto auto 0px;
    width: fit-content;
    max-width: 70%;

    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;
}

.clamp-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;
    text-overflow: ellipsis;

    /* Important : éviter que le padding du parent affecte la hauteur visible */
    display: -webkit-box;
}





.affichage_activite .action_filtre{
    display: flex;
    justify-content: space-between;
    margin-bottom: 47px;
}

.affichage_activite .action_filtre .filtres-activites{
    display: flex;
    gap: 1px;
}

.affichage_activite .action_filtre a{
    background: var(--Gris-tres-Clair, #E3E8ED);
    padding: 17px 25px;
    display: block;

    color: var(--Noir, #000E1C);
    font-size: 20px;
    font-weight: 400;
    line-height: 128%; /* 25.6px */
    text-align: center;
    height: 100%;
    align-items: center;
    display: flex;
}

.affichage_activite .action_filtre .filtre-link.active{
    background-color: var(--Bleu-SAOE);
    color: var(--Blanc);
}

.affichage_activite .action_filtre>a,  .affichage_activite>.lien_horaires{
    background-color: var(--Bleu-SAOE );
    color: var(--Blanc);
    display: flex;
    align-items: center;
    gap: 17px;
    margin-left: 20px;
}

.affichage_activite>.lien_horaires{
    display: none;
}

.page-numbers {
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
    color: #0073aa;
}

.affichage_activite .action_filtre .custom-select-wrapper{
    display: none;
}




    /* apercu reseaux */

.apercu_reseaux h2{
    margin-bottom: 46px;
}

.insta_tok{
    display: flex;
    overflow: hidden;
}

.insta_tok>div{
    display: block;
    width: auto;
    height: 40vh;
}

.insta_tok>.insta_video{
    aspect-ratio: 14/16;
    width: auto;
    height: auto;
    flex: 1 1 0;
    display: flex;
}

.insta_tok>.insta_video .eapps-instagram-feed-posts-item-image, .insta_tok>.insta_video .eapps-instagram-feed-posts-item-image-wrapper{
    aspect-ratio: 14/16;
    width: calc((100vw - (2 * var(--side-base)) - 60px) / 3) !important;
    height: 47vw !important;
}

.insta_tok>.insta_video .eapps-instagram-feed-container{
    margin: auto 0 0 0;
}

.insta_tok>.insta_video, .insta_tok>.insta_video .eapps-instagram-feed-content, .insta_video .eapps-instagram-feed-container{
    aspect-ratio: 14/16;
    width: calc((100vw - (2 * var(--side-base)) - 60px) / 3) !important;
}

.insta_tok>.tiktok_video{
    /*flex: 1 1 auto;*/
    width: auto;
    height: fit-content;
}

.insta_tok>.tiktok_video .Grid__GridContainer-sc-1agzqrd-0>div{
    aspect-ratio: 14/16;
    width: calc((100vw - (2 * var(--side-base)) - 60px) / 3);
    margin: 0 0 0 30px;
    /*max-height: 80vw;*/
}

.insta_tok .Main__Inner-sc-129s5zi-0{
    margin: 0;
    max-width: none !important;
}

.apercu_reseaux .MediaContainer__Container-sc-1rcutn9-0{
    height: 40vw !important;
}




/* page liste des activités */

#filtre_activites label>input{
    display: none;
}

#filtre_activites label{
    background-color: var(--Bleu-SAOE);
}

.liste_activites{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 29px;
    row-gap: 80px;
}

.liste_activites>.activite{
    width: 100%;
    height: fit-content;
    max-width: 800px;
}

.liste_activites>.activite .info_article{
    /*position: absolute;*/
    position: relative;
    background-color: var(--Noir);
    padding: 26px 18px 26px 26px;
    display: flex;
    gap: 26px;
    align-items: flex-end;
    z-index: 3;
    margin: -73px 30px auto 30px;
    width: fit-content;
}

.liste_activites>.activite .info_article svg{
    min-width: 10px;
    margin-bottom: 4px;
}


.liste_activites>.activite img{
    object-fit: cover;
    object-position: center;
    aspect-ratio: 20/15;
    width: 100%;
}

.liste_activites>.activite .no_img{
    aspect-ratio: 20/15;
    width: 100%;
    background-color: var(--Bleu-SAOE);
}

.liste_activites>.activite .info_article p{
    color: var(--Blanc);
    margin: 0;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;
}

.liste_activites>.activite .info_article h2{
    color: var(--Blanc);
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pagination-ajax, #souvenir-pagination{
    margin: 100px auto auto;
    display: flex;
}

#pagination-ajax ul, #souvenir-pagination ul{
    display: flex;
    margin: auto;
}

#pagination-ajax ul li a, #pagination-ajax ul li span, #souvenir-pagination ul li a, #souvenir-pagination ul li span{
    aspect-ratio: 1 / 1;
    height: 36px;
    width: 36px;
    padding: 0;
    display: flex;
    margin: 0 1px;
    background-color: var(--Gris-tres-Clair);
    color: var(--Noir);
    align-items: center;
    justify-content: center;
}

#pagination-ajax ul li span, #souvenir-pagination ul li span{
    background-color: var(--Bleu-SAOE);
    color: var(--Blanc);
}

/* page activite */

.page_article{
    padding: 0 var(--side-base) 0 0;
}

.page_article>article{
    padding: 0;
}

.page_article>article>img, .page_article>article>video, .page_article>article>.no_img{
    width: 75vw;
    aspect-ratio: 7/4;
    object-fit: cover;
    object-position: center;
    background-color: var(--Jaune);
    pointer-events: none;
    max-height: calc(100svh - 94px - 180px);
}

.page_article>article>.no_img{
    aspect-ratio: 7/2;
}

.page_article>article>.block_contenu{
    display: flex;
    flex: auto 1;
    margin: -120px 0 0 calc(var(--side-base) + 12% );
}

.page_article>article>div>.bouton_retour, .page_souvenir .bouton_retour{
    background-color: var(--Bleu-SAOE);
    height: 60px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
}

.page_article>article>div>.contenu {
    display: grid;
    grid-template-columns: 1fr 300px;
    padding: 70px 60px;
    flex: 1 1 0;
    margin-left: 8px;
}


.page_article>article>div>.contenu, .page_article>article>div>.contenu h2  {
    background-color: var(--Noir);
    color: var(--Blanc);
}

.page_article>article>div>.contenu p{
    color: var(--Blanc);
}

.page_article>article>div>.contenu .colone_1{
    width: 100%;
    grid-area: 1 span / 1 span;
}

.page_article>article>div>.contenu h1{
    position: static;
    margin: 0 0 36px;
    padding: 0;
    background-color: var(--Noir);
    color: var(--Blanc);
    font-size: 56px;
    font-weight: 600;
    line-height: 102%; /* 61.2px */
}

.page_article>article>div>.contenu .colone_1 h2{
    margin: 36px 0 22px;
    font-size: 36px;
    font-weight: 600;
    line-height: 110%; /* 48.4px */
    letter-spacing: -0.792px;
    padding: 0;
}

.page_article h2 .fleche{
    display: none;
}

.page_article>article>div>.contenu .colone_1 p.chapeau{
    margin: 14px 0 22px;
    font-size: 24px;
    line-height: 125.667%; /* 30.16px */
    letter-spacing: 0.24px;
}

.page_article>article>div>.contenu .colone_1 p, .page_article>article>div>.contenu .colone_1 ul{
    margin: 14px 0 22px;
    font-size: 20px;
    font-weight: 400;
    line-height: 128%; /* 25.6px */
}

.page_article>article>div>.contenu .colone_1 ul{
    list-style: square;
    margin-left: 18px;
}

.page_article>article>div>.contenu .colone_1 .acf_table tr{
    border-top: 1px solid rgba(255, 255, 255, 0.40);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 130% */
    height: fit-content;
}

.page_article>article>div>.contenu .colone_1 .acf_table thead tr{
    border-top: 0;
}

.page_article>article>div>.contenu .colone_1 .acf_table tbody tr:last-child{
    border-bottom: 1px solid rgba(255, 255, 255, 0.40);
}

.page_article>article>div>.contenu .colone_1 .acf_table th,
.page_article>article>div>.contenu .colone_1 .acf_table td {
    padding: 12px 20px 12px 0;
    word-wrap: break-word;
}

.page_article>article>div>.contenu .colone_1 .horaires li:last-child{
    border-top: 1px solid rgba(255, 255, 255, 0.40);
}

.page_article>article>div>.contenu .colone_1 .acf_table tbody td:first-child{
    border-top: 0 ;
}

/*.page_article>article>div>.contenu .colone_1 .acf_table{*/
/*    border-bottom: 1px solid rgba(255, 255, 255, 0.40);*/
/*}*/

.page_article>article>div>.contenu .colone_1 .horaires li span{
    margin-right: 40px;
}

.page_article>article>div>.contenu .colone_2{
    flex: 1 1 0;
    margin-left: 60px;
    display: flex;
    flex-direction: column;
    grid-area: 1 / 2 / 3 / 2;
}

.page_article>article>div>.contenu .colone_2 .sous_titre{
    font-size: 15px;
    font-weight: 600;
    line-height: 128%; /* 19.2px */
    letter-spacing: 0.3px;
}

.page_article>article>div>.contenu .colone_2 p {
    font-size: 20px;
    font-weight: 400;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;
    margin: 0 0 22px;
}

.page_article>article .colone_2 .btn_inscription, .prochaines_act .btn_inscription,  .prochaines_act>div:first-child a, .btn_unique{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--Bleu-SAOE);
    color: var(--Blanc);
    padding: 8px 20px;
    height: 42px;
    margin-top: 14px;
    text-decoration: unset;
}

.prochaines_act  .btn_act_mobile{
    display: none;
}

.page_article>article .colone_2 .btn_inscription svg, .prochaines_act>div:first-child a svg{
    margin-left: 17px;
}

.page_article>article .colone_2 .partage {
    margin: 20px 0 0 auto;
}

.page_article .boutons_art{
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    flex-grow: 1;
    align-items: stretch;
}

.partage {
    display: flex;
}

.partage a{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--Bleu-SAOE);
    height: 42px;
    width: 42px;
    margin-left: 6px;
    cursor: pointer;
}

.souvenirs .partage a {
    margin: 0 6px 0 0;
}

.prochaines_act>div:first-child{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bloc-audio audio {
    width: 100%;
    max-width: 500px;
    margin: 1em auto;
    height: 54px;
}

.page_article>article>.block_contenu .contenu>.colone_1 .en_avant_fond{
    background-color: var(--Bleu-SAOE) ;
    padding: 10px 20px;
}

.page_article>article>.block_contenu .contenu>.colone_1 .en_avant_fond>p, .page_article>article>.block_contenu .contenu>.colone_1 .en_avant_fond>h2{
    background-color: rgba(255, 255, 255, 0);
}

.liste_horaires{
    width: fit-content;
}

.liste_horaires th{
    text-align: left;
    padding: 10px 20px 10px 0;
    font-weight: 600;
}

.tiret_sep{
    color: var(--Bleu-SAOE);
    margin: 0 14px;
}

.page_article a {
    color: var(--Blanc);
    text-decoration: underline;
}

.page_article .pom-text{
    color: var(--Blanc) !important;
}

form label {
    display: block;
    font-weight: normal;
    margin-bottom: 0;
    color: var(--Noir);
}

.page_article form label {
    color: var(--Blanc);
}


/* page liste souvenir */

.img_defile{
    display: flex;
    height: 100%;
    pointer-events: none;
}

.img_defile .swiper-slide{
    aspect-ratio: 1 / 1;
    height: 100% !important;
    width: auto;
    transform: none;
    opacity: 1;
}

.img_defile img{
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
}

.btn_unique{
    width: fit-content;
}

.btn_unique>span{
    text-decoration: unset;
    margin-right: 15px;
}

.page_article .btn_unique>span, .page_article .btn_unique{
    text-decoration: none;
}

.affichage_souvenir{

}

.slider-souvenirs {
    width: 100%;
    overflow: hidden;
}

.slider-souvenirs .swiper-wrapper{
    width: 100vw;
}


#filtre-annee, #filtre-categorie{
    background-color: var(--Bleu-SAOE);
    color: var(--Blanc);
    font-size: 20px;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;
    border-radius: 0;

    padding: 17px 58px 17px 25px;
}

.custom-select-wrapper {
    position: relative;
    display: inline-block;
}

.affichage_souvenir .custom-select-wrapper {
    margin-bottom: 50px;
}

.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    border: 0;
    width: 100%;
    cursor: pointer;
}

/* page souvenir */

.page_souvenir{
    padding: 60px var(--side-base);
}

.page_souvenir>article>.colone_souvenir{
    width: 100%;
}

.page_souvenir>article>.colone_souvenir>div:first-child>div:first-child{
    display: flex;
    gap: 10px;
}

.page_souvenir>article>.colone_souvenir>div:first-child>div:first-child>div{
    background-color: var(--Noir);
    padding: 50px 60px;
    margin: 0 28% -57px 0;
    z-index: 2;
    position: relative;
}

.page_souvenir>article>.colone_souvenir h1{
    position: static;
    background-color: rgba(0, 0, 0, 0);
    color: var(--Blanc, #FFF);
    font-size: 44px;
    font-weight: 600;
    line-height: 110%; /* 48.4px */
    letter-spacing: -0.792px;
    padding: 0;
    margin: 0;
}

.page_souvenir>article>.colone_souvenir>div:first-child p{
    color: var(--Blanc, #FFF);
    font-size: 24px;
    line-height: 125.667%; /* 30.16px */
    letter-spacing: 0.24px;
    margin: 22px 0 0;
}

.souvenirs_contenu{
    margin-left: 170px;
}

.date_img{
    display: flex;
}

.date_souvenir{
    margin: 97px 70px 0 0;
    flex: 0 0 auto;
    width: 100px;

    color: var(--Noir, #000E1C);

    /* 20-Semi */
    font-size: 20px;
    font-weight: 600;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;
}

.haut_souvenir>div:first-child .date_souvenir{
    display: none;
}

.date_img img, date_img .no_img{
    width: 100%;
    min-height: 30vh;
    max-height: 75vh;
}

.souvenirs>div:last-child .no_img{
    min-height: 50px;
}

.souvenirs h2{
    color: var(--Noir, #000E1C);
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 125.667%; /* 30.16px */

    margin: 45px 20% 22px 0;
}

.page_article .souvenirs h3, .page_article .souvenirs h4, .page_article .souvenirs h5, .page_article .souvenirs h6{
    color: var(--Noir, #000E1C) !important;
    font-size: 20px;
    font-weight: 600;
    line-height: 128%;
    letter-spacing: 0px;
}

.souvenirs p, .souvenirs ul{
    max-width: 1250px;
    font-size: 20px;
    font-weight: 400;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;
    margin: 22px 20% 20px 0;
}

.souvenirs ul{
    list-style: square;
    padding-left: 20px;
}

.galerie{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 29px;
    margin: 29px 0 40px;
}

.galerie img{
    aspect-ratio: 1 / 1;
    width: 100%;
}


/* Supprimer les styles par défaut sur focus */
.custom-select:focus {
    outline: none;
}

/* Flèche SVG positionnée */
.custom-arrow {
    position: absolute;
    right: 25px;
    top: 50%;
    pointer-events: none;
    transform: translateY(-50%);
    color: #666;
    height: 13px;
}

.custom-select:target ~ .custom-arrow svg {
    background-color: #0A246A;
    transform: translateY(-50%) rotate(180deg);
}

.affichage_souvenir .souvenir{
    min-width: 0;
    width: 100%;
    display: grid;
}

.affichage_souvenir .souvenir img{
    aspect-ratio: 1 / 1;
    width: calc(100% - 41px);
    grid-area: 1/1;
    z-index: 2;
    min-width: 0;
}

.affichage_souvenir .souvenir .no_img{
    aspect-ratio: 1 / 1;
    width: calc(100% - 41px);
    grid-area: 1/1;
    z-index: 2;
    min-width: 0;
    background-color: var(--Bleu-SAOE);
    color: var(--Blanc);
    font-size: 36px;
    line-height: 112.667%; /* 40.56px */
    letter-spacing: 0.168px;
    padding: 40px;
    max-width: 100%;
    overflow: hidden; /* 💥 bloque les débordements */
    text-overflow: ellipsis;
}

.info_souvenir{
    background-color: var(--Noir);
    padding: 26px;
    margin: 104px 0 0 41px;
    aspect-ratio: 1/1;
    grid-area: 1/1;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    min-width: 0;
    max-width: 100%;
}

.info_souvenir>div{
    width: calc(100% - 40px);
}

.info_souvenir h2{
    color: var(--Blanc);
    margin: 0;

    font-size: 20px;
    font-weight: 600;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;

    white-space: nowrap;         /* Empêche le retour à la ligne */
    overflow: hidden;            /* Cache ce qui dépasse */
    text-overflow: ellipsis;     /* Ajoute les "…" à la fin */
}

.info_souvenir p{
    color: var(--Blanc);
    margin: 0;

    font-size: 20px;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;

    opacity: 0.7;
}

.info_souvenir svg{
    margin: auto 16px 2px 14px;
}



/* Page presence */

.le_saoe{
    display: flex;
    align-items: center
}

.le_saoe img{
    aspect-ratio: 14/9;
    width: 48%;
    margin-left: 58px;
}

.le_saoe h2, .historique .chronologie h2{
    margin: 30px 0 22px 0;
    color: #011426;
    font-size: 44px;
    font-weight: 600;
    line-height: 110%; /* 48.4px */
    letter-spacing: -0.792px;
}

.le_saoe ul{
    list-style: square;
    padding-left: 20px;
}

.le_saoe li, .le_saoe p{
    color: var(--Noir, #000E1C);
    font-size: 20px;
    font-weight: 400;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0px;
}

.le_saoe p, .le_saoe ul{
    margin: 22px 0 14px 0;
}


.menu_presence li.active {
    background: var(--Bleu-SAOE);
}

.bloc_contenu {
    display: none;
}

.contenu_act .bloc_contenu{
    display: block;
}

.bloc_contenu.active {
    display: block;
}

.presence{
    margin: 0;
    gap: 0px;
}

.card.presence .contenu{
    padding: 0 40px 0 0;
    background-color: var(--Noir);
    width: 100%;
}

.presence img{
    background-color: #0c6ca0;
    margin-left: -40px;
    object-fit: cover;
    object-position: center;
    width: 30vw;
    height: 45vw;
}

.menu_presence{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:2px;
}


.menu_presence li{
    background: rgba(227, 232, 237, 0.25);
    padding: 17px 25px;
    color: var(--Blanc);
    cursor: pointer;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    text-align: center;
    height: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
}

.menu_presence li:hover{
    background: var(--Jaune);
}

.presence .contenu>div{
    padding: 50px 60px;
}

.presence .contenu>div h2{
    color: var(--Blanc, #FFF);
    font-size: 44px;
    font-weight: 600;
    line-height: 112%; /* 49.28px */
    margin: 0;
}

.presence .contenu p, .presence .contenu ul{
    color: var(--Blanc, #FFF);
    font-size: 20px;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;
}

.presence .contenu>div p {
    margin: 22px 0;
}

.presence .contenu>div ul {
    margin: 14px 0 22px ;
}

.presence .contenu>div h3{
    color: var(--Blanc);
    font-size: 20px;
    font-weight: 600;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0px;
    margin: 22px 0 14px 0;
}

.presence ul.jours_present{
    padding-left: 20px;
}

.presence ul.jours_present li{
    position: relative;
}

.presence ul.jours_present li::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%; /* centre verticalement la puce */
    width: 10px; /* taille puce */
    height: 10px;
    background-color: var(--Vert); /* couleur puce */
    border-radius: 50%; /* puce ronde */
    transform: translate(-20px, -55%);
}

.presence .contact{
    padding-left: 18px;
}

.presence .contact{
    margin-top: 15px;
}

.contenus_presence .fleche{
    display: none;
    margin-left: 8px;
}



/* Page a propos */


.l_equipe>.intro{
    min-width: 500px;
    width: 50%;
}

.l_equipe img{
    aspect-ratio: 14/9;
    width: 48%;
    margin-left: 58px;
}

.l_equipe h2{
    margin: 30px 0 22px 0;
    color: #011426;
    font-size: 44px;
    font-weight: 600;
    line-height: 110%; /* 48.4px */
    letter-spacing: -0.792px;
}

.l_equipe .intro p{
    color: var(--Noir, #000E1C);
    font-size: 20px;
    font-weight: 400;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;
    margin: 22px 0 14px 0;
}

.cards{
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 60px;
}

.card{
    display: flex;
    position: relative;
}

/* cartes impaires (1, 3, 5…) → marge à gauche */
.cards .card:nth-child(odd) {
    margin-left: 0;
    margin-right: 18%;
}

/* cartes paires (2, 4, 6…) → marge à droite */
.cards .card:nth-child(even) {
    margin-left: 18%;
    margin-right: 0;
}

.card>.contenu{
    background-color: var(--Bleu-SAOE);
    padding: 60px 100px 50px 60px;
    margin: 45px 0 40px;
}

.card .individu{
    position: absolute;
    background-color: var(--Noir);
    padding: 22px 30px;
    width: fit-content;
    left: 60px;
    z-index: 2
}

.card .individu h3, .card .individu p{
    color: var(--Blanc, #FFF);
    font-size: 24px;
    line-height: 125.667%; /* 30.16px */
    letter-spacing: 0.24px;
    margin: 0;
    width: fit-content;
}

.card .individu h3{
    font-weight: 600;
}

.card .individu p{
    font-weight: 400;
}

.card .contenu{
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.card .contenu p, .card .contenu .contact a{
    color: var(--Blanc, #FFF);
    font-size: 20px;
    font-weight: 400;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;
}

.card .contenu p{
    margin: 0;
}

.card .ecole{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    align-self: stretch;
}
.card .contenu h4{
    color: var(--Blanc, #FFF);
    font-size: 16px;
    font-weight: 700;
    line-height: 130.333%; /* 20.853px */
    letter-spacing: 0.16px;
    margin: 0;
}

.card .contenu .contact, .en_avant_line{
    display: flex;
    padding-left: 14px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0px;
    align-self: stretch;
    border-left: 1px solid rgba(255, 255, 255, 0.60);
}

.en_avant_line{
    display: block;
}

.card video{
    background-color: #0c6ca0;
    margin-left: -40px;
    object-fit: cover;
    object-position: center;
    width: 30vw;
    height: 35vw;
}

.le_saoe.fin img{
    aspect-ratio: 14/7;
    width: 48%;
    margin-left: 58px;
}

.historique{
    display: flex;
    align-items: center
}

.historique img{
    aspect-ratio: 12/14;
    width: 48%;
    margin-right: 58px;
}

.historique .chronologie{
    flex: 1 1 0;
}

.historique h3, .page_article>article>div>.contenu .colone_1 .details_article h2{
    color: var(--Noir, #000E1C);
    font-size: 20px;
    font-weight: 600;
    line-height: 128%; /* 25.6px */
    margin: auto 0;
}

.page_article>article>div>.contenu .colone_1 .details_article h2{
    color: var(--Blanc);
}

.historique .chronologie details, .details_article{
    border-top: solid #ccc 1px;
    padding: 19px 0;
}

.historique .chronologie details:last-child, .details_article:last-child{
    border-bottom: solid #ccc 1px;
}

.historique summary, .details_article summary{
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    /*padding: 19px 0;*/
}

.historique details .contenu, .details_article .contenu{
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease, padding-bottom 0.1s ease-out;
}

.historique details[open] .contenu, .details_article[open] .contenu{
    max-height: fit-content; /* ou une valeur suffisante selon le contenu */
}

.historique details .contenu p, .details_article .contenu p {
    margin: 8px 0 6px;
    width: calc(100% - 60px);
}

.page_article>article>div>.contenu .colone_1 .details_article .contenu p {
    margin: 0 0 26px;
    font-size: 16px;
}

summary::marker{
    display: none;
}

/* Enlève la flèche par défaut du <summary> */
summary::-webkit-details-marker {
    display: none;
}

/* Pour Firefox */
summary {
    list-style: none;
}

.historique details .tourne_fleche svg, .details_article .tourne_fleche svg{
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.historique .fleche, .page_article .fleche {
    background-color: var(--Bleu-SAOE);
    height: 42px;
    width: 42px;
    min-width: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 auto 20px;
}

.historique .fleche svg, .page_article .fleche{
    transition: transform 0.3s ease;
}

.details_article h3{
    margin: 0;
}

.historique details > div, .details_article>div {
    display: none;
}

.historique details.open > div{
    display: block;
}

.details_article.open>div {
    padding-bottom: 30px;
}

.liens img{
    aspect-ratio: 28/21;
}

.liens h3{
    margin: 22px 0 14px;
}

.liens a, .lien_unique{
    display: flex;
    align-items: baseline;
    margin: 6px 0;
    color: var(--Bleu-SAOE, #1492CF);

    /* Paragraphe */
    font-size: 20px;
    font-weight: 400;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;
}

.liens a>div, .lien_unique>div{
    display: flex;
    background-color: var(--Bleu-SAOE);
    min-height: 20px;
    min-width: 20px;
    height: 20px;
    width: 20px;
    margin-right: 12px;
}

.liens a>span,  .lien_unique>span{
    word-break: break-word;
    overflow-wrap: break-word;
}

.liens a>div>svg, .lien_unique>div>svg{
    margin: 6px 6px auto auto;
}

.lien_unique>.svg_telechargement>svg{
    margin: auto auto auto auto;
}

.liens a:hover>div>svg, .lien_unique:hover>div>svg{
    transform: translate(2px, -2px);
    margin: 6px 6px auto auto;
}

.lien_unique:hover>.svg_telechargement>svg{
    margin: auto auto auto auto;
}




/* page contact */

.haut_page_contact{
    padding: var(--ltspace) var(--side-base) 0 var(--side-base);

}

.haut_page_contact h1{
    background-color: var(--Noir);
    color: var(--Blanc);
    margin-bottom: -47px;
    font-size: 56px;
    line-height: 93%; /* 55.8px */
    letter-spacing: -1.965px;
}

.haut_page_contact>div>div{
    display: flex;
    margin-left: 60px;
    flex-wrap: wrap;
}

.haut_page_contact ul{
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 74px 40px 36px;
    width: auto;
}

.haut_page_contact ul .section{
    color: var(--Blanc, #FFF);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 128%; /* 23.04px */
    letter-spacing: 0.3px;
    opacity: 0.6;
}

.haut_page_contact ul .interlocuteur{
    color: var(--Blanc, #FFF);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 128%; /* 23.04px */
    letter-spacing: 0.3px;
}

.haut_page_contact ul .tel, .haut_page_contact ul .email{
    display: block;
    color: var(--Blanc, #FFF);
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 128%; /* 23.04px */
    letter-spacing: 0.3px;
}

.haut_page_inscription p{
    background-color: var(--Bleu-SAOE);
    padding: 66px 40px 36px;
    margin: 0 20% 0 60px;
    color: var(--Blanc, #FFF);
    font-size: 30px;
    line-height: 112.667%; /* 40.56px */
    letter-spacing: 0.168px;
    width: fit-content;
}

.formulaire {
    padding-left: calc(var(--side-base) + 14%);
    padding-right: calc(var(--side-base) + 14%);
}

.form_inscription{
    padding-top: var(--ltspace);
}

.formulaire h2{
    font-size: 44px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%; /* 48.4px */
    letter-spacing: -0.792px;

    margin: 0 0 39px 0;
}

.formulaire form{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 30px;
}

.page_article .formulaire{
    padding: 0;
}

.formulaire form .all_large, .mail_et_telephone, .nom_prenom, .form-group.adresse, .separateur, .formulaire .zone_de_texte {
    grid-area: 1 span /2 span;
}

.formulaire .grid-50{
    grid-gap: 30px;
}

.formulaire .liste_deroulante {
    display: flex;
    flex-direction: column;
}

.formulaire .liste_deroulante .contain-select{
    margin: auto 0 0 0;
}

.formulaire form p, .formulaire form label, .formulaire form span, .formulaire form input, .formulaire form textarea, .formulaire form select{
    width: 100%;
}

.formulaire form input, .formulaire form select{
    height: 60px;
}

.formulaire form select:focus-visible{
    border: 0;
}

.formulaire form p{
    margin: 0;

    font-size: 20px;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;
}

.formulaire form input, .formulaire form textarea, .formulaire form select {
    background: var(--Gris-tres-Clair, #E3E8ED);
    color: var(--Noir);
    font-size: 20px;
    font-weight: 600;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;
    padding: 17px 30px;
}

.formulaire form select{
    margin-top: 10px;
    border: 0;
    padding: 17px 60px 17px 30px;
}

.formulaire form .submit-wrapper{
    width: fit-content;
    margin: auto 0 0 auto;
}

.formulaire form .submit-wrapper p, .formulaire .btn_base{
    background-color: var(--Bleu-SAOE);
    width: fit-content;
    display: flex;
    padding: 8px 20px;
    align-items: center;
}

.formulaire form .submit-wrapper span{
    display: none;
}

.formulaire form .submit-wrapper input, .formulaire .btn_base{
    width: fit-content;
    height: fit-content;
    background-color: rgba(0, 0, 0, 0);
    margin: 0 20px 0 0;
    padding: 0;
    color: var(--Blanc, #FFF);
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 128%; /* 25.6px */
    letter-spacing: 0.3px;
}

.formulaire .btn_base {
    background-color: var(--Bleu-SAOE);
    padding: 8px 20px;
}

.formulaire .cases_a_cocher{
    grid-area: 2 span / 1 span;
}

.formulaire .cases_a_cocher>label{
    margin-bottom: 10px;
}

.formulaire .cases_a_cocher>.vraix__faux{
    margin: 8px 0;
}


/* fleche formulaire personnaliser */

.contain-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("../icons/fleche_select.svg") !important; /* ou PNG */
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 24px !important;

    padding-right: 40px; /* pour ne pas que le texte chevauche l’icône */
}

.contain-select select::-ms-expand {
    display: none;
}

/* place holder cacher */

.pomform input::placeholder,
.pomform textarea::placeholder {
    opacity: 0; /* cache */
}

/* label */

.pomform label{
    font-size: 20px;
}

    /**********************/

.fleche_select p{
    position: relative;
}

.fleche_select select{
    appearance: none;      /* supprime la flèche native */
    -webkit-appearance: none;
    -moz-appearance: none;
}

.fleche_select svg{
    position: absolute;
    inset: 57px 30px auto auto;
}

.fleche_select.open svg{
    transform: rotate(180deg);
}

.vraix__faux{
    align-items: center;
}

.vraix__faux input{
    height: 20px !important;
    width: 20px !important;
}

.formulaire .fichier input{
    background-color: rgba(0, 0, 0, 0);
    padding: 0;
    margin:0;
}

.formulaire .fichier{
    min-width: 0;
    grid-area: 1 span / 2 span;
}

.formulaire .separateur{
    height: 1px;
    background-color: var(--Gris-tres-Clair);
    min-width: 0;
}

.grecaptcha-badge{
    display: none !important;
}

.form-message{
    position: fixed;
    inset: 0;
    height: fit-content;
    width: fit-content;
    margin: auto;
    background: var(--Bleu-SAOE);
    color: var(--Blanc);
    padding: 10px 20px;
    pointer-events: none;
    opacity: 0; /* invisible au départ */
    transform: translateY(-100%); /* un petit effet zoom */
    animation: messageAnim 4s forwards; /* durée totale 3s */
}
/* Animation en 3 étapes */
@keyframes messageAnim {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    20% {
        opacity: 1;
        transform: translateY(0%);
    }
    80% {
        opacity: 1;
        transform: translateY(0%);
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}





/* hover */

.partage a:hover{
    background-color: #14aafa;

}


/* Cookie */

.cookie-popup {
    position: fixed;
    inset: auto auto 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
backdrop-filter: blur(5px);
}
.cookie-popup.show {
    visibility: visible;
    opacity: 1;
}
.cookie-popup-content {
    background: rgba(0, 14, 28, 0.95);
    padding: 2rem;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.cookie-popup-content>div{
    display: flex;
    align-items: center
}
.cookie-popup-content h3 {
    margin-top: 0;
    color: var(--Blanc);
    font-weight: 700;
    margin-bottom: 10px;
}
.cookie-popup-content p {
    color: var(--Blanc);
    margin: 1rem 0;
    font-size: 0.95rem;
}
.cookie-popup-content a {
    color: var(--Blanc);
    text-decoration: underline;
}
.cookie-popup-content button {
    background: var(--Blanc);
    color: var(--Noir);
    border: none;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    padding: 0.7rem 1.5rem;
    cursor: pointer;
    font-size: 1rem;
    height: fit-content;
    width: fit-content;
    transition: 0.2s;
    margin-left: 20px;
}
.cookie-popup-content button:hover {
    background-color: var(--Bleu-SAOE);
    color: var(--Blanc);
}


    /* footer */

#footer{
    padding: 0;
    margin-top: 200px;
}

.parallax-container {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    height: 30vw;
    max-height: 500px;
    object-fit: cover;
    object-position: center;
}

.img_footer {
    width: 100%;
    object-fit: cover;
    transform: translateY(0);
    transition: transform 0s linear;
    will-change: transform;
}

#footer.foot_img{
    margin-top: 100px;
}

#footer .block_footer{
    background-color: var(--Noir);
    color: var(--Blanc);
    padding: var(--medium-margin) var(--side-base);
}

#footer .haut_footer{
    display: grid;
    grid-template-columns: 1fr 2fr;
    justify-content: space-between;
    margin-bottom: 109px;
}

#footer .infos_contact{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 1130px;
    margin: 0 0 0 auto;
}

#footer .sabonner{
    background-color: var(--Bleu-SAOE);
    padding: 34px 40px 50px;
    width: 370px;
    margin: -130px 30px 0 0;
    z-index: 10;
}

#footer .sabonner>a{
    display: block;
    margin-bottom: 13px;
}

#footer .sabonner>a #logo{
    width: 149px;
}

#footer .sabonner>form>label{
    margin-bottom: 29px;
    display: block;
    color: var(--Blanc, #FFF);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 26px */
}

#footer .sabonner>form>div{
    display: grid;
    gap: 2px;
    grid-template-columns: 1fr auto;
}

#footer .sabonner input, #footer .sabonner button, #footer .sabonner input:autofill {
    background: #43A8D9;
}

#footer .sabonner input{
    color: var(--Blanc, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
    margin: 0px;
    padding: 10px 15px;
    height: fit-content;
    width: auto;
    box-sizing: border-box;
}

#footer .sabonner input::placeholder {
    color: #D9EDF7;
}

#footer .sabonner button{
    padding: 0;
    width: 41.8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#footer .infos_contact .section{
    color: var(--Blanc, #FFF);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 128%; /* 23.04px */
    letter-spacing: 0.3px;
    opacity: 0.6;
}

#footer .infos_contact .interlocuteur{
    color: var(--Blanc, #FFF);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 128%; /* 23.04px */
    letter-spacing: 0.3px;
}

#footer .infos_contact .adresse, #footer .infos_contact .tel, #footer .infos_contact .email{
    display: block;
    color: var(--Blanc, #FFF);
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 128%; /* 23.04px */
    letter-spacing: 0.3px;
}

#footer .infos_contact .adresse p{
    margin: 0;
    color: var(--Blanc, #FFF);
}

#footer .bas_footer{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#copyright{
    color: #FFF;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px; /* 192.857% */
    letter-spacing: 0.07px;
    opacity: 0.5;
    display: flex;
}

#copyright a{
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--Blanc);
}


#copyright .realisation-break a{
    margin-left: 4px;
}

#copyright .lien_footer{
    display: flex;
}

#footer .bas_footer .reseaux_sociaux{
    display: flex;
    gap: 6px;
}

#footer .bas_footer .reseaux_sociaux a{
    background-color: #333E49;
    height: 38px;
    width: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#footer .bas_footer .reseaux_sociaux a img{
    max-height: 19px;
    max-width: 20px;
}

#copyright .realisation-break, #copyright>span{
    display: flex;
}


#newsletter-form{
    transition: 0s;
}

.pop_it{
    position: fixed;
    inset: 0 0 0 0;
    margin: auto;
    height: fit-content;
    width: fit-content;
    padding: 30px 50px 60px;
    background-color: var(--Bleu-SAOE);
    z-index:9999;
    box-shadow: #15161638 0px 0px 20px;
}

.pop_it:before{
    content: "";
    display: block;
    position:fixed;
    inset: 0 0 0 0;
    height: 100%;
    width: 100%;
    background: radial-gradient(rgba(8, 56, 81, 0), rgba(3, 23, 34, 0.99)) ;
    z-index: -1;
}

.pop_close{
    display: none;
    text-align: right;
    margin: 0 0 20px 0;
    color: var(--Blanc);
    cursor: pointer;
}

#footer .sabonner .hide_input{
    display: none;
    width: 100%;
    margin-bottom: 10px;
}

.pop_it .pop_close, #footer .sabonner .pop_it .hide_input {
    display: block;
}

#footer .sabonner>form.pop_it>div {
    gap:8px;
}



/*******************************/

/* Responsive */


@media (max-width: 1530px) {


    .cards .card:nth-child(odd) {
        margin-right: 10%;
    }

    .cards .card:nth-child(even) {
        margin-left: 10%;
    }
}


@media (max-width: 1410px) {
    #menu .menu>li>a {
        font-size: 18px;
    }

    .landing {
        height: calc(100svh - 94px);
    }

    #footer .infos_contact {
        grid-template-columns: repeat(2, 1fr);
        min-width: 70%;
        width: auto;
        row-gap: 50px;
    }

    .cards .card:nth-child(odd) {
        margin-right: 8%;
    }

    .cards .card:nth-child(even) {
        margin-left: 8%;
    }

    .presence img {
        display: none;
    }

    .card.presence .contenu {
        padding: 0;
    }
}




@media (max-width: 1250px) {

    #menu .menu>li>a {
    font-size: 16px;
    }

    .cards .card:nth-child(odd), .cards .card:nth-child(even) {
        margin: 0;
    }

    .page_article>article>.block_contenu {
        margin-left: var(--side-base);
    }
}



@media (max-width: 980px) {

    #menu {
        margin: auto var(--side-base) auto auto;
        padding-left: var(--side-base);
    }

    #menu #main-menu-underline {
        display: none;
    }

    #menu>#main-menu-container {
        background-color: var(--Bleu-SAOE);
        color: var(--Blanc);
    }

    #menu .menu{
        width: 100%;
        align-items: flex-start;
        justify-content: flex-start;
        height: 100%;
    }

    .menu-main-menu-container{
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 100px 34px 0 34px;
    }

    #menu .menu>li>a, #main-menu-container .menu>li:last-of-type>a {
        color: var(--Blanc);
        padding: 10px 16px;
        font-size: 20px;
    }

    #menu .menu>.current_page_item>a {
        color: var(--Gris-tres-Clair);
    }

    .landing {
        height: calc(100svh - 86px);
    }

    .landing>div:first-child {
        width: 80%;
        left: 50px;
    }

    .landing.bandeau>div:first-child {
        left: var(--side-base);
    }

    .h1_accueil, h1, .haut_page_contact h1 {
        font-size: 50px;
    }

    .page_article>article>div>.contenu h1, .page_souvenir>article>.colone_souvenir h1{
        font-size: 35px;
    }

    h2, .page_article>article>div>.contenu .colone_1 h2, .l_equipe h2, .le_saoe h2, .historique .chronologie h2, .presence .contenu>div h2, .formulaire h2{
        font-size: 40px;
    }

    .c_quoi>div>h2, .apercu_reseaux h2{
        margin-top: 0;
    }

    .activites .swiper {
        padding-bottom: 100px;
    }

    .card .individu h3, .activites .activite h3, .page_article>article>div>.contenu .colone_1 p.chapeau, .liens h3  {
        font-size: 22px;
    }

    .page_article>article>div>.contenu .colone_1 h2{
        padding: 0;
        font-size: 30px;
    }

    .landing p, .haut_page_inscription p, .page_article>article>div>.contenu .colone_1 p{
        font-size: 30px;
    }

    .bandeau h1{
        font-size: 40px;
    }

    .bandeau p{
        font-size: 25px;
    }

    .prochainement li {
        max-width: 100%;
    }

    .prochainement li a {
        display: none;
    }

    .prochainement li>div>p, .activites .activite .info_article>.titre_act p, .formulaire form p, .formulaire form input, .formulaire form select, .page_souvenir>article>.colone_souvenir>div:first-child p, .le_saoe li, .le_saoe p, .l_equipe .intro p, .liens a, .card .contenu p, .card .contenu .contact a, .presence ul.jours_present li, .page_article>article>div>.contenu .colone_1 p, .page_article>article>div>.contenu .colone_1 ul, .page_article>article>div>.contenu .colone_1 .horaires li, .page_article>article>div>.contenu .colone_2 p, .page_article>article>div>.contenu .colone_1 .acf_table th, .page_article>article>div>.contenu .colone_1 .acf_table td, .lien_unique, .btn_unique {
        font-size: 18px;
    }

    .c_quoi{
        flex-direction: column;
    }

    .c_quoi>div:first-child {
        width: 100%;
        margin-bottom: 40px;
    }

    .c_quoi>.legende {
        width: 100%;
        max-width: 600px;
    }

    .perso_ecoute>ul>li, .perso_ecoute>ul>li>span {
        font-size: 35px;
    }

    .perso_ecoute>ul>li:first-child{
        padding: 60px 0 24px 8%;

    }

    .perso_ecoute>ul>li:nth-child(2){
        padding: 24px 0;
    }

    .perso_ecoute>ul>li:nth-child(3){
        padding: 24px 0 24px 14%;
    }

    .activites .slider{
    position: relative;
    }

    .activites .activite .info_article>p {
        max-width: 90%;
        font-size: 18px;
    }

    .activites .slider .fleches {
        position: absolute;
        inset: -90px var(--side-base) auto auto;
    }

    .activites .slider .fleches>div{
        height: 45px;
        width: 45px;
    }

    .liste_activites>.activite .info_article{
       max-width: calc(100% - 60px);
    }


    .insta_tok>.insta_video .Grid__GridContainer-sc-1agzqrd-0{
        width: calc((100vw - (2 * var(--side-base)) - 20px) / 3);
    }

    .insta_tok>.insta_video .eapps-instagram-feed-posts-item-image, .insta_tok>.insta_video .eapps-instagram-feed-posts-item-image-wrapper{
        width: 100% !important;
        height: 60vw !important;
    }

    .insta_tok>.insta_video, .insta_tok>.insta_video .eapps-instagram-feed-content, .insta_video .eapps-instagram-feed-container{
        width: 100% !important;
    }


    .insta_tok>.tiktok_video .Grid__GridContainer-sc-1agzqrd-0>div{
        width: calc((100vw - (2 * var(--side-base)) - 20px) / 3);
        margin: 0 0 0 10px;
    }

    .eapps-widget-toolbar{
        display: none !important;
    }

        /* page presence */

    .le_saoe {
        flex-direction: column;
    }

    .le_saoe img {
        width: 100%;
        margin: 40px auto 0;
    }

    .menu_presence {
        display: none;
    }

    .presence.card{
        display: block;
    }

    .presence .contenu>div.contenus_presence{
        width: 100%;
    }

    .contenus_presence .bloc_contenu {
        display: block;
    }

    .bloc_contenu>div {
        overflow: hidden;
        max-height: 2000px;
        opacity: 1;
        transition: max-height 0.3s ease, opacity 0.3s ease;
    }

    .bloc_contenu.collapsed>div{
        max-height: 0;
        opacity: 0;
        pointer-events: none;
    }



    .presence .contenu>div h2 {
        padding: 20px 0 0px;
        margin: 20px 0 0;
        border-top: solid 1px var(--Gris-tres-Clair);
    }

    .presence .contenu>div>div:first-child h2 {
        border-top: 0px;
        margin-top: 4px;
    }





    /* Formulaire inscription */

    .formulaire {
        padding-left: calc(var(--side-base) + 0%);
        padding-right: calc(var(--side-base) + 0%);
    }

    /* Activites */

    .affichage_activite .action_filtre{
        flex-direction: column-reverse;
    }

    .affichage_activite .action_filtre>a{
        width: fit-content;
        margin: 0 0 20px auto;
    }

    .affichage_activite .action_filtre a {
        padding: 10px 30px;
        justify-content: center;
        text-align: left;
    }

    .affichage_activite .action_filtre .filtres-activites li{
        flex: 1;
        width: 100%;
    }

    .prochaines_act .btn_act_mobile{
        display: flex;
    }

    .prochaines_act>div:first-child a.btn_act_pc{
        display: none;
    }

    /* a propos */

    .l_equipe>.intro{
        min-width: 0px;
        width: 100%;
    }

    .le_saoe.fin img {
        width: 100%;
        margin-left: 0px;
    }

    .historique{
        flex-direction: column-reverse;
    }

    .historique .chronologie {
        width: 100%;
        margin-bottom: 40px;
    }

    .cards .card {
        flex-direction: column-reverse;
    }

    .card .contenu {
        margin-top: 0;
        padding: 60px 30px 50px 30px;
    }

    .card video {
        margin: 0;
        width: 100%;
    }

    .card .individu{
        top: 30vw;
        left: 0;
        right: 0;
        margin: 0 auto 0 30px;
    }



    /* Souvenir */

    .page_article>article>div>.bouton_retour, .page_souvenir .bouton_retour {
        height: var(--side-base);
        width: var(--side-base);
    }

    .page_souvenir{
        padding: 0;
    }

    .haut_souvenir img, .haut_souvenir .no_img {
        width: 100%;
        aspect-ratio: 7 / 4;
    }

    .souvenirs{
        flex-direction: column;
    }

    .page_souvenir>article {
        flex-direction: column;
    }

    .date_img{
        position: relative;
    }

    .date_img .date_souvenir{
        display: none;
    }

    .haut_souvenir>div:first-child .date_souvenir{
        display: block;
        opacity: 0.6;
    }

    .page_souvenir>article>.colone_souvenir>div:first-child>div:first-child{
        margin: -140px var(--side-base) 0 0;
    }

    .page_souvenir>article>.colone_souvenir>div:first-child>div:first-child>div{
        padding: 30px 30px;
        margin: 0;
        width: 100%;
    }

    .page_souvenir .bouton_retour{
        z-index: 3;
    }

    .page_souvenir h2{
        font-size: 22px;
        margin: 45px 0 22px 0;
    }

    .page_souvenir p, .page_souvenir ul{
        font-size: 18px;
        margin: 22px 0 20px 0;
    }

    .haut_souvenir{
        display: flex;
        flex-direction: column-reverse;
    }

    .souvenirs_contenu{
        margin-left: calc(var(--side-base) + 10px);
        margin-right: var(--side-base);
    }

    .date_img{
        display: flex;
    }



.souvenirs>div:last-child>img{
    margin-left: 20px;
    width: calc(100% - 20px);
}

.page_article>article>.block_contenu {
    flex-direction: column;
}

.page_article>article>.block_contenu .contenu{
    margin-left: 0;
    grid-template-columns: 1fr;
}

.page_article>article>div>.contenu .colone_1 {
    width: 100%;
}

.page_article>article>div>.contenu .contenu_act{
    grid-area: 3 / 1 / 3 / 1;
}

.page_article>article>div>.contenu .colone_2 {
    margin: 30px 0 0 0;
    display: grid;
    grid-area: 2 / 1 / 2 / 1;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    border-top: solid 1px var(--Gris-tres-Clair);
    border-bottom: solid 1px var(--Gris-tres-Clair);
    padding: 20px 0;
}

.page_article .boutons_art{
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-end;
}

    .page_article h2{
        display: flex;
        justify-content: space-between;
    }


    .page_article h2 .fleche{
        display: flex;
        background-color: var(--Noir);
        margin-left: 0;
        height: auto;
    }


.prochaines_act>div:first-child{
    flex-direction: column-reverse;
    align-items: flex-start
}

.prochaines_act>div:first-child a{
    margin: auto 0 auto auto;
}

.apercu_reseaux .MediaContainer__Container-sc-1rcutn9-0 {
    height: 50vw !important;
}


.presence .contenu>div.contenus_presence{
    padding: 0 0px 20px;
}

.contenus_presence .bloc_contenu div {
    padding: 0 30px 0 !important;
}

.contenus_presence .bloc_contenu h2 {
    padding: 20px 30px 0 !important;
}

.contenus_presence .bloc_contenu .contre_h2 h2 {
    border-top: 0px;
    padding: 0 !important;
    margin: auto auto auto 0;
    display:block;
}

.contenus_presence h2{
    display: flex;
    align-items: center;
    justify-content: center;
}

.contenus_presence .fleche{
    display: flex;
    vertical-align: middle;
    margin: 0 0 0 auto;
    height: 100%;
    padding-left: 10px;
}

.bloc_contenu:not(.collapsed) h2 .fleche svg {
    transform: rotate(180deg);
}

.affichage_activite .action_filtre .filtres-activites{
    display: none;
}

.affichage_activite .action_filtre .custom-select-wrapper{
    display: block;
}

.liste_activites>.activite .info_article>div>p {
    font-size: 14px ;
}

.l_equipe h2, .le_saoe h2, .historique .chronologie h2{
    margin-top: 0;
}

.historique img {
    margin: 0;
    aspect-ratio: 1/1;
    width: 100%;
    max-height: 550px;
}

.grid-50{
    grid-template-columns: 1fr;
    margin-bottom: 20px;
}

.vraix__faux{
    margin: 15px 0;
}


.parallax-container {
    min-height: 260px;
    height: 30vw;
    max-height: 500px;
    object-fit: cover;
    object-position: center;
    width: 100%;
    aspect-ratio: 5 / 4;
}

    .img_footer {
        width: 100%;
        aspect-ratio: 5 / 4;
        object-fit: cover;
        object-position: top;
    }

#footer .haut_footer {
    grid-template-columns: 1fr;
}

#footer .infos_contact {
    margin: 50px auto 0 0px;
}

#footer .bas_footer {
    flex-direction: column-reverse;
}

#footer .bas_footer .reseaux_sociaux {
    margin: 0 auto 40px 0;
}

#footer .bas_footer #copyright {
    margin: 0 auto 0 0 ;
    flex-direction: column;
}

#copyright>span{
    flex-direction: column;
}

    #copyright .trait_vertical{
        display: none;
    }

}


@media (max-width: 500px) {

    .contenu_saoe, .affichage_activite, .formulaire, .l_equipe{
        margin-top: 20px;
    }

.prochainement, .c_quoi, .perso_ecoute, .activites, .apercu_reseaux, .affichage_activite, .le_saoe, .l_equipe, .prochaines_act, .historique, .liens, .page_souvenir, .formulaire, .presence, .content-page {
    padding: 20px var(--side-base) 0 var(--side-base);
}

.landing>div:first-child {
    bottom: 30px;
}

#site-title>a {
    padding: 13px 30px;
}

.landing.bandeau{
    width: 100%;
    min-height: 0;
    height: fit-content;
    display: flex;
    flex-direction: column-reverse;
    background-color: var(--Blanc);
}

.landing.bandeau video{
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 7/5;
}

.landing.bandeau>div:first-child h1 {
    /*position: absolute;*/
    bottom: 100%;
    margin-right: 10px;
}

.landing>div:first-child {
    left: 30px;
}

.landing.bandeau>div:first-child {
    position: static !important;
    box-sizing: border-box;
    margin: -70px 0 0 var(--side-base) ;
    width: calc(100% - var(--side-base));
    left: 0;
}

.h1_accueil, h1, .haut_page_contact h1, .bandeau h1{
    font-size: 30px;
    padding: 20px 27px;
}

.haut_page_contact h1{
    margin-bottom: -35px;
}

.prochainement li>img{
    display: none;
}

.prochainement ul {
    margin: 20px 0 30px;
}

.c_quoi>div:first-child {
    margin-bottom: 16px;
}

.c_quoi>.legende{
    background-color: var(--Bleu-SAOE);
}

.c_quoi>.legende>span {
    position: static;
    display: block;
    padding: 8px 18px;
    width: 100%;
    inset: unset;
}

.perso_ecoute>ul li {
    display: none;
}

.activites .swiper {
    padding-bottom: 80px;
}

    .perso_ecoute{
        padding: 50px 0 0 0;
    }

    .perso_ecoute h2{
        padding: 0 var(--side-base) 0 var(--side-base);
    }

    .video_move{
        position: static;
        transform: scale(1) !important;
        width: 100%;
        height: 100%;
        overflow-x: auto;
        pointer-events: auto;
        /*padding: 0 var(--side-base);*/
        /*scroll-snap-type: x mandatory;*/
        /*scroll-padding: 16px;*/

        display: flex; /* ← nécessaire pour scroll horizontal en flexbox */
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--side-base);
        padding: 0 var(--side-base);
        gap: 16px; /* espace entre les cartes */
    }


    /* --- WebKit (Chrome, Edge, Safari) --- */

    /* Piste de la scrollbar */
    .video_move::-webkit-scrollbar {
        width: 8px; /* largeur totale de la scrollbar */
    }

    /* Ligne grise de 2px centrée */
    .video_move::-webkit-scrollbar-track {
        background: var(--Gris-tres-Clair); /* couleur de la ligne */
        border: solid 7px var(--Blanc);
        border-radius: 10px;
    }

    /* Scrolleur */
    .video_move::-webkit-scrollbar-thumb {
        border: solid 5px var(--Blanc);
        border-radius: 10px;
    }

    /* Hover pour le thumb */
    .video_move::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    /* --- Firefox --- */
    /*.video_move {*/
    /*    scrollbar-width: thin;          !* "thin" pour scroller fin *!*/
    /*    scrollbar-color: #888 #ccc;     !* thumb | track *!*/
    /*}*/

    /**********/

    .video_move>div{
        flex-direction: row;
        gap: var(--side-base);
    }

    .card_ecoute{
        display: block;
        min-width: 70vw;
        height: auto;

        flex: 0 0 auto;
        width: 70vw;
        scroll-snap-align: start;
    }

    .video_move>div>.card_ecoute video{
        width: 100%;
        height: auto;
        object-fit: cover;
        aspect-ratio: 1 / 1;
    }

    .card_ecoute>p{
        display: block;
        padding: 20px;
        color: var(--Blanc);
    }


    .activites .slider .fleches {
        inset: -75px var(--side-base) auto auto;
    }


    #pagination-ajax, #souvenir-pagination {
        margin: 24px auto auto;
    }



    .page_souvenir>article>.colone_souvenir h1, .page_article>article>div>.contenu h1 {
        font-size: 30px;
    }

    h2, .l_equipe h2, .le_saoe h2, .historique .chronologie h2, .presence .contenu>div , .formulaire h2{
        font-size: 27px;
    }

    .presence .contenu>div h2 {
        font-size: 22px;
    }

    .presence .contenu>div h3, .info_souvenir h2 {
        font-size: 16px;
    }

    .page_article>article>div>.contenu .colone_1 h2{
        font-size: 20px;
        letter-spacing: 0;
        margin: 20px 0 20px;
    }

    .page_article>article>.block_contenu .contenu>.colone_1 .en_avant_fond {
        background-color: var(--Noir);
        padding: 0;
    }

    .l_equipe .cards{
        margin-top: 40px;
    }

    .le_saoe img {
        margin-top: 10px;
    }

    .landing p, .haut_page_inscription p{
        font-size: 20px;
        padding: 50px 20px 18px;
        margin: 0 0 0 26px;
        width: calc(100% - 26px );
    }

    .page_article>article>div>.contenu .colone_1 p.chapeau{
        font-size: 16px;
        font-weight: 600;
    }

    p, .prochainement li>div>p, .c_quoi>.legende>span, .formulaire form p, .formulaire form input, .formulaire form select, .date_souvenir, .page_article>article>div>.contenu .colone_1 p, article .contenu li, .page_article>article>div>.contenu .colone_1 .horaires li, .page_article>article>div>.contenu .colone_2 p, .le_saoe li, .le_saoe p, .l_equipe .intro p, .liens a, .card .contenu p, .card .contenu .contact a, .presence ul.jours_present li, .page_article>article>div>.contenu .colone_1 p, .page_article>article>div>.contenu .colone_1 ul, .sabonner input {
        font-size: 16px;
        border-radius: 0 !important;
    }

    .page_article>article>div>.contenu .colone_1 .horaires li span{
        margin-right: 20px;
    }

    .prochainement li>div{
        padding: 15px 20px;
    }

    .prochainement li>img {
        height: 100px;
    }

    .perso_ecoute>ul>li, .perso_ecoute>ul>li>span {
        font-size: 20px;
        line-height: 40px;
    }

    .perso_ecoute>ul>li>span{
        padding: 5px 10px;
    }

    .perso_ecoute>ul>li:first-child{
        padding: 40px 0 14px 8%;
    }

    .perso_ecoute>ul>li:nth-child(2){
        padding: 14px 0;
    }

    .perso_ecoute>ul>li:nth-child(3){
        padding: 14px 0 14px 14%;
    }

    .activites {
        padding-right: 0;
    }

    .activites .swiper {
        padding-right: calc(5vw + var(--side-base));
    }

    .activites .activite .info_article>p {
        display: none;
    }

    .activites .activite .info_article>h3 {
        max-width: 90%;
        font-size: 16px;
        padding: 40px 25px 20px;
    }

    .affichage_activite .action_filtre .lien_horaires{
        display: none;
    }

    .affichage_activite>.lien_horaires{
        display: flex;
        padding: 10px 30px;
        margin: 0;
        font-size: 18px;
        height: 45px;
        justify-content: space-evenly;
    }

    .activites .activite .info_article>.titre_act {
        padding: 17px 25px 17px 25px;
        inset: -58px auto auto -30px;
    }

    .activites .activite .info_article>.titre_act p {
        font-size: 14px;
    }

    .insta_tok{
        flex-direction: column;
    }

    .insta_tok>div{
    }

    .insta_tok>.insta_video{
        aspect-ratio: 14/16;
        width: auto;
        height: auto;
        flex: none;
    }

    .insta_tok>.insta_video .Grid__GridContainer-sc-1agzqrd-0{
        aspect-ratio: 1/1;
        width: calc((100vw - (2 * var(--side-base))));
        max-height: 80svh;
    }

    .insta_tok>.tiktok_video{
        flex: 1 1 auto;
        width: auto;
        height: fit-content;
    }

    .insta_tok>.tiktok_video .Grid__GridContainer-sc-1agzqrd-0>div{
        aspect-ratio: 1/1;
        width: calc((100vw - (2 * var(--side-base))));
        margin: 0 0 10px 0;
    }

    .insta_tok>.tiktok_video .Grid__GridContainer-sc-1agzqrd-0>div:nth-child(2){
        display: none;
    }

    .insta_tok>.insta_video{
        margin-bottom: 10px;
    }

    .insta_tok>.insta_video .eapps-instagram-feed-posts-item-image, .insta_tok>.insta_video .eapps-instagram-feed-posts-item-image-wrapper{
        height: auto !important;
        padding: 0px;
    }


    /* inscription */

    .formulaire form {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px 30px;
    }

    .contenu_act .formulaire form {
        gap: 0;
    }

    .page_article>article>div>.contenu .colone_1.contenu_act .formulaire form p{
        margin: 7px 0 13px;
    }

    .formulaire form .all_large , .mail_et_telephone, .nom_prenom, .form-group.adresse, .separateur, .formulaire .zone_de_texte, .formulaire .fichier {
        grid-area: 1 span / 1 span;
    }

    formulaire form input, .formulaire form textarea{
        padding: 10px 15px;
    }

    .formulaire form select{
        padding: 10px 50px 10px 15px;
    }

    .fleche_select svg {
        inset: 43px 18px auto auto;
    }

    .haut_page_contact>div>div{
        margin-left: 30px;
    }

    .haut_page_contact>div>div>ul{
        max-width: 100%;
        padding: 20px 34px ;
        font-size: 16px;
    }

    .haut_page_contact>div>div>li, .haut_page_contact ul .section, .haut_page_contact ul .interlocuteur, .haut_page_contact ul .tel, .haut_page_contact ul .email{
        font-size: 16px;
    }

    .haut_page_contact>div>div>ul:first-child{
        padding: 60px 34px 34px;
    }

    .pomform textarea{
        height: 120px;
    }

    .contain-select select {

        background-size: 18px !important;
    }

    /* activites */

    .liste_activites {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .affichage_activite .action_filtre .filtres-activites{
        flex-wrap: wrap;
    }

    .page_souvenir>article {
        flex-direction: column;
    }

    .page_souvenir>article>.colone_souvenir {
        margin-left: 0px;
    }

    .souvenirs h2, .card .individu p{
        font-size: 20px;
    }

    .souvenirs p, .souvenirs ul, .page_article>article>div>.contenu .colone_1 .acf_table th, .page_article>article>div>.contenu .colone_1 .acf_table td, .lien_unique, .btn_unique {
        font-size: 16px;
    }

    .contenu_act h4{
        font-size: 18px;
    }

    .page_article>article>div>.contenu .colone_1 .acf_table th, .page_article>article>div>.contenu .colone_1 .acf_table td{
        padding: 12px 12px 12px 0;
    }

    .page_article>article>.block_contenu .contenu{
        padding: 40px 30px;
    }

    .page_article>article>.block_contenu .details_article .contenu{
        padding: 0;
    }

    .liste_horaires th {
        padding: 12px 10px 8px 0;
    }

    .liste_horaires tr {
        display: flex;
        flex-direction: column;
    }


    .tiret_sep {
        margin: 0 10px;
    }

    /* a propos */

    .card video {
        height: 50vw;
    }

    .card .individu h3, .activites .activite h3, .liens h3, .details_article h3  {
        font-size: 20px;
    }

    .activites .activite h3, .liste_activites>.activite .info_article h2  {
        max-width: 55vw;

        font-size: 16px;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        overflow: hidden;
        text-overflow: ellipsis;
    }

    .activites .activite .info_article {
        position: relative;
        margin: 0 auto auto 30px;
    }

    .activites .activite img, .activites .activite video {
        width: calc(100% - 30px);
        height: 100%;
        margin-left: 0px;
        margin-right: 30px;
        object-fit: cover;
        object-position: center;
    }

    .card .individu{
        top: 45vw;
        padding: 12px 17px;
    }

    .card .contenu {
        padding: 48px 30px 40px 30px;
        margin: 0;
    }

    .galerie{
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
    }

    .formulaire form input, .formulaire form select{
        padding: 0px 20px;
        height: 40px;
    }

    #filtre-annee, #filtre-categorie {
        box-sizing: border-box;
        padding: 7px 58px 7px 25px;
        height: 40px;
    }

    .card .contenu .contact{
        gap: 2px;
    }

    .apercu_reseaux .MediaContainer__Container-sc-1rcutn9-0 {
        height: 70vh !important;
    }

    .info_souvenir p{
        font-size: 16px;
    }

    .liste_activites {
       gap: 24px;
    }

    .page_article{
        padding: 0;
    }

    .page_article>article>img, .page_article>article>video, .page_article>article>.no_img{
        width: 100%;
        aspect-ratio: 6/4;
        position: static;
        z-index: 0;
    }

    .page_article>article>.block_contenu{
        position: relative;
        flex-direction: row;
        margin: -33px var(--side-base) 0 0;
        z-index: 3;
    }

    .page_article>article>div>.bouton_retour svg, .page_souvenir .bouton_retour svg{
        height: 20px;
    }

    .page_souvenir>article>.colone_souvenir>div:first-child>div:first-child {
        margin: -33px var(--side-base) 0 0;
        gap: 0;
    }

    .souvenirs_contenu{
        margin: 0 var(--side-base);
    }

    .img_defile img{
        height: 300px;
    }


    .info_souvenir {
        margin: 88px 0 0 25px;
    }

    .affichage_souvenir .souvenir img {
        width: calc(100% - 25px);
    }


    /* Footer */


    #footer {
        margin-top: 140px;
    }

    #footer .sabonner {
        padding: 30px;
        width: 100%;
        max-width: 370px;
        margin: -130px 0 0 0;
    }

    #footer .sabonner>form>label {
        margin-bottom: 15px;
    }

    #footer .infos_contact .section, #footer .infos_contact .interlocuteur, #footer .infos_contact .adresse, #footer .infos_contact .tel, #footer .infos_contact .email{
        font-size: 16px;
    }

    #copyright .realisation-break{
        flex-direction: column;
    }

    #copyright a{
        margin-left: 0;
    }




    .pop_it{
        position: fixed;
        inset: 0 0 0 0;
        margin: auto;
        height: fit-content;
        width:90%;
        padding: 15px 30px 40px;
        background-color: var(--Bleu-SAOE);
    }

    .pop_it:before{
        background: radial-gradient(rgba(8, 56, 81, 0), rgba(3, 23, 34, 0.42)) ;
    }

    .pop_close{
        display: none;
        text-align: right;
        margin: 0 0 20px 0;
        color: var(--Blanc);
        cursor: pointer;
    }


    /* Cookie */
    .cookie-popup-content>div{
        flex-direction: column;
        align-items: flex-start;
    }

    .cookie-popup-content h3{
        font-size: 18px;
    }

    .cookie-popup-content p{
        font-size: 14px;
    }

    .cookie-popup-content button{
        margin: 0;
        padding: 8px 16px;
    }

}



@media (max-width: 430px) {
    #footer .infos_contact {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 30px;
    }

    #footer .infos_contact .section, #footer .infos_contact .interlocuteur, #footer .infos_contact .adresse, #footer .infos_contact .tel, #footer .infos_contact .email {
        font-size: 14px;
    }
}