@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@300;500;600&family=Roboto+Condensed:wght@300&display=swap');

@font-face {
    font-family: 'creato Light';
    src: url(../font/CreatoDisplay-Light.otf);
    font-display: swap;
}

/* SAFE&SOUND FONT */
@font-face {
    font-family: 'strech';
    src: url(../font/StretchPro.otf);
    font-display: swap;
}
.strech-font{
    font-family: 'strech' !important;
}
/* MYTHOUGHT FONT */
@font-face {
    font-family: 'Montserrat';
    src: url(../font/Montserrat-Regular.ttf);
    font-display: swap;
}
.ms-font{
    font-family: 'Montserrat' !important;
    font-display: swap;
}
/* DYSTOPIA FONT */
@font-face {
    font-family: 'Girassol';
    src: url(../font/Girassol-Regular.ttf);
    font-display: swap;
}
@font-face {
    font-family: 'Bayon';
    src: url(../font/Bayon-Regular.ttf);
    font-display: swap;
}
@font-face {
    font-family: 'Cultive';
    src: url(../font/CutiveMono-Regular.ttf);
    font-display: swap;
}
.girassol-font{
    font-family: 'Girassol' !important;
}
.bayon-font{
    font-family: 'Bayon' !important;
}
.cultive-font{
    font-family: 'Cultive' !important;
}
/* LA MIF FONT */
@font-face {
    font-family: 'Lobster';
    src: url(../font/Lobster\ 1.4.otf);
    font-display: swap;
}
.lobster-font{
    font-family: 'Lobster' !important;
}

/* DEFAULT FONT */
.bsd-font{
    font-family: 'Big Shoulders Display', cursive;
    text-transform: uppercase;
    font-display: fallback
}
.roboto-font{
    font-family: 'Roboto Condensed' !important;
}
.test-font{
    font-family: 'creato Light' !important;
}

body{
    font-family: 'Roboto Condensed', sans-serif;
}

/* CHARTE GRAPHIQUE */
.bg-charte-primary{
    background: #08090A;
}
.bg-charte-secondary{
    background: #121314;
}
.bg-chart{
    background: #c76c3f;
}
.text-chart{
    color: #c76c3f !important;
}
.text-justify{
    text-align: justify;
}
.accordion-button:not(.collapsed) {
    color: #c76c3f !important;
}
a.text-light:hover{
    color: #c76c3f !important;
}
a{
    transition: color .4s ease-out;
}
/* BACKGROUND IMG */
.parallax{
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.bg-header{
    background: url(../img/test12.jpg);
}
.bg-projet-1{
    background: url(../img/safe&sound/banner.jpg);
}
.bg-projet-2{
    background: url(../img/mythought/banner.jpg);
}
.bg-projet-3{
    background: url(../img/dystopia_tattoo/banner.jpg);
}
.bg-projet-4{
    background: url(../img/lamif/banner.jpg);
}


.white-nowrap{
    white-space: nowrap;
}
.pointer-none{
    pointer-events: none;
}
.pointer-all{
    pointer-events: all;
}
/* NAV / CONTENT */
#content{
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease-out;
}
#content.show{
    opacity: 1;
    visibility: visible;
}
.nav_content{
    width: 0;
    transition: width .4s ease-out;
}
.nav_content.show{
    width: 60% !important;
}
.box-shadow{
    box-shadow: rgba(0, 0, 0, 0.6) 0px -50px 36px -28px inset;
}

.carousel-indicators [data-bs-target] {
    height: 10px !important;
    width: 10px !important;
}
#navbar{
    box-shadow:  #c76c3f  0px -0px 0px 0px inset;
    transition: box-shadow .4s ease-out;
}
#navbar.nav-scroll{
    box-shadow:  #c76c3f  0px 100px 0px 0px inset;
}

span.carousel_trigger{
    transition: color .4 ease-out ;
    color: white;
}
span.carousel_trigger:not(.active) {
    cursor: pointer !important;
}
span.carousel_trigger.active{
    color: #c76c3f;
}
.fs-10{
    font-size: 10px;
}
.fs-12{
    font-size: 12px;
}
.offcanvas-btn{
    left: -75px;
}
.svg-close{
    height: 35px;
    width: 35px;
}
@media(min-width: 1200px) {
    .main-h{
        font-size: 100px !important;
    }
    .main-p{
        font-size: 30px !important;
    }

}
@media(max-width: 1023px) {
    .offcanvas-btn{
        left:0 !important;
    }
    .svg-close{
        height: 25px;
        width: 25px;
    }
}
@media(max-width: 767px){
    .h-home{
        margin-top: 150px !important;
    }
    .bg-header{
        background: url(../img/test12-mobile.jpg);
    }
    .bg-projet-1{
        background: url(../img/safe&sound/banner-mobile.jpg);
    }
    .bg-projet-2{
        background: url(../img/mythought/banner-mobile.jpg);
    }
    .bg-projet-3{
        background: url(../img/dystopia_tattoo/banner-mobile.jpg);
    }
    .bg-projet-4{
        background: url(../img/lamif/banner-mobile.jpg);
    }
    .parallax-image {
        background-position: top left -100px;
        background-size: 200% !important;
    }
}
.accordion{
    --bs-accordion-btn-active-icon: none !important;
    --bs-accordion-btn-icon: none !important;
}
.parallax-container {
    position: relative; /* Conteneur avec position relative */
    overflow: hidden;   /* Cache tout contenu dépassant du conteneur */
}

.parallax-image {
    z-index: -1;
    position: absolute; /* Élément parallaxe avec position absolue */
    top: 0;
    left: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
}