/* ===========================================================
   Le Baptistère — charte du site
   Toutes les couleurs sont des jetons : elles se lisent ici,
   elles ne se recopient jamais en dur dans une page.
   =========================================================== */

/* --- Polices auto-hébergées, variables : un seul fichier par famille.
       Aucun appel à un service tiers à l'exécution. --- */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('polices/jost.woff2') format('woff2'); }

:root {
  --bapt-creme:        #FBF8F3;
  --bapt-creme-sourde: #F3EFE7;
  --bapt-encre:        #22231E;
  --bapt-texte:        #44423B;
  --bapt-vert:         #2F4A3A;
  --bapt-vert-fonce:   #22382B;
  --bapt-filet:        #DED7C9;
  --bapt-titre:        'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --bapt-sans:         'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

body { font-family: var(--bapt-sans); color: var(--bapt-texte); background-color: var(--bapt-creme); }

h1, h2, h3, h4, h5,
.entry-title, .page-title,
.wp-block-heading {
  font-family: var(--bapt-titre);
  font-weight: 300;
  color: var(--bapt-encre);
  letter-spacing: 0.04em;
}

/* Les intertitres de section : capitales espacées, filet fin dessous. */
.wp-block-group h2.wp-block-heading[style*="uppercase"] {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  letter-spacing: 0.2em;
  margin-bottom: 2.4rem;
}
.wp-block-group h2.wp-block-heading[style*="uppercase"]::after {
  content: ""; display: block; width: 56px; height: 1px;
  background: var(--bapt-filet); margin: 1.2rem auto 0;
}

/* La bannière de titre de page n'a rien à faire sur l'accueil :
   elle doublait le <h1> de la couverture. */
.home .hero-section { display: none; }

/* Couverture : l'image respire, le texte reste lisible. */
.wp-block-cover { border-radius: 0; }
.wp-block-cover h1.wp-block-heading { font-weight: 200; letter-spacing: 0.26em !important; }

/* Boutons : vert forêt, capitales fines, angle net. */
.wp-block-button__link, .wp-element-button, button, input[type="submit"] {
  font-family: var(--bapt-sans);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  border-radius: 2px;
  padding: 0.95em 2.2em;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--bapt-vert); color: var(--bapt-creme);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background-color: var(--bapt-vert-fonce); }
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 1px solid var(--bapt-vert); color: var(--bapt-vert); background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--bapt-vert); color: var(--bapt-creme); }

/* Cartes de chambre : le titre en serif, le détail discret. */
.wp-block-column h3.wp-block-heading { font-size: 1.12rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; }
.wp-block-column h3.wp-block-heading a { color: var(--bapt-encre); text-decoration: none; }
.wp-block-column h3.wp-block-heading a:hover { color: var(--bapt-vert); }
.wp-block-column .has-small-font-size { color: var(--bapt-texte); line-height: 1.8; }

/* Images : un léger arrondi, jamais de filet collé au bord. */
.wp-block-image img, .wp-block-gallery img { border-radius: 3px; }
.wp-block-video video { width: 100%; border-radius: 3px; display: block; }

/* Citations de presse. */
.wp-block-quote { border-left: 2px solid var(--bapt-filet); padding-left: 1.6rem; font-weight: 300; font-size: 1.12rem; font-style: normal; line-height: 1.8; }

/* --- Tablette : 769 à 1024 px --- */
@media (max-width: 1024px) {
  .wp-block-columns { gap: 2rem; }
}

/* --- Mobile : 768 px et moins ---
   Règle dure : aucun défilement horizontal, jamais. */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .wp-block-cover { min-height: 70vh !important; }
  .wp-block-cover h1.wp-block-heading { font-size: 2.3rem !important; }
  .wp-block-group h2.wp-block-heading[style*="uppercase"] { letter-spacing: 0.14em; }
  .wp-block-columns { gap: 2.6rem; }
  .wp-block-gallery.columns-3 { --wp--style--unstable-gallery-gap: 10px; }
  .wp-block-button__link, .wp-element-button { padding: 0.95em 1.6em; }
  /* La vidéo ne se précharge jamais sur un réseau mobile : seule l'affiche descend. */
  .wp-block-video video { max-height: 56vh; }
}

/* ===========================================================
   Fiche de chambre (type de logement MotoPress)
   =========================================================== */

/* La galerie : une vraie grille, pas une colonne. */
.single-mphb_room_type .mphb-room-type-gallery-wrapper .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 2.5rem;
}
.single-mphb_room_type .mphb-room-type-gallery-wrapper .gallery-item {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}
.single-mphb_room_type .mphb-room-type-gallery-wrapper .gallery-icon { margin: 0; }
.single-mphb_room_type .mphb-room-type-gallery-wrapper img {
  width: 100%; height: 100%; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: 3px; display: block;
}
.single-mphb_room_type .mphb-room-type-gallery-wrapper .gallery-caption { display: none; }

/* Une chambre n'est pas un article : pas de date de publication. */
.single-mphb_room_type .entry-meta,
.single-mphb_room_type .post-meta,
.single-mphb_room_type .ct-meta-element { display: none; }

