/* ============================================
   NOMADE CAMPER 2026 — Block Styles
   ============================================ */

/* --- Root padding fallback ---
   Les Global Styles utilisateur (BDD) peuvent écraser theme.json et
   définir --wp--style--root--padding-* en chaîne vide. On définit
   donc les variables WP directement à notre valeur, et on force le
   padding sur les blocs avec has-global-padding. */
:root {
    --nc-root-pad: clamp(16px, 4vw, 32px);
    --wp--style--root--padding-left: clamp(16px, 4vw, 32px);
    --wp--style--root--padding-right: clamp(16px, 4vw, 32px);
    /* Fallback wide-size si Global Styles BDD écrase le theme.json
       (sans ça, .alignwide se comporte comme alignfull) */
    --wp--style--global--wide-size: 1280px;
    --wp--style--global--content-size: 780px;
}
/* Force le comportement attendu de .alignwide dans un parent constrained :
   max-width 1280 + débordement symétrique via margin négatif
   (auto ne marche pas quand l'enfant est plus large que le parent).
   Calc = (wide-size - content-size) / 2 = (1280-780)/2 = 250px de débord. */
.is-layout-constrained > .alignwide,
.has-global-padding > .alignwide,
.entry-content > .alignwide {
    max-width: var(--wp--style--global--wide-size, 1280px);
    margin-left: calc((var(--wp--style--global--wide-size, 1280px) - var(--wp--style--global--content-size, 780px)) / -2);
    margin-right: calc((var(--wp--style--global--wide-size, 1280px) - var(--wp--style--global--content-size, 780px)) / -2);
}
/* Sur petit écran (< wide-size) → annule le débord pour pas créer de scroll horizontal */
@media (max-width: 1280px) {
    .is-layout-constrained > .alignwide,
    .has-global-padding > .alignwide,
    .entry-content > .alignwide {
        margin-left: auto;
        margin-right: auto;
    }
}
/* !important : les patterns Nomade Camper ont parfois des inline styles
   padding-left:0 / padding-right:0 sauvegardés en BDD via le Site Editor
   qui écrasent les valeurs. has-global-padding indique explicitement que
   le bloc DOIT avoir le padding root, donc on force. */
.has-global-padding {
    padding-left: var(--nc-root-pad) !important;
    padding-right: var(--nc-root-pad) !important;
}
/* Les blocs alignfull dans un parent has-global-padding doivent annuler ce padding */
.has-global-padding > .alignfull {
    margin-left: calc(var(--nc-root-pad) * -1);
    margin-right: calc(var(--nc-root-pad) * -1);
}

/* --- Buttons --- */
.wp-block-button.is-style-primary .wp-block-button__link {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    box-shadow: 0 6px 0 var(--wp--preset--color--primary-dark);
    border: none;
    transform: translateY(0);
    transition: transform .15s, box-shadow .15s;
}
.wp-block-button.is-style-primary .wp-block-button__link:hover {
    transform: translateY(2px);
    box-shadow: 0 4px 0 var(--wp--preset--color--primary-dark);
}
.wp-block-button.is-style-dark .wp-block-button__link {
    background: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
    border: none;
}
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--wp--preset--color--black);
    border: 2px solid var(--wp--preset--color--black);
}
.wp-block-button.is-style-outline-white .wp-block-button__link {
    background: transparent;
    color: var(--wp--preset--color--white);
    border: 2px solid var(--wp--preset--color--white);
    box-shadow: 0 5px 0 rgba(255, 255, 255, 0.35);
    transform: translateY(0);
    transition: transform .15s, box-shadow .15s;
}
.wp-block-button.is-style-outline-white .wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(2px);
    box-shadow: 0 3px 0 rgba(255, 255, 255, 0.35);
}
.wp-block-button.is-style-white .wp-block-button__link {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    border: none;
}

/* --- Eyebrow (avec tiret à gauche) ---
   Note : WordPress n'ajoute PAS la classe .wp-block-paragraph aux <p>
   en frontend (seul l'éditeur la met), donc on cible directement
   .is-style-eyebrow sur toutes les balises. */
.is-style-eyebrow,
p.is-style-eyebrow,
.wp-block-paragraph.is-style-eyebrow {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.is-style-eyebrow::before,
p.is-style-eyebrow::before,
.wp-block-paragraph.is-style-eyebrow::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--wp--preset--color--primary);
    flex-shrink: 0;
}
/* Si l'eyebrow est centré (has-text-align-center), on ajoute le tiret aussi
   à droite pour symétrie, et on centre la flexbox. */
.is-style-eyebrow.has-text-align-center {
    justify-content: center;
}
.is-style-eyebrow.has-text-align-center::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--wp--preset--color--primary);
    flex-shrink: 0;
}

/* --- Meta (mono caps, sans tiret, alignement libre) ---
   Variante de eyebrow utilisable pour fil d'Ariane, sous-titres, etc.
   Pas de display:flex → l'alignement (gauche/centre/droite) du bloc fonctionne.
*/
p.is-style-meta,
.wp-block-paragraph.is-style-meta,
h1.is-style-meta, h2.is-style-meta, h3.is-style-meta,
h4.is-style-meta, h5.is-style-meta, h6.is-style-meta,
.wp-block-heading.is-style-meta {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    line-height: 1.6;
    margin-bottom: 12px;
}

/* --- Image frame (équerres turquoise façon flyer) --- */
.wp-block-image.is-style-frame {
    position: relative;
    padding: 8px;
    /* La figure WP a parfois display: table; on force un block pour que les pseudo-éléments couvrent toute la zone */
    display: block;
}
.wp-block-image.is-style-frame img {
    border-radius: 0;
    display: block;
    width: 100%;
    height: auto;
}
/* Équerre haut-gauche */
.wp-block-image.is-style-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border-top: 3px solid var(--wp--preset--color--primary);
    border-left: 3px solid var(--wp--preset--color--primary);
    pointer-events: none;
}
/* Équerre bas-droite */
.wp-block-image.is-style-frame::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border-bottom: 3px solid var(--wp--preset--color--primary);
    border-right: 3px solid var(--wp--preset--color--primary);
    pointer-events: none;
}

/* --- Script accent heading --- */
.wp-block-heading.is-style-script-accent {
    font-family: var(--wp--preset--font-family--script) !important;
    font-size: 150%;
    font-weight: 700;
    line-height: 0.9;
    color: var(--wp--preset--color--primary);
}

/* --- Checks list --- */
.wp-block-list.is-style-checks {
    list-style: none;
    padding-left: 0;
}
.wp-block-list.is-style-checks li {
    padding-left: 28px;
    position: relative;
    margin-bottom: 8px;
}
.wp-block-list.is-style-checks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    background: var(--wp--preset--color--primary);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8l3.5 3.5L13 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: cover;
}

/* --- Header bouton Réserver : padding réduit + nowrap --- */
.header-book-btn .wp-block-button__link {
    white-space: nowrap;
}
@media (max-width: 781px) {
    .header-book-btn .wp-block-button__link {
        padding: 10px 18px;
        font-size: 13px;
    }
}

/* --- Header réseaux sociaux : masqués sur mobile (manque de place) --- */
@media (max-width: 600px) {
    .header-socials {
        display: none !important;
    }
}

/* --- Menu mobile : overlay turquoise foncé avec liens blancs ---
   Force les couleurs même si le bloc Navigation a été customisé en BDD
   sans attributs overlayBackgroundColor/overlayTextColor. */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--primary-dark) !important;
    color: var(--wp--preset--color--white) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link__content,
.wp-block-navigation__responsive-container.is-menu-open a {
    color: var(--wp--preset--color--white) !important;
}
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
    color: var(--wp--preset--color--white) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
    color: var(--wp--preset--color--white);
}

/* --- Header scroll state --- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--wp--preset--color--primary-dark);
    transition: background .25s, box-shadow .25s;
}
.site-header.is-scrolled {
    background: rgba(30, 74, 82, 0.95);
    box-shadow: 0 2px 20px rgba(0,0,0,0.15);
    backdrop-filter: blur(8px);
}
.header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 32px;
    width: 100%;
}

/* --- Heading word-wrap --- */
.wp-block-heading {
    overflow-wrap: break-word;
    word-break: normal;
}

/* --- Why section cards — h3 trop grand en fluid, on plafonne à 20px --- */
#why .wp-block-column .wp-block-heading {
    font-size: 20px !important;
    line-height: 1.2;
}

/* ============================================
   BOOKING BAR — flottante, centrée sur la jonction
   ============================================ */

/* La carte sort du flux — top calculé par JS */
.nomade-booking-bar {
    position: absolute !important;
    left: 50vw !important;
    transform: translateX(-50%) !important;
    z-index: 2;
    width: min(var(--wp--style--global--wide-size, 1280px), calc(100vw - 32px)) !important;
    background: var(--wp--preset--color--white);
    border-radius: 20px;
    box-shadow: var(--wp--preset--shadow--float);
    padding: 28px 36px;
    /* Annuler le padding global de WP sur les constrained layouts */
    padding-left: 36px !important;
    padding-right: 36px !important;
}

/* Supprimer le gap entre sections dans le flux principal */
main.wp-block-group {
    --wp--style--block-gap: 0px;
}

.nomade-booking-bar__form {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}

