/*
Theme Name: Le Mas Normand
Theme URI: https://www.lemasnormand.com
Author: Le Mas Normand
Description: Thème WordPress identique au site lemasnormand.com
Version: 2.0.27
Text Domain: lemasnormand
*/

/*
  Ce thème utilise directement les CSS originaux du site lemasnormand.com :
  - assets/css/common.min.css
  - assets/css/elloha-template-43.min.css
  - assets/css/custom.css

  Le fichier style.css ne contient que les ajustements WordPress
  (remplacement des URLs, corrections mineures d'intégration).
*/

/* =========================================================
   VARIABLES (identiques au custom.css original)
   ========================================================= */
:root {
    --color-link:       #D3C0A8;
    --color-btn:        #D3C0A8;
    --color-btn-txt:    #261A0A;
    --color-text:       #140D04;
    --color-text-white: #FFFFFF;
    --color-title:      #987B57;
    --color-bg-1:       #FFFFFF;
    --color-bg-2:       #F2EFEA;
    --color-bg-3:       #98A47E;
    --color-red:        #DA6062;
    --font-title:       Schoolbell;
    --font-text:        Poppins;
}

/* =========================================================
   HEADER — éviter le décalage au hover (font-weight:700 Elloha change la largeur)
   On garde l'effet visuel via text-shadow sans modifier les métriques du texte.
   ========================================================= */
.first-nav .menu-pictos-etc .text-white:hover,
.first-nav .menu-pictos-etc .principal-item-menu:hover {
    font-weight: 400 !important;
    color: #ffffff !important;
    -webkit-text-stroke: 0.6px #ffffff;
    text-shadow: 0 0 1px #ffffff;
}

/* =========================================================
   DROPDOWN HEADER — forcer masquage par défaut
   (le CSS Bootstrap de common.min.css peut afficher .dropdown-menu
    en display:block ; on réimpose le masquage du CSS original)
   ========================================================= */
.first-nav .sub-menu,
.first-nav .dropdown-menu.sub-menu {
    display: none !important;
}
.first-nav .sub-menu.sub-menu-active,
.first-nav .dropdown-menu.sub-menu.sub-menu-active {
    display: block !important;
}

/* Dropdown langues : même logique */
.first-nav .dropdown.languages .dropdown-menu {
    display: none !important;
}
.first-nav .dropdown.languages.open .dropdown-menu {
    display: block !important;
}

/* position: relative sur le parent pour ancrer le dropdown-menu */
.first-nav .dropdown {
    position: relative;
}

/* Styles du dropdown-menu (absent de common.min.css) */
.first-nav .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0;
    z-index: 99999;
    min-width: 200px;
    padding: 8px 0;
    margin: 4px 0 0;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    list-style: none;
}

.first-nav .dropdown-menu > li > a,
.first-nav .dropdown-menu > li > div {
    display: block;
    padding: 8px 20px;
    white-space: nowrap;
}

.first-nav .dropdown-menu > li > a:hover {
    background-color: var(--color-bg-2);
}

/* Le CSS original écrase font-weight sur * — rétablir le gras */
strong, b {
    font-weight: 700 !important;
}

/* =========================================================
   ARTICLE COMPLET (single.php)
   ========================================================= */

/* Héro sans image */
.lmn-single-hero-nothumbnail {
    padding: 120px 0 40px;
    text-align: center;
    background: var(--color-bg-2);
}
.lmn-single-hero-nothumbnail h1 {
    font-family: var(--font-title);
    color: var(--color-title);
    font-size: 2rem;
}

/* Conteneur centré */
.lmn-single-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

/* Fil d'Ariane + date */
.lmn-single-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: #999;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-bg-2);
}
.lmn-single-meta a { color: var(--color-title); }
.lmn-single-meta a:hover { text-decoration: underline; }
.lmn-single-date {
    margin-left: auto;
    font-style: italic;
}

