/* ═══════════════════════════════════════════════════════════════════════════
   LES ÉCOLES — Tout Est Possible
   Feuille commune aux quatre écoles.

   Principe (consigne de Kévin, 28/09/2026) : une base commune (typo, fond,
   logo TEP) pour qu'on sente une seule maison, et la couleur de l'école
   réservée aux éléments particuliers : boutons, titres, bandeaux.
   → Tout ce qui dépend de l'école passe par les variables --ec-* définies
     dans le bloc « Palettes », sous [data-ecole="…"]. Nulle part ailleurs
     une couleur d'école n'est écrite en dur.

   ⚠️ SPÉCIFICITÉ : TOUTES les règles commencent par #ecoles-page.
   Le reset des balises (#ecoles-page p…) pèse (1,0,1) ; un composant écrit
   #ecoles-page .ec-xxx pèse (1,1,0) et gagne. Un composant écrit avec une
   classe seule (.ec-xxx) perdrait contre le reset, en silence : c'est le
   piège qui avait tué toutes les marges de TEP 2026.

   Typographie : public de 50 à 70 ans. Texte courant 21 px minimum, jamais
   rien sous 16 px, boutons 19 px et plus.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Base commune ──────────────────────────────────────────────────────── */
#ecoles-page {
	--ec-fond:        #fbf7f2;   /* ivoire, fond de toutes les écoles */
	--ec-fond-carte:  #ffffff;
	--ec-encre:       #231c24;   /* titres neutres, texte fort */
	--ec-texte:       #3a3039;   /* texte courant */
	--ec-doux:        #66585f;   /* notes (6:1 sur l'ivoire) */
	--ec-filet:       #e7ddd3;
	--ec-sombre:      #1f1820;   /* sections sombres */
	--ec-sombre-2:    #2a2129;
	--ec-sombre-texte:#eee6e9;

	--ec-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--ec-sans:  'Montserrat', 'Helvetica Neue', Arial, sans-serif;

	--ec-rayon: 22px;
	--ec-ombre: 0 18px 50px -24px rgba(35, 28, 36, .35);

	display: block;
	background: var(--ec-fond);
	color: var(--ec-texte);
	font-family: var(--ec-sans);
	font-size: 21px;
	line-height: 1.8;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* ── Palettes : la seule chose qui change d'une école à l'autre ──────────
   --ec-accent   titres et mots en relief, sur fond clair   (≥ 5,3:1 sur l'ivoire)
   --ec-pastel   la teinte « signature », pour les bandeaux  → TOUJOURS texte foncé
   --ec-teinte   fond très clair des sections teintées
   --ec-btn      fond des boutons        --ec-btn-texte  texte des boutons (≥ 6:1)
   --ec-sur-sombre  l'accent lisible sur les sections sombres (≥ 9:1)

   Rose clair et abricot : le blanc y plafonne à 1,7:1, illisible. Sur ces
   teintes, le texte est foncé. Les boutons de l'Amour prennent un rose
   SOUTENU qui porte du blanc (6,6:1). Ceux de la Parentalité gardent
   l'abricot, avec un texte brun foncé (8,2:1). ─────────────────────────── */
#ecoles-page[data-ecole="amour"] {
	--ec-accent: #a3345a;  --ec-pastel: #e8b4bc;  --ec-teinte: #f9e8ec;
	--ec-btn:    #a3345a;  --ec-btn-hover: #8a2849;  --ec-btn-texte: #ffffff;
	--ec-sur-sombre: #f0b3c1;
}
#ecoles-page[data-ecole="argent"] {
	--ec-accent: #1f4f96;  --ec-pastel: #a9c4ea;  --ec-teinte: #e8eef9;
	--ec-btn:    #1f4f96;  --ec-btn-hover: #173d76;  --ec-btn-texte: #ffffff;
	--ec-sur-sombre: #9fc2f2;
}
#ecoles-page[data-ecole="parentalite"] {
	--ec-accent: #a14a10;  --ec-pastel: #f6b98a;  --ec-teinte: #fdefe3;
	--ec-btn:    #f0a063;  --ec-btn-hover: #e98f4b;  --ec-btn-texte: #2a1606;
	--ec-sur-sombre: #f5b27c;
}
#ecoles-page[data-ecole="sante"] {
	--ec-accent: #2a6c46;  --ec-pastel: #a8d5b4;  --ec-teinte: #e6f3ea;
	--ec-btn:    #2a6c46;  --ec-btn-hover: #1f5436;  --ec-btn-texte: #ffffff;
	--ec-sur-sombre: #9fd6ae;
}

/* ── Reset des balises (Divi pose des paddings sur p, h*, ul…) ─────────── */
#ecoles-page h1, #ecoles-page h2, #ecoles-page h3, #ecoles-page p,
#ecoles-page ul, #ecoles-page ol, #ecoles-page li, #ecoles-page figure,
#ecoles-page details, #ecoles-page summary, #ecoles-page aside {
	margin: 0;
	padding: 0;
	line-height: inherit;
}
#ecoles-page ul, #ecoles-page ol { list-style: none; }
#ecoles-page img { max-width: 100%; }
#ecoles-page strong { font-weight: 700; color: inherit; }
#ecoles-page em { font-style: italic; }
#ecoles-page *, #ecoles-page *::before, #ecoles-page *::after { box-sizing: border-box; }

/* ── Mise en page ──────────────────────────────────────────────────────── */
#ecoles-page .ec-wrap {
	width: min(1160px, 92vw);
	margin-inline: auto;
}
#ecoles-page .ec-wrap--etroit { width: min(860px, 92vw); }

#ecoles-page .ec-section { padding: 120px 0; position: relative; }
#ecoles-page .ec--teinte { background: var(--ec-teinte); }
#ecoles-page .ec--sombre { background: var(--ec-sombre); color: var(--ec-sombre-texte); }

/* ── Titres ────────────────────────────────────────────────────────────── */
#ecoles-page .ec-h2 {
	font-family: var(--ec-serif);
	font-weight: 600;
	font-size: clamp(36px, 4.2vw, 54px);
	line-height: 1.12;
	color: var(--ec-accent);
	letter-spacing: -.005em;
	margin-bottom: 36px;
	text-wrap: balance;
}
#ecoles-page .ec-h2--centre { text-align: center; }
#ecoles-page .ec--sombre .ec-h2 { color: var(--ec-sur-sombre); }

/* ── Prose ─────────────────────────────────────────────────────────────── */
#ecoles-page .ec-prose p { margin-bottom: 1.05em; }
#ecoles-page .ec-prose p:last-child { margin-bottom: 0; }
#ecoles-page .ec-prose--centre { text-align: center; max-width: 820px; margin-inline: auto; }

/* Question ou phrase qu'on veut faire entendre : serif italique, couleur de l'école. */
#ecoles-page .ec-prose .ec-exergue {
	font-family: var(--ec-serif);
	font-style: italic;
	font-weight: 600;
	font-size: clamp(27px, 2.6vw, 33px);
	line-height: 1.35;
	color: var(--ec-accent);
	margin: 1.3em 0;
}
#ecoles-page .ec--sombre .ec-prose .ec-exergue { color: var(--ec-sur-sombre); }
#ecoles-page .ec-prose .ec-exergue strong { font-weight: 700; }

