/*
 * L'accueil — maquette 1 (desktop et mobile). Balisage : inc/accueil.php.
 * Tuiles d'univers : pel-univers-tile, css/catalogue.css ; faits de la maison
 * et réalisations : css/evenement.css ; sélecteur de dates : css/dates.css ;
 * bandeau : css/elements.css.
 *
 * Valeurs de la maquette ramenées à l'échelle : titre 58 → titre de page,
 * textes 13,5-18 → 14 et 17, cartes 22 → 24, grilles 24.
 * Surtitre en encre douce, pas en bronze (4,45:1 sur sable).
 */

/* --- Le héros ----------------------------------------------------------------- */
.pel-accueil__surtitre {
	margin: 0 0 var(--pel-space-s);
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	font-weight: 600;
	letter-spacing: var(--pel-capitales);
	text-transform: uppercase;
}

.pel-accueil__titre {
	max-width: calc(var(--pel-container) * 0.7);
	margin: 0 0 var(--pel-space-s);
	font-size: var(--pel-fs-display);
	line-height: var(--pel-lh-titre);
}

.pel-accueil__accroche,
.pel-accueil__intro {
	max-width: calc(var(--pel-container) * 0.55);
	margin: 0 0 var(--pel-space-m);
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

.pel-accueil__note {
	margin: var(--pel-space-s) 0 0;
	color: var(--pel-gris-chaud);
	font-size: var(--pel-fs-small);
}

/* --- Les listes de la page ---------------------------------------------------- */
.pel-accueil__publics,
.pel-accueil__univers,
.pel-accueil__realisations {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pel-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- pel-public-card ---------------------------------------------------------- */
.pel-public-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pel-space-xs);
	height: 100%;
	box-sizing: border-box;
	padding: var(--pel-space-m);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-blanc);
	box-shadow: var(--pel-shadow-s);
}

/* --featured : le parcours par défaut. Le bord porte l'accent, pas la couleur seule : le bouton est plein. */
.pel-public-card--featured {
	border: var(--pel-trait) solid var(--pel-terre-cuite);   /* décoratif */
}

.pel-public-card__titre {
	margin: 0;
}

.pel-public-card__texte {
	margin: 0;
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

.pel-public-card__points {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-2xs);
	margin: 0;
	padding-left: var(--pel-space-s);
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

.pel-public-card__point::marker {
	color: var(--pel-champagne);
}

.pel-public-card__action {
	margin-top: auto;
}

/* Le titre mène à la page du public (#336). */
.pel-public-card__page {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--pel-champagne);
	text-underline-offset: var(--pel-soulignement);
}

.pel-public-card__page:hover {
	color: var(--pel-terre-foncee);
	text-decoration-color: currentColor;
}

/* Sous le bouton : « Vous préparez un mariage ? » (#336). */
.pel-public-card__lien {
	font-size: var(--pel-fs-small);
}

/* Le showroom, sous les trois publics (#336). */
.pel-accueil__showroom {
	margin: var(--pel-space-m) 0 0;
	text-align: center;
}

/* --- Tuiles d'univers sur l'accueil : la fourchette, et « Tout le catalogue » -- */
.pel-univers-tile__prix {
	color: var(--pel-encre);
	font-weight: 700;
}

.pel-univers-tile--all {
	justify-content: center;
	padding: var(--pel-space-m);
	border-color: var(--pel-champagne);
	background: var(--pel-champagne-pale);
}

.pel-univers-tile__texte {
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

.pel-univers-tile__lien {
	color: var(--pel-terre-foncee);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: var(--pel-soulignement);
}

/* --- L'ouverture en photo (planche E1, issue 186) ----------------------------- */
/* --photo : le titre à gauche, la photo d'événement à droite ; le sélecteur dessous, sur toute la largeur. */
.pel-accueil__ouverture--photo {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: var(--pel-space-xl);
	margin-bottom: var(--pel-space-l);
}

.pel-accueil__titre--photo {
	font-size: var(--pel-fs-h1);
}

.pel-accueil__accroche--photo {
	margin-bottom: 0;
}

/* --- Les réalisations : l'en-tête, et la mosaïque ------------------------------ */
.pel-accueil__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--pel-space-xs) var(--pel-space-m);
	margin-bottom: var(--pel-space-m);
}

.pel-accueil__intro--entete {
	margin-bottom: 0;
}

.pel-accueil__tout {
	display: inline-flex;
	align-items: center;
	min-height: var(--pel-cible);
}

/* --mosaique : trois réalisations, la première en grand, les deux autres empilées. */
.pel-accueil__realisations--mosaique {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.pel-inspiration-card--grande {
	grid-row: span 2;
}

/* La grande prend la hauteur des deux petites : sa photo ne pèse rien dans le calcul (height: 0), puis remplit. */
.pel-inspiration-card__image--grande {
	flex: 1 1 auto;
	height: 0;
	min-height: 0;
	aspect-ratio: auto;
}

.pel-inspiration-card__image--petite {
	aspect-ratio: 16 / 9;
}

@media (max-width: 991px) {
	.pel-accueil__publics,
	.pel-accueil__realisations,
	.pel-accueil__realisations--mosaique {
		grid-template-columns: minmax(0, 1fr);
	}

	.pel-inspiration-card--grande {
		grid-row: auto;
	}

	.pel-inspiration-card__image--grande {
		height: auto;
		aspect-ratio: 3 / 2;
	}

	.pel-accueil__ouverture--photo {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--pel-space-m);
	}

	/* Sur mobile, la photo passe au-dessus du titre. */
	.pel-accueil__photo {
		order: -1;
	}

	.pel-accueil__univers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}