/*
 * Blog Voyage Ultime — contenu Gutenberg (articles et pages)
 * En-tête de page, colonne de lecture, typographie, encart résumé, sommaire,
 * compositions du thème (étapes, duo photo).
 */

/* ─── En-tête : fil d'Ariane et titre ─────────────────────────────────────── */
.bvu-entry-head {
	max-width: 860px;
	margin-inline: auto;
	padding: 50px var(--bvu-pad) 34px;
	text-align: center;
}
.bvu-entry-head .bvu-crumbs { margin-bottom: 20px; }

.bvu-entry-title {
	margin: 0;
	font: 300 46px/1.16 var(--bvu-title);
}

/* ─── Photo d'en-tête ─────────────────────────────────────────────────────── */
.bvu-cover {
	position: relative;
	/* Maquette : height 470px + padding 16px en content-box = 502px de haut. */
	height: 502px;
	margin: 0;
	overflow: hidden;
	background: var(--bvu-placeholder);
}
.bvu-cover img { width: 100%; height: 100%; object-fit: cover; }

.bvu-cover__caption {
	position: absolute;
	left: 16px;
	bottom: 16px;
	max-width: calc(100% - 32px);
	padding: 7px 12px;
	background: var(--bvu-bg);
	font: 400 11px/1.4 var(--bvu-title);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bvu-grey-2);
}

/* ─── Colonne de lecture ──────────────────────────────────────────────────── */
.bvu-content {
	max-width: 760px;
	margin-inline: auto;
	padding: 48px var(--bvu-pad) 0;
}
.bvu-page .bvu-content { padding-bottom: 76px; }

.bvu-prose { font: 400 var(--bvu-prose-size, 17px)/1.8 var(--bvu-text); color: var(--bvu-ink); }
.bvu-prose > :first-child { margin-top: 0; }
/* Le dernier bloc (souvent une galerie) n'ajoute pas sa marge à l'espacement
   de la section qui suit (« À lire ensuite » : 72px, comme la maquette). */
.bvu-prose > :last-child { margin-bottom: 0; }

.bvu-prose p { margin: 0 0 22px; }

.bvu-lead,
.bvu-prose .is-style-bvu-lead {
	margin: 0 0 24px;
	font-size: calc(var(--bvu-prose-size, 17px) + 2px);
	line-height: 1.75;
	color: var(--bvu-grey-1);
}

.bvu-prose h2 {
	margin: 44px 0 22px;
	font: 300 32px/1.2 var(--bvu-title);
	scroll-margin-top: 24px;
}
.bvu-prose h3 { margin: 34px 0 12px; font: 400 22px/1.35 var(--bvu-title); }
.bvu-prose h4 {
	margin: 30px 0 10px;
	font: 400 12px/1.4 var(--bvu-title);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bvu-accent);
}

