/* ============================================
   Cap Nature Multi-Étang — Front CSS
   ============================================ */

/* Default CSS custom properties (overridden by admin settings) */
:root {
	--cnme-search-bg: #2d4a2e;
	--cnme-search-text: #ffffff;
	--cnme-btn-bg: #d4a843;
	--cnme-btn-text: #1a1a1a;
	--cnme-input-bg: rgba(255,255,255,0.12);
	--cnme-input-border: rgba(255,255,255,0.25);
	--cnme-card-bg: #f0f7f0;
	--cnme-primary: #2d4a2e;
}

/* ============================================
   Search Form
   ============================================ */
.cnme-search-form {
	background: linear-gradient(135deg, var(--cnme-search-bg) 0%, color-mix(in srgb, var(--cnme-search-bg) 80%, #fff) 100%);
	border-radius: 16px;
	padding: 28px 32px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.15);
	margin: 20px 0;
}

.cnme-search-fields {
	display: flex;
	gap: 14px;
	align-items: flex-end;
	flex-wrap: wrap;
}
/* Ligne 1 : Étang + Pêcheurs — Ligne 2 : Arrivée + Départ + bouton. */
.cnme-search-fields-row1 {
	margin-bottom: 14px;
}
.cnme-search-fields-row1 .cnme-field {
	flex: 1 1 45%;
}

.cnme-field {
	flex: 1;
	min-width: 160px;
}
.cnme-field-small {
	flex: 0 0 140px;
	min-width: 120px;
}
.cnme-field-submit {
	flex: 0 0 auto;
	min-width: auto;
}

.cnme-field label {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--cnme-search-text, rgba(255,255,255,0.85));
	opacity: 0.85;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 6px;
	letter-spacing: 0.3px;
}
.cnme-field-icon {
	display: flex;
	align-items: center;
}
.cnme-field-icon svg {
	color: var(--cnme-search-text, rgba(255,255,255,0.7));
	opacity: 0.7;
}

