/** ACCUEIL **/
/**boutons**/

.accueil-style .button {
    position: relative;
    z-index: 1;
    text-decoration: none;
    color: #ffffff;
    padding: 1rem 2rem;
    border-radius: 0.62rem;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-block;
    margin-top: 2.25rem;
    transition: 0.3s 0s linear;
}

.accueil-style .button::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0.62rem;
    background-color: #1D3141;
    transition: .3s;
}

.accueil-style .button:hover::before ,
.accueil-style .button:focus::before {
    opacity: 0;

}

/* .accueil-style .matai-card .button:hover,
.accueil-style .matai-card .button:focus {
    background-color: #87A84C;
    color: #ffffff;
    -webkit-transition: background 0.3s 0s linear;
    -moz-transition: background 0.3s 0s linear;
    -o-transition: background 0.3s 0s linear;
    transition: background 0.3s 0s linear;
} */

.accueil-style .button-flexend,
.accueil-style .button-flexend-2 {
    display: flex;
    justify-content: flex-end;
}

.accueil-style .button-white {
    background-color: #ffffff;
    color: #2C2C2C;
    border-radius: 0.5rem 0rem 0rem 0.5rem;
    font-family: "Josefin sans", sans-serif;
    font-weight: 600;
    padding: 10px 30px;
    display: inline-block;
    margin: 1rem 0rem;
    font-size: 1.25rem;
}

.accueil-style .button-white:hover,
.accueil-style .button-white:focus {
    transform:scale(1.2);
    transition: all 0.4s 0s ease;
}


/** Cultures du monde**/

.accueil-style .titre-mobile {
    display: none;
}

.accueil-style section h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 2.813rem;
    text-transform: uppercase;
    color: #2C2C2C;
    display: flex;
    justify-content: center;
}

.accueil-style .culture-du-monde h3 {
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding-bottom: 0.5rem;
    font-size: 1.87rem;
}

.school-card {
    display: flex;
    align-items: center;
    border-left: 7.20rem solid #D86158;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.16);
    margin-top: 5.30rem;
    padding: 3rem;
}

.school-card-content {
    padding: 0rem 10rem 0rem 4rem;
}

.school-card>div {
    width: 70%;
    height: auto;
}

.school-card img {
    width: 20%;
    margin: 1rem auto;
}

/* .accueil-style .matai-card {
    display: flex;
    align-items: center;
    border-left: 7.20rem solid #87A84C;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.16);
    margin-top: 5.30rem;
    padding: 3rem;
}

.accueil-style .matai-card-content {
    padding: 0rem 10rem 0rem 4rem;
}

.accueil-style .matai-card>div {
    width: 70%;
    height: auto;
}


.accueil-style .matai-card img {
    width: 25%;
    margin: 2.3rem;
} */

/**seconde section: actualités**/

.accueil-style .actualites h2 {
    margin-bottom: 1rem;
}

.accueil-style .card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:center;

}

.accueil-style .button-white {
    text-decoration: none;

}
.card-actu-1
{
    margin: 2rem;
    background-color: #2C2C2C;
}

 .card-actu-1 p {
    padding: 0rem 2rem;;
    color: #ffffff;
}

.card-actu-1 h3 {
    font-size: 1.87rem;
    color: #ffffff;
    font-family: 'Josefin Sans', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    padding: 2rem 1rem;

}

.accueil-style .card>div {
    width: 100%;
    height: auto;
}

.accueil-style .splide__arrow { 
    width: 4em;
    height:4em;
    
}

.accueil-style .splide__arrow--next {
    right:-3em;
}
.accueil-style .splide__arrow--prev {
    left:-3em;
}

.accueil-style .actu-all-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0rem 4rem;
}



/**Troisième section: qui sommes-nous ?**/
.accueil-style .section-about h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 2.18rem;
    text-transform: uppercase;
    color: #000000;
    display: flex;
    justify-content: center;
    padding-bottom: 2rem;
}

.accueil-style .section-background {
    background-color: #FAAB4C;
}

.accueil-style .section-content {
    padding: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.accueil-style .section-content p:first-of-type {
    padding-bottom: 2rem;
}

.accueil-style .section-content p:nth-of-type(2) {
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;

}

.accueil-style .section-about {
    display: flex;
}

.accueil-style .section-about>div {
    width: 50%;
    height: auto;
}

.accueil-style .photo-section {
    position: relative;
}

.accueil-style .photo-section img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.splide__slide {
    display: flex;
   }
   
.card-actu-1 {
    display:flex;
    flex-direction:column;
}

.accueil-style .button-flexend, .accueil-style .button-flexend-2 { 
    margin-top: auto 
}

/**responsive**/
@media screen and (max-width: 1500px) {
    .accueil-style .container {
        width: 100%;
        max-width: 1150px;
    }

    .accueil-style section h2 {
        text-align: center;
    }

    .accueil-style .liste-nav li {
        margin: 0rem 1.5rem 0rem 1.5rem;
    }

    /**1 ère section**/

.accueil-style .school-card-content {
    padding: 1rem 1rem 1rem 0rem;
}

.accueil-style .section-content {
    padding: 1rem 0rem 1rem 0rem;
    flex-direction: column;
}

 /**troisième section**/
 .accueil-style .section-content {
    padding:1rem;
    
}
}

@media screen and (max-width: 800px) {
    .accueil-style .container {
        width: 100%;
        max-width: 750px;
    }

    .accueil-style section {
        margin-bottom: 3rem;
    }

    /**première section**/

    .accueil-style .school-card-content {
        padding: 1rem 1rem 1rem 0rem;
    }

    /**seconde section**/
  

    .accueil-style .card>div {
        width: 80%;
    }

    .accueil-style .section-content {
        padding: 1rem 0rem 1rem 0rem;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .accueil-style .section-about h2 {
        text-align: center;
    }

    /**troisième section**/
    .accueil-style .section-content {
        padding:1rem;
        
    }
}

@media screen and (max-width: 650px) {
    .accueil-style .container {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }

    .accueil-style section {
        margin-bottom: 3rem;
    }

    
    /**première section**/

    .accueil-style .culture-du-monde {
        padding-top: 2rem;
    }

    .accueil-style section h2 {

        font-size: 1.56rem;

    }


    .accueil-style .school-card {
        align-items: center;
        flex-direction: column;
        border-left: none;
        border-top: 50px solid #87A84C;
        padding: 1rem;
        margin: auto;
        margin-top: 2rem;
        max-width:80%;
    }

    .accueil-style .titre-desktop {
        display: none
    }

    .accueil-style .culture-du-monde h3 {
        color: #ffffff;
        font-size: 1.12rem;
        letter-spacing: 0.02em;
        font-weight: 400;
    }

    .accueil-style .titre-mobile {
        display: inline;
        position: relative;
        bottom: 52px;
    }

    .accueil-style .school-card p {
        display: none;
    }

    .accueil-style .school-card-content {
        padding: 0px;
    }

    .accueil-style .button-flexend {
        justify-content: center;
        margin: 1rem 0rem;
    }

    .school-card>div,
    .accueil-style .school-card>div {
        width: 100%;
        height: auto;
    }

    .accueil-style .school-card img {
        width: 60%;
        margin: 0 auto;
    }

    /**seconde section**/

    .accueil-style .actualites h2 {
        margin-bottom: 0rem;
        padding-top: 2rem;
    }

    .accueil-style .card>div {
        width: 100%;
        height: auto;
    }
    .accueil-style .splide__arrow {display:none}
    .accueil-style .actu-all-content {
        margin: 0rem 2rem;
    }

    .accueil-style .card-actu h3 {
        font-size: 1.25rem;
        padding: 1rem;
    }

    .accueil-style .button-flexend-2 {
        margin-top: 1rem;
    }

    .card-actu-1 {
        max-width: 80%;
        margin: auto;
    }


    /** troisième section**/

    .accueil-style .section-about h2 {

        font-size: 1.56rem;
        padding: 2rem 0rem;
    }


    .accueil-style .section-content {
        padding:1rem;
        display: flex;
        align-items: center;
        flex-direction: column;
    }


    .accueil-style .section-about {
        display: flex;
        flex-direction: column;
       
    }

    .accueil-style .section-about>div {
        width: 100%;
        height: auto;
    }

    .accueil-style .photo-section {
        position: relative;
    }

    .accueil-style .photo-section img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }

}

/**FORMULAIRE**/
/**boutons**/


.formulaire-style .wpcf7-submit {
    display:flex; 
    justify-content: right;
}

.formulaire-style .wpcf7-submit {
    text-decoration: none;
    background-color: #1D3141;
    color: #ffffff;
    padding: 0.5rem 2rem;
    border-radius: 0.62rem;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-block;
    border:none;
}

.formulaire-style .wpcf7-submit:hover{
    background-color: #FAAB4C;
    color: #ffffff;
    transition: background 0.3s 0s linear;
}

/**h2 h3 h4**/

.formulaire-style h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 2.813rem;
    text-transform: uppercase;
    color: #2C2C2C;
    display: flex;
    justify-content: center;
    padding: 2rem 0rem;
}

.formulaire-style .reseaux h2,.formulaire-style h3{
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
    font-size: 2.18rem;
    text-transform: uppercase;
    color: #2C2C2C;
    display: flex;
    justify-content: center;
    padding: 2rem 0rem;
}

.formulaire-style .contact h3 {color:white;}


/** formulaire **/