/* Corps de l'article */
.lmn-single-content {
    font-family: var(--font-text);
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text);
}
.lmn-single-content p  { margin-bottom: 16px; }
.lmn-single-content h2,
.lmn-single-content h3 {
    font-family: var(--font-title);
    color: var(--color-title);
    margin: 28px 0 12px;
}
.lmn-single-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
}
.lmn-single-content ul,
.lmn-single-content ol {
    padding-left: 24px;
    margin-bottom: 16px;
}
.lmn-single-content li { margin-bottom: 6px; }

/* Navigation précédent / suivant */
.lmn-single-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--color-bg-2);
}
.lmn-single-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-text);
    font-size: 13px;
    color: var(--color-title);
    max-width: 45%;
}
.lmn-single-nav-next { text-align: right; margin-left: auto; }
.lmn-single-nav-link:hover { opacity: 0.7; }

/* Bouton retour */
.lmn-single-back {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* Annuler line-clamp Elloha sur la liste news */
.descrip-news-in-news {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
}

/* Articles blog — bouton burger "Lire la suite" */
.lmn-news-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 0;
    margin-top: 8px;
    font-family: var(--font-text);
    font-size: 14px;
    color: var(--color-title);
}

.lmn-burger-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 20px;
}

.lmn-burger-icon span {
    display: block;
    height: 2px;
    background: var(--color-title);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Croix quand ouvert */
.lmn-news-toggle[aria-expanded="true"] .lmn-burger-icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.lmn-news-toggle[aria-expanded="true"] .lmn-burger-icon span:nth-child(2) {
    opacity: 0;
}
.lmn-news-toggle[aria-expanded="true"] .lmn-burger-icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Texte du bouton */
.lmn-news-toggle[aria-expanded="true"] .lmn-toggle-label::before {
    content: "Réduire";
}
.lmn-news-toggle[aria-expanded="false"] .lmn-toggle-label::before {
    content: "Lire la suite";
}
.lmn-toggle-label { display: none; } /* texte géré via ::before */

/* Contenu additionnel révélé */
.lmn-news-rest {
    margin-top: 12px;
}

/* Annuler line-clamp Elloha sur les articles */
.descrip-news-in-news {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
}

/* Articles blog — accordéon */
.lmn-news-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--color-bg-2);
}

.lmn-news-item {
    border-bottom: 1px solid var(--color-bg-2);
}

.lmn-news-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    text-align: left;
}

.lmn-news-trigger h2 {
    font-family: var(--font-title);
    color: var(--color-title);
    font-size: 1.25rem;
    margin: 0;
    flex: 1;
}

.lmn-news-trigger i {
    color: var(--color-title);
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.lmn-news-trigger[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.lmn-news-body {
    display: none;
    padding: 0 0 24px;
}

.lmn-news-body.open {
    display: block;
}

.lmn-news-body .lmn-news-img {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.lmn-news-body .lmn-news-content {
    font-family: var(--font-text);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text);
}

.lmn-news-body .lmn-news-content p {
    margin-bottom: 12px;
}

/* =========================================================
   ACCORDÉON — Page La Maison
   ========================================================= */
.lmn-page-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px 40px;
}

.lmn-section-heading {
    font-family: var(--font-title);
    color: var(--color-title);
    text-align: center;
    margin-bottom: 16px;
}

.lmn-intro-text p {
    text-align: center;
    margin-bottom: 12px;
    color: var(--color-text);
    font-family: var(--font-text);
    font-size: 15px;
    line-height: 1.65;
}

.lmn-accordion {
    margin-top: 32px;
    border-top: 1px solid var(--color-bg-2);
}

.lmn-accordion-item {
    border-bottom: 1px solid var(--color-bg-2);
}

.lmn-accordion-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-title);
    font-size: 1.1rem;
    color: var(--color-title);
    cursor: pointer;
    text-align: left;
    gap: 12px;
}

.lmn-accordion-trigger i {
    transition: transform 0.3s ease;
    flex-shrink: 0;
    color: var(--color-title);
}

