/* Kalao Séjour — styles complémentaires.
   Toutes les couleurs viennent de la palette theme.json : rebrander = changer la palette. */

:root {
	--k-chaux: var(--wp--preset--color--chaux);
	--k-blanc: var(--wp--preset--color--blanc);
	--k-lagune: var(--wp--preset--color--lagune);
	--k-palme: var(--wp--preset--color--palme);
	--k-eau: var(--wp--preset--color--eau);
	--k-mangue: var(--wp--preset--color--mangue);
	--k-nuit: var(--wp--preset--color--nuit);
	--k-encre: var(--wp--preset--color--encre);
	--k-mono: var(--wp--preset--font-family--mono);
	--k-titre: var(--wp--preset--font-family--titre);
	--k-trait: color-mix(in srgb, var(--k-lagune) 14%, transparent);
	--k-rayon: 6px;
	--k-section: clamp(4rem, 9vw, 7.5rem);
}

html { scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--k-palme);
	outline-offset: 3px;
}

/* Le contenu de la page s'enchaîne sans marge entre sections pleine largeur */
.wp-site-blocks > * { margin-block-start: 0; }
.kalao-main { padding: 0 !important; }
.kalao-main > .wp-block-post-content > .alignfull { margin-block: 0; }
.kalao-main > .wp-block-post-content > :first-child { margin-block-start: 0; }

/* ---------- étiquettes et en-têtes de section ---------- */

.kalao-etiquette {
	font-family: var(--k-mono);
	font-size: var(--wp--preset--font-size--etiquette);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--k-palme);
	margin: 0 0 1rem;
}
.kalao-etiquette::before {
	content: "";
	display: inline-block;
	width: 1.75rem;
	height: 1px;
	background: currentColor;
	vertical-align: middle;
	margin-right: 0.65rem;
}
.kalao-tete { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.kalao-tete > * { max-width: 44rem; }
.kalao-tete > .wp-block-heading { margin: 0; }
.kalao-chapo { font-size: var(--wp--preset--font-size--grand); line-height: 1.5; margin-top: 1rem; color: color-mix(in srgb, var(--k-encre) 82%, transparent); }

.kalao-section { padding-block: var(--k-section) !important; }

/* ---------- en-tête du site ---------- */

.kalao-entete {
	position: sticky;
	top: 0;
	z-index: 50;
	gap: 1.5rem;
	padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
	background: color-mix(in srgb, var(--k-chaux) 92%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--k-trait);
}
.admin-bar .kalao-entete { top: 32px; }
.kalao-entete__nom { margin: 0; font-family: var(--k-titre); font-size: 1.3rem; line-height: 1.1; }
.kalao-entete__nom a { color: var(--k-lagune); text-decoration: none; }
.kalao-entete__nav { margin-left: auto; font-size: var(--wp--preset--font-size--petit); font-weight: 500; }
.kalao-entete__nav a { color: var(--k-encre); text-decoration: none; }
.kalao-entete__nav a:hover { color: var(--k-palme); }
.kalao-entete__action .wp-block-button__link { padding: 0.6rem 1.15rem; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--k-chaux) !important; color: var(--k-lagune) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-family: var(--k-titre); font-size: 1.75rem; }
@media (max-width: 781px) {
	.kalao-entete .kalao-entete__action { display: none; }
	.kalao-entete__nom { font-size: 1.1rem; }
}

/* ---------- ouverture : le titre posé sur la ligne d'eau ---------- */

