* {
    box-sizing: border-box;
    margin: 0px;
    scroll-behavior: smooth;
    font-size: 1.2em;
  }
body::-webkit-scrollbar {
    width: 12px;
}
body::-webkit-scrollbar-thumb {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    border-radius: 5px;
	background-color: var(--blue);
}
body::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #EEEEEE;
}

/* ------------------------------ 

Définitions des pâtes graphiques du site */

:root{
    --orange : #D66406;
    --white : #EEEEEE;
    --blue : #004AAD;
    --black : #282828;
    --blue-light : #B5C9D6;
    --orange-light : #E3D7CE;
    --font-title : 'Kodchasan', sans-serif;
    --font-text : 'Ubuntu', sans-serif;
    --size-title : calc(17px + 0.390625vw);
    --size-untitle : calc(16px + 0.390625vw);
    --size-text : calc(15px + 0.390625vw);
    --size-untext : calc(13px + 0.390625vw);
}

/* ------------------------------ */




h2 {
    font-family: var(--font-title);
    font-size:calc(17px + 0.390625vw);
}
h3 {
    font-family: var(--font-title);
}
p, a {
    font-family: var(--font-text);
    font-size: calc(15px + 0.390625vw);
}


/* ------------------------------ 

Accueil */

.menu a:hover {
    color: var(--orange);
}
header {
    display: flex;
    background-size: cover;
    background: center / cover no-repeat url(./image/accueil.webp) ;
    flex-direction: column;
    justify-content: space-between;
}
.accueil {
    width: 100%;
    position: absolute;
}
.menu {
    display: flex;
    justify-content: center;
    gap: 10vw;
}
.menu a{
    text-decoration: none;
    color: var(--black);
    font-family: var(--font-title);
    padding-top: 3%;
    transition: all 0.3s ease-in;
}
.menu h1 {
    position: relative;
    font-size: var(--size-title);
}
.savoir{
    color: var(--blue-light);
    background-color: var(--black);
    font-size: var(--size-text);
    padding: 1.5% 2.5%;
    width: calc(80px + 8vw);
    border-radius: 35px;
    text-align: center;
    text-decoration: none;
    font-family: var(--font-title);
    margin: auto;
    margin-top: 70vh;
    margin-bottom: 10vh;
    transition: 0.2s;
}
.savoir:hover {
    bottom: -69.8vh;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
    color: var(--blue-light);
}
/* ------------------------------ */

/* ------------------------------ 

Weekend */

#weekend {
    background-color: var(--blue-light);
    padding-top: 17%;
    padding-left: 5%;
    padding-right: 3%;
    overflow-x: hidden;
}
#weekend h3 {
    padding: 5%;
    text-align: center;
    font-family: var(--font-title);
    font-size: var(--size-untitle);
}
.text_wk {
    padding-top: 3%;
    padding-right: 5%;
    padding-left: 5%;
    line-height: 30px;
    text-align: justify;
}
.dates {
    display: flex;
    padding-bottom: 30px;
    justify-content: space-around;
}
.dates_scroll {
    justify-content: start;
    overflow-x: scroll;
    white-space: nowrap;
    gap: 30px;
    padding-bottom: 2%;
}
.dates:first-child {
    justify-content: start;
}
.date {
    max-width: 450px;
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: 2px 4px rgba(0, 0, 0, 0.075);
    width: 25vw;
    text-align: center;
    padding: 10px;
}
.date > img {
    border-radius: 20px;
    width: 100%;
    height: 45%;
}
.days {
    display: flex;
    align-items: center;
    padding: 4%;
    text-align: start;
}
.days > p {
    font-size: calc(10px + 0.390625vw);
    display: block;
    text-overflow: "...";
    padding-left: 0.6vw;
    margin: 0px;
}
.days img {
    width: 4vw;
}
.discover {
    border-radius: 30px;
    border: none;
    color: var(--blue-light);
    background-color: var(--black);
    font-family: var(--font-title);
    padding: 2% 6%; 
    font-size: var(--size-untext);
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease-in-out;
}
.discover:hover {
    box-shadow: 2px 5px 0 0 rgba(0,0,0, .50);
    top: -2px;
    left:-5px;
    color: var(--blue-light);
}
.div_inscription {
    text-align: center;
    padding: 5%;
}
.inscription {
    background-color: var(--orange);
    color: var(--blue-light);
    border:none;
    border-radius: 15px;
    padding: 1% 6%;
    text-decoration: none;
    font-size:var(--size-untitle);
    transition: 0.5s;
}
.inscription:hover{
    background-color: var(--blue);
    color: var(--blue-light);
}
.contact_wk {
    display: flex;
    align-items:first baseline;
}
.contact_wk img {
    width: 3vw;
}