/* Phrase de chute d'une section : pleine, avec le filet de l'école. */
#ecoles-page .ec-prose .ec-chute {
	font-weight: 700;
	font-size: clamp(23px, 2.1vw, 26px);
	line-height: 1.5;
	color: var(--ec-encre);
	border-left: 5px solid var(--ec-accent);
	padding-left: 22px;
	margin-top: 1.4em;
}
#ecoles-page .ec--sombre .ec-prose .ec-chute { color: #fff; border-left-color: var(--ec-sur-sombre); }
#ecoles-page .ec-prose--centre .ec-chute { border-left: 0; padding-left: 0; }
#ecoles-page .ec-prose--centre .ec-chute::after {
	content: ""; display: block; width: 64px; height: 4px; border-radius: 4px;
	background: var(--ec-accent); margin: 22px auto 0;
}

#ecoles-page .ec-encart {
	margin-top: 44px;
	background: var(--ec-fond-carte);
	border: 1px solid var(--ec-filet);
	border-radius: 16px;
	padding: 24px 28px;
}
#ecoles-page .ec-encart p {
	font-size: 18px;
	line-height: 1.7;
	font-style: italic;
	color: var(--ec-doux);
	margin: 0;
}
#ecoles-page .ec-encart strong { font-style: normal; color: var(--ec-encre); }

/* ── Images ────────────────────────────────────────────────────────────── */
#ecoles-page .ec-visuel {
	position: relative;
	overflow: hidden;
	border-radius: var(--ec-rayon);
	box-shadow: var(--ec-ombre);
}
#ecoles-page .ec-visuel img {
	display: block;
	width: 100%;
	height: auto;
}
#ecoles-page .ec-visuel--large { margin-bottom: 72px; }

/* Texte + image côte à côte */
#ecoles-page .ec-img--gauche .ec-duo,
#ecoles-page .ec-img--droite .ec-duo {
	display: grid;
	gap: clamp(40px, 6vw, 88px);
	align-items: start;
}
/* Le texte garde la colonne large, quel que soit le côté de l'image. */
#ecoles-page .ec-img--gauche .ec-duo { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
#ecoles-page .ec-img--droite .ec-duo { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
#ecoles-page .ec-img--droite .ec-duo .ec-visuel { order: 2; }
#ecoles-page .ec-img--gauche .ec-duo .ec-visuel,
#ecoles-page .ec-img--droite .ec-duo .ec-visuel {
	position: sticky;
	top: 120px;
}
#ecoles-page .ec-img--haut .ec-duo,
#ecoles-page .ec-img--sans .ec-duo { max-width: 820px; margin-inline: auto; }

/* ── Boutons ───────────────────────────────────────────────────────────── */
#ecoles-page .ec-cta-row { margin-top: 48px; text-align: center; }
#ecoles-page .ec-hero .ec-cta-row { text-align: left; margin-top: 36px; }

#ecoles-page .ec-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: var(--ec-btn);
	color: var(--ec-btn-texte);
	font-family: var(--ec-sans);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
	letter-spacing: .02em;
	text-decoration: none;
	text-align: left;
	padding: 20px 34px;
	border-radius: 999px;
	box-shadow: 0 14px 30px -14px var(--ec-btn);
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
#ecoles-page .ec-btn:hover,
#ecoles-page .ec-btn:focus-visible {
	background: var(--ec-btn-hover);
	color: var(--ec-btn-texte);
	transform: translateY(-2px);
	box-shadow: 0 20px 36px -16px var(--ec-btn);
}
#ecoles-page .ec-btn:focus-visible { outline: 3px solid var(--ec-encre); outline-offset: 4px; }
#ecoles-page .ec--sombre .ec-btn:focus-visible { outline-color: #fff; }
#ecoles-page .ec-btn--lg { font-size: 21px; padding: 24px 42px; }
#ecoles-page .ec-btn__fleche { font-size: 1.15em; transition: transform .2s ease; }
#ecoles-page .ec-btn:hover .ec-btn__fleche { transform: translateX(4px); }

/* Relance remontée sous la section qu'elle conclut. `position: relative` est
   indispensable : la section précédente est positionnée, elle peindrait
   par-dessus le bouton (on n'en voyait plus que l'ombre). */
#ecoles-page .ec-relance { position: relative; z-index: 1; padding: 0 0 110px; margin-top: -60px; }
#ecoles-page .ec-relance .ec-cta-row { margin-top: 0; }

/* ── Héro ──────────────────────────────────────────────────────────────── */
#ecoles-page .ec-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 27px 0 10px;
	background:
		radial-gradient(ellipse 60% 70% at 88% 30%, var(--ec-teinte), transparent 70%),
		var(--ec-fond);
}
#ecoles-page .ec-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: clamp(40px, 5vw, 80px);
	align-items: center;
}
#ecoles-page .ec-hero__marque { display: flex; justify-content: center; margin-bottom: 4px; }
#ecoles-page .ec-hero__logo { display: block; width: 230px; height: auto; }
#ecoles-page .ec-hero__ecole {
	display: inline-block;
	background: var(--ec-pastel);
	color: var(--ec-encre);           /* jamais de blanc sur le pastel */
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.4;
	padding: 10px 20px;
	border-radius: 999px;
	margin-bottom: 30px;
}
#ecoles-page .ec-hero__titre {
	font-family: var(--ec-serif);
	font-weight: 600;
	font-size: clamp(42px, 5.1vw, 70px);
	line-height: 1.06;
	color: var(--ec-encre);
	letter-spacing: -.01em;
	margin-bottom: 30px;
	text-wrap: balance;
}
#ecoles-page .ec-hero__titre em { display: block; color: var(--ec-accent); font-weight: 600; }
#ecoles-page .ec-hero__accroche {
	font-size: clamp(21px, 1.7vw, 23px);
	font-weight: 600;
	line-height: 1.65;
	color: var(--ec-encre);
	margin-bottom: 18px;
	max-width: 36em;
}
#ecoles-page .ec-hero__note {
	font-size: 18px;
	font-style: italic;
	color: var(--ec-doux);
	line-height: 1.7;
	max-width: 36em;
}
#ecoles-page .ec-hero__photo { position: relative; }
#ecoles-page .ec-hero__photo::before {
	/* Aplat de la couleur de l'école, décalé derrière la photo */
	content: "";
	position: absolute;
	inset: 34px -26px -26px 34px;
	background: var(--ec-pastel);
	border-radius: var(--ec-rayon);
	z-index: 0;
}
#ecoles-page .ec-hero__photo img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ec-rayon);
	box-shadow: var(--ec-ombre);
}

