/* ==========================================================================
   Pages — accueil, rubrique, article, à propos
   ========================================================================== */

/* ==========================================================================
   Accueil
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */

.hsb-hero {
	position: relative;
	background-color: var(--hsb-bg-mint);
}

.hsb-hero__media {
	position: relative;
	height: var(--hsb-hero-height);
	overflow: hidden;
	background-color: var(--hsb-bg-mint);
}

/* Photo pleine largeur : pas de rayon */
.hsb-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Vagues turquoise superposées qui remontent sur la photo (forme organique n°1) */
.hsb-hero__waves {
	position: relative;
	margin-top: calc(-1 * var(--hsb-hero-wave-rise));
}

.hsb-hero__waves svg {
	display: block;
	width: 100%;
	height: 104px;
	fill: var(--hsb-turquoise);
}

.hsb-hero__panel {
	position: relative;
	margin-top: -1px;
	padding: 30px var(--hsb-gutter) 38px;
	background-color: var(--hsb-turquoise);
	text-align: center;
}

/* Pastille « Dernier article » à cheval sur les vagues */
.hsb-hero__badge {
	position: absolute;
	top: -28px;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 60px;
	height: 60px;
	padding: 7px;
	transform: translateX(-50%);
	border-radius: var(--hsb-radius-round);
	background-color: var(--hsb-yellow);
	color: var(--hsb-text-on-yellow);
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
}

.hsb-hero__title {
	max-width: 22ch;
	margin: 0 auto 10px;
	font-family: var(--hsb-font-sans);
	font-size: 34px;
	font-weight: 600;
	line-height: 1.2;
	color: #FFFFFF;
	text-wrap: pretty;
}

.hsb-hero__title a {
	color: inherit;
}

.hsb-hero__lead {
	max-width: 56ch;
	margin: 0 auto 20px;
	font-size: 15px;
	color: var(--hsb-green-deep);
}

.hsb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* --- Bandeau de présentation ---------------------------------------------- */

.hsb-intro {
	background-color: var(--hsb-bg-card);
	border-bottom: 1px solid var(--hsb-border);
}

.hsb-intro__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	padding-block: 22px;
}

.hsb-intro__name {
	margin: 0;
	font-family: var(--hsb-font-script);
	font-size: 24px;
	font-weight: 600;
}

.hsb-intro__text {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--hsb-text-muted);
}

.hsb-intro .hsb-link-arrow {
	margin-left: auto;
}

/* --- Rubriques mises en avant --------------------------------------------- */

.hsb-rubrics {
	background-color: var(--hsb-bg-section);
}

.hsb-rubrics__inner {
	padding-block: 56px 60px;
	text-align: center;
}

.hsb-rubrics__title {
	margin: 0 0 40px;
	font-size: 44px;
}

.hsb-rubrics__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--hsb-gap-featured);
}

.hsb-rubric-tile {
	display: block;
	color: var(--hsb-green-deep);
}

.hsb-rubric-tile:hover {
	color: var(--hsb-green-deep);
}

.hsb-rubric-tile__media {
	height: 210px;
	overflow: hidden;
	background-color: var(--hsb-rubric-color, var(--hsb-bg-mint));
}

.hsb-rubric-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hsb-rubric-tile__name {
	margin: 20px 0 8px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hsb-rubric-tile__text {
	max-width: 34ch;
	margin: 0 auto;
	font-size: 15px;
	color: var(--hsb-text-muted);
}

/* --- Sections de l'accueil ------------------------------------------------ */

.hsb-home-section {
	padding-block: 40px;
}

.hsb-home-section .hsb-pills {
	margin-bottom: 24px;
}

.hsb-home-section--picks {
	padding-block: 16px 40px;
}

.hsb-picks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	gap: var(--hsb-gap-cards);
}

.hsb-home-newsletter {
	padding-bottom: 40px;
}

/* ==========================================================================
   Rubrique (archive)
   ========================================================================== */

.hsb-archive-head {
	padding-block: 36px 28px;
}

.hsb-archive-head .hsb-breadcrumb {
	margin-bottom: 8px;
}

.hsb-archive-head__title {
	margin: 0 0 10px;
	font-size: 42px;
}

.hsb-archive-head__desc {
	max-width: 62ch;
	margin: 0 0 20px;
	font-size: 15.5px;
	color: var(--hsb-text-muted);
}

.hsb-archive-head__desc p {
	margin: 0;
}

.hsb-archive-head__count {
	margin: 18px 0 0;
	font-size: 12.5px;
	color: var(--hsb-text-muted);
}

.hsb-archive-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ==========================================================================
   Article
   ========================================================================== */

.hsb-article .hsb-breadcrumb {
	margin-top: 28px;
}

.hsb-article-head {
	max-width: 70ch;
	padding-block: 24px 28px;
}

.hsb-article-head .hsb-label {
	margin-bottom: 10px;
	letter-spacing: 0.12em;
}

.hsb-article-head__title {
	margin: 0 0 14px;
	font-size: 50px;
	line-height: 1.12;
	text-wrap: pretty;
}

.hsb-article-head__lead {
	margin: 0 0 18px;
	font-size: 17px;
	color: var(--hsb-text-muted);
}

.hsb-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--hsb-text-muted);
}

.hsb-byline__name {
	font-weight: 600;
	color: var(--hsb-green-deep);
}

/* Image à la une */
.hsb-article-figure {
	margin: 0 0 40px;
}

.hsb-article-figure__media {
	overflow: hidden;
	margin-bottom: 10px;
	border-radius: var(--hsb-radius-lg);
	background-color: var(--hsb-bg-mint);
}

