/* MOB HOUSE 2: mobhouse-only rules on top of the mobhotel theme (editorial blocks of the mobhouse catalog content) */

/* Category intro (category description) and CMS text sections, laid out like the mobhotel text blocks */
.category-description,
._mhs_section .content {
    width: 100%;
    padding: 3em 3em 2em;
    text-align: left;
}

.category-description h2,
._mhs_section h2 {
    margin: 0 0 .75em;
}

._mhs_section h3 {
    margin: 0 0 .25em;
    text-transform: uppercase;
}

.category-description p,
._mhs_section p {
    margin: 0;
    max-width: 60em;
}

@media only screen and (max-width: 639px) {
    .category-description,
    ._mhs_section .content {
        padding: 2em 1.5em 1em;
    }
}

/* same column as .right-container-template (left fixed menu) for the intro and CMS sections */
@media only screen and (min-width: 980px) {
    .category-description,
    ._mhs_section { width: 70%; margin-left: auto; }
}
@media only screen and (min-width: 1400px) {
    .category-description,
    ._mhs_section { width: 72%; }
}
@media only screen and (min-width: 1700px) {
    .category-description,
    ._mhs_section { width: 78%; }
}

/* Meeting landing links (services / menus) */
.section_links {
    display: flex;
    justify-content: center;
    gap: 1.5em;
    flex-wrap: wrap;
    padding: 2em 0 4em;
    text-transform: uppercase;
}

.section_links a {
    display: inline-block;
    padding: .6em 1.5em;
    border: 2px solid #1D1D1B;
    border-radius: 2em;
    font-weight: bold;
}

.mhs-link {
    text-decoration: underline;
}

.category-description {
    overflow-wrap: anywhere;
}

/* MOB HOUSE logo: portrait like the mobhotel one (logo_svg.phtml), same sizes and colour, no override */

/* ---- Mobhouse editorial sections "v2" (old theme _mhs_sections): image 50% / text 50%, alternating ---- */
._mhs_section.v2,
._mhs_section.v2 .content { padding: 0; }
._mhs_section.v2 img,
._mhs_section.v2 picture img { display: block; width: 100%; height: auto; }
._mhs_section.v2 picture { display: block; }
._mhs_section.v2 ._mhs_detail { box-sizing: border-box; padding: 2.5em 1.5em; text-align: left; }
._mhs_section.v2 ._mhs_detail .content { padding: 0; }
._mhs_section.v2 ._mhs_detail h3 { margin-bottom: .6em; }
._mhs_section.v2 ._mhs_detail p { max-width: none; margin-bottom: 1em; }
@media only screen and (min-width: 768px) {
    ._mhs_section.v2:not(.section_links) { display: flex; align-items: stretch; flex-wrap: wrap; }
    ._mhs_section.v2 > picture:only-child { width: 100%; }
    ._mhs_section.v2 ._mhs_image,
    ._mhs_section.v2 ._mhs_detail { width: 50%; flex: 0 0 50%; }
    ._mhs_section.v2 ._mhs_detail { display: flex; flex-direction: column; justify-content: center; padding: 4vw; }
    ._mhs_section.v2 ._mhs_image { position: relative; min-height: 38vw; }
    ._mhs_section.v2 ._mhs_image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
    ._mhs_section.v2.odd ._mhs_image { order: 1; }
    ._mhs_section.v2.odd ._mhs_detail { order: 2; }
    ._mhs_section.v2.even ._mhs_image { order: 2; }
    ._mhs_section.v2.even ._mhs_detail { order: 1; }
}

/* Category title laid over the bottom-left of the category header image */
.category-image { position: relative; }
.category-image img { display: block; }
.category-image .mobhouse-category-title {
    position: absolute; left: 0; bottom: .3em; margin: 0; padding: 0 .5em; text-align: left;
    color: #fff; text-transform: uppercase; font-size: 2.6rem; line-height: 1; text-shadow: 0 0 .4em rgba(0,0,0,.25);
}
@media only screen and (min-width: 980px) { .category-image .mobhouse-category-title { font-size: 5vw; padding: 0 .3em; } }

.footer-block--findmob p span { margin-left: .3em; }