.nomade-booking-bar__field {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nomade-booking-bar__field label {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    font-weight: 500;
}

.nomade-booking-bar__field input,
.nomade-booking-bar__field select {
    border: 1.5px solid var(--wp--preset--color--beige);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    color: var(--wp--preset--color--black);
    background: var(--wp--preset--color--white);
    outline: none;
    transition: border-color .15s;
    width: 90%;
    cursor: pointer;
}

.nomade-booking-bar__field input:focus,
.nomade-booking-bar__field select:focus {
    border-color: var(--wp--preset--color--primary);
}

.nomade-booking-bar__form > button {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    border: none;
    border-radius: 999px;
    padding: 12px 28px;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 5px 0 var(--wp--preset--color--primary-dark);
    transform: translateY(0);
    transition: transform .15s, box-shadow .15s;
    flex-shrink: 0;
}

.nomade-booking-bar__form > button:hover {
    transform: translateY(2px);
    box-shadow: 0 3px 0 var(--wp--preset--color--primary-dark);
}

/* ============================================
   BLOC SEARCH MotoPress dans le wrapper booking bar
   Cible le shortcode/bloc [mphb_availability_search] quand il est inséré
   dans (ou près de) la booking bar custom : layout horizontal cohérent.
   ============================================ */
/* Wrapper + form prennent toute la largeur dispo */
.mphb_sc_search-wrapper,
.mphb_sc_search-wrapper.nomade-booking-bar__form {
    width: 100%;
    max-width: none;
}
.nomade-booking-bar .mphb_sc_search-form,
.mphb_sc_search-wrapper.nomade-booking-bar__form,
form.mphb_sc_search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin: 0;
    width: 100%;
}
/* Tous les wrappers <p> sont des flex items qui se partagent la largeur */
.nomade-booking-bar .mphb_sc_search-form > *,
form.mphb_sc_search-form > * {
    margin: 0;
    flex: 1 1 0;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Champs dates : larges (flex 2 = 2x plus de place que les autres) */
.nomade-booking-bar .mphb_sc_search-form .mphb_sc_search-check-in-date,
.nomade-booking-bar .mphb_sc_search-form .mphb_sc_search-check-out-date,
form.mphb_sc_search-form .mphb_sc_search-check-in-date,
form.mphb_sc_search-form .mphb_sc_search-check-out-date {
    flex: 2 1 200px;
}
/* Champs adultes / enfants : compacts mais pas trop étroits */
.nomade-booking-bar .mphb_sc_search-form .mphb_sc_search-adults,
.nomade-booking-bar .mphb_sc_search-form .mphb_sc_search-children,
form.mphb_sc_search-form .mphb_sc_search-adults,
form.mphb_sc_search-form .mphb_sc_search-children {
    flex: 1 1 100px;
    min-width: 100px;
    max-width: 150px;
}
/* Bouton ne s'étire pas + colle à droite + compense la box-shadow (5px) */
.nomade-booking-bar .mphb_sc_search-form > .mphb-search-availability-submit-wrapper,
.nomade-booking-bar .mphb_sc_search-form > p:has(input[type="submit"]),
.nomade-booking-bar .mphb_sc_search-form > p:has(button),
form.mphb_sc_search-form > p:has(input[type="submit"]) {
    flex: 0 0 auto !important;
}
/* Cache les <p> vides, le tip, et les wrappers sans field utile */
.nomade-booking-bar .mphb_sc_search-form > p:empty,
.nomade-booking-bar .mphb_sc_search-form .mphb-required-fields-tip,
.nomade-booking-bar .mphb_sc_search-form > p:not(:has(input.mphb-datepick, input[type="date"], input[type="submit"], input[type="text"], input[type="number"], select, button)),
form.mphb_sc_search-form > p:empty,
form.mphb_sc_search-form .mphb-required-fields-tip,
form.mphb_sc_search-form > p:not(:has(input.mphb-datepick, input[type="date"], input[type="submit"], input[type="text"], input[type="number"], select, button)) {
    display: none !important;
}
/* Tue les <br> parasites injectés par wpautop */
.nomade-booking-bar .mphb_sc_search-form br,
form.mphb_sc_search-form br {
    display: none !important;
}
/* Labels stylés mono caps */
.nomade-booking-bar .mphb_sc_search-form label,
form.mphb_sc_search-form label {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    font-weight: 500;
    margin-bottom: 0;
}
/* Inputs/selects stylés comme la booking bar custom — hauteur uniforme */
.nomade-booking-bar .mphb_sc_search-form input[type="text"],
.nomade-booking-bar .mphb_sc_search-form input[type="date"],
.nomade-booking-bar .mphb_sc_search-form input.mphb-datepick,
.nomade-booking-bar .mphb_sc_search-form select,
form.mphb_sc_search-form input[type="text"],
form.mphb_sc_search-form input[type="date"],
form.mphb_sc_search-form input.mphb-datepick,
form.mphb_sc_search-form select {
    box-sizing: border-box;
    border: 1.5px solid var(--wp--preset--color--beige);
    border-radius: 10px;
    padding: 0 14px;
    height: 46px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    line-height: 1;
    color: var(--wp--preset--color--black);
    background: var(--wp--preset--color--white);
    outline: none;
    transition: border-color .15s;
    width: 100%;
    cursor: pointer;
}
.nomade-booking-bar .mphb_sc_search-form input:focus,
.nomade-booking-bar .mphb_sc_search-form select:focus,
form.mphb_sc_search-form input:focus,
form.mphb_sc_search-form select:focus {
    border-color: var(--wp--preset--color--primary);
}
/* Bouton submit stylé primary turquoise — même hauteur que les inputs */
.nomade-booking-bar .mphb_sc_search-form input[type="submit"],
.nomade-booking-bar .mphb_sc_search-form button[type="submit"],
.nomade-booking-bar .mphb_sc_search-form button,
form.mphb_sc_search-form input[type="submit"],
form.mphb_sc_search-form button[type="submit"] {
    box-sizing: border-box;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    border: none;
    border-radius: 999px;
    padding: 0 28px;
    height: 46px;
    line-height: 1;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 5px 0 var(--wp--preset--color--primary-dark);
    transform: translateY(0);
    transition: transform .15s, box-shadow .15s;
    width: auto;
    align-self: flex-end;
}
.nomade-booking-bar .mphb_sc_search-form input[type="submit"]:hover,
form.mphb_sc_search-form input[type="submit"]:hover {
    transform: translateY(2px);
    box-shadow: 0 3px 0 var(--wp--preset--color--primary-dark);
}

@media (max-width: 680px) {
    .nomade-booking-bar {
        border-radius: 16px;
        padding: 20px;
        margin-top: 0;
    }
    .nomade-booking-bar__form,
    .nomade-booking-bar .mphb_sc_search-form,
    form.mphb_sc_search-form {
        flex-direction: column;
    }
    .nomade-booking-bar__field,
    .nomade-booking-bar .mphb_sc_search-form > *,
    form.mphb_sc_search-form > * {
        width: 100%;
    }
    .nomade-booking-bar__form > button {
        width: 100%;
        text-align: center;
    }
}

/* --- Layout utilities --- */
.wp-site-blocks > * { margin-block: 0 !important; }

/* ============================================
   MOTOPRESS HOTEL BOOKING — habillage de la grille
   Cards des room types (caravanes) + bouton + détails
   ============================================ */

/* Grille responsive : flex centré, robuste */
.mphb_sc_rooms-wrapper.mphb-room-types {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 36px;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none;
    max-width: 1300px;
    width: 100%;
}

/* Card individuelle — 2 cards par ligne max, centrées, taille bornée */
.mphb-room-type {
    background: var(--wp--preset--color--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--wp--preset--shadow--button);
    border: 2px solid #000;
    display: flex;
    flex-direction: column;
    list-style: none;
    /* 2 cards par ligne avec gap 36px : 50% - 18px chacune.
       Pas de grow (0) pour ne pas dépasser, mais shrink (1) pour mobile.
       Bornée à 600px max et 300px min. */
    flex: 0 1 calc(50% - 18px);
    max-width: 600px;
    min-width: 300px;
    /* Force le margin-top à 0 pour annuler la règle MotoPress
       `.mphb-room-type:not(:first-of-type) { margin-top: 4em }` */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
@media (max-width: 781px) {
    .mphb-room-type {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Galerie en haut de card — neutralise flexslider, l'image touche les bords */
.mphb-room-type-images {
    /* Margin négatif = compense la border 2px de la card pour que l'image
       touche le bord extérieur sans laisser d'espace blanc */
    margin: -2px -2px 0 -2px !important;
    height: 280px !important;
    overflow: hidden !important;
    position: relative !important;
    background: var(--wp--preset--color--cream);
    /* Coins arrondis pour épouser la card (radius card 20px - border 2px = 18px) */
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}
/* ⚠️ Ces règles ne doivent s'appliquer QUE dans le contexte de la card
   d'aperçu (.mphb-room-type-images). Sinon elles clippent aussi la galerie
   complète sur la fiche détail (.mphb-single-room-type-gallery-wrapper). */
.mphb-room-type-images > *,
.mphb-room-type-images .flex-viewport,
.mphb-room-type-images .gallery-columns-1,
.mphb-room-type-images .mphb-gallery-main-slider,
.mphb-room-type-images .mphb-flexslider,
.mphb-room-type-images .mphb-room-type-gallery-wrapper {
    height: 280px !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}
.mphb-room-type-images ul {
    margin: 0 !important;
    padding: 0 !important;
    height: 280px !important;
    list-style: none;
    transform: none !important;
    width: 100% !important;
    position: relative !important;
}
/* Toutes les slides en absolute, empilées au top-left */
.mphb-room-type-images ul li {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    transform: none !important;
    width: 100% !important;
    height: 280px !important;
    opacity: 0;
    pointer-events: none;
    float: none !important;
}
/* On affiche le 1er gallery-item NON clone (donc l'image principale) */
.mphb-room-type-images ul li.gallery-item:not(.clone):first-of-type,
.mphb-room-type-images ul li:not(.clone):first-child {
    opacity: 1 !important;
    pointer-events: auto;
    z-index: 1;
}
/* Fallback : si tous les LI sont clones, on affiche le premier */
.mphb-room-type-images ul li:first-child {
    opacity: 1 !important;
    z-index: 0;
}
.mphb-room-type-images ul li:not(.clone) {
    z-index: 2 !important;
    opacity: 1 !important;
}
.mphb-room-type-images ul li:not(.clone) ~ li:not(.clone) {
    opacity: 0 !important;
}
.mphb-room-type-images ul li span,
.mphb-room-type-images ul li a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
.mphb-room-type-images img {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    /* Coins arrondis sur l'image directement (en plus du clip parent) */
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}
/* Coins arrondis sur l'image elle-même (en plus du clip par le wrapper) */
/* Tue les <br> parasites injectés par wpautop dans la galerie */
.mphb-room-type-images br {
    display: none !important;
}
/* Cache les controls + thumbnails du flexslider */
.mphb-gallery-thumbnail-slider,
.mphb-gallery-thumbnails-slider,
.flex-control-nav,
.flex-direction-nav,
.flex-pauseplay {
    display: none !important;
}
/* Boutons de navigation flexslider — visibles seulement au hover */
.flex-direction-nav {
    opacity: 0;
    transition: opacity .25s ease;
}
.mphb-room-type:hover .flex-direction-nav {
    opacity: 1;
}
.flex-direction-nav a {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: var(--wp--preset--color--primary-dark);
    text-shadow: none;
    font-size: 0;
}

/* Bloc texte de la card — padding interne généreux */
.mphb-room-type > *:not(.mphb-room-type-images):not(.mphb-room-type-gallery) {
    padding-left: 28px;
    padding-right: 28px;
}
.mphb-room-type-title,
h2.mphb-room-type-title {
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(26px, 2.4vw, 32px);
    line-height: 1.05;
    margin: 28px 0 14px !important;
    color: var(--wp--preset--color--black);
    text-align: center;
}
.mphb-room-type-title a {
    color: inherit;
    text-decoration: none;
    transition: color .15s;
}
.mphb-room-type-title a:hover {
    color: var(--wp--preset--color--primary);
}

/* Description courte — MPHB l'émet en `<p>` SANS classe sur la home
   (loop room types), donc on cible :not([class]) pour ne pas attraper
   les autres p de la card (prix, view-details, etc.). */
.mphb-room-type > p:not([class]) {
    text-align: center;
}
.mphb-room-type-excerpt {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.75);
    text-align: center;
    margin: 0 0 16px !important;
}

/* Titre "Détails" (cards archive) — style eyebrow mono.
   margin-top:auto = ancre tout le bloc bas de card (Détails + attributs +
   prix + boutons) en bas → les "Détails" des cards s'alignent visuellement
   au même niveau quelle que soit la longueur de la description courte. */
.mphb-room-type-details-title {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    margin: auto 0 8px !important;
    padding-top: 16px;
    font-weight: 500;
}
/* Quand "Détails" est présent (archive), c'est LUI qui ancre le bas de
   card — on retire l'auto-margin du prix et de "Voir les détails", sinon
   l'espace libre se répartirait entre les deux gaps (flex column). */
.mphb-room-type-details-title ~ .mphb-regular-price,
.mphb-room-type-details-title ~ .mphb-view-details-button-wrapper {
    margin-top: 0 !important;
}

/* Liste des attributs (capacité, taille, lit, etc.) */
.mphb-loop-room-type-attributes {
    list-style: none !important;
    padding: 0 28px !important;
    margin: 0 0 16px !important;
    font-size: 14px;
    line-height: 1.5;
}
.mphb-loop-room-type-attributes li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--wp--preset--color--cream);
    color: rgba(0, 0, 0, 0.8);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}
.mphb-loop-room-type-attributes li:last-child {
    border-bottom: none;
}
.mphb-loop-room-type-attributes .mphb-attribute-title {
    font-weight: 600;
    color: var(--wp--preset--color--primary-dark);
    flex-shrink: 0;
}
.mphb-loop-room-type-attributes .mphb-attribute-value {
    color: rgba(0, 0, 0, 0.85);
    flex: 1;
    min-width: 0;
}
/* Tue les <br> parasites dans les attributs (qui forcent retour ligne) */
.mphb-loop-room-type-attributes br {
    display: none !important;
}
/* Trim les espaces autour des valeurs */
.mphb-loop-room-type-attributes .mphb-attribute-value {
    white-space: normal;
}
/* Désactive le lien sur chaque équipement (qui pointe par défaut vers
   l'archive de la taxonomy facility — pas pertinent pour le client). */
.mphb-room-type-facilities a {
    pointer-events: none;
    cursor: default;
}

/* ============================================
   FOOTER DE CARD — prix + voir détails + bouton, tous sur fond crème
   Empilés verticalement, sans chevauchement.
   ============================================ */

/* Les 3 éléments du footer ont le même fond crème */
.mphb-regular-price,
.mphb-view-details-button-wrapper,
.mphb-to-book-btn-wrapper {
    background: var(--wp--preset--color--cream);
    margin: 0 !important;
}

/* Le prix démarre le footer : pousse vers le bas (mt:auto) + bordure top + centré */
.mphb-regular-price {
    margin-top: auto !important;
    padding: 22px 28px 8px !important;
    border-top: 2px dashed rgba(0,0,0,0.08);
    text-align: center;
}
.mphb-regular-price strong {
    display: block;
    font-family: var(--wp--preset--font-family--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    font-weight: 500;
    margin-bottom: 6px;
}
.mphb-regular-price br {
    display: none !important;
}
.mphb-price {
    font-family: var(--wp--preset--font-family--display);
    font-size: 36px;
    color: var(--wp--preset--color--primary-dark);
    line-height: 1;
    display: inline-block;
}
.mphb-price .mphb-currency {
    font-size: 24px;
    margin-left: 2px;
}
.mphb-price-period {
    display: inline-block;
    font-size: 13px;
    color: rgba(0,0,0,0.65);
    margin-left: 8px;
    font-style: italic;
    vertical-align: middle;
    /* Neutralise le style "tooltip" MPHB (souligné pointillé + curseur
       aide lié à l'attribut title) : incompréhensible pour le visiteur */
    cursor: default;
    text-decoration: none;
    border-bottom: none;
}

/* "Voir les détails" : lien centré.
   Le prix étant masqué (choix client), c'est ce bloc qui ouvre le footer :
   il récupère le margin-top:auto (ancre le footer en bas de la card quelle
   que soit la longueur de la description → footers alignés entre cards),
   la bordure dashed et le padding-top que portait .mphb-regular-price. */
.mphb-view-details-button-wrapper {
    margin-top: auto !important;
    padding: 22px 28px 16px !important;
    border-top: 2px dashed rgba(0, 0, 0, 0.08);
    text-align: center;
    font-size: 14px;
}
/* Si le prix est réaffiché un jour, c'est lui qui reprend l'ouverture du
   footer : on annule alors le rôle d'ouverture sur "Voir les détails". */
.mphb-regular-price ~ .mphb-view-details-button-wrapper {
    margin-top: 0 !important;
    padding-top: 4px !important;
    border-top: none;
}
.mphb-view-details-button-wrapper a,
a.mphb-view-details-button {
    color: var(--wp--preset--color--primary-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 14px;
}
.mphb-view-details-button-wrapper a:hover {
    color: var(--wp--preset--color--primary);
}

/* Bouton "Réserver" : pleine largeur de la card, gros et impactant */
.mphb-to-book-btn-wrapper {
    padding: 0 24px 24px !important;
    text-align: center;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}
.mphb-to-book-btn-wrapper button,
.mphb-to-book-btn-wrapper .mphb-book-button,
button.mphb-book-button,
a.mphb-button {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    border: none;
    border-radius: 999px;
    padding: 16px 32px;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 5px 0 var(--wp--preset--color--primary-dark);
    transform: translateY(0);
    transition: transform .15s, box-shadow .15s;
    display: block;
    text-decoration: none;
    text-align: center;
    width: 100%;
    line-height: 1;
}
.mphb-to-book-btn-wrapper button:hover,
button.mphb-book-button:hover,
a.mphb-button:hover {
    transform: translateY(2px);
    box-shadow: 0 3px 0 var(--wp--preset--color--primary-dark);
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
}

/* ============================================
   GLOBAL MOTOPRESS — inputs, selects, buttons
   Cible TOUS les forms MotoPress du site (search, availability, checkout,
   account, etc.) pour avoir un styling cohérent partout sans dépendre
   du wrapper parent.
   ============================================ */

/* Inputs date / text / number et selects MotoPress */
input.mphb-datepick,
form[class*="mphb"] input[type="text"]:not([type="hidden"]),
form[class*="mphb"] input[type="date"],
form[class*="mphb"] input[type="email"],
form[class*="mphb"] input[type="tel"],
form[class*="mphb"] input[type="number"],
form[class*="mphb"] select,
form[class*="mphb"] textarea,
.mphb_sc_checkout-wrapper input[type="text"]:not([type="hidden"]),
.mphb_sc_checkout-wrapper input[type="email"],
.mphb_sc_checkout-wrapper input[type="tel"],
.mphb_sc_checkout-wrapper input[type="number"],
.mphb_sc_checkout-wrapper select,
.mphb_sc_checkout-wrapper textarea {
    box-sizing: border-box;
    border: 1.5px solid var(--wp--preset--color--beige);
    border-radius: 10px;
    padding: 0 14px;
    height: 46px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    line-height: 1;
    color: var(--wp--preset--color--black);
    background: var(--wp--preset--color--white);
    outline: none;
    transition: border-color .15s;
    width: 100%;
    cursor: pointer;
}
form[class*="mphb"] textarea,
.mphb_sc_checkout-wrapper textarea {
    height: auto;
    min-height: 100px;
    padding: 12px 14px;
    line-height: 1.5;
    cursor: text;
}
form[class*="mphb"] input:focus,
form[class*="mphb"] select:focus,
form[class*="mphb"] textarea:focus,
.mphb_sc_checkout-wrapper input:focus,
.mphb_sc_checkout-wrapper select:focus,
.mphb_sc_checkout-wrapper textarea:focus {
    border-color: var(--wp--preset--color--primary);
}

/* Labels en mono caps cohérents — display: inline-block pour qu'ils
   puissent rester sur la même ligne que leur input (avec le <br>
   intermédiaire masqué plus bas). */
form[class*="mphb"] label,
.mphb_sc_checkout-wrapper label {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 6px;
}

/* Tue les <br> parasites dans les forms (wpautop) */
form[class*="mphb"] br,
form[class*="mphb"] label br,
.mphb_sc_checkout-wrapper br {
    display: none !important;
}
/* Tip "champs requis" masqué partout */
form[class*="mphb"] .mphb-required-fields-tip,
.mphb_sc_checkout-wrapper .mphb-required-fields-tip {
    display: none !important;
}

/* === BOUTONS MOTOPRESS — tous stylés primary turquoise === */
button.mphb-button,
button.mphb-reserve-btn,
button.mphb-book-button,
button.mphb-recommendation-reserve-button,
button.mphb-confirm-reservation,
input.mphb-reserve-btn,
a.mphb-button,
.mphb_sc_checkout-wrapper button[type="submit"],
.mphb_sc_checkout-wrapper input[type="submit"],
form[class*="mphb"] button[type="submit"]:not([class*="navigation"]),
form[class*="mphb"] input[type="submit"] {
    box-sizing: border-box;
    background: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--white) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 14px 32px !important;
    height: auto;
    font-family: var(--wp--preset--font-family--body) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 5px 0 var(--wp--preset--color--primary-dark) !important;
    transform: translateY(0);
    transition: transform .15s, box-shadow .15s;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    width: auto;
}
button.mphb-button:hover,
input.mphb-reserve-btn:hover,
button.mphb-confirm-reservation:hover,
button.mphb-recommendation-reserve-button:hover,
.mphb_sc_checkout-wrapper button[type="submit"]:hover {
    transform: translateY(2px);
    box-shadow: 0 3px 0 var(--wp--preset--color--primary-dark) !important;
}

/* === GRAVITY FORMS — bouton submit hérite du style MPHB en pleine largeur ===
   Couvre les classes natives GF (submit, next, previous en multi-pages). */
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"],
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button,
.gform_footer input[type="submit"],
.gform_footer button[type="submit"],
.gform_page_footer input[type="submit"],
.gform_page_footer button[type="submit"] {
    box-sizing: border-box;
    background: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--white) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 14px 32px !important;
    height: auto;
    font-family: var(--wp--preset--font-family--body) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 5px 0 var(--wp--preset--color--primary-dark) !important;
    transform: translateY(0);
    transition: transform .15s, box-shadow .15s;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    /* Pleine largeur (override le width: auto hérité du style MPHB) */
    width: 100% !important;
    display: block;
}
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper button[type="submit"]:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_previous_button:hover,
.gform_footer input[type="submit"]:hover,
.gform_footer button[type="submit"]:hover,
.gform_page_footer input[type="submit"]:hover,
.gform_page_footer button[type="submit"]:hover {
    transform: translateY(2px);
    box-shadow: 0 3px 0 var(--wp--preset--color--primary-dark) !important;
}

/* Le wrapper footer GF par défaut centre le bouton ou applique des marges ;
   on s'assure que le bouton occupe bien toute la largeur du form. */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
    width: 100%;
    text-align: center;
    margin-top: 20px !important;
    padding: 0 !important;
}