/* ── Bandeau : la phrase-clé, sur la teinte signature de l'école ─────────── */
#ecoles-page .ec-bandeau {
	background: linear-gradient(115deg, var(--ec-pastel) 0%, var(--ec-teinte) 45%, var(--ec-pastel) 70%, var(--ec-teinte) 100%);
	background-size: 260% 260%;
	position: relative;
	overflow: hidden;
	color: var(--ec-encre);
	padding: 96px 0;
	text-align: center;
}
#ecoles-page .ec-bandeau__texte {
	font-family: var(--ec-serif);
	font-weight: 700;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.18;
	max-width: 900px;
	margin-inline: auto;
	text-wrap: balance;
}
#ecoles-page .ec-bandeau .ec-cta-row { margin-top: 40px; }

/* ── Conseils ──────────────────────────────────────────────────────────── */
#ecoles-page .ec-conseils__liste {
	counter-reset: conseil;
	display: grid;
	gap: 22px;
	max-width: 900px;
	margin: 56px auto;
}
#ecoles-page .ec-conseil {
	counter-increment: conseil;
	position: relative;
	background: var(--ec-fond-carte);
	border: 1px solid var(--ec-filet);
	border-radius: 18px;
	padding: 30px 36px 30px 96px;
	box-shadow: 0 10px 30px -22px rgba(35, 28, 36, .4);
}
#ecoles-page .ec-conseil::before {
	content: counter(conseil, decimal-leading-zero);
	position: absolute;
	left: 32px; top: 30px;
	font-family: var(--ec-serif);
	font-weight: 700;
	font-size: 34px;
	line-height: 1;
	color: var(--ec-pastel);
}
#ecoles-page .ec-conseil__citation {
	font-family: var(--ec-serif);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(26px, 2.4vw, 30px);
	line-height: 1.3;
	color: var(--ec-accent);
	margin-bottom: 10px;
}
#ecoles-page .ec-conseil__reponse { font-size: 21px; line-height: 1.75; }

/* ── Pour qui ──────────────────────────────────────────────────────────── */
#ecoles-page .ec-pourqui__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: 32px;
	align-items: start;
}
#ecoles-page .ec-pourqui__col {
	background: var(--ec-fond-carte);
	border-radius: var(--ec-rayon);
	padding: 52px 48px;
	box-shadow: var(--ec-ombre);
}
#ecoles-page .ec-pourqui__col .ec-h2 { font-size: clamp(32px, 3.2vw, 42px); margin-bottom: 30px; }
#ecoles-page .ec-pourqui__col--non { background: var(--ec-fond); border: 1px solid var(--ec-filet); box-shadow: none; }
#ecoles-page .ec-pourqui__col--non .ec-h2 { color: var(--ec-encre); }
#ecoles-page .ec-pourqui__intro { font-style: italic; color: var(--ec-doux); margin-bottom: 26px; }

#ecoles-page .ec-liste li {
	position: relative;
	padding-left: 50px;
	margin-bottom: 22px;
	line-height: 1.7;
}
#ecoles-page .ec-liste li:last-child { margin-bottom: 0; }
#ecoles-page .ec-liste li::before {
	position: absolute;
	left: 0; top: .1em;
	width: 32px; height: 32px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
}
#ecoles-page .ec-liste--oui li::before { content: "✓"; background: var(--ec-pastel); color: var(--ec-encre); }
#ecoles-page .ec-liste--non li::before { content: "✕"; background: var(--ec-filet); color: var(--ec-encre); }
#ecoles-page .ec-liste--non strong { display: block; color: var(--ec-encre); }

/* ── Les trois jours ───────────────────────────────────────────────────── */
#ecoles-page .ec-jours__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin-top: 60px;
	counter-reset: none;
}
#ecoles-page .ec-jour {
	background: var(--ec-fond-carte);
	border-radius: var(--ec-rayon);
	overflow: hidden;
	box-shadow: var(--ec-ombre);
	display: flex;
	flex-direction: column;
}
#ecoles-page .ec-jour__visuel img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
#ecoles-page .ec-jour__corps { padding: 32px 32px 38px; }
#ecoles-page .ec-jour__corps .ec-jour__label {   /* (1,2,0) : doit battre .ec-jour__corps p */
	display: inline-block;
	background: var(--ec-pastel);
	color: var(--ec-encre);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.4;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}
#ecoles-page .ec-jour__titre {
	font-family: var(--ec-serif);
	font-weight: 700;
	font-size: 36px;
	line-height: 1.15;
	color: var(--ec-accent);
	margin-bottom: 16px;
}
#ecoles-page .ec-jour__corps p { font-size: 20px; line-height: 1.75; margin-bottom: .9em; }
#ecoles-page .ec-jour__corps p:last-child { margin-bottom: 0; }

/* ── Avant / Après ─────────────────────────────────────────────────────── */
#ecoles-page .ec-aa__tete {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
	max-width: 1000px;
	margin: 50px auto 14px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
}
#ecoles-page .ec-aa__tete span:first-child { color: #b9adb3; padding-left: 30px; }
#ecoles-page .ec-aa__tete span:last-child { grid-column: 3; color: var(--ec-sur-sombre); padding-left: 30px; }
#ecoles-page .ec-aa__liste { max-width: 1000px; margin: 0 auto; display: grid; gap: 16px; }
#ecoles-page .ec-aa__ligne {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
	align-items: stretch;
}
#ecoles-page .ec-aa__avant,
#ecoles-page .ec-aa__apres {
	padding: 24px 30px;
	border-radius: 16px;
	font-size: 20px;
	line-height: 1.65;
}
#ecoles-page .ec-aa__avant { background: var(--ec-sombre-2); color: #cfc3c9; }
#ecoles-page .ec-aa__apres { background: var(--ec-pastel); color: var(--ec-encre); font-weight: 600; }
#ecoles-page .ec-aa__fleche {
	display: grid; place-items: center;
	color: var(--ec-sur-sombre);
	font-size: 28px;
}
#ecoles-page .ec-aa__tag { display: none; }

/* ── Témoignages ───────────────────────────────────────────────────────── */
#ecoles-page .ec-temo__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-top: 56px;
}
#ecoles-page .ec-temo { background: var(--ec-fond-carte); border-radius: var(--ec-rayon); overflow: hidden; box-shadow: var(--ec-ombre); padding-bottom: 26px; }
#ecoles-page .ec-temo__video {
	position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
	border: 0; padding: 0; margin: 0 0 20px; cursor: pointer; background: var(--ec-sombre);
}
#ecoles-page .ec-temo__video img,
#ecoles-page .ec-temo__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
#ecoles-page .ec-temo__play {
	position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%);
	border-radius: 50%; background: var(--ec-btn); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
#ecoles-page .ec-temo__play::after {
	content: ""; position: absolute; left: 31px; top: 24px;
	border-left: 22px solid var(--ec-btn-texte); border-top: 14px solid transparent; border-bottom: 14px solid transparent;
}
#ecoles-page .ec-temo__titre { font-family: var(--ec-serif); font-weight: 700; font-style: italic; font-size: 25px; line-height: 1.35; color: var(--ec-accent); padding: 0 26px; margin-bottom: 8px; }
#ecoles-page .ec-temo__auteur { font-size: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 0 26px; color: var(--ec-doux); }