.formulaire-style .wpcf7-form {
    display:flex;
    justify-content: space-around;
    flex-direction: row;
    margin-top: 2rem;
    width: 100%;
}

.formulaire-style .all-champs {
    display: flex;
    justify-content: flex-end;
    font-size: 0.75rem;
}



.formulaire-style .part1-form, .part2-form{
    display:flex; 
    flex-direction:column;
}
.formulaire-style .form-row {
    display:flex; 
    flex-direction:column; 
    justify-content: flex-start;
    margin-bottom: 1rem;
}

.formulaire-style label[for] {
    padding: 1rem 0rem 0.5rem 0rem;
}

/** Réseaux **/

.formulaire-style .reseaux {
    display: flex; 
    flex-direction:column;
    align-items:center;
    margin: 6rem 0rem;
}

/**Contact**/

.formulaire-style .section-background-yellow {
    background-color:#2C2C2C;
    color:#ffffff;
    margin-top: 8rem;
}

.formulaire-style .contact {display:flex;
justify-content:center;
}

.formulaire-style .photo-section, .logo-contact, .info-contact {
    width: 33%; 
    height: auto;
}

.formulaire-style .logo-contact img {
    width: 50%;
    height: auto;
}

.formulaire-style .photo-section img {
    width: 100%;
    height:auto;
    -o-object-fit:cover;
       object-fit:cover;
}

.formulaire-style .logo-contact {display: flex;
align-items:center;
justify-content: center;}

.formulaire-style .info-contact {
    display: flex; 
    flex-direction:column; 
    align-items: flex-start; 
    justify-content:center;
}

.formulaire-style .photo-section-2 {display:none;}

.formulaire-style .info-contact p {padding-bottom: 0.5rem;}

.formulaire-style #instagram:hover #Trace_14, 
.formulaire-style #instagram:hover #Trace_15,
.formulaire-style #instagram:hover #Trace_16 {
    fill: #FAAB4C;
}

.formulaire-style #twitter:hover #twitter-2 {
    fill: #FAAB4C;
}

.formulaire-style #logo_facebook:hover #facebook {
    fill: #FAAB4C;
}

.formulaire-style #youtube:hover #Trace_17, 
.formulaire-style #youtube:hover #Trace_18 {
    fill: #FAAB4C;
}


/**responsive**/
@media screen and (max-width: 1500px) {
    .formulaire-style .container {
        width: 100%;
        max-width: 1150px;
    }

    .formulaire-style section h2 {
        text-align: center;
    }

    .formulaire-style .liste-nav li {
        margin: 0rem 1.5rem 0rem 1.5rem;
    }
}

@media screen and (max-width: 800px) {
    .formulaire-style .container {
        width: 100%;
        max-width: 750px;
    }

    .formulaire-style section {
        margin-bottom: 2rem;
    }

    .formulaire-style h2 {
        text-align: center;
        padding: 2rem 0REM 0REM 0REM;
    }

    .formulaire-style section h3 {
        font-size: 1.56rem;
    }

    
    
/** formulaire **/

.formulaire-style .wpcf7-form{
    display:flex;
    flex-direction:column;
    justify-content: center;
    margin-top: 2rem;
    padding: 0rem 2rem;
}

.formulaire-style .all-champs {display: flex;
    justify-content: flex-end;
    font-size: 0.75rem;}

.formulaire-style .bouton-container {display:flex;
justify-content: space-between;
align-items:center;}

/**contact**/

.formulaire-style .logo-contact, .info-contact {
    width:100%;
}

.formulaire-style .photo-section {display:none;}

.formulaire-style .contact{
    display: flex;
    flex-direction: column;
    align-items:center;
    padding-top:1rem;
}

.formulaire-style .contact>div {
    width: 50%;
    height: auto;
}

.formulaire-style .photo-section-2 {
    display:initial;
    position: relative;
}

.formulaire-style .photo-section-2 img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.formulaire-style .section-background-yellow {
    margin-bottom: 2rem;
    margin-top:1rem;
}

.formulaire-style .reseaux {margin: 3rem 0rem;}


/**hero**/

.formulaire-style .hero img {
    display: none;
}

.formulaire-style .hero {
    height: 170px;
}

.formulaire-style .hero h1 {
    font-size: 2.5rem;
}


/** formulaire **/

.formulaire-style .speaker-form {
    display:flex;
    flex-direction:column;
    justify-content: center;
    margin-top: 2rem;
    width: 100%;
    padding: 0rem 1rem;
}

.formulaire-style .all-champs-2{
display:initial;
font-size: 0.75rem;}

.formulaire-style .all-champs {display:none;}

.formulaire-style .bouton-container {display:flex;
justify-content: space-between;
align-items:center;}

/**réseaux**/

.formulaire-style .reseaux h2 {font-size: 1.56rem;}

.formulaire-style .reseaux svg {width: 350px;}

/**contact**/

.formulaire-style .logo-contact, .info-contact {
    width:100%;
}

.formulaire-style .photo-section {display:none;}

.formulaire-style .contact>div {
    width: 50%;
    height: auto;
}

.formulaire-style .photo-section-2 {
    display:initial;
    position: relative;
}

.formulaire-style .photo-section-2 img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.formulaire-style .section-background-yellow {
    margin-bottom: 2rem;
    margin-top:1rem;
}

.formulaire-style .reseaux {margin: 3rem 0rem;}

}

/**AGENDA**/
/**boutons**/

.agenda-style .nav-links a {
    color: #2C2C2C;
    text-decoration: none;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    font-size: 1.56rem;
}


.agenda-style .button-flexend-2 {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.agenda-style .button-white {
    background-color: #ffffff;
    color: #2C2C2C;
    border-radius: 0.5rem 0rem 0rem 0.5rem;
    font-family: "Josefin sans", sans-serif;
    font-weight: 600;
    padding: 10px 30px;
    display: inline-block;
    margin: 1rem 0rem;
    font-size: 1.25rem;
}

.agenda-style .button-white:hover,
.agenda-style .button-white:focus {
    transform:scale(1.2);
    transition: all 0.4s 0s ease;
}

/**h2 h3 h4**/

.agenda-style section h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 2.813rem;
    text-transform: uppercase;
    color: #000000;
    padding: 1rem 0rem;
    text-align: left;
}

.agenda-style h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 2.5rem;
    text-transform: uppercase;
    color: #2C2C2C;
    padding: 2rem 0rem 4rem 0rem;
    text-align: center;
}


.agenda-style .section-background h2 {
    color: white;
}

.agenda-style section h3 {
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 1rem 0rem 0.5rem 0rem;
    font-size: 2.18rem;
}

/** cards**/

.agenda-style .card {
    display:grid; 
    grid-template-columns: 1fr 1fr 1fr;
    /* grid-template-rows: 1fr 1fr 1fr; */
    -moz-column-gap: 75px;
         column-gap: 75px;
     row-gap: 90px;/*
    grid-template-areas:
    "part1 part2 part3 "
    "part4 part5 part6 "
    "part7 part8 part9 " */
}

/* .card > div:nth-child(1) {grid-area: part1;}

.card > div:nth-child(2) {grid-area: part2;}

.card > div:nth-child(3) {grid-area: part3;}

.agenda-style .card-actu-4 {grid-area: part4;}

.agenda-style .card-actu-5 {grid-area: part5;}

.agenda-style .card-actu-6 {grid-area: part6;}

.agenda-style .card-actu-7 {grid-area: part7;}

.agenda-style .card-actu-8 {grid-area: part8;}

.agenda-style .card-actu-9 {grid-area: part9;} */


.agenda-style .button-white {
    text-decoration: none;

}

.agenda-style .card-actu-1,
.agenda-style .card-actu-2, 
.agenda-style .card-actu-3,
.agenda-style .card-actu-4,
.agenda-style .card-actu-5,
.agenda-style .card-actu-6,
.agenda-style .card-actu-7,
.agenda-style .card-actu-8,
.agenda-style .card-actu-9 {
    
    background-color: #2C2C2C;
}

.agenda-style .card-actu-1 p,
.agenda-style .card-actu-2 p,
.agenda-style .card-actu-3 p,
.agenda-style .card-actu-4 p,
.agenda-style .card-actu-5 p,
.agenda-style .card-actu-6 p,
.agenda-style .card-actu-7 p,
.agenda-style .card-actu-8 p,
.agenda-style .card-actu-9 p {
    padding: 0rem 2rem;
    color: #ffffff;
}

.agenda-style .card-actu-1 h3,
.agenda-style .card-actu-2 h3,
.agenda-style .card-actu-3 h3,
.agenda-style .card-actu-4 h3,
.agenda-style .card-actu-5 h3,
.agenda-style .card-actu-6 h3,
.agenda-style .card-actu-7 h3,
.agenda-style .card-actu-8 h3,
.agenda-style .card-actu-9 h3 {
    font-size: 1.87rem;
    color: #ffffff;
    font-family: 'Josefin Sans', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    padding: 2rem 1rem;

}

.agenda-style .card>div {
    width:100%;
    height: auto;
}

/** défilement **/

.agenda-style .defilement {
    display: flex;
    justify-content: space-between;
    padding-bottom: 5rem;
    ;
}

.agenda-style .defilement-mobile {
    display: none;
}

/**responsive**/
@media screen and (max-width: 1500px) {
    .agenda-style .container {
        width: 100%;
        max-width: 1150px;
    }
}


