html{
    scroll-behavior: smooth;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    flex-direction: column;
    color: white;
    box-sizing: border-box;
    font-family: "Angelina", sans-serif;
}
.wrapper {
    flex: 1;
}
header{
    height: 128px !important;
}
/* .slide1-img{
/*    background-image: url('../../etidor/img/fourniture.JPG');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 600px;
}
.slide2-img{
/*    background-image: url('../../etidor/img/articleDeco.JPG');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 600px;
}
.slide3-img{
/*    background-image: url('../../etidor/img/bijoux.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 600px;
} */
.marger{
    margin-top: 127px;
}

/**CSS navigation*/
.search-box {
    margin-right: 10px;
}

.navbar{
    background-color: #0f2a7b;
}

.logo{
    position: absolute;
    z-index: 1000;
    margin-top: 2%;
}

.navbar>.container{
    justify-content: end;
}

@media(min-width: 992px) {
    .menu-search{
        margin-left: 16%;
    }
}

@media(max-width: 1220px) {
    .img-card{
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
}

.menu{
    width: 100%;
    flex-direction: column;
    color: white;
}

.menu h1{
   font-family: "Angelina", sans-serif;
   font-weight: 700;
}

li{
    position: relative;
    margin-left: 30px;
}


li a::after{
    content: '';
    position: absolute;
    height: 2px;
    width: 0;
    bottom: -1px;
    left: 0;
    background-color: white;
    display: block;
    transition: 0.3s;
}

li a:hover{
    color: #9fb848 !important;
}

li a:hover::after{
    width: 100%;
}

/**Form de recherche et inspirez-vous*/
form{
    height: 30px;
    background-color: gray;
    border-radius: 25px;
    position: relative;
    margin-bottom: 40px;
}

form input{
    color: #9fb848;
    width: 100%;
    height: 100%;
    border-radius: 25px;
    padding-left: 30px;
    display: block;
    border: none;
}
input:focus{
    outline: none;
}
 form button{
    /* position: absolute; */
    top: 0;
    left: 0;
    /* width: 30px; */
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    background: none;
}

button i{
    color: #9fb848;
}

/**Inspirez-vous*/


.fond-inspirez{
    padding-top: 14%;
    padding-bottom: 80px;
}


.cards-wrappers{
    column-gap: 4px;
}

/**Modification le 10/05 */

.section-one{
    padding-top: 9%;
}
.recherche-accueil .form-control{
    margin-left: 0 ;
}
@media(max-width: 992px) {
    .section-one{
   padding-top: 0%;
    }
    .respi{
        margin-right: 129px;
    }
}

.inspirez-title, .catalog-title{
    background-color: RGB(159,184,72,0.8);
    box-shadow: 10px 5px 10px rgba(0, 0, 0, 0.5);
    font-family : "Nunito Sans", sans-serif;

}
.inspirez-title h3, .catalog-title h3{
    font-size: 2rem;
}



.catalog-img{
    width: 350px;
    height: 350px;
}
.catalog a{
    text-decoration: none;
   
}

.btn-video, .btn-endroit{
    position: relative !important;
    border: 1px solid #e9c41d !important;
    background-color: white !important;
    color: black;
    overflow: hidden;
    transition: 0.5s;
}

.btn-video::before , .btn-endroit::before{
    content: "Voir plus";
    position: absolute !important;
    left: 0;
    bottom: 0;;
    width: 100%;
    height: 0;
    padding: 5px;
    color: white;
    background-color: #e9c41d !important;
    z-index: -1;
    transition: 0.2s;
}

.btn-video:hover::before, .btn-endroit:hover::before{
    height: 100%;
    z-index: 1;
}
/* Modification 13/05/24 */
.inspi-bijoux, .inspi-fil, .inspi-deco{
    position: relative;
    overflow: hidden; 
}
 .inspi-bijoux::before , 
 .inspi-fil::before, .inspi-deco::before{
    content: "Bijoux / Boucle d'oreil";
    position: absolute;
    width: 100%;
    height: 10%;
    left: 0;
    bottom: 0;
    color: white;
    text-align: center;
    font-weight: 500;
    font-size: 1.2rem;
    background-color: rgb(233,196,29);
    transition: 0.5s;
    z-index: 10;
    
 }
 .inspi-bijoux:hover::before,
 .inspi-fil:hover::before,
 .inspi-deco:hover::before{
    height: 20%;
    padding-top: 5%;
    background-color: rgb(233,196,29,0.8);

 }

 .inspi-bijoux img,
 .inspi-fil img,
 .inspi-deco img{
    padding-bottom: 25px;
    transition: 0.5s;
 }
 .inspi-bijoux:hover img,
 .inspi-fil:hover img,
 .inspi-deco:hover img{
    transform: scale(1.2);
 }
.hauteur{
    background-size: cover;
    height: 450px;
    background-position: center;
}

.carousel-control-prev-icon svg,
.carousel-control-next-icon svg {
    color: white; /* Change la couleur de l'icône en blanc */
}
.colorate{
    color: white;
}
.test{
    margin-left: 229px;
}

.style{
    border-radius: 23px;
    border-color: #46448C;
    color: #46448c;
}
.styles{
    border-radius: 23px;
    border-color: #46448C;
    color: #46448c;
    
}
.Card{
    width: 18px;
    height: 200px;
}



@media (max-width: 1049px) {
    .items {
     display: none !important;
    }
  }

@media (max-width: 991px) {
    .search {
     display: none;
    }
  }

  @media (min-width: 991px) {
    .navbar-toggler {
     display: none;
    }
  } 
.fond{
    background-image: url('../etidor/img/fond.jpg');
    background-size: cover; 
    background-position: center;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
} 
.fond-color {
    background-color: rgba(0, 0, 0, 0.8); 
    padding: 25px;
   
}
.vertical-line{
    position: relative;
    height: 100%;
    width: 100%;
}
.vertical-line::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 2px;
    left: -50px;
    top: 0;
    background-color: rgb(250, 244, 244);
}
.vertical-line label{
    background-color: rgb(255, 255, 255,0.8);
    color: #46448c;
    padding: 7px;
    font-size: 1rem;
    width: 300px;
    border: 1px solid #46448C;
    border-radius: 25px;
}
.vertical-line .slogan{
    font-family:"Pacifico", cursive;
    font-size: 2.5rem;
    color:#9FB848;
}
.vertical-line .speciality h5{
    width: 350px;
    border-bottom: 2px solid rgb(210, 209, 228);
    color:#9FB848;
}
.section-spec{
    padding: 5px;
    width: 100%;
    background-color: rgb(255, 255, 255,0.3);

}
.user{
    font-size: 19px;
}
.ht{
    margin-top: -42px;
}
.bon-endroit h3{
    font-weight: 500;
    font-size: 1.5rem;
}