/* Indicateur "champ requis" (étoile) — turquoise clair pour cohérence avec
   la palette Nomade Camper. Couvre les 2 classes natives GF :
   - .gfield_required : wrapper span
   - .gfield_required_text : texte/asterisk à l'intérieur */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_text,
.gform_wrapper .gfield_required_text_asterisk,
.gform_wrapper .gfield_required_asterisk {
    color: var(--wp--preset--color--primary-light) !important;
}

/* === ROOM-TYPE CARDS hors wrapper rooms (utilisées en search results) === */
/* Override spécifique : en search results, espacement vertical entre cards */
.mphb_sc_search_results-wrapper .mphb-room-type {
    margin: 24px 0 !important;
}

/* === FOOTER SEARCH RESULTS === */

/* Section "Réserver" — wrapper qui contient quantity + message + bouton */
.mphb-reserve-room-section {
    padding: 16px 28px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
/* Le wrapper de message peut être quasi-vide, on gère l'espacement via gap */
.mphb-reserve-room-section .mphb-rooms-reservation-message-wrapper {
    padding: 0 !important;
    width: 100%;
}
.mphb-reserve-room-section .mphb-rooms-quantity-wrapper {
    padding: 0 !important;
    width: 100%;
    justify-content: center;
}

/* Quantity select + texte "de N logements disponibles" */
.mphb-rooms-quantity-wrapper {
    padding: 16px 28px 8px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.mphb-rooms-quantity-wrapper .mphb-rooms-quantity {
    width: auto;
    min-width: 70px;
    max-width: 90px;
    flex-shrink: 0;
}
.mphb-available-rooms-count {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
    font-style: italic;
    flex: 1;
    min-width: 0;
}

/* Lien "Supprimer" + message */
.mphb-rooms-reservation-message-wrapper {
    padding: 0 28px 8px !important;
    text-align: center;
}
.mphb-remove-from-reservation {
    color: var(--wp--preset--color--primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 14px;
    font-weight: 500;
}
.mphb-remove-from-reservation:hover {
    color: var(--wp--preset--color--primary);
}
.mphb-rooms-reservation-message {
    margin: 4px 0 0 !important;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
}

/* Bouton Réserver / Confirmer en search results (dans .mphb-reserve-room-section) */
.mphb-reserve-room-section > button.mphb-book-button,
.mphb-reserve-room-section > button.mphb-confirm-reservation {
    margin: 0 !important;
    width: 100% !important;
    padding: 16px 32px !important;
    box-sizing: border-box;
}

/* === FORM RESERVATION CART (panier vide / cart final en search results) === */
form.mphb-reservation-cart {
    background: var(--wp--preset--color--cream);
    border-radius: 14px;
    padding: 24px 28px;
    margin: 24px 0 !important;
    text-align: center;
}
form.mphb-reservation-cart .mphb-empty-cart-message {
    margin: 0 0 12px !important;
    color: var(--wp--preset--color--primary-dark);
    font-style: italic;
}
form.mphb-reservation-cart .mphb-cart-total-price {
    margin: 12px 0 16px !important;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 12px;
}
form.mphb-reservation-cart .mphb-cart-total-price-title {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
}
form.mphb-reservation-cart .mphb-cart-total-price-value {
    font-family: var(--wp--preset--font-family--display);
    font-size: 24px;
    color: var(--wp--preset--color--primary-dark);
}
/* Cart vide : bouton "Confirmer la réservation" désactivé visuellement */
form.mphb-empty-cart button.mphb-confirm-reservation {
    opacity: 0.4;
    pointer-events: none;
    box-shadow: 0 2px 0 var(--wp--preset--color--primary-dark) !important;
}

/* === Clear utility de MotoPress (peut casser un layout flex) === */
.mphb-clear {
    clear: both;
}

/* ============================================
   SEARCH RESULTS — page /les-disponibilites/?mphb_*
   Layout propre : info + recommandation card + bouton réserver
   ============================================ */

.mphb_sc_search_results-wrapper {
    margin: 32px auto !important;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Tout enfant direct prend toute la largeur (info, titre, form, section…) */
.mphb_sc_search_results-wrapper > * {
    width: 100%;
}

/* Panier vide : on masque, le message est remplacé par la section ci-dessous */
.mphb_sc_search_results-wrapper > form.mphb-reservation-cart.mphb-empty-cart {
    display: none;
}

/* === SECTION ALTERNATIVES — wrap les cards dans une zone visuelle distincte
   (fond turquoise clair, comme la section #caravanes de la home).
   Header eyebrow + titre + sous-titre, puis grille 2 cards par ligne max. */
.nc-alternatives-section {
    background: var(--wp--preset--color--primary-light);
    border-radius: 24px;
    padding: 56px 36px;
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 36px;
}

/* Header de la section : full width, centré */
.nc-alternatives-header {
    flex: 0 0 100%;
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
}
.nc-alternatives-header .nc-eyebrow {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 12px !important;
}
.nc-alternatives-header .nc-eyebrow::before,
.nc-alternatives-header .nc-eyebrow::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--wp--preset--color--primary-dark);
    flex-shrink: 0;
}
.nc-alternatives-header .nc-alternatives-title {
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(24px, 3vw, 32px);
    color: var(--wp--preset--color--black);
    margin: 0 0 8px !important;
    line-height: 1.15;
}
.nc-alternatives-header .nc-alternatives-subtitle {
    font-style: italic;
    font-size: 15px;
    color: var(--wp--preset--color--primary-dark);
    margin: 0 !important;
    opacity: 0.85;
}

/* Cards à l'intérieur : 2 par ligne max, mêmes proportions que la grille principale */
.nc-alternatives-section > .mphb-room-type {
    flex: 0 1 calc(50% - 18px);
    max-width: 600px;
    min-width: 300px;
}
@media (max-width: 781px) {
    .nc-alternatives-section {
        padding: 40px 20px;
        border-radius: 18px;
    }
    .nc-alternatives-section > .mphb-room-type {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* "X chambre(s) trouvée(s) du... au..." en eyebrow */
.mphb_sc_search_results-info {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    margin: 0 0 8px !important;
    text-align: center;
    opacity: 0.8;
}

/* Titre "Recommandé pour 2 adultes" */
.mphb-recommendation-title {
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(22px, 3vw, 28px);
    text-align: center;
    margin: 0 0 28px !important;
    color: var(--wp--preset--color--black);
}

/* Le form de recommandation = card */
form.mphb-recommendation {
    background: var(--wp--preset--color--white);
    border: 2px solid #000;
    border-radius: 18px;
    box-shadow: var(--wp--preset--shadow--button);
    padding: 28px;
    margin: 0;
}

/* Liste des items (1 par caravane) */
.mphb-recommendation-details-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
}
.mphb-recommendation-details-list li {
    border-bottom: 1px dashed var(--wp--preset--color--cream);
    padding: 16px 0;
    list-style: none;
}
.mphb-recommendation-details-list li:first-child {
    padding-top: 0;
}
.mphb-recommendation-details-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Layout d'un item : "1× La ligérienne ............ 119 €", capacité en dessous.
   align-items: baseline → tous les textes (gros et petits) alignés sur leur ligne
   de base, plus de décalage vertical entre count, link et price. */
.mphb-recommendation-item {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}
.mphb-recommendation-item-count {
    order: 1;
    font-family: var(--wp--preset--font-family--mono);
    font-size: 14px;
    color: var(--wp--preset--color--primary-dark);
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1;
}
.mphb-recommendation-item-link {
    order: 2;
    flex: 1;
    font-family: var(--wp--preset--font-family--display);
    font-size: 24px;
    color: var(--wp--preset--color--black);
    text-decoration: none;
    line-height: 1.1;
    min-width: 0;
}
.mphb-recommendation-item-link:hover {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
}
.mphb-recommedation-item-subtotal {
    order: 3;
    flex-shrink: 0;
    margin-left: auto;
    text-align: right;
    font-family: var(--wp--preset--font-family--display);
    color: var(--wp--preset--color--primary-dark);
    line-height: 1;
}
/* Override de .mphb-price global (36px pour les cards) → 24px ici pour matcher
   visuellement le titre "La ligérienne" et garder la baseline propre. */
.mphb-recommedation-item-subtotal .mphb-price {
    font-size: 24px;
    line-height: 1;
    color: var(--wp--preset--color--primary-dark);
}
.mphb-recommedation-item-subtotal .mphb-price .mphb-currency {
    font-size: 16px;
    margin-left: 2px;
}

/* Capacité max (sur sa propre ligne en dessous, pleine largeur) */
.mphb-recommendation-item-guests {
    order: 4;
    flex: 0 0 100%;
    width: 100%;
    margin-top: 4px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.4;
}
.mphb-recommendation-item-guests-label {
    font-weight: 500;
    color: var(--wp--preset--color--primary-dark);
}

/* Total (mise en valeur) */
.mphb-recommendation-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px 20px !important;
    margin: 0 0 20px !important;
    background: var(--wp--preset--color--cream);
    border-radius: 12px;
    flex-wrap: wrap;
    gap: 12px;
}
.mphb-recommendation-total-title {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    font-weight: 500;
}
.mphb-recommendation-total-value {
    font-family: var(--wp--preset--font-family--display);
    font-size: 32px;
    color: var(--wp--preset--color--primary-dark);
    line-height: 1;
}
.mphb-recommendation-total-value .mphb-currency {
    font-size: 22px;
    margin-left: 2px;
}

/* Bouton "Réserver" final — pleine largeur, primary turquoise */
button.mphb-recommendation-reserve-button,
button.mphb-confirm-reservation,
.mphb-recommendation button[type="submit"] {
    background: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--white) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 16px 32px !important;
    font-family: var(--wp--preset--font-family--body) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 5px 0 var(--wp--preset--color--primary-dark) !important;
    transform: translateY(0);
    transition: transform .15s, box-shadow .15s;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1;
}
button.mphb-recommendation-reserve-button:hover,
button.mphb-confirm-reservation:hover {
    transform: translateY(2px);
    box-shadow: 0 3px 0 var(--wp--preset--color--primary-dark) !important;
}

/* Sur la page résultats, le form de search est en haut → mêmes styles que home */
.mphb_sc_search_results-wrapper + * .mphb_sc_search-form,
.mphb_sc_search-wrapper.alignwide form.mphb_sc_search-form {
    /* Hérite déjà des styles du form search global défini plus haut */
}

/* ============================================
   CHECKOUT — page /confirmation-de-reservation/
   Layout en grille : Détails réservation (full) + Type d'hébergement
   et Vos informations (2 cols) + Répartition prix (full) + Total/Submit (right)
   ============================================ */

/* Wrapper global du checkout : centré, max-width raisonnable */
.mphb_sc_checkout-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}
/* === Messages d'état checkout — 2 styles distincts selon le contexte ===

   1) .mphb-data-incorrect : message informatif d'état avant render du form
      (dates manquantes dans l'URL, session expirée, etc.). Pas une faute
      utilisateur → style soft cream, ton informatif, pas d'alarme.

   2) .mphb-errors-wrapper:not(.mphb-hide) : erreur réelle APRÈS submit
      (champ requis vide, validation Stripe...). C'est une action user
      qui a échoué → style alerte rouge, icône triangle, scroll-to. */

/* (1) État informatif — style soft cream */
.mphb_sc_checkout-wrapper.mphb-data-incorrect,
.mphb_sc_checkout-wrapper p.mphb-data-incorrect {
    background: var(--wp--preset--color--cream);
    border-radius: 16px;
    padding: 24px 28px;
    color: var(--wp--preset--color--primary-dark);
    font-style: italic;
    text-align: center;
}

/* === États visuels champ par champ ===
   - À l'arrivée sur la page : champ requis vide → outline TURQUOISE
     (invitation à remplir, ton calme)
   - Après tentative de submit invalide : outline ROUGE + message en
     dessous (via :user-invalid pseudo-class moderne)
   - Quand le user change la valeur : reset automatique */

/* État initial "à remplir" : turquoise doux */
.mphb_sc_checkout-form select:required:invalid,
.mphb_sc_checkout-form input:required:invalid:not(:placeholder-shown),
.mphb_sc_checkout-form input:required:invalid:placeholder-shown {
    border-color: var(--wp--preset--color--primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 178, 163, 0.18);
}

/* État erreur "user-invalid" (après submit raté) : rouge */
.mphb_sc_checkout-form select:user-invalid,
.mphb_sc_checkout-form input:user-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
}

/* Message d'erreur en dessous du champ — inséré par JS.
   Sur desktop : padding-left 160px pour s'aligner avec l'input (le label
   inline-block fait 140px + 12px de margin = 152px → 160 laisse une
   petite marge propre).
   Sur mobile : retour à 4px (label en stack vertical, plus de décalage). */
.mphb_sc_checkout-form .nc-field-error {
    display: block;
    color: #b91c1c;
    font-family: var(--wp--preset--font-family--body);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 6px;
    padding-left: 160px;
    text-transform: none;
    letter-spacing: 0;
    animation: ncFieldErrorIn .2s ease-out;
}
@media (max-width: 600px) {
    .mphb_sc_checkout-form .nc-field-error {
        padding-left: 4px;
    }
}
@keyframes ncFieldErrorIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* (2) Erreur post-submit — style alerte rouge avec icône warning SVG inline */
.mphb_sc_checkout-wrapper .mphb-errors-wrapper:not(.mphb-hide),
form.mphb_sc_checkout-form > .mphb-errors-wrapper:not(.mphb-hide) {
    display: block !important;
    background: #fef2f2;
    border: 2px solid #dc2626;
    border-left: 6px solid #dc2626;
    border-radius: 10px;
    padding: 18px 22px 18px 56px !important;
    margin: 24px 0 !important;
    color: #991b1b;
    font-weight: 500;
    text-align: left;
    line-height: 1.5;
    position: relative;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626'%3E%3Cpath d='M12 2L1 21h22L12 2zm0 16a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm1-3h-2v-6h2v6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 18px center;
    background-size: 24px 24px;
}
.mphb_sc_checkout-wrapper .mphb-errors-wrapper:not(.mphb-hide) p,
.mphb_sc_checkout-wrapper .mphb-errors-wrapper:not(.mphb-hide) br {
    margin: 0 !important;
}
.mphb_sc_checkout-wrapper .mphb-errors-wrapper:not(.mphb-hide) p + p {
    margin-top: 8px !important;
}

/* Form en grille 2 colonnes desktop */
form.mphb_sc_checkout-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin: 0;
    padding: 0;
}

/* Override du margin: 4em du plugin entre sections */
form.mphb_sc_checkout-form > .mphb-checkout-section {
    margin: 0 !important;
}

/* Toutes les sections en cards : fond blanc, border, radius */
form.mphb_sc_checkout-form > section,
form.mphb_sc_checkout-form > .mphb-checkout-section {
    background: var(--wp--preset--color--white);
    border: 2px solid #000;
    border-radius: 16px;
    padding: 28px 28px 24px;
    box-shadow: var(--wp--preset--shadow--button);
    box-sizing: border-box;
}

/* Sections full width : booking-details (dates), price-breakdown,
   billing-details, terms, et le wrapper submit/total */
