/*
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-size: 12px; font-weight: 500; padding-bottom: 6px; }
.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; }

/* ============================================================
   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; }

/* ============================================================
   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;
    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: #212121;
    padding: 0.95em 1em;
    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);
}

/* ============================================================
   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: 80px;
    font-weight: 300;
    line-height: 80px;
}

.article-content h3 {
    font-family: 'Canela', sans-serif;
    font-size: 60px;
    font-weight: 300;
    line-height: 60px;
}

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

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

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

/* ============================================================
   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: -6px !important;
}

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

.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; }
}