/* ==========================================================================
   assets/css/reservation.css
   --------------------------------------------------------------------------
   1. [idh_reservation] — sélecteur de logement (vignettes) + panneaux.
   2. WP Booking System à la charte --idh-* :
        - CALENDRIER (2a) : CSS du plugin (wpbs-style) conservé ; on surcharge
          couleurs / polices / bordures / rayons / navigation.
        - FORMULAIRE (2b) : CSS du plugin (wpbs-style-form + <style> Customizer)
          conservé aussi ; on ne pose qu'une couche charte légère (police,
          largeur, focus). Les couleurs fines du formulaire se règlent dans
          Apparence → Personnaliser → WP Booking System.
   Chargé partout : profite aussi au calendrier de [idh_dispo] (fiches produit).
   Enqueue APRÈS wpbs-style / wpbs-style-form (idhotes-design-system.php, prio 100).
   ========================================================================== */

/* ==========================================================================
   1. SÉLECTEUR DE LOGEMENT
   ========================================================================== */
.resa__choix {
	display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 20px);
	margin: 4px 0 clamp(30px, 5vh, 52px);
}
.resa__vignette {
	all: unset; box-sizing: border-box; cursor: pointer;
	flex: 1 1 200px; max-width: 280px;
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--idh-line);
	border-radius: var(--idh-radius); overflow: hidden;
	transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
/* TT1 / kit Elementor réimposent button{background:#…!important} par-dessus
   all:unset — on rescelle avec la même arme, spécificité double classe. */
.resa__vignette.resa__vignette {
	background: #fff !important;
	color: var(--idh-title) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-align: left !important;
	font-family: inherit !important;
}
.resa__vignette.resa__vignette.est-actif {
	box-shadow: 0 0 0 1px var(--idh-primary), 0 18px 40px -24px rgba(18,26,23,.4) !important;
}
.resa__vignette:hover { border-color: var(--idh-ink-soft); transform: translateY(-3px); }
.resa__vignette:focus-visible { outline: 2px solid var(--idh-accent); outline-offset: 3px; }
.resa__vignette.est-actif {
	border-color: var(--idh-primary);
	box-shadow: 0 0 0 1px var(--idh-primary), 0 18px 40px -24px rgba(18,26,23,.4);
}
.resa__vignette-media {
	display: block; aspect-ratio: 16 / 10; background: var(--idh-bg-alt); overflow: hidden;
}
.resa__vignette-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.resa__vignette-nom {
	font-family: var(--idh-font-display); font-weight: 600; font-size: 1.02rem;
	color: var(--idh-title); padding: 12px 14px 0;
}
.resa__vignette-lieu {
	font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
	color: var(--idh-ink-soft); padding: 3px 14px 14px;
}
/* Panneau inactif : superposé au panneau actif (absolute, top:0), largeur
   réelle conservée (WP Booking System dimensionne ses calendriers à l'init sur
   cette largeur), mais masqué par clip-path — surtout PAS par visibility, que
   WPBS repose lui-même en visibility:visible sur ses éléments (sinon le
   calendrier du panneau caché se repeint par-dessus l'actif), ni par
   display:none, qui collapse la largeur des calendriers. */
.resa__panneaux { position: relative; }
.resa__panneau {
	position: absolute; top: 0; left: 0; width: 100%;
	clip-path: inset(50%); pointer-events: none;
}
.resa__panneau.est-visible {
	position: static; clip-path: none; pointer-events: auto;
}

/* Onglet de langue (calendrier + formulaire WPBS) — rechargement de page */
.resa__langues {
	display: inline-flex; gap: 2px;
	margin: 0 0 clamp(20px, 3vh, 30px);
	padding: 3px;
	background: var(--idh-bg-alt);
	border: 1px solid var(--idh-line);
	border-radius: var(--idh-radius-btn);
}
.resa__langue {
	all: unset; box-sizing: border-box; cursor: pointer;
	padding: 7px 16px;
	font-family: var(--idh-font-body); font-size: .84rem; font-weight: 500;
	letter-spacing: .02em; color: var(--idh-ink-soft);
	border-radius: calc(var(--idh-radius-btn) - 3px);
	transition: background-color .2s ease, color .2s ease;
}
.resa__langue:hover { color: var(--idh-title); }
.resa__langue:focus-visible { outline: 2px solid var(--idh-accent); outline-offset: 2px; }
.resa__langue.est-actif {
	background: #fff; color: var(--idh-title);
	box-shadow: 0 1px 3px rgba(18, 26, 23, .12);
	cursor: default;
}
/* Pendant le chargement d'une autre langue (fetch + échange du bloc) */
.resa--charge .resa__panneaux { opacity: .5; pointer-events: none; transition: opacity .15s ease; }
.resa--charge .resa__langues { opacity: .6; }