.lmn-accordion-trigger[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.lmn-accordion-body {
    display: none;
    padding: 0 0 20px;
}

.lmn-accordion-body.open {
    display: block;
}

.lmn-accordion-body p {
    color: var(--color-text);
    font-family: var(--font-text);
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 10px;
    text-align: center;
}

/* =========================================================
   CORRECTIONS D'INTÉGRATION WORDPRESS
   ========================================================= */

/* WordPress ajoute un margin-top au body pour la barre d'admin */
body.admin-bar .first-nav {
    top: 32px;
}
body.admin-bar .first-nav.first-nav-fixed {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar .first-nav,
    body.admin-bar .first-nav.first-nav-fixed {
        top: 46px;
    }
}

/* Le header et le menu mobile ouvert ont le même z-index (10000) dans le
   CSS d'origine, qui suppose un header de 62px de haut pile. Avec notre
   logo, le header est plus haut et se fait recouvrir par le menu (le logo
   disparaît). On passe le header au-dessus pour qu'il reste visible. */
.first-nav.first-nav-fixed {
    z-index: 10001;
}

/* Le menu mobile ouvert se plaçait à top:62px pile (valeur figée du CSS
   d'origine). --lmn-header-height est mesurée en JS à l'ouverture du menu
   et reflète la vraie hauteur du header, pour ne jamais chevaucher le logo. */
.mobile-nav .menu-mobile.menu-mobile-active {
    top: var(--lmn-header-height, 62px);
    height: calc(100% - var(--lmn-header-height, 62px));
}

/* Pictos SVG (masque CSS) : le <span> n'a pas de display explicite dans le
   CSS d'origine. Un <span> est "inline" par défaut, or un élément inline
   ignore ses propriétés width/height — le picto se retrouve donc à 0x0
   dans certains contextes (menu mobile). On force "block" partout. */
.new-picto-svg {
    display: block;
}

/* Sélecteur de langue : le CSS d'origine ne masque/affiche jamais le menu
   déroulant (fr/en), ne retire pas les puces de liste, et ne le fait pas
   flotter par-dessus le reste — on refait un petit menu propre. */
.dropdown.languages {
    position: relative;
}
.dropdown.languages .dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: 10;
    margin: 0;
    padding: 4px;
    list-style: none;
    min-width: 60px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.dropdown.languages.open .dropdown-menu {
    display: block;
}
.dropdown.languages .dropdown-menu li + li {
    margin-top: 2px;
}
.dropdown.languages .dropdown-menu a {
    display: block;
    padding: 6px 14px;
    border-radius: 4px;
    text-decoration: none !important;
    text-align: center;
}
.dropdown.languages .dropdown-menu a:hover {
    background: rgba(0, 0, 0, 0.06);
}
.dropdown.languages .dropdown-menu .flag {
    color: var(--color-text);
    font-size: 13px;
}

/* Correction logo WordPress (the_custom_logo retourne un <a> supplémentaire) */
.logo-header,
.custom-logo {
    max-height: 80px;
    width: auto;
}

/* Images WordPress responsive */
.wp-post-image,
.attachment-full,
.size-full {
    max-width: 100%;
    height: auto;
}

/* Pagination WordPress */
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    width: 100%;
}

.page-numbers a,
.page-numbers span {
    padding: 8px 14px;
    border: 1px solid var(--color-btn);
    color: var(--color-text) !important;
    font-size: 14px;
    transition: background 0.2s ease;
}

.page-numbers .current {
    background: var(--color-btn);
    color: var(--color-btn-txt) !important;
}

.page-numbers a:hover {
    background: var(--color-bg-2);
}