/* ------------------------------ */


/* ------------------------------ 

Convictions */

.circle {
    width: 100%;
    height: 10vh;
    background-color: var(--blue-light);
    margin-bottom: 10%;
    border-radius: 0% 0% 100% 100%;
}
#convictions {
    background-color: var(--orange-light);
}
.convictions {
    padding-left: 5%;
    padding-right: 3%;
}
.convictions h3 {
    padding: 5% 0%;
    font-family: var(--font-title);
    font-size: var(--size-untitle);
    padding-bottom: 2%;
}
.desc_nous {
    display: flex;
    align-items: center;
    padding: 0% 5%;
    line-height: 30px;
    text-align: justify;
}
.desc_nous h3 {
    font-weight: normal;
    font-family: var(--font-text);
    font-size: var(--size-text);
}
.desc_nous li {
    text-align: justify;
    font-size: var(--size-text);
    line-height: 30px;
    margin-left: 2vw;
}
.desc_nous img{
    width: 30vw;
    padding: 5%;
}
.desc {
    display: flex;
    align-items: center;
    padding-right: 15%;
    line-height:30px;
    text-align: justify;
}
.desc img {
    width: 30vw;
    padding: 5%;
}
.boat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0% 5%;
    line-height: 30px;
    text-align: justify;
}
.boat img {
    width: 30vw;
    padding:5%;
    margin-right: 5%;
}

.circle2 {
    width: 100%;
    height: 10vh;
    background-color: var(--blue-light);
    border-radius: 80% 80% 0% 0%;
}

/* ------------------------------ */

/* ------------------------------ 

Nous */

.voir_plusH {
    display:none;
    font-size: var(--size-title);
    font-family: var(--font-title);
}
.voir_plusB {
    display: none;
    font-size: var(--size-title);
    font-family: var(--font-title);
}

#nous {
    background-color: var(--blue-light);
    padding-left: 5%;
    padding-right: 3%;
}
.div_nous {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 5%;
}
.img_nous {
    width: 30%;
    height: 100%;
}
.txt_nous {
    padding: 5%;
    line-height: 30px;
    text-align: justify;
}
.pres_chacun {
    display: flex;
    padding: 0% 5%;
}
.pres_chacun h3 {
    text-align: center;
    font-size: var(--size-untitle);
}
.img_chacun {
    width: 25vw;
    padding: 5%;
}
.pres_chacun p {
    padding: 10%;
    line-height: 30px;
    text-align: justify;
}
/* ------------------------------ */


/* ------------------------------ 

Contact */

#contact {
    background-color: var(--orange-light);
    padding-bottom: 6%;
}
.contact {
    padding-left: 2%;
    padding-right: 2%;
    text-align: center;
    width: 60vw;
    margin: auto;
}
.form_inscription h3 {
    font-size: var(--size-title);
}
.nompnom {
    display: flex;
    justify-content: space-around;
}
.nom  {
    width: 35%;
}
.pnom {
    width: 35%;
}
.mail, .date_weekend, .message {
    width:85%;
}
form div {
    margin: auto;
}
.webinaire {
    border-radius: 20px;
    margin-top: 3vw;
    width: 40vw;
    height: 80vh;
}
.contact div > input,textarea {
    width: 100%;
    background-color: var(--white);
    border:none;
    border-radius: 15px;
    padding: 1% 6%;
    text-decoration: none;
    font-size: var(--size-text);
    font-style: var(--font-text);
    transition: 0.5s;
    margin-bottom: 4vh;
    margin-top: 0vh;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}