@media(max-width: 994px){
    .img-maison{
        display: none;
    }
    .apropos-img{
        display: none !important    ;
    }
    .vertical-line::after {
        display: none;
    }
    .card-qr-code{
        display: none;
    }
    .qr-code{
        display: none;
    }
    .horaire{
        display: none;
    }
}
.text{
    color: white;
}
.bold-dot {
    font-weight: bold; /* Rend l'icône de point en gras */
    font-size: 1.5rem;
  }
.decaler{
    margin-left: 7px;
}
.decala{
    margin-left: 20px;
}
.color-a{
    text-decoration: none;
    color: white;
}
.bg-footer{
    background-color:  #0f2a7b;
}
.color-a{
    text-decoration: none;
    color: white;
}
.width{
    filter: invert(100%);
    width: 35px;
}
.width-mod{
    filter: invert(100%);
    width: 35px;
}


/** modif rija**/
/* Style pour afficher les sous-menus */
.dropdown-menu {
    margin-right: auto;
}
.taille{
    width: 300px;
}
.cat1{
    margin-left: 218px;
}
.cat3{
    margin-left: 136px;
}
.dropdown-submenu:hover .dropdown-menu {
    border-color: #9FB848;
    display: block;
}
.marge{
    margin-top: 191px;
}
.colorgrey{
    color: gray;
}
.decal{
    margin-left: 35px;
}
.testMidina{
    padding-top: 165px;
}