.hsb-article-figure__media img {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
}

.hsb-article-figure figcaption {
	font-size: 12.5px;
	color: var(--hsb-text-muted);
}

/* --- Corps de l'article (sortie de the_content) --------------------------- */

.hsb-prose {
	max-width: var(--hsb-reading-width);
	font-size: var(--hsb-fs-article);
	line-height: var(--hsb-lh-article);
	color: var(--hsb-text);
}

.hsb-prose > :first-child {
	margin-top: 0;
}

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

/* Premier paragraphe : introduction */
.hsb-prose > p:first-child {
	font-size: 18px;
}

.hsb-prose h2 {
	margin: 36px 0 14px;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
	scroll-margin-top: var(--hsb-sticky-offset);
}

.hsb-prose h3 {
	margin: 28px 0 10px;
	font-size: 19px;
	scroll-margin-top: var(--hsb-sticky-offset);
}

.hsb-prose ul,
.hsb-prose ol {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 22px;
	padding-left: 22px;
}

.hsb-prose img {
	border-radius: var(--hsb-radius-lg);
}

.hsb-prose .alignfull img {
	border-radius: 0;
}

.hsb-prose figure {
	margin: 32px 0;
}

.hsb-prose figcaption,
.hsb-prose .wp-element-caption {
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--hsb-text-muted);
}

/* Citation */
.hsb-prose blockquote,
.hsb-prose .wp-block-quote {
	margin: 32px 0;
	padding: 20px 24px;
	background-color: var(--hsb-bg-mint);
	border: 0;
	border-left: 4px solid var(--hsb-turquoise);
	border-radius: var(--hsb-radius-md);
	font-size: 19px;
	font-style: normal;
	line-height: 1.5;
	color: var(--hsb-turquoise-dark);
}

.hsb-prose blockquote p:last-child {
	margin-bottom: 0;
}

.hsb-prose blockquote cite {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-style: normal;
	color: var(--hsb-text-muted);
}

/* Tableau */
.hsb-prose .wp-block-table {
	margin: 0 0 22px;
	overflow-x: auto;
}

.hsb-prose table {
	width: 100%;
	margin: 0 0 22px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background-color: var(--hsb-bg-card);
	border: 1px solid var(--hsb-border);
	border-radius: var(--hsb-radius-md);
	font-size: 14.5px;
	line-height: 1.6;
}

.hsb-prose .wp-block-table table {
	margin: 0;
}

.hsb-prose th,
.hsb-prose td {
	padding: 10px 14px;
	border: 0;
	text-align: left;
}

.hsb-prose thead th {
	background-color: var(--hsb-bg-mint);
	font-weight: 600;
	color: var(--hsb-turquoise-dark);
}

.hsb-prose tbody td,
.hsb-prose tbody th {
	border-top: 1px solid var(--hsb-border-soft);
}

.hsb-prose thead + tbody tr:first-child td {
	border-top: 0;
}

/* Encarts posés dans le corps */
.hsb-prose .hsb-affiliate {
	margin: 32px 0;
	line-height: var(--hsb-lh-ui);
}

.hsb-prose .hsb-affiliate p {
	margin: 0;
}

/* --- Fin d'article -------------------------------------------------------- */

.hsb-article-end {
	max-width: var(--hsb-reading-width);
	margin-top: 32px;
}

.hsb-related__title {
	margin: 36px 0 14px;
	font-size: 28px;
	font-weight: 600;
}

.hsb-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: 16px;
}

/* ==========================================================================
   À propos
   ========================================================================== */

.hsb-about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
	gap: 48px;
	align-items: start;
	padding-block: 44px 32px;
}

.hsb-about__text {
	max-width: 62ch;
}

.hsb-about .hsb-label {
	margin-bottom: 10px;
	letter-spacing: 0.12em;
}

.hsb-about__title {
	margin: 0 0 18px;
	font-size: 46px;
	line-height: 1.12;
}

.hsb-about__body p {
	margin: 0 0 18px;
	font-size: 16.5px;
	line-height: 1.8;
}

.hsb-about__body p:last-child {
	margin-bottom: 32px;
}

/* Paragraphes secondaires : bloc Paragraphe + classe « is-style-muted » */
.hsb-about__body .is-style-muted {
	color: var(--hsb-text-muted);
}

.hsb-about__body h2 {
	margin: 0 0 10px;
	font-size: 28px;
	font-weight: 600;
}

.hsb-about__body h2 + p {
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--hsb-text-muted);
}

.hsb-about__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hsb-about__side {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.hsb-about__portrait {
	overflow: hidden;
	border-radius: var(--hsb-radius-lg);
	background-color: var(--hsb-bg-mint);
}

.hsb-about__portrait img {
	display: block;
	width: 100%;
	height: 480px;
	object-fit: cover;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 960px) {
	.hsb-about {
		grid-template-columns: minmax(0, 1fr);
	}

	.hsb-article-head__title {
		font-size: 42px;
	}
}

@media (max-width: 600px) {
	.hsb-hero__media {
		height: 300px;
	}

	.hsb-hero__waves svg {
		height: 64px;
	}

	.hsb-hero__waves {
		margin-top: -56px;
	}

	.hsb-hero__title {
		font-size: 28px;
	}

	.hsb-intro .hsb-link-arrow {
		margin-left: 0;
	}

	.hsb-rubrics__title {
		font-size: 34px;
	}

	.hsb-article-head__title,
	.hsb-about__title {
		font-size: 38px;
	}

	.hsb-article-figure__media img {
		height: 260px;
	}

	.hsb-about__portrait img {
		height: 360px;
	}
}