/* ═══════════════════════════════════════════════════════════════════════════
   TEP LEADERSHIP — Les ateliers d'accélération
   Reprise du design de la page Divi « tout-est-possible-leadership-la-formation ».

   Les valeurs ci-dessous ne sont pas des approximations : elles sont relevées
   une à une dans les attributs des modules Divi de la page d'origine, pour que
   les deux pages se ressemblent vraiment au lieu de se ressembler à peu près.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	/* ── Or ─────────────────────────────────────────────────────────────── */
	--tepld-or:          #e3bd5e;   /* la couleur de la marque, titres + boutons */
	--tepld-or-clair:    #ffe39e;   /* texte sur fond noir profond              */
	--tepld-or-pale:     #ffdaa4;   /* sur-titres en capitales                  */
	--tepld-or-fonce:    #b48840;   /* texte d'appoint sur fond clair           */
	--tepld-creme:       #fff4e2;   /* fond de section clair chaud              */

	/* ── Noirs ──────────────────────────────────────────────────────────── */
	--tepld-noir:        #2b2b2b;   /* fond des sections sombres                */
	--tepld-noir-carte:  #3a3a3a;   /* cartes posées sur ces sections           */
	--tepld-noir-dur:    #1c1c18;   /* fond de bouton inversé                   */
	--tepld-encre:       #1e1e1e;   /* texte courant sur fond clair             */

	/* ── Clairs ─────────────────────────────────────────────────────────── */
	--tepld-clair:       #f7f7f7;
	--tepld-blanc:       #ffffff;
	--tepld-gris:        #565656;
	--tepld-gris-pale:   #8e8e8e;

	/* ── Signaux ────────────────────────────────────────────────────────── */
	--tepld-vert:        #107f06;
	--tepld-vert-vif:    #039b21;
	--tepld-vert-voile:  rgba(16, 127, 6, .12);
	--tepld-rouge:       #ca001a;
	--tepld-rouge-voile: rgba(201, 0, 23, .12);

	/* ── Typo ───────────────────────────────────────────────────────────── */
	--tepld-serif:  "EB Garamond", Garamond, "Times New Roman", serif;
	--tepld-sans:   "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	/* ── Rythme ─────────────────────────────────────────────────────────── */
	--tepld-largeur:   1180px;
	--tepld-etroit:    780px;
	--tepld-rayon:     20px;
	--tepld-section:   clamp(64px, 8vw, 110px);
	--tepld-ombre:     0 18px 44px rgba(0, 0, 0, .18);
	--tepld-ombre-or:  0 14px 34px rgba(227, 189, 94, .28);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE

   Tous les sélecteurs sont ancrés sur `#tepld-page`. Divi pose un reset du
   type `#page h1, #page h2, #page h3 { margin: 0 }` : un simple `.tepld-h2`
   perd contre lui, en silence, et toutes les marges de titres meurent sans
   qu'aucune erreur ne le signale. L'ID nous met au-dessus.
   ═══════════════════════════════════════════════════════════════════════════ */

#tepld-page * { box-sizing: border-box; }

#tepld-page {
	font-family: var(--tepld-sans);
	/* 21px de texte courant : le public de Laurent lit gros, et cette règle
	   vaut pour toutes ses pages. La page Divi d'origine est à 18px, c'est le
	   seul écart volontaire avec elle. */
	font-size: 21px;
	line-height: 1.62;
	color: var(--tepld-encre);
	background: var(--tepld-blanc);
	overflow-x: hidden;
}

#tepld-page img { max-width: 100%; height: auto; display: block; }
#tepld-page [hidden] { display: none !important; }   /* Divi remet section{display:block} */

#tepld-page .tepld-section {
	position: relative;
	padding: var(--tepld-section) 24px;
}

#tepld-page .tepld-wrap   { max-width: var(--tepld-largeur); margin: 0 auto; }
#tepld-page .tepld-etroit { max-width: var(--tepld-etroit);  margin: 0 auto; }
#tepld-page .tepld-centre { text-align: center; }

