/*
 * Bloc Témoignages — « Ce sont les parents qui en parlent le mieux ».
 *
 * En-tête centré (surtitre rose entre deux traits), cartes blanches : capture ou
 * vidéo à gauche, citation à droite (grands guillemets roses), extrait en italique
 * sous un filet. Carrousel commun (composants.css) : flèches sur les côtés à partir
 * de 1024 px, sous les cartes avant ; pagination par témoignage (view.js).
 * Bandeau rose clair : bénéfices et bouton vers les formules. Pas de mascotte.
 * Fond crème rosé (plus soutenu que les cartes) avec deux touches de pinceau
 * décoratives ; petits traits roses près du titre et du bouton (maquette -2).
 * Carrousel en profondeur : vraie scène 3D, la carte du centre au premier plan,
 * les voisines reculées, inclinées et glissées derrière elle (voir plus bas).
 * Cartes : côte à côte (image | texte) dès que la carte mesure 340 px, sinon empilées.
 * Bandeau : bouton sous les bénéfices, à leur droite à partir de 1200 px.
 * Animation : entrée de la section, défilement automatique avec barre de progression
 * et bouton pause (view.js) ; rien de tout cela si les animations sont réduites.
 */

.ltl-temoignages.ltl-section {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #fff3f0 0%, #fde8e9 42%, #fdecea 78%, #fff3f0 100%);
}

/* Touches de pinceau roses, en arrière-plan (décor). */
.ltl-temoignages.ltl-section::before,
.ltl-temoignages.ltl-section::after {
	content: "";
	position: absolute;
	z-index: 0;
	width: 52vw;
	max-width: 760px;
	height: 190px;
	border-radius: 50%;
	background: linear-gradient(100deg, rgba(232, 51, 106, 0) 4%, rgba(232, 51, 106, 0.13) 45%, rgba(232, 51, 106, 0) 92%);
	pointer-events: none;
}

.ltl-temoignages.ltl-section::before {
	top: 14%;
	left: -22vw;
	transform: rotate(-24deg);
}

.ltl-temoignages.ltl-section::after {
	top: 30%;
	right: -24vw;
	transform: rotate(-28deg);
}

.ltl-temoignages > .ltl-section__contenu {
	position: relative;
	z-index: 1;
}

.ltl-temoignages .ltl-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* En-tête                                                            */
/* ------------------------------------------------------------------ */

.ltl-temoignages__entete.ltl-section__entete {
	align-items: center;
	align-self: center;
	text-align: center;
}

.ltl-temoignages__surtitre {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--ltl-rose-texte);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ltl-temoignages__surtitre::before,
.ltl-temoignages__surtitre::after {
	content: "";
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--ltl-rose);
}

.ltl-temoignages__entete.ltl-section__entete {
	max-width: 980px;
}

.ltl-temoignages .ltl-section__intro {
	max-width: 640px;
}

/* Trait rose sous l'introduction. */
.ltl-temoignages__entete::after {
	content: "";
	width: 96px;
	height: 4px;
	margin-top: 2px;
	border-radius: 4px;
	background: var(--ltl-rose);
}

@media (min-width: 900px) {
	/* Petits traits roses (étincelles) à gauche du titre. */
	.ltl-temoignages__entete .ltl-section__titre {
		position: relative;
		width: fit-content;
	}

	.ltl-temoignages__entete .ltl-section__titre::before {
		content: "";
		position: absolute;
		top: -6px;
		left: -52px;
		width: 40px;
		height: 40px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23e8336a' stroke-width='4.5' stroke-linecap='round'%3E%3Cpath d='M23 4l3 11M8 12l10 8M4 28l13-2'/%3E%3C/svg%3E") no-repeat center / contain;
		transform: scaleX(-1);
	}
}

