/*
	Carrousel de cartes : défilement horizontal natif, arrêt sur chaque carte.
	Thèmes sombre et clair ; cartes « personnes » (photo ronde) ou « logos ».
	Points de rupture : 600 et 992 px. Vert : #25963a.
*/
.bloc-carrousel {
	padding: 3rem 0 2rem;
}

.bloc-carrousel--sombre {
	background: #000;
	color: #fff;
}

.bloc-carrousel--clair {
	background: #fff;
	color: #222;
}

.bloc-carrousel__titre {
	margin: 0 0 2rem;
}

/* Couleurs propres à chaque thème. */
.bloc-carrousel--sombre {
	--carrousel-point: #fcfcfc;
	--carrousel-fleche-fond: rgba(0, 0, 0, 0.6);
	--carrousel-fleche-bord: rgba(255, 255, 255, 0.6);
	--carrousel-fleche-texte: #fff;
}

.bloc-carrousel--clair {
	--carrousel-point: #d6d6d6;
	--carrousel-fleche-fond: #fff;
	--carrousel-fleche-bord: #bdbdbd;
	--carrousel-fleche-texte: #222;
}

/* Hauteur des flèches : centre des photos (100 px de rayon) ou des logos. */
.bloc-carrousel--personnes {
	--carrousel-centre-fleches: 108px;
}

.bloc-carrousel--logos {
	--carrousel-centre-fleches: 63px;
}

.bloc-carrousel__cadre {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 3.5rem;
}

.bloc-carrousel__liste {
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0.5rem 0 1rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

/* Pas de puces, même dans une zone dont la feuille du site en impose à toutes les
   listes par un sélecteur d'identifiant. */
.bloc-carrousel__liste,
.bloc-carrousel__carte {
	list-style-type: none !important;
}

/* Barre de défilement masquée : les flèches et le glissement suffisent. */
.bloc-carrousel__liste::-webkit-scrollbar {
	display: none;
}

.bloc-carrousel__liste:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* 4 cartes par vue : la largeur retire les 3 espaces entre elles. */
.bloc-carrousel__carte {
	flex: 0 0 calc((100% - 3 * 1.5rem) / 4);
	scroll-snap-align: start;
	text-align: center;
}

/* Photo ronde ; l'anneau, transparent au repos, devient vert au survol. */
.bloc-carrousel__photo {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid transparent;
	margin: 0 auto 1.25rem;
	transition: transform 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) {
	.bloc-carrousel__carte:hover .bloc-carrousel__photo {
		transform: scale(1.04);
		border-color: #25963a;
	}
}

.bloc-carrousel__nom {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bloc-carrousel__role {
	margin: 0.35rem 0 0.6rem;
	font-weight: 700;
	color: #25963a;
}

.bloc-carrousel__texte {
	max-width: 16rem;
	margin: 0 auto;
	font-size: 0.95rem;
	line-height: 1.45;
	opacity: 0.85;
}

/* Logos : cadre de hauteur fixe, logo entier quelle que soit sa forme. */
.bloc-carrousel__logo {
	display: block;
	width: 100%;
	height: 110px;
	object-fit: contain;
	padding: 0.5rem 1rem;
}

/* Points : un par position, créés par le script. */
.bloc-carrousel__points {
	margin-top: 1.5rem;
	text-align: center;
}

.bloc-carrousel__point {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--carrousel-point);
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Après un clic, le bouton garde sa couleur (la feuille du thème colore tout bouton
   qui a le focus) ; le contour clavier reste. */
.bloc-carrousel__point:focus {
	background-color: var(--carrousel-point);
}

.bloc-carrousel__point[aria-current="true"],
.bloc-carrousel__point[aria-current="true"]:focus {
	background-color: #25963a;
	transform: scale(1.15);
}

.bloc-carrousel__point:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Chevron en SVG, centré. */
.bloc-carrousel__fleche {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: var(--carrousel-centre-fleches);
	transform: translateY(-50%);
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--carrousel-fleche-bord);
	border-radius: 50%;
	background: var(--carrousel-fleche-fond);
	color: var(--carrousel-fleche-texte);
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* La feuille du site place tous les SVG en position absolue : le chevron reste dans
   le flux, à sa taille. */
.bloc-carrousel__fleche svg {
	position: static;
	width: 20px;
	height: 20px;
}

/* display: flex l'emporterait sur l'attribut hidden. */
.bloc-carrousel__fleche[hidden] {
	display: none;
}

.bloc-carrousel__fleche:focus {
	background: var(--carrousel-fleche-fond);
}

.bloc-carrousel__fleche:not(:disabled):hover {
	background: #25963a;
	border-color: #25963a;
	color: #fff;
}

.bloc-carrousel__fleche--prec {
	left: 0.25rem;
}

.bloc-carrousel__fleche--suiv {
	right: 0.25rem;
}

.bloc-carrousel__fleche:disabled {
	opacity: 0.3;
	cursor: default;
}

.bloc-carrousel__fleche:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Tablette : 2 personnes ou 3 logos par vue. */
@media only screen and (max-width: 992px) {
	.bloc-carrousel__carte {
		flex-basis: calc((100% - 1.5rem) / 2);
	}

	.bloc-carrousel--logos .bloc-carrousel__carte {
		flex-basis: calc((100% - 2 * 1.5rem) / 3);
	}
}

/* Mobile : 1 personne ou 2 logos, la carte suivante dépasse ; on fait glisser. */
@media only screen and (max-width: 600px) {
	.bloc-carrousel__cadre {
		padding: 0 1rem;
	}

	.bloc-carrousel__carte {
		flex-basis: 80%;
		scroll-snap-align: center;
	}

	.bloc-carrousel--logos .bloc-carrousel__carte {
		flex-basis: 45%;
	}

	.bloc-carrousel__photo {
		max-width: 170px;
	}

	.bloc-carrousel__fleche {
		display: none;
	}

	.bloc-carrousel__point {
		width: 12px;
		height: 12px;
		margin: 0 6px;
	}
}

/* Préférence « réduire les animations » : rien ne bouge seul ni en douceur. */
@media (prefers-reduced-motion: reduce) {
	.bloc-carrousel__liste {
		scroll-behavior: auto;
	}

	.bloc-carrousel__photo,
	.bloc-carrousel__point,
	.bloc-carrousel__fleche {
		transition: none;
	}
}