/**
 * Ollie Child — La Levée de la Loire
 * CSS isolé : ce qui ne passe pas par theme.json ou par un bloc natif.
 * Chaque bloc est commenté en français avec sa justification.
 */


/* ──────────────────────────────────────────────────────────────────────────
 * Hero — pas de margin-top
 * ────────────────────────────────────────────────────────────────────────── */
.wp-block-post-content > .wp-block-cover:first-child,
.wp-block-post-content > .wp-block-group:first-child,
main.site-content > .wp-block-post-content > .wp-block-cover:first-child,
main.site-content > .wp-block-post-content > .wp-block-group:first-child {
	margin-top: 0;
}


/* ──────────────────────────────────────────────────────────────────────────
 * Icônes Lucide dans des chips vert pâle (cards Pourquoi exposer)
 * ────────────────────────────────────────────────────────────────────────── */
.levee-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background-color: var(--wp--preset--color--primary-accent);
	color: var(--wp--preset--color--primary);
}

.levee-icon svg {
	width: 28px;
	height: 28px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* ──────────────────────────────────────────────────────────────────────────
 * Cards avec ombre douce (Stagez style)
 * ────────────────────────────────────────────────────────────────────────── */
.levee-card-shadow {
	box-shadow:
		0 1px 2px rgba(20, 17, 31, 0.04),
		0 4px 16px rgba(20, 17, 31, 0.06);
	transition: box-shadow 220ms ease-out, transform 220ms ease-out;
}

.levee-card-shadow:hover {
	box-shadow:
		0 2px 4px rgba(20, 17, 31, 0.06),
		0 12px 28px rgba(20, 17, 31, 0.1);
	transform: translateY(-2px);
}


/* ──────────────────────────────────────────────────────────────────────────
 * Logos partenaires : taille uniforme + une seule ligne
 * ──────────────────────────────────────────────────────────────────────────
 * Le N&B est désormais géré nativement via le duotone Ollie
 * (var:preset|duotone|grayscale) appliqué dans le JSON de chaque image.
 */
.levee-partner-logo,
.levee-partner-logo img {
	max-height: 56px;
	width: auto;
	max-width: 100%;
}

.row-logos {
	flex-wrap: nowrap !important;
}

@media (max-width: 781px) {
	.row-logos {
		flex-wrap: wrap !important;
	}
}


/* ──────────────────────────────────────────────────────────────────────────
 * Images de cards avec aspect-ratio
 * ────────────────────────────────────────────────────────────────────────── */
.levee-card-img-4-3 img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.levee-card-img-3-2 img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Affiches : portrait 3:4, on garde "contain" pour ne pas couper le visuel */
.levee-card-img-3-4 img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.levee-img-rounded img {
	width: 100%;
	height: auto;
	border-radius: 1rem;
}


/* ──────────────────────────────────────────────────────────────────────────
 * Cards Vignerons / Éditions / Actualités — image clippée par la card
 * ────────────────────────────────────────────────────────────────────────── */
.levee-card-clip {
	overflow: hidden;
}


/* ──────────────────────────────────────────────────────────────────────────
 * Bloc CTA inscription — countdown (4 chips ambre, aligné en bas-gauche)
 * ────────────────────────────────────────────────────────────────────────── */
.levee-countdown {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.6rem;
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
}

.levee-countdown__unit {
	background-color: var(--wp--preset--color--primary-alt);
	color: var(--wp--preset--color--base);
	border-radius: 0.75rem;
	padding: 0.85rem 0.35rem;
	text-align: center;
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
	min-width: 0;
}

.levee-countdown__value {
	display: block;
	font-family: 'Sora', system-ui, sans-serif;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.levee-countdown__label {
	display: block;
	margin-top: 0.3rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.92;
}

.levee-countdown.is-expired .levee-countdown__unit {
	background-color: var(--wp--preset--color--main-accent);
	opacity: 0.65;
}

@media (max-width: 640px) {
	.levee-countdown {
		gap: 0.4rem;
		max-width: 320px;
	}
	.levee-countdown__unit {
		padding: 0.65rem 0.25rem;
	}
	.levee-countdown__value {
		font-size: 1.25rem;
	}
}


/* ──────────────────────────────────────────────────────────────────────────
 * CTA card — image avec tous les coins arrondis, dans un padding intérieur
 * ──────────────────────────────────────────────────────────────────────────
 * L'image cover du CTA n'est PAS collée aux bords de la card : la wp:column
 * gauche a un padding intérieur qui isole l'image, qui peut alors avoir un
 * border-radius sur ses 4 coins (effet « card dans card »).
 */
.levee-cta-card {
	overflow: visible;
}

.levee-cta-card > .wp-block-column {
	overflow: visible;
}

.levee-cta-card .wp-block-cover {
	border-radius: 1rem;
	overflow: hidden;
}


/* ──────────────────────────────────────────────────────────────────────────
 * CTA card — chevauchement avec le footer (effet Stagez)
 * ──────────────────────────────────────────────────────────────────────────
 * La CARD elle-même a un margin-bottom négatif pour dépasser visuellement
 * de la section blanche, et chevaucher le footer sombre. La section a
 * padding-bottom: 0 pour que la card soit collée au bas de la section.
 * Le footer template-part reçoit son padding-top augmenté directement dans
 * son markup (parts/footer.html) — plus robuste qu'un selecteur :has().
 */
/* Force overflow visible sur les wrappers parents pour permettre à la card
   CTA de sortir visuellement du wp:cover et chevaucher le footer. */
body:has(.levee-cta-overlap-section) .wp-site-blocks,
body:has(.levee-cta-overlap-section) main.site-content,
body:has(.levee-cta-overlap-section) main.wp-block-group.site-content,
body:has(.levee-cta-overlap-section) .wp-block-post-content,
.levee-cta-overlap-section,
.levee-cta-overlap-section .wp-block-cover__inner-container {
	overflow: visible !important;
}

/* Le wp:cover wrapper (avec sa texture papier) n'a PAS de padding-bottom :
   il finit à la position de la card. Pas de margin négatif sur lui. */
.levee-cta-overlap-section {
	padding-top: var(--wp--preset--spacing--medium) !important;
	padding-bottom: 0 !important;
	position: relative;
	z-index: 1;
}

/* La card CTA se déplace VISUELLEMENT vers le bas via transform translateY,
   ce qui la fait sortir de la zone du wp:cover (qui garde sa hauteur de
   flow inchangée) et chevaucher le footer noir.
   - Le wp:cover wrapper avec texture papier finit à card_position_initiale.
   - La card visuelle descend de 140px vers le footer.
   - z-index élevé pour passer devant le footer. */
.levee-cta-overlap-section .levee-cta-card {
	transform: translateY(320px);
	position: relative;
	z-index: 5;
}

/* Le footer absorbe via son padding-top (déjà 350px dans le markup),
   donc son contenu commence bien sous la card chevauchante. */

@media (max-width: 781px) {
	.levee-cta-overlap-section .levee-cta-card {
		transform: translateY(180px);
	}
}


/* ──────────────────────────────────────────────────────────────────────────
 * Liste check : couleur du marqueur en vert AB
 * ────────────────────────────────────────────────────────────────────────── */
.is-style-list-check li::before,
.wp-block-list.is-style-list-check li::before {
	color: var(--wp--preset--color--primary);
}


/* ──────────────────────────────────────────────────────────────────────────
 * Style "Glass" — effet glassmorphism
 * ──────────────────────────────────────────────────────────────────────────
 * Enregistré comme block-style WP via functions.php pour : core/group,
 * core/cover, core/column, core/columns, core/button. Application via la
 * toolbar de bloc : Styles → Glass.
 *
 * Combine :
 *  - fond semi-transparent (blanc translucide)
 *  - backdrop-filter blur (l'arrière-plan derrière est flouté → effet verre)
 *  - bordure subtile 1px blanc translucide pour le bord du verre
 *  - shadow douce pour le détacher du fond
 *
 * Variante "is-style-glass-dark" : version sombre pour fond clair (à
 * activer en ajoutant la classe manuellement).
 */
.is-style-glass {
	background-color: rgba(255, 255, 255, 0.55) !important;
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.45) !important;
	box-shadow:
		0 8px 32px rgba(20, 17, 31, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Variante sombre du glass — fond noir translucide, à utiliser sur image claire */
.is-style-glass-dark {
	background-color: rgba(26, 26, 26, 0.45) !important;
	color: var(--wp--preset--color--base);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Application spécifique au bouton : on remplace le fond plein par du verre,
   et on s'assure que le radius pill et le padding restent intacts. */
.wp-block-button.is-style-glass .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.55) !important;
	color: var(--wp--preset--color--main);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow:
		0 8px 32px rgba(20, 17, 31, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.6);
	transition: background-color 200ms ease-out, border-color 200ms ease-out;
}

.wp-block-button.is-style-glass .wp-block-button__link:hover,
.wp-block-button.is-style-glass .wp-block-button__link:focus {
	background-color: rgba(255, 255, 255, 0.75) !important;
	border-color: rgba(255, 255, 255, 0.7);
}

/* Glass dark sur bouton — sur fond image clair */
.wp-block-button.is-style-glass-dark .wp-block-button__link {
	background-color: rgba(26, 26, 26, 0.45) !important;
	color: var(--wp--preset--color--base);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

.wp-block-button.is-style-glass-dark .wp-block-button__link:hover,
.wp-block-button.is-style-glass-dark .wp-block-button__link:focus {
	background-color: rgba(26, 26, 26, 0.65) !important;
}


/* ──────────────────────────────────────────────────────────────────────────
 * Sous-menus du header — ombre douce + coins arrondis
 * ──────────────────────────────────────────────────────────────────────────
 * Par défaut WP applique une bordure 1px noire aux sous-menus du bloc
 * Navigation, peu esthétique. On la retire et on remplace par une ombre
 * douce, un border-radius, un padding interne, et un hover discret sur
 * les items pour le feedback.
 *
 * Note : à étendre quand certains items passeront en méga menu (largeur
 * pleine, plusieurs colonnes) — il faudra alors un sélecteur dédié.
 */
header.site-header .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	border: 0 !important;
	border-radius: 0.5rem;
	box-shadow:
		0 8px 28px rgba(20, 17, 31, 0.12),
		0 2px 6px rgba(20, 17, 31, 0.04);
	padding: 0.3rem 0.6rem !important;
	margin-top: 0.5rem;
	min-width: 220px;
}

/* Pont de hover invisible entre l'item parent et le sous-menu, pour que
   la souris puisse traverser le gap (margin-top) sans fermer le menu. */
header.site-header .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -0.5rem;
	left: 0;
	right: 0;
	height: 0.5rem;
	background: transparent;
}

header.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.25rem;
	border-radius: 0.35rem;
	transition: background-color 160ms ease-out, color 160ms ease-out;
}