/* Notices formulaire contact */
.lmn-contact-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 4px;
    margin-bottom: 24px;
    font-family: var(--font-text);
    font-size: 14px;
}
.lmn-contact-notice--ok  { background: #eaf5ea; color: #2d6a2d; border: 1px solid #b5ddb5; }
.lmn-contact-notice--err { background: #fdf0f0; color: #8b2020; border: 1px solid #e8b5b5; }
.lmn-contact-notice i    { font-size: 1.3rem; flex-shrink: 0; }

/* Formulaire de contact — cohérence avec le style original */
.form-control {
    border: 1px solid #ccc;
    border-radius: 0;
    font-family: var(--font-text);
    font-size: 14px;
    height: 45px;
    padding: 12px;
    width: 100%;
    color: var(--color-text);
    background: var(--color-bg-1);
    transition: border-color 0.2s ease;
}

.form-control:focus {
    border-color: var(--color-btn);
    outline: none;
    box-shadow: none;
}

textarea.form-control {
    height: auto;
    min-height: 120px;
    resize: vertical;
}

.col-contact-form {
    background: var(--color-bg-2);
    border-radius: 16px;
    padding: 40px;
    max-width: 760px;
    box-sizing: border-box;
    position: relative;
}
@media (max-width: 600px) {
    .col-contact-form { padding: 24px; border-radius: 12px; }
}
.col-contact-form::before {
    content: "Votre demande";
    display: block;
    font-family: var(--font-title);
    font-size: 32px;
    color: var(--color-title);
    margin-bottom: 24px;
}

.wpcf7-form p { margin-bottom: 22px; }
.wpcf7-form label {
    display: block;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-title);
    margin-bottom: 8px;
}
.wpcf7-form .cf7-row { display: flex; flex-wrap: wrap; gap: 20px; }
.wpcf7-form .cf7-row .cf7-col { flex: 1 1 220px; }

.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit) {
    border: 1px solid #e3ddd3;
    border-radius: 10px;
    font-size: 15px;
    height: 48px;
    padding: 12px 16px;
    width: 100%;
    color: var(--color-text);
    background: var(--color-bg-1);
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):focus {
    border-color: var(--color-btn);
    outline: none;
    box-shadow: 0 0 0 3px rgba(211,192,168,.35);
}
.wpcf7-form textarea.wpcf7-form-control {
    height: auto;
    min-height: 140px;
    padding-top: 14px;
    resize: vertical;
}
.wpcf7-form ::placeholder { color: #a89e8f; }

.cf7-submit-row { margin-bottom: 0 !important; text-align: center; }
.wpcf7-form .wpcf7-submit {
    width: auto;
    display: inline-block;
    border-radius: 30px;
    padding: 14px 40px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    letter-spacing: .02em;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.wpcf7-form .wpcf7-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    opacity: 1;
}

/* =========================================================
   AJUSTEMENTS SPÉCIFIQUES AUX PAGES WORDPRESS
   ========================================================= */

/* Espacement sous le header fixe pour les pages intérieures */
.page-with-hero-img {
    /* Le hero a position absolute, pas besoin de padding */
}

.page-no-hero {
    padding-top: 80px; /* Compense la hauteur du header fixe */
}

/* =========================================================
   BOUTON DÉCORATIF — SVG adaptatif (btn-deco)
   ========================================================= */

/* Le conteneur porte le padding — pas le bouton intérieur.
   Ainsi la SVG (inset:0) entoure exactement le texte. */
.btn-contain {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
}

/* Annuler le positionnement absolu Elloha et retirer le padding
   du bouton (il est désormais géré par .btn-contain).
   bottom:33px/40px Elloha décale le texte vers le haut → bottom:auto annule ça. */
.btn-contain .link-page-global,
.btn-contain .btn {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Reset styles navigateur sur <button> dans .btn-contain */
.btn-contain button {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    font-family: var(--font-text);
    font-size: 20px;
    line-height: 1.3 !important;
    vertical-align: middle;
}

/* SVG décoratif : couvre exactement .btn-contain (texte + padding) */
.btn-deco {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* =========================================================
   OWL CAROUSEL — flèches et images
   ========================================================= */

/* Barre de navigation au-dessus du carousel, alignée à droite */
.presta-big-contain.owl-carousel {
    position: relative;
    padding-top: 52px;
}

.presta-big-contain.owl-carousel .owl-nav {
    position: absolute;
    top: 0;
    right: 0;
    display: flex !important;
    align-items: center;
    gap: 20px;
    margin: 0;
}

/* Flèches : style épuré, pas de fond */
.presta-big-contain.owl-carousel .owl-nav button.owl-prev,
.presta-big-contain.owl-carousel .owl-nav button.owl-next {
    position: static !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    padding: 4px !important;
    margin: 0 !important;
    opacity: 1 !important;
    line-height: 0;
}
.presta-big-contain.owl-carousel .owl-nav button:hover { opacity: 0.5 !important; }
.presta-big-contain.owl-carousel .owl-nav.disabled { display: none !important; }

/* Forcer la hauteur de l'image dans les cartes options/offres */
.presta-contain .bg-img {
    height: 250px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 8px;
    display: block;
}

/* Classe .hidden utilisée par Elloha pour masquer les éléments par défaut */
.hidden {
    display: none !important;
}

/* =========================================================
   GALERIE — carousel de photos
   ========================================================= */
.section-gallery-lmn { background: var(--color-bg-2); }

.gallery-thumb-lmn {
    display: block;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 4 / 3;
}
.gallery-thumb-lmn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.gallery-thumb-lmn:hover img { transform: scale(1.05); }

/* =========================================================
   SINGLE CHAMBRE — section "Nos services" (section-scea-offer)
   ========================================================= */

/* Ligne de badges (animaux admis, fumeur/non-fumeur...) — côte à côte, centrés */
.lmn-badges-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 20px;
}
.lmn-pets-badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: default;
}
.lmn-pets-badge .fi,
.lmn-pets-badge .las {
    font-size: 28px;
    color: var(--color-title);
}
.lmn-pets-tooltip {
    display: none;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    background: var(--color-title);
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
}
.lmn-pets-badge:hover .lmn-pets-tooltip {
    display: block;
}

/* Picto fumeur/non-fumeur dans "Infos pratiques" : même gabarit que les
   autres pictos SVG de la fiche (span.new-picto-svg fait 18x18px). */
.picto-and-bloc-infos i.las {
    font-size: 18px;
    line-height: 18px;
    color: var(--color-title);
}

/* Puces "Nos services" (coche + texte) : espacement resserré */
.section-scea-offer .options-scea-details {
    display: flex !important;
    align-items: center;
    gap: 4px;
}
.section-scea-offer .options-scea-details i {
    margin-right: 0 !important;
}

/* Carrousel photos chambre : flèches sous les photos, plus de dots superposés */
#chambre-gallery-owl .owl-nav {
    position: static;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 16px;
}
#chambre-gallery-owl .owl-nav button.owl-prev,
#chambre-gallery-owl .owl-nav button.owl-next {
    position: static !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    padding: 4px !important;
    margin: 0 !important;
    opacity: 1 !important;
    line-height: 0;
}
#chambre-gallery-owl .owl-nav button:hover { opacity: 0.6 !important; }
#chambre-gallery-owl .owl-dots {
    position: static;
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

