﻿.room-rates {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
    border-radius: 10px;
    background: var(--color-white);
    flex: 1 0 0;
}

.title-rates {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

.title-rates h2 {
    color: var(--color-black);
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.title-rates i {
    color: var(--color-black);
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    display: flex;
}

.wrap-item-bloc-rate {
    width: 100%;
}

.wrap-price-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    gap: 20px;
}

.wrap-item-bloc-rate .based-price {
    display: flex;
    padding: 8px 10px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 5px 5px 0px 0px;
}

.based-price.promo-bloc {
    background: #FFF2F5;
}

.bloc-title-specialOffer-rate {
    display: flex;
    padding: 8px 10px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 5px 5px 0px 0px;
    background: #CFECEC;
}

.div-promo, .div-special-offer, .div-private-sale {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.wrap-item-bloc-rate .based-price span {
   color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.div-private-sale span {
    background: var(--Colors-BE-WARNING, #F89439);
}

.div-promo span {
    background: #CC1541;
}

.div-special-offer span {
    background: #0E9F9F;
}

.div-promo span, .div-special-offer span, .div-private-sale span {
    color: var(--color-white) !important;
    border-radius: 5px;
    font-size: 12px!important;
    text-transform: uppercase;
    display: flex;
    padding: 2px 5px;
    align-items: center;
    gap: 10px;
    position: relative;
    top: 1px;
    white-space: nowrap;
    font-weight: 600;
}


.wrap-bloc-rate, #cart-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 10px;
    position: relative;
}

.wrap-bloc-rate h3 {
    color: var(--color-black);
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bloc-title .wrap-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bloc-title h3::first-letter {
    text-transform: uppercase;
}

.bloc-best-rate {
    border-radius: 10px 10px 0px 0px;
    background: var(--MAIN-COLOR);
    width: 100%;
    height: 30px;
}

.bloc-rate {
    display: flex;
    padding: 16px;
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Colors-BE-GRIS, #EAEAEA);
    background: var(--Colors-BE-BLANC, #FFF);
}

.wrap-content-bloc-rate {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    width: 100%;
}

.bloc-rate-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
}

.bloc-rate-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.bloc-rate.promo-rate, .specialOffer-rate {
    border-radius: 0 0 10px 10px;
}

.stockLeft {
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: var(--Colors-BE-OFFRE-SPCIALE-C, #DAF4F4);
}

.stockLeft span {
    color: var(--Colors-BE-OFFRE-SPCIALE, #0E9F9F);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.specialOffer-rate .bloc-title-price .wrap-title {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.bloc-title-price {
    display: flex;
    align-items: center;
    align-self: stretch;
    width: 100%;
}

.bloc-title-price .wrap-title .bloc-title {
    display: flex;
    align-items: flex-start;
    width: 100%;
    justify-content: space-between;
}

.bloc-title-price .wrap-title {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

bloc-title-price .bloc-title {
    display: flex;
    align-items: flex-start;
    flex: 1 0 0;
    justify-content: space-between;
}

.bloc-rate-left .bloc-title-price .bloc-title-privateSale {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

.bloc-title-price .bloc-price {
    display: flex;
    width: auto;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    margin-left: auto;
}

.wrap-priceForNight {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.wrap-priceForNight .stockLeft {
    color: #CC1541;
    font-size: 12px;
}

.priceForStay {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-end;
}

.display-detail-tarif span:last-child, .content-promo .display-detail-tarif span {
    color: var(--color-black);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: underline;
    cursor: pointer;
}

.rate-bottom .icon-rate {
    display: none;
}

.date p {
    color: var(--BASIC-NOIR, var(--color-black));
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
}
.date span {
    color: var(--BASIC-NOIR, var(--color-black));
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.stock-offre, .priceForStay span {
    color: var(--color-black);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
}

.stock-offre strong, .priceForStay strong {
    font-size:18px;
}

.totalForStay {
    display: block;
    text-align: right;
}

.totalForStay span.room-count, .totalForStay span.totalAdults, .totalForStay span.totalChildren {
    text-transform: lowercase;
}

.totalForStay span.strockedPrice {
    color: var(--Colors-BE-PROMOTION, #CC1541);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: line-through;
}

.modal-option-totalAmount span.strockedPrice {
    color: var(--Colors-BE-PROMOTION, #CC1541);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: line-through;
}

.cancel-with-conditions, .free-cancel-conditions, .no-cancel-conditions {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
}

div#detailedCancelConditions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-radius: 5px;
}

.summaryDetailed span {
    color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-transform: lowercase;
}

.summaryDetailed strong {
    color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.description-conditions .type-offre {
    display: flex;
    gap: 10px;
    align-items: center;
}

.wrap-tarif-detail {
    display: flex;
    flex-direction: column;
}

.wrap-tarif-detail .separator-barre {
    margin: 16px 0;
}

.tarif-detail-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summaryDetailed {
    color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.tarif-detail-content strong {
    color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.09px;
}

.bloc-rate-description {
    display: flex;
    align-items: center;
    gap: 5px;
    align-self: stretch;
}

.bloc-rate-description span {
    color: var(--color-black);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.09px;
}

.bloc-addToCart {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    gap: 20px;
    position: relative;
    height: 40px;
}

.wrap-btn-add {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.wrap-btn-add span.addToCartButton.disabled {
    pointer-events: none;
    border: 1px solid var(--Colors-BE-GRIS-D, #BFBFBF);
    color: var(--BASIC-GRIS-2, #A8A8A8);
}

.wrap-btn-add a.addRoomToCartButton {
    flex: 1
}

.wrap-btn-add .stockLeft {
    color: #CC1541;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.select-dropdown-adults button, .select-dropdown-children button {
    width: 200px;
    padding: 8px;
}

/* Customisation du choix des occupants de la chambre */

.pax-compo-multiRooms {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 0px 0px 16px 16px;
    border: 1px solid var(--HEB-LIGHT, #E1EAF8);
}

.wrap-bloc-compo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.maxOccupation-error {
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: var(--Colors-BE-PROMOTION-C, #FFF2F5);
}

.maxOccupation-error span {
    color: var(--Colors-BE-PROMOTION, #CC1541);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.capacity-selection {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.age-selection {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.age-selection__label {
    flex: 1;
    font-weight: bold;
    font-size: 14px;
    min-width: 180px;
}

.age-selection__dropdown {
    display: flex;
    padding: 6px 8px;
    justify-content: space-between;
    align-items: center;
    flex: 1 0 0;
    max-width: 33%;
    border-radius: 6px;
    border: 1px solid var(--Colors-BE-GRIS, #EAEAEA);
    background-size: 8%;
    font-size: 14px;
}

.age-selection__controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.age-selection__minus,
.age-selection__plus {
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.age-selection__minus.disabled i,
.age-selection__plus.disabled i {
    pointer-events: none;
    color: grey;
}

.age-selection__minus i, .age-selection__plus i {
    font-weight: bold;
    font-size: 18px;
    color: var(--MAIN-COLOR);
    display: flex;
    justify-content: center;
}

.age-selection__input {
    width: 50px;
    height: 30px;
    text-align: center;
    border: none;
    outline: none;
    border-radius: 5px;
    pointer-events: none;
    font-size: 16px;
    -moz-appearance: textfield;
}

/* Fin du custom */

.bloc-options-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}
.title-rate {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    align-self: stretch;
    width: 70%;
}
.title-rate h3 {
    color: var(--color-black);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.title-rate span {
    color: var(--color-black);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.title-rates img, .bloc-options-title img {
    width: 40px;
    object-fit: cover;
}
.bloc-best-price {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}
.container-price-rate {
    display: flex;
    width: 100%;
}
.important-informations-rate {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.best-price {
    display: flex;
    align-items: center;
    gap: 5px;
    align-self: stretch;
}
.type-pension {
    display: flex;
    align-items: center;
}
.type-pension i {
    display: flex;
    align-items: center;
    position: relative;
}
.best-price p {
    color: var(--color-black);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.best-price img {
    width: 20px;
    height: 20px;
}

.type-pension span:last-child {
    color: var(--color-black);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/* Couleur du type d'annulation */

.type-cancel.Cancellable.item-rate-infos span {
    color: #EDB23B;
}

.type-cancel.no-Cancellable.item-rate-infos span {
    color: #CC1541;
}

.type-cancel.free-Cancellable.item-rate-infos span {
    color: #0E9F9F;
}

dl.in, dl.out {
    display: flex;
    gap: 5px;
}

dl.in dt, dl.out dt {
    font-weight: 600;
}

dl.in dt:after, dl.out dt:after {
    content: " : "
}

.in-out {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    font-size: 14px;
}
.included,
.excluded {
    display: flex;
    align-items: center;
    gap: 5px;
    align-self: stretch;
    flex-wrap: wrap;
}
.included span b,
.excluded span b{
    color: var(--BASIC-NOIR, var(--color-black));
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.included span,
.excluded span {
    color: var(--color-black);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.rate-bottom {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.wrap-bloc-compo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.bloc-compo-title {
    align-self: stretch;
}

.bloc-compo-title h4 {
    color: var(--Colors-BE-NOIR, #000);
    /* LAPTOP/H4 */
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 25.2px */
}

.bloc-compo-description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
}

.bloc-compo-description .item-infos {
    display: flex;
    padding: 3px 0px 1px 0px;
    align-items: center;
    gap: 6px;
    color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.item-infos i {
    display: flex;
    align-items: center;
}

div#custom-tooltip {
    font-size: 14px;
    display: flex;
    flex-direction: column;
}

/*.included span:last-child, .excluded span:last-child {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}
*/
.icon-rate {
    display: flex;
    align-items: center;
    gap: 15px;
}
.price-rate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    width:100%;
}
.number-night {
    display: flex;
    align-items: center;
    gap: 2px;
}
.number-night p {
    color: var(--color-black);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.number-night i {
    font-size: 15px;
}
.icon-rate img {
    width: 15px;
    height: 15px;
}

a.addRoomToCartButton.disabled {
    pointer-events: none;
    border: 0.25px solid var(--Colors-BE-GRIS-D, #BFBFBF);
    background: var(--Colors-BE-BLANC, #FFF);
    color: var(--Colors-BE-GRIS-D, #BFBFBF);
}

span.addToCartButton, span.addOptionToCartButton, a.addRoomToCartButton {
    display: flex;
    height: 40px;
    padding: 0 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--MAIN-COLOR);
    background: var(--color-white);
    text-decoration: none;
    color: var(--MAIN-COLOR);
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
    cursor: pointer;
    transition: all .4S ease-out;
    box-sizing: border-box;
}

span.addToCartButton:hover, span.addOptionToCartButton:hover, a.addRoomToCartButton:hover {
    background: var(--MAIN-COLOR);
    color: var(--color-white);
}

.date {
    display: flex;
    gap: 5px;
}

.item-rate-infos {
    display: flex;
    align-items: center;
    gap: 6px;
}

.item-rate-infos span:first-child {
    height: 15px;
    display: flex;
    align-items: center;
    color: var(--color-black);
}

.item-rate-infos span:first-child i {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.bloc-top-rate {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}
.list-rate {
    width: 100%;
}
.fake-price {
    text-decoration-line: line-through;
}
.price-rate .fake-price {
    color: var(--color-black);
    /* PHONE/TEXTES L */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
    margin-left: -10px;
}

.bloc-price .price-before-promo span {
   color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
}

.bloc-price .price-before-promo span.strocked-price {
    text-decoration: line-through;
}

.bloc-price .price-with-promo {
   color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.paiement-conditions-rate {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 6px;
}

.paiement-conditions-rate span {
    color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

wrap-bloc-rate h3:first-letter {
    text-transform: uppercase;
}

.price-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

wrap-nightRoomQuantity {
    display: flex;
    align-items:center;
}

/* Menu choix des prix */

.rate-section {
    width: 100%;
    display: none;
}

.rate-section.rackRate.active,
.rate-section.specialoffer.active,
.rate-section.promotions.active,
.rate-section.privatesale {
    display: flex;
    width: 100%;
}

.menuRates {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    position: relative;
}

.menuRates span {
    display: flex;
    padding-bottom: 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    color: var(--color-black);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease-in-out;
}

.menuRates span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transition: all 0.3s ease-in-out;
    background: var(--Colors-BE-GRIS, #EAEAEA);
}

.menuRates span.active::after {
    height: 3px;
    background-color: var(--MAIN-COLOR);
}

.underline {
    position: absolute;
    height: 3px;
    width: 0;
    background-color: var(--MAIN-COLOR);
    bottom: 0;
    left: 0;
    transition: all 0.3s ease-in-out;
}

.description-conditions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    border-radius: 5px;
}

/*.description-conditions.Cancellable {
    border: 0.5px solid #EDB23B;
}

.description-conditions.free-Cancellable {
    border: 0.5px solid #0E9F9F;
}

.description-conditions.no-Cancellable {
    border: 0.5px solid #CC1541;
}*/

.description-conditions-text {
    color: var(--color-black);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.09px;
}

.menuRates span.active {
    color: var(--MAIN-COLOR);
}

.wap-btn-infos {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    align-self: stretch;
}

p.item-cancellation {
    margin: 5px 0;
}

.paiement-conditions span {
    color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* MEDIA QUERIES */

@media (min-width: 1025px) and (max-width: 1400px) {

    .wrap-priceForNight span {
        font-size: 12px;
    }

}

@media (max-width: 1200px) {

    .rate-bottom.multiRooms {
        flex-direction: column;
    }

    .wrap-bloc-compo {
        align-self: stretch;
    }

    .bloc-addToCart {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
    }

}

@media (min-width: 769px) and (max-width: 1200px) {

    .paiement-conditions-rate span, .type-pension span:last-child {
        font-size: 14px;
    }

    .bloc-rate-description spa, wrap-priceForNight spann {
        font-size: 14px;
    }

    .cancel-with-conditions, .free-cancel-conditions, .no-cancel-conditions {
        font-size: 14px;
    }

    .display-detail-tarif span:last-child, .content-promo .display-detail-tarif span {
        font-size: 14px;
    }

    .title-rates {
        align-items: center;
    }

    .title-rates h2 {
        font-size:28px;
    }

    .title-rates i {
        font-size: 28px;
        display: flex;
    }

    .bloc-title-price {
        width: 100%;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .wrap-title {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .price-before-promo span:first-child {
        display: none;
    }

    .wrap-title .bloc-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .bloc-rate-description span, .in-out, .included span, .excluded span {
        font-size: 14px;
    }

    .stock-offre, .priceForStay span, .secure-coupons-infos span {
        font-size: 14px;
    }

    .description-conditions-text span, .wrap-priceForNight span {
        font-size: 14px;
    }

    .included, .excluded {
        display: inline;
    }

}

@media (max-width: 768px ) {

    .wrap-content-bloc-rate {
        flex-direction: column;
        align-self: stretch;
        gap: 16px;
    }

    .bloc-rate-right {
        align-self: stretch;
    }

    .capacity-selection {
        flex-wrap: wrap;
    }

    .age-selection__dropdown {
        width: 50%;
        flex-direction: column;
        max-width: none;
        flex: auto;
        background-size: 6%;
        font-size: 12px;
    }

    select.open {
        background-size: 6%;
    }

    .wrap-bloc-rate, #cart-container {
        gap: 20px;
    }

    .wrap-priceForNight {
        flex-direction: column;
        gap: 5px;
    }

    .paiement-conditions span {
        font-size: 14px;
    }

    .paiement-conditions .text-conditions {
        display: inline;
    }

    .wrap-bloc-compo {
        align-self: stretch;
    }

    .price-detail span.openCancelConditionsRate {
        font-size: 12px;
    }

    .bloc-rate-description span {
        font-size: 14px;
    }

    .description-conditions-text span {
        font-size: 14px;
    }

    .display-detail-tarif span:last-child, .content-promo .display-detail-tarif span {
        font-size: 14px;
    }

    .bloc-compo-title h4 {
        font-size: 14px;
    }

    .priceForStay {
        flex-direction: column;
        align-items: flex-end;
        align-self: stretch;
        gap: 5px;
    }

    .price-detail span, .type-pension span:last-child, .price-detail span.seeDetails, .priceForStay span {
        font-size: 14px;
    }

    .wrap-priceForNight span {
        font-size: 12px;
    }

    .wrap-priceForNight .stockLeft {
        font-size: 10px;
    }

    .bloc-addToCart {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 12px;
        align-self: stretch;
        height: auto;
    }

    .date-booking-resume span, .date-booking-resume strong, .pax-booking-resume span, .resume-booking div,
    .date-booking-resume a {
        font-size: 14px;
    }

    .bloc-compo-description .item-infos {
        font-size: 12px;
    }

    .menuRates {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .menuRates span {
        display: flex;
        padding: 16px 20px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: stretch;
        border-radius: 5px;
        border-radius: 5px;
        border: 1px solid var(--HEB-LIGHT, #E1EAF8);
        background: var(--Colors-BE-BLANC, #FFF);
        font-size: 14px;
    }

    .menuRates span.active, .menuRates span:hover, .menuRates span:hover a {
        border: 1px solid var(--MAIN-COLOR);
        background: var(--MAIN-COLOR-LIGHT);
        color: var(--MAIN-COLOR);
    }

    .menuRates span::after, .menuRates .underline {
        display: none;
    }

    div-special-offer {
        flex-direction: column;
        align-items: flex-start;
    }

    .price-before-promo span:first-child {
        display: none;
    }

    .bloc-title-price {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .bloc-title-price .bloc-title {
        width: 100%;
        display: flex;
        justify-content: space-between
    }

    .wrap-title {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .wrap-bloc-rate h3 {
        font-size: 16px;
    }

    .rooms-left {
        width: 100%;
        padding-right: 40px !important;
        padding-left: 40px !important;
        padding-top: 0;
    }

    .rooms-right {
        display: none !important;
    }

    .bloc-title-price h3 {
        font-size: 16px;
    }

    .wrap-best-rate {
        height: 30px;
    }

    .div-special-offer-title span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .room-rates {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    .included span, .excluded span, .included span strong, .excluded span strong {
        font-size: 14px;
    }

    .bloc-left {
        gap: 0 !important;
        padding-left: 0 !important;
    }
    .title-rate h3,
    .nightNumber {
        font-size: 14px;
    }

    .title-rates h2 {
        font-size: 24px;
    }

    .title-rates {
        align-items: center;
    }

    .price-rate p,
    .fake-price,
    .icon-rate {
        display: none !important;
    }
   
    .room-rates .stock-offre span {
        font-size: 15px;
    }

    .content-detail-room .wrap-bloc-sidebar {
        display: none;
    }

    .content-detail-room .wrap-bloc-sidebar.active {
        display: flex;
    }

    .content-detail-room .wrap-sidebar {
        padding: 0;
        width: 100%;
    }

    .content-detail-room .wrap-sidebar .booking img {
        width:320px;
        object-fit: cover;
    }

    .div-promo span {
        color: var(--color-white);
        font-size: 14px;
    }

    .bloc-rate {
        padding: 10px;
    }

    .title-rate {
        align-items: center !important;
    }

    .title-rates h2 {
        font-size: 20px;
    }

    .title-rate img {
        width: 40px;
        object-fit: cover;
    }

    .bloc-options-title {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        align-self: stretch;
        align-items: center;
    }

    .bloc-options-title h3 {
       color: var(--Colors-BE-NOIR, #000);
        font-family: Inter;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .wrap-btn-add {
        width: 100%;
    }

    span.addToCartButton {
        padding: 0 20px;
        width: 100%;
    }
}