/* ------------------------------------------------------------------ */
/* Carrousel en profondeur (mode commun data-ltl-profondeur,          */
/* assets/js/carrousel.js) : la carte du centre avance, grandit et    */
/* prend l'ombre ; les voisines reculent, rétrécissent et s'inclinent */
/* vers l'extérieur. Le mouvement suit le défilement (flèches : une   */
/* carte, arrivée amortie). Profondeur forte sur ordinateur, réduite  */
/* sur tablette, légère sur mobile ; aucune si les animations sont    */
/* réduites. Seuls transform et opacity changent pendant le geste.    */
/* ------------------------------------------------------------------ */

.ltl-temoignages__carrousel.ltl-carrousel {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	container-type: inline-size;
}

.ltl-temoignages__carrousel[data-ltl-profondeur] {
	--ltl-profondeur-rotation: 3;     /* degrés, cartes voisines */
	--ltl-profondeur-echelle: 0.05;   /* réduction des voisines */
	--ltl-profondeur-avant: 0.02;     /* agrandissement de la carte du centre */
	--ltl-profondeur-recul: 14;       /* px, recul des voisines */
	--ltl-profondeur-elevation: 0;    /* px, avancée de la carte du centre */
	--ltl-profondeur-rapprochement: 0; /* px, glissement des voisines derrière elle */
	--ltl-profondeur-duree: 520;      /* ms, mouvement des flèches (minimum) */
	--ltl-profondeur-opacite: 0.3;    /* estompage des cartes éloignées */
	--ltl-profondeur-parallaxe: 0;
	--ltl-profondeur-perspective: 1200;
	--ltl-profondeur-relief: 1;       /* ombre et premier plan de la carte du centre */
	--ltl-carrousel-apercu: 30px;
}

.ltl-temoignages__carrousel .ltl-carrousel__piste {
	grid-row: 1;
	grid-column: 1 / -1;
}

/* Place pour l'avancée de la carte du centre et son ombre. */
.ltl-temoignages__carrousel[data-ltl-profondeur] .ltl-carrousel__piste {
	padding-top: 28px;
	padding-bottom: 72px;
	margin-bottom: -24px;
}

.ltl-temoignages .ltl-carrousel__commandes:not([hidden]) {
	display: contents;
}

.ltl-temoignages .ltl-carrousel__position {
	display: none;
}

/* Flèches : pastilles blanches surélevées, chevron rose. Au-dessus de la piste, dont
 * la marge basse (place de l'ombre) remonte sous les flèches et la pagination. */
.ltl-temoignages .ltl-carrousel__bouton {
	position: relative;
	z-index: 20;
	grid-row: 2;
	width: 50px;
	height: 50px;
	border: 0;
	background: var(--ltl-blanc);
	color: var(--ltl-rose-action);
	box-shadow: 0 1px 2px rgba(14, 27, 61, 0.06), 0 10px 24px -8px rgba(14, 27, 61, 0.3);
	transition: transform 0.25s var(--ltl-ease), background-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}

.ltl-temoignages .ltl-carrousel__bouton svg {
	width: 22px;
	height: 22px;
	transition: transform 0.25s var(--ltl-ease);
}

.ltl-temoignages .ltl-carrousel__bouton[data-ltl-precedent] {
	grid-column: 1;
}

.ltl-temoignages .ltl-carrousel__bouton[data-ltl-suivant] {
	grid-column: 3;
}

@media (hover: hover) and (pointer: fine) {
	.ltl-temoignages .ltl-carrousel__bouton:not(:disabled):hover {
		background: var(--ltl-rose-action);
		color: var(--ltl-blanc);
		box-shadow: 0 1px 2px rgba(14, 27, 61, 0.06), 0 14px 28px -10px rgba(209, 28, 87, 0.6);
		transform: translateY(-2px) scale(1.05);
	}

	.ltl-temoignages .ltl-carrousel__bouton[data-ltl-precedent]:not(:disabled):hover svg {
		transform: translateX(-2px);
	}

	.ltl-temoignages .ltl-carrousel__bouton[data-ltl-suivant]:not(:disabled):hover svg {
		transform: translateX(2px);
	}
}

