@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

html {scroll-behavior: smooth;}
body {
    margin: 0;
    font-family: Quicksand, Arial, Helvetica, sans-serif;
    color: #272727;
}
ul {
    list-style: none;
    padding: 0;
    text-align: center;
    margin: 1.5rem 0 0 0;
}
a {
    text-decoration: none;
    color: white;
    padding: 1rem 0;
    margin-bottom: 0.2rem;
}
img {
    height: auto;
    width: 100%;
}

p {
    font-size: 1.1rem;
    line-height: 1.8rem;
}

/* ------------- HEADER ------------- */
.t {
    position: relative;
    cursor: pointer;
}
.t::after {
    content: '';
    position: absolute;
    left: 0; bottom: -3px;
    height: 3px;
    background-color: white;
    width: 0;
    transition: width .4s;
}
.t:hover::after {width: 100%;}

header {
    z-index: 3;
    background-color: #5ab2a8;
    box-shadow: rgba(0, 0, 0, 0.308) 0 5px 10px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: .8rem 1.5rem;
}
header .lien-logo {padding: 0; margin: 0;}

.bouton i {
    color: white;
    font-size: 2rem;
}
nav {
    display: none;
    width: 100%;
}
.menu li {
    display: flex;
    justify-content: center;
}

.menu ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ccc;
    z-index: 99;
  }

  .menu ul li {
    display: block;
  }

  .menu ul li a {
    padding: 10px 15px;
    color: #272727  ;
    text-decoration: none;
  }

  .menu ul li a:hover{
    background-color: #5ab2a8;
    color: white;
  }

.menu li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}

.menu li:hover > ul {
    display: block;
  }

.menu li:hover a {font-weight: bold;}
/* ----- Media ----- */
@media screen and (min-width: 768px) {
    header .logo {width: 150px; margin-left: 2rem;}
    .bouton i {display: none;}
    nav {display: flex; width: 50%; justify-content: flex-end;}
    .menu {display: flex; width: 100%; justify-content: space-around; margin-top: 0;}
    .menu li a {padding: .4rem 2rem;}
}


/* ------------- HEADER ------------- */




/* ------------- Banière ------------- */
.ban {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    overflow: hidden;
    width: 100%;
}
.ban .grosTitre {
    position: absolute;
    color: white;
    font-size: 2rem;
    background-color: #2727276c;
    padding: .8rem .3rem;
    text-align: center;
    border-radius: 10px;
}
.ban .grosTitre span {
    display: block;
    font-size: 1rem;
}
.ban .grosTitre span:last-child {font-size: 1rem;}

.ban .filter {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.151);
}
.ban img {
    position: fixed;
    z-index: -1;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 60vh;
}

.scrl {
    position: absolute;
    bottom: .5rem;
    font-size: 3rem;
    -webkit-animation: scrl 600ms ease-in-out 1s infinite alternate;
    animation: scrl 600ms ease-in-out 1s infinite alternate;
}
.ban .scrl a {color: #272727;}
.ban .scrl a i {text-shadow: white 0 0 10px;}
@-webkit-keyframes scrl{
    from{ bottom: 1rem; }
    to{ bottom: 1.5rem; }
}
@keyframes scrl{
    from{ bottom: .5rem; }
    to{ bottom: 1.5rem; }
}
/* ----- Media ----- */
@media screen and (min-width: 768px) {
    .ban {height: 500px}
    .ban img {height: 100vh}
    .ban .grosTitre {
        font-size: 5rem;
        line-height: 6rem;
    }
    .ban .grosTitre span {font-size: 4rem;}
    .ban .grosTitre span:last-child {font-size: 2rem;}
}
/* ------------- Banière ------------- */




/* ------------- Contenu Main ------------- */
main .back {
    position: relative;
    z-index: 2;
    transition: all .5s;
}
main .back::after {
    display: none;
    content: "";
    bottom: -10px; left: -16px;
    height: 95%;
    width: 95%;
    position: absolute;
    z-index: -1;
    background-color: #DE5D18;
    border-radius: 10px;
    box-shadow: #46464600 -2px 0 10px;
    transition: all .5s;
}
main .back:hover {
    transform: translate(3px, -3px);
}
main .back:hover::after {
    box-shadow: #4646463f -2px 0 10px;
    transform: translate(-6px, 6px);
}
/* ----- Media ----- */
@media screen and (min-width: 768px) {
    main .back::after {
        display: block;
    }
}



main {
    /* height: 100vh; */
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.308) 0 -5px 10px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}
main h1 {
    margin: 0 0 0rem 0;
    padding: 1rem 0 2rem 0;
    text-align: center;
    font-size: 2.5rem;
}
/* ----- Media ----- */
@media screen and (min-width: 768px) {
    main h1 {font-size: 4rem;}
}