@media screen and (max-width: 800px) {
    .agenda-style .container {
        width: 100%;
        max-width: 750px;
    }

    .agenda-style section {
        margin-bottom: 3rem;
    }

/**seconde section**/

.agenda-style .card {
    grid-template-columns: 1fr 1fr ;
    -moz-column-gap: 45px;
         column-gap: 45px;
    row-gap: 40px;
}

.agenda-style .card-actu-7, .agenda-style .card-actu-8, .agenda-style .card-actu-9 {
    display:none;
}

.agenda-style .card-actu-1 h3,.agenda-style .card-actu-2 h3,.agenda-style .card-actu-3 h3,.agenda-style .card-actu-4 h3, .agenda-style .card-actu-5 h3,.agenda-style .card-actu-6 h3 {
    font-size: 1.5rem; 
    padding: 1rem;
}

}

@media screen and (max-width: 650px) {
    .agenda-style .container {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }

    .agenda-style section {
        margin-bottom: 3rem;
    }
    .agenda-style .defilement {
        display: none;
    }



    /**seconde section**/

    .agenda-style .card {
        display: grid;
        grid-template-columns: 1fr;
    }

    .agenda-style .card-actu-4,.agenda-style .card-actu-5,.agenda-style .card-actu-6,.agenda-style .card-actu-7,.agenda-style .card-actu-8,.agenda-style .card-actu-9 {
        display: none;
    }

    .agenda-style .card-actu {grid-area: part1;}

    .agenda-style .card-actu-2 {grid-area: part2;}

    .agenda-style .card-actu-3 {grid-area: part3;}

    .agenda-style .card>div {
        width: 100%;
        height: auto;
    }

    .agenda-style .card h3 {
        font-size: 1.25rem;
        padding: 1rem;
    }

    .agenda-style .button-flexend-2 {
        margin-top: 1rem;
    }
    

}

/** ARTICLES **/

/**boutons**/
.article-style .nav-links a{
    color: #2C2C2C;
    text-decoration: none;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    font-size: 1.56rem;
}

/**h2 h3 h4**/

.article-style h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 2.813rem;
    text-transform: uppercase;
    color: #2C2C2C;
    text-align: center;
    padding-top: 2rem;
}

.article-style h3 {
    font-family: "Josefin Sans", sans-serif;
    letter-spacing: 0.02em;
    font-weight: 400;
    font-size: 1.56rem;
    text-transform: uppercase;
    color: #000000;

}

.article-style h4 {
    color: #2C2C2C;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 600;
    letter-spacing: 0.05em;
    font-size: 1.56rem;
    text-transform: uppercase;
    padding-top: 2rem;
}

/**première section**/

.article-style .section-background {
    background-color: #D86158;
    margin-top: 2rem;
}

.article-style .section-content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0rem 5rem;
}

.article-style .section-article-1 {
    display: flex;
}

.article-style .section-article-2 {
    display: flex;
    flex-direction: row-reverse;
}

.article-style .section-article-1>div,
.article-style .section-article-2>div {
    width: 50%;
    height: auto;
}



.article-style .photo-section {
    position: relative;
}

.article-style .photo-section img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/** défilement **/

.article-style .defilement {
    display: flex;
    justify-content: space-between;
    padding-bottom: 5rem;
    ;
}

.article-style .defilement-mobile {
    display: none;
}

/** footer **/

.article-style footer {
    background-color: #1D3141;
    color: #ffffff;
    padding: 20px 0px;
}


.article-style .footer-all {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.article-style .footer-logo img {
    width: 276px;
    margin-bottom: 30px;
}

.article-style .social-media svg {
    margin: 0px 20px;
}

.article-style .footer-nav li {
    margin-bottom: 30px;
}

.article-style .footer-nav-liens {
    color: #fff;
}

.article-style .footer-nav-liens:hover {
    color: #FAAB4C;
}

.article-style footer h2 {
    font-family: 'Josefin Sans', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.563rem;
    color: #FAAB4C;
    text-align: center;
    margin-bottom: 41px;
}

.article-style footer small {
    font-size: 0.75rem;
    display: flex;
    justify-content: center;
}


.article-style .reconnaissance img {
    width: auto;
    height: auto;
    margin-bottom: 10px;
}

.article-style .reconnaissance-images {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.article-style .icones-socialmedia {
    display: flex;
    align-items: center;
}


.article-style #twitter:hover #twitter-2 {
    fill: #FAAB4C;
}

.article-style #instagram_footer:hover #Trace_19,
.article-style #instagram_footer:hover #Trace_20,
.article-style #instagram_footer:hover #Trace_21 {
    fill: #FAAB4C;
}

.article-style #footer_facebook:hover #facebook {
    fill: #FAAB4C
}

.article-style #youtube_footer:hover #Trace_22,
.article-style #youtube_footer:hover #Trace_23 {
    fill: #FAAB4C
}

/**responsive**/
@media screen and (max-width: 1500px) {
    .article-style .container {
        width: 100%;
        max-width: 1150px;
    }

    .article-style section h2 {
        text-align: center;
    }

    .article-style .section-content {
        padding: 1rem 2rem;
    }

    .article-style .liste-nav li {
        margin: 0rem 1.5rem 0rem 1.5rem;
    }

}

@media screen and (max-width: 800px) {
    .article-style .container {
        width: 100%;
        max-width: 750px;
    }

    .article-style section {
        margin-bottom: 2rem;
    }

    .article-style .section-content {
        padding: 1rem;
    }

}

@media screen and (max-width: 650px) {
    .article-style .container {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }

    .article-style section {
        margin-bottom: 1rem;
    }

    .article-style h2 {

        font-size: 1.56rem;
        padding: 1rem 0rem 1rem 0rem;

    }

    .article-style h3 {
        font-size: 1.18rem;
    }

    .article-style .defilement {
        display: none;
    }

    .article-style .defilement-mobile {
        display: flex;
        justify-content: space-around;
        padding: 2rem 0rem;
    }

      /**section 1**/

      .article-style .section-background {
        padding: 1rem 0rem 0rem 0rem;
        margin: 0rem;
        margin-bottom: 2rem;
    }

    .article-style .section-article-1,
    .article-style .section-article-2 {
        display: flex;
        flex-direction: column-reverse;
    }

    .article-style .section-article-2>div,
    .article-style .section-article-1>div {
        width: 100%;
        height: auto;
    }

}

/** CUISINE & RECETTES **/
/**boutons**/

.cuisine-style .button {
    text-decoration: none;
    background-color: #1D3141;
    color: #ffffff;
    padding: 1rem 2rem;
    border-radius: 0.62rem;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-block;
    margin-top: 2.25rem;
}

.cuisine-style .vent-dasie-card .button:hover,
.cuisine-style .vent-dasie-card .button:focus {
    background-color: #D86158;
    color: #ffffff;
    transition: background 0.3s 0s linear;
}

.cuisine-style .matai-card .button:hover,
.cuisine-style .matai-card .button:focus {
    background-color: #87A84C;
    color: #ffffff;
    transition: background 0.3s 0s linear;
}

.cuisine-style .button-flexend,
.cuisine-style .button-flexend-2 {
    display: flex;
    justify-content: flex-end;
    margin: auto 0;
}

.cuisine-style .button-white {
    background-color: #ffffff;
    color: #2C2C2C;
    border-radius: 0.5rem 0rem 0rem 0.5rem;
    font-family: "Josefin sans", sans-serif;
    font-weight: 600;
    padding: 10px 30px;
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.cuisine-style .button-white:hover,
.cuisine-style .button-white:focus {
    font-size: 1.87rem;
    transition: all 0.4s 0s ease;
}

/**première section**/

.cuisine-style .recettes h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 2.813rem;
    text-transform: uppercase;
    color: #2C2C2C;
    display: flex;
    justify-content: center;
}

.cuisine-style .recettes p { 
    padding-top:2rem;
}

/** seconde section: yakitori**/

.cuisine-style .section-recette-2 {
    padding: 3rem 0rem;
}

.cuisine-style section h3 {
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding-bottom: 3rem;
    font-size: 2.18rem;
}


.cuisine-style .section-background {
    background-color: #D86158;
}

.cuisine-style .section-content {
    padding: 8rem 0rem 8rem 8rem;
}


.cuisine-style .section-recette-1 {
    display: flex;
    flex-direction: row-reverse;
}

.cuisine-style .section-recette-1>div {
    width: 50%;
    height: auto;
}

.cuisine-style .photo-section {
    position: relative;
}

.cuisine-style .photo-section img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
/**Troisième section: Cuisine**/

.cuisine-style .section-recette-2 {
    display: flex;
}

.cuisine-style .section-recette-2>div {
    width: 50%;
    height: auto;
}

.cuisine-style .section-content-second {
    padding: 8rem 8rem 8rem 0rem;
}



/**responsive**/
@media screen and (max-width: 1500px) {
    .cuisine-style .container {
        width: 100%;
        max-width: 1150px;
    }

}

@media screen and (max-width: 800px) {
    .cuisine-style .container {
        width: 100%;
        max-width: 750px;
    }

    .cuisine-style section {
        margin-bottom: 3rem;
    }

    /**section**/

    .cuisine-style .section-content, .section-content-second {
        padding: 1rem;
    }

}