#ecoles-page .ec-admin-rappel { padding: 40px 0; }
#ecoles-page .ec-admin-rappel p {
	background: #fff8d6; border: 2px dashed #c9a200; border-radius: 12px;
	padding: 20px 24px; font-size: 17px; line-height: 1.6; color: #4a3b00;
}

/* ── Offre ─────────────────────────────────────────────────────────────── */
#ecoles-page .ec-offre {
	background:
		radial-gradient(ellipse 70% 60% at 50% 0%, var(--ec-teinte), transparent 75%),
		var(--ec-fond);
}
/* Cadre : porte la largeur et l'apparition ; la carte (bordure dégradée qui
   tourne) et son halo flou sont empilés dedans. */
#ecoles-page .ec-offre__cadre { position: relative; max-width: 820px; margin-inline: auto; }
#ecoles-page .ec-offre__carte {
	position: relative;
	z-index: 1;
	border-radius: 28px;
	border: 3px solid transparent;
	background:
		linear-gradient(var(--ec-fond-carte), var(--ec-fond-carte)) padding-box,
		conic-gradient(from var(--ec-angle), var(--ec-accent), var(--ec-pastel), var(--ec-teinte), var(--ec-pastel), var(--ec-accent)) border-box;
	padding: 64px clamp(26px, 6vw, 72px) 56px;
	box-shadow: 0 30px 80px -40px rgba(35, 28, 36, .5);
	text-align: center;
}
#ecoles-page .ec-offre__ecole {
	display: inline-block;
	background: var(--ec-pastel); color: var(--ec-encre);
	font-size: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4;
	padding: 8px 18px; border-radius: 999px; margin-bottom: 22px;
}
#ecoles-page .ec-offre__liste { text-align: left; margin: 12px 0 40px; display: grid; gap: 22px; }
#ecoles-page .ec-offre__liste li { position: relative; padding-left: 50px; line-height: 1.7; }
#ecoles-page .ec-offre__liste li::before {
	content: "✓";
	position: absolute; left: 0; top: .1em; width: 32px; height: 32px; border-radius: 50%;
	display: grid; place-items: center; font-size: 17px; font-weight: 700; line-height: 1;
	background: var(--ec-pastel); color: var(--ec-encre);
}
#ecoles-page .ec-offre__liste strong { display: block; color: var(--ec-encre); font-size: 22px; }
#ecoles-page .ec-offre__prix {
	display: flex; justify-content: center; align-items: flex-start; gap: 6px;
	font-family: var(--ec-serif); font-weight: 700; color: var(--ec-accent);
	line-height: 1; padding-top: 30px; border-top: 1px solid var(--ec-filet);
}
#ecoles-page .ec-offre__montant { font-size: clamp(84px, 10vw, 118px); }
#ecoles-page .ec-offre__devise { font-size: clamp(40px, 4.5vw, 54px); margin-top: .18em; }
#ecoles-page .ec-offre .ec-cta-row { margin-top: 30px; }
#ecoles-page .ec-offre__multi { margin-top: 28px; font-size: 18px; line-height: 1.65; color: var(--ec-doux); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
#ecoles-page .ec-faq__liste { margin-top: 50px; display: grid; gap: 14px; }
#ecoles-page .ec-faq__item {
	background: var(--ec-fond-carte);
	border: 1px solid var(--ec-filet);
	border-radius: 16px;
	transition: border-color .2s ease;
}
#ecoles-page .ec-faq__item[open] { border-color: var(--ec-accent); }
#ecoles-page .ec-faq__item summary {
	list-style: none;
	cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 24px 28px;
	font-weight: 700;
	font-size: 21px;
	line-height: 1.45;
	color: var(--ec-encre);
}
#ecoles-page .ec-faq__item summary::-webkit-details-marker { display: none; }
#ecoles-page .ec-faq__item summary:focus-visible { outline: 3px solid var(--ec-accent); outline-offset: 3px; border-radius: 16px; }
#ecoles-page .ec-faq__signe { position: relative; flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--ec-pastel); }
#ecoles-page .ec-faq__signe::before,
#ecoles-page .ec-faq__signe::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2.5px;
	background: var(--ec-encre); transform: translate(-50%, -50%); transition: transform .25s ease;
}
#ecoles-page .ec-faq__signe::after { transform: translate(-50%, -50%) rotate(90deg); }
#ecoles-page .ec-faq__item[open] .ec-faq__signe::after { transform: translate(-50%, -50%) rotate(0deg); }
#ecoles-page .ec-faq__reponse { padding: 0 28px 26px; }
#ecoles-page .ec-faq__reponse p { font-size: 20px; line-height: 1.75; }

/* ── Pour finir ────────────────────────────────────────────────────────── */
#ecoles-page .ec-final .ec-visuel--large { margin-bottom: 64px; }
#ecoles-page .ec-final .ec-h2 { text-align: center; }
#ecoles-page .ec-final .ec-prose .ec-chute { font-family: var(--ec-serif); font-size: clamp(30px, 3vw, 38px); font-weight: 700; line-height: 1.3; }
#ecoles-page .ec-final__prix { text-align: center; margin-top: 20px; font-size: 17px; letter-spacing: .06em; color: #cfc3c9; }

/* ── Apparitions ───────────────────────────────────────────────────────────
   Visible par défaut. Le masquage n'est posé que si le JS tourne ET que le
   visiteur n'a pas demandé moins d'animations : sans JS, sous mouvement
   réduit ou dans une capture, tout est lisible. ─────────────────────────── */
/* → voir le bloc « Effets » en fin de fichier. */

