/*
Theme Name: Domaine de Poudos
Theme URI: https://domainedepoudos.fr/
Author: Domaine de Poudos
Description: Theme sur mesure pour la chambre d'hotes Domaine de Poudos (Auterive, Gers). Theme classique, leger, hand-code, sans page builder, edition via Gutenberg natif.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: domaine-poudos
*/

/* -----------------------------------------------------------------------
   Design tokens
----------------------------------------------------------------------- */
:root {
  --color-bg: oklch(97% 0.005 85);
  --color-text: oklch(22% 0.012 85);
  --color-text-soft: oklch(30% 0.012 85);
  --color-text-muted: oklch(47% 0.014 85);
  --color-border: oklch(87% 0.012 85);
  --color-section-alt: oklch(93% 0.008 85);
  --color-accent: oklch(42% 0.08 110);
  --color-accent-hover: oklch(36% 0.08 110);
  --color-accent-warm: oklch(48% 0.09 38);
  --color-cream: oklch(98% 0.004 85);
  --color-cream-soft: oklch(99% 0.002 85);
  --color-dark: oklch(24% 0.014 85);
  --color-dark-footer: oklch(20% 0.013 85);
  --color-footer-text: oklch(93% 0.006 85);
  --color-footer-muted: oklch(74% 0.012 85);
  --color-footer-border: oklch(34% 0.02 85);

  --font-serif: 'Spectral', serif;
  --font-sans: 'Nunito Sans', sans-serif;
}

/* -----------------------------------------------------------------------
   Reset & base
----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* necessaire au debordement pleine largeur (.full-bleed) */
}

img { max-width: 100%; display: block; }

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-hover); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  margin: 0 0 0.6em;
}

p { margin: 0 0 1em; }

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -----------------------------------------------------------------------
   Layout helpers
----------------------------------------------------------------------- */
.section {
  padding: clamp(56px, 9vw, 96px) clamp(20px, 5vw, 48px);
}

.section__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.section--alt { background: var(--color-section-alt); }

.section--split {
  max-width: 1180px;
  margin: 0 auto;
}

/* Le bloc Group de Gutenberg enveloppe toujours ses enfants dans un
   .wp-block-group__inner-container : c'est donc lui, et non le wrapper
   .section--split, qui doit porter le flex quand ce balisage vient du
   contenu edite (les sections codees en dur type front-page.php, elles,
   n'ont pas ce wrapper et sont couvertes par la regle ci-dessus/dessous). */
.section--split,
.section--split > .wp-block-group__inner-container {
  display: flex;
  gap: clamp(32px, 5vw, 72px);
  flex-wrap: wrap;
  align-items: center;
}

.section--split-reverse,
.section--split-reverse > .wp-block-group__inner-container { flex-wrap: wrap-reverse; }

.section__media { flex: 1 1 380px; min-width: 300px; }
.section__media img {
  width: 100%;
  height: clamp(320px, 42vw, 460px);
  object-fit: cover;
}

.section__body { flex: 1 1 380px; min-width: 300px; }
.section__body h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.section__body p { font-size: 1.05rem; line-height: 1.75; color: var(--color-text-soft); }

.link-arrow {
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid oklch(42% 0.08 110 / 0.4);
  padding-bottom: 2px;
  white-space: nowrap;
}
.link-arrow:hover { border-bottom-color: var(--color-accent-hover); }

/* -----------------------------------------------------------------------
   Header & navigation
----------------------------------------------------------------------- */
.site-header {
  padding: 26px 24px 18px;
  text-align: center;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__brand {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.site-nav__list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: clamp(14px, 3vw, 36px);
  flex-wrap: wrap;
  margin: 16px 0 0;
  padding: 0;
}

.site-nav__list a {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list a.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* -----------------------------------------------------------------------
   Hero
----------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(520px, 92vh, 880px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(15% 0.02 85 / 0.85) 0%, oklch(15% 0.02 85 / 0.4) 45%, oklch(15% 0.02 85 / 0.05) 75%);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 0 clamp(20px, 6vw, 64px) clamp(56px, 9vh, 96px);
  color: var(--color-cream);
}

.hero__eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 14px;
}

.hero__title {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 1.04;
  margin-bottom: 20px;
}