form.mphb_sc_checkout-form > #mphb-booking-details,
form.mphb_sc_checkout-form > #mphb-price-details,
form.mphb_sc_checkout-form > #mphb-billing-details,
form.mphb_sc_checkout-form > .mphb-checkout-text-wrapper,
form.mphb_sc_checkout-form > .mphb-checkout-terms-wrapper,
form.mphb_sc_checkout-form > .mphb-coupon-code-wrapper,
form.mphb_sc_checkout-form > .mphb-total-price,
form.mphb_sc_checkout-form > .mphb-deposit-amount,
form.mphb_sc_checkout-form > .mphb-errors-wrapper,
form.mphb_sc_checkout-form > .mphb_sc_checkout-submit-wrapper {
    grid-column: 1 / -1;
}

/* 2 colonnes : type d'hébergement (gauche) + vos infos (droite) */
form.mphb_sc_checkout-form > #mphb-room-details {
    grid-column: 1 / 2;
}
form.mphb_sc_checkout-form > #mphb-customer-details {
    grid-column: 2 / 3;
}

/* === Lien "Voir le détail des prix pour…" dans la table Répartition du prix ===
   Style turquoise + icône œil SVG en suffix pour suggérer l'action "voir". */
.mphb_sc_checkout-form .mphb-price-breakdown-accommodation {
    color: var(--wp--preset--color--primary-dark);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .15s;
}
.mphb_sc_checkout-form .mphb-price-breakdown-accommodation:hover {
    color: var(--wp--preset--color--primary);
}
.mphb_sc_checkout-form .mphb-price-breakdown-accommodation::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4A52' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform .15s;
}
.mphb_sc_checkout-form .mphb-price-breakdown-accommodation:hover::after {
    transform: scale(1.1);
}

/* === Tailles de la table "Répartition du prix" ===
   Le style global .mphb-price (36px display, pensé pour les cards) rendait
   TOUS les montants de la table énormes. Choix client :
   - prix d'en-tête de groupe (à côté de "Voir le détail…") → comme le
     Total final : 36px display
   - prix par jour (lignes dates) → gras (police display, taille normale)
   - sous-totaux (th des lignes -subtotal / -total intermédiaires) → gras, 20px
   - Total final (tfoot) → INTOUCHÉ (garde le gros style .mphb-price)
   Le scope `tbody` protège le tfoot ; les spans .mphb-price héritent
   leur taille de la cellule parente. */
.mphb_sc_checkout-form .mphb-price-breakdown tbody .mphb-price {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}
.mphb_sc_checkout-form .mphb-price-breakdown tbody .mphb-price .mphb-currency {
    font-size: inherit;
    margin-left: 0;
}
/* Prix de la ligne d'en-tête du groupe : identique au Total du tfoot
   (= style global .mphb-price restauré) */
.mphb_sc_checkout-form .mphb-price-breakdown tbody tr.mphb-price-breakdown-group .mphb-price {
    font-family: var(--wp--preset--font-family--display);
    font-size: 36px;
    color: var(--wp--preset--color--primary-dark);
    line-height: 1;
}
.mphb_sc_checkout-form .mphb-price-breakdown tbody tr.mphb-price-breakdown-group .mphb-price .mphb-currency {
    font-size: 24px;
    margin-left: 2px;
}
/* Prix par jour : gras via la police display, taille héritée */
.mphb_sc_checkout-form .mphb-price-breakdown tbody tr.mphb-price-breakdown-date .mphb-price {
    font-family: var(--wp--preset--font-family--display);
}
/* Sous-totaux : "Sous-total hébergement", "Total hébergement",
   "Total services", "Total frais"… (le gras vient du <th> natif) */
.mphb_sc_checkout-form .mphb-price-breakdown tbody tr[class*="-subtotal"] th,
.mphb_sc_checkout-form .mphb-price-breakdown tbody tr[class*="-total"] th {
    font-size: 20px;
}

/* === Liste "Choisir des services supplémentaires" (checkout) ===
   Le style global .mphb-price (36px display) rendait les prix des
   services énormes par rapport à leurs libellés. */
.mphb_sc_checkout-services-list .mphb-price {
    font-size: 20px;
}
.mphb_sc_checkout-services-list .mphb-price .mphb-currency {
    font-size: 20px;
}
/* "Gratuit" — rendu par MPHB Premium comme un simple
   <span class="mphb-price">Gratuit</span> SANS sous-span .mphb-currency
   (contrairement au Lite qui ajoute .mphb-price-free). On cible donc
   "un prix qui ne contient pas de symbole monnaie" via :has().
   Les 2 règles restent séparées : une liste groupée serait entièrement
   invalidée par un navigateur sans support :has(). */
.mphb_sc_checkout-services-list .mphb-price.mphb-price-free {
    font-size: 14px;
}
.mphb_sc_checkout-services-list .mphb-price:not(:has(.mphb-currency)) {
    font-size: 14px;
}

/* Titres de section : style display, taille uniforme */
.mphb_sc_checkout-form .mphb-booking-details-title,
.mphb_sc_checkout-form .mphb-customer-details-title,
.mphb_sc_checkout-form .mphb-price-breakdown-title,
.mphb_sc_checkout-form .nc-section-title,
.mphb_sc_checkout-form .mphb-gateway-chooser-title {
    font-family: var(--wp--preset--font-family--display);
    font-size: 22px;
    color: var(--wp--preset--color--black);
    margin: 0 0 20px !important;
    line-height: 1.15;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--wp--preset--color--cream);
}

/* === Section "Détails de réservation" — dates check-in/out sur une seule
   ligne, 2 colonnes (arrivée à gauche, départ à droite). On utilise un
   grid sur le <section> direct des dates, ciblant les <p> via leurs classes. */
.mphb_sc_checkout-form #mphb-booking-details {
    display: grid;
    grid-template-columns: auto;
    gap: 0;
}
.mphb_sc_checkout-form #mphb-booking-details .mphb-booking-details-title {
    grid-column: 1 / -1;
}
/* Wrapper grid 2 cols pour les dates : on cible les <p> qui sont siblings */
.mphb_sc_checkout-form #mphb-booking-details .mphb-check-in-date,
.mphb_sc_checkout-form #mphb-booking-details .mphb-check-out-date {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 !important;
    padding: 14px 18px;
    background: var(--wp--preset--color--cream);
    border-radius: 10px;
    font-size: 15px;
}
/* Côte à côte via grid sur le parent */
.mphb_sc_checkout-form #mphb-booking-details {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.mphb_sc_checkout-form #mphb-booking-details > .mphb-booking-details-title {
    grid-column: 1 / -1;
}
/* Mobile : retour en 1 colonne */
@media (max-width: 600px) {
    .mphb_sc_checkout-form #mphb-booking-details {
        grid-template-columns: 1fr;
    }
}

/* Anciens styles dates (gardés pour fallback hors grid) */
.mphb_sc_checkout-form .mphb-check-in-date,
.mphb_sc_checkout-form .mphb-check-out-date {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 8px !important;
    padding: 12px 16px;
    background: var(--wp--preset--color--cream);
    border-radius: 10px;
    font-size: 15px;
}
.mphb_sc_checkout-form .mphb-check-in-date > span:first-child,
.mphb_sc_checkout-form .mphb-check-out-date > span:first-child {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    font-weight: 600;
    flex-shrink: 0;
}
.mphb_sc_checkout-form .mphb-check-in-date strong,
.mphb_sc_checkout-form .mphb-check-out-date strong {
    font-family: var(--wp--preset--font-family--display);
    font-size: 18px;
    color: var(--wp--preset--color--black);
    font-weight: 400;
}
.mphb_sc_checkout-form .mphb-check-in-date time:last-child,
.mphb_sc_checkout-form .mphb-check-out-date time:last-child {
    color: rgba(0, 0, 0, 0.6);
    font-size: 13px;
}

/* === Section "Type d'hébergement" — détails du logement === */
.mphb_sc_checkout-form .mphb-room-number {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    margin: 0 0 8px !important;
    font-weight: 600;
}
.mphb_sc_checkout-form .mphb-room-type-title {
    font-family: var(--wp--preset--font-family--display);
    font-size: 24px;
    color: var(--wp--preset--color--black);
    margin: 0 0 18px !important;
    line-height: 1.1;
}
.mphb_sc_checkout-form .mphb-room-type-title > span {
    display: block;
    font-family: var(--wp--preset--font-family--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    font-weight: 500;
    margin-bottom: 4px;
}
.mphb_sc_checkout-form .mphb-room-type-title a {
    color: var(--wp--preset--color--black);
    text-decoration: none;
    border-bottom: 2px solid var(--wp--preset--color--primary);
    padding-bottom: 1px;
}
.mphb_sc_checkout-form .mphb-room-type-title a:hover {
    color: var(--wp--preset--color--primary);
}
.mphb_sc_checkout-form .mphb-room-details {
    margin-bottom: 16px;
}
.mphb_sc_checkout-form .mphb-room-details:last-child {
    margin-bottom: 0;
}

/* Choosers (adultes/enfants/tarif/services) en stack vertical */
.mphb_sc_checkout-form .mphb-adults-chooser,
.mphb_sc_checkout-form .mphb-children-chooser,
.mphb_sc_checkout-form .mphb-rate-chooser,
.mphb_sc_checkout-form .mphb-services-list-wrapper {
    margin: 0 0 12px !important;
}

/* Rate chooser — style propre pour les radios "SEMAINE", "NUIT", "WEEK-END"
   (apparaissent quand plusieurs tarifs sont éligibles aux dates demandées) */
.mphb_sc_checkout-form .mphb-rate-chooser {
    background: var(--wp--preset--color--cream);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0 0 16px !important;
}
.mphb_sc_checkout-form .mphb-rate-chooser .mphb-room-rate-chooser-title {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    margin: 0 0 12px !important;
    font-weight: 600;
}
.mphb_sc_checkout-form .mphb-room-rate-variant {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 8px !important;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.mphb_sc_checkout-form .mphb-room-rate-variant:last-child {
    border-bottom: none;
}
.mphb_sc_checkout-form .mphb-room-rate-variant label {
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--wp--preset--font-family--body);
    font-size: 14px;
    color: var(--wp--preset--color--black);
    font-weight: 500;
    margin: 0 !important;
    cursor: pointer;
}
.mphb_sc_checkout-form .mphb-room-rate-variant input[type="radio"] {
    width: auto;
    margin-right: 6px;
}
.mphb_sc_checkout-form .mphb-room-rate-variant strong {
    font-weight: 600;
}

/* === Bannière "trust" SOUS le Stripe Payment Element ===
   Injectée par mphb-tweaks.php sur la page checkout uniquement (priorité
   46 = après renderBillingDetails à 45). Fond turquoise clair pour
   ressortir comme un signal de réassurance distinct du reste du form.
   Logos cartes à gauche, "Paiement sécurisé" + cadenas à droite. */
.mphb_sc_checkout-form .nc-payment-trust {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    margin: 0 !important;
    background: var(--wp--preset--color--primary-light);
    border-radius: 10px;
    border: 1px solid rgba(30, 74, 82, 0.12);
    font-size: 13px;
    color: var(--wp--preset--color--primary-dark);
}
.mphb_sc_checkout-form .nc-trust-cards {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mphb_sc_checkout-form .nc-trust-icon {
    width: 36px;
    height: 24px;
    display: block;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.mphb_sc_checkout-form .nc-trust-lock-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--wp--preset--font-family--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--wp--preset--color--white);
}
.mphb_sc_checkout-form .nc-trust-lock {
    width: 14px;
    height: 14px;
    color: var(--wp--preset--color--white);
    flex-shrink: 0;
}

/* Mobile : la bannière garde tout sur une ligne quand possible,
   sinon les icônes restent groupées et le texte passe dessous */
@media (max-width: 480px) {
    .mphb_sc_checkout-form .nc-payment-trust {
        padding: 12px 14px;
        gap: 10px;
    }
    .mphb_sc_checkout-form .nc-trust-icon {
        width: 30px;
        height: 20px;
    }
    .mphb_sc_checkout-form .nc-trust-lock-wrap {
        font-size: 10px;
    }
}

/* État désactivé (appliqué par checkout-rate-auto.js quand > 2 voyageurs
   pour le tarif "Sans tente"). Visuellement grisé + curseur not-allowed. */
.mphb_sc_checkout-form .mphb-room-rate-variant.nc-rate-disabled {
    opacity: 0.45;
    pointer-events: none;
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.3);
}
.mphb_sc_checkout-form .mphb-room-rate-variant.nc-rate-disabled label,
.mphb_sc_checkout-form .mphb-room-rate-variant.nc-rate-disabled input {
    cursor: not-allowed;
}

/* === Form layout horizontal — label inline-block à gauche, input à droite ===
   Approche simple : avec `<br>` masqué entre les 2, label + input sont
   deux inline-block sur la même ligne. Pas de flex, pas de surprise. */
.mphb_sc_checkout-form #mphb-customer-details > p,
.mphb_sc_checkout-form .mphb-room-details > p,
.mphb_sc_checkout-form .mphb-adults-chooser,
.mphb_sc_checkout-form .mphb-children-chooser {
    margin: 0 0 14px !important;
    white-space: nowrap; /* empêche le wrap entre label et input */
}
.mphb_sc_checkout-form #mphb-customer-details > p:last-child {
    margin-bottom: 0 !important;
}
.mphb_sc_checkout-form #mphb-customer-details > p > label,
.mphb_sc_checkout-form .mphb-adults-chooser > label,
.mphb_sc_checkout-form .mphb-children-chooser > label,
.mphb_sc_checkout-form .mphb-room-details > p > label {
    display: inline-block !important;
    vertical-align: middle;
    width: 140px;
    margin: 0 12px 0 0 !important;
    padding: 0;
    font-size: 13px !important;
    letter-spacing: 0.16em !important;
    text-align: right;
    line-height: 1.3;
    white-space: normal; /* autorise le wrap du texte LONG dans le label */
    /* Conserve la typo mono caps héritée de form[class*="mphb"] label */
}
.mphb_sc_checkout-form #mphb-customer-details > p > input,
.mphb_sc_checkout-form #mphb-customer-details > p > select,
.mphb_sc_checkout-form #mphb-customer-details > p > textarea,
.mphb_sc_checkout-form .mphb-adults-chooser > select,
.mphb_sc_checkout-form .mphb-children-chooser > select,
.mphb_sc_checkout-form .mphb-room-details > p > input,
.mphb_sc_checkout-form .mphb-room-details > p > select {
    display: inline-block !important;
    vertical-align: middle;
    width: calc(100% - 156px) !important;
    max-width: calc(100% - 156px);
}
/* Notes (textarea) : label aligné en haut pour cohérence visuelle */
.mphb_sc_checkout-form #mphb-customer-details > p.mphb-customer-note > label {
    vertical-align: top;
    padding-top: 12px;
}
.mphb_sc_checkout-form #mphb-customer-details > p.mphb-customer-note > textarea {
    vertical-align: top;
}
/* Mobile : retour en stack vertical (label au-dessus de l'input pleine largeur) */
@media (max-width: 600px) {
    .mphb_sc_checkout-form #mphb-customer-details > p,
    .mphb_sc_checkout-form .mphb-room-details > p,
    .mphb_sc_checkout-form .mphb-adults-chooser,
    .mphb_sc_checkout-form .mphb-children-chooser {
        white-space: normal;
    }
    .mphb_sc_checkout-form #mphb-customer-details > p > label,
    .mphb_sc_checkout-form .mphb-adults-chooser > label,
    .mphb_sc_checkout-form .mphb-children-chooser > label,
    .mphb_sc_checkout-form .mphb-room-details > p > label {
        display: block !important;
        width: auto;
        text-align: left;
        margin: 0 0 6px 0 !important;
    }
    .mphb_sc_checkout-form #mphb-customer-details > p > input,
    .mphb_sc_checkout-form #mphb-customer-details > p > select,
    .mphb_sc_checkout-form #mphb-customer-details > p > textarea,
    .mphb_sc_checkout-form .mphb-adults-chooser > select,
    .mphb_sc_checkout-form .mphb-children-chooser > select,
    .mphb_sc_checkout-form .mphb-room-details > p > input,
    .mphb_sc_checkout-form .mphb-room-details > p > select {
        width: 100% !important;
        max-width: 100%;
    }
}
/* abbr (required) plus discret */
.mphb_sc_checkout-form abbr[title="Required"],
.mphb_sc_checkout-form abbr[title="required"] {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    border: none;
    font-weight: 700;
    margin-left: 2px;
}