/* ── Tablette ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
	#ecoles-page .ec-section { padding: 90px 0; }
	#ecoles-page .ec-hero { padding: 50px 0 80px; }
	#ecoles-page .ec-hero__grid { grid-template-columns: 1fr; }
	#ecoles-page .ec-hero__photo { order: -1; max-width: 560px; margin: 0 auto 10px; width: 88%; }
	#ecoles-page .ec-hero__photo img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 30%; }
	#ecoles-page .ec-hero__marque { margin-bottom: 40px; }
	#ecoles-page .ec-hero__logo { width: 180px; }

	#ecoles-page .ec-img--gauche .ec-duo,
	#ecoles-page .ec-img--droite .ec-duo { grid-template-columns: 1fr; }
	#ecoles-page .ec-img--droite .ec-duo .ec-visuel { order: 0; }
	#ecoles-page .ec-img--gauche .ec-duo .ec-visuel,
	#ecoles-page .ec-img--droite .ec-duo .ec-visuel { position: static; }

	#ecoles-page .ec-pourqui__grid { grid-template-columns: 1fr; }
	#ecoles-page .ec-jours__grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
}

/* ── Téléphone ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	#ecoles-page { font-size: 19px; }
	#ecoles-page .ec-section { padding: 72px 0; }
	#ecoles-page .ec-relance { padding-bottom: 72px; margin-top: -36px; }
	#ecoles-page .ec-visuel--large { margin-bottom: 44px; }
	#ecoles-page .ec-bandeau { padding: 70px 0; }

	#ecoles-page .ec-btn,
	#ecoles-page .ec-btn--lg { font-size: 19px; padding: 20px 26px; width: 100%; justify-content: center; text-align: center; }

	#ecoles-page .ec-conseil { padding: 26px 22px 26px 22px; }
	#ecoles-page .ec-conseil::before { position: static; display: block; margin-bottom: 8px; }
	#ecoles-page .ec-conseil__reponse { font-size: 19px; }

	#ecoles-page .ec-pourqui__col { padding: 38px 24px; }
	#ecoles-page .ec-liste li { padding-left: 44px; }

	#ecoles-page .ec-jour__corps { padding: 26px 22px 30px; }
	#ecoles-page .ec-jour__corps p { font-size: 19px; }

	/* Avant / Après : une carte par ligne, étiquettes dans chaque bloc */
	#ecoles-page .ec-aa__tete { display: none; }
	#ecoles-page .ec-aa__ligne { grid-template-columns: 1fr; gap: 6px; }
	#ecoles-page .ec-aa__fleche { transform: rotate(90deg); font-size: 24px; height: 30px; }
	#ecoles-page .ec-aa__tag {
		display: block; font-size: 16px; font-weight: 700; letter-spacing: .16em;
		text-transform: uppercase; margin-bottom: 4px; opacity: .8;
	}
	#ecoles-page .ec-aa__avant, #ecoles-page .ec-aa__apres { font-size: 19px; padding: 20px 22px; }
	#ecoles-page .ec-aa__liste { gap: 30px; }

	#ecoles-page .ec-faq__item summary { font-size: 19px; padding: 20px 20px; }
	#ecoles-page .ec-faq__reponse { padding: 0 20px 22px; }
	#ecoles-page .ec-faq__reponse p { font-size: 19px; }

	#ecoles-page .ec-offre__liste strong { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EFFETS (demande de Kévin, 29/09/2026 : « plus dynamique, des fonds qui bougent »)

   Deux niveaux, posés sur <html> AVANT le premier rendu (les-ecoles.php) :
   · html.ec-anim  rendu complet : dérives, parallaxe, particules, reflets.
                   Visiteurs sans restriction + administrateur connecté.
   · html.ec-doux  visiteur « moins d'animations » : fondus seulement, aucun
                   déplacement. On ne coupe PAS tout : une page figée paraît
                   morte, et ce réglage est très répandu sur Mac.
   html.ec-js est ajouté par ecoles.js : sans JS, rien n'est jamais masqué.

   ⚠️ Apparitions : opacity + transform uniquement, jamais clip-path (il
   annule l'IntersectionObserver, cf. les titres TEP 2026 invisibles).
   ⚠️ Survol des cartes : propriété `translate`, pas `transform`, pour ne pas
   se battre avec l'apparition qui anime déjà `transform`.
═══════════════════════════════════════════════════════════════════════════ */

@property --ec-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ── Barre de progression de lecture ───────────────────────────────────── */
#ecoles-page .ec-progression {
	position: fixed; left: 0; top: 0; z-index: 100001;
	width: 100%; height: 5px; pointer-events: none;
}
#ecoles-page .ec-progression span {
	display: block; height: 100%;
	background: linear-gradient(90deg, var(--ec-pastel), var(--ec-accent));
	transform: scaleX(var(--ec-lu, 0));
	transform-origin: left center;
}

/* ── Apparitions au défilement ─────────────────────────────────────────── */
html.ec-js #ecoles-page .ec-reveal {
	transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
	transition-delay: var(--ec-delai, 0s);
}
html.ec-js #ecoles-page .ec-reveal:not(.is-in) { opacity: 0; }
html.ec-js.ec-anim #ecoles-page .ec-reveal:not(.is-in) { transform: translateY(34px); }

/* Le bandeau apparaît mot à mot : le paragraphe reste visible, ce sont ses mots qui arrivent. */
html.ec-js #ecoles-page .ec-reveal[data-ec-mots]:not(.is-in) { opacity: 1; transform: none; }
#ecoles-page .ec-mot { display: inline-block; white-space: pre; }
html.ec-js #ecoles-page .ec-mot { transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 70ms); }
html.ec-js #ecoles-page [data-ec-mots]:not(.is-in) .ec-mot { opacity: 0; }
html.ec-js.ec-anim #ecoles-page [data-ec-mots]:not(.is-in) .ec-mot { transform: translateY(.45em); }

/* ── Titres : un filet de la couleur de l'école se dessine dessous ─────── */
#ecoles-page .ec-h2::after {
	content: "";
	display: block;
	width: 64px; height: 4px; border-radius: 4px;
	background: var(--ec-accent);
	margin-top: 20px;
	transform-origin: left center;
	transition: transform 1s cubic-bezier(.2, .7, .2, 1) .35s;
}
#ecoles-page .ec--sombre .ec-h2::after { background: var(--ec-sur-sombre); }
#ecoles-page .ec-h2--centre::after,
#ecoles-page .ec-prose--centre .ec-h2::after,
#ecoles-page .ec-final .ec-h2::after { margin-inline: auto; transform-origin: center; }
html.ec-js.ec-anim #ecoles-page .ec-reveal:not(.is-in) .ec-h2::after,
html.ec-js.ec-anim #ecoles-page .ec-h2.ec-reveal:not(.is-in)::after { transform: scaleX(0); }

/* ── Héro : entrée en cascade au chargement (sans attendre le JS) ─────── */
@keyframes ec-monte  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes ec-fondu  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ec-arrive { from { opacity: 0; transform: translateX(46px) scale(.96); } to { opacity: 1; transform: none; } }

html.ec-anim #ecoles-page .ec-hero__logo,
html.ec-anim #ecoles-page .ec-hero__ecole,
html.ec-anim #ecoles-page .ec-hero__titre,
html.ec-anim #ecoles-page .ec-hero__accroche,
html.ec-anim #ecoles-page .ec-hero__note,
html.ec-anim #ecoles-page .ec-hero .ec-cta-row { animation: ec-monte 1.1s cubic-bezier(.2, .7, .2, 1) both; }
html.ec-anim #ecoles-page .ec-hero__photo { animation: ec-arrive 1.4s cubic-bezier(.2, .7, .2, 1) .3s both; }

html.ec-doux #ecoles-page .ec-hero__logo,
html.ec-doux #ecoles-page .ec-hero__ecole,
html.ec-doux #ecoles-page .ec-hero__titre,
html.ec-doux #ecoles-page .ec-hero__accroche,
html.ec-doux #ecoles-page .ec-hero__note,
html.ec-doux #ecoles-page .ec-hero .ec-cta-row,
html.ec-doux #ecoles-page .ec-hero__photo { animation: ec-fondu 1.2s ease both; }

