/* Hôtel website — our own additions on top of the Luxivo template (style.css / brand.css stay
   untouched). Uses the template's variables (--primary-color, --heading-color, --heading-font). */

/* Room without a photo yet: a neutral block instead of a misleading stock picture. */
.room-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #eef0ec, #dde2da);
    color: var(--primary-color);
    font-size: 54px;
    border-radius: inherit;
}

.room-photo-placeholder--large { aspect-ratio: 21 / 9; font-size: 80px; border-radius: 20px; }

.room-type-label {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(109, 124, 106, .14);
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
}

.luxivo-room-item .price small { font-size: 13px; font-weight: 400; opacity: .85; }
.luxivo-room-item .price-line { color: #fff; margin-bottom: 12px; font-weight: 600; }
.luxivo-room-item .price-line small { font-weight: 400; opacity: .85; }

/* Rates table on a room page */
.site-rates th { font-family: var(--heading-font); font-weight: 400; font-size: 20px; color: var(--heading-color); white-space: nowrap; }
.site-rates td, .site-rates th { padding: 14px 10px; vertical-align: middle; border-color: rgba(22, 25, 33, .08); }
.site-rates strong { color: var(--heading-color); font-size: 18px; }

/* Room gallery (photos after the cover) */
.site-room-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.site-room-gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; transition: opacity .2s ease; }
.site-room-gallery__item:hover img { opacity: .85; }

.site-badge-free { display: inline-flex; align-items: center; gap: 6px; color: #1f8f5f; font-weight: 600; }
.site-badge-free i { font-size: 9px; }

/* Empty state & call to action */
.site-empty { max-width: 640px; margin: 0 auto 40px; padding: 40px 24px; border: 1px dashed rgba(22, 25, 33, .15); border-radius: 20px; }
.site-empty > i { font-size: 46px; color: var(--primary-color); margin-bottom: 16px; }
.site-empty h4 { margin-bottom: 10px; }

.site-cta__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 36px 40px;
    border-radius: 20px;
    background: var(--heading-color);
    color: #fff;
}