.hero__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.55;
  margin-bottom: 32px;
  max-width: 620px;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------
   Buttons
----------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 16px 34px;
  border-radius: 2px;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-cream-soft);
  border-color: var(--color-accent);
}
.btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-cream-soft); }

.btn--outline {
  background: transparent;
  color: var(--color-cream);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 15px 30px;
  border-color: oklch(98% 0.004 85 / 0.6);
}
.btn--outline:hover { background: oklch(98% 0.004 85 / 0.12); color: var(--color-cream); }

.btn--light {
  background: var(--color-cream);
  color: var(--color-dark);
  border-color: var(--color-cream);
  margin-bottom: 20px;
}
.btn--light:hover { background: oklch(88% 0.008 85); color: var(--color-dark); }

/* -----------------------------------------------------------------------
   Badges
----------------------------------------------------------------------- */
.badges {
  list-style: none;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.badge {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------
   Rooms preview
----------------------------------------------------------------------- */
.rooms-preview__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
}
.rooms-preview__head h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 10px; }
.rooms-preview__head p { color: var(--color-text-muted); margin: 0; }

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.room-card {
  text-decoration: none;
  color: inherit;
  display: block;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.room-card__img { width: 100%; height: 200px; object-fit: cover; }

.room-card__body { display: block; padding: 18px 20px; }
.room-card__name { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; }
.room-card__meta { display: block; font-size: 0.85rem; color: var(--color-text-muted); margin-top: 4px; }

/* -----------------------------------------------------------------------
   Pool / parc section
----------------------------------------------------------------------- */
.pool-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}
.pool-intro__eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-accent-warm);
  margin-bottom: 12px;
}
.pool-intro h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 16px; }
.pool-intro p { font-size: 1.05rem; line-height: 1.7; color: var(--color-text-soft); margin: 0; }

.pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.pool-grid img { width: 100%; height: clamp(300px, 38vw, 460px); object-fit: cover; }

/* -----------------------------------------------------------------------
   CTA
----------------------------------------------------------------------- */
.cta-section {
  background: var(--color-dark);
  padding: clamp(56px, 9vw, 88px) clamp(20px, 5vw, 48px);
  text-align: center;
}
.cta-section h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  color: var(--color-cream);
  margin-bottom: 26px;
}
.cta-section__phone { font-size: 0.9rem; color: oklch(74% 0.012 85); margin: 0; }

/* -----------------------------------------------------------------------
   Page hero (Chambres, Table d'hote, Reservation, pages generiques)
----------------------------------------------------------------------- */
.page-hero {
  padding: clamp(48px, 8vw, 72px) clamp(20px, 5vw, 48px) clamp(16px, 3vw, 24px);
  text-align: center;
}

.page-hero__inner { max-width: 900px; margin: 0 auto; }

.page-hero__title { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0; }

/* -----------------------------------------------------------------------
   Contenu Gutenberg (entry-content)
   Le premier paragraphe sert d'accroche centree. Les blocs "carte chambre"
   / "carte menu" se placent automatiquement en grille responsive, le reste
   du contenu (titres, paragraphes, etc.) occupe toute la largeur.
----------------------------------------------------------------------- */
.entry-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px 24px;
}

.entry-content > * { grid-column: 1 / -1; }

.entry-content > .room-card-detail,
.entry-content > .menu-card {
  grid-column: auto;
}

.entry-content > p:first-of-type {
  max-width: 760px;
  margin: 0 auto 0.4em;
  text-align: center;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--color-text-soft);
}

/* Taille de base du texte courant : sans ces regles, les paragraphes et
   titres du contenu Gutenberg retombent sur la taille par defaut du
   navigateur (plus petite que la maquette). */
.entry-content p { font-size: 1.05rem; line-height: 1.75; color: var(--color-text-soft); }
.entry-content h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.entry-content h3 { font-size: 1.3rem; }

/* -----------------------------------------------------------------------
   Debordement pleine largeur (sections a fond distinct, ex: "Exemple de
   menu", "Acces") meme imbriquees dans un conteneur plus etroit.
----------------------------------------------------------------------- */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* -----------------------------------------------------------------------
   Carte chambre (block pattern, page Chambres)