/* === Section "Répartition du prix" === */
.mphb_sc_checkout-form #mphb-price-details table {
    width: 100%;
    border-collapse: collapse;
}
.mphb_sc_checkout-form #mphb-price-details th,
.mphb_sc_checkout-form #mphb-price-details td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--wp--preset--color--cream);
    font-size: 14px;
}
.mphb_sc_checkout-form #mphb-price-details th {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    background: var(--wp--preset--color--cream);
}
.mphb_sc_checkout-form #mphb-price-details tfoot td {
    font-weight: 700;
    color: var(--wp--preset--color--primary-dark);
    border-bottom: none;
    border-top: 2px solid var(--wp--preset--color--cream);
}

/* === Total + Submit en bas, alignés à droite === */
form.mphb_sc_checkout-form > .mphb-total-price {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 16px 0 0 !important;
    text-align: right;
    font-family: var(--wp--preset--font-family--display);
    font-size: 28px;
    color: var(--wp--preset--color--primary-dark);
    margin: 0 !important;
}
form.mphb_sc_checkout-form > .mphb-total-price output {
    display: inline-flex;
    align-items: baseline;
    gap: 16px;
}
form.mphb_sc_checkout-form > .mphb-total-price strong.mphb-total-price-field {
    font-size: 40px;
    color: var(--wp--preset--color--primary-dark);
    font-weight: 400;
}

/* Wrapper submit en bas : aligné à droite, laisse l'espace gauche pour la caravane */
form.mphb_sc_checkout-form > .mphb_sc_checkout-submit-wrapper {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 !important;
    margin: 16px 0 80px !important;
    text-align: right;
}
form.mphb_sc_checkout-form > .mphb_sc_checkout-submit-wrapper input[type="submit"] {
    padding: 18px 48px !important;
    font-size: 16px !important;
}

/* === Mobile : tout en 1 colonne === */
@media (max-width: 781px) {
    form.mphb_sc_checkout-form {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    form.mphb_sc_checkout-form > #mphb-room-details,
    form.mphb_sc_checkout-form > #mphb-customer-details {
        grid-column: 1 / -1;
    }
    form.mphb_sc_checkout-form > .mphb-total-price {
        font-size: 22px;
        text-align: center;
    }
    form.mphb_sc_checkout-form > .mphb-total-price strong.mphb-total-price-field {
        font-size: 32px;
    }
    form.mphb_sc_checkout-form > .mphb_sc_checkout-submit-wrapper {
        text-align: center;
        margin-bottom: 60px !important;
    }
    /* La caravane prend moins de place en mobile, le bouton peut être centré */
}

/* === Bloc Details (FAQ accordéon natif WP) — coins arrondis === */
.wp-block-details {
    border-radius: 20px;
}

/* ============================================
   DATEPICKER MotoPress — override du thème "minimal" pour un look moderne
   (coins arrondis, couleurs turquoise marque, typo cohérente).
   Bibliothèque : kbwood/datepick. Le thème minimal est sélectionné dans
   l'admin MotoPress ; on rajoute juste l'habillage marque par-dessus.
   ============================================ */

/* Le popup datepicker (jQuery datepick) est positionné en absolute par la lib,
   collé au champ. On le décale verticalement via margin-top pour aérer. */
.datepick-popup {
    margin-top: 12px !important;
}

/* Wrapper datepicker — radius 10px (= inputs), bordure verte (primary),
   ombre douce. Le radius est aligné avec les champs d'arrivée/départ. */
.mphb-calendar .mphb-datepicker-minimal,
.datepick-popup .mphb-datepicker-minimal {
    border-radius: 10px !important;
    border: 2px solid var(--wp--preset--color--primary) !important;
    background: var(--wp--preset--color--white) !important;
    box-shadow: 0 6px 24px rgba(30, 74, 82, 0.10) !important;
    padding: 6px;
    font-family: var(--wp--preset--font-family--body);
    overflow: hidden;
}

/* Suppression des bordures internes parasites héritées du thème minimal */
.mphb-datepicker-minimal .datepick-nav,
.mphb-datepicker-minimal .datepick-month,
.mphb-datepicker-minimal .datepick-ctrl,
.mphb-datepicker-minimal .datepick-month-header {
    border: none !important;
    background: transparent !important;
}

/* Header mois (Mai 2026) — typo display, centré, hauteur fixe pour aligner
   le 1er mois (qui a 2 <select>) et le 2nd (juste du texte). */
.mphb-datepicker-minimal .datepick-month-header {
    height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 !important;
    margin-bottom: 4px;
}
.mphb-datepicker-minimal .datepick-month-header,
.mphb-datepicker-minimal .datepick-month-header select,
.mphb-datepicker-minimal .datepick-month-header input {
    font-family: var(--wp--preset--font-family--display) !important;
    font-size: 16px !important;
    color: var(--wp--preset--color--black) !important;
    background: transparent !important;
    text-align: center;
    line-height: 1 !important;
    border: none !important;
    box-shadow: none !important;
}
/* Selects dans le header — neutralise le styling natif pour matcher le texte */
.mphb-datepicker-minimal .datepick-month-header select {
    height: auto !important;
    padding: 4px 18px 4px 4px !important;
    margin: 0 !important;
    appearance: auto;
    cursor: pointer;
    width: auto !important;
    min-width: 0 !important;
    vertical-align: middle;
}

/* Boutons nav (prev/next mois) — pastilles cream au hover */
.mphb-datepicker-minimal .datepick-nav a,
.datepick-popup .mphb-datepicker-minimal .datepick-cmd-prev,
.datepick-popup .mphb-datepicker-minimal .datepick-cmd-next {
    color: var(--wp--preset--color--primary-dark) !important;
    border-radius: 8px;
    transition: background .15s, color .15s;
}
.mphb-datepicker-minimal .datepick-nav a:hover,
.datepick-popup .mphb-datepicker-minimal .datepick-cmd-prev:hover,
.datepick-popup .mphb-datepicker-minimal .datepick-cmd-next:hover {
    background: var(--wp--preset--color--cream) !important;
    color: var(--wp--preset--color--primary) !important;
}

/* Jours de la semaine (Lun, Mar…) — mono caps */
.mphb-datepicker-minimal .datepick-month th,
.mphb-datepicker-minimal .datepick-month th a {
    font-family: var(--wp--preset--font-family--mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--primary-dark) !important;
    background: transparent !important;
    font-weight: 600 !important;
    padding: 10px 0 8px !important;
    border: none !important;
}

/* Cellules de dates — coins arrondis modernes (10px), largeur fixe uniforme,
   tabular figures (tnum) pour que les chiffres aient TOUS la même largeur,
   indépendamment du font-weight (sinon "20" en bold est plus large que "20"
   en regular et toute la colonne se décale au hover/selected). */
.mphb-calendar .mphb-datepicker-minimal .datepick-month td,
.datepick-popup .mphb-datepicker-minimal .datepick-month td {
    background: transparent !important;
    border: none !important;
    padding: 1px !important;
    width: 14.2857%;        /* 1/7 = colonnes égales fixes */
    box-sizing: border-box;
}
.mphb-calendar .mphb-datepicker-minimal .datepick-month table,
.datepick-popup .mphb-datepicker-minimal .datepick-month table {
    table-layout: fixed !important;
}
.mphb-calendar .mphb-datepicker-minimal .datepick-month td a,
.mphb-calendar .mphb-datepicker-minimal .datepick-month td span,
.datepick-popup .mphb-datepicker-minimal .datepick-month td a,
.datepick-popup .mphb-datepicker-minimal .datepick-month td span,
.mphb-calendar.mphb-datepick .mphb-datepicker-minimal .datepick-month td a,
.mphb-calendar.mphb-datepick .mphb-datepicker-minimal .datepick-month td span {
    border-radius: 10px !important;
    display: block;
    width: 100% !important;
    max-width: 36px !important;
    height: 36px;
    line-height: 36px;
    margin: 2px auto !important;
    padding: 0 !important;
    font-weight: 500;
    font-size: 14px;
    /* tnum = tabular-nums : tous les chiffres à largeur identique */
    font-feature-settings: 'tnum' 1;
    font-variant-numeric: tabular-nums;
    transition: background .15s, color .15s, box-shadow .15s;
    text-align: center;
    box-sizing: border-box;
}

/* Variables couleur — surcharge des CSS vars du thème minimal */
.mphb-calendar.mphb-datepick .mphb-datepicker-minimal {
    --mphb-available-date-bg: var(--wp--preset--color--cream);
    --mphb-available-date-color: var(--wp--preset--color--primary-dark);
    --mphb-not-available-date-bg: transparent;
    --mphb-not-available-date-color: rgba(0, 0, 0, 0.25);
    --mphb-booked-date-bg: transparent;
    --mphb-booked-date-color: rgba(0, 0, 0, 0.25);
    --mphb-out-of-season-date-bg: transparent;
    --mphb-out-of-season-date-color: rgba(0, 0, 0, 0.3);
    --mphb-selected-date-bg: var(--wp--preset--color--primary);
    --mphb-selected-date-color: #fff;
    --mphb-unselectable-date-color: rgba(0, 0, 0, 0.3);
}

/* Hover dates sélectionnables — turquoise clair, sans transform pour éviter
   le layout shift qui faisait bouger les colonnes. Outline inset à la place. */
.datepick-popup .mphb-datepicker-minimal .datepick-month td .mphb-selectable-date:hover,
.mphb-calendar.mphb-datepick .mphb-datepicker-minimal .datepick-month td .mphb-selectable-date--check-in:hover,
.mphb-calendar.mphb-datepick .mphb-datepicker-minimal .datepick-month td .mphb-selectable-date--check-out:hover {
    background: var(--wp--preset--color--primary-light) !important;
    color: var(--wp--preset--color--primary-dark) !important;
    box-shadow: inset 0 0 0 2px var(--wp--preset--color--primary) !important;
}

/* Date sélectionnée / highlight — turquoise plein */
.datepick-popup .mphb-datepicker-minimal .datepick-month td .datepick-selected,
.datepick-popup .mphb-datepicker-minimal .datepick-month td a.datepick-highlight,
.mphb-calendar.mphb-datepick .mphb-datepicker-minimal .datepick-month td .mphb-selected-date,
.mphb-calendar.mphb-datepick .mphb-datepicker-minimal .datepick-month td .mphb-selected-date--check-in,
.mphb-calendar.mphb-datepick .mphb-datepicker-minimal .datepick-month td .mphb-selected-date--check-out {
    background: var(--wp--preset--color--primary) !important;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
}

/* Date Check-in en cours (popup) */
.datepick-popup .mphb-datepicker-minimal.mphb-datepick-popup .datepick-month td .mphb-check-in-date {
    background: var(--wp--preset--color--primary-dark) !important;
    color: #fff !important;
    font-weight: 700;
}

/* Aujourd'hui — outline turquoise */
.datepick-popup .mphb-datepicker-minimal .datepick-month td .datepick-today,
.mphb-calendar .mphb-datepicker-minimal .datepick-month td .datepick-today {
    box-shadow: inset 0 0 0 2px var(--wp--preset--color--primary) !important;
    background: var(--wp--preset--color--white) !important;
    color: var(--wp--preset--color--primary-dark) !important;
    font-weight: 700;
}

/* Dates passées / non-dispo — grisées + barrées */
.datepick-popup .mphb-datepicker-minimal .datepick-month td .mphb-past-date,
.datepick-popup .mphb-datepicker-minimal .datepick-month td .mphb-unselectable-date,
.mphb-calendar.mphb-datepick .mphb-datepicker-minimal .datepick-month td .mphb-past-date {
    color: rgba(0, 0, 0, 0.2) !important;
    text-decoration: line-through;
    background: transparent !important;
}

/* Footer (bouton "Effacer") — typo mono caps */
.mphb-datepicker-minimal .datepick-ctrl {
    border-top: 1px solid var(--wp--preset--color--cream) !important;
    margin-top: 8px;
    padding-top: 8px;
    background: transparent !important;
}
.mphb-datepicker-minimal .datepick-ctrl:before {
    display: none !important;
}
.mphb-datepicker-minimal .datepick-ctrl .datepick-cmd,
.mphb-datepicker-minimal .datepick-ctrl a {
    font-family: var(--wp--preset--font-family--mono) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: var(--wp--preset--color--primary-dark) !important;
    border-radius: 8px;
    padding: 4px 10px;
}
.mphb-datepicker-minimal .datepick-ctrl .datepick-cmd:hover,
.mphb-datepicker-minimal .datepick-ctrl a:hover {
    background: var(--wp--preset--color--cream) !important;
    color: var(--wp--preset--color--primary) !important;
}

/* Pour la version 2-mois (large écran) — séparation propre */
@media screen and (min-width: 48em) {
    .mphb-datepicker-minimal .datepick-month + .datepick-month {
        border-left: 1px solid var(--wp--preset--color--cream) !important;
        padding-left: 8px;
    }
}

/* ============================================
   FIX bordure parasite 4px sur le flexslider (CSS plugin par défaut)
   ============================================ */
.flexslider {
    border: none !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ============================================
   TÉMOIGNAGES — 3 cards (avatar initiale + étoiles + citation)
   ============================================ */
.nc-testimonial {
    background: var(--wp--preset--color--white);
    border: 2px solid #000;
    border-radius: 18px;
    padding: 28px 24px 24px;
    box-shadow: var(--wp--preset--shadow--button);
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}
/* Avatar : cercle avec initiale */
.nc-testimonial .nc-testimonial__avatar {
    margin: 0 0 4px !important;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--black);
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-family: var(--wp--preset--font-family--display);
    line-height: 1;
    border: 2px solid #000;
    flex-shrink: 0;
    /* Override de eyebrow flex (au cas où la class glisse) */
    text-transform: none;
    letter-spacing: 0;
}
/* Étoiles dorées */
.nc-testimonial .nc-testimonial__stars {
    margin: 0 !important;
    color: #FFC83D;
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 1;
}
/* Citation */
.nc-testimonial .nc-testimonial__quote {
    margin: 0 !important;
    color: rgba(0, 0, 0, 0.85);
    flex: 1;
}
/* Auteur */
.nc-testimonial .nc-testimonial__author {
    margin: 8px 0 0 !important;
    color: var(--wp--preset--color--black);
}
/* Date + modèle (style meta) */
.nc-testimonial .nc-testimonial__meta {
    margin: 0 !important;
    font-size: 11px;
    opacity: 0.75;
}

/* Cache les éléments parasites (anciens markup MotoPress) */
.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================
   ROOM SINGLE — page détail d'une caravane
   Galerie en grille à gauche, infos à droite, description full,
   booking form en card crème en bas.
   ============================================ */

/* ============================================
   BLOCS MotoPress sur page single accommodation type
   - Accommodation Type Image  → .mphb-single-room-type-post-thumbnail
   - Accommodation Type Gallery → .mphb-single-room-type-gallery-wrapper
   On les style pour qu'ils se comportent comme la galerie nc-room-gallery
   du shortcode, mais éditables via les blocs natifs MotoPress dans le Site Editor.
   ============================================ */

/* === Accommodation Type Image — image principale isolée ===
   La classe rendue par le bloc FSE est `.mphb-single-room-type-thumbnails`.
   Bornée à 100% de SA colonne parente (jamais full-page), aspect-ratio
   4/3 pour limiter la hauteur, coins arrondis et object-fit. */
