/*
 * Section « experts » — carrousel de recommandations.
 * Aucune couleur déclarée ici : uniquement les jetons de shop.css.
 */

.experts {
	padding-block: 40px;
	background: var(--fond);
}

/*
 * Débord de la piste : la valeur suit exactement le padding de .wrap (20px, puis 50px
 * à partir de 750px dans shop.css). Toute autre valeur ferait déborder la page.
 */
.experts__in {
	--experts-marge: 20px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	column-gap: 8px;
	row-gap: 20px;
}

.experts__titre {
	grid-column: 1;
	margin: 0;
	font-family: var(--font-titre);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}

/* Flèches : réservées au grand écran, ailleurs la piste se fait glisser au doigt. */
.experts__fleche {
	display: none;
	width: 40px;
	height: 40px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ligne);
	border-radius: 50%;
	background: var(--fond);
	color: var(--texte);
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease;
}

.experts__fleche:hover {
	background: var(--creme);
	border-color: var(--creme-bord);
}

.experts__fleche:focus-visible,
.experts__piste:focus-visible {
	outline: 2px solid var(--sauge);
	outline-offset: 2px;
}

/* La piste déborde des marges de page, compensé par un padding de même valeur. */
.experts__piste {
	grid-column: 1 / -1;
	display: flex;
	gap: 12px;
	margin: 0;
	margin-inline: calc(var(--experts-marge) * -1);
	padding: 0;
	padding-inline: var(--experts-marge);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: var(--experts-marge);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.experts__piste::-webkit-scrollbar { display: none; }

.experts__carte {
	flex: 0 0 100%;
	max-width: 100%;
	scroll-snap-align: start;
}

.experts__portrait {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: var(--rayon-carte) var(--rayon-carte) 0 0;
}

.experts__corps { padding-top: 14px; }

.experts__nom {
	margin: 0 0 4px;
	font-family: var(--font-titre);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--texte);
}

.experts__role {
	margin: 0 0 10px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--sauge);
}

.experts__citation {
	margin: 0;
	font-size: 14px;
	font-style: italic;
	line-height: 1.6;
	color: var(--gris);
}

.experts__citation p { margin: 0; }

/* Guillemets typographiques posés en CSS : le texte de data.php reste intact. */
.experts__citation p::before { content: "\00AB\00A0"; }
.experts__citation p::after  { content: "\00A0\00BB"; }

@media (min-width: 700px) {
	.experts { padding-block: 56px; }
	.experts__carte { flex-basis: 280px; max-width: 100%; }
}

/* Même seuil que .wrap dans shop.css : la compensation doit suivre le padding réel. */
@media (min-width: 750px) {
	.experts__in { --experts-marge: 50px; }
}

@media (min-width: 1000px) {
	.experts { padding-block: 72px; }
	.experts__titre { font-size: 30px; }
	.experts__fleche { display: inline-flex; }
}


/* Nombre de cartes par vue, comme le slider de la source : 1, puis 2, puis 4. */
@media (min-width: 576px) { .experts__carte { flex-basis: calc((100% - 12px) / 2); max-width: none; } }
@media (min-width: 769px) { .experts__carte { flex-basis: calc((100% - 36px) / 4); max-width: none; } }