/* Les attributs de la chambre, en deux colonnes lisibles. */
.single-mphb_room_type .mphb-single-room-type-attributes { margin: 2rem 0; }
.single-mphb_room_type .mphb-single-room-type-attributes > p { margin: 0 0 0.5rem; }
.single-mphb_room_type .mphb-attribute-title { font-weight: 500; letter-spacing: 0.04em; }
.single-mphb_room_type .mphb-details-title,
.single-mphb_room_type .mphb-calendar-title,
.single-mphb_room_type .mphb-booking-form-title {
  font-size: 1.1rem; font-weight: 400; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 2.6rem 0 1rem;
}
.single-mphb_room_type .mphb-regular-price .mphb-price { font-size: 1.6rem; font-weight: 300; }

@media (max-width: 768px) {
  .single-mphb_room_type .mphb-room-type-gallery-wrapper .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ===========================================================
   En-tête
   =========================================================== */

/* Huit entrées de menu et une loupe ne tiennent pas ensemble : Blocksy
   replie les dernières dans un « More » en anglais. Le site a huit pages,
   la recherche n'y sert à rien — on la retire, le menu tient en entier. */
.ct-header [data-id="search"] { display: none; }

/* Le nom du site, en capitales espacées comme les intertitres. */
.ct-header .site-title,
.ct-header .site-title a {
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 1.05rem;
}

/* Les entrées de menu : plus fines, plus espacées. */
.ct-header .menu > li > a {
  font-weight: 400;
  letter-spacing: 0.1em;
  font-size: 0.74rem;
}

/* ===========================================================
   Pied de page — Instagram
   =========================================================== */
.ct-footer-copyright { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.bapt-instagram {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--bapt-vert); text-decoration: none;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.7rem;
}
.bapt-instagram:hover { color: var(--bapt-encre); }
.bapt-instagram svg { display: block; }
.bapt-pied-texte { font-size: 0.78rem; color: var(--bapt-texte); }
@media (max-width: 768px) { .bapt-pied-texte { line-height: 1.8; } }

/* ===========================================================
   Calendriers du greffon de réservation (jQuery datepick)
   Il arrive avec son propre habillage — barres noires, bandeau
   rouge sombre — qui n'a rien à voir avec la maison.
   =========================================================== */

.datepick-popup { z-index: 9999; }

.datepick,
.datepick-popup .datepick {
  background: var(--bapt-creme);
  border: 1px solid var(--bapt-filet);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(34, 35, 30, 0.10);
  font-family: var(--bapt-sans);
  color: var(--bapt-texte);
  padding: 0;
}

/* Barre de navigation : précédent / aujourd'hui / suivant */
.datepick .datepick-nav,
.datepick .datepick-ctrl {
  background: var(--bapt-creme-sourde);
  border: 0;
  border-bottom: 1px solid var(--bapt-filet);
  padding: 0.55rem 0.7rem;
}
.datepick .datepick-ctrl {
  border-bottom: 0;
  border-top: 1px solid var(--bapt-filet);
}
.datepick .datepick-cmd {
  color: var(--bapt-vert);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  border: 0;
}
.datepick .datepick-cmd:hover { color: var(--bapt-encre); }
.datepick .datepick-cmd.datepick-disabled { color: var(--bapt-filet); cursor: default; }

/* En-tête de mois : les deux listes déroulantes */
.datepick .datepick-month-header {
  background: transparent;
  color: var(--bapt-encre);
  padding: 0.7rem 0 0.4rem;
  font-weight: 400;
}
.datepick .datepick-month-header select {
  background: transparent;
  border: 0;
  color: var(--bapt-encre);
  font-family: var(--bapt-sans);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  padding: 0 0.2rem;
}

/* Jours de la semaine */
.datepick .datepick-month th,
.datepick .datepick-month thead th {
  background: transparent;
  border: 0;
  color: var(--bapt-texte);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 0.3rem;
}

/* Cases des jours */
.datepick .datepick-month td { border: 0; padding: 1px; }
.datepick .datepick-month td a,
.datepick .datepick-month td span {
  border: 0;
  border-radius: 3px;
  padding: 0.42rem 0;
  font-size: 0.84rem;
  color: var(--bapt-texte);
  background: transparent;
  text-decoration: none;
}
.datepick .datepick-month td a:hover {
  background: var(--bapt-creme-sourde);
  color: var(--bapt-encre);
}
.datepick .datepick-month td a.datepick-today,
.datepick .datepick-month td .datepick-today { font-weight: 500; color: var(--bapt-encre); }
.datepick .datepick-month td.datepick-selected a,
.datepick .datepick-month td a.datepick-selected,
.datepick .datepick-month td.mphb-selected-date a {
  background: var(--bapt-vert);
  color: var(--bapt-creme);
}

/* Dates passées ou interdites : visibles mais clairement éteintes */
.datepick .mphb-past-date span,
.datepick .mphb-unselectable-date span,
.datepick .datepick-unselectable span,
.datepick .datepick-other-month span { color: var(--bapt-filet); background: transparent; }

/* Le week-end ne mérite pas une couleur d'alerte */
.datepick .datepick-weekend a,
.datepick .datepick-weekend span { background: transparent; }

/* ---- Calendrier de disponibilité des fiches de chambre ---- */
/* Les couleurs y portent un sens : on les garde, en les adoucissant. */
.mphb-calendar .mphb-available-date a,
.mphb-calendar td.mphb-available-date a { background: rgba(47, 74, 58, 0.10); color: var(--bapt-encre); }
.mphb-calendar .mphb-available-date a:hover { background: rgba(47, 74, 58, 0.22); }
.mphb-calendar .mphb-booked-date span,
.mphb-calendar .mphb-booked-date a { background: var(--bapt-creme-sourde); color: var(--bapt-filet); text-decoration: line-through; }
.mphb-calendar .mphb-pending-date span,
.mphb-calendar .mphb-pending-date a { background: rgba(169, 139, 93, 0.18); color: var(--bapt-texte); }

@media (max-width: 768px) {
  .datepick, .datepick-popup .datepick { width: auto !important; max-width: calc(100vw - 2rem); }
  .datepick .datepick-month-row { display: block; }
  .datepick .datepick-month { width: 100% !important; }
}

/* Les deux mois doivent se ressembler : même fond, même alignement. */
.datepick .datepick-month,
.datepick .datepick-month.first,
.datepick .datepick-month table { background: transparent; border: 0; }
.datepick .datepick-month { padding: 0 0.55rem 0.5rem; vertical-align: top; }
.datepick .datepick-month-row { display: flex; align-items: flex-start; gap: 0.4rem; }
.datepick .datepick-month + .datepick-month { border-left: 1px solid var(--bapt-filet); }
.datepick .datepick-month-header { text-align: center; font-size: 0.92rem; }

/* ===========================================================
   Bandeau de recherche de disponibilité
   Sur le Wix, les quatre champs et le bouton tenaient sur UNE
   ligne. On refait ça, en gardant les libellés pour les lecteurs
   d'écran et en repliant en colonne sur mobile.
   =========================================================== */

.mphb_sc_search-wrapper {
  background: var(--bapt-creme-sourde);
  border: 1px solid var(--bapt-filet);
  border-radius: 4px;
  padding: 1.1rem 1.2rem;
  margin: 1.6rem 0 2.4rem;
}

.mphb_sc_search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem;
}