/* ── Sections sombres, avec la texture de la page d'origine ─────────────── */
#tepld-page .tepld-sombre {
	background-color: var(--tepld-noir);
	color: var(--tepld-blanc);
}
#tepld-page .tepld-sombre::before {
	/* La texture est décorative : si le fichier manque, il ne reste que le
	   noir plein, et la section tient toujours debout. */
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--tepld-texture, none);
	background-size: cover;
	background-position: center;
	opacity: .5;
	pointer-events: none;
}

/*
 * Texture continue d'une section sombre à la suivante.
 *
 * En `background-size: cover`, chaque section redimensionne l'image à sa
 * propre hauteur : deux sections sombres qui se touchent laissent donc une
 * couture bien visible à leur jonction. En l'attachant à la fenêtre, la
 * texture traverse les deux sans rupture, ce qui est aussi l'effet du
 * `parallax="on"` posé sur la section d'origine dans Divi.
 *
 * Réservé au pointeur fin : `fixed` est coûteux au défilement tactile, et iOS
 * le rend de travers depuis toujours. Divi coupe d'ailleurs sa parallaxe sur
 * mobile pour les mêmes raisons.
 */
@media (hover: hover) and (min-width: 981px) {
	#tepld-page .tepld-sombre::before { background-attachment: fixed; }
}
#tepld-page .tepld-sombre > * { position: relative; z-index: 1; }

#tepld-page .tepld-clair { background: var(--tepld-clair); }
#tepld-page .tepld-creme { background: var(--tepld-creme); }

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHIE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sur-titre en capitales : Rubik 700, 12-13px, interlettrage 2px, or pâle. */
#tepld-page .tepld-eyebrow {
	font-family: var(--tepld-sans);
	font-weight: 700;
	font-size: 13px;
	line-height: 2em;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--tepld-or-pale);
	margin: 0 0 14px;
}
#tepld-page .tepld-clair .tepld-eyebrow,
#tepld-page .tepld-creme .tepld-eyebrow { color: var(--tepld-or-fonce); }

/* Bandeau or en capitales, façon « LEs ateliers d'accelération ». */
#tepld-page .tepld-surtitre {
	font-family: var(--tepld-sans);
	font-weight: 800;
	font-size: clamp(22px, 3.2vw, 30px);
	line-height: 1.27;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--tepld-or);
	margin: 0 0 18px;
}

#tepld-page h1.tepld-h1 {
	font-family: var(--tepld-serif);
	font-weight: 400;
	font-size: clamp(38px, 6vw, 66px);
	line-height: 1.22;
	color: var(--tepld-blanc);
	margin: 0 0 22px;
}

#tepld-page h2.tepld-h2 {
	font-family: var(--tepld-serif);
	font-weight: 400;
	font-size: clamp(32px, 5vw, 50px);
	line-height: 1.3;
	color: var(--tepld-encre);
	margin: 0 0 26px;
}
#tepld-page .tepld-sombre h2.tepld-h2 { color: var(--tepld-blanc); }
#tepld-page h2.tepld-h2 em {
	font-style: italic;
	color: var(--tepld-or);
}

#tepld-page h3.tepld-h3 {
	font-family: var(--tepld-sans);
	font-weight: 700;
	font-size: 23px;
	line-height: 1.4;
	margin: 0 0 12px;
	color: inherit;
}

#tepld-page .tepld-chapo {
	font-family: var(--tepld-sans);
	font-weight: 300;
	font-size: clamp(20px, 2.4vw, 25px);
	line-height: 1.55;
	margin: 0 0 30px;
}

/*
 * Rythme des paragraphes de texte courant.
 *
 * ⚠️ Écrit en `:where()`, et il faut le laisser ainsi.
 *
 * En version normale, `#tepld-page .tepld-section p` compte un ID, une classe
 * ET un élément. Il bat donc `#tepld-page .tepld-hero__chapo`, qui n'a qu'un ID
 * et une classe, et il écrasait la marge propre de 17 composants qui sont des
 * <p> : le chapô du héros, les sur-titres, les prix, les libellés de dates, la
 * note sous les boutons…
 *
 * Rien ne le signalait, parce qu'une marge de 1.05em reste une marge plausible.
 * Ça n'est devenu visible qu'à un seul endroit : le chapô du héros, dont les
 * marges `auto` mouraient avec le reste, ce qui le décalait de 30 px vers la
 * gauche pendant que tout le reste de la page restait centré.
 *
 * `:where()` ne compte pour rien dans la spécificité. La règle retombe donc
 * sous n'importe quelle règle de composant, quel que soit l'ordre du fichier,
 * et un composant n'a plus jamais à se défendre contre elle.
 */