#ecoles-page .ec-hero__ecole     { animation-delay: .15s !important; }
#ecoles-page .ec-hero__titre     { animation-delay: .3s !important; }
#ecoles-page .ec-hero__accroche  { animation-delay: .5s !important; }
#ecoles-page .ec-hero__note      { animation-delay: .65s !important; }
#ecoles-page .ec-hero .ec-cta-row{ animation-delay: .8s !important; }

/* ── Héro : halos de couleur qui dérivent lentement ───────────────────── */
#ecoles-page .ec-hero > .ec-wrap { position: relative; z-index: 1; }
#ecoles-page .ec-hero__fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#ecoles-page .ec-halo {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .55;
	will-change: transform;
}
#ecoles-page .ec-halo--1 { width: 560px; height: 560px; right: 2%;  top: -140px; background: var(--ec-pastel); }
#ecoles-page .ec-halo--2 { width: 460px; height: 460px; left: -120px; bottom: -160px; background: var(--ec-pastel); opacity: .4; }
#ecoles-page .ec-halo--3 { width: 320px; height: 320px; left: 42%;  top: 30%; background: var(--ec-accent); opacity: .12; }

@keyframes ec-derive-1 { 0% { transform: translate(0, 0) scale(1); }   50% { transform: translate(-90px, 70px) scale(1.12); } 100% { transform: translate(40px, 130px) scale(.95); } }
@keyframes ec-derive-2 { 0% { transform: translate(0, 0) scale(1); }   50% { transform: translate(120px, -60px) scale(1.15); } 100% { transform: translate(60px, -140px) scale(1); } }
@keyframes ec-derive-3 { 0% { transform: translate(0, 0) scale(1); }   50% { transform: translate(-140px, -40px) scale(1.3); } 100% { transform: translate(90px, 60px) scale(.9); } }
html.ec-anim #ecoles-page .ec-halo--1 { animation: ec-derive-1 24s ease-in-out infinite alternate; }
html.ec-anim #ecoles-page .ec-halo--2 { animation: ec-derive-2 28s ease-in-out infinite alternate; }
html.ec-anim #ecoles-page .ec-halo--3 { animation: ec-derive-3 20s ease-in-out infinite alternate; }

#ecoles-page .ec-particules { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
html.ec-anim #ecoles-page .ec-particules { display: block; }

/* Photo du héro : glisse vers le haut au défilement, l'aplat coloré dans l'autre sens.
   --ec-par (0 → 1) est posé par ecoles.js. */
html.ec-anim #ecoles-page .ec-hero__photo img { translate: 0 calc(var(--ec-par, 0) * -46px); }
html.ec-anim #ecoles-page .ec-hero__photo::before { translate: 0 calc(var(--ec-par, 0) * 38px); }

/* ── Images : zoom arrière à l'apparition + parallaxe sur les grandes ──── */
html.ec-js.ec-anim #ecoles-page .ec-visuel img {
	scale: 1.16;
	transition: scale 1.8s cubic-bezier(.2, .7, .2, 1);
	will-change: scale, translate;
}
html.ec-js.ec-anim #ecoles-page .ec-visuel.is-in img { scale: 1.02; }
/* Les grandes images gardent 8 % de marge pour la parallaxe (±3,5 % du cadre). */
html.ec-js.ec-anim #ecoles-page .ec-visuel[data-ec-parallax].is-in img { scale: 1.08; }
html.ec-js.ec-anim #ecoles-page .ec-visuel[data-ec-parallax] img { translate: 0 var(--ec-py, 0px); }

/* ── Sections sombres : un projecteur qui balaie lentement ─────────────── */
#ecoles-page .ec--sombre { overflow: hidden; isolation: isolate; }
#ecoles-page .ec--sombre > .ec-wrap { position: relative; z-index: 1; }
#ecoles-page .ec--sombre::before,
#ecoles-page .ec--sombre::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
}
#ecoles-page .ec--sombre::before {
	width: 1000px; height: 1000px; left: 50%; top: -380px; margin-left: -500px;
	background: radial-gradient(circle, var(--ec-sur-sombre) 0%, transparent 62%);
	opacity: .16;
}
#ecoles-page .ec--sombre::after {
	width: 760px; height: 760px; left: -260px; bottom: -320px;
	background: radial-gradient(circle, var(--ec-accent) 0%, transparent 65%);
	opacity: .22;
}
@keyframes ec-projecteur { 0% { transform: translateX(-38%); } 100% { transform: translateX(38%); } }
@keyframes ec-lueur      { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(55vw, -120px) scale(1.25); } }
html.ec-anim #ecoles-page .ec--sombre::before { animation: ec-projecteur 16s ease-in-out infinite alternate; }
html.ec-anim #ecoles-page .ec--sombre::after  { animation: ec-lueur 26s ease-in-out infinite alternate; }

/* ── Sections teintées : deux voiles clairs qui respirent ──────────────── */
#ecoles-page .ec--teinte { overflow: hidden; isolation: isolate; }
#ecoles-page .ec--teinte > .ec-wrap { position: relative; z-index: 1; }
#ecoles-page .ec--teinte::before,
#ecoles-page .ec--teinte::after {
	content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
	filter: blur(40px);
}
#ecoles-page .ec--teinte::before { width: 620px; height: 620px; right: -160px; top: -180px; background: #fff; opacity: .7; }
#ecoles-page .ec--teinte::after  { width: 520px; height: 520px; left: -180px; bottom: -200px; background: var(--ec-pastel); opacity: .45; }
@keyframes ec-respire-1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-160px, 120px) scale(1.2); } }
@keyframes ec-respire-2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(200px, -90px) scale(1.15); } }
html.ec-anim #ecoles-page .ec--teinte::before { animation: ec-respire-1 22s ease-in-out infinite alternate; }
html.ec-anim #ecoles-page .ec--teinte::after  { animation: ec-respire-2 26s ease-in-out infinite alternate; }

/* ── Bandeau : le dégradé ondule ───────────────────────────────────────── */
@keyframes ec-vague { 0% { background-position: 0% 40%; } 100% { background-position: 100% 60%; } }
html.ec-anim #ecoles-page .ec-bandeau { animation: ec-vague 14s ease-in-out infinite alternate; }

/* ── Boutons : un reflet passe de temps en temps ───────────────────────── */
#ecoles-page .ec-btn { position: relative; overflow: hidden; isolation: isolate; }
#ecoles-page .ec-btn::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
	transform: translateX(-130%);
	pointer-events: none;
}
@keyframes ec-reflet { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
html.ec-anim #ecoles-page .ec-btn::after { animation: ec-reflet 5.5s ease-in-out 2s infinite; }

/* ── Cartes : légère élévation au survol ───────────────────────────────── */
/* Même poids que la règle d'apparition (html.ec-js #ecoles-page .ec-reveal) et placée après :
   elle ajoute translate/box-shadow sans retard, sinon le survol attendrait le délai de cascade. */
html.ec-js #ecoles-page .ec-conseil,
html.ec-js #ecoles-page .ec-jour,
html.ec-js #ecoles-page .ec-temo {
	transition-property: opacity, transform, translate, box-shadow;
	transition-duration: .9s, 1s, .35s, .35s;
	transition-delay: var(--ec-delai, 0s), var(--ec-delai, 0s), 0s, 0s;
}
html.ec-anim #ecoles-page .ec-conseil:hover,
html.ec-anim #ecoles-page .ec-jour:hover,
html.ec-anim #ecoles-page .ec-temo:hover { translate: 0 -6px; box-shadow: 0 28px 60px -28px rgba(35, 28, 36, .45); }
#ecoles-page .ec-jour__visuel { overflow: hidden; }
#ecoles-page .ec-jour__visuel img { transition: scale 1.2s cubic-bezier(.2, .7, .2, 1); }
html.ec-anim #ecoles-page .ec-jour:hover .ec-jour__visuel img { scale: 1.06; }