.site-cta__box h3 { color: #fff; margin-bottom: 6px; }
.site-cta__box p { margin: 0; color: rgba(255, 255, 255, .8); }

@media (max-width: 575px) {
    .site-cta__box { padding: 28px 22px; }
}

/* Room cards (list, "other rooms"): the template's overlay card needs a tall picture — landscape
   photos left the title box taller than the card. Portrait crop, whatever the uploaded photo. */
.luxivo-room-item.style-four .room-image img,
.luxivo-room-item.style-four .room-photo-placeholder {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 30px;
}

/* Home hero: the template only caps its two floating photos below 1650 px — above that they
   render at their real size (1600 px wide photos) and cover the whole banner and the title.
   Fixed sizes at every width, the portrait one cropped, and kept clear of the title. */
.luxivo-hero_one .hero-image img { width: 100%; height: auto; display: block; }

.luxivo-hero_one .hero-image.hero-image_one { width: 360px; max-width: 360px; }
.luxivo-hero_one .hero-image.hero-image_one img { aspect-ratio: 3 / 2; object-fit: cover; }

.luxivo-hero_one .hero-image.hero-image_two { width: 340px; max-width: 340px; }
.luxivo-hero_one .hero-image.hero-image_two img { aspect-ratio: 4 / 5; object-fit: cover; }

@media (max-width: 1650px) {
    .luxivo-hero_one .hero-image.hero-image_one { width: 300px; max-width: 300px; }
    /* Lower and narrower, so it no longer runs into the big title. */
    .luxivo-hero_one .hero-image.hero-image_two { width: 270px; max-width: 270px; top: auto; bottom: 170px; }
}

@media (max-width: 1199.98px) {
    .luxivo-hero_one .hero-image.hero-image_one { width: 220px; max-width: 220px; }
    .luxivo-hero_one .hero-image.hero-image_two { width: 210px; max-width: 210px; bottom: 220px; }
}

/* Services managed in the application (home + /services) */
.site-service-card { background: #fff; border: 1px solid rgba(22, 25, 33, .08); border-radius: 16px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.site-service-card:hover { box-shadow: 0 14px 34px rgba(22, 25, 33, .08); transform: translateY(-3px); }
.site-service-card__photo { aspect-ratio: 16 / 10; overflow: hidden; }
.site-service-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.site-service-card__icon { padding: 32px 28px 0; font-size: 34px; color: var(--primary-color); }
.site-service-card__body { padding: 22px 28px 28px; }
.site-service-card__body h4 { margin-bottom: 10px; }
.site-service-card__body p { margin: 0; }
.site-service-card__category { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-color); margin-bottom: 6px; }

/* Testimonials without photo: initials */
.site-initials { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary-color); color: #fff; font-size: 22px; font-weight: 600; flex-shrink: 0; }

/* « À propos » with a single photo: the template's 400px pillar is meant to sit beside photo 2 */
.luxivo-about_one .luxivo-image-box.site-about--single .luxivo-experience-box { height: auto; border-radius: 30px; }
@media (min-width: 768px) {
    .luxivo-about_one .luxivo-image-box.site-about--single .luxivo-experience-box { bottom: 30px; right: 30px; }
}

/* Home banner: the template's 96 % overlay hid the photo — lighter gradient, darker on the text side */
.luxivo-hero_one:after { background: linear-gradient(90deg, rgba(22, 25, 33, .62) 0%, rgba(22, 25, 33, .42) 55%, rgba(22, 25, 33, .3) 100%); }
.luxivo-hero_one .hero-content h1, .luxivo-hero_one .text-box p { text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
@media (max-width: 991.98px) {
    .luxivo-hero_one:after { background: rgba(22, 25, 33, .5); }
}

/* Gallery managed in the application: uniform 4:3 crops, optional caption */
.site-gallery-item .thumbnail img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.site-gallery-item figcaption { padding: 10px 4px 0; font-size: 15px; color: var(--heading-color, #161921); }
.luxivo-instagram-sec .luxivo-gallery-item .thumbnail img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

/* « Réserver » (online booking request) */
.site-booking__step { display: flex; align-items: center; gap: 12px; margin: 34px 0 18px; font-size: 24px; }
.site-booking__step:first-of-type { margin-top: 0; }
.site-booking__step span { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-color); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-family: inherit; }
.site-booking__choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.site-booking__choice, .site-booking__mode { position: relative; cursor: pointer; margin: 0; }
.site-booking__choice input, .site-booking__mode input { position: absolute; opacity: 0; pointer-events: none; }
.site-booking__choice-body { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 20px; border: 1px solid rgba(22, 25, 33, .12); border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.site-booking__choice-body strong { font-size: 18px; color: var(--heading-color, #161921); }
.site-booking__choice-body small { color: #6b7280; }
.site-booking__choice-body em { font-style: normal; color: var(--primary-color); font-weight: 600; }
.site-booking__choice input:checked + .site-booking__choice-body, .site-booking__mode input:checked + span { border-color: var(--primary-color); box-shadow: 0 0 0 2px var(--primary-color); }
.site-booking__choice input:focus-visible + .site-booking__choice-body, .site-booking__mode input:focus-visible + span { outline: 2px solid var(--primary-color); outline-offset: 3px; }
.site-booking__modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.site-booking__mode span { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 8px; border: 1px solid rgba(22, 25, 33, .12); border-radius: 12px; background: #fff; font-weight: 600; color: var(--heading-color, #161921); }
.site-booking__mode span small { font-weight: 400; color: #6b7280; font-size: 13px; margin-top: 2px; }
.site-booking__mode.is-disabled { cursor: not-allowed; opacity: .45; }
.site-booking__label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--heading-color, #161921); }
.site-booking .form_control { width: 100%; height: 54px; margin-bottom: 0; padding: 0 18px; border: 1px solid rgba(22, 25, 33, .14); border-radius: 12px; background: #fff; color: var(--heading-color, #161921); font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.site-booking .form_control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(109, 124, 106, .2); }
.site-booking textarea.form_control { height: auto; padding: 14px 18px; }
.site-booking__summary { padding: 28px; border-radius: 20px; background: #161921; color: rgba(255, 255, 255, .85); top: 120px; }
.site-booking__summary h4 { color: #fff; margin-bottom: 18px; }
.site-booking__summary dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin-bottom: 18px; font-size: 15px; }
.site-booking__summary dt { font-weight: 400; color: rgba(255, 255, 255, .6); }
.site-booking__summary dd { margin: 0; color: #fff; text-align: right; }
.site-booking__total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .15); margin-bottom: 14px; }
.site-booking__total strong { color: #fff; font-size: 24px; }
.site-booking__note { font-size: 14px; margin-bottom: 18px; color: rgba(255, 255, 255, .75); }
.site-booking__note strong { color: #fff; }
.site-booking__errors { padding: 16px 20px; margin-bottom: 26px; border-radius: 12px; background: #fdecec; color: #8a1c1c; }
.site-booking__errors ul { margin: 6px 0 0 18px; list-style: disc; }
.site-booking__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.site-booking__done { max-width: 640px; margin: 0 auto; text-align: center; }
.site-booking__done-icon { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: var(--primary-color); color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; }
.site-booking__done-icon.is-refused { background: #6b7280; }
.site-booking__recap { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; text-align: left; margin: 28px 0; padding: 24px; border: 1px solid rgba(22, 25, 33, .1); border-radius: 16px; }
.site-booking__recap dt { font-weight: 400; color: #6b7280; }
.site-booking__recap dd { margin: 0; color: var(--heading-color, #161921); font-weight: 600; }
@media (max-width: 767.98px) {
    .site-booking__modes { grid-template-columns: repeat(2, 1fr); }
    .site-booking__summary { position: static; }
}

/* Events managed in the application: home banner (under the hero) and cards */
.site-event-bar { position: relative; z-index: 3; max-width: 980px; margin: 44px auto 0; }
.site-event-bar__inner { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; padding: 18px 26px; border-radius: 16px; background: #fff; box-shadow: 0 16px 40px rgba(22, 25, 33, .14); color: var(--heading-color, #161921); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.site-event-bar__inner:hover { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(22, 25, 33, .18); color: var(--heading-color, #161921); }
.site-event-bar__tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--primary-color); color: #fff; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.site-event-bar__title { font-family: var(--heading-font, inherit); font-size: 22px; }
.site-event-bar__when { color: #6b7280; }
.site-event-bar__cta { margin-left: auto; font-weight: 600; color: var(--primary-color); white-space: nowrap; }
@media (max-width: 767.98px) {
    .site-event-bar { margin-top: 28px; }
    .site-event-bar__inner { padding: 16px 18px; gap: 8px; }
    .site-event-bar__title { font-size: 19px; width: 100%; }
    .site-event-bar__cta { margin-left: 0; }
}
.site-event-card { background: #fff; border: 1px solid rgba(22, 25, 33, .08); border-radius: 18px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.site-event-card__link { display: block; height: 100%; color: inherit; text-decoration: none; }
.site-event-card__link:hover .site-event-card { box-shadow: 0 14px 34px rgba(22, 25, 33, .1); transform: translateY(-3px); }
.site-event-card__media { position: relative; aspect-ratio: 16 / 10; background: #f1efe9; overflow: hidden; }
.site-event-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-event-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; color: var(--primary-color); opacity: .6; }
.site-event-card__date { position: absolute; top: 16px; left: 16px; min-width: 64px; padding: 8px 10px; border-radius: 12px; background: #fff; text-align: center; line-height: 1.1; box-shadow: 0 6px 18px rgba(22, 25, 33, .15); }
.site-event-card__date strong { display: block; font-size: 26px; color: var(--heading-color, #161921); }
.site-event-card__date span { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--primary-color); font-weight: 600; }
.site-event-card__live { position: absolute; top: 16px; right: 16px; padding: 5px 10px; border-radius: 999px; background: #1f8a4c; color: #fff; font-size: 12px; font-weight: 600; }
.site-event-card__body { padding: 22px 24px 26px; }
.site-event-card__body h4 { margin-bottom: 12px; }
.site-event-card__meta { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: #4b5563; }
.site-event-card__meta i { width: 18px; color: var(--primary-color); }
.site-event-card__body p { margin-bottom: 0; }
.site-event-card__booking { margin-top: 10px; font-weight: 600; }

/* Home banner title: the template's 120px wrapped « Bienvenue à Hôtel Evasion » on two lines —
   sized to the screen width so it fits on one line (a much longer title still wraps, never overflows). */
.luxivo-hero_one .hero-content h1 { font-size: clamp(28px, 5.6vw, 84px); line-height: 1.15em; }