*{
    padding: 0px;
    margin: 0px;
}
.yetere {
    display: flex;
    gap: 24px;
}
.yetere > div {
    flex: 1 1 0; /* répartit l'espace restant équitablement au lieu d'imposer 33.33% fixe */
}

/* Fraunces */
@font-face {
    font-family: "Fraunces";
    src: url("/hotel-booking-confirmation-page-main/assets/fonts/fraunces/Fraunces-Italic-VariableFont_SOFT\,WONK\,opsz\,wght.ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "fraunces";
    src: url("/hotel-booking-confirmation-page-main/assets/fonts/fraunces/Fraunces-VariableFont_SOFT\,WONK\,opsz\,wght.ttf");
    font-weight: 400;
    font-style: italic;
}


/* DM Sans */
@font-face {
    font-family: "dm sans";
    src: url("/hotel-booking-confirmation-page-main/assets/fonts/dm-sans/DMSans-VariableFont_opsz\,wght.ttf");
    
}

/* DM Mono */
@font-face {
    font-family: "dm-mono";
    src: url("/hotel-booking-confirmation-page-main/assets/fonts/dm-mono/DMMono-Medium.ttf");
    
}

@font-face {
    font-family: "dm-mono";
    src: url("/hotel-booking-confirmation-page-main/assets/fonts/dm-mono/DMMono-Regular.ttf");
}
.pip{
    font-family: "dm-mano";
    font-style: italic;
    font-weight: 400;
}
.nav-item.active .nav-link {
    background-color: white;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.nav-link {
    padding: 10px 14px;
}
.badge.bg-danger {
    margin-left: auto;
}
.navbar-nav .nav-item {
    margin-bottom: 8px;
}

.dol{
    border-right: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
}

.bg-creme {
    background-color: hsl(32.73deg 57.89% 96.27%) !important;
}

body{
    
    background-color:hsl(32.73deg 57.89% 96.27%);
}
span{
    color: hsl(17.08deg 63.16% 44.71%);
}
.sun{
    display: flex;
    margin: 15px;
    
}
.sun h1{
    font-size: 25px;
}
.cone1{
    display: flex;
    margin-top: 25px;
}
.cone1 h3{
    font-size: 15px;
    padding-left: 15px;
    padding-bottom: 20px;
    
}
.cone11{
    display: flex;
    justify-content: space-between;
   
    background-color: white;
    width: 100%;
    border-radius: 5px;

}
.nad{
    width: 15px;
    height: 15px;
    border-radius: 100px;
    background-color: rgb(176, 29, 29);
   
    margin-top: 8px;
    margin-right: 10px;
}
.nad h4{
    
    margin-top: 1px;
    font-size: 11px;
    margin-left: 5px;
    color: white;

}

.cone11 h3{
    font-size: 15px;
    padding-left: 5px;
    margin-top: 5px;
    margin-left: 10px;
}
.cone11 img{
    margin-left: 5px;
}
.cone12{
    display: flex; 
    margin-top: 5px;
}
.cone12 h3{
    font-size: 15px;
    padding-left: 15px;
    margin-top: 6px;
}
.cone12 img{
    color: black;
}
.em{
    color: rgb(142, 135, 135);
}
.cone13{
    display: flex;
    margin-top: 5px;
    padding-top: 15px;
    
}
.cone13 h3 {
     font-size: 15px;
     padding-left: 15px;
     padding-top: 5px;
}
.cone{
    margin-left: 25px;
    height: 700px;
}
.cone13 img{
    margin-left: 5px;
}
.cone1 i{
    margin-left: 5px;
}
.cone4{
    display: flex;
}
.conteiner p{
    font-size: 12px;
}
.abdou{
    font-size: 12px;
}
.abd{
    border-bottom: 2px dotted gray;
    
}
.d-flex h2{
    font-size: 13px;
}
.fs{
    font-size: 13px;
}
.dib{
    border-top: 2px dotted gray;
}
.coo{
    border-top: 1px solid black ;
}
.bordure{
    width: 150px;
    height: 20px;
    background: repeating-linear-gradient(to right,
    #555 0px, #555 4px, #eee 4px, #eee 12px,
    #999 12px, #999 15px, #eee 15px, #eee 25px);
}
.abdoul p{
    font-size: 11px;
    color: gray;
}
.rafiou h3{
    font-size: 30px;
}
.alla p{
    font-size: 15px;
}
.abdoul{
    font-size: 13px;
    color: gray;
}
.cool{
    box-shadow: 0 4px 10px gray;
    top: 10px;
    left: 10px;
    transform: rotate(-6deg);
    z-index: 1; 
   
}
.dieu{
    /* background: linear-gradient(160deg, #C6432E, #A8341F); */
    background-color: hsl(17, 64%, 45%);
    top: 60px;
    left: 140px;
    transform:rotate(4deg) ;
    z-index: 2;
    box-shadow: 0 15px 35px rgba(185, 60, 30, 0.25);
   
    /* transform: translateX(-20px); */
}

.abdoule p{
    font-size: 11px;
}
.allal p{
    font-size: 15px;
    
}


.abdoule p {
height:100px;
padding-top: 100px;
}
.allale{
    font-size: 15px;
    padding-top: 50px;
}
.pon{
    box-shadow: 0 10px 25px rgba(185,50, 30, 0.4);
}
.span{
    background-color: hsl(17, 64%, 45%);
    width: 45px;
    height: 35px;
    border-radius: 5px;
}
.span img{
    padding-left: 10px;
    padding-top: 5px;
}
.spane{
    background-color: hsl(232.11deg 52.29% 57.25%);
    width: 45px;
    height: 35px;
    border-radius: 5px;
}
.spane img{
    padding-left: 10px;
    padding-top: 5px;
}
.coul{
   color:  hsl(232.11deg 52.29% 57.25%);


}
.couler{
    color: hsl(340.18deg 45.9% 52.16%);
}
.spanee{
    background-color: hsl(340.18deg 45.9% 52.16%);
    width: 45px;
    height: 35px;
    border-radius: 5px;
}
.spanee img{
    padding-left: 10px;
    padding-top: 5px;
}
.adf{
    font-size: 14px;
}
.som{
    box-shadow: 0 4px 10px gray;
}
.maps h4{
    font-size: 11px;
}
.maps h5{
    font-size: 14px;
    color: #999;
}
.maps{
    background-color: hsl(40deg 25.71% 93.14%);
}
.bg{
    font-size: 10px;
    background-color:  hsl(40deg 25.71% 93.14%) ;
   border: 1px solid rgb(215, 210, 210);
   height: 15px;
   margin-left: 5px;
   border-radius: 5px;
}
.pipo{
    box-shadow: 0 4px 10px hsl(232.11deg 52.29% 57.25%);
}
.pipos{
    box-shadow: 0 4px 10px hsl(340.18deg 45.9% 52.16%);
}
.cone1 h3{
    /* padding-top: 10px; */
}
.yetere{
    display: flex;
    justify-content: space-between;
}
.meteo{
    position: relative;
    overflow: hidden;
}
.soleil{
    position:absolute;
    top: -20px;
    right: -30px;
    width: 120px;
    height: 100px;
    background-color: #f2c14e;
    border-radius: 50%;
    box-shadow: 0 4px 15px  rgba(0, 0, 0, 0.15);
}
@media (max-width: 768px) {
    .cool,
    .dieu {
        top: auto;
        left: auto;
        transform: none;
        z-index: auto;
    }
    .cool {
        margin-bottom: 30px;
    }
}

@media (min-width: 768px) {
    .header-responsive {
        height: 100vh;
        width: 280px;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
    }
    main {
        margin-left: 280px;
    }
}