@media screen and (max-width: 650px) {
    .cuisine-style .container {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }

    .cuisine-style section {
        margin-bottom: 3rem;
    }

    /** première section **/

    .cuisine-style section {
        margin-bottom: 1rem;
    
    }

    .cuisine-style .recettes h2 {
        font-size: 1.56rem;
        letter-spacing: 0.1em;
        text-align:center;
    }

    .cuisine-style .recettes p {
        padding: 1rem 0rem;
    }
    .cuisine-style .recettes{
       display:flex;
       align-items:center;
       flex-direction:column;
    }


    /**Seconde section**/

    .cuisine-style .section-recette-1 {
        flex-direction: column-reverse;
        padding: 1.5rem 1rem;
    }

    .cuisine-style .section-content {
        padding: 0rem;
    }

    .cuisine-style .section-recette-1>div {
        width: 100%
    }

    .cuisine-style .bouton-flexend {
        /* justify-content: flex-end; */
        justify-content: center;
    }

    .cuisine-style section h3 {
        /* padding-bottom: 3rem; */
        /* font-size: 2.18rem; */
        padding: 2rem 0rem 0.5rem 0rem;
        font-size: 1.25rem;
    }


    /** Troisième section **/

    .cuisine-style .section-recette-2 {
        flex-direction: column-reverse;
        padding: 0.5rem 1rem;
    }

    .cuisine-style .section-content-second {
        padding: 0rem;
    }

    .cuisine-style .section-recette-2>div {
        width: 100%
    }

}

/** COURS DE DANSE **/
/**boutons**/

.danse-style .button-blue {
    text-decoration: none;
    background-color: #1D3141;
    border-radius: 0px 50px 50px 50px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: white;
    text-transform: uppercase;
    padding: 2rem 2.5rem;
    display: inline-block;
    font-size: 1.25rem;

}

.danse-style .button-blue:hover,
.danse-style .button-blue:focus {
    background-color: #ffffff;
    color: #1D3141;
    transition: background 0.3s 0s linear;
}

/**h2 h3 h4**/

.danse-style h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 2.813rem;
    text-transform: uppercase;
    color: #2C2C2C;
    display: flex;
    justify-content: center;
    padding: 2rem 0rem;
}

.danse-style section h3 {
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding-bottom: 1rem;
    font-size: 2.18rem;
}

/**première section/Troisième section**/

.danse-style .section-background-green{
    background-color: #87A84C;
}

.danse-style .section-content {
    padding: 8rem 0rem 8rem 8rem;
}


.danse-style .danse-1,
.danse-style .danse-3 {
    display: flex;
    flex-direction: row-reverse;
}

.danse-style .danse-1>div,
.danse-style .danse-3>div {
    width: 50%;
    height: auto;
}

.danse-style .photo-section {
    position: relative;
}

.danse-style .photo-section img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/**seconde section**/

.danse-style .section-content-second {
    padding: 8rem 8rem 8rem 0rem;
}


.danse-style .danse-2 {
    display: flex;
}

.danse-style .danse-2>div {
    width: 50%;
    height: auto;
}

.danse-style .photo-section {
    position: relative;
}

.danse-style .photo-section img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/** Quatrième section**/

.danse-style .rejoigneznous p {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.56rem;
    text-align: center;
}

.danse-style .rejoigneznous p:last-of-type {
    padding-bottom: 3rem;
}
.danse-style .rejoigneznous {
    display:flex;
    flex-direction:column;
    align-items:center;
    padding: 5rem 0rem;
}

.danse-style .section-background:last-of-type {
    margin-bottom: 3rem;
}

/**responsive**/
@media screen and (max-width: 1500px) {
    .danse-style .container {
        width: 100%;
        max-width: 1150px;
    }

    .danse-style section h2 {
        text-align: center;
    }

    .danse-style .liste-nav li {
        margin: 0rem 1.5rem 0rem 1.5rem;
    }
}

@media screen and (max-width: 800px) {
    .danse-style .container {
        width: 100%;
        max-width: 750px;
    }

    .danse-style section {
        margin-bottom: 2rem;
    }

    .danse-style h2 { text-align:center;}

    

    /**section**/

    .danse-style .section-content, .danse-style .section-content-second
     {
        padding: 1rem;
    }
    
}

@media screen and (max-width: 650px) {
    .danse-style .container {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }

    .danse-style section {
        margin-bottom: 1rem;
    }

    .danse-style h2 {

        font-size: 1.56rem;
        text-align: center;

    }

    .danse-style section h3 {

        font-size: 1.25rem;
        padding: 1rem 0rem;
    }

    
    /**sections**/
    .danse-style .danse-1, 
    .danse-style .danse-2,
    .danse-style .danse-3{
        flex-direction:column-reverse;
        padding: 1.5rem 1rem;
    }

    .danse-style .section-content, 
    .danse-style .section-content-second {
        padding: 0rem;
    }

    .danse-style .danse-1>div, 
    .danse-style .danse-3>div,
    .danse-style .danse-2>div
     {
        width: 100%
    }

    .danse-style .rejoigneznous p {
        font-size: 1.12rem;
    }

}

/**PAGE ECOLE **/

/** Boutons **/

.ecole-style .bouton {
    text-decoration: none;
    background-color: #1D3141;
    color: #ffffff;
    padding: 1rem 2rem;
    border-radius: 0.62rem;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-block;
    margin-top: 2.25rem;
    position: relative;
    z-index: 1;
}

.ecole-style .section-content .bouton:hover,
.ecole-style .section-saviezvous .bouton:hover,
.ecole-style .section-content .bouton:focus,
.ecole-style .section-saviezvous .bouton:focus {
    background-color: #ffffff;
    color: #1D3141;
    transition: background 0.3s 0s linear;
}

.ecole-style .section-cuisine .bouton::before,
.ecole-style .section-voyages .bouton::before
 {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0.62rem;
    background-color: #1D3141;
    transition: .3s;
}
.ecole-style .section-cuisine .bouton:hover,
.ecole-style .section-voyages .bouton:hover,
.ecole-style .section-cuisine .bouton:focus,
.ecole-style .section-voyages .bouton:focus  {
    background-color: #87A84C;
    color: #ffffff;
    transition: background 0.3s 0s linear;
}

.ecole-style .section-cuisine .bouton:hover::before,
.ecole-style .section-voyages .bouton:hover::before,
.ecole-style .section-cuisine .bouton:focus::before,
.ecole-style .section-voyages .bouton:focus::before {
    opacity: 0;

}

.ecole-style .bouton-flexend {
    display: flex;
    justify-content: flex-end;
}

/** première section: Mata'i Tahiti **/

.ecole-style .section-matai {
    margin-top: 3rem;

}

.ecole-style section h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 2.813rem;
    text-transform: uppercase;
    color: #2C2C2C;
    display: flex;
    justify-content: center;
}

.ecole-style .description-ecole {
    margin-top: 4.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ecole-style .description-ecole img {
    width: 40%;
    height: auto;

}

.ecole-style .description-ecole div {
    width: 55%;
    padding-left: 5.6rem;
}

/** seconde section: Danse**/

.ecole-style section h3 {
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding-bottom: 3rem;
    font-size: 2.18rem;
}


.ecole-style .section-background {
    background-color: #87A84C;
}

.ecole-style .section-content {
    padding: 8rem 8rem 8rem 0rem;
}


.ecole-style .section-danse {
    display: flex;
}

.ecole-style .section-danse>div {
    width: 50%;
    height: auto;
}

.ecole-style .photo-section {
    position: relative;
}

.ecole-style .photo-section img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/**Troisième section: Cuisine**/

.ecole-style .section-cuisine {
    display: flex;
    flex-direction: row-reverse;
}

.ecole-style .section-cuisine>div {
    width: 50%;
    height: auto;
}

.ecole-style .section-content-second {
    padding: 8rem 0rem 8rem 8rem;
}

/**Quatrième section: Voyages**/

.ecole-style .section-voyages {
    display: flex;
}

.ecole-style .section-voyages>div {
    width: 50%;
    height: auto;
}

/**Cinquième section: Le saviez-vous ?**/

.ecole-style .section-saviezvous {
    display: flex;
    flex-direction: row-reverse;
}

.ecole-style .section-saviezvous>div {
    width: 50%;
    height: auto;
}



/**responsive**/
@media screen and (max-width: 1500px) {
    .ecole-style .container {
        width:100%;
        max-width:1150px;
    }

    .ecole-style .section-content-second,
    .ecole-style .section-content {
        padding: 2rem;
    }

}

@media screen and (max-width: 800px) {
    .ecole-style .container {
        width:100%;
        max-width:750px;
    }

    .ecole-style section {
        margin-bottom: 3rem;
    }

    .ecole-style .section-content, .ecole-style .section-content-second {
        padding: 2rem;
    }
}

@media screen and (max-width: 650px) {
    .ecole-style .container {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }

    .ecole-style section {
        margin-bottom: 3rem;
    }

   

    /** première section **/

    .ecole-style section h2 {
        font-size: 1.5rem;
        letter-spacing: 0.1em;

    }

    .ecole-style .description-ecole {
        flex-direction: column-reverse;
        padding: 0px;
        margin: 0px;
    }

    .ecole-style .description-ecole img {
        width: 100%;
    }

    .ecole-style .description-ecole p {
        width: 100%;
        padding: 1rem;
    }

    .ecole-style .section-matai {
        margin-top: 1.5rem;
    }

    /** Seconde section **/

    .ecole-style .section-danse {
        flex-direction: column-reverse;
        padding: 1.5rem 1rem;
    }

    .ecole-style .section-content {
        padding: 0rem;
    }

    .ecole-style .section-danse>div {
        width: 100%
    }

    .ecole-style .bouton-flexend {
        /* justify-content: flex-end; */
        justify-content: center;
    }

    .ecole-style section h3 {
        /* padding-bottom: 3rem; */
        /* font-size: 2.18rem; */
        padding: 2rem 0rem 0.5rem 0rem;
        font-size: 1.25rem;
    }


    /** Troisième section **/

    .ecole-style .section-cuisine {
        flex-direction: column-reverse;
        padding: 0.5rem 1rem;
    }

    .ecole-style .section-content-second {
        padding: 0rem;
    }

    .ecole-style .section-cuisine>div {
        width: 100%
    }

    /** Quatrième section **/

    .ecole-style .section-voyages {
        flex-direction: column-reverse;
        padding: 0.5rem 1rem;
    }

    .ecole-style .section-voyages>div {
        width: 100%
    }

    /**Quatrième section **/

    .ecole-style .section-saviezvous {
        flex-direction: column-reverse;
        padding: 2rem 1rem;
    }

    .ecole-style .section-saviezvous>div {
        width: 100%
    }

}

/** PAGE EVENEMENTS **/
/**boutons**/

.evenement-style .nav-links a{
    color: #2C2C2C;
    text-decoration: none;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    font-size: 1.56rem;
}

/**h2 h3 h4**/

.evenement-style h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 2.813rem;
    text-transform: uppercase;
    color: #2C2C2C;
    display: flex;
    justify-content: center;
    padding: 1rem 0rem;
}