#tepld-page :where(.tepld-section p) { margin: 0 0 1.05em; }
#tepld-page :where(.tepld-section p:last-child) { margin-bottom: 0; }
#tepld-page .tepld-section b,
#tepld-page .tepld-section strong { font-weight: 700; }

#tepld-page .tepld-or { color: var(--tepld-or); }

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTONS
   Divi : radius 100px, Rubik 700 capitales, interlettrage 1px,
   padding 14px 34px, corps 16px.
   ═══════════════════════════════════════════════════════════════════════════ */

#tepld-page .tepld-cta {
	display: inline-block;
	font-family: var(--tepld-sans);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 18px 40px;
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	background: var(--tepld-or);
	color: var(--tepld-noir-dur);
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
#tepld-page .tepld-cta:hover,
#tepld-page .tepld-cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--tepld-ombre-or);
	color: var(--tepld-noir-dur);
}

/* Variante blanche, celle des sections sombres de la page d'origine. */
#tepld-page .tepld-cta--blanc {
	background: var(--tepld-blanc);
	color: var(--tepld-or-fonce);
}
#tepld-page .tepld-cta--blanc:hover { color: var(--tepld-or-fonce); }

/* Variante sombre, celle du héros. */
#tepld-page .tepld-cta--noir {
	background: var(--tepld-noir-dur);
	color: var(--tepld-or-clair);
}
#tepld-page .tepld-cta--noir:hover { color: var(--tepld-or-clair); }

#tepld-page .tepld-cta[aria-disabled="true"] {
	background: var(--tepld-gris-pale);
	color: var(--tepld-blanc);
	pointer-events: none;
	box-shadow: none;
}

#tepld-page .tepld-cta-bloc { margin-top: 40px; text-align: center; }

/* La ligne de réassurance qui suit un bouton : elle porte l'objection qui
   reste au moment exact où on clique. */
#tepld-page .tepld-cta-note {
	font-size: 17px;
	font-weight: 300;
	margin: 16px 0 0;
	opacity: .8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HÉROS
   ═══════════════════════════════════════════════════════════════════════════ */

#tepld-page .tepld-hero {
	background-color: #000;
	color: var(--tepld-blanc);
	padding-top: clamp(48px, 7vw, 86px);
	padding-bottom: clamp(56px, 7vw, 96px);
	overflow: hidden;
}
#tepld-page .tepld-hero::before { opacity: .38; }

/* ── Le héros en deux colonnes ───────────────────────────────────────────────
   Pourquoi pas une photo en fond : un voile assez sombre pour qu'on lise
   par-dessus est aussi assez sombre pour qu'on ne voie plus la photo. Les deux
   besoins s'excluent au même endroit. On leur donne donc chacun le sien, et la
   photo s'affiche à pleine visibilité, sans voile et sans compromis de
   lecture.
   ────────────────────────────────────────────────────────────────────────── */

#tepld-page .tepld-hero__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
	gap: clamp(36px, 5vw, 70px);
	align-items: center;
	text-align: left;
}

#tepld-page .tepld-hero__photo {
	/* La source est un portrait 3:4. Un cadre légèrement moins haut lui laisse
	   de quoi déborder, ce qui rend le cadrage `object-position` opérant. */
	aspect-ratio: 4 / 5;
	width: 100%;
	border-color: rgba(227, 189, 94, .34);
}

/* Le logo n'est plus centré : il ouvre la colonne de texte. */
#tepld-page .tepld-hero__grille .tepld-hero__logo { margin-left: 0; }
#tepld-page .tepld-hero__grille .tepld-hero__chapo { margin-left: 0; }
#tepld-page .tepld-hero__grille .tepld-chips { justify-content: flex-start; }
#tepld-page .tepld-hero__grille .tepld-cta-note { text-align: left; }

#tepld-page .tepld-hero__logo {
	width: 150px;
	margin: 0 auto 28px;
}