----------------------------------------------------------------------- */
.room-card-detail {
  background: var(--color-cream-soft);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.room-card-detail__img img { width: 100%; height: 280px; object-fit: cover; }

.room-card-detail__body { padding: 28px; display: flex; flex-direction: column; gap: 16px; flex: 1; }

.room-card-detail__head { margin-bottom: 0; }
.room-card-detail__head h3 { margin: 0; font-size: 1.5rem; }

.room-card-detail__badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: oklch(95% 0.025 38);
  color: var(--color-accent-warm);
  padding: 6px 12px;
  margin: 0;
  white-space: nowrap;
}

.room-card-detail__amenities { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.7; margin: 0; }

.room-card-detail__price {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--color-accent-warm);
}

.room-card-detail__price .room-card-detail__unit {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------
   Carte menu (block pattern, page Table d'hote)
----------------------------------------------------------------------- */
.menu-card {
  background: var(--color-cream-soft);
  border: 1px solid var(--color-border);
  padding: 32px 24px;
}

.menu-card__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-warm);
  margin: 0 0 16px;
}

.menu-card__dish {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

/* -----------------------------------------------------------------------
   Hero photo (page Table d'hote) : titre + accroche en surimpression
   sur une photo pleine largeur, meme principe que .hero (accueil) en
   plus compact.
----------------------------------------------------------------------- */
.page-hero-photo {
  position: relative;
  min-height: clamp(360px, 52vw, 560px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.page-hero-photo__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.page-hero-photo__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(15% 0.02 85 / 0.8) 0%, oklch(15% 0.02 85 / 0.4) 50%, oklch(15% 0.02 85 / 0.05) 85%);
  z-index: 1;
}

.page-hero-photo__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 0 clamp(20px, 6vw, 64px) clamp(40px, 7vh, 64px);
  color: var(--color-cream);
}

.page-hero-photo__title { font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--color-cream); margin-bottom: 14px; }

.page-hero-photo__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.55;
  margin: 0;
  max-width: 600px;
}

/* -----------------------------------------------------------------------
   Bloc centre etroit (ex: "Le petit-dejeuner")
----------------------------------------------------------------------- */
.center-narrow { max-width: 760px; margin: 0 auto; text-align: center; }

/* -----------------------------------------------------------------------
   Ligne de tarifs (ex: "Le soir" sur la page Table d'hote)
----------------------------------------------------------------------- */
.price-row,
.price-row > .wp-block-group__inner-container {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.price-row__amount {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--color-accent-warm);
  margin: 0;
}
.price-row__label { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }

/* -----------------------------------------------------------------------
   Encart (Reservation : "Vous pouvez aussi reserver...")
----------------------------------------------------------------------- */
.info-box {
  border: 1px solid var(--color-border);
  background: oklch(94% 0.025 110 / 0.35);
  padding: 20px 24px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--color-text-soft);
}

/* -----------------------------------------------------------------------
   Section "Exemple de menu" (fond alt + grille centree)
----------------------------------------------------------------------- */
.menu-section {
  background: var(--color-section-alt);
  padding: clamp(40px, 7vw, 64px) clamp(20px, 5vw, 40px);
  text-align: center;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.menu-section__subtitle { color: var(--color-text-muted); margin: 0 0 32px; }
/* Voir la note sur .wp-block-group__inner-container plus haut (.section--split) */
.menu-section__grid,
.menu-section__grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

/* -----------------------------------------------------------------------
   Widget de reservation (shortcode MotoPress [mphb_availability_search]).
   Le plugin genere son propre balisage (formulaire de recherche + JS de
   calendrier) ; on l'habille ici sans toucher a sa logique.
----------------------------------------------------------------------- */
.booking-widget {
  background: var(--color-cream-soft);
  border: 1px solid var(--color-border);
  padding: clamp(24px, 4vw, 36px);
}

.booking-widget .mphb-required-fields-tip {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}

.booking-widget .mphb_sc_search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
}

.booking-widget .mphb_sc_search-form > p {
  margin: 0;
  flex: 1 1 160px;
  min-width: 140px;
}

.booking-widget .mphb_sc_search-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text);
}

.booking-widget .mphb_sc_search-form label abbr {
  text-decoration: none;
  color: var(--color-accent-warm);
}

.booking-widget .mphb_sc_search-form input[type="text"],
.booking-widget .mphb_sc_search-form select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  border-radius: 0;
}

