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

.none{
    border: dotted 1px red;
}
*{
    margin: 0; padding: 0;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: #101a27;
    box-sizing: border-box;
    border: none;
}

.cW{ color: #ffffff; }
.cO{ color: #dd8533; }

.bcW{ background-color: #ffffff; }
.bcO{ background-color: #dd8533; }

html{ scroll-behavior: smooth; }
body{ min-height: 100vh; }

.dNone{ display: none; }
.dRow,.show{ display: flex; flex-direction: row; }
.dCol{ display: flex; flex-direction: column; }

.jcC{ justify-content: center; }
.jcE{ justify-content: end; }
.jcSB{ justify-content: space-between; }
.jcEV{ justify-content: space-evenly; }
.aiC{ align-items: center; }
.aiE { align-items: end; }
.aiS { align-items: start; }

.wrap{ flex-wrap: wrap; }

.gap1H{ gap: 0rem 1rem; }
.gap2H{ gap: 0rem 2rem; }
.gap3H{ gap: 0rem 3rem; }
.gap4H{ gap: 0rem 4rem; }
.gap05H{ gap: 0rem 0.5rem; }

.flx1{ flex: 1; }
.flx2{ flex: 2; }

.gap1V{ gap: 1rem 0rem; }
.gap2V{ gap: 2rem 0rem; }
.gap3V{ gap: 3rem 0rem; }
.gap4V{ gap: 4rem 0rem; }
.gap6V{ gap: 6rem 0rem; }
.gap05V{ gap: 0.5rem 0rem; }

.gap1{ gap: 1rem }
.gap2{ gap: 2rem }
.gap3{ gap: 3rem }
.gap4{ gap: 4rem }
.gap05{ gap: 0.5rem }

.f1{ font-size: 1.1rem; }
.f2{ font-size: 1.5rem; }
.f3{ font-size: 2rem; }
.f4{ font-size: 3rem; }
.f5{ font-size: 5rem; }

.taC{ text-align: center; }
.taJ{ text-align: justify; }

.fb{ font-weight: bold; }

.typeA{ margin: 3rem 0rem 3rem 0rem; padding: 0rem 6rem; }
.typeB{ margin: 3rem 0rem 3rem 0rem; padding: 6rem 6rem; }
.typeC{ margin: 0rem 0rem 3rem 0rem; padding: 6rem 6rem; }
.typeD{ margin: 0rem 0rem 3rem 0rem; padding: 0rem 6rem; }

.no_cover{
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center;
}
/* CSS */
.scroll_button{
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    height: clamp(1.8rem, 2.5vw, 3rem);
}
.hea_hea_01{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/facade.jpg');
    height: 80vh;
}
.button_hea{
    padding: 1rem 2rem;
}
.button_hea:hover{
    color:#101a27;
    transition: color 0.2s ease;
}
.nav_nav_01{
    padding: 1rem 8rem;
}
.nav_img_01{
    height: clamp(3rem, 8vw, 6rem);
}
.navH:hover{
    color: #dd8533;
    transition: color 0.2s ease;
}
.ind_art_01{
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
    padding: 3rem 2rem;
}
.ind_sec_04{
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)), url('../img/bck.jpg');
}
.iframe{
    width: 80vw;
}
.sec_img_01{
    aspect-ratio: 1 / 1;
    height: auto;
    width: clamp(10rem, 25vw, 30rem);
    object-fit: cover;
    display: block;
}
.sec_sec_01{
    height: 50rem;
    overflow-y: scroll;
}
.input1{
    background-color: transparent;
    border-bottom: solid #101a27 1px;
    resize: none;
    outline: none;
    cursor: pointer;
}
.input2{
    background-color: #101a27;
    padding: 0.5rem 2rem;
    cursor: pointer;
}
.input2:hover{
    background-color: #17263a;
    transition: background-color 0.2s ease;
}
.con_sec_01{
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
    width: clamp(45rem, 65vw, 80rem);
}
.con_sec_02{
    padding: 4rem;
}
footer{
    background-image: url('../img/footer.svg');
    padding: 10rem 6rem 1rem 6rem;
    margin-top: 4rem;
}
.foo_a_01 svg,.foo_a_01 img{
    fill: #ffffff;
    height: clamp(1.5rem, 2vw, 2.5rem);
    width: auto;
}
.foo_a_01:hover{
    color: #c05f04;
    transition: color 0.2s ease;
}
.foo_a_01:hover svg{
    fill:#c05f04;
    transition: fill 0.2s ease;
}
.foo_a_01{
    align-self: flex-start
}
video{
    width: 50vw;
    aspect-ratio: 16/9;
    height: auto;
}
/* MEDIA QUERIES */
/* Écran mobile */
@media (max-width: 768px) and (orientation: portrait) {
    *{ font-size: 0.9rem; }

    .typeA{ margin: 2rem 0rem 2rem 0rem; padding: 0rem 2rem; }
    .typeB{ margin: 2rem 0rem 2rem 0rem; padding: 2rem 2rem; }
    .typeC{ margin: 0rem 0rem 2rem 0rem; padding: 2rem 2rem; }
    .typeD{ margin: 0rem 0rem 2rem 0rem; padding: 0rem 2rem; }
    
    .f1{ font-size: 1rem; }
    .f2{ font-size: 1.1rem; }
    .f3{ font-size: 1.3rem; }
    .f4{ font-size: 1.5rem; }
    .f5{ font-size: 2.0rem; }
    .fb{ font-weight: bold; }

    .gapQu2V{ gap: 2rem 0rem; }

    .nav_nav_01{ padding: 1rem; position: relative; }

    .button_hea{ padding: 0.5rem 1rem; }

    .navQu{
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #ffffff;
        width: 100vw;
        gap: 2rem 0rem;
        padding: 1rem;
        box-sizing: border-box;
    }
    .dQuRow{ display: flex; flex-direction: row; }
    .dQuCol{ display: flex; flex-direction: column; }
    .dQuNone{ display: none; }

    .ovQu{
        overflow-y: scroll;
        height: 30rem;
    }
    .con_sec_01,.sec_img_01,.iframe{
        width: 90vw
    }
    .con_sec_02{
        padding: 2rem;
    }
    .footer{
        padding: 5rem 2rem 2rem 2rem;
    }
    video{
        width: 90vw;
        aspect-ratio: 16/9;
        height: auto;
    }
}