/* ============================================================
   Pépinière — Ajustements typographiques globaux.
   Surcharge la base h1/h2/h3 (line-height: 1) trop serrée
   de pepiniere-source.css. Augmentation modérée pour éviter le
   rendu "écrasé" sur les titres multi-lignes.
   ============================================================ */

h1, h2, h3, h4, .headline {
	line-height: 1.1;
}

.cta-band h2,
.final-cta h2 {
	line-height: 1.05;
}

.page-hero h1 {
	line-height: 1.05;
}

/* Petits h3 dans cards : laissés à 1.1 (un seul ligne, OK). */
.reas-item h3,
.entry-card h3,
.bento .b-card h3,
.prod h3,
.prod-body h3 {
	line-height: 1.1;
}

/* ============================================================
   Hero pages internes — design "letterpress + bark"
   - Fond brun identique au header (cohérence colorimétrique)
   - Démarcation embossée subtile (highlight + ombre intérieure)
   - Motif "bark" (grain de bois vertical) en overlay
   - Pas d'image (cohérence inter-pages)
   ============================================================ */
.page-hero {
	position: relative;
	background: var(--primary-container);
	overflow: hidden;
	box-shadow:
		inset 0  1px 0 rgba(245, 232, 205, 0.08),
		inset 0 -1px 0 rgba(0, 0, 0, 0.10),
		inset 0 14px 22px -16px rgba(0, 0, 0, 0.32);
}

/* Trait sombre horizontal de démarcation header/hero (1px, 12% noir) */
.page-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(0, 0, 0, 0.12);
	z-index: 1;
}

/* Motif "bark" — grain de bois vertical wavy en overlay.
   SVG inline (poids quasi nul), beige crème 18% sur brun.
   Cohérent avec .ph-bark::before déjà utilisé dans le design system. */
.page-hero::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='240' viewBox='0 0 80 240'%3E%3Cg fill='none' stroke='%23f5e8cd' stroke-width='1' opacity='0.18'%3E%3Cpath d='M8 0 Q12 60 8 120 T8 240'/%3E%3Cpath d='M22 0 Q18 50 24 100 Q20 170 22 240' opacity='0.7'/%3E%3Cpath d='M38 0 Q42 80 36 140 T38 240' opacity='0.6'/%3E%3Cpath d='M54 0 Q50 70 56 130 T54 240' opacity='0.8'/%3E%3Cpath d='M68 0 Q72 60 66 120 Q70 190 68 240' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 80px 240px;
	pointer-events: none;
	z-index: 0;
}

/* Contenu au-dessus du motif et du trait de démarcation */
.page-hero .wrap {
	position: relative;
	z-index: 2;
}

/* Mobile / tablette étroite : h1 + breadcrumbs centrés.
   Petite barre accent horizontale au-dessus du titre (signature accent). */
@media (max-width: 700px) {
	.page-hero .wrap {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.page-hero .crumbs {
		text-align: center;
		justify-content: center;
	}
	.page-hero h1 {
		text-align: center;
		position: relative;
		padding-top: 1rem;
	}
	.page-hero h1::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 48px;
		height: 3px;
		background: var(--accent);
		box-shadow: 0 0 12px rgba(226, 0, 121, 0.4);
	}
	.page-hero .lede {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ============================================================
   Contact map : iframe Google Maps stylé comme la map-card
   ============================================================ */
body.page-slug-contact .map-card iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	filter: saturate(0.85) contrast(1.05);
}
body.page-slug-contact .map-card .label {
	z-index: 5;
}
@media (max-width: 900px) {
	body.page-slug-contact .map-card {
		height: 320px;
	}
}
@media (max-width: 600px) {
	body.page-slug-contact .map-card {
		height: 280px;
	}
	body.page-slug-contact .map-card .label {
		bottom: 1rem;
		left: 1rem;
		padding: 0.75rem 1rem;
	}
	body.page-slug-contact .map-card .label strong {
		font-size: 0.85rem;
	}
	body.page-slug-contact .map-card .label span {
		font-size: 0.75rem;
	}
}

/* ============================================================
   Fix home entry-cards sur mobile : aspect-ratio 16/10 trop court
   pour contenir le texte (h2 + p + lien) à largeur réduite.
   Solution : aspect-ratio auto + min-height + padding réduit.
   ============================================================ */
@media (max-width: 700px) {
	.entry-card {
		aspect-ratio: auto;
		min-height: 360px;
	}
	.entry-card .overlay {
		padding: 2rem 1.5rem;
	}
	.entry-card h2 {
		font-size: 1.75rem;
		margin-bottom: 0.75rem;
	}
	.entry-card p {
		font-size: 0.95rem;
		margin-bottom: 1rem;
	}
}
@media (max-width: 450px) {
	.entry-card {
		min-height: 340px;
	}
	.entry-card .overlay {
		padding: 1.75rem 1.25rem;
	}
}