.evenement-style .section-background h2 {
    color: white;
}

.evenement-style h3 {
    text-align: center;
}

.evenement-style section h3,
.evenement-style h3 {
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding-bottom: 1rem;
    font-size: 2.18rem;
}

.evenement-style section h3 {
    text-align: initial;
}

/**première section**/

.evenement-style .section-background-yellow {
    background-color: #FAAB4C;
    margin-top: 2rem;
}

.evenement-style .section-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0rem 5rem;
}


.evenement-style .evenement {
    display: flex;
}

.evenement-style .evenement>div {
    width: 50%;
    height: auto;
}


.evenement-style .photo-section {
    position: relative;
}

.evenement-style .photo-section img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/** défilement **/

.evenement-style .defilement {
    display: flex;
    justify-content: space-between;
    padding-bottom: 5rem;
    ;
}

.evenement-style .defilement-mobile {
    display: none;
}

/**responsive**/
@media screen and (max-width: 1500px) {
    .evenement-style .container {
        width: 100%;
        max-width: 1150px;
    }

    .evenement-style section h2 {
        text-align: center;
    }
    .evenement-style .section-content {
        padding: 0rem 5rem 2rem 5rem;
}

}

@media screen and (max-width: 800px) {
    .evenement-style .container {
        width: 100%;
        max-width: 750px;
    }

    .evenement-style section {
        margin-bottom: 2rem;
    }

    .evenement-style h2 {
        text-align: center;
    }

    .evenement-style section h3 {
        font-size: 1.56rem;
    }

    .evenement-style .section-content {
        padding: 0rem 2rem 2rem 2rem;
    }

    
}

@media screen and (max-width: 650px) {
    .evenement-style .container {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }

    .evenement-style section {
        margin-bottom: 1rem;
    }

    .evenement-style h2 {

        font-size: 1.56rem;
        padding: 2rem 0rem 0rem 0rem;

    }

    .evenement-style h3 {
        font-size: 1.18rem;
    }

    .evenement-style .section h3 {
        font-size: 1.25rem;
        padding: 1rem;
    }

    .evenement-style .defilement {
        display: none;
    }

    .evenement-style .defilement-mobile {
        display: flex;
        justify-content: space-around;
        padding: 2rem 0rem;
    }

    /** première section **/

    .evenement-style .section-background-yellow {
        padding: 2rem 0rem;
        margin: 0rem;
    }

    .evenement-style .section-content {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        padding: 1rem 0rem;
    }


    .evenement-style .evenement {
        display: flex;
        flex-direction: column;
    }

    .evenement-style .evenement>div {
        width: 100%;
        height: auto;
    }

}

/** INSCRIPTION **/
/**boutons**/

.inscription-style .button-blue {
    text-decoration: none; 
    background-color: #1D3141;
    border-radius: 0px 50px 50px 50px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    color:#ffffff;
    text-transform: uppercase;
    padding: 1rem 2rem;
    display: inline-block;
   font-size:1.12rem;
}

.inscription-style .vent-dasie-card .button-blue:hover,
.inscription-style .vent-dasie-card .button-blue:focus {
    background-color: #D86158;
    transition: background 0.3s 0s linear;
}

.inscription-style .matai-card .button-blue:hover,
.inscription-style .matai-card .button-blue:focus {
    background-color: #87A84C;
    transition: background 0.3s 0s linear;
}



.inscription-style .button-yellow {
    text-decoration: none; 
    background-color: #FAAB4C;
    border-radius: 0px 50px 50px 50px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    color:#2c2c2c;
    text-transform: uppercase;
    padding: 2rem 2.5rem;
    display: inline-block;
    font-size:1.25rem;

}

.inscription-style .button-yellow:hover, 
.inscription-style .button-yellow:focus
{background-color:#ffffff;
    transition: background 0.3s 0s linear;
}

.inscription-style .button {
    text-decoration: none;
    background-color: #1D3141;
    color: #ffffff;
    padding: 1rem 2rem;
    border-radius: 0.62rem;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-block;
    margin-top: 2.25rem;
}

.inscription-style .vent-dasie-card .button:hover,
.inscription-style .vent-dasie-card .button:focus {
    background-color: #D86158;
    color: #ffffff;
    transition: background 0.3s 0s linear;
}

.inscription-style .matai-card .button:hover,
.inscription-style .matai-card .button:focus {
    background-color: #87A84C;
    color: #ffffff;
    transition: background 0.3s 0s linear;
}

.inscription-style .button-flexend,
.inscription-style .button-flexend-2 {
    display: flex;
    justify-content: flex-end;
}

.inscription-style .button-white {
    background-color: #ffffff;
    color: #2C2C2C;
    border-radius: 0.5rem 0rem 0rem 0.5rem;
    font-family: "Josefin sans", sans-serif;
    font-weight: 600;
    padding: 10px 30px;
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.inscription-style .button-white:hover,
.inscription-style .button-white:focus {
    font-size: 1.87rem;
    transition: all 0.4s 0s ease;
}

/**h2 h3 h4**/

.inscription-style section h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 2.813rem;
    text-transform: uppercase;
    color: #2C2C2C;
    display: flex;
    justify-content: center;
}

.inscription-style .adherer h2 {
    color: #ffffff;
}

.inscription-style h3 {
    font-family: "Josefin Sans", sans-serif; 
    letter-spacing: 0.02em;
    font-weight: 400;
    font-size: 1.56rem;
    text-transform: uppercase;
    color: #ffffff;

}

.inscription-style h4 {
color:#2C2C2C;
font-family: "Josefin Sans", sans-serif;
font-weight: 600; 
letter-spacing: 0.05em;
font-size: 1.56rem;
text-transform: uppercase;
padding-top: 2rem;
}

/**Première section**/

.inscription-style .inscrire p:first-of-type {
    padding-top: 1rem;
}

/**Seconde section**/

.inscription-style .adherer {
    padding: 3rem 0rem;
    display:flex;
    align-items:center;
    flex-direction: column;
}

.inscription-style .section-background {
    background-color: #2C2C2C;
}

.inscription-style .adherer p {
    color: #ffffff;
    text-align:center;
}

.inscription-style .adherer p:first-of-type {
    text-transform: uppercase;
    padding-bottom: 4rem;
}

.inscription-style .adherer p:nth-of-type(2) {
  padding-bottom: 4rem;

}
.inscription-style .adherer h2 {
    padding-bottom: 2rem;
}

/**troisième section**/

.inscription-style .last-p {
    text-transform: uppercase;
    display:flex;
    flex-direction: column;
    align-items: center;
    letter-spacing: 0.1em;
    font-size: 1.56rem;
    padding: 5rem 0rem 3rem 0rem;

}
.inscription-style .cours-de-danse h2 {
    padding: 2rem 0rem;
}

.inscription-style .cards {
    display:flex;
    justify-content:space-around
}

.inscription-style .vent-dasie-card {
    display: flex;
    align-items: center;
    flex-direction:column;
    border-top: 7.20rem solid #D86158;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.16);
    margin-top: 5.30rem;
    padding: 2rem;
    width: 35%;
}

.inscription-style .vent-dasie-card-content {
    display:flex; 
    flex-direction: column;
    align-items: center;
}

.inscription-style .vent-dasie-card-content p 
{padding: 2rem 0rem 3rem 0rem;}

.inscription-style .vent-dasie-card img {
    width: 60%;
    margin: 0 auto;
}

.inscription-style .vent-dasie-card h3 {
    display: inline;
        position: relative;
        bottom: 100px;
        text-align:center;
}

.inscription-style .matai-card {
    display: flex;
    align-items: center;
    flex-direction:column;
    border-top: 7.20rem solid #87A84C;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.16);
    margin-top: 5.30rem;
    padding: 2rem;
    width: 35%;
}