section {
    width: 90%;
    max-width: 1440px;
    margin: auto;
    margin-bottom: 2rem;
    /* flex-wrap: wrap; */
}
section h2 {
    width: 100%;
    font-size: 1.8rem;
}
section h3 {
    color: #DE5D18;
    margin: 0 0 0 1rem;
    text-decoration: underline;
    font-size: 1.4rem;
}
section h4 {
    font-size: 1.1rem;
    margin: 0 0 0 2rem;
    color: #3e8a81;
    margin-top: 2rem;
}

main img {
    border-radius: 10px;
    box-shadow: #46464600 -2px 2px 10px;
    transition: all .5s;
}
main .back:hover img {
    box-shadow: #46464674 -2px 2px 10px;
}
main .rv {flex-direction: column;}
/* main .texte {} */
main .texte a {color: #3e8a81; font-weight: bold;}
main .texte a:hover {text-decoration: underline;}
main .texte ul, main .txt-img ul {
    text-align: start;
    padding: 0 0 0 1rem;
}
main .texte ul li, main .txt-img ul li {list-style: disc;}
main .texte .more {
    padding: 0 0 0 1rem;
    border-left: #5ab2a8 2px solid;
}
main .txt-img, main .two-img {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
}
main .txt-img .txt {
    margin: 0 0 0 0;
    min-width: 40%;
}
main .rv .txt {margin: 0 0 0 0;}
/* main .txt-img .img {} */
/* main .two-img {} */
main .two-img div {width: 90%; margin: auto; margin-bottom: 2rem;}
main .image {padding-bottom: 1rem;}
main .image .single-img {
    width: 90%;
    margin: auto;
}
main figcaption {color: white;}
/* ----- Media ----- */
@media screen and (min-width: 768px) {
    section {width: 80%;}
    main .txt-img, main .two-img {flex-direction: row;}
    main .txt-img .txt {margin: 0 4rem 0 0;}
    main .rv {flex-direction: row-reverse;}
    main .rv .txt {margin: 0 0 0 4rem;}
    main .two-img div {width: 46%;}
    main .image .single-img {width: 60%;}
}
/* ------------- Contenu Main ------------- */



.ratio, .ratio20, .ratio30, .ratio40, .ratio50, .ratio75, .ratio1, .ratio3, .ratio115, .ratio2 {width: 90%;}
/* ----- Media ----- */
@media screen and (min-width: 768px) {
    .ratio20 {width: 20% !important;}
    .ratio {width: 25% !important;}
    .ratio30 {width: 30% !important;}
    .ratio40 {width: 40% !important;}
    .ratio50 {width: 50% !important;}
    .ratio75 {width: 75% !important;}
    .ratio1 {width: 100% !important;}
    .ratio115 {width: 150% !important;}
    .ratio2 {width: 200% !important;}
    .ratio3 {width: 300% !important;}
}
.mrgn { margin-bottom: 2rem;}


/* ------------- CTA - btn ------------- */
.cta-btn {
    border-radius: 100px;
    border: #5ab2a8 5px solid;
    background-color: #5ab2a8;
    box-shadow: rgba(0, 0, 0, 0) -2px 0 10px;
    padding: 1rem 2rem;
    margin: 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-weight: bold;
    width: 60%;
    transition: all .5s;
}
.cta-btn p {margin: 0;}
.cta-btn svg {
    fill: white;
    width: 1.1rem;
    margin-right: 0;
    transition: all .5s;
}
.cta-btn:hover {
    background-color: rgba(255, 255, 255, 0);
    box-shadow: rgba(0, 0, 0, 0.295) 0 5px 10px;
    color: #5ab2a8;
    transform: translate(2px, -2px);
}
.cta-btn:hover svg {
    fill: #5ab2a8;
    margin-right: -0.5rem;
}
/* ----- Media ----- */
@media screen and (min-width: 768px) {
    .cta-btn {width: 40%;}
}


footer {
    box-shadow: inset rgba(0, 0, 0, 0.308) 0 5px 10px;
    background-color: #5ab2a8;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    flex-direction: column;
    min-height: 40vh;
    padding: 1rem 0;
}
.footer {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}
.footer ul {margin: .5rem 0;}
.footer li {margin: 1rem;}
.footer .reseaux ul {
    display: flex;
}

/* footer .footer   */

footer .legal {
    color: white;
    margin-top: 2rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
footer .legal a {
    margin: 0 .5rem;
    padding: .5rem 0;
}
/* ----- Media ----- */
@media screen and (min-width: 768px) {
    .footer, footer .legal {
        flex-direction: row;
    }
}


.mention-main h2 {color: #3e8a81;}
.mention-main .texte p {margin: .5rem 0;}

/* ---------  HOVER HEADER  */
.links {position: relative;}

.link-block {
    display: none;
    position: absolute;
    /* height: 50px; width: 50px; */
    background-color: red;
    z-index: 3;
    bottom: -100px;
}
.links:hover .link-block {
    /* display: flex !important; */
}
.links .link-block ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: .5rem;
}
.links .link-block ul li {padding: .2rem;}
.links .link-block ul li a {margin: 0; padding: 0;}

.nav-inner-block {
    /* border: red solid 2px; */
    background-color: #5ab2a846;
    padding:  2rem 0;
    border-radius: 10px;
    min-height: 10px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
}
.nav-inner-block a {
    /* margin: 1rem 0; */
    /* padding: 0; */
    /* height: 20px; */
    /* width: 40px; */
    /* background-color: #272727; */
}

.nav-inner-block .cta-btn {width: 50%;}
/* ----- Media ----- */
@media screen and (min-width: 768px) {
    .nav-inner-block {flex-direction: row;}
    .nav-inner-block .cta-btn {width: 20%;}
}


span .centre {
    /* text-align: center; */
    font-size: 1.2rem;
    padding: 0 0 0 1rem;
    margin-bottom: .2rem;
}

.bcgg {
    background-color: #5ab2a831;
    border-radius: 10px;
    padding: .5rem;
}
.bcgg h3 {
    margin-top: 0;
    text-align: center;
    text-decoration: none;
    font-size: 1.5rem;
}
.bcgg span {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding-bottom: 1rem;
}
.bcgg span p {font-size: 1.2rem; margin: .8rem 0;}
.bcgg span a {
    font-size: 1.2rem;
    color: #3e8a81;
    text-transform: uppercase;
    text-decoration: underline;
    font-weight: bold;
    padding: 0; margin: 0;
}
.bcgg span a:hover {text-decoration: overline;}
.ssv .back::after {background-color: #3e8a81;}
.ssv h3 {color: #3e8a81; margin-bottom: 1rem;}
/* ----- Media ----- */
@media screen and (min-width: 768px) {
    .bcgg {padding: 3rem;}
    .bcgg .txt-img {align-items: center;}
}


.bcup {
    color: white;
    position: fixed;
    padding: 0;
    z-index: 50;
    bottom: 10%;
    right: 15px;
    height: 45px;
    width: 45px;
    background-color: rgba(222, 93, 24, 0.5);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bcup:hover {
    background-color: rgb(222, 93, 24);
} 
.bcup svg {
    height: auto;
    width: 75%;
}


.mention-main h2 {color: #3e8a81;}