#tepld-page .tepld-hero__marque {
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 3px;
	text-transform: uppercase;
	/* Éclairci depuis #8e8e8e : sur un fond uni le gris passait, sur une photo
	   il devient le premier texte à décrocher. */
	color: #b9b9b9;
	margin: 0 0 18px;
}

#tepld-page .tepld-hero__chapo {
	max-width: 720px;
	margin: 0 auto 34px;
	font-weight: 300;
	font-size: clamp(19px, 2.2vw, 24px);
	line-height: 1.55;
	color: rgba(255, 255, 255, .9);
}

/* Les trois chiffres du cadre : durée, places, lieu. */
#tepld-page .tepld-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0 0 36px;
	padding: 0;
	list-style: none;
}
#tepld-page .tepld-chips li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 17px;
	font-weight: 500;
	padding: 11px 22px;
	border: 1px solid rgba(227, 189, 94, .45);
	border-radius: 100px;
	background: rgba(227, 189, 94, .08);
	color: var(--tepld-or-clair);
}
#tepld-page .tepld-chips svg {
	width: 19px;
	height: 19px;
	flex: 0 0 19px;
	fill: none;
	stroke: var(--tepld-or);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARTES « recadré / ressors / transforme »
   Divi : fond #3a3a3a, padding 20px, radius 20px, bordure 1px blanche.
   ═══════════════════════════════════════════════════════════════════════════ */

#tepld-page .tepld-trio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 46px;
}

#tepld-page .tepld-carte {
	background: var(--tepld-noir-carte);
	border: 1px solid var(--tepld-blanc);
	border-radius: var(--tepld-rayon);
	padding: 30px 26px;
	transition: transform .3s ease, border-color .3s ease;
}
#tepld-page .tepld-carte:hover {
	transform: translateY(-4px);
	border-color: var(--tepld-or);
}

#tepld-page .tepld-carte__icone {
	width: 41px;
	height: 41px;
	margin: 0 auto 14px;
	fill: none;
	stroke: var(--tepld-or);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	display: block;
}

#tepld-page .tepld-carte h3 {
	font-family: var(--tepld-sans);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.5;
	text-align: center;
	color: var(--tepld-blanc);
	margin: 0 0 16px;
}

#tepld-page .tepld-carte ul {
	margin: 0 0 14px;
	padding-left: 20px;
	font-weight: 300;
	font-size: 19px;
	line-height: 1.55;
	color: var(--tepld-blanc);
}
#tepld-page .tepld-carte li { margin-bottom: 9px; }
#tepld-page .tepld-carte li::marker { color: var(--tepld-or); }

/* La chute de chaque carte : « …parce que ». */
#tepld-page .tepld-carte__chute {
	font-weight: 300;
	font-style: italic;
	font-size: 18px;
	line-height: 1.55;
	color: var(--tepld-or-pale);
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEXTE ACCOMPAGNÉ D'UN PORTRAIT
   ═══════════════════════════════════════════════════════════════════════════ */

#tepld-page .tepld-duo-texte {
	display: grid;
	grid-template-columns: 420px 1fr;
	gap: 54px;
	align-items: center;
}

/* La photo de cette colonne est un `.tepld-cadre-photo` : c'est ce qui donne
   accès au cadrage `object-position`, sans quoi la photo de Laurent, prise de
   loin, se recentrerait sur le plafond. */
#tepld-page .tepld-duo-texte .tepld-cadre-photo {
	box-shadow: var(--tepld-ombre);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DÉROULÉ DES DEUX JOURS
   ═══════════════════════════════════════════════════════════════════════════ */

#tepld-page .tepld-jours {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin-top: 46px;
}

#tepld-page .tepld-jour {
	position: relative;
	background: var(--tepld-blanc);
	border-radius: var(--tepld-rayon);
	padding: 38px 34px;
	box-shadow: var(--tepld-ombre);
	border-top: 4px solid var(--tepld-or);
}

#tepld-page .tepld-jour__num {
	font-family: var(--tepld-serif);
	font-size: 58px;
	line-height: 1;
	color: var(--tepld-or);
	margin: 0 0 6px;
}

#tepld-page .tepld-jour h3 {
	font-family: var(--tepld-sans);
	font-weight: 700;
	font-size: 22px;
	margin: 0 0 18px;
	color: var(--tepld-encre);
}

