/*
 * Bloc Fondatrice — « La story : à l'origine du club, une enseignante ».
 *
 * Mobile : illustration entière en haut (proportions d'origine, aucun recadrage),
 * découpe en vague en bas de l'image, puis le texte sur fond crème.
 * Ordinateur (≥ 900 px) : texte à gauche, aligné sur les autres sections ;
 * illustration à droite jusqu'au bord de l'écran, séparée du texte par une
 * découpe en vague (masque CSS : aucune image de plus).
 * Récit complet : panneau rosé sous la présentation, déployé au clic (view.js).
 */

.ltl-section.ltl-fondatrice {
	position: relative;
	padding: 0;
	overflow: hidden;
	background: var(--ltl-creme);
}

/* Largeur du texte : celle des autres sections (gouttière, puis largeur maximale centrée). */
.ltl-fondatrice {
	--ltl-story-marge: max(var(--ltl-gouttiere), calc((100% - var(--ltl-largeur-max)) / 2));
}

/* ------------------------------------------------------------------ */
/* Présentation : texte et illustration                               */
/* ------------------------------------------------------------------ */

.ltl-fondatrice__scene {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-inline: var(--ltl-story-marge);
}

/* Halo rosé discret derrière le texte, comme sur la maquette. */
.ltl-fondatrice__scene::before {
	content: "";
	position: absolute;
	top: -120px;
	left: -160px;
	width: 520px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(253, 232, 238, 0.95), rgba(253, 232, 238, 0));
	pointer-events: none;
}

.ltl-fondatrice__illustration {
	position: relative;
	margin: 0 calc(-1 * var(--ltl-story-marge));
	/* Mobile : découpe en vague en bas de l'image. */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1000V905C850 975 700 920 540 955S220 1000 0 945Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1000V905C850 975 700 920 540 955S220 1000 0 945Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* Dimensions de l'image : proportions respectées (certains thèmes ajoutent une
 * hauteur en ligne aux images). */
.ltl-section img.ltl-fondatrice__image {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: 38% 50%;
}

.ltl-fondatrice__texte {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-block: 18px 56px;
}

.ltl-fondatrice__surtitre {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	color: var(--ltl-rose-texte);
	font-family: var(--ltl-font-titre);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

/* Petits traits de part et d'autre du surtitre (étincelles de la maquette). */
.ltl-fondatrice__surtitre::before,
.ltl-fondatrice__surtitre::after {
	content: "";
	width: 18px;
	height: 12px;
	background:
		linear-gradient(var(--ltl-rose), var(--ltl-rose)) 0 1px / 12px 2px no-repeat,
		linear-gradient(var(--ltl-rose), var(--ltl-rose)) 4px 10px / 14px 2px no-repeat;
	opacity: 0.7;
}

.ltl-fondatrice__surtitre::after {
	transform: scaleX(-1);
}

.ltl-fondatrice.ltl-fondatrice .ltl-fondatrice__titre {
	color: var(--ltl-marine);
	text-wrap: balance;
}

.ltl-fondatrice__titre em {
	color: var(--ltl-rose-action);
	font-style: normal;
}

.ltl-fondatrice__extrait {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 560px;
	margin-top: 20px;
	color: var(--ltl-marine);
	font-size: 16px;
	line-height: 1.65;
	/* Suite estompée, comme sur la maquette : le texte reste lisible. */
	-webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0.45));
	mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0.45));
}

.ltl-fondatrice.ltl-fondatrice .ltl-fondatrice__extrait p {
	margin: 0;
}

.ltl-fondatrice__extrait strong {
	font-weight: 800;
}

/* Trois points roses : le récit continue. */
.ltl-fondatrice__points {
	display: flex;
	gap: 7px;
	margin: 14px 0 0;
}

.ltl-fondatrice__points span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ltl-rose);
}

.ltl-fondatrice__bouton {
	gap: 14px;
	margin-top: 26px;
	padding-right: 12px;
	border-radius: 999px;
	cursor: pointer;
}

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

.ltl-fondatrice__bouton-fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ltl-blanc);
	color: var(--ltl-rose-action);
	transition: transform 0.2s var(--ltl-ease);
}

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

/* Flèche vers le bas quand le récit est ouvert. */
.ltl-fondatrice__bouton[aria-expanded="true"] .ltl-fondatrice__bouton-fleche {
	transform: rotate(90deg);
}

/* Avion en papier et son trajet en pointillés (décor discret). */
.ltl-fondatrice__avion {
	align-self: flex-end;
	width: 150px;
	height: auto;
	margin: 18px 10% 0 0;
	color: var(--ltl-rose);
	opacity: 0.75;
}

/* ------------------------------------------------------------------ */
/* Récit complet                                                      */
/* ------------------------------------------------------------------ */

.ltl-fondatrice__suite {
	padding-inline: var(--ltl-story-marge);
}

.ltl-fondatrice__recit {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.45s var(--ltl-ease), opacity 0.3s var(--ltl-ease);
}

/* Fermé (seulement quand view.js a pris la main : sans JavaScript, le récit reste affiché). */
.ltl-fondatrice--js .ltl-fondatrice__recit:not(.ltl-fondatrice__recit--ouvert) {
	grid-template-rows: 0fr;
	opacity: 0;
}

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