/* Le rappel « champs obligatoires » sort du bandeau : c'est une note, pas un champ. */
.mphb_sc_search-form .mphb-required-fields-tip {
  flex: 0 0 100%;
  order: -1;
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  color: var(--bapt-texte);
}

.mphb_sc_search-form > p { margin: 0; flex: 1 1 170px; min-width: 150px; }
.mphb_sc_search-form > p.mphb_sc_search-submit-button-wrapper { flex: 0 0 auto; }

.mphb_sc_search-form label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bapt-texte);
  margin-bottom: 0.35rem;
}
.mphb_sc_search-form br { display: none; }

.mphb_sc_search-form input[type="text"],
.mphb_sc_search-form select {
  width: 100%;
  height: 46px;
  background: #fff;
  border: 1px solid var(--bapt-filet);
  border-radius: 3px;
  padding: 0 0.8rem;
  font-family: var(--bapt-sans);
  font-size: 0.88rem;
  color: var(--bapt-encre);
}
.mphb_sc_search-form input[type="text"]:focus,
.mphb_sc_search-form select:focus {
  outline: none;
  border-color: var(--bapt-vert);
  box-shadow: 0 0 0 2px rgba(47, 74, 58, 0.12);
}

.mphb_sc_search-form .button,
.mphb_sc_search-form input[type="submit"] {
  height: 46px;
  padding: 0 2rem;
  background: var(--bapt-vert);
  color: var(--bapt-creme);
  border: 0;
  border-radius: 3px;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.mphb_sc_search-form .button:hover,
.mphb_sc_search-form input[type="submit"]:hover { background: var(--bapt-vert-fonce); }

/* Tablette : deux colonnes plutôt qu'une ligne trop serrée. */
@media (max-width: 1024px) {
  .mphb_sc_search-form { flex-wrap: wrap; }
  .mphb_sc_search-form > p { flex: 1 1 calc(50% - 0.45rem); }
  .mphb_sc_search-form > p.mphb_sc_search-submit-button-wrapper { flex: 1 1 100%; }
  .mphb_sc_search-form .button { width: 100%; }
}

/* Mobile : une colonne, des cibles tactiles confortables. */
@media (max-width: 768px) {
  .mphb_sc_search-wrapper { padding: 1rem; }
  .mphb_sc_search-form > p { flex: 1 1 100%; }
  .mphb_sc_search-form input[type="text"],
  .mphb_sc_search-form select,
  .mphb_sc_search-form .button { height: 50px; }
}

/* ===========================================================
   Carte de situation (OpenStreetMap, sans traceur)
   =========================================================== */
.bapt-carte { margin: 1.6rem 0 1.2rem; }
.bapt-carte iframe {
  width: 100%; height: 380px; display: block;
  border: 1px solid var(--bapt-filet); border-radius: 4px;
}
.bapt-carte figcaption {
  margin-top: 0.5rem; font-size: 0.72rem; color: var(--bapt-texte);
}
.bapt-carte figcaption a { color: var(--bapt-vert); }
@media (max-width: 768px) { .bapt-carte iframe { height: 300px; } }

/* ===========================================================
   Tableau de réservation — page Réserver seulement.
   Volontairement différent de la page « Nos chambres », qui
   elle présente les chambres au long.
   =========================================================== */
.bapt-chambres-tableau { list-style: none; margin: 2rem 0 1.6rem; padding: 0; border-top: 1px solid var(--bapt-filet); }
.bapt-ligne-chambre {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0.95rem 0.2rem; border-bottom: 1px solid var(--bapt-filet); margin: 0;
}
.bapt-ligne-vignette { flex: 0 0 72px; line-height: 0; }
.bapt-ligne-vignette img { width: 72px; height: 54px; object-fit: cover; border-radius: 3px; }
.bapt-ligne-nom { flex: 1 1 auto; min-width: 0; }
.bapt-ligne-nom a { color: var(--bapt-encre); text-decoration: none; font-size: 1.02rem; letter-spacing: 0.04em; }
.bapt-ligne-nom a:hover { color: var(--bapt-vert); }
.bapt-ligne-detail { display: block; font-size: 0.74rem; color: var(--bapt-texte); margin-top: 0.15rem; }
.bapt-ligne-prix { flex: 0 0 auto; text-align: right; }
.bapt-ligne-prix strong { font-size: 1.15rem; font-weight: 400; color: var(--bapt-encre); }
.bapt-ligne-prix .bapt-ligne-detail { text-align: right; }
.bapt-ligne-bouton {
  flex: 0 0 auto; background: var(--bapt-vert); color: var(--bapt-creme);
  padding: 0.75em 1.6em; border-radius: 3px; text-decoration: none;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.bapt-ligne-bouton:hover { background: var(--bapt-vert-fonce); color: var(--bapt-creme); }

@media (max-width: 768px) {
  .bapt-ligne-chambre { flex-wrap: wrap; gap: 0.7rem 1rem; padding: 1.1rem 0; }
  .bapt-ligne-nom { flex: 1 1 calc(100% - 90px); }
  .bapt-ligne-prix { flex: 1 1 auto; text-align: left; }
  .bapt-ligne-prix .bapt-ligne-detail { text-align: left; }
  .bapt-ligne-bouton { flex: 1 1 100%; text-align: center; }
}

/* ===========================================================
   Le bouton RÉSERVER du menu : c'est l'action qui compte.
   =========================================================== */
.ct-header .menu > li.bapt-cta > a {
  background: var(--bapt-encre);
  color: #FFFFFF;
  padding: 0.72em 1.5em;
  border-radius: 3px;
  letter-spacing: 0.16em;
}
.ct-header .menu > li.bapt-cta > a:hover,
.ct-header .menu > li.bapt-cta > a:focus { background: var(--bapt-vert); color: #FFFFFF; }
/* Blocksy souligne l'entrée courante : pas sur un bouton. */
.ct-header .menu > li.bapt-cta > a::before,
.ct-header .menu > li.bapt-cta > a::after { display: none !important; }
.ct-header .menu > li.bapt-cta { margin-left: 0.6rem; }

/* Dans le menu déroulant du mobile, le bouton garde son poids. */
@media (max-width: 999px) {
  .ct-panel .menu > li.bapt-cta > a {
    background: var(--bapt-encre); color: #FFFFFF;
    border-radius: 3px; padding: 0.8em 1.4em; display: inline-block; margin-top: 0.6rem;
  }
}

/* Le bouton doit être une pastille, pas un pavé pleine hauteur. */
.ct-header .menu > li.bapt-cta { display: flex; align-items: center; }
.ct-header .menu > li.bapt-cta > a {
  height: auto;
  line-height: 1;
  align-self: center;
}

/* ===========================================================
   La rubrique où l'on se trouve : un filet fin, pas un surlignage.
   =========================================================== */
.ct-header .menu > li > a { position: relative; }

.ct-header .menu > li:not(.bapt-cta) > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--bapt-vert);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s ease, opacity 0.28s ease;
  opacity: 0;
}

/* Au survol : le filet s'esquisse. */
.ct-header .menu > li:not(.bapt-cta) > a:hover::after,
.ct-header .menu > li:not(.bapt-cta) > a:focus-visible::after {
  transform: scaleX(1);
  opacity: 0.4;
}

/* Sur la rubrique courante : il reste, plein. */
.ct-header .menu > li.current-menu-item:not(.bapt-cta) > a::after,
.ct-header .menu > li.current_page_item:not(.bapt-cta) > a::after,
.ct-header .menu > li.current-menu-ancestor:not(.bapt-cta) > a::after,
.ct-header .menu > li.current-menu-parent:not(.bapt-cta) > a::after {
  transform: scaleX(1);
  opacity: 1;
}
.ct-header .menu > li.current-menu-item:not(.bapt-cta) > a,
.ct-header .menu > li.current_page_item:not(.bapt-cta) > a,
.ct-header .menu > li.current-menu-ancestor:not(.bapt-cta) > a { color: var(--bapt-encre); }

/* Au clavier, la cible reste visible même sans survol. */
.ct-header .menu > li > a:focus-visible { outline: 1px solid var(--bapt-vert); outline-offset: 4px; }

/* Dans le menu mobile, un filet à gauche plutôt qu'en dessous. */
@media (max-width: 999px) {
  .ct-panel .menu > li.current-menu-item > a,
  .ct-panel .menu > li.current_page_item > a {
    border-left: 2px solid var(--bapt-vert);
    padding-left: 0.8rem;
  }
}

/* ===========================================================
   Titre de page : il doit ouvrir la page, pas s'excuser.
   =========================================================== */
.hero-section { background: var(--bapt-creme-sourde); border-bottom: 1px solid var(--bapt-filet); }
.hero-section .entry-header { padding: 3.4rem 0 3rem; text-align: center; }

.hero-section .page-title,
.hero-section .entry-title {
  font-weight: 200;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bapt-encre);
  margin: 0;
  line-height: 1.2;
}
.hero-section .page-title::after,
.hero-section .entry-title::after {
  content: ""; display: block; width: 56px; height: 1px;
  background: var(--bapt-vert); opacity: 0.45;
  margin: 1.3rem auto 0;
}

