body {
    margin: 0;
}

img {
    width: 100%;
    height: auto;
}

/* #region RESET HEADER*/
header {
    background: #4D5831;
}

#dynamic-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}


header>div {
    display: flex;
    flex-flow: row wrap;
}

.logo img {
    width: 83px;
    height: 98px;
    margin: 10px 0 10px 20px;
}

/* Header NAV */
nav a.active {
    color: white;
}

nav ul {
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    display: block;
    margin-right: 1rem;
}

nav ul li a {
    font-family: "Unica 77 LL TT";
    color: #95B122;
    font-size: 18px;
    font-weight: bolder;
    text-decoration: none;


    display: block;
    padding: .5rem 1rem;

}

/* #enregion RESET HEADER */

/* #region MAIN */
main {
    padding: 0;
    background-color: ivory;
}

/* #endriegion MAIN */

/* #region FOOTER */
footer {
    padding: 2rem 1rem;
    background-color: #4D5831;
    color: #FFF;
}

.footer-logo img {
    width: 231px;

}

.buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

footer>div {
    display: flex;
    flex-flow: row wrap;
}

footer>div>div {
    max-width: 25%;
    flex: 1 1 33%;
}

.socials img {
    width: 85px;
    height: 85px;
    padding: 45px;
    padding-bottom: 5px;
}

.socials {
    display: flex;
    flex-direction: column;

    align-items: flex-end;

}

.footer-infos h5 {
    text-transform: uppercase;
    margin-bottom: 20px;
}

.footer-infos h6 {
    margin-bottom: 0;
    font-weight: 400;
}

span {
    font-weight: 200;
}

.soulifne {
    text-decoration: underline;
}

.footer-infos p {
    margin-top: 0;
    font-weight: 300;
}

/*-------cta--------- */

.cta a {
    color: #FFF;
    text-align: center;
    font-family: "Unica 77 LL TT";
    font-size: 35px;
    text-decoration: none;
    font-weight: bolder;
    line-height: normal;
    text-transform: uppercase;
    background-color: #95B122;
    padding: 10px;
}

.cta-white a {
    color: #95B122;
    text-align: center;
    font-family: "Unica 77 LL TT";
    font-size: 44px;
    font-weight: bolder;
    text-transform: uppercase;
    background: #FFF;
    text-decoration: none;
    padding: 10px 15px;
    position: relative;
    z-index: 4;
}

.cta-white {
    margin: 60px 0 40px 0;
    transition: transform 0.2s;
}

.cta-white:hover {
    transform: scale(1.05);
}

.ctab {
    margin-bottom: 60px;
    transition: transform 0.2s;
}

.ctab:hover {
    transform: scale(1.05);
}

.ctab a {
    font-size: 20px;
    color: #FFF;
    text-align: center;
    font-family: "Unica 77 LL TT";
    text-decoration: none;
    font-weight: bolder;
    line-height: normal;
    text-transform: uppercase;
    background-color: #95B122;
    padding: 7px;
}

.cta-img a {
    text-decoration: none;
    color: white;
    font-family: Arial;
    font-size: 22px;
    font-style: normal;
    background: rgba(77, 88, 49, 0.6);
    position: relative;
    bottom: 29px;
    margin: 0;
}

.cta-reservation {
    text-align: center;
    padding-bottom: 50px;
}

.cta {
    transition: transform 0.2s;
}

.cta:hover {
    transform: scale(1.05);
}

.cta-footer {
    margin-top: 50px;
}

/*#endregion FOOTER */





/*==============page accueil===============*/




.banner {
    background-image: url(/images/banner-bouctin.webp);
    background-size: cover;
    height: 1008px;
}

.banner .cta {
    margin-left: 20px;
}

.banner-text {
    padding: 150px 12px;
}

.chapeau {
    color: #000;
    font-family: "Unica 77 LL TT";
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    width: 70%;
    margin-top: 100px;
}



h1 {
    color: #FFF;
    margin-left: 20px;
    font-family: "Arial Black";
    font-size: 102px;
    font-style: normal;
    font-weight: 900;
    line-height: 104%;
    margin-top: 0;
}

h2 {
    color: #4D5831;
    font-family: "Arial Black";
    font-size: 62px;
    font-style: normal;
    font-weight: 900;
    margin: 0;
    margin-left: 12px;
    margin-bottom: 30px;
    padding-top: 20px;
}

h3 {
    color: #95B122;
    font-family: "Unica 77 LL TT";
    font-size: 24px;
    font-style: normal;
    font-weight: bolder;
}

h4 {
    font-family: Arial;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}

h5 {
    font-family: "Arial Black";
    font-size: 20px;
    font-weight: 900;
}

h6 {
    color: #FFF;
    font-family: "Unica 77 LL TT";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}