@media (max-width: 560px) {
	.resa__choix { gap: 10px; }
	.resa__vignette { flex-basis: 100%; max-width: none; flex-direction: row; align-items: center; }
	.resa__vignette-media { flex: none; width: 96px; aspect-ratio: 1; }
	.resa__vignette-nom { padding: 10px 12px 0; }
	.resa__vignette-lieu { padding: 2px 12px 10px; }
}

/* ==========================================================================
   2a. CALENDRIER WPBS — surcharge de charte (structure conservée)
   --------------------------------------------------------------------------
   Le plugin (wpbs-style) verrouille beaucoup de props en !important, avec une
   spécificité 0-4-0. reservation.css est enqueue APRÈS wpbs-style (voir
   idhotes-design-system.php, priorité 100) : à spécificité + !important égaux,
   la feuille chargée en dernier gagne. On garde donc la même profondeur de
   sélecteur que le plugin et on double le préfixe .wpbs-container pour passer.
   ========================================================================== */
.wpbs-container.wpbs-container {
	font-family: var(--idh-font-body);
	color: var(--idh-ink);
}
.wpbs-container.wpbs-container .wpbs-calendar-header,
.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar table th {
	font-family: var(--idh-font-display);
	color: var(--idh-title);
}
.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar table td .wpbs-date {
	border-color: var(--idh-line);
	color: var(--idh-ink);
}
/* Navigation mois — le plugin pose background:#bdc3c7 !important (0-4-0) ET
   un <style> INLINE par calendrier (couleurs configurées en admin) à 0-4-0
   !important, imprimé après cette feuille. On monte à 0-6-0 pour passer. */
.wpbs-main-wrapper .wpbs-container.wpbs-container .wpbs-calendar-header .wpbs-calendar-header-navigation .wpbs-prev,
.wpbs-main-wrapper .wpbs-container.wpbs-container .wpbs-calendar-header .wpbs-calendar-header-navigation .wpbs-next {
	background: var(--idh-primary) !important;
	border-radius: var(--idh-radius-btn) !important;
}
.wpbs-main-wrapper .wpbs-container.wpbs-container .wpbs-calendar-header .wpbs-calendar-header-navigation .wpbs-prev:hover,
.wpbs-main-wrapper .wpbs-container.wpbs-container .wpbs-calendar-header .wpbs-calendar-header-navigation .wpbs-next:hover {
	background: var(--idh-title) !important; opacity: 1;
}
/* Flèche = triangle CSS (border-color) — blanche sur fond primary */
.wpbs-main-wrapper .wpbs-container.wpbs-container .wpbs-calendar-header .wpbs-calendar-header-navigation .wpbs-next .wpbs-arrow {
	border-color: transparent transparent transparent var(--idh-on-primary) !important;
}
.wpbs-main-wrapper .wpbs-container.wpbs-container .wpbs-calendar-header .wpbs-calendar-header-navigation .wpbs-prev .wpbs-arrow {
	border-color: transparent var(--idh-on-primary) transparent transparent !important;
}
/* Jour survolé / sélectionné (plage de réservation) */
.wpbs-container.wpbs-container.wpbs-enable-hover .wpbs-date.wpbs-is-bookable:hover .wpbs-date-inner,
.wpbs-container.wpbs-container .wpbs-date.wpbs-date-hover:hover .wpbs-date-inner {
	background: var(--idh-bg-alt);
}
.wpbs-container.wpbs-container .wpbs-date.wpbs-selected-first .wpbs-date-inner,
.wpbs-container.wpbs-container .wpbs-date.wpbs-selected-last .wpbs-date-inner,
.wpbs-container.wpbs-container .wpbs-date.wpbs-selected-middle .wpbs-date-inner {
	background: var(--idh-accent) !important; color: var(--idh-on-accent) !important;
}
/* Légende */
.wpbs-container.wpbs-container .wpbs-legend,
.wpbs-container.wpbs-container .wpbs-legend .wpbs-legend-item-name {
	font-family: var(--idh-font-body); font-size: .82rem; color: var(--idh-ink-soft);
}
/* Bouton « Book now » du calendrier */
.wpbs-container.wpbs-container button,
.wpbs-container.wpbs-container .wpbs-button,
.wpbs-container.wpbs-container input[type="submit"] {
	font-family: var(--idh-font-body) !important;
	background: var(--idh-primary) !important;
	color: var(--idh-on-primary) !important;
	border: 1px solid var(--idh-primary) !important;
	border-radius: var(--idh-radius-btn) !important;
	box-shadow: none !important; text-shadow: none !important;
}
.wpbs-container.wpbs-container button:hover,
.wpbs-container.wpbs-container .wpbs-button:hover,
.wpbs-container.wpbs-container input[type="submit"]:hover {
	background: var(--idh-title) !important; border-color: var(--idh-title) !important;
}

