/*
Theme Name: Isle de coeur
Theme URI: https://www.isledecoeur.fr/
Author: Nils Aellen
Description: Thème bloc pour la maison de vacances L'Isle de coeur, sans Elementor. Couleurs de Provence, police Fraunces embarquée, carrousel et animations d'apparition maison, aucune dépendance externe.
Version: 1.1.1
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: MIT
Text Domain: isledecoeur
*/

/* Ce que theme.json ne sait pas exprimer. Les couleurs passent toujours par
   les variables du preset : la palette de l'éditeur de site reste la source. */

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5rem; /* ancres sous l'en-tête collant */
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

:where(a, button, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 3px;
}

/* ---------- En-tête collant ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }

@media (max-width: 600px) {
	body.admin-bar .site-header { top: 0; }
	.site-header .wp-block-buttons { display: none; }
}

.site-header .wp-block-navigation-item__content { padding-block: 0.35em; position: relative; }
.site-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 200ms ease;
}
.site-header .wp-block-navigation-item__content:hover::after,
.site-header .current-menu-item > .wp-block-navigation-item__content::after,
.site-header .current-menu-ancestor > .wp-block-navigation-item__content::after { transform: scaleX(1); }

/* Sous-menus (liens vers d'autres pages groupés sous une entrée) : une carte comme
   le reste du site. Au-dessus de 600px seulement ; en dessous, le menu plein écran
   du mobile les affiche dépliés, sans carte. */
@media (min-width: 600px) {
	.site-header .wp-block-navigation__submenu-container {
		min-width: 14rem !important;
		padding: 0.4rem !important;
		border: 0 !important;
		border-radius: 12px;
		background: var(--wp--preset--color--white) !important;
		box-shadow: var(--wp--preset--shadow--soft);
	}
	.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.55em 0.8em !important;
		border-radius: 8px;
	}
	.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background: var(--wp--preset--color--surface);
	}
	.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { content: none; }
}
.site-header .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/* Logo (assets/logo.svg, vectorisé depuis brand/logo-isle-de-coeur-nb.jpg) à la place
   du nom du site. Le texte du bloc Titre du site reste dans la page, masqué, pour les
   lecteurs d'écran et les moteurs de recherche ; le changer dans WordPress ne change
   donc pas l'image. */
.site-header .wp-block-site-title a {
	display: block;
	height: var(--isledecoeur-logo-h);
	aspect-ratio: 1826 / 977;
	background: url(assets/logo.svg) left center / contain no-repeat;
	color: transparent;
	white-space: nowrap;
	overflow: hidden;
	text-indent: 110%;
}

/* Hauteur du logo (≈ 94 px : texte du logo à la même taille qu'avant les vagues) et
   de l'en-tête qui en découle : logo + marges de parts/header.html (0,5rem × 2) +
   bordure. La bannière de une s'en sert pour tenir pile dans l'écran. */
:root {
	--isledecoeur-logo-h: 5.9rem;
	--isledecoeur-header-h: calc(var(--isledecoeur-logo-h) + 1rem + 1px);
}
@media (max-width: 600px) {
	:root { --isledecoeur-logo-h: 4.3rem; }
}

/* Sections pleine largeur empilées : pas de liseré de fond entre elles */
.wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }

/* ---------- Bannière de une (Cover) ---------- */