/* Le fil d'Ariane, s'il s'affiche, reste discret sous le titre. */
.hero-section .entry-header .ct-breadcrumbs {
  margin-top: 1rem; font-size: 0.72rem; letter-spacing: 0.08em;
}

/* Titre d'une fiche de chambre : même traitement, en un peu plus petit. */
.single-mphb_room_type .hero-section .entry-title { font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); }

@media (max-width: 768px) {
  .hero-section .entry-header { padding: 2.4rem 1rem 2.1rem; }
  .hero-section .page-title, .hero-section .entry-title { letter-spacing: 0.14em; }
}

/* Chaque lien de menu tient à la hauteur de son texte : sans quoi le filet
   de la rubrique courante se pose au bas de l'en-tête, loin du mot. */
.ct-header .menu > li { display: flex; align-items: center; }
.ct-header .menu > li > a { align-self: center; height: auto; }
.ct-header .menu > li:not(.bapt-cta) > a::after { bottom: -7px; }

/* L'accueil porte déjà son nom en grand sur la couverture :
   le bandeau de titre y ferait un second <h1>, mauvais pour le référencement
   comme pour l'œil. On le retire, fond compris. */
body.home .hero-section,
body.home .hero-section .entry-header { display: none !important; }

/* ===========================================================
   Le formulaire des fiches de chambre : même bandeau que la
   page Réserver. Mêmes gestes, même allure, partout.
   =========================================================== */
