@import url("global.css");

header {
    background-image: url('../ressources/images/welcome_page/welcome.jpg');
    background-position: 0 70%;
    background-size: 100%;
    height: 100vh;
    object-fit: cover;
}

.front-header {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 3%;
    background-color: #00000080;
}

.logo-header {
    transition: 0.1s ease-in;
}

.logo-header:hover {
    scale: 1.05;
}

.welcome-text-header h1{
    text-decoration: none;
}

.welcome-text-header a {
    border: solid var(--button-border);
    border-radius: 5%;
    background-color: var(--button-back);
    color: var(--welcome-text-more-text);
    padding: 5px 10px;
    font-size: 1.3em;
    text-decoration: none;
}

#main-pres {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*background-image: url("../ressources/images/welcome_page/frette_guitare.png");*/
    
    background-size: 40%;
}

.main-pres-text img {
    height: 150px;
    rotate: 55deg;
}

.main-pres-text{
    display: flex;
    background-color: var(--text-back-white);
    color: black;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 50vw;
    gap: 10%;
}

#main-selection {
    display: flex;
    flex-direction: column;
    height: fit-content;
    background: url("../ressources/images/background.jpg"), #FFFFFF30;
    background-blend-mode: lighten;
    background-size: 100%;
    background-position: 0% 70%;
    color: aliceblue;
    align-items: center;
    padding: 25px 0;
    gap: 20px;
}


#main-selection h1{
    text-align: center;
}

.main-selection-modele1 {
    display: flex;
    flex-direction: row;
    width: 70vw;
    height: fit-content;
}

.main-selection-modele1 img{
    object-fit: cover;
    width: 30vw;
    border-radius: 5px;
}

.selection-text {
    display: flex;
    flex-direction: column;
    /*background-color: var(--selection-back);*/
    background-color: #0000009f;
    border-radius: 5px;
    width: 60%;
    height: fit-content;
    margin-top: 10%;
    padding: 3% 5%;
    
}

.main-selection-image2-mobile
{
    display: none;
}

#services {
    display: flex;
    flex-direction: row;
    color: aliceblue;
    align-items: center;
    justify-content: center;
    padding: 3% 0;
    gap: 20px;
}

.service-card {
    object-fit: cover;
    display: flex;
    flex-direction: column;
    width: 20%;
    height: 50vh;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-blend-mode: color;
    transition: all 125ms ease-in-out;
    border-radius: 5px;
    font-family: "Stack Sans Notch", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    color: aliceblue;
}

.service-card:hover {
    scale: 1.075;
}

.service1 {
    background: url("../ressources/images/welcome_page/fabrication_back.JPEG"), #00000060;
    background-position: 50%;
    background-size: 140%;
}

.service2 {
    background: url("../ressources/images/welcome_page/renovation_back.jpg"), #00000060;
    background-position: 50%;
    background-size: 100%;
}

.service3 {
    background: url("../ressources/images/welcome_page/vente_back.JPEG"), #00000060;
    background-position: 50%;
    background-size: 100%;
}



/* Section Nous Contacter */

#nous-contacter {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("../ressources/images/welcome_page/nous-contacter_back.JPEG")/*, #00000060*/;
    background-blend-mode: color;
    background-position: 50% 55%;
    background-size: 100%;
    height: 60vh;
    
}

.nous-contacter-cont {
    display: flex;
    flex-direction: column;
    /*background-color: #00000060;*/
    color: black;
    text-align: center;
    width: 60vw;
    padding: 5% 10%;
    margin-top: 6%;
    gap: 20px;
    align-items: center;
    border-radius: 5px;
    color: aliceblue;
    text-align: justify;
}

.nous-contacter-cont a {
    width: fit-content;
    height: fit-content;
    border: solid var(--button-border);
    border-radius: 5%;
    background-color: var(--button-back);
    color: var(--welcome-text-more-text);
    padding: 5px 10px;
    text-decoration: none;
    text-align: center;
}

footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 9%;
    padding: 3% 0;
}

.socials {
    display: flex;
    flex-direction: row;
    gap: 30px;
    
}

.socials a img{
    width: 40px;
}




/* RESPONSIVE SI LARGEUR ECRAN >= 800 pixels */

@media screen and (min-width: 800px){
    
    /* Section Principal */
    
    .logo-header {
        width: 400px;
    }

    .welcome-text-header {
        display: flex;
        flex-direction: column;
        width: fit-content;
        justify-content: center;
        text-align: center;
        align-items: center;
        
    }

    .welcome-text-header h1 {
        color: var(--welcome-text-title-color);
        font-size: 3.5em;
        margin-bottom: 0px;
    }

    .welcome-text-header p {
        color: white;
        width: 60%;
        margin-top: 0px;
        font-size: 1.7em;
    }

    /* Section Quote */

    #main-pres {
        height: fit-content;
        align-items: center;
        justify-content: center;
        padding: 4% 0;
    }

    .main-pres-text{
        font-size: 1.2em;
        padding: 3% 12%;
    }

    /* Section Selection du Luthier */

    .selection-text h3{
        font-size: 2.5em;
        margin: 0px;
        text-align: center;
    }

    .selection-text p {
        font-size: 1.2em;
        text-align: justify;
        text-justify: distribute-all-lines;
        margin: 7% 5%;
    }

    /* Section Services */

    .service-card {
        font-size: 0.8vw;
    }

    .service-card {
        width: 20%;
        height: 50vh;

    }

    /* Section Nous Contacter */

    #nous-contacter {
        background-position: 50% 55%;
        background-size: 100%;
        height: 60vh;
        
    }

    .nous-contacter-cont{
        width: 60vw;
        padding: 5% 10%;
        gap: 20px;
        font-size: 1.1em;
    }

    .nous-contacter-cont a {
        padding: 5px 10px;
        font-size: 1em;
    }

    /* Footer */

    footer {
        gap: 9%;
        padding: 3% 0;
        background-color: rgb(238, 238, 238);
    }

    .socials {
        gap: 30px;
        
    }

    .socials a img{
        width: 40px;
    }

}

/* RESPONSIVE SI LARGEUR ECRAN > 600 pixels < 800 pixels */
@media screen and (max-width: 800px) and (min-width: 600px){
    
    /* Section Principal */

    header {
        background-position: 0 70%;
        background-size: 120%;
        height: 60vh;
    }
    
    .logo-header {
        width: 30%;
        margin-left: 5%;
    }

    .welcome-text-header {
        display: flex;
        flex-direction: column;
        width: 60%;
        justify-content: center;
        text-align: center;
        align-items: center;
        margin-top: 80px;
    }

    .welcome-text-header h1 {
        color: var(--welcome-text-title-color);
        font-size: 2.5em;
        margin-bottom: 50px;
    }

    .welcome-text-header p {
        color: white;
        width: 50%;
        margin-top: 0px;
        font-size: 1.8em;
    }

    /* Section Quote */

    #main-pres {
        height: fit-content;
        align-items: center;
        justify-content: center;
        padding: 5% 0;
    }

    .main-pres-text{
        font-size: 1.1em;
        padding: 0 12%;
    }

    /* Section Selection du Luthier */

    .selection-text {
        height: fit-content;
    }

    .selection-text h3{
        font-size: 2em;
        text-align: center;
    }

    .selection-text p {
        font-size: 0.8em;
        text-align: justify;
        text-justify: distribute-all-lines;
    }
    .main-selection-modele1 img{
        object-fit: cover;
        height: 60vh;
        border-radius: 5px;
    }

    /* Section Services */

    .service-card {
        font-size: 1.8vw;
    }

    .service-card {
        width: 25%;
        height: 30vh;

    }

    /* Section Nous Contacter */

    #nous-contacter {
        background-position: 50% 55%;
        background-size: 100%;
        height: 60vh;
        
    }

    .nous-contacter-cont{
        width: 60vw;
        padding: 5% 10%;
        gap: 20px;
        font-size: 1em;
    }

    .nous-contacter-cont a {
        padding: 5px 10px;
        font-size: 1em;
    }

    /* Footer */

    footer {
        gap: 3%;
        padding: 3% 0;
    }

    .google-map {
        width: 300px;
        height: 200px;
    }

    footer p {
        font-size: 1.5vw;
        overflow: hidden;
    }

    .socials {
        gap: 10px;
        
    }

    .socials a img{
        width: 30px;
    }

}