.booking-widget .mphb_sc_search-form input[type="text"]:focus,
.booking-widget .mphb_sc_search-form select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.booking-widget .mphb_sc_search-submit-button-wrapper { flex: 0 0 auto; }

.booking-widget .mphb_sc_search-form input.button {
  display: inline-block;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 15px 34px;
  border-radius: 2px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-cream-soft);
  cursor: pointer;
}

.booking-widget .mphb_sc_search-form input.button:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* -----------------------------------------------------------------------
   Selecteur de chambre + calendrier de disponibilite par chambre
   (Reservation : 1 bouton par chambre, un panneau MotoPress par chambre
   affiche/masque via reservation-tabs.js). Chaque panneau combine les
   shortcodes MotoPress [mphb_availability_calendar] (calendrier reel,
   donnees en base) + [mphb_availability] (formulaire, reservation
   directe activee -> POST direct vers la page Paiement).
----------------------------------------------------------------------- */
.room-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
}

.room-tabs__tab {
  flex: 1 1 150px;
  min-width: 140px;
  text-align: left;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  background: var(--color-cream-soft);
  color: var(--color-text);
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-sans);
}

.room-tabs__tab-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
}

.room-tabs__tab-meta {
  display: block;
  font-size: 0.78rem;
  opacity: 0.85;
  margin-top: 3px;
}

.room-tabs__tab.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-cream-soft);
}

.room-tabs__panel {
  background: var(--color-cream-soft);
  border: 1px solid var(--color-border);
  padding: clamp(24px, 4vw, 36px);
}

.room-tabs__panel + .room-tabs__panel { margin-top: 0; }

.room-tabs__panel .mphb-calendar-title,
.room-tabs__panel .mphb-reservation-form-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 14px;
}

.room-tabs__panel .mphb-reservation-form-title { margin-top: 32px; }

.room-tabs__panel .mphb-regular-price {
  font-size: 0.95rem;
  color: var(--color-text-soft);
  margin: 0 0 20px;
}

.room-tabs__panel .mphb-regular-price .mphb-price {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-accent-warm);
  font-size: 1.1rem;
}

.room-tabs__panel .mphb-calendar { border: 1px solid var(--color-border); padding: 16px; max-width: 360px; overflow-x: auto; }

/* Legende (statique, comme dans la maquette Claude Design) */
.room-tabs__legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 14px 0 28px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.room-tabs__legend-item { position: relative; padding-left: 20px; }
.room-tabs__legend-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-border);
}
.room-tabs__legend-item--selected::before { background: var(--color-accent); border-color: var(--color-accent); }
.room-tabs__legend-item--unavailable::before { background: var(--color-section-alt); border-color: oklch(80% 0.01 85); }

/* -----------------------------------------------------------------------
   Calendrier MotoPress (librairie kbwood/datepick + classes ajoutees par
   mphb.js sur chaque cellule). Regles volontairement NON scopees a
   .room-tabs__panel : le calendrier "Disponibilite" est inline dans le
   panneau, mais les mini-calendriers popup qui s'ouvrent au clic sur les
   champs "Date d'arrivee/depart" du formulaire sont injectes ailleurs
   dans le DOM (fin de <body>) — ces regles doivent s'appliquer aux deux.
----------------------------------------------------------------------- */
/* Version volontairement PRUDENTE apres retours utilisateur (bandeau
   casse + chevauchement avec le mini-calendrier popup des champs de
   date). On ne corrige que ce qui est confirme certain en lisant le
   code source du plugin (le fond noir de .datepick-nav/.datepick-ctrl,
   defini en dur dans vendors/kbwood/datepick/jquery.datepick.css :
   "background-color:#000"/"#600"/"float:left;width:100%"). Le reste
   (boutons carres, selects mois/annee stylises, alignement de la barre
   "Effacer") est laisse au style par defaut du plugin : sans navigateur
   pour verifier le rendu reel, mieux vaut un calendrier fonctionnel mais
   sobre qu'un calendrier casse. A reprendre plus tard avec un vrai
   retour visuel (capture d'ecran ou outil de navigateur).            */
.datepick { font-family: var(--font-sans); }

.datepick-nav,
.datepick-ctrl {
  float: none !important;
  width: auto !important;
  background: transparent !important;
  color: var(--color-text) !important;
}
.datepick-nav a, .datepick-ctrl a { color: var(--color-accent) !important; }