.ltl-temoignages .ltl-carrousel__bouton:not(:disabled):active {
	transform: scale(0.95);
	transition-duration: 120ms;
}

.ltl-temoignages .ltl-carrousel__bouton:disabled {
	opacity: 0.4;
	box-shadow: none;
}

.ltl-temoignages__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	grid-row: 2;
	grid-column: 2;
}

.ltl-temoignages__pagination[hidden] {
	display: none;
}

/* Point : zone de clic de 24 px (view.js), pastille de 8 px ; celui du centre grandit. */
.ltl-temoignages__point {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ltl-temoignages__point::before {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	background: #efc6d3;
	transition: background-color 0.3s ease, transform 0.35s var(--ltl-ease), box-shadow 0.35s ease;
}

.ltl-temoignages__point[hidden] {
	display: none;
}

/* Points d'extrémité de la fenêtre, quand d'autres témoignages suivent. */
.ltl-temoignages__point--bord::before {
	transform: scale(0.6);
}

.ltl-temoignages__point[aria-current="true"]::before {
	background: var(--ltl-rose-action);
	box-shadow: 0 0 0 4px rgba(209, 28, 87, 0.15);
	transform: scale(1.6);
}

@media (hover: hover) and (pointer: fine) {
	.ltl-temoignages__point:not([aria-current="true"]):hover::before {
		background: var(--ltl-rose);
		transform: scale(1.2);
	}
}

.ltl-temoignages__point:focus-visible {
	outline: 3px solid var(--ltl-turquoise-lien);
	outline-offset: 0;
}

.ltl-temoignages__compteur {
	color: var(--ltl-texte-doux);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Défilement automatique (view.js) : bouton pause / lecture et fine barre de
 * progression jusqu'au témoignage suivant, sous la pagination. */
.ltl-temoignages__auto {
	position: relative;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 8px;
	grid-row: 3;
	grid-column: 1 / -1;
	justify-self: center;
}

.ltl-temoignages__pause {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ltl-rose-texte);
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.ltl-temoignages__pause svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.ltl-temoignages__icone-lecture,
.ltl-temoignages__auto--pause .ltl-temoignages__icone-pause {
	display: none;
}

.ltl-temoignages__auto--pause .ltl-temoignages__icone-lecture {
	display: inline;
}

@media (hover: hover) and (pointer: fine) {
	.ltl-temoignages__pause:hover {
		background: rgba(232, 51, 106, 0.1);
		opacity: 1;
	}
}

.ltl-temoignages__pause:focus-visible {
	outline: 3px solid var(--ltl-turquoise-lien);
	outline-offset: 1px;
	opacity: 1;
}

.ltl-temoignages__progression {
	position: relative;
	width: 56px;
	height: 3px;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(232, 51, 106, 0.16);
}

.ltl-temoignages__progression > span {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--ltl-rose);
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ltl-temoignages__auto--actif .ltl-temoignages__progression > span {
	opacity: 1;
}

@keyframes ltl-temoignages-progression {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* Retour au premier témoignage : fondu de la piste (durée : DUREE_FONDU de view.js). */
.ltl-temoignages__carrousel .ltl-carrousel__piste {
	transition: opacity 0.32s ease;
}

.ltl-temoignages__carrousel--retour .ltl-carrousel__piste {
	opacity: 0;
}

/* ------------------------------------------------------------------ */
/* Entrée de la section (view.js, une fois, à l'arrivée à l'écran).   */
/* « attente » : éléments masqués ; « entree » : séquence de 1 s :     */
/* en-tête, cartes voisines, carte du centre qui avance depuis        */
/* l'arrière-plan, commandes, bandeau. Propriétés translate, scale et */
/* opacity : indépendantes des transformations 3D du carrousel.       */
/* ------------------------------------------------------------------ */

.ltl-temoignages--attente :is(.ltl-temoignages__entete, .ltl-temoignage__carte, .ltl-carrousel__bouton, .ltl-temoignages__pagination, .ltl-temoignages__auto, .ltl-temoignages__bandeau) {
	opacity: 0;
}

.ltl-temoignages--entree .ltl-temoignages__entete {
	animation: ltl-temoignages-monte 0.45s var(--ltl-ease) both;
}

.ltl-temoignages--entree .ltl-temoignage:not(.ltl-carrousel__centrale) .ltl-temoignage__carte {
	animation: ltl-temoignages-voisine 0.55s var(--ltl-ease) 0.12s both;
}

.ltl-temoignages--entree .ltl-carrousel__centrale .ltl-temoignage__carte {
	animation: ltl-temoignages-avance 0.7s cubic-bezier(0.16, 0.84, 0.24, 1) 0.2s both;
}

.ltl-temoignages--entree :is(.ltl-carrousel__bouton, .ltl-temoignages__pagination, .ltl-temoignages__auto) {
	animation: ltl-temoignages-fondu 0.35s ease 0.6s both;
}

.ltl-temoignages--entree .ltl-temoignages__bandeau {
	animation: ltl-temoignages-monte 0.45s var(--ltl-ease) 0.6s both;
}

@keyframes ltl-temoignages-monte {
	from {
		opacity: 0;
		translate: 0 18px;
	}
}

@keyframes ltl-temoignages-voisine {
	from {
		opacity: 0;
		translate: 0 24px;
		scale: 0.95;
	}
}

/* La carte du centre arrive de l'arrière-plan : petite, basse, transparente. */
@keyframes ltl-temoignages-avance {
	from {
		opacity: 0;
		translate: 0 44px;
		scale: 0.8;
	}
}

@keyframes ltl-temoignages-fondu {
	from {
		opacity: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Cartes                                                             */
/* --ltl-relief (carrousel.js) : 1 au centre, 0 à partir des voisines. */
/* L'ombre profonde est celle d'un pseudo-élément dont seule           */
/* l'opacité varie ; le contenu de la carte n'est jamais transformé.  */
/* ------------------------------------------------------------------ */

.ltl-temoignage {
	display: flex;
	container-type: inline-size;
}

.ltl-temoignage__carte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 18px;
	border: 1px solid rgba(158, 18, 66, 0.08);
	border-radius: 24px;
	background: var(--ltl-blanc);
	box-shadow: 0 16px 32px -20px rgba(158, 18, 66, 0.3);
	opacity: calc(0.84 + 0.16 * var(--ltl-relief, 1));
	transition: transform 0.35s var(--ltl-ease), box-shadow 0.35s ease;
}

.ltl-temoignage__carte::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	/* Cadre fin rose, liseré blanc, ombre large et chaude : la carte flotte. */
	box-shadow:
		0 0 0 1.5px rgba(232, 51, 106, 0.22),
		0 0 0 7px rgba(255, 255, 255, 0.78),
		0 0 0 8.5px rgba(232, 51, 106, 0.12),
		0 48px 80px -30px rgba(158, 18, 66, 0.4),
		0 22px 44px -24px rgba(14, 27, 61, 0.24);
	opacity: var(--ltl-relief, 0);
	pointer-events: none;
}

/* Survol de la carte du centre : elle s'élève à peine. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.ltl-carrousel:not(.ltl-carrousel--glisse) .ltl-carrousel__centrale .ltl-temoignage__carte:hover {
		transform: translateY(-4px);
		box-shadow: 0 22px 40px -20px rgba(158, 18, 66, 0.35);
	}
}

.ltl-temoignage__haut {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Capture ou affiche de la vidéo : vignette cliquable (ouvre la visionneuse). */
.ltl-temoignage__media {
	position: relative;
	display: block;
	flex-shrink: 0;
	height: 200px;
	overflow: hidden;
	border: 1px solid rgba(14, 27, 61, 0.1);
	border-radius: 14px;
	background: var(--ltl-blanc);
	box-shadow: 0 10px 22px -12px rgba(14, 27, 61, 0.38);
	-webkit-tap-highlight-color: transparent;
}

.ltl-temoignage__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--ltl-ease);
}

.ltl-temoignage__media:focus-visible {
	outline: 3px solid var(--ltl-turquoise-lien);
	outline-offset: 3px;
}

.ltl-temoignage__loupe {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ltl-marine);
	box-shadow: 0 2px 8px rgba(14, 27, 61, 0.16);
}

