/*
 * Blog Voyage Ultime — accueil (front-page.php uniquement)
 */

/* ─── Vignettes « Découvrir » ─────────────────────────────────────────────── */
.bvu-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	padding-top: 30px;
}

.bvu-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* Maquette : height 440px + padding 26px en content-box = 492px de haut. */
	height: 492px;
	padding: 26px;
	overflow: hidden;
	background: var(--bvu-placeholder);
	isolation: isolate;
}
.bvu-tile:hover { color: inherit; }

.bvu-tile__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
.bvu-tile:hover .bvu-tile__img { transform: scale(1.03); }

/* Sur une vraie photo, le texte foncé de la maquette doit rester lisible :
   voile blanc chaud en bas de vignette, qui disparaît vers le haut. */
.bvu-tile::after {
	content: "";
	position: absolute;
	inset: 45% 0 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(252, 252, 251, .94) 0%, rgba(252, 252, 251, .78) 45%, rgba(252, 252, 251, 0) 100%);
}
@supports (color: color-mix(in srgb, red, blue)) {
	.bvu-tile::after { background: linear-gradient(to top, color-mix(in srgb, var(--bvu-bg) 94%, transparent) 0%, color-mix(in srgb, var(--bvu-bg) 78%, transparent) 45%, color-mix(in srgb, var(--bvu-bg) 0%, transparent) 100%); }
}

.bvu-tile__body { display: flex; flex-direction: column; }

.bvu-tile__title { font: 400 22px/1.3 var(--bvu-title); }

.bvu-tile__more {
	align-self: flex-start;
	margin-top: 14px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--bvu-accent);
	font: 400 11px/1 var(--bvu-title);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bvu-accent);
}

/* ─── Derniers articles ───────────────────────────────────────────────────── */
.bvu-latest .bvu-section-head { padding-top: 72px; }
.bvu-latest .bvu-grid { padding-top: 46px; }
.bvu-latest__cta { margin: 0; padding: 48px 0 76px; }

/* ─── Carnet photo ────────────────────────────────────────────────────────── */
.bvu-photos { background: var(--bvu-sand); padding-block: 76px; }
.bvu-photos .bvu-section-head { margin-bottom: 52px; }

.bvu-photos__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 66px 58px;
	max-width: 880px;
	margin-inline: auto;
}

/* Grille décalée : la colonne de droite descend de 80px. */
.bvu-photos__item { margin: 0; }
.bvu-photos__item:nth-child(even) { padding-top: 80px; }

.bvu-photos__item img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	background: var(--bvu-placeholder);
}

.bvu-photos__item figcaption {
	margin-top: 14px;
	font: 400 13px/1.6 var(--bvu-text);
	color: var(--bvu-grey-3);
}

.bvu-photos__cta { margin: 66px 0 0; }

/* ─── Qui suis-je ─────────────────────────────────────────────────────────── */
.bvu-about {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 56px;
	align-items: center;
	padding-block: 76px;
}
.bvu-about--no-image { grid-template-columns: minmax(0, 1fr); }

.bvu-about__media { height: 300px; background: var(--bvu-placeholder); }
.bvu-about__media img { width: 100%; height: 100%; object-fit: cover; }

.bvu-about__body .bvu-label { margin-bottom: 16px; font-size: 12px; letter-spacing: .24em; }

.bvu-about__title { margin: 0 0 18px; font: 300 34px/1.2 var(--bvu-title); }

.bvu-about__body p:not(.bvu-label) {
	max-width: 62ch;
	margin: 0 0 16px;
	font: 400 16px/1.7 var(--bvu-text);
	color: var(--bvu-grey-2);
}
.bvu-about__body p:not(.bvu-label):last-of-type { margin-bottom: 22px; }

/* ─── Écrans ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.bvu-tiles { grid-template-columns: 1fr; gap: 16px; }
	.bvu-tile { height: 360px; }
}

@media (max-width: 760px) {
	.bvu-photos { padding-block: 56px; }
	.bvu-photos__grid { grid-template-columns: 1fr; gap: 36px; }
	.bvu-photos__item:nth-child(even) { padding-top: 0; }
	.bvu-photos__item img { height: auto; aspect-ratio: 411 / 380; }
	.bvu-photos__cta { margin-top: 44px; }

	.bvu-about { grid-template-columns: 1fr; gap: 28px; padding-block: 56px; }
	.bvu-about__media { width: 220px; height: 220px; }
}

@media (max-width: 640px) {
	.bvu-tiles { padding-top: 20px; }
	.bvu-tile { height: 320px; padding: 22px; }
	.bvu-latest .bvu-section-head { padding-top: 56px; }
	.bvu-latest .bvu-grid { padding-top: 34px; }
	.bvu-latest__cta { padding: 40px 0 56px; }
	.bvu-about__title { font-size: 28px; }
}