/* Carte autour — feedback visuel sur la carte sélectionnée */
.section.section-around .presta-contain.around-card-active {
    outline: 2px solid var(--color-btn);
    outline-offset: 3px;
}
.section.section-around .presta-contain:hover {
    opacity: 0.92;
    transition: opacity 0.2s ease;
}

/* Liens "Notre recommandation" — conserver le style visuel du div original */
.section.section-around a.icon-to-see {
    text-decoration: none !important;
    color: inherit !important;
}
.section.section-around a.icon-to-see:hover {
    text-decoration: underline !important;
}

/* section-around : SVG décoratif qui s'adapte à la taille du texte */
.section.section-around .btn-contain {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 32px !important;
}
.section.section-around .btn-contain svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    overflow: visible;
}
/* Annuler le positionnement absolu Elloha sur .icon-to-see dans section-around */
.section.section-around .icon-to-see {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    white-space: nowrap;
}
.section.section-around .comment-item-w-contain {
    position: relative;
    z-index: 1;
}

/* Bandeau d'accueil : voile plus opaque pour que le bouton "Réserver en ligne"
   reste bien lisible sur toutes les photos de fond (comme sur le site d'origine) */
.section-widget-be .opacity {
    background: rgba(45, 27, 7, .5);
}

/* Bouton "Réserver en ligne" du bandeau d'accueil : sur le site d'origine, ce
   bouton faisait partie d'un large widget de réservation avec un fond plein
   (rounded-box). Ici il est réduit à un simple lien : on lui donne un fond
   plein pour qu'il reste visible quelle que soit la photo affichée derrière,
   plutôt que de dépendre uniquement de l'opacité du voile. */