.inscription-style .matai-card-content {
    display:flex; 
    flex-direction: column;
    align-items: center;
}

.inscription-style .matai-card-content p {
    padding: 2rem 0rem 3rem 0rem;}

.inscription-style .matai-card img {
    width: 86%;
    margin: 0 auto;
}

.inscription-style .matai-card h3 {
    display: inline;
        position: relative;
        bottom: 100px;
        text-align:center;
}




/**responsive**/
@media screen and (max-width: 1500px) {
    .inscription-style .container {
        width: 100%;
        max-width: 1150px;
    }

    .inscription-style section h2 {
        text-align: center;
    }

    .inscription-style .vent-dasie-card, .inscription-style .matai-card {
        width:45%;
    }
}

@media screen and (max-width: 800px) {
    .inscription-style .container {
        width: 100%;
        max-width: 750px;
    }

    .inscription-style section {
        margin-bottom: 3rem;
    }

    .inscription-style .cards {
        flex-direction:column;
        align-items:center;
     }
 
     .inscription-style .vent-dasie-card, .inscription-style .matai-card {
         width:75%;
     }
    
}

@media screen and (max-width: 650px) {
    .inscription-style .container {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }

    .inscription-style section {
        margin-bottom: 3rem;
    }

    .inscription-style section h2 {

        font-size: 1.56rem;

    }

    
    /**section 1**/

    .inscription-style h4 {
        font-size: 1.25rem;
    }

    .inscription-style .inscrire h2 {
        padding-top: 1rem;
    }

    /**section 3**/

    .inscription-style .cards {
       flex-direction:column;
    }

    .inscription-style .vent-dasie-card {
        width:100%;
    }

    .inscription-style .matai-card {
        width:100%;
    }

    .inscription-style h3 {
    font-size: 20px;
    }

    .inscription-style .last-p {
    text-align:center;
    font-size: 16px;
    }

}

/** PROJETS PEDAGOGIQUES **/

/**boutons**/

.pedago-style .button-yellow {
    text-decoration: none;
    background-color: #FAAB4C;
    border-radius: 0px 50px 50px 50px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #2c2c2c;
    text-transform: uppercase;
    padding: 2rem 2.5rem;
    display: inline-block;
    font-size: 1.25rem;


}

.pedago-style .button-yellow:hover,
.pedago-style .button-yellow:focus {
    background-color: #ffffff;
    transition: background 0.3s 0s linear;
}

/**h2 h3 h4**/

.pedago-style section h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 2.813rem;
    text-transform: uppercase;
    color: #000000;
    padding: 1rem 0rem;
    text-align: left;
}

.pedago-style h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 2.5rem;
    text-transform: uppercase;
    color: #2C2C2C;
    padding: 2rem 0rem;
    text-align: center;
}


.pedago-style .section-background h2 {
    color: white;
}

.pedago-style section h3 {
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 2rem 0rem 0.5rem 0rem;
    font-size: 2.18rem;
}

h1
{text-align:center;}

/** Première section **/

.pedago-style .section-background-yellow {
    background-color: #FAAB4C;
}

.pedago-style .section-content,
.pedago-style .section-content-second {
    display: flex;
    flex-direction: column;
    justify-content: center;


}

.pedago-style .enseignante .section-content-second {
    padding: 3rem 8rem 3rem 5rem;
}

.pedago-style .section-content-second {
    padding: 3rem 0rem 3rem 5rem;
}

.pedago-style .section-content {
    padding: 3rem 5rem 3rem 0rem;
}


.pedago-style .cultures_etrangeres,
.pedago-style .sens_culinaire {
    display: flex;
    flex-direction: row;
}

.pedago-style .motricite_ecoute,
.pedago-style .enseignante {
    display: flex;
    flex-direction: row-reverse;
}

.pedago-style .cultures_etrangeres>div,
.pedago-style .motricite_ecoute>div,
.pedago-style .sens_culinaire>div,
.pedago-style .enseignante>div {
    width: 50%;
    height: auto;
}

.pedago-style .photo-section {
    position: relative;
}

.pedago-style .photo-section img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/** quatrième section **/

.pedago-style .section-background {
    background-color: #2C2C2C;
    color: #ffffff;
    padding: 2rem 0rem;
    text-align: center;
    margin-bottom: 3rem;
}

.pedago-style .section-background p:last-of-type {
    
    font-size: 1.25rem;
    text-align: center;
    padding: 2rem 0rem 4rem 0rem;
}