#tepld-page .tepld-jour ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 19px;
	font-weight: 300;
	line-height: 1.55;
}
#tepld-page .tepld-jour li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 14px;
}
#tepld-page .tepld-jour li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .52em;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: 2px solid var(--tepld-or);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GALERIE DES ATELIERS

   Un portrait haut à gauche, deux paysages empilés à droite. C'est la seule
   composition qui accueille les deux formats sans en déformer aucun : le
   portrait donne sa hauteur à la rangée, la colonne de droite s'y aligne
   d'elle-même, et chaque image remplit son cadre en `cover`.
   ═══════════════════════════════════════════════════════════════════════════ */

#tepld-page .tepld-galerie {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin-top: 46px;
}

#tepld-page .tepld-cadre-photo {
	position: relative;
	overflow: hidden;
	border-radius: var(--tepld-rayon);
	border: 1px solid rgba(227, 189, 94, .28);
	background: var(--tepld-noir-carte);
	transition: transform .35s ease, border-color .35s ease;
}
#tepld-page .tepld-cadre-photo:hover {
	transform: translateY(-4px);
	border-color: var(--tepld-or);
}

/* C'est le portrait qui fixe la hauteur de toute la rangée. */
#tepld-page .tepld-cadre-photo--haut { aspect-ratio: 3 / 4; }

#tepld-page .tepld-cadre-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--tepld-cadrage, 50% 50%);
	display: block;
}

/*
 * Voile chaud, très léger.
 *
 * Les photos ont été prises dans deux salles à la lumière très différente.
 * Ce voile les rapproche l'une de l'autre et les rattache à l'or de la page,
 * sans les repeindre : au-delà de cette opacité, les visages virent et on perd
 * précisément ce qu'on est venu chercher, l'impression que c'est vrai.
 */
#tepld-page .tepld-cadre-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to top, rgba(28, 28, 24, .34), rgba(28, 28, 24, 0) 45%),
		linear-gradient(to bottom right, rgba(227, 189, 94, .10), rgba(227, 189, 94, 0) 60%);
}

/* La ligne sous la grille : elle dit d'où viennent les images. */
#tepld-page .tepld-galerie-note {
	text-align: center;
	margin: 26px 0 0;
	font-size: 18px;
	font-weight: 300;
	color: rgba(255, 255, 255, .72);
}

/* ═══════════════════════════════════════════════════════════════════════════
   POUR TOI / PAS POUR TOI
   ═══════════════════════════════════════════════════════════════════════════ */

#tepld-page .tepld-duo {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	margin-top: 46px;
}

#tepld-page .tepld-duo__col {
	border-radius: var(--tepld-rayon);
	padding: 34px 30px;
	background: var(--tepld-blanc);
	box-shadow: var(--tepld-ombre);
}
#tepld-page .tepld-duo__col--oui { border-top: 5px solid var(--tepld-vert); }
#tepld-page .tepld-duo__col--non { border-top: 5px solid var(--tepld-rouge); }

#tepld-page .tepld-duo__col h3 { font-size: 22px; margin-bottom: 20px; }
#tepld-page .tepld-duo__col--oui h3 { color: var(--tepld-vert); }
#tepld-page .tepld-duo__col--non h3 { color: var(--tepld-rouge); }

#tepld-page .tepld-duo__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 19px;
	font-weight: 300;
	line-height: 1.55;
}
#tepld-page .tepld-duo__col li {
	position: relative;
	padding-left: 36px;
	margin-bottom: 15px;
}
#tepld-page .tepld-duo__col li::before {
	position: absolute;
	left: 0;
	top: .06em;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 14px;
	font-weight: 700;
}
#tepld-page .tepld-duo__col--oui li::before {
	content: "✓";
	background: var(--tepld-vert-voile);
	color: var(--tepld-vert);
}
#tepld-page .tepld-duo__col--non li::before {
	content: "✕";
	background: var(--tepld-rouge-voile);
	color: var(--tepld-rouge);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATES
   ═══════════════════════════════════════════════════════════════════════════ */

#tepld-page .tepld-dates {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 26px;
	margin-top: 46px;
}

