/*
 * Les pages du catalogue : univers et catégories. Référence : maquettes 2, 3,
 * 14 et petite catégorie ; planche 6. Balisage : inc/catalogue.php. Cartes :
 * css/carte.css ; filtres, pagination, état vide : css/filtres.css ; « Dans la
 * même famille » : pel-cross-sell--category, css/fiche.css.
 *
 * Valeurs de la maquette ramenées à l'échelle : titre 44-46 → titre de page,
 * textes 13-17 → 14 et 17, tuiles 12 → 12, grilles 16-24 → 16 et 24.
 */

/* --- pel-catalogue-head ------------------------------------------------------ */
.pel-catalogue-head__bandeau {
	margin-bottom: var(--pel-space-m);
}

.pel-catalogue-head__titre {
	margin: var(--pel-space-s) 0;
	font-size: var(--pel-fs-display);
	line-height: var(--pel-lh-titre);
}

.pel-catalogue-head__texte,
.pel-catalogue-head__chiffres {
	max-width: calc(var(--pel-container) * 0.6);
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

.pel-catalogue-head__texte > * {
	margin: 0 0 var(--pel-space-s);
}

.pel-catalogue-head__chiffres {
	margin: 0;
	color: var(--pel-encre);
	font-weight: 600;
}

.pel-catalogue-head__dates {
	margin-top: var(--pel-space-m);
}

/* La photo du bandeau (#340, #346) : l'image de la catégorie (vitrine d'articles,
   ou photo de réalisation pour un univers), incrustée en fond sur la moitié
   droite, fondue dans le sable par un dégradé. Le bandeau garde sa hauteur :
   la photo le remplit, elle ne l'agrandit pas. Le texte reste devant. */
.pel-section:has(> .pel-catalogue-head--photo) {
	position: relative;
	overflow: hidden;
}

/* Le bandeau d'appel a son propre fond : la photo s'incruste en lui (12/10). */
.pel-cta-band.pel-catalogue-head--photo {
	position: relative;
	overflow: hidden;
}

/* Sur la photo, le bouton secondaire (transparent) devenait illisible : fond ivoire. */
.pel-catalogue-head--photo .pel-btn--secondary {
	background: var(--pel-ivoire);
}

.pel-catalogue-head--photo > * {
	position: relative;
	z-index: 1;
}

.pel-catalogue-head--photo > .pel-catalogue-head__photo {
	position: absolute;
	inset: 0 0 0 auto;
	z-index: 0;
	width: 50%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(to right, transparent, var(--pel-encre) 55%);
	mask-image: linear-gradient(to right, transparent, var(--pel-encre) 55%);
}

/* Sur mobile, le texte prend toute la largeur : la photo s'efface derrière lui. */
@media (max-width: 767px) {
	.pel-catalogue-head--photo > .pel-catalogue-head__photo {
		width: 60%;
		opacity: 0.45;
	}
}

/* --- Les tuiles des catégories d'un univers ---------------------------------- */
.pel-catalogue-tuiles {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--pel-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- pel-univers-tile : toute la tuile est le lien (planche 3) --------------- */
.pel-univers-tile {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-2xs);
	height: 100%;
	box-sizing: border-box;
	padding: var(--pel-space-xs);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-blanc);
	color: var(--pel-encre);
	text-decoration: none;
}

.pel-univers-tile:hover {
	box-shadow: var(--pel-shadow-m);
}

.pel-univers-tile:hover .pel-univers-tile__nom {
	text-decoration: underline;
}

.pel-univers-tile__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--pel-radius-m);
	background: var(--pel-sable);
	object-fit: cover;
}

.pel-univers-tile__nom {
	font-weight: 600;
	line-height: var(--pel-lh-titre);
}

.pel-univers-tile__count {
	color: var(--pel-gris-chaud);
	font-size: var(--pel-fs-small);
}

/* --- La liste des articles ---------------------------------------------------- */
.pel-liste-articles__grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pel-space-m);
	margin: var(--pel-space-m) 0;
	padding: 0;
	list-style: none;
}

.pel-liste-articles__vide {
	margin-top: var(--pel-space-m);
}

/* --- La carte de fin d'une petite catégorie ---------------------------------- */
.pel-catalogue-fin {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--pel-space-xs);
	padding: var(--pel-space-m);
	border: var(--pel-filet) dashed var(--pel-champagne);   /* décoratif */
	border-radius: var(--pel-radius-l);
	background: var(--pel-champagne-pale);
}

.pel-catalogue-fin__titre {
	margin: 0;
	color: var(--pel-encre);
	font-family: var(--pel-font-titre);
	font-size: var(--pel-fs-h3);
	font-weight: 600;
}

.pel-catalogue-fin__texte {
	margin: 0;
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}


@media (max-width: 991px) {
	.pel-liste-articles__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.pel-catalogue-tuiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 478px) {
	.pel-liste-articles__grille {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Liste groupée par type (#316) ---------------------------------------- */
.pel-liste-groupee {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-xl);
	margin-top: var(--pel-space-m);   /* sous la barre de filtres (#328) */
}

.pel-liste-groupee__groupe {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-s);
}

.pel-liste-groupee__titre {
	display: flex;
	align-items: baseline;
	gap: var(--pel-space-xs);
	margin: 0;
	padding-bottom: var(--pel-space-2xs);
	border-bottom: var(--pel-filet) solid var(--pel-lin);
	font-size: var(--pel-fs-h3);
}

.pel-liste-groupee__nombre {
	color: var(--pel-encre-douce);
	font-family: var(--pel-font-texte);
	font-size: var(--pel-fs-small);
	font-weight: 400;
}

/* Sélection par occasion (#320) : le tri se dit, et se défait d'un clic. */
.pel-catalogue-occasion {
	margin: var(--pel-space-3xs) 0 var(--pel-space-xs);
	font-size: var(--pel-fs-small);
	color: var(--pel-terre-foncee);
}

.pel-catalogue-occasion__tout {
	color: inherit;
	font-weight: 600;
	text-underline-offset: var(--pel-soulignement);
}