.hero-kicker {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Bannière avec flèche : exactement la hauteur d'écran restante sous l'en-tête collant
   (et sous la barre d'admin quand on est connecté), pour que la flèche reste visible
   en bas de l'écran quelle que soit la taille du logo. Prime sur la hauteur minimale
   réglée dans le bloc (88vh). */
.wp-block-cover:has(.hero-scroll) {
	min-height: calc(100vh - var(--isledecoeur-header-h) - var(--wp-admin--admin-bar--height, 0px)) !important;
	min-height: calc(100svh - var(--isledecoeur-header-h) - var(--wp-admin--admin-bar--height, 0px)) !important;
}

/* La flèche se cale en bas de la couverture, pas du bloc de texte : le conteneur
   intérieur (position: relative dans le cœur) cesse d'être son repère, et ses autres
   enfants passent eux-mêmes au-dessus du voile sombre. */
.wp-block-cover:has(.hero-scroll) > .wp-block-cover__inner-container { position: static; }
.wp-block-cover:has(.hero-scroll) > .wp-block-cover__inner-container > * { position: relative; z-index: 1; }

.wp-block-cover .wp-block-cover__inner-container > .hero-scroll {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 1.5rem;
	translate: -50% 0;
	margin: 0;
	opacity: 0.85;
	animation: hero-bob 2.4s ease-in-out infinite;
}
.wp-block-cover .hero-scroll a { color: inherit; text-decoration: none; font-size: 1.6rem; }

@keyframes hero-bob {
	50% { translate: -50% 6px; }
}

/* ---------- Styles de bloc maison ---------- */

/* Liste « Coches » */
ul.is-style-checklist { list-style: none; padding-left: 0; }
ul.is-style-checklist li {
	position: relative;
	padding-left: 1.9em;
	margin-block: 0.45em;
}
ul.is-style-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.25em;
	height: 1.25em;
	border-radius: 50%;
	background: var(--wp--preset--color--olive)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3.2 3L15 7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
		center / 80% no-repeat;
}

/* Séparateur « Court » : un trait terre cuite centré */
/* Aligné à gauche dans un flux normal (colonne, groupe) ; « aligncenter » pour le centrer. */
.wp-block-separator.is-style-short {
	width: 4rem;
	border: 0;
	border-top: 3px solid var(--wp--preset--color--accent) !important;
	opacity: 1;
	margin-left: 0;
}
.wp-block-separator.is-style-short.aligncenter { margin-inline: auto; }

/* Média et texte : photos au même format quelle que soit leur orientation (sauf si
   l'option « Remplir » du bloc est cochée), arrondies comme les blocs Image. */
.wp-block-media-text:not(.is-image-fill-element) > .wp-block-media-text__media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
}

/* Groupe « Carte » */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--white);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--soft);
	height: 100%;
}

/* Image « Arche » : haut arrondi comme une fenêtre provençale */
.wp-block-image.is-style-arch img {
	border-radius: 999px 999px 12px 12px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Icône ronde au-dessus des cartes d'atouts */
.feature-icon {
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	font-size: 1.5rem;
	line-height: 1;
	margin: 0;
}

/* ---------- Carrousel (Galerie ou Groupe, style « Carrousel ») ---------- */

.carousel { position: relative; }

.wp-block-gallery.is-style-carousel,
.wp-block-group.is-style-carousel {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 0.75rem;
	/* overflow-y explicite : sinon il vaut auto et le carrousel capte la molette verticale */
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* de la place pour l'ombre des cartes, que overflow rognerait */
	padding-block: 0.5rem 2rem;
	margin-block-end: -1.5rem;
}
.is-style-carousel::-webkit-scrollbar { display: none; }

.is-style-carousel > * {
	flex: 0 0 calc((100% - 2 * 0.75rem) / 3) !important;
	width: auto !important;
	margin: 0 !important;
	scroll-snap-align: start;
}
@media (max-width: 900px) {
	.is-style-carousel > * { flex-basis: calc((100% - 0.75rem) / 2) !important; }
}
@media (max-width: 600px) {
	.is-style-carousel > * { flex-basis: 85% !important; }
}

.wp-block-gallery.is-style-carousel .wp-block-image img {
	width: 100%;
	height: 100% !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.carousel-nav {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--white) 92%, transparent);
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--soft);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}
.carousel-nav:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--white); }
.carousel-nav svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.carousel-nav--prev { left: 0.75rem; }
.carousel-nav--next { right: 0.75rem; }

/* Cartes (avis) : flèches hors du contenu quand la place le permet */
@media (min-width: 1320px) {
	.carousel:has(> .wp-block-group.is-style-carousel) .carousel-nav--prev { left: -3.75rem; }
	.carousel:has(> .wp-block-group.is-style-carousel) .carousel-nav--next { right: -3.75rem; }
}

/* ---------- Avis ---------- */