/* Product descriptions of the rooms / offers lists */
.mobhouse-room-description ul { list-style: none; margin: 0; padding: 0; }
.mobhouse-room-description li { margin: 0 0 .25em; }
/* rooms: square pictures filling half of the block like the mobhotel sliders (the mobhouse gallery pictures are landscape) */
.body-rooms .category-slider picture img { aspect-ratio: 1 / 1; object-fit: cover; }
/* room page: gallery pictures of any size cropped to the mobhotel room banner (2101x1061 desktop, 641x711 mobile slides) */
.catalog-product-view .swiper-slide--room img { width: 100%; aspect-ratio: 2101 / 1061; object-fit: cover; }
@media only screen and (max-width: 639px) { .catalog-product-view .swiper-slide--room img { aspect-ratio: 641 / 711; } }
.mobhouse-offer-description p { margin-bottom: 1em; }
.mobhouse-offer-description p a { display: inline-block; padding: .5em 1.4em; border: 2px solid #1D1D1B; border-radius: 2em; font-weight: bold; text-transform: uppercase; text-decoration: none; }

/* ---- Accordion + jobs list (old theme _accordion / Recruitment module) ---- */
.accordion { padding: 0; margin: 0; list-style: none; text-align: left; width: 100%; }
.accordion li { list-style: none; margin: 0; }
.accordion li .title { position: relative; border-top: 1px solid #1D1D1B; padding: 1.5em 1.5em 1.7em; cursor: pointer; }
.accordion li .title h3 { display: flex; align-items: center; justify-content: space-between; margin: 0; padding-top: .8em; text-transform: uppercase; }
.accordion li .title h3 .text { max-width: 85%; }
.accordion li .title h3 .sign { position: relative; flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid #1D1D1B; border-radius: 50%; }
.accordion li .title h3 .sign:before, .accordion li .title h3 .sign:after { content: ""; position: absolute; background: #1D1D1B; }
.accordion li .title h3 .sign:before { top: 9px; left: 50%; width: 1px; height: 17px; transition: transform .4s ease-out; }
.accordion li .title h3 .sign:after { top: 50%; left: 9px; width: 17px; height: 1px; }
.accordion li .title.open .sign:before { transform: rotate(-90deg); }
.accordion li .content-wrapper { height: 0; margin: 0; overflow: hidden; }
/* the mobhotel accordion script toggles .open on the title and on the next element (the wrapper) */
.accordion li .content-wrapper .content { width: 100%; box-sizing: border-box; padding: 0 1.5em; height: auto; opacity: 1; overflow: visible; }
.accordion li .content-wrapper.open { height: auto; padding-bottom: 2em; }
.accordion li .content p { margin-bottom: 1.2em; }
.recruitment { width: 100%; }
.recruitment .filters { display: flex; flex-wrap: wrap; align-items: flex-start; padding: 2em 1.5em; text-align: left; }
.recruitment .filters h5 { margin: .6em 1.2em 0 0; font-size: 1.6rem; font-weight: 400; }
.recruitment .filters .filter { overflow: hidden; }
.recruitment .filters label { display: inline-block; margin: .6em .5em 0 0; padding: .45em .6em .3em; border: 1px solid #999; border-radius: 5px; color: #999; cursor: pointer; }
.recruitment .filters label:hover, .recruitment .filters label.checked { border-color: #1D1D1B; color: #1D1D1B; }
.recruitment .filters input.input-radio { visibility: hidden; position: absolute; }
.recruitment ul.recruitment-data .title span.type { position: absolute; top: 1.2em; left: 1.5em; font-size: .85em; font-weight: bold; text-transform: uppercase; }
.recruitment ul.recruitment-data .content .details ul { padding: 0; margin: 0; list-style: none; }
.recruitment ul.recruitment-data .content .details .actions { padding: 1.5em 0 2em; }
.recruitment ul.recruitment-data .content .details .actions a { display: inline-block; margin: 0 .8em .6em 0; padding: .45em 1.2em; border: 1px solid #1D1D1B; border-radius: 2em; text-transform: uppercase; font-size: .85em; text-decoration: none; }
.recruitment ul.recruitment-data .content .description ul { padding: 0 0 1em 1.5em; }
.recruitment ul.recruitment-data .content .description li { list-style: disc; }
.recruitment .no-jobs { text-align: center; padding: 4em 1em; font-size: 1.6em; }
@media only screen and (min-width: 768px) {
    .accordion li .title { padding: 2em 2em 2.2em; }
    .accordion li .content-wrapper .content { padding: 0 2em; }
    .recruitment ul.recruitment-data .content { display: flex; }
    .recruitment ul.recruitment-data .content .details, .recruitment ul.recruitment-data .content .description { width: 50%; }
    .recruitment ul.recruitment-data .title span.type { left: 2em; top: 1.5em; }
}
@media only screen and (min-width: 980px) {
    .recruitment, .accordion { width: 70%; margin-left: auto; }
}
@media only screen and (min-width: 1400px) { .recruitment, .accordion { width: 72%; } }
@media only screen and (min-width: 1700px) { .recruitment, .accordion { width: 78%; } }
.recruitment .accordion { width: 100%; margin: 0; }

/* Two images cross-fading in one figure (prod mobhouse sections with a 2-image slider) */
.mh-fade-2 { position: relative; }
.mh-fade-2 picture + picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: mhfade2 8s infinite; opacity: 0; }
.mh-fade-2 picture + picture img { width: 100%; height: 100%; object-fit: cover; }
@keyframes mhfade2 { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
.category-image--noimage { padding: 8em 1.5em 0; text-align: left; }
.category-image--noimage .mobhouse-category-title { position: static; color: #1D1D1B; text-shadow: none; padding: 0; font-size: 3.2rem; }
@media only screen and (min-width: 980px) { .category-image--noimage { padding: 7em 3em 0; } .category-image--noimage .mobhouse-category-title { font-size: 4vw; } }
.event-details__subtitle { margin: -.2em 0 .8em; }
.body-radio .category-image--noimage { display: none; }
@media only screen and (max-width: 639px) { body .category-image { display: block; } .category-image picture, .category-image img { display: block; width: 100%; } .category-image .mobhouse-category-title { font-size: 2.2rem; } }

/* Legal pages (cgv, mentions-legales): the mobhouse accordion content laid out like the mobhotel ones
   (.legal-wrapper, mobhotel css/pages/cms_legal.css): one centred column, every section open, its title an h2 */
._mhs_section.legal-notice { width: auto; margin: 0; padding: 1.75em 4% 0; box-sizing: border-box; }
._mhs_section.legal-notice .wrapper { padding: 0; }
/* undo the accordion module (grey items, 70% text, indented paragraphs) and the 70-78% width of mobhouse sections */
.legal-notice .accordion { width: 100%; margin: 0; }
.legal-notice .accordion li { background: none; }
.legal-notice .accordion li .content .description { width: 100%; text-align: justify; word-wrap: break-word; }
.legal-notice .accordion li .content p { text-indent: 0; }
.legal-notice .accordion li .content h5 { margin: 1.5em 0 .5em; font-size: 1.4rem; text-align: left; }
.legal-notice .accordion li .title { border: 0; padding: 0; cursor: default; pointer-events: none; }
.legal-notice .accordion li .title h3 { display: block; margin: 0 0 16px; padding: 0; font-size: 2rem; line-height: 1.2; text-align: left; }
.legal-notice .accordion li .title h3 .text { max-width: none; }
.legal-notice .accordion li .title h3 .sign { display: none; }
.legal-notice .accordion li .content-wrapper { height: auto; overflow: visible; margin: 0 0 3.25em; padding: 0; }
.legal-notice .accordion li .content-wrapper .content { padding: 0; text-align: justify; word-wrap: break-word; }
.legal-notice .accordion li .content p { max-width: none; margin-bottom: 1.25em; }
.legal-notice a { text-decoration: underline; }
@media only screen and (min-width: 980px) {
    ._mhs_section.legal-notice { width: 50%; max-width: 980px; margin: 0 auto; padding-top: 11.65em; }
    .legal-notice .accordion li .title h3 { font-size: 2.2rem; }
}

/* Rooms page: no category picture on mobile (user request 2026-10-30) */
@media only screen and (max-width: 639px) {
    .body-rooms .category-image { display: none; } /* rooms page, FR (chambres) and EN (rooms) */
}