/* ── Avant / Après : l'« après » arrive juste derrière l'« avant » ─────── */
html.ec-js #ecoles-page .ec-aa__apres,
html.ec-js #ecoles-page .ec-aa__fleche { transition: opacity .8s ease .35s, transform .9s cubic-bezier(.2, .7, .2, 1) .35s; }
html.ec-js #ecoles-page .ec-aa__ligne:not(.is-in) .ec-aa__apres,
html.ec-js #ecoles-page .ec-aa__ligne:not(.is-in) .ec-aa__fleche { opacity: 0; }
html.ec-js.ec-anim #ecoles-page .ec-aa__ligne:not(.is-in) .ec-aa__apres { transform: translateX(-26px); }
@keyframes ec-pousse { 0%, 100% { translate: 0 0; } 50% { translate: 7px 0; } }
html.ec-anim #ecoles-page .ec-aa__ligne.is-in .ec-aa__fleche { animation: ec-pousse 2.4s ease-in-out 1.2s infinite; }

/* ── Offre : bordure qui tourne + halo coloré qui respire ──────────────── */
#ecoles-page .ec-offre__halo {
	position: absolute; inset: 40px 30px; z-index: 0;
	border-radius: 40px;
	background: conic-gradient(from var(--ec-angle), var(--ec-accent), var(--ec-pastel), var(--ec-teinte), var(--ec-pastel), var(--ec-accent));
	filter: blur(46px);
	opacity: .45;
}
@keyframes ec-tour { to { --ec-angle: 360deg; } }
@keyframes ec-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .6; } }
html.ec-anim #ecoles-page .ec-offre__carte { animation: ec-tour 9s linear infinite; }
html.ec-anim #ecoles-page .ec-offre__halo  { animation: ec-tour 9s linear infinite, ec-pulse 6s ease-in-out infinite; }

/* ── FAQ : la réponse se déplie en douceur (ecoles.js anime la hauteur) ─ */
#ecoles-page .ec-faq__reponse { overflow: hidden; }

/* ── Téléphone : effets allégés ────────────────────────────────────────── */
@media (max-width: 640px) {
	#ecoles-page .ec-halo--1 { width: 360px; height: 360px; right: -120px; }
	#ecoles-page .ec-halo--2 { width: 300px; height: 300px; }
	#ecoles-page .ec-halo--3 { display: none; }
	#ecoles-page .ec--sombre::before { width: 640px; height: 640px; margin-left: -320px; top: -260px; }
	#ecoles-page .ec-offre__halo { inset: 30px 10px; }
}

/* ── Témoignages texte (sans vidéo) + aperçu d'exemples fictifs ────────── */
#ecoles-page .ec-temo--texte { padding: 40px 32px 34px; }
#ecoles-page .ec-temo--texte .ec-temo__titre,
#ecoles-page .ec-temo--texte .ec-temo__texte,
#ecoles-page .ec-temo--texte .ec-temo__auteur { padding: 0; }
#ecoles-page .ec-temo__guillemet {
	display: block; font-family: var(--ec-serif); font-size: 96px; line-height: .6;
	color: var(--ec-pastel); margin-bottom: 14px;
}
#ecoles-page .ec-temo .ec-temo__texte { font-size: 19px; line-height: 1.7; margin-bottom: 18px; padding: 0 26px; }
#ecoles-page .ec-temo--texte .ec-temo__texte { padding: 0; }
#ecoles-page .ec-temo { position: relative; }
#ecoles-page .ec-temo__exemple {
	position: absolute; top: 14px; right: 14px; z-index: 2;
	background: #fff8d6; border: 2px dashed #c9a200; color: #4a3b00;
	font-size: 16px; font-weight: 700; line-height: 1.3; padding: 4px 10px; border-radius: 8px;
}
#ecoles-page .ec-temoignages .ec-admin-note {
	background: #fff8d6; border: 2px dashed #c9a200; border-radius: 12px;
	padding: 18px 22px; margin-bottom: 44px; font-size: 17px; line-height: 1.6; color: #4a3b00;
}

/* ── Offre : chiffres clés (jours, vidéos, heures) ─────────────────────── */
#ecoles-page .ec-offre__chiffres {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
	margin: 0 0 40px;
}
#ecoles-page .ec-offre__chiffres li {
	display: flex; align-items: baseline; gap: 8px;
	background: var(--ec-teinte);
	border: 1px solid var(--ec-pastel);
	border-radius: 999px;
	padding: 10px 22px;
	font-size: 18px; line-height: 1.3; color: var(--ec-encre);
}
#ecoles-page .ec-offre__chiffres strong {
	font-family: var(--ec-serif); font-size: 32px; font-weight: 700; line-height: 1; color: var(--ec-accent);
}

/* ── Visuel pas encore livré (aperçu administrateur) ───────────────────── */
#ecoles-page .ec-visuel-manquant {
	display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
	width: 100%; padding: 24px; text-align: center;
	background: repeating-linear-gradient(45deg, var(--ec-teinte), var(--ec-teinte) 14px, #fff 14px, #fff 28px);
	border: 3px dashed var(--ec-accent); border-radius: var(--ec-rayon);
	color: var(--ec-encre); font-size: 17px; line-height: 1.5;
}
#ecoles-page .ec-visuel-manquant strong { font-size: 20px; color: var(--ec-accent); }
#ecoles-page .ec-visuel-manquant code { font-size: 16px; background: #fff; padding: 2px 8px; border-radius: 6px; }
#ecoles-page .ec-jour__visuel .ec-visuel-manquant { aspect-ratio: 4 / 3 !important; border-radius: 0; }
/* Visiteur : le cadre vide disparaît. */
#ecoles-page .ec-visuel:not(:has(img, .ec-visuel-manquant)),
#ecoles-page .ec-hero__photo:not(:has(img, .ec-visuel-manquant)),
#ecoles-page .ec-jour__visuel:not(:has(img, .ec-visuel-manquant)) { display: none; }