.pedago-style .projet {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/** défilement **/

.pedago-style .defilement {
    display: flex;
    justify-content: space-between;
    padding-bottom: 5rem;
    ;
}

.pedago-style .defilement-mobile {
    display: none;
}


/**responsive**/
@media screen and (max-width: 1500px) {
    .pedago-style .container {
        width: 100%;
        max-width: 1150px;
    }

    .pedago-style section h2 {
        font-size: 1.813rem;
    }

    .pedago-style .enseignante .section-content-second {
        padding: 2rem 3rem 2rem 3rem;
    }

    .pedago-style .section-content-second {
        padding: 2rem 1rem 2rem 3rem;
    }
    
    .pedago-style .section-content {
        padding: 2rem 3rem 2rem 1rem;
    }
    
    
}

@media screen and (max-width: 800px) {
    .pedago-style .container {
        width: 100%;
        max-width: 750px;
    }

    .pedago-style section {
        margin-bottom: 2rem;
    }

    .pedago-style h2 {
        text-align: center;
    }

    .pedago-style section h3 {
        font-size: 1.56rem;
    }

    .pedago-style .enseignante .section-content-second {
        padding: 1rem;
    }


   

    /**section**/

    .pedago-style .section-content,
    .pedago-style .section-content-second {
        padding: 1rem;
    }

    
}

@media screen and (max-width: 650px) {
    .pedago-style .container {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }

    .pedago-style section {
        margin-bottom: 1rem;
    }

    .pedago-style h2 {

        font-size: 1.56rem;
        padding: 1rem 0rem;

    }

    .pedago-style section h2 {
        font-size: 1.56rem;
        text-align: center;
    }

    .pedago-style section h3 {

        font-size: 1.25rem;
        padding: 1rem 0rem;
    }

    
    /** première section **/

    .pedago-style .section-background-yellow {
        padding-bottom: 1rem;
    }

    .pedago-style .enseignante .section-content-second {
        padding: 1rem;
    }

    .pedago-style .section-content-second {
        padding: 1rem;
    }

    .pedago-style .section-content {
        padding: 1rem;
    }


    .pedago-style .cultures_etrangeres,
    .pedago-style .sens_culinaire {
        display: flex;
        flex-direction: column;
    }

    .pedago-style .motricite_ecoute,
    .pedago-style .enseignante {
        display: flex;
        flex-direction: column;
    }

    .pedago-style .cultures_etrangeres>div,
    .pedago-style .motricite_ecoute>div,
    .pedago-style .sens_culinaire>div,
    .pedago-style .enseignante>div {
        width: 100%;
        height: auto;
    }

    .pedago-style .section-background {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .pedago-style .projet p:first-of-type {
        text-align: left;
    }
}

/** PRESENTATION **/
/**boutons**/


.presentation-style .button-yellow {
    text-decoration: none;
    background-color: #FAAB4C;
    border-radius: 0px 50px 50px 50px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #2c2c2c;
    text-transform: uppercase;
    padding: 2rem 2.5rem;
    display: inline-block;
    font-size: 1.25rem;

}

.presentation-style .button-yellow:hover,
.presentation-style .button-yellow:focus {
    background-color: #ffffff;
    transition: background 0.3s 0s linear;
}

/**h2 h3 h4**/

.presentation-style h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 2.813rem;
    text-transform: uppercase;
    color: black;
    padding: 2rem 0rem;
    text-align: center;
}

.presentation-style .association h3,
.presentation-style .marie_aude h3 {
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    font-size: 1.56rem;
}

.presentation-style .section-content-second h3 {
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    font-size: 1.87rem;
}


.presentation-style h4 {
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
    font-size: 1.25rem;
}

/**première section**/
.presentation-style .rejoindre {
    padding: 3rem 0rem 7rem 0rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #ffffff;
}

.presentation-style .section-background {
    background-color: #2C2C2C;
}


.presentation-style .rejoindre p:first-of-type {
    text-transform: uppercase;
    padding-bottom: 1rem;
    font-size: 1.56rem;
    color: #FAAB4C;
}

.presentation-style .rejoindre p:nth-of-type(2) {
    padding-bottom: 4rem;

}

.presentation-style .rejoindre h2 {
    padding-bottom: 2rem;
    color: #ffffff;
}

/**seconde section + quatrième section **/

.presentation-style .section-background-yellow {
    background-color: #FAAB4C;
}

.presentation-style .section-content {
    display: flex;
    flex-direction: column;
    padding: 0rem 4rem 0rem 8rem;
}

.presentation-style .section-content-third {
    display: flex;
    flex-direction: column;
    justify-content:center;
    padding: 0rem 8rem 2rem 4rem;

}


.presentation-style .association p {
    padding: 0.5rem 0rem;
}

.presentation-style .association {
    display: flex;
}

.presentation-style .marie_aude {
    display: flex;
    flex-direction: row-reverse;
}

.presentation-style .association>div,
.presentation-style .marie_aude>div {
    width: 50%;
    height: auto;
}

.presentation-style .section-content-third h3:last-of-type {
    padding-top: 3rem;
}

.presentation-style .section-content-third h3:first-of-type {
    padding-top: 3rem;
}


.presentation-style .photo-section-desktop {
    position: relative;
}

.presentation-style .photo-section-desktop img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.presentation-style .photo-section-mobile,
.presentation-style .photo-section-mobile-2 {
    display: none;
}

/**troisième section**/
.presentation-style .section-content-second {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0rem 4rem;
}

.presentation-style .valeurs-1,
.presentation-style .valeurs-3 {
    display: flex;
    flex-direction: row-reverse;
    padding-top: 2rem;
}

.presentation-style .valeurs-2,
.presentation-style .valeurs-4 {
    display: flex;
    padding-top: 2rem;
}

.presentation-style .valeurs-1>div,
.presentation-style .valeurs-2>div,
.presentation-style .valeurs-3>div,
.presentation-style .valeurs-4>div {
    width: 50%;
    height: auto;
}

.presentation-style .photo-section {
    position: relative;
}

.presentation-style .photo-section img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.presentation-style .valeurs-1,
.presentation-style .valeurs-2,
.presentation-style .valeurs-3,
.presentation-style .valeurs-4 {
    padding-bottom: 3rem;
}

/** carroussel**/

.presentation-style .carroussel {
    margin: 2rem 0rem 3rem 0rem;
}
.presentation-style .splide__slide img {
    width : 100%;
    height: 100%;
    -o-object-fit:cover;
       object-fit:cover;
   }

   .presentation-style .splide__pagination__page {
       display:none;
   }

/**responsive**/
@media screen and (max-width: 1500px) {
    .presentation-style .container {
        width: 100%;
        max-width: 1150px;
    }

    .presentation-style .section-content-third h3:last-of-type {
        padding-top: 2rem;
    }

    .presentation-style .section-content-third h3:first-of-type {
        padding-top: 2rem;
    }

    .presentation-style .section-content-third,
    .presentation-style .section-content {
        padding: 3rem;
    }

    .presentation-style section h2 {
        text-align: center;
    }
}

@media screen and (max-width: 800px) {
    .presentation-style .container {
        width: 100%;
        max-width: 750px;
    }


    .presentation-style h2 {
        text-align: center;
        padding: 2rem;
    }


    .presentation-style .valeurs-2,
    .presentation-style .valeurs-4,
    .presentation-style .valeurs-3,
    .presentation-style .valeurs-1 {
        padding-top: 1rem;
    }

    /**section**/

    .presentation-style .rejoindre {
        padding: 3rem 1rem 3rem 1rem;
    }

    /**seconde section + quatrième section **/
    .presentation-style .association {
        display: flex;
        flex-direction: column-reverse;
    }

    .presentation-style .marie_aude {
        display: flex;
        flex-direction: column;
    }

    .presentation-style .association>div,
    .presentation-style .marie_aude>div {
        width: 100%;
        height: auto;
    }

    .presentation-style .section-content,
    .presentation-style .section-content-third {
        padding: 1rem;
    }


    .presentation-style .section-content-third h3:last-of-type {
        padding-top: 2rem;
    }

    .presentation-style .section-content-third h3:first-of-type {
        padding-top: 2rem;
    }

    .presentation-style .photo-section-desktop {
        display: none;
    }

    .presentation-style .photo-section-mobile-2 img {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }

    .presentation-style .photo-section-mobile-2 {
        display: initial;
    }
}

@media screen and (max-width: 650px) {
    .presentation-style .container {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }



    .presentation-style h2 {

        font-size: 1.56rem;
        text-align: center;
        padding: 1rem;

    }

    .presentation-style h3 {

        font-size: 1.25rem;
        padding: 1rem 0rem;
    }

    .presentation-style .association h3,
    .presentation-style .marie_aude h3,
    .presentation-style .section-content-second h3 {
        font-size: 1.25rem;
    }

    .presentation-style h4 {
        font-size: 1.12rem
    }


    /**première section**/

    .presentation-style .rejoindre {
        padding: 3rem 0rem 3rem 0rem
    }

    /**seconde section + quatrième section **/
    .presentation-style .association {
        display: flex;
        flex-direction: column-reverse;
    }

    .presentation-style .marie_aude {
        display: flex;
        flex-direction: column;
    }

    .presentation-style .association>div,
    .presentation-style .marie_aude>div {
        width: 100%;
        height: auto;
    }

    .presentation-style .section-content-third {
        padding: 1rem;
    }


    .presentation-style .photo-section,
    .presentation-style .photo-section-desktop {
        display: none;
    }

    .presentation-style .photo-section-mobile img,
    .presentation-style .photo-section-mobile-2 img {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }

    .presentation-style .photo-section-mobile,
    .presentation-style .photo-section-mobile-2 {
        display: initial;
    }

    .presentation-style .section-content-third h3:last-of-type {
        padding-top: 2rem;
    }

    .presentation-style .section-content-third h3:first-of-type {
        padding-top: 2rem;
    }

    /** troisième section **/

    .presentation-style .section-content-second {

        padding: 1rem;
    }

    .presentation-style .valeurs-1,
    .presentation-style .valeurs-3,
    .presentation-style .valeurs-2,
    .presentation-style .valeurs-4 {
        display: flex;
        flex-direction: column-reverse;
        padding-top: 0rem;
        padding-bottom: 1rem;
    }

    .presentation-style .valeurs-1>div,
    .presentation-style .valeurs-2>div,
    .presentation-style .valeurs-3>div,
    .presentation-style .valeurs-4>div {
        width: 100%;
        height: auto;
    }

}

/** PAGE SAVIEZ-VOUS **/
/**boutons**/

.saviezvous-style .content a {
    text-decoration: none;
    color: black;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    font-size: 1.56rem;
}

.saviezvous-style .content a:hover {
    -webkit-text-decoration: underline 2px solid black;
            text-decoration: underline 2px solid black;
}


.saviezvous-style .nav-links a {
    color: #2C2C2C;
    text-decoration: none;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    font-size: 1.56rem;
}


.saviezvous-style .button-flexend-2 {
    display: flex;
    justify-content: flex-end;
}

.saviezvous-style .button-white {
    background-color: #ffffff;
    color: #2C2C2C;
    border-radius: 0.5rem 0rem 0rem 0.5rem;
    font-family: "Josefin sans", sans-serif;
    font-weight: 600;
    padding: 10px 30px;
    display: inline-block;
    margin: 1rem 0rem;
    font-size: 1.25rem;
}

.saviezvous-style .button-white:hover,
.saviezvous-style .button-white:focus {
    transform:scale(1.2);
    transition: all 0.4s 0s ease;
}

/**h2 h3 h4**/

.saviezvous-style h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 2.5rem;
    text-transform: uppercase;
    color: #2C2C2C;
    padding: 5rem 0rem 3rem 0rem;
    text-align: center;
}


.saviezvous-style .section-background h2 {
    color: white;
}

.saviezvous-style h3 {
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 1rem 0rem 0.5rem 0rem;
    font-size: 2.18rem;
    text-align: center;
}

/** thématique **/

.saviezvous-style .background-color {
    padding: 2rem 0rem 4rem 0rem;
    background-color: #87A84C
}

.saviezvous-style .content {
    margin-top: 5rem;
    display: flex;
    justify-content: space-around;
}

/** cards**/

.saviezvous-style .card {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    -moz-column-gap: 75px;
         column-gap: 75px;
    row-gap: 90px;
    grid-template-areas:
        "part1 part2 part3 "
        "part4 part5 part6 "
        "part7 part8 part9 "
}

.saviezvous-style .card-actu-1 {
    grid-area: part1;
}

.saviezvous-style .card-actu-2 {
    grid-area: part2;
}

.saviezvous-style .card-actu-3 {
    grid-area: part3;
}

.saviezvous-style .card-actu-4 {
    grid-area: part4;
}

.saviezvous-style .card-actu-5 {
    grid-area: part5;
}

.saviezvous-style .card-actu-6 {
    grid-area: part6;
}

.saviezvous-style .card-actu-7 {
    grid-area: part7;
}

.saviezvous-style .card-actu-8 {
    grid-area: part8;
}

.saviezvous-style .card-actu-9 {
    grid-area: part9;
}


.saviezvous-style .button-white {
    text-decoration: none;
}

.saviezvous-style .card-actu-1,
.saviezvous-style .card-actu-2,
.saviezvous-style .card-actu-3,
.saviezvous-style .card-actu-4,
.saviezvous-style .card-actu-5,
.saviezvous-style .card-actu-6,
.saviezvous-style .card-actu-7,
.saviezvous-style .card-actu-8,
.saviezvous-style .card-actu-9 {

    background-color: #2C2C2C;
}

.saviezvous-style .card-actu-1 p,
.saviezvous-style .card-actu-2 p,
.saviezvous-style .card-actu-3 p,
.saviezvous-style .card-actu-4 p,
.saviezvous-style .card-actu-5 p,
.saviezvous-style .card-actu-6 p,
.saviezvous-style .card-actu-7 p,
.saviezvous-style .card-actu-8 p,
.saviezvous-style .card-actu-9 p {
    padding: 0rem 2rem;
    color: #ffffff;
}