/* ==========================================================================
   2c. [idh_dispo] — calendrier « nu »
   --------------------------------------------------------------------------
   Aperçu de disponibilité (accueil / fiche) : ni cadre ni fond ni gouttière de
   légende — la section .dispo porte déjà les siens. Portée limitée à .dispo.
   ========================================================================== */
.dispo .wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar,
.dispo .wpbs-overview-container {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.dispo .wpbs-container.wpbs-container .wpbs-calendar-header {
	background: transparent !important;
}
.dispo .wpbs-calendars-wrapper.wpbs-legend-position-side {
	padding-right: 0 !important;
}

/* ==========================================================================
   2b. FORMULAIRE WPBS — couche charte légère
   --------------------------------------------------------------------------
   On NE réécrit PAS le formulaire : wpbs-style-form + le <style> Customizer du
   plugin restent en place (cases/radio sur-mesure, sélecteurs, coupon,
   pas-à-pas… trop sensibles sur un tunnel de paiement). Ici seulement la
   police, l'ossature (largeur, espacements), le focus et quelques accents que
   le Customizer ne pilote pas. Les couleurs fines (bouton, champs, cases) se
   règlent dans Apparence → Personnaliser → WP Booking System.
   ========================================================================== */
.wpbs-main-wrapper .wpbs-form-container,
.wpbs-main-wrapper .wpbs-form-container input,
.wpbs-main-wrapper .wpbs-form-container select,
.wpbs-main-wrapper .wpbs-form-container textarea,
.wpbs-main-wrapper .wpbs-form-container button {
	font-family: var(--idh-font-body);
}
.wpbs-main-wrapper .wpbs-form-container {
	color: var(--idh-ink);
	max-width: 640px;
	margin: clamp(24px, 4vh, 40px) 0 0;
}
.wpbs-main-wrapper .wpbs-form-container .wpbs-form-field .wpbs-form-field-label label,
.wpbs-main-wrapper .wpbs-form-container .wpbs-form-field .wpbs-form-field-label > span {
	/* le plugin force label{font-size:16px !important} : on repasse devant */
	font-size: .82rem !important; letter-spacing: .02em; color: var(--idh-ink-soft);
}
.wpbs-main-wrapper .wpbs-form-container .wpbs-field-required-asterisk {
	color: var(--idh-accent) !important;
}
.wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input:focus,
.wpbs-main-wrapper .wpbs-form-container .wpbs-form-field select:focus,
.wpbs-main-wrapper .wpbs-form-container .wpbs-form-field textarea:focus {
	outline: 2px solid var(--idh-accent); outline-offset: 1px;
}
.wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-total,
.wpbs-main-wrapper .wpbs-amount-billed {
	font-family: var(--idh-font-display);
}
.wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-consent a {
	color: var(--idh-link); text-underline-offset: 2px;
}
.wpbs-form-confirmation-message {
	background: var(--idh-bg-alt); border-radius: var(--idh-radius);
	padding: clamp(20px, 3vw, 32px);
}