.ltl-temoignage__loupe svg {
	width: 18px;
	height: 18px;
}

@media (hover: hover) and (pointer: fine) {
	.ltl-temoignage__media:hover img {
		transform: scale(1.04);
	}
}

/* Vidéo : bouton de lecture et étiquette. */
.ltl-temoignage__lecture {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	background: var(--ltl-rose-action);
	color: var(--ltl-blanc);
	box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.55), 0 8px 20px rgba(14, 27, 61, 0.28);
	transition: transform 0.2s var(--ltl-ease);
}

.ltl-temoignage__lecture svg {
	width: 26px;
	height: 26px;
	margin-left: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.ltl-temoignage__media:hover .ltl-temoignage__lecture {
		transform: scale(1.08);
	}
}

.ltl-temoignage__badge {
	position: absolute;
	left: 8px;
	bottom: 8px;
	display: inline-flex;
	gap: 4px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--ltl-marine);
	color: var(--ltl-blanc);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}

.ltl-temoignage__texte {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* Grands guillemets roses (décoratifs). */
.ltl-temoignage__texte::before {
	content: "\201C";
	height: 30px;
	margin-bottom: -4px;
	color: #ef8fac;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 64px;
	font-weight: 700;
	line-height: 0.9;
}

.ltl-temoignage__citation p {
	color: var(--ltl-marine);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.38;
	text-wrap: pretty;
}

.ltl-temoignage__auteur {
	color: var(--ltl-texte-doux);
	font-size: 15px;
	line-height: 1.4;
}

.ltl-temoignage__note {
	display: flex;
	gap: 3px;
	color: var(--ltl-rose);
}

.ltl-temoignage__note svg {
	width: 20px;
	height: 20px;
}

.ltl-temoignage__extrait {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--ltl-bordure);
	color: #2b3656;
	font-size: 15px;
	font-style: italic;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
	text-wrap: pretty;
}