.datepick-month table { width: 100%; border-collapse: collapse; }
.datepick-month thead th span {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.datepick-month tbody td { padding: 2px; text-align: center; }
.datepick-month tbody td a,
.datepick-month tbody td span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  border: 1px solid oklch(89% 0.01 85);
  background: var(--color-cream-soft);
  color: var(--color-text);
  font-size: 0.88rem;
  text-decoration: none;
}
.datepick-month tbody td a:hover { border-color: var(--color-accent); }

.datepick-month tbody td .datepick-today {
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
  font-weight: 700;
}

.datepick-month tbody td .datepick-selected,
.datepick-month tbody td .mphb-selected-date,
.datepick-month tbody td .mphb-selected-date--check-in,
.datepick-month tbody td .mphb-selected-date--check-out {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-cream-soft) !important;
}

.datepick-month tbody td .mphb-past-date,
.datepick-month tbody td .mphb-booked-date,
.datepick-month tbody td .mphb-not-available-date,
.datepick-month tbody td .mphb-out-of-season-date,
.datepick-month tbody td .mphb-mark-as-unavailable,
.datepick-month tbody td .mphb-unselectable-date,
.datepick-month tbody td .datepick-disabled {
  background: var(--color-section-alt);
  border-color: var(--color-section-alt);
  color: oklch(72% 0.01 85);
  cursor: not-allowed;
}

/* Formulaire (mêmes classes de balisage que le widget de recherche) */
.room-tabs__panel .mphb-booking-form { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; }
.room-tabs__panel .mphb-booking-form > p { margin: 0; flex: 1 1 160px; min-width: 140px; }
.room-tabs__panel .mphb-booking-form label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--color-text); }
.room-tabs__panel .mphb-booking-form label abbr { text-decoration: none; color: var(--color-accent-warm); }
.room-tabs__panel .mphb-booking-form input[type="text"],
.room-tabs__panel .mphb-booking-form select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  border-radius: 0;
}
.room-tabs__panel .mphb-booking-form input[type="text"]:focus,
.room-tabs__panel .mphb-booking-form select:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.room-tabs__panel .mphb-booking-form input[type="submit"],
.room-tabs__panel .mphb-booking-form button {
  display: inline-block;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 15px 34px;
  border-radius: 2px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-cream-soft);
  cursor: pointer;
}
.room-tabs__panel .mphb-booking-form input[type="submit"]:hover,
.room-tabs__panel .mphb-booking-form button:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

/* -----------------------------------------------------------------------
   Section "Acces" (Reservation : fond alt + grille 4 colonnes)
----------------------------------------------------------------------- */
.access-section {
  background: var(--color-section-alt);
  padding: clamp(40px, 7vw, 64px) clamp(20px, 5vw, 40px);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.access-section h2 { text-align: center; margin-bottom: 36px; }
/* Voir la note sur .wp-block-group__inner-container plus haut (.section--split) */
.access-section__grid,
.access-section__grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 36px;
  max-width: 1180px;
  margin: 0 auto;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--color-text-soft);
}
.access-section__grid h3 { font-size: 1.05rem; margin-bottom: 12px; }

/* -----------------------------------------------------------------------
   Footer
----------------------------------------------------------------------- */
.site-footer {
  background: var(--color-dark-footer);
  color: var(--color-footer-text);
  padding: 56px 24px 32px;
}

.site-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  justify-content: space-between;
}

.site-footer__col { flex: 1 1 220px; min-width: 220px; }
.site-footer__col--brand { flex-basis: 240px; }

.site-footer__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.site-footer__col p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-footer-muted);
  margin: 0;
}

.site-footer__heading {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-footer-muted);
  margin-bottom: 14px;
}

.site-footer__address {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--color-footer-text);
  font-style: normal;
}

.site-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.9rem;
  margin: 0;
  padding: 0;
}
.site-footer__links a { color: var(--color-footer-text); text-decoration: none; }
.site-footer__links a:hover { color: oklch(75% 0.05 110); }

.site-footer__bottom {
  border-top: 1px solid var(--color-footer-border);
  margin-top: 36px;
  padding-top: 20px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-footer-muted);
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}