.ltl-fondatrice__recit-interieur {
	min-height: 0;
	overflow: hidden;
}

.ltl-fondatrice__recit-carte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	margin-bottom: 56px;
	padding: 28px 22px;
	border-radius: 28px;
	background: var(--ltl-rose-clair);
}

.ltl-fondatrice__recit-texte {
	color: var(--ltl-marine);
	font-size: 16px;
	line-height: 1.7;
}

.ltl-fondatrice.ltl-fondatrice .ltl-fondatrice__recit-texte p {
	margin: 0 0 1em;
}

.ltl-fondatrice.ltl-fondatrice .ltl-fondatrice__recit-texte p:last-child {
	margin-bottom: 0;
}

.ltl-fondatrice__fermer {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 18px 8px 10px;
	border: 2px solid var(--ltl-rose-action);
	border-radius: 999px;
	background: var(--ltl-blanc);
	color: var(--ltl-rose-texte);
	font-family: var(--ltl-font-texte);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s var(--ltl-ease), transform 0.14s var(--ltl-ease);
}

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

.ltl-fondatrice__fermer-fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ltl-rose-action);
	color: var(--ltl-blanc);
}

.ltl-fondatrice__fermer-fleche svg {
	width: 16px;
	height: 16px;
}

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

.ltl-fondatrice__fermer:active {
	transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
	.ltl-fondatrice__fermer:hover {
		background: var(--ltl-rose-clair);
	}

	.ltl-fondatrice__bouton:hover .ltl-fondatrice__bouton-fleche {
		transform: translateX(3px);
	}

	.ltl-fondatrice__bouton[aria-expanded="true"]:hover .ltl-fondatrice__bouton-fleche {
		transform: rotate(90deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ltl-fondatrice__recit,
	.ltl-fondatrice__bouton-fleche,
	.ltl-fondatrice__fermer {
		transition: none;
	}
}

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

@media (min-width: 700px) {
	.ltl-fondatrice__recit-carte {
		padding: 36px 40px;
	}

	.ltl-fondatrice__recit-texte {
		columns: 2 280px;
		column-gap: 48px;
	}
}

@media (min-width: 900px) {
	.ltl-fondatrice {
		--ltl-story-image: 54%;
	}

	.ltl-fondatrice__scene {
		display: grid;
		grid-template-columns: minmax(0, calc(100% - var(--ltl-story-image))) minmax(0, var(--ltl-story-image));
	}

	.ltl-fondatrice__texte {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		padding-block: 56px;
		padding-right: 32px;
	}

	/* Extrait limité en hauteur, comme sur la maquette : le second paragraphe
	 * s'arrête en fin de ligne (jamais au milieu d'un mot), la suite reste dans
	 * la page et se lit en entier dans le récit déployé. */
	.ltl-fondatrice.ltl-fondatrice .ltl-fondatrice__extrait p:last-child:not(:first-child) {
		max-height: calc(4 * 1.65em); /* 4 lignes entières, sans points de suspension ajoutés. */
		overflow: hidden;
	}

	/* Petit écran d'ordinateur : pas d'avion, pour laisser la place à l'image. */
	.ltl-fondatrice__avion {
		display: none;
	}

	/* Illustration : de la vague jusqu'au bord droit de l'écran, sur toute la hauteur. */
	.ltl-fondatrice__illustration {
		grid-column: 2;
		grid-row: 1;
		margin: 0 calc(-1 * var(--ltl-story-marge)) 0 -7%;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M150 0C60 110 190 250 105 410S30 690 130 830C170 890 120 950 95 1000H1000V0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M150 0C60 110 190 250 105 410S30 690 130 830C170 890 120 950 95 1000H1000V0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	}

	/* Hauteur naturelle de l'image (3:2) au moins ; si le texte est plus haut,
	 * l'image le suit, recadrée autour de l'enseignante et de l'ordinateur. */
	/* Hauteur minimale = 2/3 de la largeur (espace réservé en pourcentage de la
	 * largeur : il ne modifie jamais la largeur de la colonne). */
	.ltl-fondatrice__illustration::before {
		content: "";
		display: block;
		padding-top: 66.667%;
	}

	.ltl-section img.ltl-fondatrice__image {
		position: absolute;
		inset: 0;
		height: 100% !important;
		aspect-ratio: auto;
		object-position: 52% 50%;
	}

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

	.ltl-fondatrice__surtitre {
		font-size: 26px;
	}

	.ltl-fondatrice__recit-carte {
		margin-top: 8px;
		margin-bottom: 88px;
		padding: 44px 48px;
	}
}

@media (min-width: 1200px) {
	.ltl-fondatrice {
		--ltl-story-image: 60%;
	}

	.ltl-fondatrice.ltl-fondatrice .ltl-fondatrice__extrait p:last-child:not(:first-child) {
		max-height: calc(5 * 1.65em);
	}

	.ltl-fondatrice__avion {
		display: block;
	}

	.ltl-fondatrice__recit-texte {
		columns: 3 260px;
	}
}