/*
 * Composants communs aux sections de la page d'accueil 2026 :
 * section, en-tête de section, boutons, carrousel, carte.
 *
 * Continuité avec le bloc Avantages : mêmes marges, mêmes tailles de titres,
 * mêmes arrondis. Interactions identiques à celles des boutons du HERO :
 * enfoncement à l'appui, survol réservé aux vraies souris, pas de mouvement
 * si l'utilisateur le refuse.
 */

/* ------------------------------------------------------------------ */
/* Section                                                            */
/* ------------------------------------------------------------------ */

.ltl-section {
	padding: 56px var(--ltl-gouttiere);
	color: var(--ltl-marine);
	font-family: var(--ltl-font-texte);
}

/* Même modèle de boîte sur le site (page.css) et dans l'éditeur. */
.ltl-section,
.ltl-section *,
.ltl-section *::before,
.ltl-section *::after {
	box-sizing: border-box;
}

.ltl-section :where(h2, h3, p, ul, ol, figure, blockquote) {
	margin: 0;
	padding: 0;
}

/* Les textes gardent la police de la section, même si le thème (éditeur de test,
 * CSS personnalisé de Divi) en impose une aux paragraphes. Double classe pour
 * l'emporter ; les éléments en Fredoka le précisent avec la même force. */
.ltl-section.ltl-section :is(p, ul, ol, li, dl, blockquote, figcaption, summary) {
	font-family: inherit;
}

.ltl-section--creme { background: var(--ltl-creme); }
.ltl-section--blanc { background: var(--ltl-blanc); }

.ltl-section__contenu {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: var(--ltl-largeur-max);
	margin: 0 auto;
}

.ltl-section__entete {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 760px;
}

.ltl-section__titre {
	color: inherit;
	font-family: var(--ltl-font-titre);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.4px;
	text-wrap: balance;
}

.ltl-section__accroche {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	text-wrap: pretty;
}

.ltl-section__intro {
	color: var(--ltl-texte-doux);
	font-size: 16px;
	line-height: 1.6;
	text-wrap: pretty;
}

.ltl-section__conclusion {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
}

@media (min-width: 900px) {
	.ltl-section {
		padding-block: 88px;
	}

	.ltl-section__contenu {
		gap: 40px;
	}

	.ltl-section__titre {
		font-size: 44px;
		letter-spacing: -0.8px;
	}

	.ltl-section__accroche {
		font-size: 20px;
	}

	.ltl-section__intro {
		font-size: 17px;
	}
}

/* ------------------------------------------------------------------ */
/* Boutons                                                            */
/* ------------------------------------------------------------------ */

.ltl-boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ltl-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: var(--ltl-rayon-m);
	font-family: var(--ltl-font-texte);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s var(--ltl-ease), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.ltl-bouton--principal {
	background: var(--ltl-rose-action);
	color: var(--ltl-blanc);
	box-shadow: 0 5px 0 var(--ltl-rose-ombre);
}

.ltl-bouton--secondaire {
	border-color: var(--ltl-marine);
	background: transparent;
	color: var(--ltl-marine);
}

/* Sur fond sombre. */
.ltl-bouton--clair {
	background: var(--ltl-blanc);
	color: var(--ltl-marine);
}

.ltl-bouton--contour-clair {
	border-color: var(--ltl-blanc);
	background: transparent;
	color: var(--ltl-blanc);
}

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

@media (hover: hover) and (pointer: fine) {
	.ltl-bouton--principal:hover { background: #bb1a4f; color: var(--ltl-blanc); }
	.ltl-bouton--secondaire:hover { background: var(--ltl-marine); color: var(--ltl-blanc); }
	.ltl-bouton--clair:hover { background: var(--ltl-turquoise-clair); color: var(--ltl-marine); }
	.ltl-bouton--contour-clair:hover { background: var(--ltl-blanc); color: var(--ltl-marine); }
}

/* Appui : léger enfoncement, plus rapide que le retour (mêmes valeurs que le HERO). */
.ltl-bouton:active {
	transform: scale(0.98);
	transition-duration: 140ms, 0.2s, 0.2s, 0.2s;
}

/* Lien textuel avec flèche. */
.ltl-lien {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	color: var(--ltl-turquoise-lien);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.ltl-lien:hover {
		color: var(--ltl-marine);
		text-decoration-thickness: 2px;
	}
}

/* ------------------------------------------------------------------ */
/* Pastille d'icône (même dessin que le bloc Avantages)               */
/* ------------------------------------------------------------------ */

.ltl-pastille {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--ltl-turquoise);
	color: var(--ltl-marine);
}

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

