/*
Theme Name:   Hello Elementor Cordelia
Description:  Hello Elementor Child Theme - Hotel Cordelia
Author:       Mixit7
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-cordelia
*/

/* ============================================================
   Global
   ============================================================ */
body, #main { background-color: #f8f4f4; }
label { margin-bottom: 0; vertical-align: middle; }
select { border: 0px !important; box-shadow: none !important; }
blockquote { padding: 0 1.25em 0 1.25em; }

/* ============================================================
   Typographie
   ============================================================ */
h1 span, h2 span { font-style: italic; }
h1.titre-home { font-size: 120px; line-height: 120px; }
h1.titre-rooms { font-size: 80px; line-height: 80px; }
.titre-inter { font-size: 80px; line-height: 80px; font-weight: 300; color: #000; }
.textes-chambres { font-size: 18px; }


/* ============================================================
   Formulaire réservation .promo-home
   ============================================================ */
.promo-home { position: relative; top: -30px; z-index: 10; background: #ff4b6c !important; border: 0px; text-align: center; width: auto; max-width: 1314px; margin-left: auto; margin-right: auto; color: #fff !important; border-radius: 5px; }
.promo-home .promo-resa-btn { display: none; }
.input-date-resa { display: inline-block; padding-top: 12px; padding-bottom: 12px; border-right: 1px #F47D99 solid; margin-right: 20px; }
.input-date-resa:last-child { border-right: 0px !important; margin-right: 0px; padding-right: 0px; }
.input-date-resa label,
.input-date-resa input[type=text],
.input-date-resa input[type=submit],
.input-date-resa select { width: auto; display: inline-flex; flex-direction: row; }
.input-date-resa label { color: #fff; text-transform: uppercase; margin-right: 10px; font-family: Inter, sans-serif; font-size: 12px; font-weight: 500; }
.input-date-resa select { margin-right: 20px; padding-right: 0px !important; position: relative; z-index: 2; background: #fff url('https://www.cordelia-paris-hotel.com/new/wp-content/uploads/2025/09/fleche-bas.png') no-repeat 80% !important; background-size: 25% !important; }
.input-date-resa select, .input-date-resa input { border-color: #fff; }
.input-date-resa i.fa-calendar { color: #ff4b6c !important; position: inherit; right: 45px; top: 0px; }
.input-date-resa i.fa-chevron-down { position: relative; right: 45px; top: -5px; color: #ff4b6c !important; z-index: 2; background: none; }
.promo-home input[type=text],
.promo-home input[type=submit],
.promo-home select { background: #fff; width: 130px; border-radius: 4px; }
.promo-home select { width: 60px; }
.promo-home input#rate { background-color: #ff4b6c !important; color: #fff !important; width: 120px; margin-right: 15px; }
.promo-home input#rate::placeholder { color: #fff !important; }
.promo-home input[type=submit] { color: #ff4b6c; }
.promo-home input[type=text] { padding: 0 .75em !important; }

/* ============================================================
   Datepicker (jquery-ui)
   ============================================================ */
.ui-datepicker .ui-datepicker-title { font-family: Inter, sans-serif; font-weight: lighter; }
.ui-widget-header { border: 1px solid #ddd; background: #ff4b6c !important; color: #fff !important; font-weight: bold; }
.ui-widget-header a { color: #fff !important; }
.ui-widget-header .ui-icon { background-image: url(https://www.cordelia-paris-hotel.com/availpro/images/ui-icons_ffffff_256x240.png) !important; margin-top: -6px !important; }
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button { border: 0px !important; background: #fff !important; font-weight: normal; color: #212121 !important; }
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active { border: 0px solid #000 !important; background: #ff4b6c !important; color: #fff !important; }
.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-next { right: 4px !important; top: 1px !important; border: none !important; background: transparent !important; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-prev { left: 4px !important; top: 1px !important; background: transparent !important; border: none !important; }

/* ============================================================
   Section Chambres
   ============================================================ */
#bg-chambres { background-image: url('https://www.cordelia-paris-hotel.com/new/wp-content/uploads/2024/11/rooms-hotel-cordelia-paris-7.jpg'); background-position: center; text-align: center; padding: 0px; margin: 0px; background-size: cover; }
.overlay-rooms { background-color: rgba(0,0,0,0.7); padding: 80px 20px; }
ul.menu-rooms { list-style: none; font-family: 'Canela'; font-size: 40px; line-height: 40px; padding: 0; margin: 0; }
ul.menu-rooms li { margin-bottom: .6em; }
ul.menu-rooms li a { opacity: 0.5; font-weight: 400; color: #fff; }
ul.menu-rooms li a:hover { cursor: pointer; opacity: 1; }
ul.menu-rooms li a span { opacity: 0; }
ul.menu-rooms li a:hover span { opacity: 1; }
ul.menu-rooms li a:hover span img { height: 14px; margin-right: 20px; }
.menu-select-chambres { border-top: 1px solid; border-bottom: 1px solid; padding: 15px 0px; }
.menu-select-chambres a { text-transform: uppercase; font-size: 22px; margin-right: 20px; }
select#chambres_select, .bg-select { background-color: #FF4B6C !important; color: #fff; border-radius: 5px; border: none; font-weight: 500; font-size: 18px; font-family: inter, sans-serif; }
.descriptif-chambre .titre-inter, .descriptif-chambre p { margin-bottom: 20px !important; }
.pictos-chambres { font-size: 18px; }
.btn-res-room { position: absolute; bottom: -15px; }

/* ============================================================
   Sliders chambres
   ============================================================ */
.slider-chambres .flickity-page-dots { left: 0px; right: auto; position: absolute; bottom: -60px !important; text-align: left; }
.slider-chambres .flickity-prev-next-button.previous { left: auto; right: 30px; position: absolute; bottom: -500px; }
.slider-chambres .flickity-prev-next-button.next { left: auto; right: 0px; position: absolute; bottom: -500px; }
.slider-chambres .slider-nav-light .flickity-prev-next-button .arrow,
.slider-nav-light .flickity-prev-next-button svg { fill: #000; }
.slider-nav-dots-dashes-spaced .flickity-page-dots .dot { border-radius: 5px !important; height: 4px; width: 20px; }
.slider-nav-light .flickity-page-dots .dot.is-selected { background-color: #ff4b6c; width: 50px; }
.slider-nav-light .flickity-page-dots .dot { border-color: #ff4b6c; border-radius: 5px; height: 4px; width: 20px; }
.flickity-page-dots { left: auto; right: 50px; position: absolute; bottom: -60px !important; }
.slider-quartier-home .banner-inner { margin-right: 10px !important; background: #f8f4f4 !important; }

/* ============================================================
   Galeries
   ============================================================ */
.galerie-home img, .images-galerie img { border-radius: 5px; }

/* ============================================================
   Lightbox (Magnific Popup)
   ============================================================ */
.mfp-wrap { background-color: rgba(0,0,0,0.5) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px) !important; }
.mfp-gallery { background: rgba(0,0,0,0.66) !important; }
.mfp-figure, img.mfp-img { border-radius: 5px; box-shadow: none !important; border: 0px !important; padding-bottom: 0px; }
.mfp-title, .mfp-counter { position: absolute; top: 50px; font-size: 16px; color: #fff; }
.mfp-image-holder .mfp-content { margin: 0 50px; }
.mfp-arrow { position: absolute !important; }

/* ============================================================
   Accordéons / Offres
   ============================================================ */
.accordion .toggle { left: 600px; font-size: 7px; top: 18px; }
.accordion-title, .accordion-inner { max-width: 660px; margin: auto; }
.accordion-inner, .accordion-title.active { background-color: #EAEAEA; }
.accordion .active { font-weight: 500; }
.accordion .active .toggle i { display: none; }
.accordion .active .toggle::before { content: "- "; font-size: 24px; font-weight: 300; }
.accordion .active .toggle { top: 30px !important; }
.accordion-title { font-family: inter, sans-serif; font-weight: 300; color: #000 !important; }
a.plain { color: #000 !important; }
.accordion-item p { font-size: 20px; font-weight: 300; font-family: inter, sans-serif; }
.container-offres { position: relative; overflow: visible !important; }
.text-offres { background: -webkit-linear-gradient(#333, #eee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding-left: 10px; max-height: 120px; }
.text-offres p { font-size: 18px !important; font-weight: 300 !important; }
.plus-offres .accordion-title { border-bottom: 1px #E4E4E4 solid; padding-bottom: 20px; border-top: 1px #E4E4E4 solid; padding-top: 20px; font-size: 18px; margin-top: 30px; color: #212121; background-color: #f8f4f4; margin-bottom: 50px; font-weight: 500; font-family: inter, sans-serif; }
.plus-offres .toggle { right: 0px; left: auto; color: #212121; background-color: #f8f4f4; top: 25px !important; }
.plus-offres .accordion-inner { display: none; padding: 0px; padding-right: 10px; position: relative; left: -5px; width: 110%; top: -120px; background-color: #f8f4f4; }
.accordion-plus-offres .plus-offres .accordion-title.active { display: block; width: 105%; position: absolute; bottom: -30px; font-weight: 500; font-size: 18px; font-family: inter, sans-serif; background-color: #f8f4f4; border-bottom: 1px #E4E4E4 solid; padding-bottom: 20px; border-top: 1px #E4E4E4 solid; padding-top: 20px; }
.plus-offres .accordion-title.active, .plus-offres .accordion-title.active::before { content: "VOIR MOINS"; font-weight: 500; font-size: 18px; font-family: inter, sans-serif; background-color: #f8f4f4; color: #212121 !important; }
.plus-offres .accordion-title.active span { display: none; }
.plus-offres .accordion-title.active .icon-plus { display: none; }
.plus-offres li { font-size: 20px; line-height: 130%; font-weight: 300; font-family: inter, sans-serif; }
.accordion-plus-offres .section { padding-left: 5px !important; padding-right: 5px !important; font-size: 20px; }

/* ============================================================
   Elementor Nested Accordion — icônes +/− légères (match /new)
   ============================================================ */
.elementor-widget-n-accordion .e-n-accordion-item-title-icon svg { display: none; }
.elementor-widget-n-accordion .e-n-accordion-item-title-icon .e-closed::after {
    content: "+";
    font-size: 1em;
    font-weight: 300;
    line-height: 1;
    font-family: Inter, sans-serif;
}
.elementor-widget-n-accordion .e-n-accordion-item-title-icon .e-opened::after {
    content: "\2212";
    font-size: 1.4em;
    font-weight: 300;
    line-height: 1;
    font-family: Inter, sans-serif;
}

/* ============================================================
   FAQ
   ============================================================ */
.mixit7-faq .mixit7-faq-question {
    font-family: "Inter", Sans-serif;
    font-size: 18px;
    font-weight: 300;
    text-transform: none;
    line-height: 20px;
}
.mixit7-faq-cordelia .mixit7-faq-answer-inner {
    font-size: 20px;
    line-height: 26px;
    font-family: "Inter", Sans-serif;
    font-weight: 300;
}

/* ============================================================
   FAQ skin Cordelia (.mixit7-faq-cordelia)
   ============================================================ */
.mixit7-faq-cordelia .mixit7-faq-category {
    max-width: 660px;
    margin: 0 auto 2.5em;
}
.mixit7-faq-cordelia .mixit7-faq-category-title {
    font-family: 'Canela', sans-serif;
    font-weight: 300;
    font-size: 48px;
	line-height: 80px;
    color: #000;
    margin-bottom: 0.5em;
    padding-bottom: 0;
    border-bottom: none;
    text-align: center;
}
.mixit7-faq-cordelia .mixit7-faq-item {
    border: none !important;
    border-top: 1px solid #ddd !important;
/*     border-bottom: 1px solid #ddd !important; */
    border-radius: 0;
    margin-bottom: 0 !important;
    overflow: visible;
    position: relative;
}
.mixit7-faq-cordelia .mixit7-faq-question {
    font-family: Inter, Sans-serif;
    font-size: 110%;
    font-weight: 300;
    color: #000;
    padding: 0.95em 2em;
    background: transparent;
    border: none;
    border-radius: 0;
    text-transform: none;
    margin-bottom: 0;
    transition: background-color 0.3s;
}
.mixit7-faq-cordelia .mixit7-faq-question:hover,
.mixit7-faq-cordelia .mixit7-faq-question:focus-visible {
/*     background-color: rgba(0, 0, 0, 0.04); */
    outline: none !important;
}
.mixit7-faq-cordelia .mixit7-faq-item.is-open > .mixit7-faq-question {
    background-color: rgba(0, 0, 0, 0.04);
    color: #212121;
    font-weight: 500;
}
.mixit7-faq-cordelia .mixit7-faq-icon {
    width: 0.7em;
    height: 0.7em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='4' x2='12' y2='20'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='4' x2='12' y2='20'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}
.mixit7-faq-cordelia .mixit7-faq-item.is-open .mixit7-faq-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3C/svg%3E");
    transform: none;
}
.mixit7-faq-cordelia .mixit7-faq-item.is-open .mixit7-faq-answer {
    background-color: rgba(0, 0, 0, 0.04);
}

@media (max-width: 768px) {
	.mixit7-faq-cordelia .mixit7-faq-category-title { font-size: 60px; line-height: 60px; }
}

/* ============================================================
   Blog
   ============================================================ */
.box-blog-post .is-divider { opacity: 0; }
.post-item .box-blog-post { border-bottom: 1px solid rgba(0, 0, 0, 0.3) !important; }
.title-overlay { background-color: rgba(0,0,0,.3) !important; }
.title-bg { background-position: bottom; }
.box-text p { text-transform: uppercase; font-size: 18px; text-align: center; font-weight: 500; }

/* ============================================================
   Footer
   ============================================================ */
footer { text-align: center; }
.menu-menu-footer-container { text-align: center; font-family: 'Canela'; font-weight: 300 !important; font-size: 25px; text-transform: none !important; }
footer .btn-footer { width: 150px; }
footer a { color: #fff; }
footer a:hover { color: #b7b7b7 !important; }

/* ============================================================
   Utilitaires
   ============================================================ */
.smart { display: none; }
.next-prev-nav .flex-col+.flex-col { border-left: 0px solid #ececec; }

/* ============================================================
   Responsive > 1200px
   ============================================================ */
@media screen and (max-width: 1200px) {
    .promo-home #AVP { display: none; }
    .promo-home .promo-resa-btn { display: block; }
    .descriptif-chambre .titre-inter { font-size: 50px !important; line-height: 56px; margin-bottom: 10px !important; }
    .pictos-chambres { font-size: 18px; }
    .descriptif-chambre p { font-size: 18px; }
    .slider-chambres .flickity-prev-next-button.next,
    .slider-chambres .flickity-prev-next-button.previous { bottom: -440px; }
}

/* ============================================================
   Tablet (max-width: 849px)
   ============================================================ */
@media (max-width: 849px) {
    .promo-home { display: none; }
    .smart { display: block; }
    .desktop { display: none; }
    .textes-chambres { font-size: 17px; }
    .menu-select-chambres a { font-size: 16px; margin-right: 10px; }
    h1.titre-home { font-size: 70px; line-height: 70px; }
    h1.titre-rooms { font-size: 48px; line-height: 48px; }
    .slider-chambres .flickity-page-dots { left: 0px; right: auto; position: absolute; bottom: -50px !important; }
    .slider-chambres .flickity-prev-next-button.previous { left: auto; right: 30px; bottom: -510px; position: absolute; }
    .slider-chambres .flickity-prev-next-button.next { left: auto; right: 0px; bottom: -510px; position: absolute; }
    .flickity-page-dots { bottom: -20px !important; left: 11px; }
    .mfp-image-holder .mfp-content { margin: 0 30px; }
    .mfp-arrow-right, .mfp-arrow-left { display: block; }
    .accordion-title { max-width: 650px; margin: auto; }
    .accordion-inner { max-width: 650px; }
    .accordion .toggle { left: 650px; font-size: 7px; top: 18px; }
    .text-offres { max-width: 60%; margin: auto; }
    .plus-offres .accordion-inner { top: -140px; }
    .slider-chambres .flickity-prev-next-button.next,
    .slider-chambres .flickity-prev-next-button.previous { bottom: -480px; }
}

/* ============================================================
   Article content h2
   ============================================================ */
.article-content h2 {
    font-family: 'Canela', sans-serif;
/*     font-size: 48px; */
	font-size: 80px;
    font-weight: 300;
    line-height: 80px;
}

.article-content h3 {
    font-family: 'Canela', sans-serif;
/*     font-size: 60px; */
    font-size: 38px;
    font-weight: 300;
    line-height: 32px;
	margin-top: .5em;
    margin-bottom: 15px;
}

.article-content p {
    font-size: 25px;
    line-height: 130%;
	margin-bottom: 1.3em;
}

@media (max-width: 1024px) {
    .article-content h2 { font-size: 80px; line-height: 80px; }
    .article-content h3 { font-size: 38px; line-height: 32px; }
    .article-content p  { font-size: 20px; }
}

@media (max-width: 768px) {
    .article-content h2 { font-size: 60px; line-height: 60px; }
    .article-content h3 { font-size: 38px; line-height: 32px; }
    .article-content p  { font-size: 20px; }
}

/* ============================================================
   Mentions légales &  Politique de conf content h2
   ============================================================ */

.content h2 {
    font-family: 'Inter', serif;
    font-weight: 400 !important;
    font-size: 25px;
/*     line-height: 32.5px; */
	line-height: 130%;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.content a {
    color: #000;
}

.content a:hover {
    color: #000;
}

.content ul {
    padding-left: 2em;
}


@media (max-width: 1024px) {
    .content h2 {
        font-size: 25px;
        line-height: 32.5px;
    }
}

@media (max-width: 767px) {
    .content h2 {
        font-size: 20px;
        line-height: 26px;
    }
}

/* ============================================================
   Room carousel in loop template (.crd-room-carousel)
   ============================================================ */
.crd-room-carousel { position: relative; width: 100%; }
.crd-room-carousel .crd-room-swiper { height: 679px; width: 100%; overflow: hidden; }
.crd-room-carousel .swiper-wrapper { height: 100%; }
.crd-room-carousel .swiper-slide { width: 100% !important; height: 100%; }
.crd-room-carousel .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crd-room-carousel .crd-nav { position: absolute; top: 679px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; align-content: center; }
.crd-room-carousel .swiper-pagination { position: relative !important; bottom: auto !important; text-align: left !important; padding-right: 0 !important; padding-left: 0; margin: 0; }
.crd-room-carousel .crd-arrows { display: flex; gap: 8px; }
.crd-room-carousel .crd-btn-prev,
.crd-room-carousel .crd-btn-next { position: static !important; margin: 0; color: #212121; }
.crd-room-carousel .crd-btn-prev::after,
.crd-room-carousel .crd-btn-next::after { font-size: 20px; font-weight: 700; }

/* ============================================================
   Carousel dots (.carousel-with-dot)
   ============================================================ */
.carousel-with-dot .swiper-pagination {
    position: absolute;
    text-align: right;
    padding-right: 20px;
	bottom: -40px !important;
    z-index: 0;
}

/* Hide pagination before JS moves it into .crd-carousel-nav (prevents right→left flash) */
.elementor-widget-image-carousel .swiper-pagination {
    opacity: 0;
}
.crd-carousel-nav .swiper-pagination {
    opacity: 1;
    transition: opacity 0.15s;
}

.carousel-with-dot .swiper-pagination-bullet {
    background: #ff4b6c;
    border-radius: 5px;
    height: 6px;
    width: 20px;
    opacity: 0.4;
    z-index: 1;
}

.carousel-with-dot .swiper-pagination-bullet-active {
    background: #ff4b6c;
    opacity: 1;
    width: 50px;
}

@media (max-width: 849px) and (orientation: landscape) {
    .accordion .toggle { left: 420px; top: 18px; }
}

/* ============================================================
   Mobile (max-width: 549px)
   ============================================================ */
@media (max-width: 549px) {
    h1.titre-home { font-size: 50px; line-height: 50px; text-align: left; }
    .titre-inter { font-size: 48px; line-height: 100%; }
    ul.menu-rooms { font-size: 35px; }
    ul.menu-rooms li { margin-left: 0px; }
    .button span { font-size: 12px; }
    .overlay-rooms { padding: 50px 20px; }
    #bg-chambres { text-align: left; }
    footer .col-inner ul li { margin-left: 0; display: block; }
    .flickity-page-dots { bottom: -55px; left: 30px; position: absolute; text-align: center; }
    .slider-nav-dots-dashes-spaced .flickity-page-dots .dot { border-radius: 0; height: 4px; width: 40px; }
    .accordion-title { max-width: 350px; margin: auto; }
    .accordion-inner { max-width: 350px; }
    .accordion .toggle { left: 300px; font-size: 7px; top: 18px; }
    .text-offres { max-width: 80%; margin: auto; }
    .pictos-chambres { font-size: 14px; }
    .pictos-chambres img { max-height: 20px; max-width: 30px; margin-left: 10px !important; }
    .pictos-chambres img:first-child { margin-left: 1px !important; }

    /* Swiper pagination - center dots on mobile */
    .carousel-with-dot .swiper-pagination {
        text-align: center;
        padding-right: 0;
        left: 0 !important;
        width: 100% !important;
    }
	
	.carousel-with-dot .swiper-pagination { bottom: -10px !important; }

}

/* ============================================================
   Mobile (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {

    /* cordelia_rooms_hover */
    ul.menu-rooms {
        font-size: 35px;
        line-height: 40px;
        text-align: left;
    }
	
	.crd-room-carousel .crd-room-swiper {
		height: 400px;
	}
	
	.elementor-element .cordelia-col-carousel {
		height: auto !important;
	}
	
	.crd-room-carousel .crd-nav {
		top: 400px;
	}
}

button.ui-datepicker-trigger {
    border: 1px solid transparent;
    border-radius: 0;
    box-sizing: border-box;
    color: currentColor;
    cursor: pointer;
    display: inline-block;
    font-size: .97em;
    font-weight: bolder;
    letter-spacing: .03em;
    line-height: 2.4em;
    margin-right: 1em;
    margin-top: 0;
    max-width: 100%;
    min-height: 2.5em;
    padding: 0 1.2em;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-rendering: optimizeLegibility;
    text-shadow: none;
    text-transform: uppercase;
    transition: transform .3s, border .3s, background .3s, box-shadow .3s, opacity .3s, color .3s;
    vertical-align: middle;
}

.promo-home input[type=submit] {
    color: #ff4b6c;
    font-size: .97em;
	letter-spacing: .03em;
    text-transform: uppercase;
	font-family: Inter, sans-serif;
}
.promo-home button:hover {
    background-color: white !important;
    color: #fff;
    text-decoration: none;
}
.elementor-lightbox .elementor-lightbox-image {
    border-radius: 8px !important;
}

input.asDatePicker.hasDatepicker, #rate {
    font-size: .97em;
    font-weight: 300;
    height: 2.507em;
    letter-spacing: normal;
    line-height: 1.552em;
	font-family: Inter, sans-serif;
}

.input-date-resa select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type=text]:focus,
input[type=date]:focus,
input[type=email]:focus,
input[type=url]:focus,
select:focus,
textarea:focus {
	border: 1px solid #fff !important;
	outline: none;
}

::placeholder {
  opacity: 1;
}

#rate:focus {
    outline: none;
    border-color: #ffffff !important;
    box-shadow: 0 0 5px #ccc;
}

.promo-home input[type=submit]:hover {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .2);
    color: #ff4b6c;
    opacity: 1;
    outline: none;
}

.promo-home button.ui-datepicker-trigger:hover {
    background-color: transparent !important;
}

.input-date-resa i.fa-calendar {
    top: -2px;
}

li.menu-contact-link.menu-item a {
    color: #FF4B6C !important;
}

.wpml-ls-legacy-list-horizontal a {
    padding: 5px 5px 6px;
}

/* ============================================================
   Animation d'entrée des titres des pages (Hero)
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .anim-entree {
    opacity: 0;
    transform: scale(1.3);
    transition: transform 1.6s, opacity .7s ease-in;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
  }
  .anim-entree.is-visible {
    opacity: 1;
    transform: translateZ(0) scale(1);
    transition-delay: .1s;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .anim-entree-not-hp {
    opacity: 0;
    animation: animEntreeNotHp 1s ease-out .1s forwards;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
  }
  @keyframes animEntreeNotHp {
    from { opacity: 0; transform: translateX(-80px) scale(1.3); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
  }
}

/* Carousel pagination bullets — curseur pointer + zone de clic étendue (global) */
.carousel-with-dot .swiper-pagination-bullet {
    position: relative;
    cursor: pointer !important;
}
.carousel-with-dot .swiper-pagination-bullet::after {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
}

/* Room detail page — hero background (DCE dynamic tag bypasses Elementor's bg-size/position output) */
.elementor-element-338a853 {
    background-size: cover !important;
    background-position: center center !important;
}

/* ============================================================
   Elementor image carousel nav bar (.crd-carousel-nav)
   Notre Quartier (homepage) + Petit Dejeuner — injected by JS
   ============================================================ */
.crd-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 8px 10px;
}

.crd-carousel-nav .swiper-pagination {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    text-align: left !important;
    padding-right: 0 !important;
    width: auto !important;
}

.crd-carousel-arrows {
    display: flex;
    gap: 8px;
}

.crd-carousel-prev,
.crd-carousel-next {
    position: static !important;
    margin: 0;
    color: #212121;
}

.crd-carousel-prev::after,
.crd-carousel-next::after {
    font-size: 20px;
    font-weight: 700;
}

/* Room card loop — mobile reorder: Title / Pictos / Photo / Text / CTAs */
@media (min-width: 768px) {
    .elementor-element-d5998a0,
    .elementor-element-3652b6b {
        display: flex !important;
    }
}

@media (max-width: 767px) {
    /* Dissolve these two containers so their children join the row flex flow */
    .elementor-element-d5998a0,
    .elementor-element-3652b6b {
        display: contents;
    }

    /* Set stacking order on all direct (or promoted) children of the row */
    .elementor-element-2a35d04 { order: 0; }   /* anchor */
    .elementor-element-1cfb62d { order: 1; width: 100%; }  /* title */
    .elementor-element-b24590f { order: 2; width: 100%; }  /* pictos */
    .elementor-element-c10bc79 { order: 3; margin-bottom: 30px; }  /* carousel */
    .elementor-element-b89f814 { order: 4; width: 100%; }  /* text */
    .elementor-element-94318d8 { order: 5; width: 100%; }  /* CTAs */
}

/* ============================================================
   Menu modal — correctifs Safari
   ============================================================ */

/* 1. Suppress blue focus ring on menu toggle/close button (Safari iPhone) */
.elementor-menu-toggle:focus,
.elementor-menu-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* 2. Active language in pink — targets Elementor WPML widget active class */
.elementor-widget-wpml-language-switcher .wpml-elementor-ls .wpml-ls-item .wpml-ls-link.wpml-ls-link__active {
    color: #ff4b6c !important;
}