#tepld-page .tepld-date {
	display: flex;
	flex-direction: column;
	background: var(--tepld-noir-carte);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: var(--tepld-rayon);
	padding: 32px 28px;
	text-align: center;
	transition: transform .3s ease, border-color .3s ease;
}
#tepld-page .tepld-date:hover {
	transform: translateY(-4px);
	border-color: var(--tepld-or);
}

#tepld-page .tepld-date__quand {
	font-family: var(--tepld-serif);
	font-size: 32px;
	line-height: 1.24;
	color: var(--tepld-or);
	margin: 0 0 10px;
}

#tepld-page .tepld-date__ou {
	font-size: 18px;
	font-weight: 300;
	color: rgba(255, 255, 255, .82);
	margin: 0 0 20px;
}

#tepld-page .tepld-date__statut {
	display: inline-block;
	align-self: center;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	padding: 7px 18px;
	border-radius: 100px;
	margin-bottom: 24px;
}
#tepld-page .tepld-date__statut--ouvert {
	background: var(--tepld-vert-voile);
	color: #7ed98a;
}
#tepld-page .tepld-date__statut--derniere {
	background: rgba(227, 189, 94, .16);
	color: var(--tepld-or);
}
#tepld-page .tepld-date__statut--complet {
	background: rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .65);
}

#tepld-page .tepld-date .tepld-cta {
	margin-top: auto;
	font-size: 15px;
	padding: 15px 28px;
}

/* Aucune date encore fixée : la section reste, l'attente est nommée. */
#tepld-page .tepld-dates-vide {
	text-align: center;
	font-size: 20px;
	font-weight: 300;
	color: rgba(255, 255, 255, .84);
	margin-top: 34px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TARIF
   ═══════════════════════════════════════════════════════════════════════════ */

#tepld-page .tepld-prix {
	font-family: var(--tepld-sans);
	font-weight: 800;
	font-size: clamp(46px, 8vw, 82px);
	line-height: 1;
	color: var(--tepld-or);
	margin: 0 0 8px;
}
/* Le « € » se cale sur le haut des chiffres, pas sur leur base : posé sur la
   ligne de pied, il pend sous le montant et donne l'impression d'être tombé. */
#tepld-page .tepld-prix small {
	font-size: .38em;
	font-weight: 700;
	letter-spacing: 1px;
	vertical-align: .62em;
	margin-left: .04em;
}

#tepld-page .tepld-prix-plein {
	font-size: 26px;
	font-weight: 400;
	color: rgba(255, 255, 255, .55);
	text-decoration: line-through;
	margin: 0 0 14px;
}

#tepld-page .tepld-prix-note {
	font-size: 19px;
	font-weight: 300;
	color: rgba(255, 255, 255, .84);
	margin: 0 0 34px;
}

/* Le rappel de ce qui est compris, juste au-dessus du bouton. */
#tepld-page .tepld-inclus {
	max-width: 560px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: left;
}
#tepld-page .tepld-inclus li {
	position: relative;
	padding-left: 34px;
	margin-bottom: 14px;
	font-size: 19px;
	font-weight: 300;
	color: var(--tepld-blanc);
}
#tepld-page .tepld-inclus li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 13px;
	font-weight: 700;
	background: rgba(227, 189, 94, .18);
	color: var(--tepld-or);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MONTÉE EN GAMME

   Volontairement plus sobre que le bloc tarif : c'est une proposition, pas
   l'offre de la page. Un traitement aussi appuyé que celui de l'atelier ferait
   hésiter entre deux achats au lieu d'en confirmer un.
   ═══════════════════════════════════════════════════════════════════════════ */

#tepld-page .tepld-upsell {
	margin-top: 40px;
	padding: 38px 36px;
	background: var(--tepld-blanc);
	border: 1px solid rgba(180, 136, 64, .3);
	border-radius: var(--tepld-rayon);
	box-shadow: var(--tepld-ombre);
}

#tepld-page .tepld-upsell__nom {
	font-family: var(--tepld-sans);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--tepld-or-fonce);
	margin: 0 0 18px;
}

#tepld-page .tepld-upsell__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid rgba(180, 136, 64, .22);
}

#tepld-page .tepld-upsell__prix {
	font-family: var(--tepld-sans);
	font-weight: 800;
	font-size: 34px;
	line-height: 1;
	color: var(--tepld-or-fonce);
	margin: 0;
}
#tepld-page .tepld-upsell__prix span {
	font-size: 17px;
	font-weight: 400;
	color: var(--tepld-gris);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAURENT
   ═══════════════════════════════════════════════════════════════════════════ */