.review-card { display: flex; flex-direction: column; }
.review-card .review-stars { color: #c98a1b; letter-spacing: 0.12em; margin: 0; }
.review-card blockquote { margin: 0; flex: 1; display: flex; flex-direction: column; }
.review-card blockquote cite { margin-top: auto; padding-top: 0.75rem; } /* signatures alignées en bas des cartes */

/* Dans un carrousel, les cartes prennent la hauteur de la plus haute : le height: 100%
   du style « Carte » (utile en grille) empêcherait cet étirement. */
.is-style-carousel > .is-style-card { height: auto; }

/* Avis longs coupés à 7 lignes ; carousel.js ajoute « Lire la suite » s'il y a
   débordement. Le texte complet reste dans la page (lecteurs d'écran, moteurs). */
.review-card .review-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	line-clamp: 7;
	overflow: hidden;
}
.review-card.is-expanded .review-text {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: none;
}
.review-more {
	align-self: flex-start;
	margin-top: 0.25rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--blue);
	text-decoration: underline;
	cursor: pointer;
}
.review-more:hover { color: var(--wp--preset--color--accent); }

/* ---------- Apparition au défilement ---------- */

.has-reveal :is(.reveal-up, .reveal-left, .reveal-right, .reveal-zoom) {
	opacity: 0;
	transition: opacity 700ms ease, translate 700ms cubic-bezier(.2,.7,.2,1), scale 700ms cubic-bezier(.2,.7,.2,1);
}
.has-reveal .reveal-up { translate: 0 2.5rem; }
.has-reveal .reveal-left { translate: -3rem 0; }
.has-reveal .reveal-right { translate: 3rem 0; }
.has-reveal .reveal-zoom { scale: 0.94; }
.has-reveal :is(.reveal-up, .reveal-left, .reveal-right, .reveal-zoom).is-revealed {
	opacity: 1;
	translate: 0 0;
	scale: 1;
}

/* Colonnes animées : chaque colonne arrive un peu après la précédente */
.has-reveal .wp-block-column:nth-child(2):is(.reveal-up, .reveal-left, .reveal-right, .reveal-zoom) { transition-delay: 120ms; }
.has-reveal .wp-block-column:nth-child(3):is(.reveal-up, .reveal-left, .reveal-right, .reveal-zoom) { transition-delay: 240ms; }
.has-reveal .wp-block-column:nth-child(4):is(.reveal-up, .reveal-left, .reveal-right, .reveal-zoom) { transition-delay: 360ms; }

/* ---------- Calendrier (plugin maison wp-calendar) : aux couleurs du thème ---------- */

.wp-calendar-wrap {
	--wpc-bg: var(--wp--preset--color--white);
	--wpc-fg: var(--wp--preset--color--contrast);
	--wpc-muted: var(--wp--preset--color--muted);
	--wpc-border: var(--wp--preset--color--surface);
	--wpc-available-bg: var(--wp--preset--color--olive);
	--wpc-available-fg: var(--wp--preset--color--white);
	--wpc-booked-bg: #d9cfc1;
	--wpc-booked-fg: #8a7f73;
	--wpc-past-bg: var(--wp--preset--color--base);
	--wpc-past-fg: #c4bab0;
	--wpc-today-outline: var(--wp--preset--color--accent);
	--wpc-radius: 10px;
	font-family: inherit;
}
.wp-calendar-month-title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; }

/* ---------- Formulaires (Contact Form 7…) ---------- */

:where(.wp-site-blocks) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], textarea, select) {
	width: 100%;
	padding: 0.7em 0.9em;
	font: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--white);
	border: 1px solid #d9cfc1;
	border-radius: 8px;
}
:where(.wp-site-blocks) :is(input, textarea, select):focus {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 1px;
	border-color: transparent;
}
:where(.wp-site-blocks) input[type="submit"] {
	padding: 0.8em 1.6em;
	font: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

/* ---------- Pied de page et section sombre ---------- */

.footer-brand {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.footer-brand::before {
	content: "";
	flex: none;
	height: 4.8rem;
	aspect-ratio: 1826 / 977;
	background: url(assets/logo-light.svg) left center / contain no-repeat;
}

.has-night-background-color a:where(:not(.wp-element-button)) { color: inherit; }
.has-night-background-color a:where(:not(.wp-element-button)):hover { color: #f0b89c; }

.platform-logos img { max-height: 2.5rem; width: auto; }

.map-embed iframe {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
	border-radius: 14px;
}