.mphb-single-room-type-thumbnails,
.post-thumbnail.mphb-single-room-type-post-thumbnail,
.mphb-single-room-type-post-thumbnail {
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
    background: var(--wp--preset--color--cream);
    aspect-ratio: 4 / 3;
    /* Garde-fous pour ne JAMAIS dépasser de la colonne parente */
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
.mphb-single-room-type-thumbnails img,
.mphb-single-room-type-thumbnails a img,
.mphb-single-room-type-post-thumbnail img,
.mphb-single-room-type-post-thumbnail a img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform .3s ease;
}
.mphb-single-room-type-thumbnails:hover img,
.mphb-single-room-type-post-thumbnail:hover img {
    transform: scale(1.04);
}
.mphb-single-room-type-thumbnails a,
.mphb-single-room-type-post-thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

/* === Accommodation Type Gallery — grille 3 colonnes égales ===
   Override de la galerie WP native pour qu'elle reste dans son conteneur
   (pas de débord sous le footer) et présente 3 colonnes propres. */
.mphb-single-room-type-gallery-wrapper {
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.mphb-single-room-type-gallery-wrapper .gallery,
.mphb-single-room-type-gallery-wrapper [class*="gallery-columns-"] {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: auto;
    gap: 12px !important;
    margin: 24px 0 0 !important;
    width: 100%;
    clear: both;
}
.mphb-single-room-type-gallery-wrapper .gallery-item {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    overflow: hidden;
    border-radius: 14px;
    background: var(--wp--preset--color--cream);
    display: block;
    /* aspect-ratio 4/3 = format photo standard, vignettes moins hautes que 1:1
       (sur 3 colonnes large écran, ~250-300px de hauteur par cellule) */
    aspect-ratio: 4 / 3;
}
.mphb-single-room-type-gallery-wrapper .gallery-icon,
.mphb-single-room-type-gallery-wrapper .gallery-icon.landscape,
.mphb-single-room-type-gallery-wrapper .gallery-icon.portrait {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.mphb-single-room-type-gallery-wrapper .gallery-item a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}
.mphb-single-room-type-gallery-wrapper .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border: none !important;
    transition: transform .3s ease;
}
.mphb-single-room-type-gallery-wrapper .gallery-item:hover img {
    transform: scale(1.04);
}
/* Cache les captions WP par défaut (pas voulu sur la grille) */
.mphb-single-room-type-gallery-wrapper .gallery-caption,
.mphb-single-room-type-gallery-wrapper br {
    display: none !important;
}

/* Tablette : passe en 3 colonnes (4 cols c'est trop serré en dessous de 900px) */
@media (max-width: 900px) {
    .mphb-single-room-type-gallery-wrapper .gallery,
    .mphb-single-room-type-gallery-wrapper [class*="gallery-columns-"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
/* Mobile : 2 colonnes */
@media (max-width: 600px) {
    .mphb-single-room-type-gallery-wrapper .gallery,
    .mphb-single-room-type-gallery-wrapper [class*="gallery-columns-"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

/* Galerie : 1 grande image + grille 2 colonnes pour les suivantes */
.nc-room-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 200px;
    gap: 12px;
    margin: 0;
}
.nc-room-gallery__item {
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    background: var(--wp--preset--color--cream);
}
.nc-room-gallery__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform .3s ease;
}
.nc-room-gallery__item:hover .nc-room-gallery__img {
    transform: scale(1.04);
}
/* Première image en grand (span 2 colonnes + 2 rangées) */
.nc-room-gallery__item--0 {
    grid-column: 1 / -1;
    grid-row: span 2;
    border-radius: 18px;
}
/* Si pas d'item 0 mais on a moins de 4 photos, layout simplifié */
.nc-room-gallery[data-count="1"] {
    grid-template-columns: 1fr;
    grid-auto-rows: 360px;
}
.nc-room-gallery[data-count="2"] .nc-room-gallery__item--0,
.nc-room-gallery[data-count="3"] .nc-room-gallery__item--0 {
    grid-row: span 1;
}

@media (max-width: 781px) {
    .nc-room-gallery {
        grid-auto-rows: 160px;
        gap: 8px;
    }
    .nc-room-gallery__item--0 {
        grid-row: span 2;
    }
}

/* Bloc Détails (meta : voyageurs, surface, lit, vue) */
.nc-room-meta {
    margin: 0 0 16px;
    padding: 0;
    border-top: 1px dashed var(--wp--preset--color--cream);
}
.nc-room-meta__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--wp--preset--color--cream);
    align-items: baseline;
}
.nc-room-meta dt {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    flex-shrink: 0;
    margin: 0;
}
.nc-room-meta dd {
    margin: 0;
    color: rgba(0, 0, 0, 0.85);
    text-align: right;
    flex: 1;
}

/* Liste des équipements (facilities) en pills */
.nc-room-facilities {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.nc-room-facilities__item {
    display: inline-block;
    padding: 8px 18px;
    background: var(--wp--preset--color--cream);
    color: var(--wp--preset--color--primary-dark);
    border-radius: 999px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    list-style: none;
}

/* Page single — header titre, padding réduit pour pas surcharger */
.nc-room-single .wp-block-post-title {
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
    margin: 0 0 12px;
    color: var(--wp--preset--color--primary-dark);
}

/* Description du room type (post_content) — texte généreux */
.nc-room-single__description {
    font-size: 28px;
    line-height: 1.5;
}
.nc-room-single__description ul,
.nc-room-single__description ol {
    padding-left: 1.4em;
}
.nc-room-single__description li {
    margin-bottom: 12px;
}

/* Largeur fiche élargie (override le wide-size par défaut pour cette page) */
.nc-room-single .alignwide {
    max-width: min(1500px, calc(100vw - 32px));
    margin-left: auto;
    margin-right: auto;
}
/* La description et le bloc booking en wide → leur contenu interne occupe toute la largeur */
.nc-room-single__description > *,
.nc-room-single__description .wp-block-post-content,
.nc-room-single__description .wp-block-post-content > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================
   BOOKING FORM — formulaire MotoPress sur une ligne
   ============================================ */
.nc-room-single__booking .mphb_sc_booking_form-wrapper {
    max-width: 100%;
}
.nc-room-single__booking .mphb-booking-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin: 0;
    max-width: none;
}
/* Tous les enfants : pas de margin, et par défaut on ne prend pas de place */
.nc-room-single__booking .mphb-booking-form > * {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
}
/* Wrappers de dates (input.mphb-datepick) : flex grow, base 160px */
.nc-room-single__booking .mphb-check-in-date-wrapper,
.nc-room-single__booking .mphb-check-out-date-wrapper {
    flex: 1 1 160px;
    max-width: 220px;
}
/* Wrappers de capacité (selects) : plus compacts */
.nc-room-single__booking .mphb-adults-wrapper,
.nc-room-single__booking .mphb-children-wrapper,
.nc-room-single__booking .mphb-capacity-wrapper {
    flex: 1 1 110px;
    max-width: 150px;
}
/* Bouton : ne grandit pas, alignement bottom */
.nc-room-single__booking .mphb-reserve-btn-wrapper {
    flex: 0 0 auto !important;
    margin-left: auto;
}
/* Cache tout ce qui n'est pas un wrapper utile (tip, p vides, errors,
   wrappers de capacité sans select — ex: Enfants quand max=0) */
.nc-room-single__booking .mphb-required-fields-tip,
.nc-room-single__booking .mphb-errors-wrapper,
.nc-room-single__booking .mphb-booking-form > p:empty,
.nc-room-single__booking .mphb-booking-form > p:not([class]),
.nc-room-single__booking .mphb-booking-form > p[class=""],
.nc-room-single__booking .mphb-booking-form > p:not(:has(input.mphb-datepick, input[type="date"], input[type="submit"], input.mphb-reserve-btn, select, button)) {
    display: none !important;
}
/* Tue TOUS les <br> du form (MotoPress en met partout entre label et input) */
.nc-room-single__booking .mphb-booking-form br,
.nc-room-single__booking .mphb-booking-form label br,
.mphb_sc_booking_form-wrapper br {
    display: none !important;
}
/* Labels en mono caps (style cohérent avec eyebrow) */
.nc-room-single__booking .mphb-booking-form label {
    display: block;
    font-family: var(--wp--preset--font-family--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-dark);
    margin-bottom: 6px;
    font-weight: 500;
}
.nc-room-single__booking input[type="text"],
.nc-room-single__booking input[type="number"],
.nc-room-single__booking input[type="date"],
.nc-room-single__booking input.mphb-datepick,
.nc-room-single__booking select {
    background: var(--wp--preset--color--white);
    border: 1.5px solid var(--wp--preset--color--cream);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 16px;
    color: var(--wp--preset--color--black);
    width: 90%;
    max-width: 100%;
}
.nc-room-single__booking input.mphb-datepick:focus,
.nc-room-single__booking select:focus {
    border-color: var(--wp--preset--color--primary);
    outline: none;
}
.nc-room-single__booking button[type="submit"],
.nc-room-single__booking input[type="submit"],
.nc-room-single__booking .mphb-reserve-btn {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    border: none;
    border-radius: 999px;
    padding: 14px 32px;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 5px 0 var(--wp--preset--color--primary-dark);
    width: auto;
}
.nc-room-single__booking input[type="submit"]:hover,
.nc-room-single__booking button[type="submit"]:hover {
    transform: translateY(2px);
    box-shadow: 0 3px 0 var(--wp--preset--color--primary-dark);
}

/* ============================================
   PAGE CONTENT — bordure turquoise en bas + caravane en débord
   (esprit flyer page 2 : la caravane est posée sur la séparation
   entre le contenu et le footer/CTA, alignée à gauche du wide width)
   ============================================ */
.nc-page-content {
    position: relative;
    /* La bordure-bottom turquoise est définie par les attributes du bloc Group
       (border.bottom dans le template) — pas besoin ici */
}

/* La caravane se positionne en absolu en bas-gauche du group contenu,
   alignée sur le bord gauche du wide-width. */
.wp-block-image.nc-page-vehicule {
    position: absolute;
    bottom: -18px;
    /* Cale sur le bord gauche du wide-width quand viewport > wide ; sinon collée à 0 */
    left: max(
        var(--wp--style--root--padding-left, 16px),
        calc((100% - var(--wp--style--global--wide-size, 1280px)) / 2)
    );
    width: 220px;
    max-width: 30vw;
    margin: 0 !important;
    z-index: 2;
    pointer-events: none;
}
.wp-block-image.nc-page-vehicule img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 781px) {
    .wp-block-image.nc-page-vehicule {
        width: 140px;
        max-width: 35vw;
        bottom: 30px;
    }
}

/* Évite les scrollbars horizontales si la caravane dépasse à gauche */
body { overflow-x: hidden; }

/* ============================================
   BOUTON RETOUR EN HAUT (injecté par theme.js)
   Style maison : rond turquoise, bordure noire, ombre dure.
   Masqué tant qu'on n'a pas scrollé d'un écran (.is-visible via JS).
   ============================================ */