.section-widget-be .btn-reserver {
    display: inline-block;
    background: var(--color-btn);
    color: var(--color-btn-txt) !important;
    padding: 14px 32px;
    border-radius: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
    transition: transform .2s ease, box-shadow .2s ease;
}
.section-widget-be .btn-reserver:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}

/* Bouton retour haut */
#scroll-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-btn);
    color: var(--color-btn-txt) !important;
    font-size: 1.2rem;
    margin: 16px auto;
}

/* Galerie photos d'une fiche chambre : le CSS original met .img-pres-contain
   en display:flex, ce qui empêche Owl Carousel de calculer correctement la
   largeur de ses slides une fois transformé en carrousel. */
/* Même gabarit que la photo principale (.img-pres-offer : max-width 350px).
   !important nécessaire : la règle d'origine .img-pres-contain{display:flex!important}
   est elle-même en !important et gagnerait sinon. */
#chambre-gallery-owl.owl-carousel {
    display: block !important;
    overflow: hidden;
    width: 100%;
    max-width: 350px;
}
#chambre-gallery-owl.owl-carousel .owl-stage-outer {
    width: 100% !important;
}
#chambre-gallery-owl.owl-carousel .bg-img-div {
    width: 100%;
    height: 100%;
}
#chambre-gallery-owl.owl-carousel .bg-img-div img {
    width: 100%;
    max-width: none;
}

/* Calendrier de disponibilités (widget KE-booking) : le widget garde une
   largeur fixe en pixels (réglée côté KE-booking, pas responsive). Sur
   ordinateur, la carte blanche qui l'entoure ("Nos disponibilités") hérite
   de .content-section (max-width 1600px) et laisse donc un immense vide
   autour d'un widget de ~340px. On resserre cette carte à partir de 1024px
   pour qu'elle épouse le widget ; en dessous (mobile/tablette), rien ne
   change : la carte garde sa largeur naturelle actuelle. */
@media (min-width: 1024px) {
    .section-calendar .calendars {
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Le bouton "réserver" KE-booking doit apparaître sous le calendrier, pas à
   côté : .calendar-container est en display:flex (ligne) par défaut. */
.section-calendar .calendar-container {
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Onglets de sélection de chambre au-dessus du calendrier */
.keb-room-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}
.keb-room-tab {
    background: var(--color-bg-2);
    border: 1px solid var(--color-link);
    color: var(--color-text);
    font-family: inherit;
    font-size: 14px;
    padding: 8px 18px;
    border-radius: 20px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.keb-room-tab:hover {
    background: var(--color-btn);
}
.keb-room-tab.active {
    background: var(--color-title);
    border-color: var(--color-title);
    color: var(--color-text-white);
}

/* Moteur de réservation (widget "IBE") sur la fiche d'une chambre : l'iframe
   est en height:100%, ce qui ne se résout que si son conteneur a une
   hauteur définie (sinon il s'affiche à hauteur nulle). */
.section-booking-engine #ke-booking-ibe-frame {
    height: 700px !important;
    max-width: 900px;
    margin: 0 auto;
}
.section-booking-engine #ke-booking-ibe-frame iframe {
    border: none;
}