.color-degrader{
    color: white;
    background-image: linear-gradient(-25deg, #36ebeb,#1A27EC);
    border-radius: 10px;height: 263px;
    flex-direction: column;
}
.custom-shadow {
    box-shadow: 5px 5px 10px rgba(65, 76, 236, 0.575);
}
.btn-contact{
    border-radius: 27px;
    position: relative !important;
    background-color: #f70808!important;
    color: black;
    overflow: hidden;
    transition: 0.5s;
}
.contact-color{
    color: #9FB848;
}
/*style créer*/
.rotate {
    transform: rotate(-25deg); /* Ajustez l'angle de rotation selon vos besoins */
    display: inline-block;
  }
/*finStyle créer*/
.btn-contact::before{
    content: "Votre avis";
    position: absolute !important;
    left: 0;
    bottom: 0;;
    width: 100%;
    height: 0;
    padding: 8px;
    color: white;
    background-color: #e9c41d !important;
    z-index: -1;
    transition: 0.5s;
}

.btn-contact:hover{
    border: 1px solid #e9c41d !important;
}

.btn-contact:hover::before{
    height: 100%;
    z-index: 1;
}
.phone-number {
    display: block;
}
.insp{
    height: 360px !important;
}
.pic{
    width: 100%;
}
/*debut**/
@media (max-width: 775px) {
    .card {
        margin: 20%;
        height: 222px;
    }
    .pic{
        text-align: center;
        width: 100%;
    }
    .intro {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        min-height: 100px; /* Ajustez cette hauteur en fonction de vos besoins */
    }
    .cat {
        font-size: 30px;
    }
    .p-card {
        font-size: 16px;
    }
}

.sary{
    margin: -19px;
    border-radius: 3px;
    transition: .5s;
}
.card{
    height: 331px;
    margin: 50p x;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.041);
    overflow: hidden;
}
.card-fourniture .card{
    margin: 0 !important;
    border:1px solid white;
}
.card:hover{
    cursor: pointer;
}
.card:hover .intro{
    height: 100px;
    background: rgba(160, 184, 72, 0.623);
}
.card:hover .p-card{
    opacity: 1;
    visibility: visible;
}
.card:hover .sary{
    transform: scale(1.1) rotate(-3deg);
}
.intro{
    text-align: center;
    padding: 6px;
    width: 100%;
    height: 20%;
    box-sizing: border-box;
    position: absolute;
    background: rgba(159, 184, 72);
    color: white ;
    transition: .5s;
    bottom: 0;
}
.cat{
    /* margin: 10px; */
    font-size: 40px;
    font-weight: bold;
}
.p-card{
    font-size: 20px;
    margin: 20px;
    visibility: hidden;
    opacity: 0 ;
}
/*fin*/
.dropdown-submenu .dropdown-menu {
    position: absolute;
}

/* @media(max-width: 1200px){
    .card-img-ac{
        flex-wrap: wrap;
    }
} */

/* css image qr-code */
.card-qr-code{
    width: 100px !important;
    height: 100px !important;
}

.img-maison{
    margin-top: 0 !important;
    margin-left: 20px !important;
    margin-right: 0 !important; 
/*    margin-bottom: 20px !important;*/
}

.qr-code{
    margin-left: 40px !important;
}

.qr-texte{
    position: relative;
    height: 100px !important;
}

.qr-texte::before{
    content: "";
    position: absolute;
}
/*responsive  notre boutique**/
@media (max-width: 991px) {
    .dropdown-submenu{
        display: none !important;
    }
    header {
        height: auto !important;
    }
    .img-logo{
        max-height: 100px !important;
    }
    .navbar-brand {
        margin-top: 7% !important;
    }
}

@media (max-width: 1021px) {
    .navbar-brand {
        margin-left: 2% !important;
    }
}
@media (max-width: 800px) {
    .navbar-brand {
        margin-top: 8% !important;
    }
}
@media (max-width: 700px) {
    .navbar-brand {
        margin-top: 10% !important;
    }
}
@media (max-width: 600px) {
    .navbar-brand {
        margin-top: 12% !important;
    }
}
@media (max-width: 500px) {
    .navbar-brand {
        margin-top: 14% !important;
    }
}
@media (max-width: 400px) {
    .navbar-brand {
        margin-top: 16% !important;
    }
}
@media (max-width: 300px) {
    .navbar-brand {
        margin-top: 18% !important;
    }
}
@media (max-width: 250px) {
    .navbar-brand {
        margin-top: 20% !important;
    }
}

.img-logo{
    max-height: 150px;
}
.navbar-brand {
    position: absolute;
    z-index: 100;
    margin-top: 10%;
    left: 0;
    margin-left: 6%;
}

#categories .card,
#products .card {
  height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* nah */
.form-login{
    width: 100%;
    height: 100%;
    background-color: white;
}
.form-login .form-floating .form-control{
    margin-left: 0 !important;
}

/* NAH MODIF */
.visible-normal {
    display: block;
  }
  .hidden-normal {
    display:  none !important;
  }
  @media (max-width: 1200px) {
    .visible-normal {
      display: none !important;
    }
    .hidden-normal {
      display: block !important;
    }
  }

.form-floating>.form-control-plaintext~label::after, 
.form-floating>.form-control:focus~label::after, 
.form-floating>.form-control:not(:placeholder-shown)~label::after, 
.form-floating>.form-select~label::after {
    position: absolute;
    inset: 1rem 0.375rem;
    z-index: -1;
    height: 1.5em;
    content: "";
    background-color: transparent; /* Fond transparent */
    border-radius: var(--bs-border-radius);
    color: gray;
}
/* end */