header.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
header.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background-color: var(--wp--preset--color--primary-accent);
	color: var(--wp--preset--color--primary-dark);
}


/* ──────────────────────────────────────────────────────────────────────────
 * Hero — badge pill avec bordure (ferré à gauche, style Stagez)
 * ──────────────────────────────────────────────────────────────────────────
 * Pill aligné à gauche, bordure blanche semi-transparente.
 */
.levee-hero-badge {
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 9999px;
	padding: 0.55em 1.3em !important;
	width: fit-content;
	margin-left: 0 !important;
	margin-right: 0 !important;
}


/* ──────────────────────────────────────────────────────────────────────────
 * Footer — formulaire newsletter (pill avec input + bouton)
 * ──────────────────────────────────────────────────────────────────────────
 * Reproduit le formulaire Stagez : input email à gauche, bouton "Envoyer"
 * noir pill à droite, le tout dans un container blanc pill.
 * Non fonctionnel par défaut — à brancher sur un plugin newsletter
 * (MC4WP, Brevo Forms, etc.) via override de l'action ou JS.
 */
.levee-newsletter-form {
	display: flex;
	align-items: center;
	background-color: var(--wp--preset--color--base);
	border-radius: 9999px;
	padding: 0.3rem 0.3rem 0.3rem 0.4rem;
	max-width: 380px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.levee-newsletter-form__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0.4rem 0.8rem;
	color: var(--wp--preset--color--main);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.9rem;
	outline: none;
}

.levee-newsletter-form__input::placeholder {
	color: var(--wp--preset--color--secondary);
}

.levee-newsletter-form__button {
	background-color: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 9999px;
	padding: 0.7em 1.5em;
	cursor: pointer;
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	transition: background-color 180ms ease-out;
	flex-shrink: 0;
}

.levee-newsletter-form__button:hover,
.levee-newsletter-form__button:focus {
	background-color: var(--wp--preset--color--primary);
}