/* =========================================================
   Lupéo — le rebond commercial en bas d'un article
   =========================================================

   La vignette elle-même n'est pas ici : c'est `.lupeo-card` de
   `lupeo-boutique.css`, la même que sur l'accueil et les rayons. Cette
   feuille ne pose que ce qui est propre au bloc — la coupure d'avec le
   texte, la grille et le passage en défilement sur petit écran.

   ⚠️ La section porte `alignwide`. Sans cette classe, Blocksy la borne à
   750 px comme un paragraphe et les vignettes s'écrasent. Ne pas la
   remplacer par une largeur écrite ici : elle sortirait du gabarit du
   site sur les autres tailles d'écran.
   ========================================================= */

.lupeo-rebond {
	margin: clamp(40px, 5vw, 64px) 0 8px;
	padding: clamp(26px, 3vw, 38px) 0 0;
	border-top: 1px solid var(--lupeo-line, #E6DFD4);
}

.lupeo-rebond__entete {
	margin-bottom: clamp(20px, 2.4vw, 30px);
}

.lupeo-rebond__entete h2 {
	margin: 6px 0 0;
	font-size: clamp(21px, 2.4vw, 27px);
	line-height: 1.22;
}

/* Le chapeau du bloc est une ligne de réassurance, pas une accroche :
   il reste plus discret que celui d'une section d'accueil. */
.lupeo-rebond__chapo {
	font-size: 14.5px;
	margin-top: 8px;
	max-width: 62ch;
	color: var(--lupeo-mute, #6F6A62);
}

.lupeo-rebond__chapo a {
	color: var(--lupeo-teal, #007C75);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.lupeo-rebond__chapo a:hover,
.lupeo-rebond__chapo a:focus-visible {
	border-bottom-color: currentColor;
}

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

.lupeo-rebond__grille--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Deux vignettes n'ont pas besoin de toute la largeur : étirées sur
   1 010 px elles deviennent deux affiches, et le prix se perd en bas
   d'une image démesurée. */
.lupeo-rebond__grille--2 {
	max-width: 700px;
}

/*
 * Sous 900 px, la grille devient un rail qui défile.
 *
 * ⚠️ Ne pas remettre ici un palier à deux colonnes : mesuré sur le HTML
 * servi le 24/08/2026, il laissait la troisième vignette **seule sur une
 * seconde ligne** entre 700 et 900 px — le format d'une tablette. Une carte
 * isolée sous deux autres se lit comme un défaut d'affichage.
 *
 * Et sur téléphone, trois vignettes empilées, ce sont trois écrans de haut
 * entre la fin du guide et la signature : le lecteur les dépasse au lieu de
 * les regarder.
 *
 * Aucun JavaScript : `scroll-snap` suffit, et sans lui la rangée reste une
 * rangée qui défile.
 */
@media (max-width: 900px) {
	.lupeo-rebond__grille {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-padding-left: 2px;
		padding-bottom: 6px;
		max-width: none;
	}

	/* Sur tablette, deux vignettes tiennent à l'écran et la troisième
	   s'annonce sur le bord : c'est ce bord qui dit qu'il y en a d'autres. */
	.lupeo-rebond__grille > .lupeo-card {
		flex: 0 0 46%;
		scroll-snap-align: start;
	}

	.lupeo-rebond__entete {
		display: block;
	}

	.lupeo-rebond__entete .lupeo-lien {
		margin-top: 16px;
	}
}

@media (max-width: 700px) {
	.lupeo-rebond__grille > .lupeo-card {
		flex: 0 0 78%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lupeo-rebond__grille {
		scroll-behavior: auto;
	}
}