/* =========================================================================
   NeptunePlage — pages collection (hubs de recettes)
   Charge apres np-recette.css, dont elle reprend les variables et les cartes.
   Ecrit le 04/08/2026.
   ========================================================================= */

.np-collection {
	padding-bottom: 20px;
}

/* ---------- l'en-tete ---------- */

.np-collection__entete {
	text-align: center;
	margin: 34px 0 26px;
}

/* Aucune largeur imposee au titre : les fiches recettes n'en posent pas non plus
   (.np-titre dans np-recette.css). Une limite en « ch » cassait le H1 sur trois
   lignes dans un conteneur de 1120 px — defaut vu par Christine le 04/08. */
.np-collection .np-titre {
	margin: 0 0 14px;
	color: var(--np-navy);
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 700;
	line-height: 1.18;
	text-wrap: balance;
}

.np-collection__accroche {
	max-width: 78ch;
	margin: 0 auto;
	color: var(--np-gris);
	font-size: 18px;
	line-height: 1.6;
}

/* Image d'ouverture : meme traitement que le visuel d'une fiche. */
.np-collection .np-visuel {
	margin: 0 0 34px;
}

.np-collection .np-visuel__img {
	display: block;
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: var(--np-rayon);
}

/* ---------- la prose d'introduction ---------- */

/* La prose part du meme bord gauche que les titres de section et les cartes :
   une colonne centree plus etroite que le reste desalignait toute la page. */
.np-collection .np-corps {
	margin: 0 0 30px;   /* respiration demandee par Christine le 04/08 */
	font-size: 17.5px;
	line-height: 1.75;
}

.np-collection .np-corps > p {
	max-width: 88ch;   /* confort de lecture, sans rentrer le bord gauche */
}

.np-collection .np-corps p {
	margin: 0 0 18px;
}

.np-collection .np-corps a {
	color: var(--np-navy-doux);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.np-collection .np-corps a:hover {
	color: var(--np-ocre);
}

/* ---------- les sections de cartes ---------- */

.np-collection__section {
	margin: 0 0 52px;
	padding-top: 6px;
}

/* Une section sur deux respire sur un fond creme, comme les encarts des fiches. */
.np-collection__section:nth-of-type(even) {
	background: var(--np-creme);
	border-radius: var(--np-rayon);
	padding: 30px 26px 34px;
}

.np-collection__titre {
	margin: 0 0 10px;
	color: var(--np-navy);
	font-size: clamp(22px, 2.4vw, 31px);
	font-weight: 700;
	line-height: 1.25;
}

/* Le filet ocre de la charte, comme sur l'encart « Pourquoi ». */
.np-collection__titre::after {
	content: "";
	display: block;
	width: 62px;
	height: 3px;
	margin-top: 12px;
	background: var(--np-ocre);
	border-radius: 2px;
}

.np-collection__chapo {
	margin: 0 0 24px;
	max-width: 70ch;
	color: var(--np-gris);
	font-size: 16.5px;
	line-height: 1.65;
}

/* La grille reprend .np-similaires__liste (3 colonnes, 2 puis 1 en responsive)
   et n'ajoute que l'espacement propre aux hubs. */
.np-collection__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.np-collection .np-carte-art__titre a {
	color: var(--np-navy);
}

.np-collection .np-carte-art__titre a:hover {
	color: var(--np-ocre);
}

.np-collection .np-carte-art__suite {
	font-weight: 600;
}

.np-collection .np-carte-art__suite::after {
	content: " →";
}

/* ---------- grilles selon le nombre de cartes ----------
   Une carte seule dans une grille 3 colonnes laisse deux tiers de vide :
   on la passe en vedette horizontale. Deux cartes se partagent la largeur. */

.np-collection__liste--2 { grid-template-columns: repeat(2, 1fr); }

.np-collection__liste--1 { grid-template-columns: 1fr; }

.np-collection__liste--1 .np-carte-art {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	column-gap: 30px;
	align-items: start;
}

.np-collection__liste--1 .np-carte-art__lien {
	grid-row: 1 / -1;
	height: 100%;
}

.np-collection__liste--1 .np-carte-art__img {
	height: 100%;
	aspect-ratio: 4 / 3;
}

.np-collection__liste--1 .np-carte-art__titre {
	align-self: end;
	font-size: clamp(20px, 2vw, 25px);
}

.np-collection__liste--1 .np-carte-art__extrait { font-size: 16.5px; }
.np-collection__liste--1 .np-carte-art__suite { align-self: start; }

/* La VEDETTE bascule des 900 px : en dessous, ses deux colonnes compriment
   le texte sur six lignes (constate a 820 px). */
@media (max-width: 900px) {
	.np-collection__liste--1 .np-carte-art {
		grid-template-columns: 1fr;
		row-gap: 0;
	}
	.np-collection__liste--1 .np-carte-art__lien { grid-row: auto; }
	.np-collection__liste--1 .np-carte-art__img { aspect-ratio: 16 / 10; }
}

/* La grille a DEUX cartes, elle, tient jusqu'au mobile : passee en une colonne
   des 900 px, ses images occupaient toute la largeur de la tablette. */
@media (max-width: 600px) {
	.np-collection__liste--2 { grid-template-columns: 1fr; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	.np-collection__entete { margin-top: 24px; }
	.np-collection .np-titre { max-width: none; }
	.np-collection .np-visuel__img { max-height: 320px; }
	.np-collection__section:nth-of-type(even) { padding: 24px 18px 26px; }
}

@media (max-width: 600px) {
	.np-collection__accroche { font-size: 16.5px; }
	.np-collection .np-corps { font-size: 16px; }
	.np-collection .np-visuel__img { max-height: 230px; }
	.np-collection__section { margin-bottom: 38px; }
	.np-collection__section:nth-of-type(even) { padding: 20px 14px 22px; }
}

@media print {
	.np-collection__section:nth-of-type(even) { background: #fff; }
}