/* base ---------- */
h1 { font: 700 30px 'Playfair Display SC'; }

h2 { font: 400 36px 'Aboreto'; }

h3 { font: bold 80px 'Lora'; color:#BDBCB7; margin:0; }

p { font: 500  15px 'Raleway';}

span { font: 400 20px 'Oooh Baby'; color:#5a5e4f; }


@media screen and (min-width:1024px) {
    .mobile-version { display: none;}

}
/*------------- Section accueil --------------------------*/


.container-accueil{
    position:relative;
    top:0;
}

.bandeau_wave-home {
    width:100%;
    position:relative;
    z-index:-1000;    
    display: block;
    margin:auto;
    height:auto;

}

.logo_principal-home {
    position:absolute;
    z-index:1000;
    transform: translateX(-50%);
    top: clamp(-35px, -11vh, 32%);
    left: 50%;
    width: 45%;
    height:90%;
    display: block;
}


.title_accueil {
    display:block;
    margin:auto;
    width: 50%;
    position:relative;
    top:-15vh;
    text-align: center;
}




/*------------- Section introduction --------------------------*/

.container_introduction {
    display: flex;
    width:86%;
    gap:3%;
    justify-content:space-between;
    margin:auto;
    color:#14272D;
}

.introduction_content, .introduction_image {
    width:50%;
}

.button_vert {
    padding: 11px 20px;
    height:auto;
    font: normal 20px 'Oooh Baby';
    color:#BDBCB7;
    background-color: #3c473f;
    border-radius:20px;
}

.button_vert:hover {
    background-color: #BDBCB7;
    border:1px solid #3c473f;
    color:#14272D;
}

.partie_button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
}

.partie_button p {
    width: 61%;
}

.introduction_image img {
    width:90%;
    height:auto;
    border-radius:36px 36px 36px 0;
}

.code-computer2 {
    opacity:50%;
    box-shadow: 10px 10px 10px rgba(15, 22, 40, 0.45);
    position:relative;
    z-index:-1000;
    transform: translate(21px, -90%);
}




/*------------- Section offre : identité visuelle --------------------------*/

.bloc-gauche_section {
    position: relative;
    display: block;
    margin-bottom:300px;
}

.bloc-gauche_content {
    display: block;
    background-color: #5A5E4F;
    color:#BDBCB7;
    width:58%;
    padding:6px 70px 45px 40px;
}

.bloc-gauche_title {
    display:flex;
    width:fit-content;
    align-items: center;
    gap:30px;
}

.bloc-gauche_texte {
    width:80%;
}

.titre-entree { font-size:20px; }

.button_beige {
    padding: 11px 20px;
    height:auto;
    font: normal 20px 'Oooh Baby';
    color:#14272D;
    background-color: #BDBCB7;
    border-radius:20px;
    width:fit-content;
    box-shadow:4px 4px 4px #3c473f;
}

.button_beige:hover {
    background-color: #5A5E4F;
    border:1px solid #BDBCB7;
    color:#BDBCB7;
}

.button-offre01 {
    display: block;
    position:relative;
    top:15px;
    left:55%;
}

.dame-ordi {
    width:fit-content;
    height:410px;
    position:absolute;
    z-index:10000;
    top:30%;
    left:52%;
}




/*------------- Section offre : site internet --------------------------*/

.site-internet_section {
    position: relative;
    display: block;
    margin-bottom:300px;
}

.site-internet_content {
    display: block;
    background-color: #5A5E4F;
    color:#BDBCB7;
    width:58%;
    text-align: end;
    padding:6px 50px 45px 70px;
    margin:auto 0 auto auto;
}

.site-internet_title {
    display:flex;
    width:fit-content;
    align-items: center;
    gap:30px;
    margin:auto 0 auto auto;
}

.site-internet_texte {
    width:80%;
    margin:auto 0 auto auto;
}

.button-offre02 {
    display: block;
    margin:20px 55% auto auto;
}

.figma-ordi {
    width:fit-content;
    height:410px;
    position:absolute;
    z-index:10000;
    top:30%;
    right:55%;
}




/*------------- Section offre : supports print --------------------------*/

.powerpoint-ordi {
    width:30%;
    position:absolute;
    z-index:10000;
    height:90%;
    top:30%;
    object-fit:cover;
    left:52%;
}




/*------------- Section bandeau contact --------------------------*/

.contact-section {
    display: block;
    width:100%;
    height:auto;
    position:relative;
}

.flower-background {
    width:100vw;
    height:400px;
    display: block;
    opacity:50%;
    object-fit: cover;
}

.contact-content {
    display: block;
    margin:auto;
    width:40%;
    height:auto;
    padding:20px 40px 65px 40px;
    background-color: #BDBCB7;
    border-radius:50px 0 50px 50px;
    position:absolute;
    transform: translateX(-50%);
    top: 18%;
    left: 50%;
}

.span-contact {
    font-size: 45px;
}

.button-contact {
    position:relative;
    top:20px;
    left:70%;
}


@media screen and (min-width:767px) and (max-width:1023px) {
    /*------------- Section accueil --------------------------*/
    .logo_principal-home { height:95%; }
    .mobile-version { display: none; }

    /*------------- Section introduction --------------------------*/
    .container_introduction {
        width:90%;
        margin-bottom:100px;
    }
    
    .title_accueil {
        font-size:30px; 
        top:-10vh;
        width:66%;
    }

    p { font-size: 13px; }

    .introduction_content { width:56%; }

    .partie_button p{ width:55%;}

    .introduction_image { width:44%; }


    /*------------- Section offre : identité visuelle --------------------------*/
    .dame-ordi {
        height:85%;
        left:60%
    }

    .bloc-gauche_content{ width:65%; }


    /*------------- Section offre : site internet --------------------------*/
    .site-internet_content { width:65%; }

    .figma-ordi {
        height:85%;
        right:60%;
    }


    /*------------- Section offre : supports print --------------------------*/
    .powerpoint-ordi {
        width:35%;
        left:60%;
    }

    /*------------- Section contact bandeau --------------------------*/
    .contact-content {
        width: 55%;
        padding: 20px 40px 50px 40px;
    }

    .button-contact {
        top: 15px;
        left:65%;
    }
}



@media screen and (min-width:500px) and (max-width:766px) {
    .logo_principal-home { height:95%; }

}

@media screen and (max-width:766px) {
    h3 { font-size: 60px; }
    
    h2 { font-size: 28px; }

    /*------------- Section accueil --------------------------*/
    .logo_principal-home { width:50%; height:91%; }


    /*------------- Section introduction --------------------------*/
    .computer-version { display: none; }

    .container_introduction {
        width:90%;
        margin-bottom:100px;
        display: block;
    }
        
    .title_accueil {
        font-size:20px; 
        top:-5vh;
        width:66%;
    }

    p { font-size: 13px; }

    .introduction_content {
        width: 90%;
        margin: auto;
        margin-top: -150px;
    }

    .partie_button p{ 
        display:block;
        width:100%;
        margin:auto;
        margin-top:25px;
    }

    .partie_button { display: block; }

    .partie_button a {
        position: relative;
        top: 25px;
        left: 44%;    
    }

    .introduction_image {
        width:90%;
        margin:auto;
    }

    .code-computer { position:relative; }



    /*------------- Section offre : identité visuelle --------------------------*/
    .dame-ordi {
        height:60%;
        object-fit: cover;
        width:44%;
        left:52%;
        top:78%;
    }

    .button-offre01 { left:0; }

    .bloc-gauche_texte { width:100%; }

    .bloc-gauche_content{ 
        width:70%;
        padding: 6px 40px 45px 40px;
    }

    .titre-entree { font-size:18px; }


    /*------------- Section offre : site internet --------------------------*/
    .site-internet_content { 
        width:65%;
        padding:6px 40px 45px 40px; 
    }

    .site-internet_texte { width:100%; }

    .button-offre02 { margin: 25px 0 auto auto; }

    .figma-ordi {
        width: 45%;
        height: 54%;
        left:6%;
        top:78%;
    }


    /*------------- Section offre : supports print --------------------------*/
    .powerpoint-ordi {
        width:50%;
        height:50%;
        left:47%;
        top:78%;
    }

    /*------------- Section contact bandeau --------------------------*/
    .contact-content {
        width: 80%;
        padding: 20px 20px 50px 20px;
    }

    .button-contact {
        top: 15px;
        left:55%;
    }
}