.nc-back-to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white, #fff);
    border: 2px solid #000;
    box-shadow: var(--wp--preset--shadow--button, 0 4px 0 #143c46);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s, transform .25s, visibility .25s, box-shadow .2s;
}
.nc-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nc-back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 0 var(--wp--preset--color--primary-dark, #143c46);
}
.nc-back-to-top:focus-visible {
    outline: 3px solid var(--wp--preset--color--accent, #1aaf6e);
    outline-offset: 2px;
}
.nc-back-to-top svg {
    display: block;
}
@media (max-width: 781px) {
    .nc-back-to-top {
        right: 14px;
        bottom: 14px;
        width: 44px;
        height: 44px;
    }
}

/* ============================================
   PAGE HEADER — habillage titre des pages normales
   ============================================ */
.nc-page-header {
    /* L'image bg-papier-2 est en fond + overlay gradient géré par le bloc Cover */
    position: relative;
}
.nc-page-header .wp-block-cover__image-background {
    object-fit: cover;
    /* Texture papier visible mais discrète */
    opacity: 0.7;
    mix-blend-mode: multiply;
}
.nc-page-header .wp-block-post-title {
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(36px, 6vw, 64px);
    line-height: 1;
    letter-spacing: 0.005em;
    color: var(--wp--preset--color--primary-dark);
    margin: 8px 0 16px;
}
.nc-page-header .is-style-eyebrow {
    color: var(--wp--preset--color--primary-dark);
    opacity: 0.7;
}
.nc-page-header__zigzag {
    display: block;
    margin: 12px auto 0;
}

/* ============================================
   SÉPARATEURS DÉCORATIFS — block styles pour core/separator
   Réutilisables partout via le Site Editor (Séparateur → choix du style).
   SVG inline URL-encoded → zéro requête HTTP, scalable, couleur via fill/stroke.
   ============================================ */

/* Reset des styles natifs WP du séparateur quand on applique une variante.
   display: block + margin auto !important : centrage horizontal robuste,
   ne dépend plus du layout parent (constrained / cover-inner / flex).
   Pour aligner gauche/droite via l'option du toolbar, utiliser .alignleft
   ou .alignright (handlés plus bas). */
.wp-block-separator.is-style-zigzag,
.wp-block-separator.is-style-dots,
.wp-block-separator.is-style-wave {
    border: none !important;
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    max-width: 100%;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 16px;
    margin-bottom: 16px;
    opacity: 1;
}
/* Si le user clique "alignleft" ou "alignright" dans le toolbar */
.wp-block-separator.is-style-zigzag.alignleft,
.wp-block-separator.is-style-dots.alignleft,
.wp-block-separator.is-style-wave.alignleft {
    margin-left: 0 !important;
    margin-right: auto !important;
}
.wp-block-separator.is-style-zigzag.alignright,
.wp-block-separator.is-style-dots.alignright,
.wp-block-separator.is-style-wave.alignright {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* === Zigzag turquoise — 180×18, 11 segments comme l'original ===
   !important nécessaire pour battre la règle globale du thème :
   .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 100px }
   Path : largeur identique à l'original, hauteur légèrement augmentée pour
   un trait plus visible, stroke 4 au lieu de 3. */
.wp-block-separator.is-style-zigzag {
    width: 180px !important;
    height: 18px !important;
    max-width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 18' fill='none' stroke='%234FB2A3' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 14 L18 4 L34 14 L50 4 L66 14 L82 4 L98 14 L114 4 L130 14 L146 4 L162 14 L178 4'/%3E%3C/svg%3E");
}

/* ============================================
   MOBILE PATCH — fixes responsive (audit Puppeteer @ 375px)
   Identifiés via review systématique. Tous regroupés ici pour faciliter
   le suivi / retrait éventuel. Breakpoint principal : 600px.
   ============================================ */
@media (max-width: 600px) {

    /* === 1. Booking-bar home — champs en stack vertical (1 col) ===
       Le positionnement (position: static + marges) est géré plus bas
       dans le @media (max-width: 767px) pour couvrir aussi la zone 601-767
       où la barre était encore en absolute → chevauchement. */
    .nomade-booking-bar__form {
        flex-direction: column;
        gap: 14px;
        align-items: stretch;
    }
    .nomade-booking-bar__field {
        flex: 0 0 auto;
        min-width: 0;
        width: 100%;
    }
    .nomade-booking-bar__field input,
    .nomade-booking-bar__field select {
        width: 100%;
    }
    .nomade-booking-bar__form > button {
        width: 100%;
    }

    /* (le hide du .hero-visual.floaty a été sorti de ce media query
       et déplacé dans le bloc @media (max-width: 781px) ci-dessous,
       pour aligner avec le breakpoint mobile WP du bloc logo de remplacement) */

    /* === 2. MotoPress search form — même fix que la booking-bar ===
       Le form mphb_sc_search-form avait des champs flex avec min-width,
       sur disponibilités les champs Adultes/Enfants étaient poussés
       hors viewport. Stack vertical en mobile. */
    .nomade-booking-bar .mphb_sc_search-form,
    .mphb_sc_search-wrapper.nomade-booking-bar__form,
    form.mphb_sc_search-form {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .nomade-booking-bar .mphb_sc_search-form > *,
    form.mphb_sc_search-form > * {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
    .nomade-booking-bar .mphb_sc_search-form input[type="submit"],
    .nomade-booking-bar .mphb_sc_search-form button[type="submit"],
    form.mphb_sc_search-form input[type="submit"],
    form.mphb_sc_search-form button[type="submit"] {
        width: 100% !important;
        align-self: stretch !important;
    }

    /* === 3. Card recommandation horizontale (disponibilités) ===
       Le triplet [count] [link] [price] tenait sur une ligne en desktop.
       Sur mobile la card overflowait à droite (link flex:1 + price absolu
       en bout). On passe en column stack. */
    .mphb-recommendation-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 6px;
    }
    .mphb-recommendation-item-count {
        order: 1;
    }
    .mphb-recommendation-item-link {
        order: 2;
        flex: 0 0 auto;
        width: 100%;
    }
    .mphb-recommedation-item-subtotal {
        order: 3;
        margin-left: 0 !important;
        text-align: left;
    }
    .mphb-recommendation-item-guests {
        order: 4;
    }

    /* === 4. Titres "1 chambre trouvée" + "Recommandé pour..." ===
       Sur mobile, le mono caps avec letter-spacing 0.18em consomme bcp de
       largeur. On réduit le font-size et le tracking pour que le wrap
       tombe avant le débord. */
    .mphb_sc_search_results-wrapper {
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }
    .mphb_sc_search_results-info {
        font-size: 10px !important;
        letter-spacing: 0.1em !important;
        word-break: normal;
        overflow-wrap: break-word;
        padding: 0 4px;
    }
    .mphb-recommendation-title {
        font-size: clamp(18px, 5.5vw, 24px) !important;
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: auto;
        padding: 0 4px;
    }

    /* Card recommandation form — assure aussi qu'elle reste dans le viewport */
    form.mphb-recommendation {
        max-width: 100%;
        box-sizing: border-box;
    }
    .mphb-recommendation-total {
        flex-wrap: wrap;
        justify-content: flex-start !important;
        padding: 14px 16px !important;
    }

    /* === 5. Bouton "Tous les modèles" — stack sous le titre ===
       Le wp:group de section-caravanes a layout flex nowrap space-between.
       Sur mobile le bouton se faisait écraser à droite et le texte
       partait en lettres séparées. On force le stack vertical.
       Ciblage strict via #caravanes uniquement (le sélecteur générique
       avec :has cassait le header qui a aussi .is-layout-flex.is-nowrap).
       Children en width 100% pour que le sous-groupe titre ne reste pas
       à 50% (héritage du space-between desktop). */
    #caravanes > .wp-block-group.is-layout-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }
    #caravanes > .wp-block-group.is-layout-flex > * {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }
    #caravanes .wp-block-button .wp-block-button__link {
        white-space: nowrap;
    }

    /* === 6. Section "Tente / Confort / Cuisine / Liberté" (4 icônes) ===
       Le wp:group is-nowrap is-content-justification-space-between forçait
       les 4 cards sur une seule ligne → la 4e débordait à droite.
       On override flex-wrap pour passer en grille 2×2 fixe sur mobile.
       EXCLUSIONS : le header utilise aussi ces classes (header-inner,
       header-actions) — on les exclut explicitement pour ne pas le casser. */
    main .wp-block-group.is-nowrap.is-content-justification-space-between:not(.header-inner):not(.header-actions) {
        flex-wrap: wrap !important;
        gap: 16px;
        justify-content: center !important;
    }
    main .wp-block-group.is-nowrap.is-content-justification-space-between:not(.header-inner):not(.header-actions) > * {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
    }

    /* === 7. Description fiche caravane — font réduite ===
       28px hérité du desktop rendait la description énorme sur mobile
       (4-5 mots par ligne). On rabaisse à 17px qui reste lisible. */
    .nc-room-single__description {
        font-size: 17px;
        line-height: 1.6;
    }

    /* === 8. Section "Qui sommes-nous" (presentation) — top reduit ===
       Le padding-top var(--wp--preset--spacing--80) crée un gros vide
       au-dessus du eyebrow sur mobile, surtout maintenant que la
       booking-bar a sa propre marge de 2rem. On compresse. */
    #presentation {
        padding-top: 2rem !important;
    }

    /* (fix #9 alignwide déplacé HORS du @media max-width:600px et étendu
       jusqu'à 1280px — voir bloc séparé plus bas) */

    /* === 10. Booking form fiche caravane — alignement champs/bouton ===
       Sur desktop : 4 wrappers + bouton sur une ligne, button auto-width
       poussé à droite via margin-left: auto. Sur mobile : tout doit être
       full width et aligné gauche pour que les inputs et le bouton aient
       la même largeur visuelle. */
    .nc-room-single__booking .mphb-booking-form > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .nc-room-single__booking .mphb-reserve-btn-wrapper {
        margin-left: 0 !important;
        text-align: center;
    }
    .nc-room-single__booking .mphb-reserve-btn-wrapper input.mphb-reserve-btn,
    .nc-room-single__booking .mphb-reserve-btn-wrapper button.mphb-reserve-btn,
    .nc-room-single__booking .mphb-reserve-btn-wrapper input[type="submit"],
    .nc-room-single__booking .mphb-reserve-btn-wrapper button[type="submit"] {
        width: 100% !important;
    }

    /* Bouton "Confirmer la réservation" qui apparaît APRÈS sélection des
       dates (.mphb-confirm-reservation dans .mphb-reserve-room-section).
       Même traitement full-width pour matcher les inputs.

       Override align-items: center → stretch sur la section, car la règle
       générique pour la page disponibilités (ligne 1112) centre les items
       sur leur contenu → le bouton restait étroit. Ici on veut stretch.

       Override padding 16px 28px 28px → 0 pour que le bouton touche les
       bords de la card (l'aspect visuel "padding" est déjà donné par le
       wrapper parent .nc-room-single__booking). */
    .nc-room-single__booking .mphb-reserve-room-section {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        align-items: stretch !important;
        padding: 0 !important;
    }
    .nc-room-single__booking .mphb-rooms-quantity-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }
    .nc-room-single__booking input.mphb-confirm-reservation,
    .nc-room-single__booking button.mphb-confirm-reservation {
        width: 100% !important;
        display: block;
        margin: 0 !important;
    }

    /* === 11. Datepicker popup — ne déborde pas du viewport ===
       Le popup .datepick-popup est positionné absolute par la lib JS.
       Sa largeur native (~440px via la lib kbwood) dépasse 375px de
       viewport sur mobile. On la contraint à tenir dans l'écran. */
    .datepick-popup {
        max-width: calc(100vw - 16px) !important;
        width: calc(100vw - 16px) !important;
        left: 8px !important;
        right: auto !important;
        padding: 0 !important;
        box-sizing: border-box;
    }
    .datepick-popup .mphb-datepicker-minimal,
    .datepick-popup .mphb-datepicker-minimal.datepick {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* === Floaty visuel du hero — masqué jusqu'au breakpoint WP 781px ===
   Le bloc logo de remplacement ajouté dans le template apparaît jusqu'à
   780px (breakpoint mobile WordPress par défaut). On aligne le hide du
   floaty sur ce même breakpoint pour éviter qu'ils s'affichent ensemble
   dans la zone 600-781px. */
@media (max-width: 781px) {
    .hero-visual.floaty {
        display: none !important;
    }
}

/* === Booking form fiche caravane — bouton sur sa propre ligne ===
   Sur tablet/small laptop (601-1024px), le bouton "Vérifier la disponibilité"
   wrappait sur sa propre ligne mais restait à sa taille de contenu poussé
   à droite. On centre les éléments du form pour un visuel propre quand
   les champs n'occupent pas toute la ligne, et on met le bouton en pleine
   largeur sur sa propre ligne. */
@media (min-width: 601px) and (max-width: 1024px) {
    /* Centrage horizontal du contenu wrappé du form */
    .nc-room-single__booking .mphb-booking-form {
        justify-content: center !important;
    }
    /* Bouton "Vérifier la disponibilité" : sa propre ligne, pleine largeur */
    .nc-room-single__booking .mphb-reserve-btn-wrapper {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
    .nc-room-single__booking .mphb-reserve-btn-wrapper input.mphb-reserve-btn,
    .nc-room-single__booking .mphb-reserve-btn-wrapper button.mphb-reserve-btn,
    .nc-room-single__booking .mphb-reserve-btn-wrapper input[type="submit"],
    .nc-room-single__booking .mphb-reserve-btn-wrapper button[type="submit"] {
        width: 100% !important;
    }
    /* Bouton "Confirmer la réservation" (après sélection dates) */
    .nc-room-single__booking .mphb-reserve-room-section {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    .nc-room-single__booking input.mphb-confirm-reservation,
    .nc-room-single__booking button.mphb-confirm-reservation {
        width: 100% !important;
        display: block;
    }
}

/* === Neutralise le débord de .alignwide (règle nomade-camper-align) ===
   La feuille de styles inline `nomade-camper-align-inline-css` (injectée par
   le thème via wp_add_inline_style) impose `width: calc(100% + (50vw - 50%) * 2)`
   sur .alignwide → fait déborder le contenu du viewport sur tout ce qui
   est plus étroit que la wide-size (1280px). Conséquence : cards collées
   au bord gauche + bande blanche à droite. On rétablit le comportement
   alignwide normal de WP jusqu'au breakpoint wide-size. */
@media (max-width: 1280px) {
    .entry-content .alignwide,
    .page-content .alignwide {
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* === Cards "Tarifs" (basse/haute saison) — coins arrondis sur mobile ===
   Sur desktop, les 2 cards forment un diptyque horizontal avec une couture
   plate au milieu. Sur mobile (empilées verticalement), on conserve cet
   effet "diptyque" mais en vertical : basse (haut) = coins haut arrondis,
   haute (bas) = coins bas arrondis. La couture plate est entre les deux. */
@media (max-width: 781px) {
    #tarif_basse_saison {
        border-radius: 22px 22px 0 0 !important;
    }
    #tarif_haute_saison {
        border-radius: 0 !important;
    }
}

/* === Booking-bar — passage en flux normal jusqu'à 767px ===
   En desktop la barre flotte (position: absolute) entre hero et section
   suivante. Sur tout ce qui est plus étroit que 768px, ce float crée un
   chevauchement avec les sections (au-dessus et en dessous), surtout
   quand la barre s'agrandit verticalement (wrap en 2 lignes ou stack).
   On la passe en position: static avec une marge propre pour qu'elle
   s'intègre dans le flux. Le layout interne des champs est géré par
   les media queries plus spécifiques (< 600 = 1 col, 601-767 = 2×2). */
@media (max-width: 767px) {
    .nomade-booking-bar {
        position: static !important;
        left: auto !important;
        transform: none !important;
        width: calc(100% - 4rem) !important;
        margin: 2rem auto !important;
        padding: 20px 16px !important;
        border-radius: 16px;
    }
}

/* === Booking-bar / search-form — layout 2 lignes (tablet portrait) ===
   Entre 601px et 767px, le wrap naturel produisait un layout cassé
   (3+1 ou 4+1 avec un Chercher minuscule à droite). On force :
     Ligne 1 : Arrivée | Départ (50/50)
     Ligne 2 : Adultes | Enfants (50/50)
     Ligne 3 : Chercher pleine largeur */
@media (min-width: 601px) and (max-width: 767px) {

    /* Dates : 50% chacun (la moitié du conteneur moins la moitié du gap) */
    .nomade-booking-bar .mphb_sc_search-form > .mphb_sc_search-check-in-date,
    .nomade-booking-bar .mphb_sc_search-form > .mphb_sc_search-check-out-date,
    form.mphb_sc_search-form > .mphb_sc_search-check-in-date,
    form.mphb_sc_search-form > .mphb_sc_search-check-out-date {
        flex: 0 0 calc(50% - 7px) !important;
        max-width: calc(50% - 7px);
        min-width: 0;
    }

    /* Adults / Children : 50% chacun (passent sur la ligne 2 grâce au flex-wrap) */
    .nomade-booking-bar .mphb_sc_search-form > .mphb_sc_search-adults,
    .nomade-booking-bar .mphb_sc_search-form > .mphb_sc_search-children,
    form.mphb_sc_search-form > .mphb_sc_search-adults,
    form.mphb_sc_search-form > .mphb_sc_search-children {
        flex: 0 0 calc(50% - 7px) !important;
        max-width: calc(50% - 7px);
        min-width: 0;
    }

    /* Bouton "Chercher" pleine largeur sur ligne 3 */
    .nomade-booking-bar .mphb_sc_search-form > .mphb-search-availability-submit-wrapper,
    .nomade-booking-bar .mphb_sc_search-form > p:has(input[type="submit"]),
    .nomade-booking-bar .mphb_sc_search-form > p:has(button),
    form.mphb_sc_search-form > .mphb-search-availability-submit-wrapper,
    form.mphb_sc_search-form > p:has(input[type="submit"]),
    form.mphb_sc_search-form > p:has(button) {
        flex: 0 0 100% !important;
        max-width: 100%;
    }
    .nomade-booking-bar .mphb_sc_search-form input[type="submit"],
    .nomade-booking-bar .mphb_sc_search-form button[type="submit"],
    form.mphb_sc_search-form input[type="submit"],
    form.mphb_sc_search-form button[type="submit"] {
        width: 100% !important;
    }

    /* Même logique pour la booking-bar custom (.nomade-booking-bar__form) */
    .nomade-booking-bar__form {
        flex-wrap: wrap;
    }
    .nomade-booking-bar__field {
        flex: 0 0 calc(50% - 10px);  /* gap 20px → 10px par côté */
        min-width: 0;
    }
    .nomade-booking-bar__form > button {
        flex: 0 0 100%;
        width: 100%;
    }
}

/* === Pointillés turquoise (5 gros points centrés) === */
.wp-block-separator.is-style-dots {
    height: 14px;
    width: 160px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14' fill='%234FB2A3'%3E%3Ccircle cx='14' cy='7' r='6'/%3E%3Ccircle cx='47' cy='7' r='6'/%3E%3Ccircle cx='80' cy='7' r='6'/%3E%3Ccircle cx='113' cy='7' r='6'/%3E%3Ccircle cx='146' cy='7' r='6'/%3E%3C/svg%3E");
}

/* === Vague turquoise (sinusoïde douce, élargie) === */
.wp-block-separator.is-style-wave {
    height: 24px;
    width: 280px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 24' fill='none' stroke='%234FB2A3' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M4 12 C 24 2, 44 22, 64 12 S 104 2, 124 12 S 164 22, 184 12 S 224 2, 244 12 S 272 22, 276 12'/%3E%3C/svg%3E");
}

/* Breadcrumbs SEOPress dans le page-header */
.nc-page-header #seopress-bc,
.nc-page-header .seopress-breadcrumbs,
.nc-page-header .breadcrumb {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--primary-dark);
    opacity: 0.65;
    text-align: center;
    margin-top: 18px;
    line-height: 1.6;
}
.nc-page-header #seopress-bc a,
.nc-page-header .seopress-breadcrumbs a,
.nc-page-header .breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: opacity .15s, color .15s;
}
.nc-page-header #seopress-bc a:hover,
.nc-page-header .seopress-breadcrumbs a:hover,
.nc-page-header .breadcrumb a:hover {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Séparateur — SEOPress encadre le séparateur dans un <span> entre items */
.nc-page-header #seopress-bc > span + span:not(:has(a)):not(.current),
.nc-page-header .seopress-breadcrumbs > span + span:not(:has(a)):not(.current) {
    margin: 0 6px;
    opacity: 0.5;
}

/* ============================================
   HERO VISUAL — disque flottant + badges
   ============================================ */

.hero-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 520px;
    margin-left: auto;
}
.hero-visual .disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--wp--preset--color--primary-light);
    border: 3px solid #000;
    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.2);
}
.hero-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    top: -55px;
}
.hero-visual .sparkle {
    position: absolute;
    font-family: var(--wp--preset--font-family--script);
    font-size: 44px;
    font-weight: 700;
    color: var(--wp--preset--color--accent);
    transform: rotate(-8deg);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
    pointer-events: none;
    line-height: 1;
}
.hero-visual .sparkle.one { top: -4%;  right: -2%; }
.hero-visual .sparkle.two { bottom: 6%; left: -6%; transform: rotate(6deg); }