.kalao-hero { position: relative; background: var(--k-lagune); color: var(--k-blanc); padding: 0 !important; overflow: hidden; }
.kalao-hero > * { margin-block: 0; }
.kalao-hero__photo { position: relative; margin: 0 !important; }
.kalao-hero__photo img { display: block; width: 100%; height: min(60vh, 700px); min-height: 360px; object-fit: cover; }
.kalao-hero__photo::after {
	/* la rive : la photo se fond dans l'eau */
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 38%;
	background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--k-lagune) 88%, transparent));
	pointer-events: none;
}
.kalao-hero__eau { position: relative; padding: 0 clamp(1rem, 4vw, 2.5rem) clamp(2.5rem, 6vw, 4.5rem) !important; }
.kalao-hero__titre {
	color: var(--k-blanc) !important;
	margin-top: -0.62em !important;   /* la première ligne chevauche la photo */
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem) !important;
	text-wrap: balance;
	text-shadow: 0 2px 24px color-mix(in srgb, var(--k-nuit) 35%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
	.kalao-hero__titre { animation: kalao-monte 0.9s cubic-bezier(.2,.7,.2,1) both; }
	@keyframes kalao-monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
.kalao-hero__bas { gap: 1.5rem 3rem; align-items: flex-end; }
.kalao-hero__texte { max-width: 34rem; margin: 0; font-size: var(--wp--preset--font-size--grand); line-height: 1.5; color: color-mix(in srgb, var(--k-eau) 92%, var(--k-blanc)); }
.kalao-hero__boutons { margin: 0; }
.kalao-hero .is-style-outline .wp-block-button__link { color: var(--k-blanc); border: 1.5px solid color-mix(in srgb, var(--k-blanc) 70%, transparent); background: transparent; }
.kalao-hero .is-style-outline .wp-block-button__link:hover { background: var(--k-blanc); color: var(--k-lagune); }
.kalao-hero__reperes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2.25rem;
	margin-block: clamp(2rem, 5vw, 3.5rem) 0 !important;
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, var(--k-blanc) 20%, transparent);
	font-family: var(--k-mono);
	font-size: var(--wp--preset--font-size--etiquette);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--k-blanc) 72%, transparent);
}

/* ---------- présentation ---------- */

.kalao-intro__colonnes { gap: clamp(2rem, 6vw, 5rem) !important; align-items: center; }
.kalao-intro__colonnes > .wp-block-column > .wp-block-heading { margin-top: 0; }
.kalao-intro__photo { margin: 0; }
.kalao-intro__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--k-rayon); }
.kalao-atouts {
	list-style: none;
	padding: 0;
	margin: 2rem 0 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 2rem;
}
.kalao-atouts li { padding: 0.7rem 0; border-top: 1px solid var(--k-trait); font-weight: 500; color: var(--k-lagune); }
.kalao-atouts li::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--k-mangue); margin-right: 0.7rem; vertical-align: 0.12em; }

/* ---------- bandeau panoramique : l'horizon ---------- */

.kalao-horizon { margin-block: 0 !important; background: var(--k-chaux); }
.kalao-horizon img { display: block; width: 100%; aspect-ratio: 5 / 1; object-fit: cover; object-position: 50% 62%; }
.kalao-horizon figcaption {
	margin: 0;
	padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--k-palme);
	max-width: 1240px;
	margin-inline: auto;
}
.kalao-horizon.kalao-cadrage-haut img { object-position: 50% 25%; }
.kalao-horizon.kalao-cadrage-milieu img { object-position: 50% 50%; }
.kalao-horizon.kalao-cadrage-bas img { object-position: 50% 80%; }
@media (max-width: 700px) { .kalao-horizon img { aspect-ratio: 2.4 / 1; } }

/* ---------- hébergements ---------- */

.kalao-hebergements { background: var(--k-blanc); }
.kalao-cartes { gap: clamp(1rem, 2.5vw, 1.75rem) !important; }
.kalao-carte {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--k-chaux);
	border-radius: var(--k-rayon);
	overflow: hidden;
}
.kalao-carte > * { margin-block: 0 !important; padding-inline: 1.4rem; }
.kalao-carte > .kalao-carte__photo { padding: 0; }
.kalao-carte__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kalao-carte > h3 { margin-top: 1.25rem !important; }
.kalao-carte__meta {
	margin-top: 0.5rem !important;
	font-family: var(--k-mono);
	font-size: var(--wp--preset--font-size--etiquette);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--k-palme);
}
.kalao-carte > p:not(.kalao-carte__meta) { margin-top: 0.75rem !important; font-size: var(--wp--preset--font-size--petit); }
.kalao-carte__action { margin-top: auto !important; padding-block: 1.25rem 1.4rem; }
.kalao-carte__action .wp-block-button__link,
.kalao-acces .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--k-lagune);
	border: 1.5px solid var(--k-lagune);
}
.kalao-carte__action .wp-block-button__link:hover,
.kalao-acces .is-style-outline .wp-block-button__link:hover { background: var(--k-lagune); color: var(--k-blanc); }

/* ---------- sur place ---------- */

.kalao-lieux { gap: clamp(1.25rem, 3vw, 2rem) !important; }
.kalao-lieu > * { margin-block: 0; }
.kalao-lieu__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--k-rayon); }
.kalao-lieu h3 { margin-top: 1rem !important; font-size: 1.375rem; }
.kalao-lieu p { margin-top: 0.4rem !important; font-size: var(--wp--preset--font-size--petit); color: color-mix(in srgb, var(--k-encre) 82%, transparent); }

/* ---------- avis ---------- */

