/*----- Styles Généraux -----*/

@font-face {
    font-family: lilita-one;
    src: url(/assets/fonts/Lilita_One/LilitaOne-Regular.ttf);
  }

@font-face {
    font-family: besley;
    src: url(/assets/fonts/Besley/Besley-VariableFont_wght.ttf);
}

h1 { 
    font-size: 70px; 
    font-weight: 900; 
    color: var(--bs-dark); 
    }

h2 { 
    font-size: 60px;
    font-family: lilita-one;
    color: var(--bs-primary); 
}

h3 { 
    font-size: 30px; 
    font-family: besley;
    color: var(--bs-light); 
    }

h4 { 
    font-size: 28px; 
    font-family: lilita-one;
    color: var(--bs-dark); 
}

h5 { 
    font-size: 24px; 
    font-family: besley;
    color: var(--bs-primary); 
    }
 
h6 { 
    font-size: 20px; 
    font-family: lilita-one;
    color: var(--bs-primary); 
}

p {
    font-family: besley;
}

main{
    height: 120%;
} 

html {
    overflow-x: hidden;
}

/*----- Navigation -----*/

nav{
    background-color: var(--bs-primary);
    width: 100vw;
}

nav .nav-item:hover {
    transform: scale(1.1);
}

nav .nav-item {
    margin-right: 15px;
}


/*----- Section Hero -----*/

.sectionHero h2 {
    color: var(--bs-dark);
    letter-spacing: 15px;
}

.sectionHero h3 {
    color: var(--bs-dark);
    letter-spacing: 10px;
}

.sectionHero img{
    width: auto;
    height: 500px;
    object-fit: contain;
    object-position: 50% 15%;
    border-radius: 80% 80% 0 0;
}

.contact-hero {
    background-color: var(--bs-primary);
    border-radius: 15px;
    width: 100%;
}

/*----- Section types d'oeuves -----*/

.sectionTypesOeuvres {
    background-color: var(--bs-light);
}

.sectionTypesOeuvres .card-1 {
    background-color: var(--bs-primary);
}

.sectionTypesOeuvres .card-2 {
    background-color: var(--bs-secondary);
}

.sectionTypesOeuvres .card-3 {
    background-color: var(--bs-info);
}

.sectionTypesOeuvres .card-4 {
    background-color: #9BA4B5;
}

.sectionTypesOeuvres img, video {
    height: 165px;
    width: auto;
    object-fit: cover;
    object-position: 100% 50%;}


/*----- Section citation -----*/

.sectionCitation {
    background-color: var(--bs-primary);
}

.sectionCitation h1 {
    font-size: 40px;
}


/*----- Section footer -----*/

footer .logo{
    width: 50px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border: 2px solid black;
    border-radius: 50%;
}

footer a img:hover {
    transform: scale(1.06);
}

/*----- Bande colorée -----*/

.bande-coloree-medium {
    width: 100%;
    height: 100px;
    background-image: url(../assets/images/bande_colore_150px_02.jpg);
    background-position: 100% 40%;
    background-size: cover;
}

/*----- Distribution des taches pour les projets -----*/

.distribution-taches {
    border-radius: 30px;
    border: 2px solid black;
    width: 100%;
}

.distribution-taches p {
    margin: 0;
}

/*----- Media query -----*/

@media screen and (max-width: 1200px) { 
    .sectionHero img{
        width: auto;
        height: 400px;
        object-fit: contain;
        object-position: 50% 15%;
        border-radius: 80% 80% 0 0;
    }
}

@media screen and (max-width: 992px) { 
    .sectionHero img{
        width: auto;
        height: 400px;
        object-fit: contain;
        object-position: 50% 15%;
        border-radius: 80% 80% 0 0;
    }
}

@media screen and (max-width: 768px) { 
    .contact-hero {
        width: 95%;
    }
}

@media screen and (max-width: 576px) { 
    h2 {
        font-size: 45px;
    }

    h3 {
        font-size: 25px;
    }

    h1 {
        font-size: 50px;
    }

    h4 {
        font-size: 22px;
    }

    .sectionHero h2 {
        letter-spacing: 10px;
    }

    .sectionHero h3 {
        letter-spacing: 8px;
    }

    .sectionHero img{
        max-width: 100%;
        height: auto;
        max-height: 500px;
        object-fit: contain;
        border-radius: 80% 80% 0 0;
    }
}