#tepld-page .tepld-bio {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 52px;
	align-items: start;
}

#tepld-page .tepld-bio__photo {
	/* La largeur est fixée par la grille, mais on la redit ici : sans largeur
	   propre, une image en `height:100%` déborde, et une image en `width:auto`
	   chargée en lazy se retrouve réduite à quelques pixels. */
	width: 100%;
	border-radius: var(--tepld-rayon);
	box-shadow: var(--tepld-ombre);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════════════════ */

#tepld-page .tepld-faq { max-width: 860px; margin: 46px auto 0; }

#tepld-page .tepld-faq__item {
	border-bottom: 1px solid rgba(255, 255, 255, .18);
}

#tepld-page .tepld-faq__q {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	background: none;
	border: 0;
	padding: 26px 0;
	text-align: left;
	cursor: pointer;
	font-family: var(--tepld-sans);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.45;
	color: var(--tepld-blanc);
}
#tepld-page .tepld-faq__q:hover { color: var(--tepld-or); }

#tepld-page .tepld-faq__signe {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	position: relative;
	margin-top: 4px;
}
#tepld-page .tepld-faq__signe::before,
#tepld-page .tepld-faq__signe::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--tepld-or);
	transform: translateY(-50%);
	transition: transform .3s ease, opacity .3s ease;
}
#tepld-page .tepld-faq__signe::after { transform: translateY(-50%) rotate(90deg); }
#tepld-page .tepld-faq__q[aria-expanded="true"] .tepld-faq__signe::after {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}

/* La réponse est repliée par une hauteur nulle plutôt que par `display:none` :
   on garde ainsi la transition, et le contenu reste dans le document. */
#tepld-page .tepld-faq__r {
	max-height: 0;
	overflow: hidden;
	transition: max-height .38s ease;
}
#tepld-page .tepld-faq__r > div {
	padding: 0 0 26px;
	font-size: 19px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, .86);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRE COLLANTE
   Elle n'apparaît qu'une fois le héros passé : posée d'entrée, elle mange de
   la place avant même que le visiteur ait une raison de cliquer.
   ═══════════════════════════════════════════════════════════════════════════ */

#tepld-page .tepld-barre {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
	padding: 14px 24px;
	background: rgba(28, 28, 24, .96);
	border-top: 1px solid rgba(227, 189, 94, .35);
	transform: translateY(110%);
	transition: transform .35s ease;
}
#tepld-page .tepld-barre.is-visible { transform: translateY(0); }

#tepld-page .tepld-barre__texte {
	font-size: 17px;
	font-weight: 300;
	color: var(--tepld-blanc);
	margin: 0;
}
#tepld-page .tepld-barre__texte b { color: var(--tepld-or); font-weight: 700; }

#tepld-page .tepld-barre .tepld-cta {
	font-size: 15px;
	padding: 13px 28px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   APPARITIONS
   Reprise des animations Divi de la page d'origine : `zoom` (12 modules),
   `fade` (3) et `fold` (1).
   ═══════════════════════════════════════════════════════════════════════════ */

#tepld-page [data-anim] {
	opacity: 0;
	transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}
#tepld-page [data-anim="zoom"] { transform: scale(.86); }
#tepld-page [data-anim="fade"] { transform: none; }
#tepld-page [data-anim="up"]   { transform: translateY(34px); }
#tepld-page [data-anim="fold"] { transform: perspective(900px) rotateX(-14deg); transform-origin: top center; }

#tepld-page [data-anim].is-in {
	opacity: 1;
	transform: none;
}

/* Décalage en cascade dans une même rangée. */
#tepld-page [data-anim][data-delai="1"] { transition-delay: .11s; }
#tepld-page [data-anim][data-delai="2"] { transition-delay: .22s; }
#tepld-page [data-anim][data-delai="3"] { transition-delay: .33s; }