.cnme-input {
	width: 100%;
	padding: 12px 14px;
	border: 2px solid var(--cnme-input-border, rgba(255,255,255,0.2));
	border-radius: 10px;
	background: var(--cnme-input-bg, rgba(255,255,255,0.12));
	color: var(--cnme-search-text, #fff);
	font-size: 14px;
	transition: border-color 0.2s, background 0.2s;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
}
.cnme-input:focus {
	outline: none;
	border-color: rgba(255,255,255,0.5);
	background: rgba(255,255,255,0.18);
}
.cnme-input option {
	color: #1d2327;
	background: #fff;
}
.cnme-input::placeholder {
	color: rgba(255,255,255,0.5);
}
/* Chevron ▼ sur les selects (Étang, Pêcheurs) — indique qu'un choix est attendu.
   !important obligatoire : le thème JupiterX et Elementor stylent les <select>
   avec leur propre background/appearance et écrasaient silencieusement la flèche. */
.cnme-search-form select.cnme-input,
select.cnme-input {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 16px 16px !important;
	background-color: var(--cnme-input-bg, rgba(255,255,255,0.12)) !important;
	padding-right: 38px !important;
	cursor: pointer;
}
/* Masque la flèche native d'IE/Edge legacy */
.cnme-search-form select.cnme-input::-ms-expand { display: none; }
/* Fix date input color on webkit */
.cnme-input::-webkit-calendar-picker-indicator {
	filter: invert(1);
	cursor: pointer;
}

.cnme-btn-search {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	background: var(--cnme-btn-bg, #e8a838);
	color: var(--cnme-btn-text, #1a3a2a);
	border: none;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
	white-space: nowrap;
	letter-spacing: 0.3px;
}
.cnme-btn-search:hover {
	background: color-mix(in srgb, var(--cnme-btn-bg, #e8a838) 85%, #fff);
	transform: translateY(-1px);
}
.cnme-btn-search:active {
	transform: translateY(0);
}
.cnme-btn-search svg {
	flex-shrink: 0;
}

/* Single étang form variant */
.cnme-search-single {
	background: linear-gradient(135deg, #1e4d38 0%, #2a6b4a 100%);
}
.cnme-search-etang-name {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255,255,255,0.15);
}
.cnme-search-etang-name svg {
	color: #e8a838;
}

/* ============================================
   Results Container
   ============================================ */
.cnme-results-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 0;
}

.cnme-results-header {
	margin-bottom: 24px;
}
.cnme-results-title {
	font-size: 28px;
	font-weight: 700;
	color: var(--cnme-primary, #1a3a2a);
	margin: 0 0 10px;
}
.cnme-results-total {
	font-size: 18px;
	font-weight: 600;
	color: var(--cnme-primary, #1a3a2a);
	margin: 0 0 12px;
}
.cnme-results-total-num {
	display: inline-block;
	min-width: 1.6em;
	text-align: center;
	background: var(--cnme-primary, #2d5a3d);
	color: #fff;
	font-weight: 800;
	border-radius: 6px;
	padding: 2px 8px;
	margin-right: 4px;
}
.cnme-results-total-sub {
	font-weight: 500;
	color: #555;
}
.cnme-results-recap {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 14px;
	color: #555;
}
.cnme-results-recap-item {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #f5f5f5;
	padding: 6px 14px;
	border-radius: 20px;
	font-weight: 500;
}
.cnme-results-recap-item svg {
	color: var(--cnme-primary, #2d5a3d);
	flex-shrink: 0;
}

/* ============================================
   Results Grid — Étang Cards
   ============================================ */
/* Deux colonnes maximum sur desktop (demande client), une seule sur mobile. */
.cnme-results-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 900px) {
	.cnme-results-grid {
		grid-template-columns: 1fr;
	}
}
/* Un seul étang trouvé (ex. recherche à 4 pêcheurs ne laissant que la Lochère) :
   la carte occupe toute la largeur au lieu de rester coincée dans la colonne
   de gauche avec un vide à droite. */
.cnme-results-grid .cnme-etang-result-card:only-child {
	grid-column: 1 / -1;
}

.cnme-etang-result-card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	transition: transform 0.2s, box-shadow 0.2s, opacity 0.4s ease, max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease;
	border: 1px solid #e8e8e8;
}
.cnme-etang-result-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.cnme-etang-result-card.cnme-card-fadeout {
	opacity: 0;
	max-height: 0;
	margin: 0;
	padding: 0;
	pointer-events: none;
	overflow: hidden;
}
/* Carte repliée après l'animation : retirée du flux pour que la grille se
   recompose autour de la carte retenue. Réversible via le bouton « Précédent ». */
.cnme-etang-result-card.cnme-card-collapsed {
	display: none;
}
/* Étang retenu : la carte s'étend sur toute la largeur du bloc — sinon elle
   restait dans sa colonne, laissant un vide à droite et comprimant le contenu. */
.cnme-etang-result-card.cnme-card-selected {
	box-shadow: 0 4px 20px rgba(45, 90, 61, 0.15);
	border-color: var(--cnme-primary, #2d5a3d);
	grid-column: 1 / -1;
}
/* Une fois élargie, on bascule en présentation horizontale (photo à gauche,
   informations à droite) : une bannière de 200px étirée sur 1200px serait
   disgracieuse, et le contenu respire mieux sur deux colonnes internes. */
@media (min-width: 700px) {
	.cnme-etang-result-card.cnme-card-selected {
		display: flex;
		align-items: stretch;
	}
	.cnme-etang-result-card.cnme-card-selected .cnme-result-thumb,
	.cnme-etang-result-card.cnme-card-selected .cnme-result-thumb-placeholder {
		flex: 0 0 38%;
		height: auto;
		min-height: 260px;
	}
	.cnme-etang-result-card.cnme-card-selected .cnme-result-body {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	/* Les deux boutons n'ont pas besoin de s'étirer sur toute la largeur. */
	.cnme-etang-result-card.cnme-card-selected .cnme-result-actions {
		max-width: 460px;
	}
}
/* La carte élargie ne doit pas réagir au survol comme une vignette cliquable. */
.cnme-etang-result-card.cnme-card-selected:hover {
	transform: none;
}

.cnme-result-thumb {
	height: 200px;
	background-size: cover;
	background-position: center;
	position: relative;
}
.cnme-result-thumb-placeholder {
	height: 200px;
	background: linear-gradient(135deg, var(--cnme-card-bg, #e8f5e9) 0%, color-mix(in srgb, var(--cnme-card-bg, #c8e6c9) 80%, #fff) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	/* Indispensable : le badge « X postes disponibles » est en position:absolute.
	   Sans contexte de positionnement ici, le badge des étangs SANS photo se
	   rattachait à un ancêtre lointain et flottait en haut de la page. */
	position: relative;
}
.cnme-result-thumb-placeholder svg {
	color: color-mix(in srgb, var(--cnme-primary, #2d5a3d) 40%, #fff);
}

.cnme-result-available-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	background: #00a32a;
	color: #fff;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.cnme-result-body {
	padding: 20px 24px;
}

.cnme-result-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--cnme-primary, #1a3a2a);
	margin: 0 0 8px;
}

.cnme-result-location {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #666;
	font-size: 14px;
	margin-bottom: 12px;
}
.cnme-result-location svg {
	color: var(--cnme-primary, #2d5a3d);
	flex-shrink: 0;
}

.cnme-result-infos {
	display: flex;
	gap: 16px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.cnme-result-info {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: #555;
}
.cnme-result-info svg {
	color: var(--cnme-primary, #2d5a3d);
	flex-shrink: 0;
}
.cnme-result-info strong {
	color: var(--cnme-primary, #1a3a2a);
}

.cnme-result-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}
.cnme-result-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--cnme-card-bg, #f0f7f1);
	color: var(--cnme-primary, #2d5a3d);
	padding: 4px 12px;
	border-radius: 14px;
	font-size: 12px;
	font-weight: 500;
}
.cnme-result-badge .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.cnme-result-dates {
	background: #f8f9fa;
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 16px;
	display: flex;
	gap: 8px 20px;
	/* Sans retour à la ligne, « Pêcheurs : 2 » débordait de la carte
	   dans les colonnes étroites. */
	flex-wrap: wrap;
	font-size: 13px;
	color: #555;
}
.cnme-result-dates strong {
	color: var(--cnme-primary, #1a3a2a);
}

.cnme-result-actions {
	display: flex;
	gap: 10px;
}
.cnme-btn-primary {
	flex: 1;
	padding: 12px 20px;
	background: var(--cnme-primary, #2d5a3d);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s, transform 0.1s;
	display: inline-block;
}
.cnme-btn-primary:hover {
	background: color-mix(in srgb, var(--cnme-primary, #2d5a3d) 80%, #000);
	color: #fff;
	transform: translateY(-1px);
	text-decoration: none;
}
.cnme-btn-secondary {
	flex: 1;
	padding: 12px 20px;
	background: transparent;
	color: var(--cnme-primary, #2d5a3d);
	border: 2px solid var(--cnme-primary, #2d5a3d);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
	display: inline-block;
}
.cnme-btn-secondary:hover {
	background: var(--cnme-primary, #2d5a3d);
	color: #fff;
	text-decoration: none;
}

/* ============================================
   Loading & Empty States
   ============================================ */
.cnme-results-loading {
	text-align: center;
	padding: 60px 20px;
	grid-column: 1 / -1;
}
.cnme-spinner {
	width: 40px;
	height: 40px;
	border: 4px solid #e8e8e8;
	border-top: 4px solid #2d5a3d;
	border-radius: 50%;
	animation: cnme-spin 0.8s linear infinite;
	margin: 0 auto 16px;
}
@keyframes cnme-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.cnme-results-loading p {
	color: #666;
	font-size: 15px;
}

.cnme-results-empty {
	text-align: center;
	padding: 60px 20px;
	grid-column: 1 / -1;
}
.cnme-results-empty h3 {
	color: var(--cnme-primary, #1a3a2a);
	margin: 16px 0 8px;
}
.cnme-results-empty p {
	color: #666;
	font-size: 14px;
}

/* ============================================
   Availability Calendar
   ============================================ */
.cnme-availability-wrapper {
	background: #fff;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	border: 1px solid #e8e8e8;
	margin: 20px 0;
}
.cnme-avail-inline {
	background: #f8faf8;
	border-color: #d4e5d8;
}

.cnme-avail-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 12px;
}
.cnme-avail-title {
	font-size: 24px;
	font-weight: 700;
	color: #1a3a2a;
	margin: 0;
}
.cnme-avail-nav {
	display: flex;
	align-items: center;
	gap: 12px;
}
.cnme-avail-prev,
.cnme-avail-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 2px solid #d4e5d8;
	border-radius: 10px;
	background: #fff;
	color: #2d5a3d;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
	padding: 0;
}
.cnme-avail-prev:hover,
.cnme-avail-next:hover {
	background: #2d5a3d;
	border-color: #2d5a3d;
	color: #fff;
}
.cnme-avail-prev svg,
.cnme-avail-next svg {
	pointer-events: none;
}
.cnme-avail-period {
	font-size: 17px;
	font-weight: 700;
	color: #1a3a2a;
	min-width: 200px;
	text-align: center;
}

.cnme-avail-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	min-height: 200px;
}
.cnme-avail-month {
	background: #fff;
	border-radius: 12px;
	padding: 16px;
	border: 1px solid #e8efe8;
}
.cnme-avail-inline .cnme-avail-month {
	background: #fff;
}
.cnme-avail-month-title {
	font-size: 19px;
	font-weight: 700;
	color: #1a3a2a;
	text-align: center;
	margin-bottom: 12px;
	text-transform: capitalize;
}
.cnme-avail-days-header {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	margin-bottom: 4px;
}
.cnme-avail-day-name {
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	color: #999;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 0;
}
.cnme-avail-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}
.cnme-avail-day {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	cursor: default;
	transition: transform 0.1s;
	position: relative;
}
.cnme-avail-day:not(.cnme-avail-day-empty):hover {
	transform: scale(1.1);
	z-index: 1;
}
.cnme-avail-day-empty {
	background: transparent;
}
.cnme-avail-day-available {
	background: #e8f5e9;
	color: #2e7d32;
}
.cnme-avail-day-partial {
	background: #fff3e0;
	color: #e65100;
}
.cnme-avail-day-occupied {
	background: #ffebee;
	color: #c62828;
}
.cnme-avail-day-past {
	background: #f5f5f5;
	color: #bbb;
}
/* Bateau amorceur interdit — le poste reste réservable (juste sans bateau),
   donc le chiffre reste vert comme un jour disponible ; seul le fond orange
   signale la restriction bateau. Le rouge est réservé aux jours réellement
   complets (cf. .cnme-avail-day-occupied), jamais aux jours orange : un jour
   complet est toujours prioritaire sur l'affichage bateau (précédence
   actée en v1.5.8), donc une case orange est par construction réservable. */
.cnme-avail-day-boat-forbidden { background: #ffe0b2; color: #2e7d32; }
/* Dimanches à cheval entre deux périodes bateau (bornées dimanche 12h →
   dimanche 12h suivant) : la matinée relève encore de la période sortante,
   le check-in de l'après-midi de la période entrante — rendu en diagonale
   plutôt qu'en case pleine, qui mentirait pour l'une des deux moitiés. */
.cnme-avail-day-boat-split-close {
	/* clôture : matinée interdite (orange), check-in libre (vert) */
	background: linear-gradient(135deg, #ffe0b2 0%, #ffe0b2 50%, #e8f5e9 50%, #e8f5e9 100%);
	color: #2e7d32;
}
.cnme-avail-day-boat-split-open {
	/* ouverture : matinée libre (vert), check-in interdit (orange) — réservable
	   dans les deux cas (juste sans bateau côté check-in), chiffre vert comme
	   .cnme-avail-day-boat-forbidden ci-dessus. */
	background: linear-gradient(135deg, #e8f5e9 0%, #e8f5e9 50%, #ffe0b2 50%, #ffe0b2 100%);
	color: #2e7d32;
}
/* 1er / dernier jour d'un blocage d'occupation continu (étang agrégé) — même
   principe que les frontières bateau ci-dessus, mais sans notion d'heure : la
   frontière est le jour calendaire lui-même (repos 24h avant/après conservé). */
.cnme-avail-day-occupied-split-open {
	/* 1er jour du blocage : veille encore libre (vert), aujourd'hui complet (rose) */
	background: linear-gradient(135deg, #e8f5e9 0%, #e8f5e9 50%, #ffebee 50%, #ffebee 100%);
	color: #c62828;
}
.cnme-avail-day-occupied-split-close {
	/* dernier jour du blocage : encore complet (rose), lendemain libéré (vert) */
	background: linear-gradient(135deg, #ffebee 0%, #ffebee 50%, #e8f5e9 50%, #e8f5e9 100%);
	color: #2e7d32;
}
/* Statuts bateau split (legacy — conservés pour compat) */
.cnme-avail-day-available-both { background: #c8e6c9; color: #1b5e20; }
.cnme-avail-day-available-sans { background: #fff9c4; color: #827717; }
.cnme-avail-day-available-avec { background: #e3f2fd; color: #0d47a1; }

.cnme-avail-legend {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e8e8e8;
	justify-content: center;
}
.cnme-avail-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #666;
	font-weight: 500;
}
/* Item « Bateau amorceur interdit » : texte + précision horaire sur 2 lignes,
   donc alignement du picto en haut plutôt qu'au centre. */
.cnme-avail-legend-boat {
	align-items: flex-start;
}
.cnme-avail-legend-sub {
	display: block;
	font-size: 10px;
	font-weight: 400;
	color: #999;
	margin-top: 2px;
}
.cnme-avail-dot {
	width: 12px;
	height: 12px;
	border-radius: 4px;
	flex-shrink: 0;
}
.cnme-avail-dot-available {
	background: #e8f5e9;
	border: 1px solid #a5d6a7;
}
.cnme-avail-dot-partial {
	background: #fff3e0;
	border: 1px solid #ffcc80;
}
.cnme-avail-dot-occupied {
	background: #ffebee;
	border: 1px solid #ef9a9a;
}
.cnme-avail-dot-past {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
}
.cnme-avail-dot-boat-forbidden { background: #ffe0b2; border: 1px solid #ffb74d; }
.cnme-avail-dot-available-both { background: #c8e6c9; border: 1px solid #81c784; }
.cnme-avail-dot-available-sans { background: #fff9c4; border: 1px solid #f9a825; }
.cnme-avail-dot-available-avec { background: #e3f2fd; border: 1px solid #64b5f6; }

/* ============================================
   HBook Integration — Custom form overlay + hidden search
   Our custom form (.cnme-hbook-custom-search) uses same CSS
   classes as [cn_search_form] → pixel-perfect match guaranteed.
   HBook's search section is fully hidden; booking tunnel remains.
   ============================================ */
.cnme-hbook-etang-wrapper {
	max-width: 100%;
}

/* --- Hide HBook's search section (visually only — inputs keep layout for datepicker) ---
   `display: block !important` est INDISPENSABLE : après chaque recherche, HBook
   exécute `.hb-search-fields-and-submit.slideUp()` (booking-form.js), ce qui pose
   `display:none` sur le bloc contenant nos champs de dates. Un élément masqué
   renvoie alors `offset() = {top:0, left:0}`, et `reposition_datepick()` ouvrait
   le calendrier en haut à gauche de la page dès le 2e clic sur une date.
   On neutralise ce display:none — le bloc reste invisible via opacity/height. */
.cnme-hbook-etang-wrapper .cnme-hbook-styled .hb-search-fields-and-submit,
#cnme-search-hbook-zone .cnme-hbook-styled .hb-search-fields-and-submit {
	display: block !important;
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	z-index: -1 !important;
	width: 100% !important;
	height: 0 !important;
	overflow: visible !important;
}
.cnme-hbook-etang-wrapper .cnme-hbook-styled .hb-searched-summary,
.cnme-hbook-etang-wrapper .cnme-hbook-styled .hb-title-search-form,
.cnme-hbook-etang-wrapper .cnme-hbook-styled .hb-multi-accom-people-selection-wrapper,
#cnme-search-hbook-zone .cnme-hbook-styled .hb-searched-summary,
#cnme-search-hbook-zone .cnme-hbook-styled .hb-title-search-form,
#cnme-search-hbook-zone .cnme-hbook-styled .hb-multi-accom-people-selection-wrapper {
	display: none !important;
}

/* --- IMPORTANT — re-expose HBook's error messages even though we hide the
     search section. Without this, "no result" / "search error" stay invisible
     because they live INSIDE .hb-search-fields-and-submit (which is opacity:0). --- */
#cnme-search-hbook-zone .hb-search-fields-and-submit .hb-search-no-result,
#cnme-search-hbook-zone .hb-search-fields-and-submit .hb-search-error,
.cnme-hbook-etang-wrapper .hb-search-fields-and-submit .hb-search-no-result,
.cnme-hbook-etang-wrapper .hb-search-fields-and-submit .hb-search-error {
	position: relative !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	z-index: 10 !important;
	height: auto !important;
	margin: 20px 0 !important;
	padding: 14px 18px !important;
	background: #fff3cd !important;
	border: 1px solid #ffc107 !important;
	border-radius: 6px !important;
	color: #664d03 !important;
	font-size: 14px !important;
}
#cnme-search-hbook-zone .hb-search-fields-and-submit .hb-search-error,
.cnme-hbook-etang-wrapper .hb-search-fields-and-submit .hb-search-error {
	background: #f8d7da !important;
	border-color: #dc3545 !important;
	color: #842029 !important;
}

/* --- Form zone contains the absolutely-hidden search section --- */
.cnme-hbook-etang-wrapper .cnme-hbook-form-zone,
#cnme-search-hbook-zone .cnme-hbook-form-zone {
	position: relative;
}

/* --- Search HBook zone: hide booking tunnel until activated ---
   We use !important on both branches because HBook's JS (and certain
   themes) write inline display:none/block on these nodes during AJAX,
   which would otherwise win over our specificity. --- */
#cnme-search-hbook-zone .hb-accom-list,
#cnme-search-hbook-zone .hb-booking-details-form-wrapper,
#cnme-search-hbook-zone .hb-search-result-title-section {
	display: none !important;
}
#cnme-search-hbook-zone.cnme-hbook-active .hb-accom-list {
	display: block !important;
	margin-top: 20px;
}
#cnme-search-hbook-zone.cnme-hbook-active .hb-booking-details-form-wrapper,
#cnme-search-hbook-zone.cnme-hbook-active .hb-search-result-title-section {
	display: block !important;
}

/* --- Custom form spacing --- */
.cnme-hbook-custom-search {
	margin-bottom: 10px;
}

/* --- Generic hidden class --- */
.cnme-hbook-hidden {
	display: none !important;
}

/* ============================================
   Barre de progression de recherche
   ============================================ */
.cnme-search-progress {
	margin: 14px 0;
	text-align: center;
}
.cnme-search-progress-inner {
	height: 6px;
	border-radius: 3px;
	background: #e8e8e8;
	overflow: hidden;
	position: relative;
}
.cnme-search-progress-inner::after {
	content: '';
	position: absolute;
	top: 0;
	left: -40%;
	width: 40%;
	height: 100%;
	border-radius: 3px;
	background: var(--cnme-btn-bg, #d4a843);
	animation: cnme-progress-slide 1.2s ease-in-out infinite;
}
@keyframes cnme-progress-slide {
	0%   { left: -40%; }
	100% { left: 100%; }
}
.cnme-search-progress-label {
	margin: 8px 0 0;
	font-size: 13px;
	color: #666;
}

/* ============================================
   Fenêtre de réservation — fond coloré
   Délimite visuellement tout le tunnel (choix du poste → options / bateau →
   coordonnées) par rapport au fond blanc du site. Les cartes de postes restent
   blanches et ressortent donc sur ce fond.
   Appliqué aux DEUX points d'injection : formulaire d'accueil et page étang.
   ============================================ */
.cnme-hbook-form-zone .hb-accom-list,
.cnme-hbook-form-zone .hb-booking-details-form,
#cnme-search-hbook-zone .hb-accom-list,
#cnme-search-hbook-zone .hb-booking-details-form {
	background: var(--cnme-card-bg, #f0f7f0);
	border: 1px solid color-mix(in srgb, var(--cnme-primary, #2d4a2e) 25%, #fff);
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(45, 74, 46, 0.10);
}
/* Padding séparé : à 0 quand le tunnel est vide, pour ne pas afficher un bloc
   coloré fantôme avant la première recherche. */
.cnme-hbook-form-zone .hb-accom-list:not(:empty),
.cnme-hbook-form-zone .hb-booking-details-form,
#cnme-search-hbook-zone .hb-accom-list:not(:empty),
#cnme-search-hbook-zone .hb-booking-details-form {
	padding: 24px 28px;
	margin-top: 20px;
}
.cnme-hbook-form-zone .hb-accom-list:empty,
#cnme-search-hbook-zone .hb-accom-list:empty {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}
/* Le résumé et les cartes restent en blanc pour la lisibilité du détail prix. */
.cnme-hbook-form-zone .hb-summary-wrapper,
#cnme-search-hbook-zone .hb-summary-wrapper {
	background: #fff;
	border-radius: 12px;
	padding: 16px 18px;
}
.cnme-hbook-form-zone .hb-accom,
#cnme-search-hbook-zone .hb-accom {
	background: #fff;
	border-radius: 12px;
}

/* --- Bouton « Précédent » (retour au choix du poste) --- */
.cnme-btn-prev-step {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	margin: 0 0 18px;
	background: transparent;
	color: var(--cnme-primary, #2d4a2e);
	border: 2px solid var(--cnme-primary, #2d4a2e);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.cnme-btn-prev-step:hover {
	background: var(--cnme-primary, #2d4a2e);
	color: #fff;
}

/* --- Datepicker popup z-index --- */
.hb-datepick-popup-wrapper {
	z-index: 99999 !important;
}

/* --- Availability calendar spacing --- */
.cnme-avail-hbook {
	margin-top: 30px;
}

/* --- HBook results within our wrapper --- */
.cnme-hbook-etang-wrapper .hb-accom-list {
	margin-top: 20px;
}

/* Inline results below search form */
.cnme-inline-results {
	margin-top: 30px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
	.cnme-search-form {
		padding: 20px;
	}
	.cnme-search-fields {
		flex-direction: column;
		gap: 12px;
	}
	.cnme-field,
	.cnme-field-small,
	.cnme-field-submit {
		flex: 1 1 100%;
		min-width: 100%;
	}
	.cnme-btn-search {
		width: 100%;
		justify-content: center;
	}
	.cnme-results-grid {
		grid-template-columns: 1fr;
	}
	.cnme-result-actions {
		flex-direction: column;
	}
	.cnme-availability-wrapper {
		padding: 16px;
	}
	.cnme-avail-grid {
		grid-template-columns: 1fr;
	}
	.cnme-avail-header {
		flex-direction: column;
		align-items: flex-start;
	}
	.cnme-avail-period {
		min-width: auto;
	}
}

/* ============================================================
   Datepicker natif HBook — alignement sur le calendrier du module
   ------------------------------------------------------------
   Le popup datepick est injecté à la racine du document : il ne peut pas
   être scopé à nos zones, le style est donc volontairement global.
   Les couleurs de jours sont écrites en CSS dynamique par HBook
   (HbUtils::calendar_color_css_rules) — d'où les !important ciblés.
   ============================================================ */
.hb-datepick-popup-wrapper,
.hb-datepick-wrapper {
	background: #fff !important;
	border: 1px solid #e8e8e8;
	border-radius: 16px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.12);
	padding: 8px 12px 14px;
	font-family: inherit;
}

/* Bandeau « Choisissez une date d'arrivée » */
.hb-datepick-legend {
	border-bottom: 1px solid #e8e8e8 !important;
	color: var(--cnme-primary, #1a3a2a);
	font-size: 14px;
	font-weight: 600;
	padding: 6px 40px 10px 15px;
}

/* Titre du mois */
.hb-dp-month-header {
	color: var(--cnme-primary, #1a3a2a);
	font-size: 19px !important;
	font-weight: 700;
	line-height: 46px !important;
	text-transform: capitalize;
}

/* En-têtes de jours (LUN MAR …) */
.hb-dp-week-header div {
	color: #999 !important;
	font-size: 11px !important;
	font-weight: 600;
	letter-spacing: 0.5px;
}

/* Cases de jours */
.hb-dp-day {
	padding: 2px !important;
}
.hb-dp-day > a,
.hb-dp-day > span {
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	line-height: 30px;
	transition: transform 0.1s, background 0.15s;
}

/* Jour disponible — vert clair du module, chiffre vert foncé */
.hb-day-available,
.hb-day-available > a {
	background: #e8f5e9 !important;
	color: #2e7d32 !important;
	text-decoration: none;
}
.hb-day-available > a:hover {
	background: #c8e6c9 !important;
	transform: scale(1.06);
}

/* Jour complet */
.hb-day-fully-taken {
	background: #ffebee !important;
}
.hb-day-fully-taken,
.hb-day-fully-taken > span {
	color: #c62828 !important;
}

/* 1er / dernier jour d'un blocage HBook (hb-day-taken-start / -end) : HBook les
   classe par défaut avec .hb-day-available (fond vert plein) et ne signale la
   restriction que via un fin liseré diagonal (:before) — trop discret, on le
   remplace par le même dégradé diagonal que notre propre calendrier
   (occupied-split-open/close, cf. plus bas dans ce fichier) pour une lecture
   cohérente entre les deux calendriers. On neutralise l'ancien liseré HBook
   (:before), redondant avec le dégradé plein cellule. */
.hb-day-taken-start:before,
.hb-day-taken-end:before {
	content: none !important;
}
.hb-day-taken-start {
	/* 1er jour du blocage : veille encore libre (vert), aujourd'hui pris (rose) */
	background: linear-gradient(135deg, #e8f5e9 0%, #e8f5e9 50%, #ffebee 50%, #ffebee 100%) !important;
}
.hb-day-taken-start,
.hb-day-taken-start > span {
	color: #c62828 !important;
}
.hb-day-taken-end {
	/* dernier jour du blocage : encore pris hier (rose), aujourd'hui libéré (vert) */
	background: linear-gradient(135deg, #ffebee 0%, #ffebee 50%, #e8f5e9 50%, #e8f5e9 100%) !important;
}
.hb-day-taken-end,
.hb-day-taken-end > span {
	color: #2e7d32 !important;
}

/* HBook pose AUSSI .hb-dp-day-not-selectable sur les jours complets (pas
   seulement passés/fermés — cf. hb-datepick.js, la classe est générique et
   couvre les deux cas). Sa règle grise ci-dessous a la même spécificité
   qu'une classe seule + !important que les 3 règles ci-dessus : à égalité,
   c'est l'ordre dans le fichier qui tranche, donc le gris gagnait sur le
   rouge/dégradé pour un jour complet. Sélecteurs à 2 classes ci-dessous :
   spécificité plus élevée, gagnent quel que soit l'ordre dans le fichier. */
.hb-dp-day-not-selectable.hb-day-fully-taken {
	background: #ffebee !important;
	color: #c62828 !important;
}
.hb-dp-day-not-selectable.hb-day-taken-start {
	background: linear-gradient(135deg, #e8f5e9 0%, #e8f5e9 50%, #ffebee 50%, #ffebee 100%) !important;
	color: #c62828 !important;
}
.hb-dp-day-not-selectable.hb-day-taken-end {
	background: linear-gradient(135deg, #ffebee 0%, #ffebee 50%, #e8f5e9 50%, #e8f5e9 100%) !important;
	color: #2e7d32 !important;
}

/* Semaines « bateau amorceur interdit » (statuts cnme-hb-boat-*, propres au
   plugin — HBook n'a aucune notion de bateau, cf. merge_bateau_into_hbook_status()
   dans class-front.php). Le poste reste réservable (juste sans bateau), donc
   le chiffre reste vert comme un jour disponible — même logique que sur notre
   calendrier cn_etang_availability (v1.6.3). Ces jours ne reçoivent jamais
   .hb-dp-day-not-selectable (HBook ne connaît pas ces classes, `selectable`
   reste à son défaut `true`), donc pas de risque de collision de cascade ici. */
.cnme-hb-boat-forbidden {
	background: #ffe0b2 !important;
	color: #2e7d32 !important;
}
.cnme-hb-boat-split-open {
	/* ouverture : matinée libre (vert), check-in interdit (orange) */
	background: linear-gradient(135deg, #e8f5e9 0%, #e8f5e9 50%, #ffe0b2 50%, #ffe0b2 100%) !important;
	color: #2e7d32 !important;
}
.cnme-hb-boat-split-close {
	/* clôture : matinée interdite (orange), check-in libre (vert) */
	background: linear-gradient(135deg, #ffe0b2 0%, #ffe0b2 50%, #e8f5e9 50%, #e8f5e9 100%) !important;
	color: #2e7d32 !important;
}

/* Jour passé / non sélectionnable — gris discret */
.hb-dp-day-past,
.hb-dp-day-closed,
.hb-dp-day-not-selectable {
	background: #f5f5f5 !important;
	color: #bbb !important;
}

/* Arrivée / départ sélectionnés — vert foncé du module */
.hb-dp-day-check-in,
.hb-dp-day-check-out,
.hb-dp-day-check-in > a,
.hb-dp-day-check-out > a {
	background: var(--cnme-primary, #2d4a2e) !important;
	color: #fff !important;
	font-weight: 700;
}

/* Boutons de navigation — pastilles claires bordées, comme notre calendrier */
.hb-dp-cmd-wrapper a {
	background: #fff !important;
	border: 2px solid #d4e5d8 !important;
	border-radius: 10px !important;
	color: var(--cnme-primary, #2d5a3d) !important;
	font-size: 16px !important;
	height: 34px !important;
	line-height: 30px !important;
	width: 34px !important;
}
.hb-dp-cmd-wrapper a:hover {
	background: var(--cnme-primary, #2d5a3d) !important;
	border-color: var(--cnme-primary, #2d5a3d) !important;
	color: #fff !important;
}
.hb-dp-cmd-wrapper a.hb-dp-disabled {
	opacity: 0.4;
}

/* Séparateur entre les deux mois */
.hb-dp-multi .hb-dp-month:not(.first) {
	border-left-color: #e8efe8 !important;
}

/* Légende de couleurs injectée dans le popup (cnmeInsertDatepickLegend, front.js)
   — mêmes classes que la légende de cn_etang_availability, alignement sur le
   padding interne du popup HBook (cf. .hb-datepick-legend). */
.hb-datepick-popup-wrapper .cnme-avail-legend {
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 4px;
}

/* ============================================================
   Calendrier cliquable (option « Calendrier cliquable »)
   Styles appliqués uniquement quand le corps porte la classe
   cnme-cal-picker-on, posée par le JS lorsque l'option est active.
   ============================================================ */
.cnme-cal-picker-on .cnme-avail-day[data-date]:not(.cnme-avail-day-past):not(.cnme-avail-day-occupied):not(.cnme-avail-day-occupied-split-open):not(.cnme-avail-day-occupied-split-close) {
	cursor: pointer;
}
.cnme-cal-picker-on .cnme-avail-day[data-date]:not(.cnme-avail-day-past):not(.cnme-avail-day-occupied):not(.cnme-avail-day-occupied-split-open):not(.cnme-avail-day-occupied-split-close):hover {
	outline: 2px solid var(--cnme-primary, #2d4a2e);
	outline-offset: -2px;
}
/* Bornes de la plage retenue */
.cnme-avail-day.cnme-day-picked {
	background: var(--cnme-primary, #2d4a2e) !important;
	color: #fff !important;
	font-weight: 700;
}
/* Nuits comprises entre l'arrivée et le départ */
.cnme-avail-day.cnme-day-in-range {
	background: #c8e6c9 !important;
	color: #1b5e20 !important;
}

/* Bandeau d'aide au-dessus de la grille */
.cnme-avail-hint {
	margin: 0 0 12px;
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	background: #f0f7f0;
	color: var(--cnme-primary, #2d4a2e);
	border: 1px solid #d4e5d8;
}
.cnme-avail-hint[data-tone="error"] {
	background: #fdecea;
	color: #b3261e;
	border-color: #f5c2bd;
}
.cnme-avail-hint[data-tone="success"] {
	background: #e6f4ea;
	color: #1e6b34;
	border-color: #b6d7b6;
}