.mphb-booking-form {
  background: var(--bapt-creme-sourde);
  border: 1px solid var(--bapt-filet);
  border-radius: 4px;
  padding: 1.1rem 1.2rem;
  margin: 1rem 0 2.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem;
}

.mphb-booking-form .mphb-required-fields-tip {
  flex: 0 0 100%; order: -1; margin: 0 0 0.6rem;
  font-size: 0.7rem; color: var(--bapt-texte);
}
.mphb-booking-form > p { margin: 0; flex: 1 1 170px; min-width: 150px; }
.mphb-booking-form > p.mphb-reserve-btn-wrapper { flex: 0 0 auto; }
.mphb-booking-form > .mphb-errors-wrapper { flex: 1 1 100%; margin: 0.4rem 0 0; }
.mphb-booking-form br { display: none; }

.mphb-booking-form label {
  display: block;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bapt-texte); margin-bottom: 0.35rem;
}

.mphb-booking-form input[type="text"],
.mphb-booking-form select {
  width: 100%; height: 46px;
  background: #fff; border: 1px solid var(--bapt-filet); border-radius: 3px;
  padding: 0 0.8rem;
  font-family: var(--bapt-sans); font-size: 0.88rem; color: var(--bapt-encre);
}
.mphb-booking-form input[type="text"]:focus,
.mphb-booking-form select:focus {
  outline: none; border-color: var(--bapt-vert);
  box-shadow: 0 0 0 2px rgba(47, 74, 58, 0.12);
}

.mphb-booking-form .mphb-reserve-btn,
.mphb-booking-form input[type="submit"] {
  height: 46px; padding: 0 2rem;
  background: var(--bapt-vert); color: var(--bapt-creme);
  border: 0; border-radius: 3px;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
}
.mphb-booking-form .mphb-reserve-btn:hover { background: var(--bapt-vert-fonce); }

/* Le titre « Formulaire de réservation » : au même rang que les autres. */
.mphb-reservation-form-title {
  font-size: 1.1rem; font-weight: 400; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 2.6rem 0 1rem;
}

@media (max-width: 1024px) {
  .mphb-booking-form > p { flex: 1 1 calc(50% - 0.45rem); }
  .mphb-booking-form > p.mphb-reserve-btn-wrapper { flex: 1 1 100%; }
  .mphb-booking-form .mphb-reserve-btn { width: 100%; }
}
@media (max-width: 768px) {
  .mphb-booking-form { padding: 1rem; }
  .mphb-booking-form > p { flex: 1 1 100%; }
  .mphb-booking-form input[type="text"],
  .mphb-booking-form select,
  .mphb-booking-form .mphb-reserve-btn { height: 50px; }
}

/* ===========================================================
   Carrousel de la page d'accueil
   =========================================================== */