/* ── Chiffre mis en avant dans un texte (ex. « Mon histoire ») ─────────── */
#ecoles-page .ec-prose .ec-chiffre {
	display: flex; align-items: center; gap: 22px;
	background: var(--ec-teinte); border: 1px solid var(--ec-pastel);
	border-radius: 18px; padding: 22px 28px; margin: 1.4em 0;
}
#ecoles-page .ec-chiffre strong {
	font-family: var(--ec-serif); font-weight: 700; font-size: clamp(46px, 5vw, 64px);
	line-height: 1; color: var(--ec-accent); white-space: nowrap;
}
#ecoles-page .ec-chiffre span { font-size: 18px; line-height: 1.55; color: var(--ec-encre); }

/* ── Duel : peur / paix ────────────────────────────────────────────────── */
#ecoles-page .ec-duel__tete,
#ecoles-page .ec-duel__ligne {
	display: grid;
	grid-template-columns: minmax(150px, .55fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
	max-width: 1080px;
	margin-inline: auto;
}
#ecoles-page .ec-duel__tete {
	margin-top: 54px; margin-bottom: 14px;
	font-size: 16px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
#ecoles-page .ec-duel__tete span:nth-child(2) { color: var(--ec-doux); padding-left: 28px; }
#ecoles-page .ec-duel__tete span:nth-child(3) { color: var(--ec-accent); padding-left: 28px; }
#ecoles-page .ec-duel__liste { display: grid; gap: 16px; }
#ecoles-page .ec-duel__moment {
	display: flex; align-items: center;
	font-family: var(--ec-serif); font-weight: 700; font-size: 28px; line-height: 1.2;
	color: var(--ec-accent);
}
#ecoles-page .ec-duel__peur,
#ecoles-page .ec-duel__paix { padding: 22px 28px; border-radius: 16px; font-size: 19px; line-height: 1.65; }
#ecoles-page .ec-duel__peur { background: #fff; border: 1px solid var(--ec-filet); color: var(--ec-doux); }
#ecoles-page .ec-duel__paix { background: var(--ec-pastel); color: var(--ec-encre); font-weight: 600; }
#ecoles-page .ec-duel__tag { display: none; }

html.ec-js #ecoles-page .ec-duel__paix { transition: opacity .8s ease .3s, transform .9s cubic-bezier(.2, .7, .2, 1) .3s; }
html.ec-js #ecoles-page .ec-duel__ligne:not(.is-in) .ec-duel__paix { opacity: 0; }
html.ec-js.ec-anim #ecoles-page .ec-duel__ligne:not(.is-in) .ec-duel__paix { transform: translateX(-24px); }

@media (max-width: 900px) {
	#ecoles-page .ec-duel__tete { display: none; }
	#ecoles-page .ec-duel__ligne { grid-template-columns: 1fr; gap: 8px; }
	#ecoles-page .ec-duel__liste { gap: 34px; }
	#ecoles-page .ec-duel__tag {
		display: block; font-size: 16px; font-weight: 700; letter-spacing: .14em;
		text-transform: uppercase; margin-bottom: 4px; opacity: .85;
	}
	#ecoles-page .ec-chiffre { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── Témoignages : captures d'écran floutées (v1.6) ────────────────────── */
#ecoles-page .ec-captures {
	display: flex; flex-direction: column; align-items: center; gap: 26px;
	margin: 56px auto 0; padding: 0; list-style: none;
}
#ecoles-page .ec-capture {
	width: min(100%, 960px); margin: 0;
	background: var(--ec-fond-carte); border-radius: var(--ec-rayon); box-shadow: var(--ec-ombre);
	padding: 26px 30px; overflow: hidden;
}
#ecoles-page .ec-capture__lien { display: block; cursor: zoom-in; }
#ecoles-page .ec-capture img { display: block; width: 100%; height: auto; }
#ecoles-page .ec-captures__note {
	text-align: center; font-size: 17px; line-height: 1.6; color: var(--ec-doux);
	max-width: 640px; margin: 30px auto 0;
}
#ecoles-page .ec-captures + .ec-captures__note + .ec-temo__grid { margin-top: 70px; }
@media (max-width: 640px) {
	#ecoles-page .ec-capture { padding: 14px 12px; border-radius: 16px; }
}

/* ── v1.7 : liste dans la prose, fin de « duel », phrase de fin « pour toi si », FAQ multi-paragraphes ── */
#ecoles-page .ec-prose .ec-liste--prose { margin: 1.4em 0 1.6em; }
#ecoles-page .ec-duel__outro { margin-top: 56px; }
#ecoles-page .ec-duel .ec-cta-row { margin-top: 44px; }
#ecoles-page .ec-pourqui__outro {
	margin-top: 30px; padding-top: 24px;
	border-top: 1px solid var(--ec-filet);
	font-weight: 600; color: var(--ec-encre);
}
#ecoles-page .ec-faq__reponse p + p { margin-top: .9em; }

/* ── v1.8 : page de confirmation (`{slug}-merci`) ──────────────────────── */
#ecoles-page.ec-merci .ec-hero { padding-bottom: 70px; }
#ecoles-page .ec-merci__grid--solo { grid-template-columns: 1fr; max-width: 820px; text-align: center; }
#ecoles-page .ec-merci__sceau { margin: 0 0 18px; }
#ecoles-page .ec-merci__grid--solo .ec-merci__sceau svg { margin-inline: auto; }
#ecoles-page .ec-merci__sceau svg {
	display: block; width: 64px; height: 64px;
	fill: none; stroke: var(--ec-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
#ecoles-page .ec-merci__sceau path { stroke-dasharray: 40; stroke-dashoffset: 0; }
html.ec-anim #ecoles-page .ec-merci__sceau path { animation: ec-trace 1s cubic-bezier(.6, 0, .2, 1) .5s both; }
@keyframes ec-trace { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

#ecoles-page .ec-merci__etapes { display: grid; gap: 22px; margin: 44px 0 0; padding: 0; list-style: none; }
#ecoles-page .ec-merci__etape {
	display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start;
	background: var(--ec-fond-carte); border-radius: var(--ec-rayon); box-shadow: var(--ec-ombre);
	padding: 30px 34px;
}
#ecoles-page .ec-merci__num {
	display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
	background: var(--ec-pastel); color: var(--ec-encre);
	font-family: var(--ec-serif); font-size: 30px; font-weight: 700; line-height: 1;
}
#ecoles-page .ec-merci__titre {
	font-family: var(--ec-serif); font-size: 30px; line-height: 1.2; font-weight: 700;
	color: var(--ec-accent); margin: 6px 0 10px;
}
#ecoles-page .ec-merci__etape p { margin: 0; }
#ecoles-page .ec-merci__mail { margin-top: 12px !important; font-weight: 600; }
#ecoles-page .ec-merci__mail a { color: var(--ec-accent); text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
#ecoles-page .ec-merci__fin { margin-top: 60px; }
#ecoles-page .ec-merci__signature {
	font-family: var(--ec-serif); font-style: italic; font-size: 34px; color: var(--ec-accent); margin-top: 6px;
}
@media (max-width: 640px) {
	#ecoles-page .ec-merci__etape { grid-template-columns: 1fr; gap: 14px; padding: 24px 22px; }
	#ecoles-page .ec-merci__titre { font-size: 26px; }
}