.ltl-pastille--rose { background: var(--ltl-rose); color: var(--ltl-blanc); }
.ltl-pastille--jaune { background: var(--ltl-jaune); color: var(--ltl-marine); }

/* ------------------------------------------------------------------ */
/* Carrousel                                                          */
/* Sans JavaScript : simple liste défilante, aimantée.                */
/* Avec assets/js/carrousel.js : boutons précédent / suivant, position.*/
/* Mobile : une carte et le bord de la suivante ; tablette : deux ;   */
/* ordinateur : trois. Aucun défilement automatique.                  */
/* ------------------------------------------------------------------ */

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

.ltl-carrousel__piste {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 84%;
	gap: var(--ltl-carrousel-ecart);
	/* Pleine largeur sur mobile : la carte suivante dépasse du bord de l'écran. */
	margin: 0 calc(var(--ltl-gouttiere) * -1);
	padding: 4px var(--ltl-gouttiere) 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--ltl-gouttiere);
	scrollbar-width: thin;
	scrollbar-color: var(--ltl-bordure) transparent;
	list-style: none;
}

.ltl-carrousel__piste > * {
	scroll-snap-align: start;
	min-width: 0;
}

.ltl-carrousel__piste:focus-visible {
	outline: 3px solid var(--ltl-turquoise-lien);
	outline-offset: 2px;
	border-radius: var(--ltl-rayon-s);
}