.bvu-prose a:not(.bvu-btn):not(.bvu-link) {
	color: var(--bvu-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.bvu-prose a:not(.bvu-btn):not(.bvu-link):hover { color: var(--bvu-ink); }

.bvu-prose ul, .bvu-prose ol { margin: 0 0 22px; padding-left: 1.25em; }
.bvu-prose li { margin-bottom: 6px; }
.bvu-prose li::marker { color: var(--bvu-accent); }

.bvu-prose strong { font-weight: 700; }

.bvu-prose blockquote {
	margin: 36px 0;
	padding-left: 26px;
	border-left: 1px solid var(--bvu-accent);
	font: 300 24px/1.45 var(--bvu-title);
	color: var(--bvu-ink);
}
.bvu-prose blockquote p { margin-bottom: 12px; }
.bvu-prose blockquote cite {
	display: block;
	font: 400 11px/1.4 var(--bvu-title);
	font-style: normal;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bvu-grey-4);
}

.bvu-prose hr { margin: 44px 0; border: 0; border-top: 1px solid var(--bvu-line); }

.bvu-prose table { width: 100%; margin: 0 0 28px; border-collapse: collapse; font-size: 15px; }
.bvu-prose th, .bvu-prose td { padding: 12px 10px; border-bottom: 1px solid var(--bvu-line); text-align: left; }
.bvu-prose th { font: 400 11px/1.4 var(--bvu-title); letter-spacing: .16em; text-transform: uppercase; color: var(--bvu-grey-4); }

/* ─── Images et légendes ──────────────────────────────────────────────────── */
.bvu-prose figure { margin: 40px 0; }
.bvu-prose figure img { width: 100%; height: auto; }

.bvu-prose figcaption,
.bvu-prose .wp-element-caption {
	margin-top: 12px;
	font: 400 13px/1.6 var(--bvu-text);
	color: var(--bvu-grey-3);
	text-align: left;
}

/* Largeur large : 900px comme la paire de photos de la maquette. */
.bvu-prose .alignwide {
	width: min(900px, calc(100vw - 2 * var(--bvu-pad)));
	max-width: none;
	margin-inline: calc(50% - min(900px, calc(100vw - 2 * var(--bvu-pad))) / 2);
}
.bvu-prose .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.bvu-prose .alignleft { float: left; margin: 6px 28px 16px 0; max-width: 50%; }
.bvu-prose .alignright { float: right; margin: 6px 0 16px 28px; max-width: 50%; }
.bvu-prose .aligncenter { margin-inline: auto; }

/* Galeries : légendes sous les photos (et non en surimpression comme par défaut).
   L'écart passe par la variable de WordPress : il s'en sert pour calculer la
   largeur de chaque photo. Changer seulement `gap` ferait déborder la rangée
   et empilerait les photos. */
.bvu-prose .wp-block-gallery.has-nested-images {
	--wp--style--unstable-gallery-gap: 20px;
	gap: 20px;
	margin-top: 48px;
}
.bvu-prose .wp-block-gallery.has-nested-images figure.wp-block-image { flex-direction: column; justify-content: flex-start; }
.bvu-prose .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	flex: none;
	width: 100%;
	max-height: none;
	margin: 12px 0 0;
	padding: 0;
	background: none;
	overflow: visible;
	font: 400 13px/1.6 var(--bvu-text);
	color: var(--bvu-grey-3);
	text-align: left;
	text-shadow: none;
}
.bvu-prose .wp-block-gallery.has-nested-images figure.wp-block-image::before { display: none; }
.bvu-prose .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img { height: 300px; flex: none; }

/* ─── Encart résumé (« Infos pratiques ») ─────────────────────────────────── */
.bvu-resume {
	/* 40px au-dessus comme dans la maquette (se combine avec la marge du paragraphe). */
	margin: 40px 0 44px;
	padding: 34px 36px;
	background: var(--bvu-sand);
}
.bvu-resume .bvu-label { margin: 0 0 20px; letter-spacing: .2em; }
.bvu-resume ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font: 400 16px/1.6 var(--bvu-text);
}
.bvu-resume li { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--bvu-line); }
.bvu-resume li:first-child { padding-top: 0; }
.bvu-resume li:last-child { padding-bottom: 0; border-bottom: 0; }
.bvu-resume li::marker { content: none; }

/* ─── Sommaire ────────────────────────────────────────────────────────────── */
.bvu-toc {
	margin: 0 0 40px;
	padding: 24px 0;
	border-top: 1px solid var(--bvu-line);
	border-bottom: 1px solid var(--bvu-line);
}
.bvu-toc .bvu-label { margin: 0 0 16px; letter-spacing: .2em; }
.bvu-toc ol {
	margin: 0;
	padding-left: 1.4em;
	font: 400 16px/1.5 var(--bvu-title);
}
.bvu-toc li { margin-bottom: 8px; padding-left: 4px; }
.bvu-toc li:last-child { margin-bottom: 0; }
.bvu-toc li::marker { font-size: 13px; color: var(--bvu-accent); }
.bvu-prose .bvu-toc a { color: var(--bvu-ink); text-decoration: none; }
.bvu-prose .bvu-toc a:hover { color: var(--bvu-accent); }