.saviezvous-style .card-actu-1 h3,
.saviezvous-style .card-actu-2 h3,
.saviezvous-style .card-actu-3 h3,
.saviezvous-style .card-actu-4 h3,
.saviezvous-style .card-actu-5 h3,
.saviezvous-style .card-actu-6 h3,
.saviezvous-style .card-actu-7 h3,
.saviezvous-style .card-actu-8 h3,
.saviezvous-style .card-actu-9 h3 {
    font-size: 1.87rem;
    color: #ffffff;
    font-family: 'Josefin Sans', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    padding: 2rem 1rem;
    text-align: left;

}

.saviezvous-style .card>div {
    width: 100%;
    height: auto;
}

/** défilement **/

.saviezvous-style .defilement {
    display: flex;
    justify-content: space-between;
    padding-bottom: 5rem;
    ;
}

/**responsive**/
@media screen and (max-width: 1500px) {
    .saviezvous-style .container {
        width: 100%;
        max-width: 1150px;
    }

    .saviezvous-style .liste-nav li {
        margin: 0rem 1.5rem 0rem 1.5rem;
    }

    .saviezvous-style .card {
        -moz-column-gap: 30px;
             column-gap: 30px;
    row-gap: 30px;
}

@media screen and (max-width: 800px) {
    .saviezvous-style .container {
        width: 100%;
        max-width: 750px;
    }

    .saviezvous-style section {
        margin-bottom: 3rem;
    }

    /**seconde section**/

    .saviezvous-style .card {
        grid-template-columns: 1fr 1fr ;
        grid-template-rows: 1fr 1fr;
        -moz-column-gap: 45px;
             column-gap: 45px;
        row-gap: 40px;
        grid-template-areas:
            "part1 part2"
            "part3 part4"
            "part5 part6"
    }

    .saviezvous-style .card-actu-7, .card-actu-8, .card-actu-9 {
        display:none;
    }
    
    .saviezvous-style .card-actu-1 h3, 
    .saviezvous-style .card-actu-2 h3, 
    .saviezvous-style .card-actu-3 h3, 
    .saviezvous-style .card-actu-4 h3, 
    .saviezvous-style .card-actu-5 h3, 
    .saviezvous-style .card-actu-6 h3 {
        font-size: 1.5rem; 
        padding: 1rem;
    }
     
}

@media screen and (max-width: 650px) {
    .saviezvous-style .container {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }

    .saviezvous-style section {
        margin-bottom: 3rem;
    }

    .saviezvous-style .defilement {
        display: none;
    }

    .saviezvous-style .defilement-mobile {
        display: flex;
        justify-content: space-around;
        padding: 2rem 0rem;
    }

    .saviezvous-style .background-color h3 {
        font-size:1.56rem;
    }

   
    /**seconde section**/

    .saviezvous-style .card {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        -moz-column-gap: 0px;
             column-gap: 0px;
        row-gap: 90px;
        grid-template-areas:
            "part1"
            "part2"
            "part3"
    }

    .saviezvous-style .card-actu-4, 
    .saviezvous-style .card-actu-5, 
    .saviezvous-style .card-actu-6, 
    .saviezvous-style .card-actu-7, 
    .saviezvous-style .card-actu-8, 
    .saviezvous-style .card-actu-9 {
        display: none;
    }

    .saviezvous-style .card-actu-1 {grid-area: part1;}

    .saviezvous-style .card-actu-2 {grid-area: part2;}

    .saviezvous-style .card-actu-3 {grid-area: part3;}

    .saviezvous-style .card>div {
        width: 100%;
        height: auto;
    }

    .saviezvous-style .card h3 {
        font-size: 1.25rem;
        padding: 1rem;
    }

    .saviezvous-style .button-flexend-2 {
        margin-top: 1rem;
    }

    /** première section **/
    .saviezvous-style .content {
        margin-top: 1rem;
        flex-direction: column;
        align-items: center;
    }

    .saviezvous-style .content a {margin-top: 1rem;}

}
}

/**PAGE VOYAGES**/
/**boutons**/

.voyages-style .button-yellow {
    text-decoration: none; 
    background-color: #FAAB4C;
    border-radius: 0px 50px 50px 50px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    color:#2c2c2c;
    text-transform: uppercase;
    padding: 2rem 2.5rem;
    display: inline-block;
    font-size:1.25rem;
    

}

.voyages-style .button-yellow:hover, 
.voyages-style .button-yellow:focus {
    background-color:#ffffff;
    transition: background 0.3s 0s linear;
}

/**h2 h3 h4**/

.voyages-style h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 2.813rem;
    text-transform: uppercase;
    color: #2C2C2C;
    display: flex;
    justify-content: center;
    padding: 2rem 0rem;
}

.voyages-style .section-background h2 { color: white;}

.voyages-style section h3 {
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding-bottom: 1rem;
    font-size: 2.18rem;
}

.voyages-style .accompagnement h3 {
    text-align:center;
}

/**première section**/

.voyages-style .section-background  {
    background-color: #2C2C2C;
    color: #ffffff;
    padding: 2rem 0rem;
}

.voyages-style .section-background p:last-of-type {
    text-transform: uppercase;
    font-size: 1.25rem;
    text-align: center;
    padding: 2rem 0rem 4rem 0rem;
}

.voyages-style .voyages {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/**seconde section**/

.voyages-style .section-background-yellow { 
    background-color: #FAAB4C;
}

.voyages-style .section-content {
    display:flex; 
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0rem 5rem;
}


.voyages-style .accompagnement {
    display: flex;
}

.voyages-style .accompagnement>div {
    width: 50%;
    height: auto;
}

.voyages-style .photo-section {
    position: relative;
}

.voyages-style .photo-section img {
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.voyages-style .accompagnement p {
    text-align: center;
    text-transform: uppercase;
}

/**troisième section**/

.voyages-style .section-content-second {
    display:flex; 
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0rem 4rem;
}


.voyages-style .mongolie {
    display: flex;
    flex-direction: row-reverse;
}

.voyages-style .mongolie>div {
    width: 50%;
    height: auto;
}

.voyages-style .photo-section {
    position: relative;
}

.voyages-style .photo-section img {
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/**quatrième section**/

.voyages-style .bali {
    display: flex;
    
}

.voyages-style .bali>div {
    width: 50%;
    height: auto;
}

.voyages-style .photo-section {
    position: relative;
}

.voyages-style .photo-section img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/**responsive**/
@media screen and (max-width: 1500px) {
    .voyages-style .container {
        width: 100%;
        max-width: 1150px;
    }

    .voyages-style section h2 {
        text-align: center;
    }

    .voyages-style .section-content-second{
        padding: 2rem 4rem;
    }
}

@media screen and (max-width: 800px) {
    .voyages-style .container {
        width: 100%;
        max-width: 750px;
    }

    .voyages-style section {
        margin-bottom: 2rem;
    }

    .voyages-style h2 { text-align: center;
    }

    .voyages-style section h3 { font-size: 1.56rem ;
    }

    .voyages-style .accompagnement h3 { text-align: center;}

    /**section**/

    .voyages-style .section-content, 
    .voyages-style .section-content-second {
        padding: 2rem;
    }
    
}

@media screen and (max-width: 650px) {
    .voyages-style .container {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }

    .voyages-style section {
        margin-bottom: 1rem;
    }

    .voyages-style h2 {

        font-size: 1.56rem;
        padding: 1rem 0rem;

    }

   .voyages-style section h3 {

        font-size: 1.25rem;
        padding: 1rem 0rem;
    }

/**première section**/
.voyages-style .section-background p:last-of-type {
    
    font-size: 1rem;
   
}

/**seconde section**/

.voyages-style .accompagnement {
    display: flex;
    flex-direction: column;
}

.voyages-style .accompagnement>div {
    width: 100%;
    height: auto;
}

.voyages-style .accompagnement h3 {text-align:center;}

/**troisième section**/

.voyages-style .mongolie, .voyages-style .bali{
    display: flex;
    flex-direction: column;
}

.voyages-style .mongolie>div,
.voyages-style .bali>div {
    width: 100%;
    height: auto;
}

.voyages-style .section-background-yellow:last-of-type {
    padding: 1rem 0rem;
    margin-bottom: 2rem;
}

}

/**PAGE ERROR 404**/
/**contenu**/

.error-style h2 {
    font-size: 300px; 
    font-weight: 600;
    letter-spacing: 0.15em;
    color: white;
    text-align:center;
}
.error-style p:first-of-type {
    font-size:60px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight:600;
    letter-spacing: 0.15em; 
    text-transform: uppercase;
    text-align:center;

}
.error-style p:last-of-type {
    font-weight: 600;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 35px; 
    letter-spacing: 0.15em; 
    text-transform: uppercase;
    text-align:center;

}
.error-style .filtre {background-color:rgba(255,255,255,0.30);
padding: 3rem 0rem;}
.error-style .error {
background-image: url(../images/contenu/404-hero.jpg);}

/**responsive**/
@media screen and (max-width: 1500px) {
    .error-style .container {
        width: 100%;
        max-width: 1150px;
    }

    .error-style section h2 {
        text-align: center;
    }

    .error-style .liste-nav li {
        margin: 0rem 1.5rem 0rem 1.5rem;
    }
}

@media screen and (max-width: 800px) {
    .error-style .container {
        width: 100%;
        max-width: 750px;
    }
  
}

@media screen and (max-width: 650px) {
    .error-style .container {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }
.error-style p:first-of-type {
    font-size:25px;}

.error-style p:last-of-type {
    font-size: 20px;
}

.error-style h2 {font-size: 80px;}
}