/* -------------------------------------------------------------------------
   Page Les avis

   Trois cartes de plateforme, une selection d'avis, un appel final.
   ------------------------------------------------------------------------- */

/*
 * Le chapeau porte lui-meme sa position et son rembourrage.
 *
 * Cette page n'a pas de carte a droite : elle n'utilise donc pas
 * « .exo2-hhero-grid », qui porte le « position: relative » et le
 * « z-index: 2 » faisant passer le contenu AU-DESSUS des deux voiles du hero.
 * Sans eux, le titre est bien dans le HTML mais derriere le voile - c'est
 * exactement le defaut rencontre sur la page Sur mesure.
 */
.exo2-av-tete {
	position: relative; z-index: 2; width: 100%;
	padding-top: 150px; padding-bottom: 56px;
}
.exo2-av-tete .exo2-hhero-sub { max-width: 640px; }

/* ---------- les trois plateformes ---------- */
.exo2-av-plateformes {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}
.exo2-av-plateforme {
	display: flex; flex-direction: column; gap: 12px;
	padding: 26px 26px 24px;
}
.exo2-av-plateforme h3 { margin: 0; }

.exo2-av-note { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.exo2-av-note b {
	font: italic 700 26px var(--exo2-police-titre); color: #fff; letter-spacing: .5px;
}
.exo2-av-note > span:last-child { font-size: 13.5px; color: var(--exo2-meta); }
.exo2-av-sans-note { margin: 0; font-size: 13.5px; color: var(--exo2-meta); }

/* Les deux actions : lire est un bouton, ecrire est un lien. Ecrire un avis
   demande un effort qu'un cadre ne rend pas plus facile ; le lire est le geste
   qu'on propose d'abord. */
.exo2-av-liens {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	margin-top: auto; padding-top: 6px;
}

/* ---------- la selection ---------- */
/* Trois colonnes plutot que le carrousel des autres pages : ici les avis sont
   le sujet, pas un argument de passage. */
.exo2-av-reviews {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}

/* ---------- l'appel final ---------- */
.exo2-av-final {
	display: flex; align-items: center; justify-content: space-between;
	gap: 30px; flex-wrap: wrap;
}
.exo2-av-final h2 { margin: 0 0 8px; }
.exo2-av-final p { margin: 0; max-width: 56ch; }

/* =========================================================================
   Tablette et telephone
   ========================================================================= */

@media (max-width: 960px) {
	.exo2-av-tete { padding-top: 96px; padding-bottom: 36px; }
}

@media (max-width: 959px) {
	.exo2-av-plateformes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/*
	 * La selection reprend la grille, pas le carrousel du socle : sur cette
	 * page les avis se lisent, ils ne se survolent pas. Le socle passe
	 * « .exo2-reviews » en flex a balayage sous 960 px ; on le contredit ici.
	 */
	.exo2-av-reviews {
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow: visible;
	}
	.exo2-av-reviews .exo2-review { width: auto; flex: none; }
}

@media (max-width: 639px) {
	.exo2-av-plateformes { grid-template-columns: minmax(0, 1fr); }
	.exo2-av-reviews { grid-template-columns: minmax(0, 1fr); }
	.exo2-av-final { display: grid; }
	.exo2-av-final .exo2-btn { width: 100%; }
}