/* ─── Composition « Étapes jour par jour » ────────────────────────────────── */
.bvu-prose .bvu-steps { margin: 0 0 32px; }
.bvu-prose .bvu-step { margin: 0; padding: 18px 0; border-top: 1px solid var(--bvu-line); }
.bvu-prose .bvu-step:last-child { border-bottom: 1px solid var(--bvu-line); }
.bvu-prose .bvu-step .bvu-label { margin: 0 0 8px; letter-spacing: .18em; }
.bvu-prose .bvu-step__title { margin: 0 0 4px; font: 400 20px/1.35 var(--bvu-title); }
.bvu-prose .bvu-step__text { margin: 0; font: 400 16px/1.7 var(--bvu-text); color: var(--bvu-grey-2); }

/* ─── Pagination d'article, commentaires ──────────────────────────────────── */
.bvu-page-links { margin: 32px 0; font: 400 12px/1 var(--bvu-title); letter-spacing: .16em; text-transform: uppercase; }

.bvu-comments { padding-bottom: 76px; border-top: 1px solid var(--bvu-line); font: 400 16px/1.7 var(--bvu-text); }

.bvu-comments__title { margin: 48px 0 24px; font: 300 28px/1.2 var(--bvu-title); }

.bvu-comments .comment-list,
.bvu-comments .comment-list .children { list-style: none; margin: 0; padding: 0; }
.bvu-comments .comment-list .children { padding-left: 28px; }
.bvu-comments .comment-body { padding: 20px 0; border-bottom: 1px solid var(--bvu-line); }
.bvu-comments .comment-author { display: flex; align-items: center; gap: 12px; }
.bvu-comments .comment-author .avatar { border-radius: 50%; }
.bvu-comments .comment-author .fn { font: 400 16px/1.3 var(--bvu-title); font-style: normal; }
.bvu-comments .comment-author .says { display: none; }
.bvu-comments .comment-metadata,
.bvu-comments .reply {
	margin-top: 6px;
	font: 400 11px/1.4 var(--bvu-title);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bvu-grey-4);
}
.bvu-comments .comment-content p { margin: 12px 0 0; }

.bvu-comments .comment-form p { margin: 0 0 16px; }
.bvu-comments .comment-form label {
	display: block;
	margin-bottom: 6px;
	font: 400 11px/1.4 var(--bvu-title);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bvu-grey-2);
}
.bvu-comments .comment-form-cookies-consent label { display: inline; text-transform: none; letter-spacing: 0; font: inherit; font-size: 14px; }
.bvu-comments textarea,
.bvu-comments input[type="text"],
.bvu-comments input[type="email"],
.bvu-comments input[type="url"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--bvu-rule);
	background: #fff;
	color: var(--bvu-ink);
	font: 400 16px/1.5 var(--bvu-text);
}
.bvu-comments .bvu-btn { background: none; color: var(--bvu-ink); cursor: pointer; }
.bvu-comments .bvu-btn:hover { background: var(--bvu-ink); color: var(--bvu-bg); }

/* ─── Pleine largeur ──────────────────────────────────────────────────────── */
.bvu-prose--wide { padding-block: 48px 76px; }

/* ─── Écrans ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.bvu-entry-head { padding-top: 34px; padding-bottom: 26px; }
	.bvu-entry-title { font-size: clamp(30px, 8.4vw, 46px); }
	.bvu-cover { height: auto; aspect-ratio: 4 / 3; }
	.bvu-content { padding-top: 34px; }
	.bvu-prose { font-size: var(--bvu-prose-size, 17px); }
	.bvu-lead, .bvu-prose .is-style-bvu-lead { font-size: calc(var(--bvu-prose-size, 17px) + 1px); }
	.bvu-prose h2 { font-size: 27px; margin-top: 36px; }
	.bvu-resume { padding: 26px 22px; }
	.bvu-prose .alignleft, .bvu-prose .alignright { float: none; max-width: 100%; margin: 28px 0; }
	.bvu-prose .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img { height: 220px; }
}