/* Partie Chèque cadeau */
.bloc-gift {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 100%;
}

.bloc-gift-cards, .bloc-gift-vouchers {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
}

.bloc-gift-cards h3, .bloc-gift-vouchers h3, .bloc-instructions h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.bloc-gift-cards h3 span, .bloc-gift-vouchers h3 span, .bloc-instructions h3 span {
    color: var(--Colors-BE-NOIR, #000);
    /* LAPTOP/H3 */
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
}

.bloc-voucher {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;    
    align-self: stretch;
    flex-wrap: wrap;
    position: relative;
}

.wrap-voucher {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex: 1 0 0;
    border-radius: 10px;
    border: 1px solid var(--Colors-BE-GRIS, #EAEAEA);
    overflow: hidden;
}

.wrap-img-voucher {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex: 1 0 0;
}

.wrap-img-voucher img {
    width: 250px;
    height: 230px;
    object-fit: cover;
    align-self: stretch;
}

.voucher {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    flex-grow: 1;
    box-sizing: border-box;
    width: 100%;
    min-height: 230px;
    padding: 20px 20px 20px 0;
}

.wrap-top-voucher {
    margin: 20px 0 0 0;
}

.voucher-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Offres applicables */

.wrap-applicableOffers {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ApplicableOffers {
    display: inline;
    font-size: 14px;
}

.ApplicableOffers i {
    vertical-align: middle;
    font-size: 15px;
    display: inline;
    position: relative;
    top: 1px;
}

/* Titre chèque cadeau */
.title-voucher {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    align-self: stretch;
}

.title-voucher h3 {
    height: 22px;
    align-self: stretch;
}

.title-voucher h3 span {
    display: flex;
    align-items: flex-start;
    gap: 15px;
   color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.title-voucher p {
    height: 15px;
    color: var(--color-black);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
}

.wrap-voucher-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    flex-grow: 1;
}

/* Boutons Chèque cadeau */
.prices-voucher {
    display: flex;
    flex-wrap: wrap; 
    align-items: flex-end;
    gap: 12px;
    align-self: stretch;
}

.price-voucher {
    display: flex;
    padding: 0 50px;
    height: 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 137px;
    border-radius: 5px;
    border-width: 0.25px;
    border-style: solid;
    border-color: var(--MAIN-COLOR);
    background: #FFF;
    max-width: 137px;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
}

.price-voucher p {
    color: var(--MAIN-COLOR);
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
}

.price-voucher:hover p, .price-voucher.active p {
    color: var(--color-white);
}

.gift-activity .price-voucher {
    border-width: 0.25px;
    border-style: solid;
    border-color: var(--MAIN-COLOR);
}

.gift-activity .duration-voucher p {
    color: var(--MAIN-COLOR);
}

.gift-activity .price-voucher p {
    color: var(--MAIN-COLOR);
}

.price-voucher.active, .price-voucher:hover {
    background-color: var(--MAIN-COLOR);
}

.gift-activity .price-voucher.active, .gift-activity .price-voucher:hover {
    background-color: var( --MAIN-COLOR-LIGHT, #F5D0D9);
}

/* Durée de validité voucher */
.wrap-bottom-duration-voucher {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: stretch;
}

.duration-voucher {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.duration-voucher p {
    color: var(--MAIN-COLOR);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
}

.duration-voucher img {
    width: 8px;
    height: 8px;
    object-fit: cover;
}

/* Infos Bottom Voucher */
.bottom-voucher {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    align-self: stretch;
}

.bottom-voucher span {
    color: var(--MAIN-COLOR);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
    text-decoration-line: underline;
}

.bottom-voucher .wrap-btn-voucher {
    display: flex;
    width: 256px;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;
    align-self: stretch;
}

.wrap-btn-voucher .btn-voucher {
    display: flex;
    padding: 5px 20px;
    height: 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 5px;
    border-width: 0.25px;
    border-style: solid;
    background: var(--MAIN-COLOR);
    color: var(--color-white);
    transition: .2s ease-in-out;
}

.wrap-btn-voucher .btn-voucher:hover {
    background: var(--color-white);
    border-color: var(--MAIN-COLOR);
}

.wrap-btn-voucher .btn-voucher span {
    color: var(--color-white);
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
    text-decoration: none;
    text-transform:uppercase;
}

.wrap-btn-voucher .btn-voucher:hover span {
    color: var(--MAIN-COLOR);
}

.btn-voucher.disabled, .btn-voucher.disabled:hover {
    border: 0.25px solid var(--color-black-lighter);
    background: none;
}

.btn-voucher.disabled span, .btn-voucher.disabled:hover span {
    color: var(--color-black-lighter);
}

/* Chèque cadeaux instructions */

.bloc-instructions {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.items-instructions {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 90px;
}

/* Chaque étape occupe un tiers de la largeur */
.items-instructions > div {
    flex: 1;
    position: relative;
    text-align: center;
    padding-top: 50px; /* espace pour le cercle fixé */
}

/* Le cercle est positionné absolument en haut de son container */
.items-instructions > div span {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border: 1px solid black;
    border-radius: 50%;
    background-color: white;
    z-index: 2;
}

/* Texte centré sous le cercle */
.items-instructions > div p {
    max-width: 230px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.resume-instructions {
    display: flex;
}

.resume-instructions p {
    color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Ligne horizontale reliant le centre du 1er et du 3ème cercle
   Le centre du 1er cercle se trouve à 16.67% (1/6) et celui du 3ème à 83.33% (5/6)
*/
.items-instructions::before {
    content: "";
    position: absolute;
    top: 16px; /* centre vertical du cercle de 40px */
    left: 16.67%;
    right: 16.67%;
    height: 1px;
    background-color: black;
    z-index: 1;
}

.giftCard-modal-btn-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    align-self: stretch;
}

.giftCard-price {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
}

.addGiftToCartButton {
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: 0.25px solid var(--HEB-BOUTON, #3951AC);
    background: var(--Colors-BE-BLANC, #FFF);
}

.addGiftToCartButton span {
    color: var(--HEB-BOUTON, #3951AC);
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
}

.addGiftToCartButton:hover {
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: 0.25px solid var(--Colors-BE-BLANC, #FFF);
    background: var(--HEB-BOUTON, #3951AC);
    transition: all .3s ease-out;
}

.addGiftToCartButton:hover span {
    color: var(--Colors-BE-BLANC, #FFF);
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
}

.wrap-rate-card {
    display: flex;
    align-items: flex-end;
    gap: 24px;
}

/* Partie cartes cadeaux */
.wrap-bloc-card {
    display: flex;
    gap: 20px;
    align-self: stretch;
    flex-wrap: wrap;
    width: 100%;
}

.wrap-content-card-title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.wrap-bloc-card .card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex: 1 1 calc(32% - 10px);
    max-width: calc(32% - 10px);
    border-radius: 10px;
    border: 1px solid var(--Colors-BE-GRIS, #EAEAEA);
}

.bloc-card-image {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 250px;
    position: relative;
    border-radius: 10px;
}

.card img {
    display: flex;
    height: 250px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;
    align-self: stretch;
    border-radius: 10px;
    object-fit: cover;
}

.bloc-card-image .price-card {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    padding: 2px 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-radius: 6px;
    background: var(--HEB-LIGHT, #E1EAF8);
}

.bloc-card-image .price-card span {
    color: var(--Colors-BE-NOIR, #000);
    text-align: right;
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
}

.content-card {
    display: flex;
    padding: 16px;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    align-self: stretch;
    height: 100%;
}
}

.wrap-content-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}


.type-card {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    align-self: stretch;
}

.type-card span {
    color: var(--MAIN-COLOR);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

.gift-activity .type-card span {
    color: var(--ROSE--ROSE, #CC1541);
    text-transform: uppercase;
}

.detail-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 15px;
    align-self: stretch;
}


.wrap-type-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

.title-card h3 {
    display: flex;
    height: 22px;
    align-items: flex-start;
    gap: 15px;
}

.title-card h3 span {
   color: var(--Colors-BE-NOIR, #000);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/* Content Description Card */
.description-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: stretch;
}

/* Par défaut, le texte est tronqué à 2 lignes */
.description-card .text .descriptionText {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.2em * 2);
    line-height: 1.2em;
    transition: max-height 0.5s ease;
    font-size: 14px;
}

.description-card .text.active .descriptionText {
    -webkit-line-clamp: none;
    max-height: 500px;
}

/* Quand le conteneur .text reçoit la classe expanded, supprimez le clamping */
.description-card .text.expanded .descriptionText {
    -webkit-line-clamp: unset;
}

.description-card .read-more-toggle {
    color: var(--MAIN-COLOR);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
}

.description-card span.expanded {
    -webkit-line-clamp: unset; /* Supprime la limitation */
}

.availibility-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 5px;
    align-self: stretch;
}

.valid-room, .valid-period {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: var(--color-black);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
    gap: 10px;
}

.valid-room span:first-child{
    gap: 10px;
}

.valid-room span, .valid-period span {
    display: flex;
    white-space: normal;
    align-items: center;
}

.valid-room i, .valid-period i {
    display: flex;
}

.valid-room strong, .valid-period strong {
    white-space: nowrap;
    font-size: 14px;
}

.isIn-notIn {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 5px;
    align-self: stretch;
    color: var(--color-black);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.how-it-works {
    color: var(--color-black);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.how-it-works span.seemore {
    color: var(--MAIN-COLOR);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
    cursor: pointer;
}


.gift-activity .how-it-works span.seemore {
    color: var(--MAIN-COLOR);
}

.room-card, .number-card {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.room-card img, .number-card img {
    width: 10px;
    height: 10px;
    object-fit: cover;
}

.room-card p, .number-card p {
    color: var(--color-black);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
}

/* Content Bottom Card */
.bottom-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.wrap-bottom-card-description {
    display: flex;
    align-items: center;
    gap: 3px;
}

.bottom-card a {
    color: var(--MAIN-COLOR);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    text-underline-offset: 4px
}

.bottom-card img {
    width: 15px;
    height: 15px;
    object-fit: cover;
}

.wrap-bottom-card-rate {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.bottom-card span.price {
    color: var(--color-black);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.howDoesItWorks span {
    color: var(--color-black);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.howDoesItWorks a {
    color: var(--MAIN-COLOR);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
}

.howDoesItWorks p {
    color: var(--color-black);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.btn-buy-card {
    border-radius: 5px;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
    height: 44px;
    cursor: pointer;
    border: 1px solid var(--HEB-LIGHT, #E1EAF8);
    background: var(--color-white);
    transition: .2s ease-in-out;
    border-radius: 5px;
    border-width: 0.25px;
    border-style: solid;
}

.btn-buy-card span {
    color: var(--MAIN-COLOR);
    text-transform: uppercase;
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.btn-buy-card:hover {
    background-color: var(--MAIN-COLOR);
}

.btn-buy-card:hover span {
    color: var(--color-white);
}

/* MEDIA QUERIES */

@media (max-width: 768px) {

    .wrap-bloc-card .card {
        flex: 1 0 0;
        max-width: 100%;
    }

    .bloc-card {
        column-count: 1;
    }

    .wrap-bloc-card {
        flex-direction: column;
    }

    .bloc-card-image {
        height: 200px;
    }

    .bloc-gift-cards, .bloc-gift-vouchers {
        gap: 16px;
    }


    .wrap-img-voucher .voucher {
        display: flex;
        padding: 20px;
        flex-direction: column;
        align-items: flex-end;
        gap: 20px;
        align-self: stretch;
        height: auto;
    }

    .bloc-gift h2 {
        font-size: 20px;
    }

    .prices-voucher {
        gap: 5px;
    }

    .wrap-img-voucher .bottom-voucher {
        position: initial;
    }

    .bloc-coupons {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .prices-voucher .price-voucher {
        padding: 10px 20px;
        height: auto;
        flex: 1;
    }

    .wrap-content-card {
        gap: 5px;
    }

    .wrap-btn-voucher .btn-voucher {
        height: auto;
        padding: 10px 20px;
    }

    .wrap-content-card-title h3 span {
       color: var(--Colors-BE-NOIR, #000);
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .wrap-bloc-card .card {
        flex-direction: column;
        gap: 20px;
        flex: 1 1 100%;
    }

    .valid-room span {
        margin-right: 5px;
    }

    .wrap-voucher-content {
        width: 100%;
    }

    .btn-buy-card {
        display: flex;
        padding: 10px 20px;
    }

    .valid-room span {
        padding: 0;
    }

    .card-img img {
        border-radius: 5px 5px 0 0;
    }

    .card-img img {
        width: 100%;
        height: 100px;
    }

    .card-img {
        height: 100%;
        width: 100%;
    }

    .wrap-img-voucher {
        flex-direction: column;
        gap: 0;
    }

    .card img {
        height: 200px;
    }

    .wrap-img-voucher > img:first-of-type {
        width: 100%;
        height: 200px;
    }

    .content-card {
        display: flex;
        padding: 0 20px 20px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 20px;
        align-self: stretch;
    }

}

@media (max-width: 1200px)
{

    .items-instructions {
       min-height: 150px;
    }

}

@media (min-width: 769px) and (max-width: 1024px) {

    .bloc-gift {
        gap: 20px;
    }

    .bloc-gift h2 {
        font-size: 24px;
    }

    .title-voucher {
        padding-top: 0;
    }

    /*Gift Voucher*/
    .wrap-voucher {
        overflow: hidden;
    }

    .content-card {
        display: flex;
        padding: 0px 20px 20px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        flex: 1 0 0;
    }

    .price-voucher {
        max-width: 100px;
        padding: 0 10px;
        flex: inherit;
    }

    .wrap-img-voucher {
        width: 100%;
    }

    .wrap-img-voucher img {
        width: 181px;
        height: auto
    }

    .card-img {
        width: 181px;
        height: 100%;
    }

    .card-img img {
        width: 100%;
    }

    .voucher {
        padding: 20px 20px 20px 0;
        align-self: stretch;
    }

    .bottom-voucher .wrap-btn-voucher {
        width: auto;
    }

    /*Gift Card*/

    .bloc-card .content-card {
        padding: 10px;
        width: -webkit-fill-available;
    }

    .bloc-card .add-or-remove {
        gap: 0px;
    }

    .wrap-bloc-card .card {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        align-self: stretch;
        flex: 1 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }

    .wrap-bottom-card-rate span.price {
        font-weight: 600;
    }

    .wrap-type-card .add-or-remove span {
        box-shadow: none;
    }
}