.bapt-carrousel { position: relative; margin: 0; }
.bapt-piste {
  display: flex; gap: 0; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.bapt-piste::-webkit-scrollbar { display: none; }
.bapt-vue {
  position: relative; flex: 0 0 100%; scroll-snap-align: center; margin: 0;
}
.bapt-vue img {
  display: block; width: 100%; height: clamp(360px, 56vh, 620px);
  object-fit: cover; border-radius: 0;
}
.bapt-vue-legende {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.4rem 1.1rem;
  color: #fff; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-align: center;
  background: linear-gradient(to top, rgba(34,35,30,0.55), rgba(34,35,30,0));
}
.bapt-fleche {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; padding: 0;
  background: rgba(251,248,243,0.86); color: var(--bapt-encre);
  border: 1px solid var(--bapt-filet); border-radius: 50%;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.bapt-fleche:hover { background: #fff; }
.bapt-fleche-prec { left: 1.1rem; }
.bapt-fleche-suiv { right: 1.1rem; }
@media (max-width: 768px) {
  .bapt-vue img { height: clamp(300px, 52vh, 460px); }
  .bapt-fleche { width: 38px; height: 38px; font-size: 1.2rem; }
  .bapt-fleche-prec { left: 0.6rem; }
  .bapt-fleche-suiv { right: 0.6rem; }
}

/* ===========================================================
   Formulaire de contact
   =========================================================== */
.bapt-formulaire {
  display: flex; flex-wrap: wrap; gap: 1rem 1.2rem;
  background: var(--bapt-creme-sourde);
  border: 1px solid var(--bapt-filet); border-radius: 4px;
  padding: 1.6rem; margin: 1.6rem 0 2rem;
}
.bapt-formulaire .bapt-obligatoire { flex: 0 0 100%; margin: 0; font-size: 0.7rem; color: var(--bapt-texte); }
.bapt-champ { flex: 1 1 220px; margin: 0; min-width: 200px; }
.bapt-champ-large { flex: 1 1 100%; }
.bapt-formulaire label {
  display: block; font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bapt-texte); margin-bottom: 0.35rem;
}
.bapt-formulaire input[type="text"],
.bapt-formulaire input[type="email"],
.bapt-formulaire input[type="tel"],
.bapt-formulaire textarea {
  width: 100%; background: #fff; border: 1px solid var(--bapt-filet);
  border-radius: 3px; padding: 0.7rem 0.8rem;
  font-family: var(--bapt-sans); font-size: 0.9rem; color: var(--bapt-encre);
}
.bapt-formulaire input:focus, .bapt-formulaire textarea:focus {
  outline: none; border-color: var(--bapt-vert); box-shadow: 0 0 0 2px rgba(47,74,58,0.12);
}
.bapt-formulaire textarea { resize: vertical; min-height: 140px; }
.bapt-envoyer {
  background: var(--bapt-vert); color: var(--bapt-creme); border: 0; border-radius: 3px;
  padding: 0.95em 2.4em; font-family: var(--bapt-sans); font-size: 0.74rem;
  letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
}
.bapt-envoyer:hover { background: var(--bapt-vert-fonce); }

/* Le leurre : invisible à l'œil, hors du parcours clavier, mais pas « display:none »
   — certains robots ignorent les champs ainsi masqués. */
.bapt-leurre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bapt-message { padding: 0.9rem 1.1rem; border-radius: 3px; margin: 1.2rem 0; font-size: 0.92rem; }
.bapt-message-ok { background: rgba(47,74,58,0.10); border: 1px solid var(--bapt-vert); color: var(--bapt-encre); }
.bapt-message-erreur { background: rgba(169,139,93,0.14); border: 1px solid #A98B5D; color: var(--bapt-encre); }
.bapt-altcha-champ altcha-widget { --altcha-border-width: 1px; --altcha-border-radius: 3px; display: block; max-width: 320px; }

@media (max-width: 768px) {
  .bapt-formulaire { padding: 1.1rem; }
  .bapt-champ { flex: 1 1 100%; }
  .bapt-envoyer { width: 100%; }
}

/* ===========================================================
   Le carrousel EST la couverture de l'accueil.
   =========================================================== */
.bapt-hero .bapt-vue img { height: clamp(460px, 78vh, 760px); }
.bapt-hero .bapt-vue::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(34,35,30,0.34) 0%, rgba(34,35,30,0.16) 45%, rgba(34,35,30,0.52) 100%);
  pointer-events: none;
}
.bapt-hero .bapt-vue-legende {
  bottom: 1.1rem; left: auto; right: 1.4rem; padding: 0;
  background: none; text-align: right; opacity: 0.72; font-size: 0.64rem;
}
.bapt-hero-texte {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.1rem; padding: 2rem; text-align: center; pointer-events: none;
}
.bapt-hero-titre {
  margin: 0; color: #fff; font-weight: 200;
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem);
  letter-spacing: 0.26em; text-transform: uppercase; line-height: 1.15;
  text-shadow: 0 2px 24px rgba(0,0,0,0.3);
}
.bapt-hero-sous-titre {
  margin: 0; color: #fff; font-size: clamp(0.72rem, 0.6rem + 0.4vw, 0.86rem);
  letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.92;
}
.bapt-hero-bouton {
  pointer-events: auto;
  background: var(--bapt-encre); color: #fff; text-decoration: none;
  padding: 0.95em 2.4em; border-radius: 3px;
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.bapt-hero-bouton:hover { background: var(--bapt-vert); color: #fff; }
.bapt-hero .bapt-fleche { background: rgba(251,248,243,0.22); border-color: rgba(255,255,255,0.45); color: #fff; }
.bapt-hero .bapt-fleche:hover { background: rgba(251,248,243,0.42); }
@media (max-width: 768px) {
  .bapt-hero .bapt-vue img { height: clamp(420px, 72vh, 560px); }
  .bapt-hero-titre { letter-spacing: 0.18em; }
  .bapt-hero .bapt-vue-legende { display: none; }
}

/* ===========================================================
   La couverture occupe toute la largeur, quelle que soit la
   largeur du contenu. On évite « 100vw », qui compte la barre
   de défilement et provoque un débordement horizontal.
   =========================================================== */
html, body { overflow-x: hidden; }

.bapt-hero {
  width: auto;
  margin-left: calc( 50% - 50vw + (var(--bapt-barre, 0px) / 2) );
  margin-right: calc( 50% - 50vw + (var(--bapt-barre, 0px) / 2) );
  max-width: none;
}

/* Sur l'accueil, la couverture colle à l'en-tête. */
body.home .entry-content > .bapt-hero:first-child { margin-top: 0; }
body.home .site-main > article > .entry-content { padding-top: 0; }

/* « À partir de » : la mention précède le prix, en plus petit. */
.bapt-ligne-apd {
  display: block; font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bapt-texte); margin-bottom: 0.1rem;
}
@media (max-width: 768px) { .bapt-ligne-apd { text-align: left; } }

/* Sur l'accueil, la couverture touche l'en-tête : Blocksy pose 60 px de marge
   haute sur son conteneur, on les retire ici seulement. */
body.home .ct-container-full { padding-top: 0; }

/* Les informations pratiques, sur la page Réserver. */
.bapt-infos-pratiques {
  background: #fff; border: 1px solid var(--bapt-filet); border-radius: 4px;
  padding: 1.3rem 1.5rem; margin: 1.4rem 0 0;
}
.bapt-infos-pratiques h2 {
  margin: 0 0 0.8rem; font-size: 0.82rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--bapt-encre);
}
.bapt-infos-pratiques ul { margin: 0; padding: 0; list-style: none; }
.bapt-infos-pratiques li {
  position: relative; padding-left: 1rem; margin: 0 0 0.4rem;
  font-size: 0.88rem; color: var(--bapt-texte); line-height: 1.6;
}
.bapt-infos-pratiques li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 1px; background: var(--bapt-vert);
}
.bapt-infos-pratiques li:last-child { margin-bottom: 0; }