/*
 * Mouvement réduit.
 *
 * Le voile ci-dessous rend tout visible d'emblée, sans transition : c'est ce
 * que voit un visiteur qui a demandé « moins d'animations » dans son système,
 * et c'est ce qu'il doit voir.
 *
 * `.tepld-motion-full`, posé sur <html> par le plugin, lève ce voile pour
 * l'administrateur du site uniquement. Sans cette échappatoire, quelqu'un qui
 * a « Réduire les animations » activé sur son Mac ne verrait jamais son propre
 * travail, et conclurait que les animations ne marchent pas.
 */
@media (prefers-reduced-motion: reduce) {
	html:not(.tepld-motion-full) #tepld-page [data-anim] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	html:not(.tepld-motion-full) #tepld-page .tepld-carte,
	html:not(.tepld-motion-full) #tepld-page .tepld-date,
	html:not(.tepld-motion-full) #tepld-page .tepld-cta,
	html:not(.tepld-motion-full) #tepld-page .tepld-barre {
		transition: none !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {
	#tepld-page .tepld-trio  { grid-template-columns: 1fr; }
	#tepld-page .tepld-jours { grid-template-columns: 1fr; }
	#tepld-page .tepld-duo   { grid-template-columns: 1fr; }
	#tepld-page .tepld-bio   { grid-template-columns: 1fr; gap: 32px; }
	#tepld-page .tepld-bio__photo { max-width: 320px; margin: 0 auto; }

	#tepld-page .tepld-duo-texte { grid-template-columns: 1fr; gap: 34px; }
	#tepld-page .tepld-duo-texte .tepld-cadre-photo { max-width: 420px; margin: 0 auto; width: 100%; }

	/* La galerie passe en pile, chaque cadre gardant son rapport. */
	#tepld-page .tepld-galerie { grid-template-columns: 1fr; }

	/* Le héros repasse en une colonne, texte centré comme avant, la photo
	   dessous. Elle vient APRÈS le bouton dans le document : la mettre au-dessus
	   repousserait le titre sous la ligne de flottaison. */
	#tepld-page .tepld-hero__grille { grid-template-columns: 1fr; text-align: center; }
	#tepld-page .tepld-hero__grille .tepld-hero__logo  { margin-left: auto; margin-right: auto; }
	#tepld-page .tepld-hero__grille .tepld-hero__chapo { margin-left: auto; margin-right: auto; }
	#tepld-page .tepld-hero__grille .tepld-chips       { justify-content: center; }
	#tepld-page .tepld-hero__grille .tepld-cta-note    { text-align: center; }
	#tepld-page .tepld-hero__photo { aspect-ratio: 4 / 3; max-width: 560px; margin: 0 auto; }
}

@media (max-width: 640px) {
	#tepld-page { font-size: 19px; }          /* jamais sous 16px, même ici */
	#tepld-page .tepld-section { padding-left: 20px; padding-right: 20px; }
	#tepld-page .tepld-carte,
	#tepld-page .tepld-jour,
	#tepld-page .tepld-upsell,
	#tepld-page .tepld-duo__col { padding: 26px 22px; }

	/* Le pied de l'encart passe en colonne : le prix et le bouton côte à côte
	   sur 375 px laisseraient au bouton une largeur où son libellé se coupe. */
	#tepld-page .tepld-upsell__pied { flex-direction: column; align-items: stretch; gap: 18px; }
	#tepld-page .tepld-upsell__prix { text-align: center; }
	#tepld-page .tepld-chips li { font-size: 16px; padding: 10px 18px; }
	#tepld-page .tepld-cta { display: block; width: 100%; padding: 17px 20px; font-size: 16px; }

	/* Sur mobile la barre collante ne garde que le bouton : la phrase qui
	   l'accompagne prendrait une deuxième ligne, et la barre finirait par
	   couvrir le texte qu'on est en train de lire. */
	#tepld-page .tepld-barre { gap: 0; padding: 11px 16px; }
	#tepld-page .tepld-barre__texte { display: none; }
	#tepld-page .tepld-barre .tepld-cta { margin: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IMPRESSION
   Une page de vente s'imprime rarement, mais un tarif se transmet souvent.
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
	#tepld-page .tepld-barre { display: none; }
	#tepld-page [data-anim] { opacity: 1; transform: none; }
	#tepld-page .tepld-sombre { background: #fff; color: #000; }
	#tepld-page .tepld-sombre::before { display: none; }
}