/* RESPONSIVE SI LARGEUR ECRAN < 600 pixels */
@media screen and (max-width: 600px){
    

    /* Section Principal */
    header {
        background-image: url('../ressources/images/welcome_page/welcome.jpg');
        background-size: 200%;
    }

    .front-header {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .logo-header {
        width: 70%;
        
    }

    .welcome-text-header {
        display: flex;
        flex-direction: column;
        width: 70%;
        justify-content: center;
        text-align: center;
        align-items: center;

    }

    .welcome-text-header h1 {
        color: var(--welcome-text-title-color);
        font-size: 1.8em;
        margin-bottom: 0px;
        margin-top: 5px;
    }

    .welcome-text-header p {
        color: var(--welcome-text-desc-color);
        width: 80%;
        margin-top: 0px;
        font-size: 1.5em;
    }

    .welcome-text-header a {
        border: solid var(--button-border);
        border-radius: 5%;
        background-color: var(--button-back);
        color: var(--welcome-text-more-text);
        padding: 5px 10px;
        font-size: 1em;
    }

    /* Section Quote */

    #main-pres {
        height: fit-content;
        align-items: center;
        justify-content: center;
        padding: 5% 0;
    }

    .main-pres-text{
        font-size: 1em;
        padding: 5% 15%;
        flex-direction: column-reverse;
        align-items: center;
    }

    .main-pres-text img {
        width: 40vw;
        object-fit: contain;
        
    }

    /* Section Selection du Luthier */

    #main-selection {
        flex-direction: column;
        gap: 50px;
        background-size: 120%;
        background-position: 50%;
    }

    .main-selection-modele1 {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: fit-content;
    }

    .selection-text {
        height: fit-content;
        width: 80vw;
        margin: 0;
    }

    .selection-text h3{
        font-size: 1.8em;
        text-align: center;
    }

    .selection-text p {
        font-size: 0.8em;
        text-align: justify;
        text-justify: distribute-all-lines;
    }
    .main-selection-modele1 img{
        object-fit: cover;
        width: 70%;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    .main-selection-image2 {
        display: none;
    }

    .main-selection-image2-mobile {
        display: block;
    }

    /* Section Services */

    #services {
        flex-direction: column;
        gap: 30px;
        padding: 10% 0;
    }

    .service-card {
        font-size: 3vw;
    }

    .service-card {
        width: 80%;
        height: 50vh;

    }

    /* Section Nous Contacter */

    #nous-contacter {
        background-position: 50% 55%;
        background-size: 150%;
        height: 60vh;
        
    }

    .nous-contacter-cont{
        width: 60vw;
        padding: 5% 10%;
        gap: 20px;
        font-size: 1em;
        margin-top: 20%;
    }

    .nous-contacter-cont a {
        padding: 5px 10px;
        font-size: 1.2em;
    }

    /* Footer */

    footer {
        flex-direction: column;
        gap: 50px;
        padding: 5% 0;
        height: fit-content;
    }

    .google-map {
        width: 300px;
        height: 200px;
    }

    footer p {
        font-size: 4vw;
        overflow: hidden;
    }

    .socials {
        gap: 30px;
        
    }

    .socials a img{
        width: 50px;
    }

}