.contact div > input:focus::placeholder , textarea:focus::placeholder{
    opacity: 0;
    transition: opacity .5s;
}
.faq {
    padding: 0% 5%;
}
.faqs{
    text-decoration: none;
    color: var(--blue);
    font-size: var(--size-title);
}
.faq h4 {
    text-align: center;
    padding-top: 5%;
    font-family: var(--font-title);
    font-size: var(--size-text);
}
.faq p {
    font-size:var(--size-title) ;
    padding-top: 1vh;
}
.faq ul {
    font-size: var(--size-untext);
    margin-top: 1vh;
    padding-left: 5%;
    font-family: var(--font-text);
}
.contact_autres {
    justify-content: center;
}
/* ------------------------------ */

/* ------------------------------ 

Footer */

footer {
    background-color: var(--blue-light);
    padding: 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-text);
}
footer a, footer p {
    font-size: var(--size-untext) ;
}
.rsx_scx {
    width: 15vw;
    align-items: center;
    display: flex;
    justify-content: center;
}
.rsx_scx img{
    width: 2.5vw;
}
.rsx_scx a {
    padding-left:8%;
}
.cp {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0px;
}
.cp img {
    width: 2vw;
    padding: 1%;
}
footer a {
    text-decoration: none;
    color: var(--black);
}

/* ------------------------------ */



/* ------------------------------ 

Responsive */
@media screen and (max-width: 1080px) {
    .dates {
        justify-content: start;
        height: auto;
        overflow-x: scroll;
        white-space: nowrap;
        gap: 30px;
    }
    .date {
        height: calc(400px + 1.6vh);
        width: calc(250px + 1.590625vw);
    }
}
@media screen and (max-width: 975px) {
    header {
        background: center / cover no-repeat url(./image/accueil_tablet.webp) ;
    }
    .savoir {
        margin-top: 50vh;
        margin-bottom: 5vh;
    }
}
@media screen and (max-width: 880px) {
    .dates {
        gap: 10px;
    }
    .date {
        height: calc(350px + 1.6vh);
    }
    .days > p {
        margin-right: 5%;
    }
    .webinaire {
        width: 80vw;
    }
}
@media screen and (max-width: 700px) {
    .date > img {
        width: 200px;
    }
    .date {
        height: calc(300px + 1.6vh);
        width: calc(350px + 1.590625vw);
    }
    .contact_wk p {
        padding: 5%;
    }
    .desc_nous, .boat {
        flex-direction: column-reverse;
    }
    .pres_chacun p {
        padding: 0%;
    }
    .pres_chacun {
        padding: 0% 0% 0% 5%;
    }
    .desc {
        flex-direction: column;
        padding: 0% 5%;
    }
    .desc p, .boat p {
        padding: 5% 0%;
    }
    .desc_nous img, .boat img, .desc img {
        padding: 0px;
        margin-top: 10px;
        margin-right: 0px;
    }
    .div_nous {
        display: block;
        text-align: center;
    }
    .img_nous {
        width: 40%;
    }
    .display_n {
        display: none;
    }
    .display_y {
        display: block;
    }
    .width_click {
        width: 30vw;
    }
    .width_noclick {
        width: 20vw;
    }
    .nom,.pnom {
        width: 45%;
    }
    .mail, .date_weekend, .message {
        width: 95%;
    }
    .form_inscription {
        font-size: 0.5em;
    }
}
@media screen and (max-width: 550px) {
    .menu {
        gap: 2vw;
    }
    ::-webkit-scrollbar {
        display: none;
    }
    .date {
        height: calc(250px + 2vh);
    }
    footer {
        display: block;
        text-align: center;
    }
    .rsx_scx {
        margin: auto;
    }
    .rsx_scx a {
        padding: 5%;
    }
    .rsx_scx img {
        width: 4vw;
    }
    }
@media screen and (max-width: 525px) {
    .savoir {
        margin-top: 40vh;
    }
    }