.kalao-avis { background: var(--k-lagune); color: var(--k-eau); }
.kalao-avis .wp-block-heading { color: var(--k-blanc); }
.kalao-avis .kalao-etiquette { color: var(--k-mangue); }
.kalao-avis .kalao-chapo { color: var(--k-eau); }
.kalao-avis a { color: var(--k-blanc); }
.kalao-avis__resume { margin-top: 1.25rem; }
.kalao-avis__grille { gap: 1.25rem !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)) !important; }
.kalao-avis__carte {
	margin: 0;
	padding: 1.5rem 1.5rem 1.35rem;
	border: 0;
	border-radius: var(--k-rayon);
	background: color-mix(in srgb, var(--k-blanc) 7%, transparent);
	display: flex;
	flex-direction: column;
}
.kalao-avis__carte p { margin: 0; color: var(--k-blanc); line-height: 1.55; }
.kalao-avis__carte .kalao-avis__note { margin-bottom: 0.85rem; }
.kalao-avis__carte cite {
	margin-top: auto;
	padding-top: 1.1rem;
	font-style: normal;
	font-family: var(--k-mono);
	font-size: var(--wp--preset--font-size--etiquette);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--k-eau) 80%, transparent);
}
@media (max-width: 700px) {
	/* sur mobile, les avis défilent à l'horizontale */
	.kalao-avis__grille { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.75rem; margin-right: calc(-1 * clamp(1rem, 4vw, 2.5rem)); }
	.kalao-avis__carte { flex: 0 0 84%; scroll-snap-align: start; }
}
.kalao-etoiles { color: var(--k-mangue); letter-spacing: 0.12em; }
.kalao-etoiles__vide { opacity: 0.3; }

/* ---------- réservation ---------- */

.kalao-reservation { background: var(--k-eau); }
.kalao-resa__colonnes { gap: clamp(2rem, 5vw, 4.5rem) !important; }
.kalao-resa__colonnes > .wp-block-column > .wp-block-heading { margin-top: 0; }
.kalao-points { list-style: none; padding: 0; margin: 1.75rem 0 0; }
.kalao-points li { padding: 0.55rem 0; border-top: 1px solid var(--k-trait); color: var(--k-lagune); font-weight: 500; }

