html {
    font-size: 22px;
}




@font-face {
    font-family: custom;
    src: url("cl-wSnXSlh.ttf");
}

@font-face {
    font-family: custom-bold;
    src: url("clBold-XX-FGyd.ttf");
}

@font-face {
    font-family: custom-italic;
    src: url("clEm-mjudcHV.ttf");
}


* {
    margin : 0;
    padding: 0;
    box-sizing: border-box;


    /*colors*/
    --font-base : #000000;
    --box-shadow : #00000078;
    --dark-base : #7c8161;
    --light-base : #fff8ee;

    --on-work : #858484;

    font-family: custom, sans-serif;
    color : var(--font-base);
}



body {
    background-color: var(--light-base);
    font-size: 1rem;
    
}

h1 {
    font-size: 1.6rem;
    color:var(--dark-base);
}

h2 {
    font-size: 1.3rem;
    color:var(--dark-base);
    
}

h3 {
    font-size: 3rem;
    font-family: custom-bold, sans-serif;
    color: var(--light-base);
    -webkit-text-stroke: var(--dark-base) 1px;
}

h4 {
    font-size: 2.5rem;
    color:var(--dark-base);
}

h5 {
    font-size: 1.6rem;
    color:var(--dark-base);
}

h6 {    
    font-size: 1.2rem;
    color:var(--dark-base);
    font-family: custom-italic, sans-serif;
}

strong {
    font-size: 1em;
    font-family: custom-bold, sans-serif;
    color : var(--dark-base);
}

.line-contact {
    display : block;
    color: var(--dark-base);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 1px;
    padding-left: 60px;
}

#logo-mail {
    background-image: url("../media/icon/mail-lpE2nO0.png");
}

#logo-insta {
    background-image: url("../media/icon/instagram-T-orLum.png");
}

#logo-snap {
    background-image: url("../media/icon/snapchat-iSyVA5X.png");
}
/*recurents components*/

    /*navbar*/

.navbar-custom {
    position : fixed;
    width : 100vw;
    background-color: var(--light-base);
    color : var(--dark-base);
    box-shadow: var(--box-shadow) 2px 2px 4px 0;
    z-index: 10;
}

.brand-custom {
    aspect-ratio: 1;
}

.navbar-logo {
    height: 100%;
}

.btn-nav {
    background-color: var(--light-base);
    color: var(--dark-base);
    border-radius: 10px;
    font-size: 1.1rem;
    transition: background-color 600ms, color 600ms;
}

.btn-nav:hover, .btn-active {
    background-color: var(--dark-base);
    color: var(--light-base);
}

.navbar-toggler {
    border: var(--dark-base) solid 2px;
    aspect-ratio: 1;
    padding: 1%;
    
}



.navbar-toggler-icon {
    background-image: url("../media/icon/burger-SiYCATj.png");
    height: 100%;
    aspect-ratio: 1;
}

    /*flash message*/

    .alert-custom {
        position : fixed;
        text-wrap:unset;
        width : 70vw;
        right : 15vw;
        transition: width 500ms, height 5000s;        
        z-index: 7;
    }

    .alert-message {
        overflow: hidden;
    }

    /*banner*/
.banner {
    aspect-ratio: 4;
    background-repeat: no-repeat;
    background-size: cover;
}
    /*main*/
main {
    position: relative;
}
    /*content box*/
.content-box {
    box-shadow: var(--box-shadow) 2px 2px 4px 0;
    padding : 10px;
}
    /*separator*/
.separator {
    background-image: url("../media/icon/separator-86GuzNf.png");
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 705/47;
}

    /*rooms bar*/
.roombar {
    position : fixed;
    top : 0;

    width : 100vw;
    background-color: var(--dark-base);
    color:var(--light-base);
    box-shadow: var(--box-shadow) 2px 2px 4px 0;
    z-index: 7;
    transition: top 1000ms;
}

.target {
    visibility: hidden;
}

.btn-room {
    background-color: var(--dark-base);
    color:var(--light-base);
    border : var(--light-base) solid 1px;
    border-radius: 15px;
    text-align: center;
    text-decoration: none;
    transition: background-color 300ms, color 300ms;
}

.btn-room:hover, .btn-room:focus {
    background-color: var(--light-base);
    color:var(--dark-base);
}
    /*carousel*/
.carousel-frame {
    background-color: var(--on-work);/*temporaire - à supprimer quand le carousel sera op*/
    aspect-ratio: 16/9;
    border-radius: 15px;
    overflow: hidden;
}
    /*before-after carousel*/
.ba-frame {
    
    aspect-ratio: 5/3;
    border-radius: 15px;
    overflow: hidden;
}

.ba-label {
    font-family: custom-bold, sans-serif;
    font-size: 2rem;
    text-shadow: var(--box-shadow) 2px 2px 4px;
}

.ba-img {
    border-radius: 15px;
    
}
    /*lists*/

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }

    li {
        background-image: url("../media/icon/puce-5dC2ZDo.png");
        background-size:3%;
        background-repeat: no-repeat;
        background-position: 1px;
        padding-left: 45px;
    }

    .line-custom {
        color:var(--dark-base);
    }

/* individual setting*/
    /*avatar*/

.avatar-box {
    width: 40%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-image: url("../media/logo/avatar-jEdx113.png");
    background-repeat: no-repeat;
    background-size: cover;
}
    /*logo contact*/

.logo-big {
    aspect-ratio:573/683;
    background-image: url("../media/logo/logoMain-hvBFrpM.png");
    background-repeat: no-repeat;
    background-size: cover;
}

    /*formulaire contact*/
.form-control:focus {
    border-color: var(--dark-base);
}

.form-control:focus, .form-check-input:focus {
    box-shadow: 2px 2px 4px 0 var(--box-shadow);
}

.form-check-input:checked {
    background-color: var(--dark-base);
    border-color: var(--dark-base);
}

.submit-custom {
    background-color: var(--dark-base);
    color: var(--light-base);
    font-family: custom-bold, sans-serif;
    border: var(--dark-base) solid 1px;
}

.submit-custom:hover {
    background-color: var(--light-base);
    color: var(--dark-base);
    font-family: custom-bold, sans-serif;
    border: var(--dark-base) solid 1px;
}

/* responsive fontsize */
@media all and (max-width:1330px) {
    html {font-size:19px;}
    h1 {font-size:1.1rem;}
    .h1-custom{font-size: 1.5rem;}
    h2 {font-size:1rem;}
    .h2-custom{font-size: 1.3rem;}
    h3 {font-size:2.4rem;}
    h6 {font-size:1rem;}
    .brand-custom {aspect-ratio: 1;}
    li {background-size: 4%;}
} 

@media all and (max-width:1200px) {
    html {font-size:16px;}
    h1 {font-size:1.1rem;}
    .h1-custom{font-size: 1.5rem;}
    h2 {font-size:1rem;}
    .h2-custom{font-size: 1.3rem;}
    h3 {font-size:1.8rem;}
    h6 {font-size:1rem;}
    .brand-custom {aspect-ratio: 1;}
    li {background-size: 7%;}
}