.hero-badge {
    position: absolute;
    background: #fff;
    color: #000;
    padding: 10px 16px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 6px 6px 0 #000;
    border: 2px solid #000;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.hero-badge .ico {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--wp--preset--color--primary);
    color: #fff;
    flex-shrink: 0;
}
.hero-badge.b1 { top: 8%;    left: -24px;  transform: rotate(-4deg); }
.hero-badge.b2 { bottom: 14%; right: -28px; transform: rotate(3deg);
                 background: var(--wp--preset--color--accent); }
.hero-badge.b2 .ico { background: #000; }

@keyframes nc-floaty {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
.floaty       { animation: nc-floaty 4s ease-in-out infinite; }
.floaty.delay { animation-delay: 1.2s; }

@media (max-width: 781px) {
    .hero-visual { max-width: 340px; margin-left: auto; margin-right: auto; }
    .hero-visual .sparkle { font-size: 30px; }
    .hero-badge { font-size: 11px; padding: 7px 12px; }
    .hero-badge.b1 { left: 0; }
    .hero-badge.b2 { right: 0; }
}

/* ============================================
   GLASSMORPHISME — is-style-glassmorphism
   Appliqué sur un bloc Groupe via l'éditeur
   ============================================ */
.wp-block-group.is-style-glassmorphism {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background .2s ease, border-color .2s ease;
}
.wp-block-group.is-style-glassmorphism:hover {
    background: rgba(255, 255, 255, 0.13) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}

/* ============================================
   WHY SECTION — numéro + icône
   ============================================ */
.nc-why-num {
    font-family: var(--wp--preset--font-family--mono);
    font-size: 13px;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 20px;
}

.nc-why-ico {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--wp--preset--color--accent);
    border: 2px solid #000;
    box-shadow: 4px 4px 0 #000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #000;
    flex-shrink: 0;
}

/* ============================================
   TILT — is-style-tilt
   Appliqué sur un Paragraphe ou Heading via l'éditeur
   Note : WP ne met pas .wp-block-paragraph sur le <p> en front,
   on cible donc le tag directement + la classe éditeur.
   ============================================ */
p.is-style-tilt,
.wp-block-paragraph.is-style-tilt,
h1.is-style-tilt, h2.is-style-tilt, h3.is-style-tilt,
h4.is-style-tilt, h5.is-style-tilt, h6.is-style-tilt,
.wp-block-heading.is-style-tilt {
    transform: rotate(-2deg);
    transform-origin: center center;
    display: block;
}

/* ============================================
   BLOG — templates single.html (article) + home.html (archive)
   Réutilise les tokens existants (cream, primary, zigzag, page-header).
   ============================================ */

/* === HERO BLOG (variante du page-header pour les articles) === */
.nc-blog-hero .wp-block-post-title,
.nc-blog-hero h1 {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.1;
    margin-top: 12px;
    margin-bottom: 16px;
}

/* Meta sous le titre : date · auteur, séparés par un point.
   Force display flex + center : selon le contexte (rendu du group depuis
   un wp_template stocké en BDD), WP n'ajoute pas toujours les classes
   is-layout-flex / is-content-justification-center attendues. */
.nc-blog-meta {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: baseline;
    margin: 4px 0 18px !important;
    opacity: 0.85;
    text-align: center;
}
.nc-blog-meta > * {
    margin: 0 !important;
}
.nc-blog-meta__sep {
    color: var(--wp--preset--color--primary);
    font-weight: 700;
}

/* === IMAGE A LA UNE === */
.nc-blog-featured .wp-block-post-featured-image {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(30, 74, 82, 0.10);
}
.nc-blog-featured .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 480px;
}

/* === CONTENU ARTICLE — typographie généreuse === */
.nc-blog-content .wp-block-post-content {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.85);
}
.nc-blog-content .wp-block-post-content > h2 {
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(22px, 2.8vw, 30px);
    margin: 2em 0 .6em;
    line-height: 1.2;
    color: var(--wp--preset--color--black);
}
.nc-blog-content .wp-block-post-content > h3 {
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(18px, 2.2vw, 24px);
    margin: 1.6em 0 .5em;
    line-height: 1.25;
    color: var(--wp--preset--color--primary-dark);
}
.nc-blog-content .wp-block-post-content > p {
    margin: 0 0 1.1em;
}
/* Citation décorative */
.nc-blog-content .wp-block-post-content > blockquote,
.nc-blog-content .wp-block-post-content > .wp-block-quote {
    border-left: 4px solid var(--wp--preset--color--primary);
    padding: 8px 0 8px 24px;
    margin: 1.6em 0;
    font-style: italic;
    font-size: 19px;
    color: var(--wp--preset--color--primary-dark);
}
.nc-blog-content .wp-block-post-content > .wp-block-quote cite {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.55);
    font-style: normal;
    letter-spacing: 0.04em;
}
/* Images dans le contenu : coins arrondis cohérents */
.nc-blog-content .wp-block-image img,
.nc-blog-content .wp-block-post-content > .wp-block-image img {
    border-radius: 14px;
}
/* Listes : aération */
.nc-blog-content .wp-block-post-content > ul,
.nc-blog-content .wp-block-post-content > ol {
    margin: 0 0 1.2em;
    padding-left: 1.4em;
}
.nc-blog-content .wp-block-post-content > ul li,
.nc-blog-content .wp-block-post-content > ol li {
    margin-bottom: 6px;
}

/* === TAGS en bas d'article === */
.nc-blog-tags {
    gap: 10px !important;
    align-items: center;
    border-top: 1px dashed var(--wp--preset--color--cream);
    padding-top: 18px;
    flex-wrap: wrap;
}
.nc-blog-tags > * {
    margin: 0 !important;
}
.nc-blog-tags .wp-block-post-terms a {
    display: inline-block;
    padding: 4px 12px;
    background: var(--wp--preset--color--cream);
    color: var(--wp--preset--color--primary-dark);
    border-radius: 999px;
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
    transition: background .15s, color .15s;
    margin: 2px;
}
.nc-blog-tags .wp-block-post-terms a:hover {
    background: var(--wp--preset--color--primary);
    color: #fff;
}

/* === NAVIGATION posts (précédent / suivant) === */
.nc-blog-nav {
    gap: 16px;
}
/* Masque les wrappers prev/next quand il n'y a pas d'article correspondant
   (1er article = pas de précédent / dernier = pas de suivant). MotoPress rend
   alors le bloc avec un div vide → on cache sinon on a une carte vide stylée. */
.nc-blog-nav .wp-block-post-navigation-link:empty {
    display: none !important;
}
.nc-blog-nav .wp-block-post-navigation-link {
    flex: 1 1 280px;
    max-width: 100%;
    background: var(--wp--preset--color--white);
    border: 2px solid #000;
    border-radius: 14px;
    box-shadow: var(--wp--preset--shadow--button);
    padding: 16px 22px;
    font-weight: 600;
    text-decoration: none;
    color: var(--wp--preset--color--black);
    transition: transform .15s, box-shadow .15s;
}
.nc-blog-nav .wp-block-post-navigation-link:hover {
    transform: translateY(2px);
    box-shadow: 0 3px 0 var(--wp--preset--color--primary-dark);
    color: var(--wp--preset--color--primary);
}
.nc-blog-nav__next {
    text-align: right;
}

/* === GRILLE D'ARTICLES (template home.html) === */
.nc-blog-grid-wrapper .wp-block-post-template {
    gap: 28px !important;
}
@media (max-width: 900px) {
    .nc-blog-grid-wrapper .wp-block-post-template.is-layout-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 600px) {
    .nc-blog-grid-wrapper .wp-block-post-template.is-layout-grid {
        grid-template-columns: 1fr !important;
    }
}

/* === CARD ARTICLE === */
.nc-post-card {
    background: var(--wp--preset--color--white);
    border: 2px solid #000;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--wp--preset--shadow--button);
    display: flex !important;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
    height: 100%;
}
.nc-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 9px 0 var(--wp--preset--color--primary-dark);
}
/* Force la card à n'avoir aucun padding/max-width au niveau du group lui-même —
   le padding visuel vient uniquement de .nc-post-card__body. */
.nc-post-card.wp-block-group {
    padding: 0 !important;
}
/* Tous les enfants directs : annule le max-width du layout constrained
   (content-size) qui empêche l'image de prendre toute la largeur. */
.nc-post-card.wp-block-group > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.nc-post-card__image,
.nc-post-card .wp-block-post-featured-image {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--wp--preset--color--cream);
    width: 100% !important;
    max-width: none !important;
    display: block !important;
}
/* Le lien <a> qui wrappe l'image quand isLink=true → en block plein */
.nc-post-card__image a,
.nc-post-card .wp-block-post-featured-image a {
    display: block !important;
    width: 100% !important;
    line-height: 0;
    text-decoration: none;
}
.nc-post-card__image img,
.nc-post-card .wp-block-post-featured-image img,
.nc-post-card .wp-block-post-featured-image__placeholder {
    width: 100% !important;
    height: 220px !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transition: transform .3s ease;
}
.nc-post-card:hover .nc-post-card__image img,
.nc-post-card:hover .wp-block-post-featured-image img {
    transform: scale(1.04);
}
.nc-post-card__body {
    flex: 1;
    display: flex !important;
    flex-direction: column;
}
/* Catégorie (eyebrow) */
.nc-post-card__category {
    margin: 0 !important;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.nc-post-card__category a {
    color: var(--wp--preset--color--primary-dark);
    text-decoration: none;
    font-weight: 600;
}
.nc-post-card__category a:hover {
    color: var(--wp--preset--color--primary);
}
/* Titre */
.nc-post-card__title {
    font-family: var(--wp--preset--font-family--display);
    font-size: 22px;
    line-height: 1.15;
    margin: 8px 0 10px !important;
    color: var(--wp--preset--color--black);
}
.nc-post-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color .15s;
}
.nc-post-card__title a:hover {
    color: var(--wp--preset--color--primary);
}
/* Extrait */
.nc-post-card__excerpt {
    margin: 0 0 12px !important;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.72);
    flex: 1;
}
.nc-post-card__excerpt .wp-block-post-excerpt__more-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--wp--preset--color--primary-dark);
    font-weight: 600;
    text-decoration: none;
}
.nc-post-card__excerpt .wp-block-post-excerpt__more-link:hover {
    color: var(--wp--preset--color--primary);
}
/* Date */
.nc-post-card__date {
    margin: 0 !important;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* === PAGINATION === */
.nc-blog-pagination {
    gap: 8px !important;
}
.nc-blog-pagination a,
.nc-blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--wp--preset--color--white);
    border: 2px solid var(--wp--preset--color--cream);
    color: var(--wp--preset--color--primary-dark);
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
}
.nc-blog-pagination a:hover,
.nc-blog-pagination .page-numbers.current {
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: #fff;
}

/* ============================================
   LOGOS PARTENAIRES (home, section ancre #Partenaires)
   Desktop : une ligne, flex shrink natif → on ne touche à rien.
   Mobile : le wrap (activé dans l'éditeur) redonne aux images leur
   taille naturelle (300px) → énormes. Gutenberg n'a pas de réglage
   par breakpoint, donc cap CSS : hauteur max uniforme, proportions
   conservées, rangées centrées.
   ============================================ */
@media (max-width: 781px) {
    #Partenaires .wp-block-group.is-layout-flex {
        justify-content: center;
        gap: 14px 18px;
    }
    #Partenaires .wp-block-image {
        margin: 0;
    }
    #Partenaires .wp-block-image img {
        width: auto;
        height: auto;
        max-height: 64px;
    }
}

/* ============================================
   PATTERN — Comment ça marche
   (4 étapes numérotées + grille features + CTA bar)
   Style maison : bordure noire 2px + ombre dure offset
   (cohérent avec .nc-post-card)
   ============================================ */
.nc-how {
    /* Pas de fond — laisse apparaître le fond papier du thème
       OU le fond éventuellement défini sur le bloc parent. */
}

/* ── Header eyebrow déjà géré par is-style-eyebrow ── */

/* ── Étapes numérotées ── */
.nc-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
/* .nc-step = la CARTE visuelle (layout flow).
   Le layout horizontal (num + body) est géré par une Row imbriquée
   à l'intérieur, configurable via l'éditeur — pas besoin de CSS pour ça. */
.nc-step {
    background: var(--wp--preset--color--white, #fff);
    border: 2px solid #000;
    border-radius: 18px;
    padding: 20px 22px !important;
    box-shadow: var(--wp--preset--shadow--button, 0 6px 0 #143c46);
    transition: transform .2s, box-shadow .2s;
}
.nc-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 0 var(--wp--preset--color--primary-dark, #143c46);
}
.nc-step__num {
    flex: 0 0 auto !important;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--wp--preset--color--accent, #1aaf6e);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    margin: 0 !important;
}
/* .nc-step__body : retiré — un Group constrained natif suffit
   (flex: 1 1 auto est le défaut sur les flex items, ça fonctionne sans classe) */
.nc-step__title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--wp--preset--color--primary-dark, #143c46);
    margin: 0 0 4px !important;
}
.nc-step__desc {
    margin: 0 !important;
    color: #555;
    font-size: 14.5px;
    line-height: 1.5;
}

/* ── Grille de features (2 colonnes responsive) ── */
.nc-features {
    grid-template-columns: 1fr 1fr;
    gap: 14px !important;
}
@media (max-width: 640px) {
    .nc-features {
        grid-template-columns: 1fr !important;
    }
}
.nc-feature {
    position: relative;
    background: var(--wp--preset--color--white, #fff);
    border: 2px solid #000;
    border-radius: 18px;
    padding: 22px 22px 20px !important;
    box-shadow: var(--wp--preset--shadow--button, 0 6px 0 #143c46);
    transition: transform .2s, box-shadow .2s;
}
.nc-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 0 var(--wp--preset--color--primary-dark, #143c46);
}
.nc-feature--featured {
    /* Pas de fond — le badge ✓ Inclus suffit à différencier l'item.
       Toutes les cards ont le même fond blanc + bordure noire. */
}
.nc-feature__icon {
    display: inline-flex;
    color: var(--wp--preset--color--primary, #207a82);
    margin-bottom: 8px;
}
.nc-feature__icon svg {
    display: block;
}
.nc-feature__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--wp--preset--color--accent, #1aaf6e);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px 3px 8px;
    border-radius: 999px;
    margin-bottom: 10px;
    line-height: 1.3;
    letter-spacing: .01em;
}
.nc-feature__title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--wp--preset--color--primary-dark, #143c46);
    margin: 0 0 6px !important;
}
.nc-feature__desc {
    margin: 0 !important;
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

/* ── CTA bar du bas (style maison brutalist) ── */
.nc-how-cta {
    gap: 16px !important;
    margin-top: 0 !important;
    border: 2px solid #000 !important;
    border-radius: 18px !important;
    box-shadow: var(--wp--preset--shadow--button, 0 6px 0 #143c46);
}
.nc-how-cta__text {
    flex: 1 1 auto;
    min-width: 0;
}
.nc-how-cta__sub {
    opacity: .92;
}
@media (max-width: 600px) {
    .nc-how-cta {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .nc-how-cta .wp-block-buttons {
        width: 100%;
    }
}