.kalao-resa-boite { container-type: inline-size; }
.kalao-resa {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 1.5rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--k-blanc);
	border-radius: 10px;
	box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--k-lagune) 45%, transparent);
}
.kalao-resa__form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 0.9rem; align-content: start; }
.kalao-resa__champ { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.kalao-resa__champ--large { grid-column: 1 / -1; }
.kalao-resa__champ label { font-size: var(--wp--preset--font-size--petit); font-weight: 600; color: var(--k-lagune); }
.kalao-resa__champ label span { font-weight: 400; opacity: 0.7; }
.kalao-resa input, .kalao-resa select, .kalao-resa textarea {
	font: inherit;
	font-size: 1rem;
	color: var(--k-encre);
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.8rem;
	border: 1px solid color-mix(in srgb, var(--k-lagune) 22%, transparent);
	border-radius: var(--k-rayon);
	background: var(--k-chaux);
	min-height: 2.9rem;
	min-width: 0;
}
.kalao-resa textarea { resize: vertical; min-height: 4.5rem; }
.kalao-resa__erreur { grid-column: 1 / -1; margin: 0; color: #A3361B; font-size: var(--wp--preset--font-size--petit); font-weight: 600; }
.kalao-resa__apercu { display: flex; flex-direction: column; gap: 0.85rem; background: color-mix(in srgb, var(--k-eau) 55%, var(--k-blanc)); border-radius: 8px; padding: 1.1rem; }
.kalao-resa__etiquette { margin: 0; font-family: var(--k-mono); font-size: var(--wp--preset--font-size--etiquette); text-transform: uppercase; letter-spacing: 0.1em; color: var(--k-palme); }
.kalao-resa__bulle {
	margin: 0;
	padding: 0.85rem 1rem;
	background: #DCF8C6;
	color: #111B21;
	border-radius: 12px 12px 3px 12px;
	white-space: pre-wrap;
	font-size: 0.9375rem;
	line-height: 1.5;
	min-height: 9rem;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
	align-self: stretch;
}
.kalao-resa__envoyer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.95rem 1.25rem;
	border-radius: 999px;
	background: #1E9E52;
	color: #fff !important;
	font-weight: 600;
	text-decoration: none;
}
.kalao-resa__envoyer:hover { background: #157A3E; }
.kalao-resa__envoyer[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.kalao-resa__envoyer svg, .kalao-barre svg, .kalao-pied__wa svg { width: 1.2rem; height: 1.2rem; flex: none; }
.kalao-resa__note { margin: 0; font-size: 0.8125rem; color: color-mix(in srgb, var(--k-encre) 75%, transparent); }
@container (max-width: 760px) { .kalao-resa { grid-template-columns: 1fr; } .kalao-resa__bulle { min-height: 6rem; } }
@container (max-width: 300px) { .kalao-resa__form { grid-template-columns: 1fr; } }

/* ---------- questions ---------- */

.kalao-faq__liste { max-width: 50rem; }
.kalao-faq .wp-block-details { border-top: 1px solid var(--k-trait); padding: 1.1rem 0; margin: 0; }
.kalao-faq .wp-block-details:last-child { border-bottom: 1px solid var(--k-trait); }
.kalao-faq summary { font-family: var(--k-titre); font-size: 1.3rem; color: var(--k-lagune); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.kalao-faq summary::-webkit-details-marker { display: none; }
.kalao-faq summary::after { content: "+"; font-family: var(--k-mono); color: var(--k-palme); }
.kalao-faq details[open] summary::after { content: "–"; }
.kalao-faq details p { margin: 0.75rem 0 0; max-width: 42rem; }

/* ---------- accès ---------- */

.kalao-acces { background: var(--k-blanc); }
.kalao-acces__colonnes { gap: clamp(2rem, 5vw, 4rem) !important; align-items: center; }
.kalao-acces__colonnes > .wp-block-column > .wp-block-heading { margin-top: 0; }
.kalao-acces__adresse { font-family: var(--k-mono); font-size: var(--wp--preset--font-size--petit); color: var(--k-palme); }
.kalao-carte-map { border-radius: var(--k-rayon); overflow: hidden; background: var(--k-eau); }
.kalao-carte-map iframe { display: block; width: 100%; height: clamp(300px, 45vw, 440px); border: 0; filter: saturate(0.85); }

/* ---------- pied de page ---------- */

.kalao-pied { background: var(--k-nuit); color: color-mix(in srgb, var(--k-blanc) 75%, transparent); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem !important; font-size: var(--wp--preset--font-size--petit); }
.kalao-pied a { color: var(--k-blanc); }
.kalao-pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.kalao-pied__grille p { margin: 0 0 0.45rem; }
.kalao-pied__nom { font-family: var(--k-titre); font-size: 1.6rem; color: var(--k-blanc); margin-bottom: 0.75rem !important; }
.kalao-pied__titre { font-family: var(--k-mono); font-size: var(--wp--preset--font-size--etiquette); text-transform: uppercase; letter-spacing: 0.12em; color: var(--k-mangue); margin-bottom: 0.75rem !important; }
.kalao-pied__wa { display: inline-flex; align-items: center; gap: 0.45rem; }
.kalao-pied__bas { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--k-blanc) 12%, transparent); font-size: 0.8125rem; }
@media (max-width: 760px) { .kalao-pied__grille { grid-template-columns: 1fr; } }

/* ---------- barre d'action mobile ---------- */

.kalao-barre { display: none; }
@media (max-width: 781px) {
	.kalao-barre {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 60;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 0.5rem;
		padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
		background: color-mix(in srgb, var(--k-nuit) 96%, transparent);
	}
	.kalao-barre a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.45rem;
		padding: 0.75rem;
		border-radius: 999px;
		color: var(--k-blanc);
		border: 1px solid color-mix(in srgb, var(--k-blanc) 30%, transparent);
		text-decoration: none;
		font-weight: 600;
	}
	.kalao-barre .kalao-barre__wa { background: #1E9E52; border-color: #1E9E52; }
	body { padding-bottom: 4.5rem; }
}

/* ---------- mode démo ---------- */

.kalao-demo {
	background: var(--k-nuit);
	color: var(--k-eau);
	font-family: var(--k-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	padding: 0.5rem 1rem;
}

/* ---------- pages simples ---------- */

.kalao-page { padding-block: clamp(3rem, 7vw, 6rem) !important; }

/* ---------- mobile ---------- */

@media (max-width: 781px) {
	.wp-block-columns.kalao-intro__colonnes,
	.wp-block-columns.kalao-resa__colonnes,
	.wp-block-columns.kalao-acces__colonnes { gap: 2rem !important; }
	.kalao-hero__photo img { height: 46svh; min-height: 300px; }
	.kalao-hero__titre { margin-top: -0.58em !important; }
	.kalao-atouts { grid-template-columns: 1fr; }
}