/* Photos de présentation plus grandes, et les pictogrammes d'équipement. */
.bapt-ligne-vignette { flex: 0 0 180px; }
.bapt-ligne-vignette img { width: 180px; height: 128px; }
.bapt-ligne-chambre { gap: 1.5rem; padding: 1.3rem 0.2rem; }

.bapt-pictos { display: flex; flex-wrap: wrap; gap: 0.95rem; margin-top: 0.75rem; }
.bapt-picto {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bapt-texte); opacity: 0.74;
}
.bapt-picto:hover { opacity: 1; color: var(--bapt-vert); }
.bapt-picto svg { width: 19px; height: 19px; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

@media (max-width: 768px) {
  .bapt-ligne-vignette { flex: 0 0 100%; }
  .bapt-ligne-vignette img { width: 100%; height: 190px; }
  .bapt-ligne-nom { flex: 1 1 100%; }
  .bapt-pictos { gap: 0.45rem; }
}

/* Sur l'accueil, le texte ne flotte pas au-dessus du pied de page. */
body.home .ct-container-full { padding-bottom: 0; }
body.home .entry-content > .wp-block-group:last-child { padding-bottom: 3.4rem; margin-bottom: 0; }

/* ===========================================================
   Calendriers — reprise complète
   Le greffon arrive avec des tableaux à filets et des fonds gris.
   On enlève tout, on ne garde que des chiffres qui respirent.
   =========================================================== */

.datepick, .datepick-popup .datepick, .mphb-calendar .datepick {
  background: #fff;
  border: 1px solid var(--bapt-filet);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(34,35,30,0.08);
  padding: 0.4rem 0.6rem 0.6rem;
  font-family: var(--bapt-sans);
  color: var(--bapt-texte);
}

/* La barre du haut : trois commandes, sans fond. */
.datepick .datepick-nav, .datepick .datepick-ctrl {
  background: transparent; border: 0; border-bottom: 1px solid var(--bapt-filet);
  padding: 0.7rem 0.3rem 0.6rem; display: flex; justify-content: space-between; align-items: center;
}
.datepick .datepick-ctrl { border-bottom: 0; border-top: 1px solid var(--bapt-filet); padding-bottom: 0.2rem; }
.datepick .datepick-cmd {
  color: var(--bapt-vert); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; background: none; border: 0; padding: 0.2rem 0.3rem;
}
.datepick .datepick-cmd:hover { color: var(--bapt-encre); }
.datepick .datepick-cmd.datepick-disabled { color: var(--bapt-filet); }

/* Le nom du mois. */
.datepick .datepick-month-header {
  background: transparent; color: var(--bapt-encre);
  padding: 0.9rem 0 0.7rem; text-align: center;
  font-size: 0.86rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
}
.datepick .datepick-month-header select {
  background: transparent; border: 0; color: var(--bapt-encre);
  font-family: var(--bapt-sans); font-size: 0.86rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0 0.15rem; cursor: pointer;
}

/* Les jours de la semaine : une seule lettre d'esprit, très discrète. */
.datepick .datepick-month th {
  background: transparent; border: 0; padding: 0 0 0.5rem;
  color: var(--bapt-texte); opacity: 0.55;
  font-weight: 400; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
}

/* Les cellules : des pastilles, pas des cases de tableur. */
.datepick .datepick-month table { border-collapse: separate; border-spacing: 2px; width: 100%; }
.datepick .datepick-month td { border: 0; padding: 0; background: transparent; }
.datepick .datepick-month td a,
.datepick .datepick-month td span {
  display: block; border: 0; border-radius: 4px;
  padding: 0.46rem 0; min-width: 30px;
  font-size: 0.82rem; text-align: center; text-decoration: none;
  color: var(--bapt-texte); background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.datepick .datepick-month td a:hover { background: var(--bapt-vert); color: #fff; }
.datepick .datepick-month td a.datepick-today { box-shadow: inset 0 0 0 1px var(--bapt-vert); color: var(--bapt-encre); }
.datepick .datepick-month td.datepick-selected a,
.datepick .datepick-month td a.datepick-selected,
.datepick .datepick-month td.mphb-selected-date a { background: var(--bapt-vert); color: #fff; }

/* Ce qui n'est pas choisissable s'efface, sans disparaître. */
.datepick .mphb-past-date span, .datepick .mphb-past-date a,
.datepick .mphb-unselectable-date span, .datepick .mphb-unselectable-date a,
.datepick .datepick-unselectable span, .datepick .datepick-other-month span {
  color: var(--bapt-filet); background: transparent; cursor: default;
}
.datepick .datepick-weekend a, .datepick .datepick-weekend span { background: transparent; }

/* Les deux mois côte à côte, séparés par un filet, jamais par un fond. */
.datepick .datepick-month, .datepick .datepick-month.first, .datepick .datepick-month.last,
.datepick .datepick-month table { background: transparent; border: 0; }
.datepick .datepick-month { padding: 0 0.7rem 0.3rem; vertical-align: top; }
.datepick .datepick-month-row { display: flex; align-items: flex-start; gap: 0.2rem; }
.datepick .datepick-month + .datepick-month { border-left: 1px solid var(--bapt-filet); }

/* Calendrier de disponibilité des fiches : la couleur porte un sens. */
.mphb-calendar { max-width: none; }
.mphb-calendar .mphb-available-date a, .mphb-calendar td.mphb-available-date a {
  background: rgba(47,74,58,0.08); color: var(--bapt-encre);
}
.mphb-calendar .mphb-available-date a:hover { background: var(--bapt-vert); color: #fff; }
.mphb-calendar .mphb-booked-date span, .mphb-calendar .mphb-booked-date a {
  background: transparent; color: var(--bapt-filet); text-decoration: line-through;
}
.mphb-calendar .mphb-pending-date span, .mphb-calendar .mphb-pending-date a {
  background: rgba(169,139,93,0.16); color: var(--bapt-texte);
}

@media (max-width: 768px) {
  .datepick, .datepick-popup .datepick { width: auto !important; max-width: calc(100vw - 1.6rem); }
  .datepick .datepick-month-row { display: block; }
  .datepick .datepick-month { width: 100% !important; padding: 0 0.2rem 0.6rem; }
  .datepick .datepick-month + .datepick-month { border-left: 0; border-top: 1px solid var(--bapt-filet); padding-top: 0.4rem; }
  .mphb-calendar { max-width: none; }
}

/* L'entrée Instagram du menu : un pictogramme, pas un mot. */
.ct-header .menu > li.bapt-insta > a { padding-left: 0; padding-right: 0.2rem; color: var(--bapt-texte); }
.ct-header .menu > li.bapt-insta > a:hover { color: var(--bapt-vert); }
.ct-header .menu > li.bapt-insta > a svg { display: block; }
.ct-header .menu > li.bapt-insta > a::after { display: none !important; }
.ct-header .menu > li.bapt-insta { margin-right: 0.9rem; }
@media (max-width: 999px) { .ct-panel .menu > li.bapt-insta > a svg { display: inline-block; vertical-align: middle; } }

/* La carte du calendrier prend la largeur de ses deux mois, pas davantage,
   et ne les tronque jamais. */
.mphb-calendar .datepick,
.datepick.datepick-multi {
  width: fit-content !important;
  max-width: 100%;
  overflow: visible;
}
.mphb-calendar .datepick-month-row,
.datepick.datepick-multi .datepick-month-row { flex-wrap: nowrap; }
.datepick .datepick-month { min-width: 232px; }
.datepick .datepick-month table { width: 100%; }
@media (max-width: 768px) {
  .datepick.datepick-multi { width: 100% !important; }
  .datepick .datepick-month { min-width: 0; }
}