/* Cotes mesurées en direct sur drive-turismo.fr (section "Ce que disent nos
   clients", 2026-08-29). Padding de section aligné sur le rythme déjà en
   place ailleurs sur la page (clamp 48-80px) plutôt que le 128px fixe de
   Turismo, pour rester cohérent avec why-median.css/cards.css/etc. */
.md-reviews {
	padding: clamp(48px, 7vw, 80px) 24px;
	background: var(--md-cream);
}

.md-reviews__header {
	max-width: 680px;
	margin: 0 auto 32px;
	text-align: center;
}

.md-reviews__header h2 {
	font-size: clamp(28px, 3.8vw, 44px);
	font-weight: 700;
	margin: 0;
}

/* Bandeau de note — mesures Turismo : flex row, gap 32px, padding 32px,
   radius 20px, bg blanche. Reprend leur widget Trustpilot à l'identique
   dans la forme (score + étoiles + séparateur + mot + mention source),
   avec nos propres avis Google à la place (pas de compte Trustpilot). */
.md-reviews__banner {
	max-width: 1104px;
	margin: 0 auto 32px;
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 32px;
	border-radius: 20px;
	background: var(--md-white);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.03),
		0 6px 20px rgba(15, 23, 42, 0.05);
}

.md-reviews__banner-score {
	flex: none;
	text-align: center;
}

.md-reviews__banner-score strong {
	display: block;
	font-size: 48px;
	font-weight: 700;
	color: var(--md-ink);
	line-height: 1;
}

.md-reviews__banner-stars {
	margin-top: 8px;
	color: #E8A33D;
	font-size: 18px;
	letter-spacing: 2px;
}

.md-reviews__banner-sep {
	flex: none;
	width: 1px;
	align-self: stretch;
	background: var(--md-line);
}

.md-reviews__banner-word {
	font-size: 18px;
	font-weight: 700;
	color: var(--md-ink);
}

.md-reviews__banner-meta {
	font-size: 14px;
	color: #6a6a6a;
	margin-top: 4px;
}

/* Bug corrigé (2026-09-01, audit responsive) : .md-reviews__banner est un
   flex row sans wrap ni media query mobile — score (largeur fixe) + séparateur
   (flex:none) + mot/mention (texte non contraint) dépassent la largeur
   disponible dès qu'on retire le padding de section (24px) et le padding
   interne de la carte (32px) à 375px de large, ce qui pousse toute la
   section en scroll horizontal. Empile verticalement et centre sous ce
   seuil plutôt que de laisser le flex row déborder ; le séparateur vertical
   n'a plus de sens une fois empilé, masqué ici. */
@media (max-width: 640px) {
	.md-reviews__banner {
		flex-direction: column;
		text-align: center;
		gap: 12px;
		padding: 24px;
	}

	.md-reviews__banner-sep {
		display: none;
	}
}

/* Grille d'avis — mesures Turismo : 3 colonnes de 352px, gap 24px, carte
   padding 32px, radius 16px, même ombre douce que les autres cartes du
   site. */
/* Carrousel auto-défilant (2026-08-31, page DJ, retour Damien : "un
   caroussel qui défile tout seul") — pur CSS, sans JS : un long ruban flex
   contenant les avis DUPLIQUÉS une fois (cf. template-parts/google-reviews.php)
   animé en translateX(0 -> -50%) en boucle infinie ; comme la 2e moitié est
   une copie identique de la 1re, la boucle est invisible (technique
   "marquee" standard). Pause au survol pour laisser le temps de lire une
   carte ; désactivée entièrement si prefers-reduced-motion (voir plus bas)
   — jamais de mouvement imposé à qui l'a explicitement refusé côté OS. */
.md-reviews__viewport {
	/* position: relative (2026-10-14) : la note lue par les lecteurs d'écran est en position absolue ; sans
	   bloc de référence ici, elle échappait au overflow: hidden et élargissait toute la page (3 400 px). */
	position: relative;
	max-width: 1104px;
	margin: 0 auto;
	overflow: hidden;
	/* Estompe les bords du ruban plutôt qu'une coupe nette d'une carte —
	   signale visuellement qu'il y a plus de contenu de chaque côté. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.md-reviews__grid {
	display: flex;
	width: max-content;
	gap: 24px;
	animation: md-reviews-scroll 36s linear infinite;
}

.md-reviews__viewport:hover .md-reviews__grid {
	animation-play-state: paused;
}

@keyframes md-reviews-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* -50% exactement : le ruban contient 2 copies identiques bout à
		   bout, donc la moitié du ruban = un cycle complet. */
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.md-reviews__grid {
		animation: none;
	}
}

.md-review-card {
	flex: 0 0 340px;
	padding: 32px;
	border-radius: 16px;
	background: var(--md-white);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.03),
		0 6px 20px rgba(15, 23, 42, 0.05);
}

.md-review-card__stars {
	color: #E8A33D;
	font-size: 15px;
	letter-spacing: 2px;
	margin-bottom: 16px;
}

.md-review-card__text {
	font-size: 15px;
	line-height: 24px;
	color: var(--md-ink);
	margin: 0 0 20px;
}

.md-review-card__who {
	display: flex;
	align-items: center;
	gap: 12px;
}

.md-review-card__avatar {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.md-review-card__avatar--initial {
	background: var(--md-blue);
	color: var(--md-indigo);
	font-size: 15px;
	font-weight: 700;
	display: grid;
	place-items: center;
}

.md-review-card__author {
	font-size: 14px;
	font-weight: 700;
	color: var(--md-ink);
}

.md-review-card__when {
	font-size: 13px;
	color: #6a6a6a;
	margin-top: 2px;
}

/* Nom de l'auteur lié à son profil Google (attribution exigée par Google, 2026-10-14). */
.md-review-card__author a {
	color: inherit;
	text-decoration: none;
}

.md-review-card__author a:hover,
.md-review-card__author a:focus-visible {
	text-decoration: underline;
}

/* Mention de la source, sous le carrousel. */
.md-reviews__source {
	max-width: 1104px;
	margin: 16px auto 0;
	text-align: center;
	font-size: 13px;
	color: #5f5f5f;
}

/* display:flex + wrap (2026-08-31, page DJ) : ce pied peut maintenant
   porter 2 liens (avis Google + Instagram, cf. $args['instagram_url'] dans
   template-parts/google-reviews.php) — un seul lien reste centré comme
   avant (justify-content:center), 2 liens se répartissent avec un espace
   entre eux, repli en colonne sous 480px pour ne jamais les serrer. */
.md-reviews__foot {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	margin-top: 32px;
}

.md-reviews__foot a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--md-indigo);
	text-decoration: none;
}

.md-reviews__foot a svg {
	width: 18px;
	height: 18px;
}