/* Carte assez large : image à gauche, texte à droite (maquette). */
@container (min-width: 340px) {
	.ltl-temoignage__haut {
		display: grid;
		grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
		align-items: start;
		gap: 18px;
	}

	.ltl-temoignage__media {
		height: auto;
		aspect-ratio: 1;
	}

	.ltl-temoignage--sans-media .ltl-temoignage__haut {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------ */
/* Bandeau : bénéfices et bouton                                      */
/* ------------------------------------------------------------------ */

.ltl-temoignages__bandeau {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 24px;
	padding: 24px 20px;
	border-radius: var(--ltl-rayon-l);
	border: 1px solid rgba(255, 255, 255, 0.7);
	background: linear-gradient(100deg, #fcdce5 0%, #fbd4df 100%);
	box-shadow: 0 18px 40px -30px rgba(158, 18, 66, 0.35);
}

.ltl-temoignages__benefices {
	display: flex;
	flex-direction: column;
	gap: 18px;
	list-style: none;
}

.ltl-temoignages__benefice {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ltl-temoignages__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #fbd3df;
	color: var(--ltl-marine);
}

.ltl-temoignages__icone svg {
	width: 28px;
	height: 28px;
}

.ltl-temoignages__icone--turquoise { background: #cdeff3; }
.ltl-temoignages__icone--jaune { background: #ffefbf; }

.ltl-temoignages__benefice-texte {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.3;
}

.ltl-temoignages__benefice-texte strong {
	color: var(--ltl-marine);
	font-size: 17px;
	font-weight: 800;
}

.ltl-temoignages__benefice-texte span {
	color: var(--ltl-texte-doux);
	font-size: 15px;
}

.ltl-temoignages__bouton.ltl-bouton {
	align-self: center;
	width: 100%;
	max-width: 360px;
	border-radius: 999px;
}

@media (min-width: 700px) {
	.ltl-temoignages__bouton.ltl-bouton {
		position: relative;
	}

	.ltl-temoignages__bouton::after {
		content: "";
		position: absolute;
		top: -22px;
		right: -20px;
		width: 34px;
		height: 34px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23e8336a' stroke-width='4.5' stroke-linecap='round'%3E%3Cpath d='M23 4l3 11M8 12l10 8M4 28l13-2'/%3E%3C/svg%3E") no-repeat center / contain;
		pointer-events: none;
	}
}

.ltl-temoignages__bouton svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	transition: transform 0.2s var(--ltl-ease);
}

@media (hover: hover) and (pointer: fine) {
	.ltl-temoignages__bouton:hover svg {
		transform: translateX(3px);
	}
}

/* Très petits écrans : libellé du bouton sur une ligne. */
@media (max-width: 379px) {
	.ltl-temoignages__bandeau {
		padding-inline: 16px;
	}

	.ltl-temoignages__bouton.ltl-bouton {
		padding-inline: 14px;
		font-size: 16px;
	}
}

/* ------------------------------------------------------------------ */
/* Visionneuse                                                        */
/* ------------------------------------------------------------------ */

.ltl-temoignages__visionneuse {
	max-width: min(92vw, 760px);
	max-height: 92vh;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.ltl-temoignages__visionneuse::backdrop {
	background: rgba(8, 18, 48, 0.82);
}

.ltl-temoignages__visionneuse[open] {
	animation: ltl-temoignages-apparition 0.22s var(--ltl-ease);
}

@keyframes ltl-temoignages-apparition {
	from {
		opacity: 0;
		transform: scale(0.97);
	}
}

.ltl-temoignages__visionneuse-cadre img,
.ltl-temoignages__visionneuse-cadre video {
	display: block;
	max-width: min(92vw, 760px);
	max-height: 86vh;
	border-radius: 16px;
	background: var(--ltl-blanc);
}

.ltl-temoignages__visionneuse-cadre img {
	width: auto;
	height: auto;
}

.ltl-temoignages__visionneuse-cadre video {
	width: min(92vw, 86vh, 760px);
	aspect-ratio: 1;
	background: #000;
}

.ltl-temoignages__fermer {
	position: fixed;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ltl-blanc);
	color: var(--ltl-marine);
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.ltl-temoignages__fermer svg {
	width: 22px;
	height: 22px;
}

.ltl-temoignages__fermer:focus-visible {
	outline: 3px solid var(--ltl-turquoise-halo);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ltl-temoignages__visionneuse[open] {
		animation: none;
	}

	.ltl-temoignages__carrousel .ltl-carrousel__piste {
		transition: none;
	}

	.ltl-temoignage__media img,
	.ltl-temoignage__lecture,
	.ltl-temoignages__point::before,
	.ltl-temoignages__bouton svg {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Tablette et ordinateur                                             */
/* ------------------------------------------------------------------ */

@media (min-width: 700px) {
	.ltl-temoignages__carrousel[data-ltl-profondeur] {
		--ltl-profondeur-rotation: 7;
		--ltl-profondeur-echelle: 0.09;
		--ltl-profondeur-avant: 0.03;
		--ltl-profondeur-recul: 30;
		--ltl-profondeur-elevation: 40;
		--ltl-profondeur-rapprochement: 12;
		--ltl-profondeur-duree: 540;
		--ltl-carrousel-apercu: 15%;
	}

	.ltl-temoignages__carrousel[data-ltl-profondeur] .ltl-carrousel__piste {
		padding-top: 44px;
		padding-bottom: 104px;
		margin-bottom: -48px;
	}

	.ltl-temoignages__pagination {
		position: relative;
		z-index: 20;
	}

	.ltl-temoignages__bandeau {
		padding: 28px 32px;
	}

	.ltl-temoignages__benefices {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}

	.ltl-temoignages__benefice {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.ltl-temoignages__bouton.ltl-bouton {
		width: auto;
	}
}

@media (min-width: 900px) {
	.ltl-temoignages .ltl-section__intro {
		font-size: 18px;
	}
}

@media (min-width: 1024px) {
	/* Flèches sur les côtés, à cheval sur le bord des cartes voisines (maquette). */
	.ltl-temoignages .ltl-carrousel__bouton {
		position: relative;
		z-index: 20;
		grid-row: 1;
		width: 56px;
		height: 56px;
	}

	.ltl-temoignages .ltl-carrousel__bouton[data-ltl-precedent] {
		justify-self: start;
		margin-left: -28px;
	}

	.ltl-temoignages .ltl-carrousel__bouton[data-ltl-suivant] {
		justify-self: end;
		margin-right: -28px;
	}

	.ltl-temoignages__pagination {
		grid-column: 1 / -1;
	}

	/* Trois cartes : celle du centre au premier plan. Marges intérieures d'une carte
	 * de chaque côté, pour que la première et la dernière puissent venir au centre. */
	.ltl-temoignages__carrousel[data-ltl-profondeur] {
		--ltl-carrousel-ecart: 0px;
		--ltl-profondeur-rotation: 14;
		--ltl-profondeur-echelle: 0.12;
		--ltl-profondeur-avant: 0.05;
		--ltl-profondeur-recul: 50;
		--ltl-profondeur-elevation: 80;
		--ltl-profondeur-rapprochement: 30;
		--ltl-profondeur-perspective: 1000;
		--ltl-profondeur-duree: 580;
	}

	.ltl-temoignages__carrousel[data-ltl-profondeur] .ltl-carrousel__piste {
		grid-auto-columns: calc((100cqw - var(--ltl-carrousel-ecart) * 2) / 3);
		margin: 0;
		padding-inline: calc((100cqw - var(--ltl-carrousel-ecart) * 2) / 3 + var(--ltl-carrousel-ecart));
		/* Place pour l'avancée de la carte du centre et son ombre. */
		/* Ombre entière sous la carte du centre ; la pagination remonte dans son fondu. */
		padding-block: 64px 128px;
		margin-bottom: -56px;
		scroll-padding-inline: 0;
	}

	.ltl-temoignages__pagination {
		position: relative;
		z-index: 20;
	}

	.ltl-temoignage__carte {
		padding: 20px;
	}

	.ltl-temoignages__bandeau {
		padding: 28px 36px;
	}

	.ltl-temoignages__benefices {
		gap: 0;
	}

	.ltl-temoignages__benefice {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		padding-inline: 24px;
		border-left: 1px solid rgba(209, 28, 87, 0.25);
	}

	.ltl-temoignages__benefice:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.ltl-temoignages__bouton.ltl-bouton {
		flex-shrink: 0;
		padding-inline: 32px;
	}
}

@media (min-width: 1200px) {
	.ltl-temoignages__bandeau {
		flex-direction: row;
		align-items: center;
		gap: 28px;
	}

	.ltl-temoignages__benefices {
		flex: 1;
	}

	.ltl-temoignages__benefice {
		padding-inline: 20px;
	}
}

@media (min-width: 1200px) {
	.ltl-temoignage__citation p {
		font-size: 19px;
	}
}