p {
    font-family: "Unica 77 LL TT";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

section.news-accueil img {
    width: 353px;
    height: auto;
}

section.news-accueil {
    margin-bottom: 70px;
}

.block-news {
    margin-top: 30px;
}

.news-clickbait {
    width: 75%;
}

.col-group {
    display: flex;
    justify-content: space-between;
}

.pensionnaires-accueil {
    background: #4D5831;
    position: relative;
    overflow: hidden;

}

.pensionnaires-accueil::before {
    content: "";
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Dissolve_Noise_Texture.png");
    height: 300%;
    width: 300%;
    position: absolute;
    left: -100%;
    right: -100%;
    top: 0;
    bottom: 0;
    opacity: 0.1;
    animation: animateGrain 8s steps(10) infinite;
}



.pensionnaires-accueil p {
    color: #FFF;
    font-family: "Unica 77 LL TT";
    font-size: 24px;
    font-weight: bolder;
    text-transform: uppercase;
}

.inner {
    max-width: 1400px;
    margin: 0 auto;
}



.pensionnaires-accueil {
    padding: 60px 0 60px 0;
}

.block-pensionnaire {
    position: relative;
}

.block-pensionnaire-text-accueil {
    position: absolute;
    bottom: 1rem;
    margin-left: 20px;
}

.cta-reservation p {
    margin: 70px 0 30px 0;
}

.separator {
    height: 5px;
    background-color: #95B122;
    max-width: 15rem;
    margin: 3rem auto;
}





/*==============fin page accueil===============*/







/*==============page actu===============*/


.actu .block-news img {
    width: 353px;
    height: 329px;
    object-fit: cover;
}

.actu .block-news {
    display: flex;
    flex-direction: row-reverse;
    text-align: right;

}

.reverse {
    display: flex;
    flex-direction: row-reverse;
    text-align: left;
}

.actu h2 {
    margin: 0;
    padding-top: 30px;
    padding-left: 12px;
}

.actu .news-clickbait {
    padding: 20px;
}



/*==============fin page actu ===============*/




/*==============page pensionnaire===============*/

.pensionnaires .inner img {
    width: 726px;
    height: 362px;
    object-fit: cover;
}

.pensionnaires h2 {
    margin-left: 12px;
}

.block-pensionnairex {
    display: flex;
    justify-content: space-between;
}

.block-pensionnaire-text {
    color: #FFF;
    font-family: "Unica 77 LL TT";
    font-size: 24px;
    font-weight: bolder;
    text-transform: uppercase;
    position: absolute;
}

.block-pensionnaire-imgx {
    width: 45%;
}

.xtrapstare {
    margin-left: 20px;
}

.descri {
    width: 45%;
}

.pensionnaires .block-pensionnaire {
    padding: 40px 0;
}

/*==============fin page pensionnaire===============*/





/*==============Page Concept===============*/

.concept p {
    width: 50%;
}



.cta-reservation p {
    width: 100%;
    text-align: center;
}

/*==============fin Page Concept===============*/

.flexall {
    display: flex;
    width: 1600px;
    margin: 0 auto;
    justify-content: space-between;
    flex-wrap: wrap;
}

.textealignier {
    width: 50%;
}

/*==============Page Activites===============*/

.activites p {
    width: 50%;
}

.activites h2 {
    margin-left: 12px;
}

.cta-reservation p {
    width: 100%;
    text-align: center;
}

/*==============Info Pratique===============*/

.inner .contact-info {
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-evenly;
    background-color: #4D5831;
    color: #FFF;


}

.restaurant {
    padding: 50px 0;
}

.tarifs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.xgames {
    max-width: 35%;
}

.linedelawild {
    width: 240px;
    height: 8px;
    background: #95B122;
}

.tarifs-individuels {
    width: 49%;
    padding: 20px;
}

.tarifs-famille {
    width: 49%;
    padding: 20px;
}

.tarifs-groupe {
    width: 49%;
    padding: 20px;
}

.paiment {
    width: 50%;
    padding: 20px;
}

.tarifs li {
    font-family: "Unica 77 LL TT";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.info-pratique .restaurant p {
    width: 50%;
}

.reservation-form {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 50px 0 100px;
}

.form-group {
    margin-bottom: 15px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.btn-reservation {
    background-color: #a0d218;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}






/*==============boutique===============*/




.boutique {
    text-align: center;
}

.boutique h1 {
    color: #4d5e34;
}

.boutique p {
    margin-bottom: 30px;
}

.products {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 50px 0;

}

.product {
    border: 1px solid #4d5e34;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    width: 500px;
}

.product img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.product h2 {
    color: #4d5e34;
    margin-bottom: 10px;
}

.product p {
    margin-bottom: 15px;
}














/*=====animation======*/

@keyframes animateGrain {

    0%,
    100% {
        transform: translate(0, 0)
    }

    10% {
        transform: translate(-5%, -10%)
    }

    20% {
        transform: translate(-15%, -20%)
    }

    30% {
        transform: translate(-5%, -10%)
    }

    40% {
        transform: translate(-15%, -20%)
    }

    50% {
        transform: translate(-5%, -10%)
    }

    60% {
        transform: translate(-15%, -20%)
    }

    70% {
        transform: translate(-5%, -10%)
    }

    80% {
        transform: translate(-15%, -20%)
    }

    90% {
        transform: translate(-5%, -10%)
    }

    100% {
        transform: translate(-15%, -20%)
    }

}