.ltl-carrousel__commandes {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

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

.ltl-carrousel__position {
	margin-right: auto;
	color: var(--ltl-texte-doux);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ltl-carrousel__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var(--ltl-marine);
	border-radius: 50%;
	background: var(--ltl-blanc);
	color: var(--ltl-marine);
	cursor: pointer;
	transition: transform 0.2s var(--ltl-ease), background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

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

.ltl-carrousel__bouton:disabled {
	opacity: 0.35;
	cursor: default;
}

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

@media (hover: hover) and (pointer: fine) {
	.ltl-carrousel__bouton:not(:disabled):hover {
		background: var(--ltl-marine);
		color: var(--ltl-blanc);
	}
}

.ltl-carrousel__bouton:not(:disabled):active {
	transform: scale(0.94);
	transition-duration: 140ms, 0.2s, 0.2s, 0.2s;
}

@media (min-width: 700px) {
	.ltl-carrousel__piste {
		/* Deux cartes et le bord de la troisième. */
		grid-auto-columns: calc((100% - var(--ltl-carrousel-ecart)) / 2.15);
	}
}

@media (min-width: 1024px) {
	.ltl-carrousel {
		--ltl-carrousel-ecart: 20px;
	}

	/* Trois cartes entières, alignées sur la largeur du contenu. */
	.ltl-carrousel__piste {
		grid-auto-columns: calc((100% - var(--ltl-carrousel-ecart) * 2) / 3);
		margin: 0;
		padding-inline: 0;
		scroll-padding-inline: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ltl-carrousel__piste {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------------------ */
/* Carrousel en profondeur (data-ltl-profondeur : avantages, activités)*/
/* La carte la plus proche du centre domine ; les autres sont un peu  */
/* réduites et inclinées (carrousel.js). Aimantation au centre.       */
/* Mobile : une carte et les bords des voisines ; tablette : une carte */
/* et de larges aperçus ; ordinateur : trois cartes.                  */
/* Réglages de l'effet, lus par le script :                           */
/* ------------------------------------------------------------------ */

.ltl-carrousel[data-ltl-profondeur] {
	--ltl-profondeur-rotation: 7;       /* degrés, cartes voisines */
	--ltl-profondeur-echelle: 0.07;     /* réduction des cartes voisines */
	--ltl-profondeur-opacite: 0.35;     /* estompage des cartes éloignées */
	--ltl-profondeur-parallaxe: 16;     /* px, décalage de l'illustration */
	--ltl-profondeur-perspective: 1200; /* px */
	--ltl-carrousel-apercu: 26px;
}

.ltl-carrousel[data-ltl-profondeur] .ltl-carrousel__piste {
	position: relative;
	grid-auto-columns: 100%;
	/* Place au-dessus pour les illustrations qui dépassent, au-dessous pour les ombres. */
	padding: 40px calc(var(--ltl-gouttiere) + var(--ltl-carrousel-apercu)) 30px;
	scroll-padding-inline: calc(var(--ltl-gouttiere) + var(--ltl-carrousel-apercu));
}

.ltl-carrousel[data-ltl-profondeur] .ltl-carrousel__piste > * {
	display: flex;
	scroll-snap-align: center;
	transform-origin: 50% 60%;
	will-change: transform;
}

.ltl-carrousel[data-ltl-profondeur] .ltl-carrousel__piste > * > * {
	flex: 1;
	min-width: 0;
}

/* Pendant un glissement ou un défilement amorti : pas d'aimantation. */
.ltl-carrousel--libre .ltl-carrousel__piste {
	scroll-snap-type: none;
}

@media (hover: hover) and (pointer: fine) {
	.ltl-carrousel--pret .ltl-carrousel__piste {
		cursor: grab;
	}

	/* Les textes restent sélectionnables. */
	.ltl-carrousel--pret .ltl-carrousel__piste :is(p, h3, strong, blockquote) {
		cursor: text;
	}
}

.ltl-carrousel--glisse .ltl-carrousel__piste,
.ltl-carrousel--glisse .ltl-carrousel__piste * {
	cursor: grabbing !important;
	user-select: none;
}

@media (min-width: 700px) {
	.ltl-carrousel[data-ltl-profondeur] {
		--ltl-carrousel-apercu: 17%;
	}
}

@media (min-width: 1024px) {
	.ltl-carrousel[data-ltl-profondeur] {
		--ltl-profondeur-rotation: 5;
		--ltl-profondeur-echelle: 0.05;
	}

	/* Trois cartes : celle du milieu domine. */
	.ltl-carrousel[data-ltl-profondeur] .ltl-carrousel__piste {
		grid-auto-columns: calc((100% - var(--ltl-carrousel-ecart) * 2) / 3);
		margin: 0;
		padding-inline: 0;
		scroll-padding-inline: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Apparition au défilement (assets/js/apparition.js)                 */
/* ------------------------------------------------------------------ */

.ltl-apparition--attente [data-ltl-apparition-element] {
	opacity: 0;
	translate: 0 18px;
}

.ltl-apparition--visible [data-ltl-apparition-element] {
	animation: ltl-apparition 0.5s var(--ltl-ease) both;
}

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

/* À l'impression, tout est affiché, même ce qui n'a pas encore défilé. */
@media print {
	.ltl-apparition--attente [data-ltl-apparition-element] {
		opacity: 1;
		translate: none;
	}
}

/* ------------------------------------------------------------------ */
/* Carte en relief                                                    */
/* Ombre douce au repos ; au survol (souris), la carte s'élève et son */
/* ombre s'étend (opacité d'un pseudo-élément, pas d'ombre animée).   */
/* ------------------------------------------------------------------ */

.ltl-carte-relief {
	position: relative;
	box-shadow: 0 1px 2px rgba(14, 27, 61, 0.05), 0 12px 28px -16px rgba(14, 27, 61, 0.22);
	transition: transform 0.3s var(--ltl-ease);
}

.ltl-carte-relief::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 26px 48px -22px rgba(14, 27, 61, 0.38);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.ltl-carrousel:not(.ltl-carrousel--glisse) .ltl-carte-relief:hover {
		transform: translateY(-6px);
	}

	.ltl-carrousel:not(.ltl-carrousel--glisse) .ltl-carte-relief:hover::after {
		opacity: 1;
	}

	.ltl-carrousel:not(.ltl-carrousel--glisse) .ltl-carte-relief:hover .ltl-illustration__mascotte,
	.ltl-carrousel:not(.ltl-carrousel--glisse) .ltl-carte-relief:hover .ltl-illustration__badge {
		transform: translateY(-5px) rotate(-2deg);
	}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
	.ltl-carte-relief:hover::after {
		opacity: 1;
	}
}

/* ------------------------------------------------------------------ */
/* Emplacement d'illustration (mascotte ou composition d'icône)       */
/* Mascottes : PNG ou WebP transparents, de préférence carrés ; elles */
/* reposent sur une « scène » teintée, avec une ombre au sol, et      */
/* dépassent légèrement vers le haut. Sans image : l'icône de la carte */
/* dans un badge, avec deux formes décoratives.                       */
/* ------------------------------------------------------------------ */

.ltl-illustration {
	--ltl-scene: rgba(0, 168, 192, 0.14);
	--ltl-scene-accent: var(--ltl-turquoise);
	position: relative;
	flex-shrink: 0;
	height: 150px;
	/* Coins asymétriques : le bas gauche plus arrondi. */
	border-radius: 20px 20px 20px 56px;
	background:
		radial-gradient(120% 90% at 78% 12%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 60%),
		var(--ltl-scene);
}

.ltl-illustration--rose {
	--ltl-scene: rgba(232, 51, 106, 0.12);
	--ltl-scene-accent: var(--ltl-rose);
}

.ltl-illustration--jaune {
	--ltl-scene: rgba(255, 201, 60, 0.24);
	--ltl-scene-accent: #e0a800;
}

/* Ombre au sol. */
.ltl-illustration::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 10px;
	width: 56%;
	height: 16px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(14, 27, 61, 0.22), rgba(14, 27, 61, 0));
	transform: translateX(-42%);
	pointer-events: none;
}

/* Élément déplacé par la parallaxe du carrousel (carrousel.js). */
.ltl-illustration__image {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	pointer-events: none;
}

.ltl-illustration__mascotte {
	display: block;
	width: 64%;
	max-width: 230px;
	aspect-ratio: 1;
	height: auto;
	margin: 0 0 4px 8%;
	object-fit: contain;
	object-position: 50% 100%;
	transition: transform 0.3s var(--ltl-ease);
	-webkit-user-drag: none;
}

/* Sans image : badge d'icône et deux formes, en composition décalée. */
.ltl-illustration--icone::before {
	content: "";
	position: absolute;
	top: 18px;
	right: 20%;
	width: 46px;
	height: 46px;
	border: 3px solid var(--ltl-scene-accent);
	border-radius: 50%;
	opacity: 0.35;
}

.ltl-illustration--icone .ltl-illustration__image {
	align-items: center;
	justify-content: flex-start;
	padding-left: 18%;
}

.ltl-illustration--icone .ltl-illustration__image::after {
	content: "";
	position: absolute;
	right: 14%;
	bottom: 30px;
	width: 34px;
	height: 10px;
	border-radius: 999px;
	background: var(--ltl-scene-accent);
	opacity: 0.45;
	transform: rotate(-24deg);
}

.ltl-illustration__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 24px;
	background: var(--ltl-blanc);
	color: var(--ltl-scene-accent);
	box-shadow: 0 14px 26px -12px rgba(14, 27, 61, 0.35);
	transform: rotate(-4deg);
	transition: transform 0.3s var(--ltl-ease);
}

.ltl-illustration--jaune .ltl-illustration__badge {
	color: var(--ltl-marine);
}

.ltl-illustration__badge svg {
	width: 36px;
	height: 36px;
}

@media (min-width: 900px) {
	.ltl-illustration {
		height: 168px;
	}
}


/* Images de la médiathèque : certains thèmes ajoutent un style en ligne (largeur,
 * hauteur) aux images ; nos sections gardent leurs propres dimensions. */
.ltl-section img.ltl-appel__image,
.ltl-section img.ltl-temoignage__image {
	max-width: 100% !important;
	height: auto !important;
}

.ltl-section img.ltl-appel__image {
	width: 160px !important;
	height: 160px !important;
}

@media (min-width: 900px) {
	.ltl-section img.ltl-appel__image {
		width: 220px !important;
		height: 220px !important;
	}
}

.ltl-section img.ltl-temoignage__image {
	width: 100% !important;
}

.ltl-section img.ltl-illustration__mascotte {
	width: 64% !important;
	max-width: 230px !important;
	height: auto !important;
}