/*!
 * eSoucoulou Learn — interface d'apprentissage
 * ---------------------------------------------------------------------------
 * Feuille maîtresse du skin : jetons de couleur, mise en page de la zone de
 * cours, tableau de bord, cartes, certificat, et correctifs des bugs constatés
 * en production (panneaux Alpine visibles, textes illisibles en sombre, boutons
 * superposés, bulles flottantes qui masquent la navigation).
 *
 * Principe : on ne touche jamais au fonctionnement de Tutor, seulement à la
 * présentation. Tous nos sélecteurs sont préfixés `eso-` ; les rares sélecteurs
 * Tutor utilisés servent uniquement à poser la grille de page.
 */

/* ===========================================================================
   0. CORRECTIF CRITIQUE — panneaux Alpine visibles
   ---------------------------------------------------------------------------
   Symptôme observé sur toutes les pages du tableau de bord : le texte
   « Aucune notification pour le moment / Les informations sur votre activité
   s'afficheront ici. » s'affichait par-dessus la page.
   Cause : Tutor 4 s'appuie sur Alpine, qui masque les éléments non encore
   initialisés grâce à la règle `[x-cloak]{display:none}`. Cette règle d'une
   ligne est supprimée par l'optimisation CSS de LiteSpeed (UCSS / CSS combine),
   qui ne la « voit » utilisée nulle part. On la réinjecte ici, dans une feuille
   exclue de l'optimisation.
   =========================================================================== */
[x-cloak] { display: none !important; }

/* ===========================================================================
   1. JETONS
   =========================================================================== */
:root {
	--eso-l-brand:        #1aaf1a;
	--eso-l-brand-dark:   #128a12;
	--eso-l-brand-soft:   #e8f6eb;
	--eso-l-bg:           #f5f7f6;
	--eso-l-surface:      #ffffff;
	--eso-l-surface-2:    #f0f3f1;
	--eso-l-ink:          #10201a;
	--eso-l-ink-2:        #40514a;
	--eso-l-muted:        #6c7d75;
	--eso-l-border:       #dfe7e2;
	--eso-l-track:        #e4ebe7;
	--eso-l-shadow:       0 1px 2px rgba(16,32,26,.06), 0 8px 24px rgba(16,32,26,.06);
	--eso-l-radius:       14px;
	--eso-l-head-h:       60px;
	--eso-l-foot-h:       72px;
	--eso-l-side-w:       330px;
	--eso-l-read:         760px;
}

[data-eso-theme="dark"] {
	--eso-l-brand:        #35c935;
	--eso-l-brand-dark:   #27a827;
	--eso-l-brand-soft:   #12291a;
	--eso-l-bg:           #0f1512;
	--eso-l-surface:      #161d19;
	--eso-l-surface-2:    #1d2621;
	--eso-l-ink:          #eef4f0;
	--eso-l-ink-2:        #c2cec8;
	--eso-l-muted:        #8ea095;
	--eso-l-border:       #27332c;
	--eso-l-track:        #27332c;
	--eso-l-shadow:       0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
}

/* Le thème s'applique aussi aux composants natifs de Tutor : on aligne ses
   propres variables sur les nôtres pour qu'il n'y ait jamais deux gris
   différents à l'écran. */
[data-eso-theme="dark"] {
	--tutor-surface-base: var(--eso-l-bg);
	--tutor-surface-l1: var(--eso-l-surface);
	--tutor-surface-l2: var(--eso-l-surface-2);
	--tutor-text-primary: var(--eso-l-ink);
	--tutor-text-secondary: var(--eso-l-ink-2);
	--tutor-text-subdued: var(--eso-l-muted);
	--tutor-border: var(--eso-l-border);
	--tutor-color-primary: var(--eso-l-brand);
}

.eso-only-dark { display: none; }
[data-eso-theme="dark"] .eso-only-dark { display: inline-flex; }
[data-eso-theme="dark"] .eso-only-light { display: none; }

/* ===========================================================================
   2. PRIMITIVES
   =========================================================================== */
.eso-learn .eso-ic { flex: 0 0 auto; }

.eso-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font: inherit; font-weight: 600; line-height: 1.2;
	padding: 11px 18px; border-radius: 10px; border: 1px solid transparent;
	cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.eso-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--eso-l-brand) 45%, transparent); outline-offset: 2px; }
.eso-btn:active { transform: translateY(1px); }
.eso-btn--primary { background: var(--eso-l-brand); color: #fff; }
.eso-btn--primary:hover { background: var(--eso-l-brand-dark); color: #fff; }
.eso-btn--ghost { background: var(--eso-l-surface); color: var(--eso-l-ink); border-color: var(--eso-l-border); }
.eso-btn--ghost:hover { background: var(--eso-l-surface-2); color: var(--eso-l-ink); }
.eso-btn[disabled], .eso-btn[aria-disabled="true"] { opacity: .65; cursor: default; }

.eso-bar { height: 6px; border-radius: 999px; background: var(--eso-l-track); overflow: hidden; }
.eso-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--eso-l-brand); transition: width .4s ease; }

.eso-ring circle { transition: stroke-dashoffset .5s ease; }

.eso-hide-sm { display: inline-flex; }
@media (max-width: 768px) { .eso-hide-sm { display: none !important; } }

/* ===========================================================================
   3. ZONE D'APPRENTISSAGE — mise en page
   ---------------------------------------------------------------------------
   Nos composants remplacent l'en-tête et le sommaire de Tutor : la grille
   fournie par son CSS ne s'applique donc plus. On la redéfinit ici, ce qui a
   l'avantage de rendre la page indépendante des styles purgés par LiteSpeed.
   =========================================================================== */
body.eso-learn-focus .tutor-learning-area {
	display: block;
	background: var(--eso-l-bg);
	min-height: 100vh;
}
body.eso-learn-focus .tutor-learning-area-body {
	display: grid;
	grid-template-columns: var(--eso-l-side-w) minmax(0, 1fr);
	align-items: start;
	min-height: calc(100vh - var(--eso-l-head-h));
}
body.eso-learn-focus .tutor-learning-area-content {
	min-width: 0;
	padding: 28px clamp(16px, 4vw, 40px) calc(var(--eso-l-foot-h) + 40px);
}
body.eso-learn-focus .tutor-learning-area-container {
	max-width: var(--eso-l-read);
	margin: 0 auto;
}

/* --- En-tête ------------------------------------------------------------ */
.eso-lh {
	position: sticky; top: 0; z-index: 40;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	height: var(--eso-l-head-h);
	padding: 0 clamp(10px, 2vw, 18px);
	background: var(--eso-l-surface);
	border-bottom: 1px solid var(--eso-l-border);
}
.eso-lh__left, .eso-lh__right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.eso-lh__back {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--eso-l-ink-2); text-decoration: none; font-weight: 600; font-size: 14px;
	padding: 8px 10px; border-radius: 9px;
}
.eso-lh__back:hover { background: var(--eso-l-surface-2); color: var(--eso-l-ink); }
@media (max-width: 900px) { .eso-lh__back-label { display: none; } }

.eso-lh__burger, .eso-lh__icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 9px;
	background: transparent; border: 1px solid transparent; color: var(--eso-l-ink-2); cursor: pointer;
}
.eso-lh__burger:hover, .eso-lh__icon-btn:hover { background: var(--eso-l-surface-2); color: var(--eso-l-ink); }
.eso-lh__burger { display: none; }
@media (max-width: 1024px) { .eso-lh__burger { display: inline-flex; } }

.eso-lh__titles { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.eso-lh__course {
	font-weight: 700; font-size: 15px; color: var(--eso-l-ink); text-decoration: none;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw;
}
.eso-lh__chapter {
	font-size: 12.5px; color: var(--eso-l-muted);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw;
}
.eso-lh__progress { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.eso-lh__progress-num {
	position: absolute; font-size: 10.5px; font-weight: 700; color: var(--eso-l-ink);
}
.eso-lh__progress-num small { font-size: 8px; }
.eso-lh__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 0; }
.eso-lh__actions { display: flex; gap: 8px; }
.eso-lh__offline-slot:empty { display: none; }

/* --- Sommaire ----------------------------------------------------------- */
.eso-ls {
	position: sticky; top: var(--eso-l-head-h);
	display: flex; flex-direction: column;
	height: calc(100vh - var(--eso-l-head-h));
	background: var(--eso-l-surface);
	border-right: 1px solid var(--eso-l-border);
	overflow: hidden;
}
.eso-ls__head { display: none; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--eso-l-border); }
.eso-ls__head-title { font-weight: 700; }
.eso-ls__close { background: none; border: 0; color: var(--eso-l-ink-2); cursor: pointer; padding: 6px; border-radius: 8px; }

.eso-ls__progress { padding: 16px 18px 14px; border-bottom: 1px solid var(--eso-l-border); }
.eso-ls__progress-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.eso-ls__progress-pct { font-size: 20px; font-weight: 700; color: var(--eso-l-ink); }
.eso-ls__progress-count { font-size: 13px; color: var(--eso-l-muted); }
.eso-ls__done-note {
	display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0;
	font-size: 13px; line-height: 1.45; color: var(--eso-l-brand-dark);
	background: var(--eso-l-brand-soft); border-radius: 10px; padding: 10px 12px;
}
[data-eso-theme="dark"] .eso-ls__done-note { color: var(--eso-l-brand); }

.eso-ls__nav { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 0 12px; }
.eso-ls__empty { padding: 20px 18px; color: var(--eso-l-muted); font-size: 14px; }

.eso-ls__topic { border-bottom: 1px solid var(--eso-l-border); }
.eso-ls__topic-head {
	display: flex; align-items: center; gap: 10px;
	padding: 13px 16px; cursor: pointer; list-style: none;
}
.eso-ls__topic-head::-webkit-details-marker { display: none; }
.eso-ls__topic-head:hover { background: var(--eso-l-surface-2); }
.eso-ls__topic-ring { display: inline-flex; flex: 0 0 auto; }
.eso-ls__topic-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.eso-ls__topic-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--eso-l-muted); }
.eso-ls__topic-title { font-size: 14px; font-weight: 600; color: var(--eso-l-ink); line-height: 1.35; }
.eso-ls__topic-arrow { color: var(--eso-l-muted); transition: transform .2s ease; }
.eso-ls__topic[open] .eso-ls__topic-arrow { transform: rotate(180deg); }
.eso-ls__topic.is-active .eso-ls__topic-title { color: var(--eso-l-brand-dark); }
[data-eso-theme="dark"] .eso-ls__topic.is-active .eso-ls__topic-title { color: var(--eso-l-brand); }

.eso-ls__items { list-style: none; margin: 0; padding: 0 0 8px; }
.eso-ls__link {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 9px 16px 9px 18px; text-decoration: none; color: var(--eso-l-ink-2);
	border-left: 3px solid transparent;
}
a.eso-ls__link:hover { background: var(--eso-l-surface-2); color: var(--eso-l-ink); }
.eso-ls__state { display: inline-flex; padding-top: 1px; color: var(--eso-l-muted); }
.eso-ls__item-body { display: flex; flex-direction: column; min-width: 0; }
.eso-ls__item-title { font-size: 14px; line-height: 1.4; }
.eso-ls__item-meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--eso-l-muted); margin-top: 2px; }
.eso-ls__free { color: var(--eso-l-brand-dark); font-weight: 600; }

.eso-ls__item.is-done .eso-ls__state { color: var(--eso-l-brand); }
.eso-ls__item.is-done .eso-ls__item-title { color: var(--eso-l-muted); }
.eso-ls__item.is-current .eso-ls__link {
	background: var(--eso-l-brand-soft); border-left-color: var(--eso-l-brand); color: var(--eso-l-ink);
}
.eso-ls__item.is-current .eso-ls__item-title { font-weight: 700; }
.eso-ls__item.is-locked .eso-ls__link { opacity: .55; cursor: not-allowed; }

.eso-ls__pages { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; border-top: 1px solid var(--eso-l-border); }
.eso-ls__page {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 12.5px; font-weight: 600; text-decoration: none;
	color: var(--eso-l-ink-2); background: var(--eso-l-surface-2);
	padding: 7px 11px; border-radius: 999px;
}
.eso-ls__page:hover, .eso-ls__page.is-active { background: var(--eso-l-brand-soft); color: var(--eso-l-brand-dark); }
[data-eso-theme="dark"] .eso-ls__page:hover, [data-eso-theme="dark"] .eso-ls__page.is-active { color: var(--eso-l-brand); }

.eso-ls__foot { padding: 10px 16px 14px; border-top: 1px solid var(--eso-l-border); }
.eso-ls__hint { font-size: 11.5px; color: var(--eso-l-muted); }
@media (max-width: 1024px) { .eso-ls__foot { display: none; } }

/* Sommaire hors-écran sur mobile */
@media (max-width: 1024px) {
	body.eso-learn-focus .tutor-learning-area-body { grid-template-columns: minmax(0, 1fr); }
	.eso-ls {
		position: fixed; top: 0; left: 0; bottom: 0; z-index: 70;
		width: min(88vw, var(--eso-l-side-w)); height: 100vh;
		transform: translateX(-102%); transition: transform .25s ease;
		box-shadow: var(--eso-l-shadow);
	}
	.eso-ls.is-open { transform: translateX(0); }
	.eso-ls__head { display: flex; }
	body.eso-sidebar-open::after {
		content: ""; position: fixed; inset: 0; z-index: 60; background: rgba(8,16,12,.45);
	}
}

/* --- Colonne de lecture -------------------------------------------------- */
body.eso-learn-focus .tutor-lesson-content,
body.eso-learn-focus .tutor-quiz-content,
body.eso-learn-focus .tutor-learning-area-container > * {
	background: var(--eso-l-surface);
	border: 1px solid var(--eso-l-border);
	border-radius: var(--eso-l-radius);
	box-shadow: var(--eso-l-shadow);
	overflow: hidden;
}
body.eso-learn-focus .tutor-lesson-content {
	color: var(--eso-l-ink);
	font-size: 17px;
	line-height: 1.75;
}
body.eso-learn-focus .tutor-lesson-content h1,
body.eso-learn-focus .tutor-lesson-content h2,
body.eso-learn-focus .tutor-lesson-content h3 {
	color: var(--eso-l-ink); line-height: 1.25; letter-spacing: -.01em;
}
body.eso-learn-focus .tutor-lesson-content h2 { font-size: 1.5em; margin-top: 1.8em; }
body.eso-learn-focus .tutor-lesson-content h3 { font-size: 1.22em; margin-top: 1.5em; }
body.eso-learn-focus .tutor-lesson-content p { margin: 0 0 1.1em; }
body.eso-learn-focus .tutor-lesson-content ul,
body.eso-learn-focus .tutor-lesson-content ol { padding-left: 1.4em; margin: 0 0 1.2em; }
body.eso-learn-focus .tutor-lesson-content li { margin-bottom: .5em; }
body.eso-learn-focus .tutor-lesson-content img { max-width: 100%; height: auto; border-radius: 10px; }
body.eso-learn-focus .tutor-lesson-content table { display: block; overflow-x: auto; max-width: 100%; }
body.eso-learn-focus .tutor-lesson-content pre { overflow-x: auto; border-radius: 10px; }
body.eso-learn-focus .tutor-lesson-content a { color: var(--eso-l-brand-dark); }
[data-eso-theme="dark"] body.eso-learn-focus .tutor-lesson-content a { color: var(--eso-l-brand); }

/* CORRECTIF LISIBILITÉ (capture du 16/09) : les cours eSoucoulou sont rédigés
   en HTML avec des couleurs en style inline, pensées pour un fond blanc. En
   mode sombre, « Ce que vous allez apprendre » devenait quasiment invisible.
   On neutralise les couleurs inline (texte ET fond) uniquement en sombre, sans
   toucher au balisage : le contenu reste éditable tel quel. */
[data-eso-theme="dark"] body.eso-learn-focus .tutor-lesson-content [style*="color"],
[data-eso-theme="dark"] body.eso-learn-focus .tutor-lesson-content [style*="Color"] {
	color: var(--eso-l-ink) !important;
}
[data-eso-theme="dark"] body.eso-learn-focus .tutor-lesson-content [style*="background"] {
	background-color: var(--eso-l-surface-2) !important;
	border-color: var(--eso-l-border) !important;
}
[data-eso-theme="dark"] body.eso-learn-focus .tutor-lesson-content [style*="background"] * {
	color: var(--eso-l-ink) !important;
}
/* … sauf les encadrés de la charte, dont on préserve la couleur d'accent. */
[data-eso-theme="dark"] body.eso-learn-focus .tutor-lesson-content strong[style*="color"] {
	color: var(--eso-l-brand) !important;
}

/* --- Pied de leçon ------------------------------------------------------- */
.eso-lf {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
	min-height: var(--eso-l-foot-h);
	padding: 12px clamp(12px, 3vw, 28px);
	/* Marge de sécurité à droite : la bulle WhatsApp et l'assistant du thème
	   se superposaient au bouton « Suivant » (capture du 16/09). */
	padding-right: clamp(72px, 9vw, 120px);
	background: var(--eso-l-surface);
	border-top: 1px solid var(--eso-l-border);
	box-shadow: 0 -6px 20px rgba(16,32,26,.06);
}
@media (min-width: 1025px) {
	.eso-lf { left: var(--eso-l-side-w); }
}
.eso-lf__side { display: flex; }
.eso-lf__side--next { justify-content: flex-end; }
.eso-lf__center { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.eso-lf__form { margin: 0; }
.eso-lf__progress { font-size: 12px; color: var(--eso-l-muted); }
.eso-btn--complete {
	background: var(--eso-l-brand); color: #fff; border-color: transparent;
	padding: 12px 22px; border-radius: 10px; font-weight: 700;
}
.eso-btn--complete.is-done { background: var(--eso-l-brand-soft); color: var(--eso-l-brand-dark); }
[data-eso-theme="dark"] .eso-btn--complete.is-done { color: var(--eso-l-brand); }

/* Bulles flottantes du thème : elles restent disponibles, mais ne doivent
   jamais recouvrir la navigation du cours. */
body.eso-learn-focus .eso-whatsapp-float { bottom: calc(var(--eso-l-foot-h) + 14px); }
body.eso-learn-focus .eso-assistant,
body.eso-learn-focus .eso-asst__launcher { bottom: calc(var(--eso-l-foot-h) + 14px) !important; }
/* La bannière pleine largeur « Télécharger pour hors-ligne » est déplacée dans
   l'en-tête par notre JS ; on masque l'emplacement d'origine. */
body.eso-learn-focus .eso-offline-dl { display: none !important; }

/* ===========================================================================
   4. TABLEAU DE BORD
   =========================================================================== */
body.eso-learn-dashboard { background: var(--eso-l-bg); }
body.eso-learn-dashboard .tutor-dashboard-layout {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	align-items: start;
	min-height: 100vh;
}
body.eso-learn-dashboard .tutor-dashboard-main { min-width: 0; }
body.eso-learn-dashboard .tutor-dashboard-body { padding: clamp(18px, 3vw, 32px); }
body.eso-learn-dashboard .tutor-dashboard-page { max-width: 1100px; margin: 0 auto; }

/* --- Navigation latérale ------------------------------------------------- */
.eso-dn {
	position: sticky; top: 0; height: 100vh; overflow-y: auto;
	display: flex; flex-direction: column; gap: 6px;
	padding: 18px 12px;
	background: var(--eso-l-surface); border-right: 1px solid var(--eso-l-border);
}
.eso-dn__logo { display: flex; align-items: center; padding: 6px 10px 16px; text-decoration: none; }
.eso-dn__logo img { max-height: 36px; width: auto; }
.eso-dn__logo-text { font-weight: 800; font-size: 19px; color: var(--eso-l-brand); }
.eso-dn__scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; }
.eso-dn__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.eso-dn__group { display: flex; flex-direction: column; gap: 4px; }
.eso-dn__group-title {
	font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--eso-l-muted); padding: 0 12px;
}
.eso-dn__item > a {
	display: flex; align-items: center; gap: 11px;
	padding: 10px 12px; border-radius: 10px;
	color: var(--eso-l-ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500;
}
.eso-dn__item > a:hover { background: var(--eso-l-surface-2); color: var(--eso-l-ink); }
.eso-dn__item.is-active > a { background: var(--eso-l-brand-soft); color: var(--eso-l-brand-dark); font-weight: 700; }
[data-eso-theme="dark"] .eso-dn__item.is-active > a { color: var(--eso-l-brand); }
.eso-dn__explore {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	margin-top: 10px; padding: 12px 14px; border-radius: 10px;
	border: 1px dashed var(--eso-l-border); color: var(--eso-l-ink-2);
	text-decoration: none; font-size: 14px; font-weight: 600;
}
.eso-dn__explore:hover { border-color: var(--eso-l-brand); color: var(--eso-l-brand-dark); }

@media (max-width: 992px) {
	body.eso-learn-dashboard .tutor-dashboard-layout { grid-template-columns: minmax(0, 1fr); }
	.eso-dn {
		position: fixed; top: 0; left: 0; bottom: 0; z-index: 70; width: min(84vw, 300px);
		transform: translateX(-102%); transition: transform .25s ease; box-shadow: var(--eso-l-shadow);
	}
	.eso-dn.is-open { transform: translateX(0); }
	body.eso-dashnav-open::after { content: ""; position: fixed; inset: 0; z-index: 60; background: rgba(8,16,12,.45); }
}

/* --- En-tête ------------------------------------------------------------- */
.eso-dh {
	position: sticky; top: 0; z-index: 50;
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 14px clamp(14px, 3vw, 28px);
	background: var(--eso-l-surface); border-bottom: 1px solid var(--eso-l-border);
}
.eso-dh__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.eso-dh__burger {
	display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
	border-radius: 10px; border: 1px solid var(--eso-l-border); background: var(--eso-l-surface);
	color: var(--eso-l-ink-2); cursor: pointer;
}
@media (max-width: 992px) { .eso-dh__burger { display: inline-flex; } }
.eso-dh__hello { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.eso-dh__greet { font-size: 13px; color: var(--eso-l-muted); }
.eso-dh__name { font-size: 18px; font-weight: 700; color: var(--eso-l-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eso-dh__meta { font-size: 12.5px; color: var(--eso-l-muted); }
.eso-dh__right { display: flex; align-items: center; gap: 10px; }
.eso-dh__cta {
	font-size: 14px; font-weight: 600; text-decoration: none; padding: 9px 14px;
	border-radius: 9px; border: 1px solid var(--eso-l-border); color: var(--eso-l-ink-2);
}
.eso-dh__cta:hover { border-color: var(--eso-l-brand); color: var(--eso-l-brand-dark); }
.eso-dh__icon-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
	border-radius: 10px; background: transparent; border: 1px solid transparent; color: var(--eso-l-ink-2); cursor: pointer;
}
.eso-dh__icon-btn:hover { background: var(--eso-l-surface-2); color: var(--eso-l-ink); }

/* Emplacement des extensions (cloche de notifications) : tout panneau enfant
   est confiné sous la cloche au lieu de flotter au milieu de la page. */
.eso-dh__addon { position: relative; isolation: isolate; }
.eso-dh__addon [class*="popover"],
.eso-dh__addon [class*="dropdown"],
.eso-dh__addon [role="menu"] {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
	min-width: 280px; max-width: min(92vw, 360px);
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border);
	border-radius: 12px; box-shadow: var(--eso-l-shadow); padding: 12px;
}

.eso-dh__account { position: relative; }
.eso-dh__avatar { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: var(--eso-l-surface-2); }
.eso-dh__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eso-dh__menu {
	position: absolute; top: calc(100% + 10px); right: 0; z-index: 90;
	min-width: 250px; background: var(--eso-l-surface);
	border: 1px solid var(--eso-l-border); border-radius: 12px;
	box-shadow: var(--eso-l-shadow); overflow: hidden;
}
.eso-dh__menu[hidden] { display: none; }
.eso-dh__menu-id { padding: 14px 16px; border-bottom: 1px solid var(--eso-l-border); display: flex; flex-direction: column; gap: 2px; }
.eso-dh__menu-id strong { color: var(--eso-l-ink); }
.eso-dh__menu-id span { font-size: 12.5px; color: var(--eso-l-muted); overflow: hidden; text-overflow: ellipsis; }
.eso-dh__menu-list { list-style: none; margin: 0; padding: 6px; }
.eso-dh__menu-list a {
	display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
	color: var(--eso-l-ink-2); text-decoration: none; font-size: 14px;
}
.eso-dh__menu-list a:hover { background: var(--eso-l-surface-2); color: var(--eso-l-ink); }

/* --- Statistiques -------------------------------------------------------- */
.eso-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
@media (max-width: 860px) { .eso-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eso-stat {
	display: flex; flex-direction: column; gap: 2px;
	padding: 16px 18px; border-radius: var(--eso-l-radius);
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border);
	text-decoration: none; color: inherit; position: relative; overflow: hidden;
}
a.eso-stat:hover { border-color: var(--eso-l-brand); }
.eso-stat__icon { position: absolute; top: 14px; right: 14px; color: var(--eso-l-muted); opacity: .8; }
.eso-stat__value { font-size: 30px; font-weight: 800; color: var(--eso-l-ink); line-height: 1.15; }
.eso-stat__title { font-size: 13.5px; color: var(--eso-l-ink-2); font-weight: 600; }
.eso-stat__hint { font-size: 11.5px; color: var(--eso-l-muted); margin-top: 3px; }
.eso-stat--completed .eso-stat__value { color: var(--eso-l-brand-dark); }
[data-eso-theme="dark"] .eso-stat--completed .eso-stat__value { color: var(--eso-l-brand); }

/* --- Reprise de lecture -------------------------------------------------- */
.eso-resume__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.eso-resume__title { font-size: 17px; font-weight: 700; margin: 0; color: var(--eso-l-ink); }
.eso-resume__all { font-size: 13.5px; font-weight: 600; color: var(--eso-l-brand-dark); text-decoration: none; }
[data-eso-theme="dark"] .eso-resume__all { color: var(--eso-l-brand); }
.eso-resume__list { display: flex; flex-direction: column; gap: 12px; }

.eso-rcard {
	display: grid; grid-template-columns: 116px minmax(0, 1fr) auto;
	gap: 16px; align-items: center;
	padding: 14px; border-radius: var(--eso-l-radius);
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border);
}
.eso-rcard__thumb { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--eso-l-surface-2); }
.eso-rcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eso-rcard__ph { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--eso-l-muted); }
.eso-rcard__title { margin: 0 0 4px; font-size: 15.5px; line-height: 1.35; }
.eso-rcard__title a { color: var(--eso-l-ink); text-decoration: none; }
.eso-rcard__title a:hover { color: var(--eso-l-brand-dark); }
.eso-rcard__meta { font-size: 12.5px; color: var(--eso-l-muted); margin-bottom: 8px; }
@media (max-width: 720px) {
	.eso-rcard { grid-template-columns: 84px minmax(0, 1fr); }
	.eso-rcard__action { grid-column: 1 / -1; }
	.eso-rcard__action .eso-btn { width: 100%; }
}

.eso-cardprog__text { font-size: 12.5px; color: var(--eso-l-muted); margin-bottom: 6px; }
.eso-cardprog__sep { margin: 0 4px; }

/* --- États vides --------------------------------------------------------- */
.eso-empty {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
	padding: 40px 24px; border-radius: var(--eso-l-radius);
	background: var(--eso-l-surface); border: 1px dashed var(--eso-l-border);
}
.eso-empty__icon { color: var(--eso-l-muted); margin-bottom: 4px; }
.eso-empty__title { font-weight: 700; color: var(--eso-l-ink); margin: 0; }
.eso-empty__text { color: var(--eso-l-muted); font-size: 14px; margin: 0 0 12px; max-width: 46ch; }

/* ===========================================================================
   5. CERTIFICAT (côté site)
   =========================================================================== */
.eso-cert-cta {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	margin: 26px 0; padding: 18px 20px; border-radius: var(--eso-l-radius);
	background: var(--eso-l-brand-soft); border: 1px solid color-mix(in srgb, var(--eso-l-brand) 35%, transparent);
}
.eso-cert-cta__icon { color: var(--eso-l-brand-dark); display: inline-flex; }
[data-eso-theme="dark"] .eso-cert-cta__icon { color: var(--eso-l-brand); }
.eso-cert-cta__text { display: flex; flex-direction: column; flex: 1 1 260px; }
.eso-cert-cta__text strong { color: var(--eso-l-ink); }
.eso-cert-cta__text span { font-size: 13px; color: var(--eso-l-ink-2); }

.eso-cert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.eso-cert-list__item {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 14px 16px; border-radius: var(--eso-l-radius);
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border);
}
.eso-cert-list__icon { color: var(--eso-l-brand); display: inline-flex; }
.eso-cert-list__body { display: flex; flex-direction: column; flex: 1 1 240px; min-width: 0; }
.eso-cert-list__meta { font-size: 12.5px; color: var(--eso-l-muted); }
.eso-cert-list__meta code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.eso-cert-verify { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.eso-cert-verify label { flex: 1 1 100%; font-weight: 600; color: var(--eso-l-ink); }
.eso-cert-verify input[type="text"] {
	flex: 1 1 260px; padding: 12px 14px; font-size: 16px;
	border: 1px solid var(--eso-l-border); border-radius: 10px;
	background: var(--eso-l-surface); color: var(--eso-l-ink);
}

/* ===========================================================================
   6. IMPRESSION
   =========================================================================== */
@media print {
	.eso-lh, .eso-ls, .eso-lf, .eso-dh, .eso-dn,
	.eso-whatsapp-float, .eso-assistant, .eso-offline-dl { display: none !important; }
	body.eso-learn-focus .tutor-learning-area-body { grid-template-columns: 1fr; }
	body.eso-learn-focus .tutor-learning-area-content { padding: 0; }
	body.eso-learn-focus .tutor-lesson-content { border: 0; box-shadow: none; }
}

/* ===========================================================================
   7. MOUVEMENT RÉDUIT
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.eso-bar > span, .eso-ring circle, .eso-ls, .eso-dn, .eso-btn { transition: none !important; }
}

/* ===========================================================================
   8. QUIZ (rendu serveur, sans JavaScript)
   =========================================================================== */
.eso-quiz { display: flex; flex-direction: column; gap: 18px; }
.eso-quiz__head {
	display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: baseline;
	padding-bottom: 12px; border-bottom: 1px solid var(--eso-l-border);
}
.eso-quiz__count { font-weight: 700; color: var(--eso-l-ink); }
.eso-quiz__pass { font-size: 13px; color: var(--eso-l-muted); }

.eso-quiz__q {
	border: 1px solid var(--eso-l-border); border-radius: var(--eso-l-radius);
	background: var(--eso-l-surface); padding: 18px 20px; margin: 0;
}
.eso-quiz__q-title {
	display: flex; gap: 10px; align-items: flex-start;
	font-size: 16px; font-weight: 700; color: var(--eso-l-ink); padding: 0; line-height: 1.4;
}
.eso-quiz__q-num {
	flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--eso-l-brand-soft); color: var(--eso-l-brand-dark);
	font-size: 13px; font-weight: 700;
}
[data-eso-theme="dark"] .eso-quiz__q-num { color: var(--eso-l-brand); }
.eso-quiz__q-desc { margin: 10px 0 0; color: var(--eso-l-ink-2); font-size: 15px; }
.eso-quiz__hint { font-size: 13px; color: var(--eso-l-muted); margin: 8px 0 0; }

.eso-quiz__options { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.eso-quiz__option {
	display: flex; align-items: flex-start; gap: 11px;
	padding: 12px 14px; border: 1px solid var(--eso-l-border); border-radius: 10px;
	cursor: pointer; color: var(--eso-l-ink); line-height: 1.45;
	/* Cible tactile confortable : ces quiz se passent au téléphone. */
	min-height: 48px;
}
.eso-quiz__option:hover { border-color: var(--eso-l-brand); background: var(--eso-l-surface-2); }
.eso-quiz__option input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--eso-l-brand); }
.eso-quiz__option:focus-within { outline: 3px solid color-mix(in srgb, var(--eso-l-brand) 40%, transparent); outline-offset: 2px; }

.eso-quiz__blank { display: inline-block; margin: 12px 8px 0 0; }
.eso-quiz__blank input,
.eso-quiz__text {
	width: 100%; padding: 12px 14px; font: inherit; font-size: 16px;
	border: 1px solid var(--eso-l-border); border-radius: 10px;
	background: var(--eso-l-surface); color: var(--eso-l-ink);
}
.eso-quiz__blank input { min-width: 220px; width: auto; }
.eso-quiz__text { margin-top: 12px; resize: vertical; }

.eso-quiz__foot { display: flex; justify-content: flex-end; padding-top: 4px; }
.eso-quiz__foot .eso-btn { padding: 14px 26px; font-size: 16px; }
.eso-quiz__notice {
	padding: 14px 16px; border-radius: 10px;
	background: var(--eso-l-surface-2); color: var(--eso-l-ink-2); border: 1px solid var(--eso-l-border);
}

.eso-quiz-result {
	text-align: center; padding: 30px 24px; border-radius: var(--eso-l-radius);
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border);
}
.eso-quiz-result__score { font-size: 48px; font-weight: 800; line-height: 1.05; color: var(--eso-l-ink); }
.eso-quiz-result__title { font-size: 18px; font-weight: 700; margin: 8px 0 6px; }
.eso-quiz-result__meta { color: var(--eso-l-muted); font-size: 14px; margin: 0 0 16px; max-width: 52ch; margin-inline: auto; }
.eso-quiz-result.is-pass { border-color: color-mix(in srgb, var(--eso-l-brand) 45%, transparent); }
.eso-quiz-result.is-pass .eso-quiz-result__score { color: var(--eso-l-brand-dark); }
[data-eso-theme="dark"] .eso-quiz-result.is-pass .eso-quiz-result__score { color: var(--eso-l-brand); }
.eso-quiz-result.is-fail .eso-quiz-result__score { color: #c0392b; }
.eso-quiz-result.is-pending .eso-quiz-result__score { color: #b8860b; }

.eso-quiz-history { margin-top: 26px; }
.eso-quiz-history__title { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--eso-l-ink); }
.eso-quiz-history ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.eso-quiz-history li {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 10px 14px; border-radius: 9px; background: var(--eso-l-surface-2); font-size: 14px;
}
.eso-quiz-history__date { color: var(--eso-l-muted); }
.eso-quiz-history__score { font-weight: 700; color: var(--eso-l-ink-2); }
.eso-quiz-history__score.is-ok { color: var(--eso-l-brand-dark); }
[data-eso-theme="dark"] .eso-quiz-history__score.is-ok { color: var(--eso-l-brand); }

/* ===========================================================================
   9. LECTEUR ET ESPACE RENDUS SERVEUR (étape 2)
   ---------------------------------------------------------------------------
   Ces écrans sont construits en PHP : la mise en page ne dépend d'aucun script.
   Si le JavaScript ne s'exécute pas, on perd le sommaire escamotable sur mobile
   et les raccourcis clavier — jamais la lecture du cours.
   =========================================================================== */
.eso-player-shell { background: var(--eso-l-bg); }
.eso-player-body {
	display: grid;
	grid-template-columns: var(--eso-l-side-w) minmax(0, 1fr);
	align-items: start;
	min-height: calc(100vh - var(--eso-l-head-h));
}
@media (max-width: 1024px) { .eso-player-body { grid-template-columns: minmax(0, 1fr); } }

.eso-player-main { min-width: 0; padding: 28px clamp(16px, 4vw, 40px) calc(var(--eso-l-foot-h) + 40px); }
.eso-player-container { max-width: var(--eso-l-read); margin: 0 auto; }
.eso-player-title { font-size: clamp(24px, 3.6vw, 32px); line-height: 1.22; margin: 0 0 20px; color: var(--eso-l-ink); }
.eso-player-flash {
	margin: 0 0 18px; padding: 12px 16px; border-radius: 10px;
	background: var(--eso-l-brand-soft); color: var(--eso-l-brand-dark); font-weight: 600;
}
[data-eso-theme="dark"] .eso-player-flash { color: var(--eso-l-brand); }

.eso-lesson-video { margin: 0 0 24px; border-radius: var(--eso-l-radius); overflow: hidden; background: #000; }
.eso-lesson-video iframe,
.eso-lesson-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.eso-lesson-content {
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border);
	border-radius: var(--eso-l-radius); box-shadow: var(--eso-l-shadow);
	padding: clamp(18px, 3vw, 32px);
	color: var(--eso-l-ink); font-size: 17px; line-height: 1.75;
}
.eso-lesson-content > *:first-child { margin-top: 0; }
.eso-lesson-content > *:last-child { margin-bottom: 0; }
.eso-lesson-content img { max-width: 100%; height: auto; border-radius: 10px; }
.eso-lesson-content table { display: block; overflow-x: auto; max-width: 100%; }
.eso-lesson-content pre { overflow-x: auto; border-radius: 10px; }
/* Mêmes correctifs de lisibilité que pour les cours au format HTML maison. */
[data-eso-theme="dark"] .eso-lesson-content [style*="color"] { color: var(--eso-l-ink) !important; }
[data-eso-theme="dark"] .eso-lesson-content [style*="background"] {
	background-color: var(--eso-l-surface-2) !important; border-color: var(--eso-l-border) !important;
}
[data-eso-theme="dark"] .eso-lesson-content [style*="background"] * { color: var(--eso-l-ink) !important; }

.eso-lesson-files, .eso-assignment-box {
	margin-top: 22px; padding: 18px 20px; border-radius: var(--eso-l-radius);
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border);
}
.eso-lesson-files h2, .eso-assignment-box h2 { font-size: 16px; margin: 0 0 10px; color: var(--eso-l-ink); }
.eso-lesson-files ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.eso-lesson-files a { display: inline-flex; align-items: center; gap: 8px; color: var(--eso-l-brand-dark); text-decoration: none; }
[data-eso-theme="dark"] .eso-lesson-files a { color: var(--eso-l-brand); }
.eso-assignment-box p { color: var(--eso-l-ink-2); margin: 0 0 14px; }

.eso-lf__state { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--eso-l-brand-dark); }
[data-eso-theme="dark"] .eso-lf__state { color: var(--eso-l-brand); }

/* --- Espace apprenant ---------------------------------------------------- */
.eso-space-shell { max-width: 1080px; margin: 0 auto; padding: clamp(18px, 3vw, 34px) clamp(14px, 3vw, 24px) 60px; }
.eso-space-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; border-bottom: 1px solid var(--eso-l-border); }
.eso-space-nav__item {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 16px; text-decoration: none; font-weight: 600; font-size: 15px;
	color: var(--eso-l-ink-2); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.eso-space-nav__item:hover { color: var(--eso-l-ink); }
.eso-space-nav__item.is-active { color: var(--eso-l-brand-dark); border-bottom-color: var(--eso-l-brand); }
[data-eso-theme="dark"] .eso-space-nav__item.is-active { color: var(--eso-l-brand); }
.eso-space-nav__item--alt { margin-left: auto; color: var(--eso-l-muted); }

.eso-space-head { margin-bottom: 22px; }
.eso-space-title { font-size: clamp(24px, 3.4vw, 30px); margin: 0 0 4px; color: var(--eso-l-ink); }
.eso-space-sub { color: var(--eso-l-muted); margin: 0; }

.eso-space-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.eso-space-tab {
	padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 600;
	background: var(--eso-l-surface-2); color: var(--eso-l-ink-2); border: 1px solid transparent;
}
.eso-space-tab.is-active, .eso-space-tab:hover { background: var(--eso-l-brand-soft); color: var(--eso-l-brand-dark); }
[data-eso-theme="dark"] .eso-space-tab.is-active, [data-eso-theme="dark"] .eso-space-tab:hover { color: var(--eso-l-brand); }

/* ===========================================================================
   10. ÉDITEUR DE COURS FORMATEUR (étape 3)
   ---------------------------------------------------------------------------
   Formulaires classiques, boutons « monter / descendre » à la place du
   glisser-déposer. Cibles tactiles généreuses : un formateur qui prépare son
   cours depuis son téléphone doit pouvoir réordonner sans se tromper de bouton.
   =========================================================================== */
.eso-bl-h2 { font-size: 19px; font-weight: 700; margin: 34px 0 14px; color: var(--eso-l-ink); }
.eso-bl-h3 { font-size: 16px; font-weight: 700; margin: 0 0 14px; color: var(--eso-l-ink); }

.eso-bl-form {
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border);
	border-radius: var(--eso-l-radius); padding: clamp(16px, 3vw, 26px);
	display: flex; flex-direction: column; gap: 18px;
}
.eso-bl-field { display: flex; flex-direction: column; gap: 6px; }
.eso-bl-field label, .eso-bl-label { font-weight: 600; font-size: 14.5px; color: var(--eso-l-ink); }
.eso-bl-field input[type="text"],
.eso-bl-field input[type="url"],
.eso-bl-field input[type="number"],
.eso-bl-field select,
.eso-bl-field textarea {
	width: 100%; padding: 12px 14px; font: inherit; font-size: 16px;
	border: 1px solid var(--eso-l-border); border-radius: 10px;
	background: var(--eso-l-surface); color: var(--eso-l-ink);
}
.eso-bl-field textarea { resize: vertical; line-height: 1.6; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14.5px; }
.eso-bl-field input:focus, .eso-bl-field select:focus, .eso-bl-field textarea:focus {
	outline: 3px solid color-mix(in srgb, var(--eso-l-brand) 40%, transparent); outline-offset: 1px; border-color: var(--eso-l-brand);
}
.eso-bl-help { font-size: 13px; color: var(--eso-l-muted); margin: 0; }
.eso-bl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 680px) { .eso-bl-grid { grid-template-columns: minmax(0, 1fr); } }
.eso-bl-inline { display: flex; align-items: center; gap: 8px; }
.eso-bl-inline input { max-width: 90px; }
.eso-bl-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.eso-bl-checks label, .eso-bl-switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.eso-bl-checks input, .eso-bl-switch input { width: 18px; height: 18px; accent-color: var(--eso-l-brand); }
.eso-bl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.eso-bl-thumb img { max-width: 260px; height: auto; border-radius: 10px; margin-bottom: 8px; }
.eso-bl-files { list-style: none; margin: 0 0 8px; padding: 0; font-size: 14px; color: var(--eso-l-muted); }

.eso-bl-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.eso-bl-row {
	display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border);
	border-radius: var(--eso-l-radius); padding: 16px 18px;
}
.eso-bl-row__title { margin: 0 0 4px; font-size: 16px; }
.eso-bl-row__title a { color: var(--eso-l-ink); text-decoration: none; }
.eso-bl-row__title a:hover { color: var(--eso-l-brand-dark); }
.eso-bl-row__meta { margin: 0; font-size: 13px; color: var(--eso-l-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eso-bl-row__actions { display: flex; gap: 8px; }

.eso-bl-badge {
	display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
	font-size: 12px; font-weight: 700;
	background: var(--eso-l-surface-2); color: var(--eso-l-ink-2);
}
.eso-bl-badge--publish { background: var(--eso-l-brand-soft); color: var(--eso-l-brand-dark); }
[data-eso-theme="dark"] .eso-bl-badge--publish { color: var(--eso-l-brand); }
.eso-bl-badge--free { background: var(--eso-l-brand-soft); color: var(--eso-l-brand-dark); margin-left: 6px; }

.eso-bl-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }

.eso-bl-topics { display: flex; flex-direction: column; gap: 14px; }
.eso-bl-topic { background: var(--eso-l-surface); border: 1px solid var(--eso-l-border); border-radius: var(--eso-l-radius); overflow: hidden; }
.eso-bl-topic__head {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
	padding: 12px 14px; background: var(--eso-l-surface-2); border-bottom: 1px solid var(--eso-l-border);
}
.eso-bl-rename { display: flex; align-items: center; gap: 8px; flex: 1 1 280px; }
.eso-bl-rename input[type="text"] {
	flex: 1 1 auto; padding: 9px 12px; font: inherit; font-size: 15px; font-weight: 600;
	border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--eso-l-ink);
}
.eso-bl-rename input[type="text"]:focus { background: var(--eso-l-surface); border-color: var(--eso-l-border); }
.eso-bl-topic__num {
	flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--eso-l-brand-soft); color: var(--eso-l-brand-dark); font-size: 13px; font-weight: 700;
}
[data-eso-theme="dark"] .eso-bl-topic__num { color: var(--eso-l-brand); }
.eso-bl-topic__tools, .eso-bl-item__tools { display: flex; align-items: center; gap: 4px; }
.eso-bl-topic__tools form, .eso-bl-item__tools form, .eso-bl-move { margin: 0; display: inline; }

.eso-bl-icon-btn {
	width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--eso-l-border); border-radius: 8px; background: var(--eso-l-surface);
	color: var(--eso-l-ink-2); cursor: pointer; font-size: 15px; line-height: 1;
}
.eso-bl-icon-btn:hover { border-color: var(--eso-l-brand); color: var(--eso-l-ink); }
.eso-bl-icon-btn--danger:hover { border-color: #c0392b; color: #c0392b; }

.eso-bl-items { list-style: none; margin: 0; padding: 0; }
.eso-bl-item {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
	padding: 11px 14px; border-bottom: 1px solid var(--eso-l-border);
}
.eso-bl-item:last-child { border-bottom: 0; }
.eso-bl-item__type {
	flex: 0 0 auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	color: var(--eso-l-muted); min-width: 56px;
}
.eso-bl-item__title { flex: 1 1 200px; font-size: 14.5px; }
.eso-bl-item__title a { color: var(--eso-l-ink); text-decoration: none; }
.eso-bl-item__title a:hover { color: var(--eso-l-brand-dark); }

.eso-bl-add { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-top: 1px dashed var(--eso-l-border); }
.eso-bl-add .eso-btn { padding: 8px 14px; font-size: 14px; }
.eso-bl-newtopic { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.eso-bl-newtopic input[type="text"] {
	flex: 1 1 260px; padding: 12px 14px; font: inherit; font-size: 16px;
	border: 1px solid var(--eso-l-border); border-radius: 10px;
	background: var(--eso-l-surface); color: var(--eso-l-ink);
}

.eso-bl-questions { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.eso-bl-question {
	display: flex; gap: 12px; align-items: center; justify-content: space-between;
	padding: 13px 16px; background: var(--eso-l-surface);
	border: 1px solid var(--eso-l-border); border-radius: 10px;
}
.eso-bl-question__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eso-bl-question__meta { font-size: 12.5px; color: var(--eso-l-muted); }
.eso-bl-answer { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.eso-bl-answer input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--eso-l-brand); }

/* ===========================================================================
   11. PAIEMENT ET REVENUS (étape 4)
   =========================================================================== */
.eso-cm-box {
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border);
	border-radius: var(--eso-l-radius); padding: 22px 24px; margin-bottom: 20px; text-align: center;
}
.eso-cm-price { font-size: 34px; font-weight: 800; color: var(--eso-l-ink); margin: 0; line-height: 1.1; }
.eso-cm-note { font-size: 13.5px; color: var(--eso-l-muted); margin: 6px 0 0; }

.eso-cm-steps { counter-reset: eso-step; list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.eso-cm-steps > li {
	position: relative; padding: 16px 18px 16px 58px;
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border); border-radius: var(--eso-l-radius);
}
.eso-cm-steps > li::before {
	counter-increment: eso-step; content: counter(eso-step);
	position: absolute; left: 16px; top: 16px;
	width: 28px; height: 28px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--eso-l-brand); color: #fff; font-weight: 700; font-size: 14px;
}
.eso-cm-steps strong { display: block; color: var(--eso-l-ink); margin-bottom: 4px; }
.eso-cm-steps p { margin: 0 0 8px; color: var(--eso-l-ink-2); font-size: 14.5px; }

.eso-cm-numbers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.eso-cm-numbers li {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
	padding: 11px 14px; border-radius: 10px; background: var(--eso-l-surface-2);
}
.eso-cm-op { font-weight: 600; color: var(--eso-l-ink-2); }
.eso-cm-number {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 17px; font-weight: 700; color: var(--eso-l-ink);
	/* Numéro sélectionnable d'un geste : on copie, on colle dans l'appli MoMo. */
	user-select: all;
}

.eso-cm-pending {
	background: var(--eso-l-brand-soft); border: 1px solid color-mix(in srgb, var(--eso-l-brand) 40%, transparent);
	border-radius: var(--eso-l-radius); padding: 20px 22px;
}
.eso-cm-pending h2 { margin: 0 0 8px; font-size: 18px; color: var(--eso-l-ink); }
.eso-cm-pending p { margin: 0 0 14px; color: var(--eso-l-ink-2); }

.eso-cm-error {
	background: #fdeaea; border: 1px solid #f0b8b8; color: #8f2020;
	padding: 13px 16px; border-radius: 10px; margin-bottom: 18px;
}
[data-eso-theme="dark"] .eso-cm-error { background: #2a1616; border-color: #5a2a2a; color: #f3b9b9; }

.eso-cm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.eso-cm-list li {
	display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
	padding: 12px 16px; border-radius: 10px;
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border); font-size: 14px;
}
.eso-bl-badge--pending { background: #fff4e0; color: #8a5a00; }
.eso-bl-badge--paid { background: var(--eso-l-brand-soft); color: var(--eso-l-brand-dark); }
.eso-bl-badge--rejected { background: #fdeaea; color: #8f2020; }

/* ===========================================================================
   12. DEVOIRS NOTÉS (étape 5)
   =========================================================================== */
.eso-as-form { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.eso-as-form label { font-weight: 600; font-size: 14.5px; color: var(--eso-l-ink); }
.eso-as-form textarea, .eso-as-form input[type="file"] {
	width: 100%; padding: 12px 14px; font: inherit; font-size: 16px;
	border: 1px solid var(--eso-l-border); border-radius: 10px;
	background: var(--eso-l-surface); color: var(--eso-l-ink);
}
.eso-as-form textarea { resize: vertical; }
.eso-as-form .eso-btn { align-self: flex-start; margin-top: 6px; }

.eso-as-status { padding: 16px 18px; border-radius: var(--eso-l-radius); margin-bottom: 16px; }
.eso-as-status strong { display: block; font-size: 16px; color: var(--eso-l-ink); }
.eso-as-status p { margin: 6px 0 0; color: var(--eso-l-ink-2); font-size: 14.5px; }
.eso-as-status.is-pending { background: #fff4e0; border: 1px solid #f0c674; }
[data-eso-theme="dark"] .eso-as-status.is-pending { background: #2a2312; border-color: #5a4a20; }
.eso-as-status.is-pass { background: var(--eso-l-brand-soft); border: 1px solid color-mix(in srgb, var(--eso-l-brand) 40%, transparent); }
.eso-as-status.is-fail { background: #fdeaea; border: 1px solid #f0b8b8; }
[data-eso-theme="dark"] .eso-as-status.is-fail { background: #2a1616; border-color: #5a2a2a; }
.eso-as-feedback {
	margin: 12px 0 0; padding: 12px 14px; border-left: 3px solid var(--eso-l-brand);
	background: var(--eso-l-surface); border-radius: 0 8px 8px 0; color: var(--eso-l-ink-2); font-style: italic;
}
.eso-as-date { font-size: 12.5px; color: var(--eso-l-muted); margin-top: 10px !important; }

.eso-as-list { display: flex; flex-direction: column; gap: 14px; }
.eso-as-card {
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border);
	border-radius: var(--eso-l-radius); padding: 18px 20px;
}
.eso-as-card.is-graded { opacity: .82; }
.eso-as-card__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.eso-as-card__head strong { display: block; color: var(--eso-l-ink); }
.eso-as-card__meta { font-size: 12.5px; color: var(--eso-l-muted); }
.eso-as-card__content {
	padding: 14px 16px; border-radius: 10px; background: var(--eso-l-surface-2);
	color: var(--eso-l-ink-2); font-size: 15px; line-height: 1.65; margin-bottom: 12px;
	max-height: 320px; overflow-y: auto;
}
.eso-as-grade { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--eso-l-border); }
.eso-as-grade__row label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.eso-as-grade input[type="number"] {
	width: 110px; padding: 10px 12px; font: inherit; font-size: 16px;
	border: 1px solid var(--eso-l-border); border-radius: 9px;
	background: var(--eso-l-surface); color: var(--eso-l-ink);
}
.eso-as-grade__max { color: var(--eso-l-muted); }
.eso-as-grade__fb { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.eso-as-grade textarea {
	width: 100%; padding: 11px 13px; font: inherit; font-size: 15px; font-weight: 400; resize: vertical;
	border: 1px solid var(--eso-l-border); border-radius: 9px;
	background: var(--eso-l-surface); color: var(--eso-l-ink);
}
.eso-as-grade .eso-btn { align-self: flex-start; }

/* ===========================================================================
   13. RÉPONSE COURTE ET APERÇU INDEXABLE (SEO / AIO)
   =========================================================================== */
.eso-answer {
	background: var(--eso-l-brand-soft);
	border-left: 4px solid var(--eso-l-brand);
	border-radius: 0 var(--eso-l-radius) var(--eso-l-radius) 0;
	padding: 16px 20px; margin: 0 0 24px;
}
.eso-answer__label {
	margin: 0 0 4px; font-size: 11.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .1em; color: var(--eso-l-brand-dark);
}
[data-eso-theme="dark"] .eso-answer__label { color: var(--eso-l-brand); }
.eso-answer__text { margin: 0; font-size: 17px; line-height: 1.6; color: var(--eso-l-ink); }

.eso-teaser-card {
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border);
	border-radius: var(--eso-l-radius); padding: clamp(20px, 4vw, 36px);
}
.eso-teaser__kicker { font-size: 13px; color: var(--eso-l-muted); margin: 0 0 6px; }
.eso-teaser__extract { font-size: 17px; line-height: 1.75; color: var(--eso-l-ink-2); margin: 16px 0; }
.eso-teaser__extract p { margin: 0; }
.eso-teaser__lock {
	background: var(--eso-l-surface-2); border: 1px dashed var(--eso-l-border);
	border-radius: var(--eso-l-radius); padding: 20px; margin: 22px 0;
}
.eso-teaser__lock p { margin: 0 0 8px; color: var(--eso-l-ink-2); }
.eso-teaser__toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.eso-teaser__toc li {
	display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	padding: 12px 16px; border-radius: 10px; background: var(--eso-l-surface-2);
}
.eso-teaser__toc span { color: var(--eso-l-muted); font-size: 13px; }

/* ===========================================================================
   14. FICHE DE FORMATION ET CATALOGUE
   ---------------------------------------------------------------------------
   Mobile d'abord : une colonne, prix visible sans défiler, barre d'achat fixe
   en bas. À partir de 980 px, la carte d'achat devient une colonne collante.
   =========================================================================== */
body.eso-course-page, body.eso-catalog-page { background: var(--eso-l-bg); }

/* --- Vignettes : cadrage imposé ------------------------------------------
   Les visuels des cours n'ont pas tous les mêmes dimensions. Sans rapport
   fixe et sans object-fit, la grille se déforme et les images débordent. */
.eso-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--eso-l-radius); background: var(--eso-l-surface-2); }
.eso-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eso-thumb--empty { display: flex; align-items: center; justify-content: center; color: var(--eso-l-muted); }

/* --- En-tête de la fiche -------------------------------------------------- */
.eso-cp__hero { background: var(--eso-l-surface); border-bottom: 1px solid var(--eso-l-border); }
.eso-cp__hero-inner {
	max-width: 1140px; margin: 0 auto; padding: clamp(22px, 4vw, 44px) clamp(14px, 3vw, 24px);
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px;
}
@media (min-width: 980px) {
	.eso-cp__hero-inner { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 40px; }
}
.eso-cp__cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.eso-cp__cats a {
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	text-decoration: none; color: var(--eso-l-brand-dark);
	background: var(--eso-l-brand-soft); padding: 5px 11px; border-radius: 999px;
}
[data-eso-theme="dark"] .eso-cp__cats a { color: var(--eso-l-brand); }
.eso-cp__title { font-size: clamp(27px, 4.4vw, 42px); line-height: 1.18; margin: 0 0 14px; color: var(--eso-l-ink); letter-spacing: -.01em; }
.eso-cp__excerpt { font-size: 17.5px; line-height: 1.65; color: var(--eso-l-ink-2); margin: 0 0 18px; }
.eso-answer--hero { margin-bottom: 18px; }
.eso-cp__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.eso-cp__facts li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--eso-l-ink-2); }
.eso-cp__facts .eso-ic { color: var(--eso-l-muted); }

/* --- Carte d'achat -------------------------------------------------------- */
.eso-cp__buy {
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border);
	border-radius: var(--eso-l-radius); overflow: hidden; box-shadow: var(--eso-l-shadow);
}
@media (min-width: 980px) { .eso-cp__buy { position: sticky; top: 24px; } }
.eso-cp__cover { border-radius: 0; }
.eso-cp__buy-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.eso-cp__price { font-size: 32px; font-weight: 800; color: var(--eso-l-ink); margin: 0; line-height: 1.1; }
.eso-cp__price-note, .eso-cp__progress-text { font-size: 13px; color: var(--eso-l-muted); margin: 0; }
.eso-cp__enrolled { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--eso-l-brand-dark); }
[data-eso-theme="dark"] .eso-cp__enrolled { color: var(--eso-l-brand); }
.eso-cp__cta { width: 100%; padding: 15px 20px; font-size: 16px; }
.eso-cp__includes { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.eso-cp__includes li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--eso-l-ink-2); line-height: 1.45; }
.eso-cp__includes .eso-ic { color: var(--eso-l-brand); margin-top: 2px; }

/* --- Corps ---------------------------------------------------------------- */
.eso-cp__body { max-width: 1140px; margin: 0 auto; padding: clamp(24px, 4vw, 44px) clamp(14px, 3vw, 24px) 120px; }
@media (min-width: 980px) { .eso-cp__body { padding-right: calc(360px + 40px + clamp(14px, 3vw, 24px)); padding-bottom: 60px; } }
.eso-cp__main { max-width: 760px; }
.eso-cp__section { margin-bottom: 38px; }
.eso-cp__section h2 { font-size: clamp(20px, 2.6vw, 25px); margin: 0 0 16px; color: var(--eso-l-ink); letter-spacing: -.01em; }
.eso-cp__muted { color: var(--eso-l-muted); }
.eso-cp__two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 720px) { .eso-cp__two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.eso-cp__checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; }
@media (min-width: 620px) { .eso-cp__checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eso-cp__checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--eso-l-ink-2); }
.eso-cp__checklist .eso-ic { color: var(--eso-l-brand); flex: 0 0 auto; margin-top: 3px; }
.eso-cp__dots { margin: 0; padding-left: 20px; color: var(--eso-l-ink-2); line-height: 1.7; }

/* --- Programme ------------------------------------------------------------ */
.eso-cp__curriculum { border: 1px solid var(--eso-l-border); border-radius: var(--eso-l-radius); overflow: hidden; background: var(--eso-l-surface); }
.eso-cp__chapter { border-bottom: 1px solid var(--eso-l-border); }
.eso-cp__chapter:last-child { border-bottom: 0; }
.eso-cp__chapter > summary {
	display: flex; align-items: center; gap: 12px; padding: 15px 17px; cursor: pointer; list-style: none;
	background: var(--eso-l-surface-2);
}
.eso-cp__chapter > summary::-webkit-details-marker { display: none; }
.eso-cp__chapter > summary:hover { background: var(--eso-l-brand-soft); }
.eso-cp__chapter-num {
	flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--eso-l-surface); color: var(--eso-l-ink-2); font-size: 13px; font-weight: 700;
	border: 1px solid var(--eso-l-border);
}
.eso-cp__chapter-title { flex: 1 1 auto; font-weight: 700; color: var(--eso-l-ink); line-height: 1.35; }
.eso-cp__chapter-count { font-size: 12.5px; color: var(--eso-l-muted); white-space: nowrap; }
.eso-cp__chapter-arrow { color: var(--eso-l-muted); transition: transform .2s ease; }
.eso-cp__chapter[open] > summary .eso-cp__chapter-arrow { transform: rotate(180deg); }

.eso-cp__lessons { list-style: none; margin: 0; padding: 4px 0; }
.eso-cp__lesson { display: flex; align-items: center; gap: 11px; padding: 11px 17px; }
.eso-cp__lesson + .eso-cp__lesson { border-top: 1px solid var(--eso-l-border); }
.eso-cp__lesson-icon { color: var(--eso-l-muted); flex: 0 0 auto; display: inline-flex; }
.eso-cp__lesson.is-done .eso-cp__lesson-icon { color: var(--eso-l-brand); }
.eso-cp__lesson-title { flex: 1 1 auto; font-size: 15px; color: var(--eso-l-ink-2); line-height: 1.45; }
.eso-cp__lesson-title a { color: var(--eso-l-ink); text-decoration: none; }
.eso-cp__lesson-title a:hover { color: var(--eso-l-brand-dark); text-decoration: underline; }
.eso-cp__free {
	font-size: 11.5px; font-weight: 700; color: var(--eso-l-brand-dark);
	background: var(--eso-l-brand-soft); padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
[data-eso-theme="dark"] .eso-cp__free { color: var(--eso-l-brand); }

/* --- Formateur et FAQ ------------------------------------------------------ */
.eso-cp__author { display: flex; gap: 16px; align-items: flex-start; padding: 18px; background: var(--eso-l-surface); border: 1px solid var(--eso-l-border); border-radius: var(--eso-l-radius); }
.eso-cp__author img { border-radius: 50%; flex: 0 0 auto; }
.eso-cp__author strong { display: block; color: var(--eso-l-ink); margin-bottom: 4px; }
.eso-cp__author p { margin: 0; color: var(--eso-l-ink-2); font-size: 14.5px; line-height: 1.6; }

.eso-cp__faq details { border: 1px solid var(--eso-l-border); border-radius: 10px; background: var(--eso-l-surface); margin-bottom: 8px; }
.eso-cp__faq summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; font-weight: 600; color: var(--eso-l-ink); list-style: none; }
.eso-cp__faq summary::-webkit-details-marker { display: none; }
.eso-cp__faq summary .eso-cp__chapter-arrow { margin-left: auto; }
.eso-cp__faq details[open] summary .eso-cp__chapter-arrow { transform: rotate(180deg); }
.eso-cp__faq p { margin: 0; padding: 0 16px 16px; color: var(--eso-l-ink-2); line-height: 1.65; }

/* --- Barre d'achat fixe (mobile) ------------------------------------------- */
.eso-cp__sticky {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 11px clamp(12px, 3vw, 18px);
	padding-right: clamp(72px, 9vw, 110px); /* place pour les bulles flottantes */
	background: var(--eso-l-surface); border-top: 1px solid var(--eso-l-border);
	box-shadow: 0 -6px 20px rgba(16,32,26,.1);
}
@media (min-width: 980px) { .eso-cp__sticky { display: none; } }
.eso-cp__sticky-price { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.eso-cp__sticky-price strong { font-size: 19px; color: var(--eso-l-ink); }
.eso-cp__sticky-price span { font-size: 11.5px; color: var(--eso-l-muted); }
.eso-cp__sticky .eso-btn { padding: 12px 20px; white-space: nowrap; }

/* --- Catalogue -------------------------------------------------------------- */
.eso-cat { max-width: 1180px; margin: 0 auto; padding: clamp(22px, 4vw, 40px) clamp(14px, 3vw, 24px) 60px; }
.eso-cat__head { margin-bottom: 20px; }
.eso-cat__title { font-size: clamp(26px, 4vw, 38px); margin: 0 0 8px; color: var(--eso-l-ink); letter-spacing: -.01em; }
.eso-cat__desc { color: var(--eso-l-ink-2); font-size: 16.5px; line-height: 1.6; margin: 0; max-width: 70ch; }
.eso-cat__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

.eso-cat__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 640px) { .eso-cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .eso-cat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.eso-ccard {
	display: flex; flex-direction: column;
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border);
	border-radius: var(--eso-l-radius); overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.eso-ccard:hover { transform: translateY(-2px); box-shadow: var(--eso-l-shadow); border-color: var(--eso-l-brand); }
.eso-ccard__media { position: relative; display: block; }
.eso-ccard__media .eso-thumb { border-radius: 0; }
.eso-ccard__badge {
	position: absolute; top: 10px; left: 10px;
	font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
	background: var(--eso-l-brand); color: #fff;
}
.eso-ccard__body { padding: 15px 17px 6px; flex: 1 1 auto; }
.eso-ccard__meta { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--eso-l-muted); margin: 0 0 6px; }
.eso-ccard__title { font-size: 16.5px; line-height: 1.35; margin: 0 0 8px; }
.eso-ccard__title a { color: var(--eso-l-ink); text-decoration: none; }
.eso-ccard__title a:hover { color: var(--eso-l-brand-dark); }
.eso-ccard__facts { font-size: 13px; color: var(--eso-l-muted); margin: 0; }
.eso-ccard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 17px 16px; }
.eso-ccard__price { font-size: 17px; font-weight: 800; color: var(--eso-l-ink); }
.eso-ccard__price--owned { font-size: 13.5px; font-weight: 600; color: var(--eso-l-brand-dark); }
[data-eso-theme="dark"] .eso-ccard__price--owned { color: var(--eso-l-brand); }
.eso-ccard__foot .eso-btn { padding: 9px 16px; font-size: 14px; }

.eso-cat__nav { margin-top: 32px; }
.eso-cat__nav .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
	padding: 0 12px; margin: 0 3px; border-radius: 9px; text-decoration: none;
	border: 1px solid var(--eso-l-border); color: var(--eso-l-ink-2); background: var(--eso-l-surface);
}
.eso-cat__nav .page-numbers.current { background: var(--eso-l-brand); color: #fff; border-color: transparent; }

/* ===========================================================================
   15. NORMALISATION FACE AU THÈME
   ---------------------------------------------------------------------------
   Le thème impose ses propres tailles de titres — d'où les titres de cartes
   géants en vert sur la page catalogue. Nos composants reprennent la main avec
   une spécificité suffisante, sans recourir à !important : on préfixe par la
   classe de page pour passer devant les règles du thème.
   =========================================================================== */
body.eso-catalog-page .eso-cat__title,
body.eso-course-page .eso-cp__title,
body.eso-space .eso-space-title {
	font-family: inherit; letter-spacing: -.01em;
}
body.eso-catalog-page .eso-ccard__title,
body.eso-catalog-page .eso-ccard__title a {
	font-size: 16.5px; line-height: 1.35; font-weight: 700; margin: 0;
	color: var(--eso-l-ink); text-transform: none; letter-spacing: normal;
}
body.eso-catalog-page .eso-ccard__title a:hover { color: var(--eso-l-brand-dark); }
[data-eso-theme="dark"] body.eso-catalog-page .eso-ccard__title a:hover { color: var(--eso-l-brand); }
body.eso-catalog-page .eso-ccard p,
body.eso-course-page .eso-cp__facts li { margin-top: 0; }

body.eso-course-page .eso-cp__section h2,
body.eso-space .eso-space-head h1 { margin-top: 0; }

/* Le thème centre ou justifie parfois le texte des pages : on rétablit. */
body.eso-space .eso-space-shell,
body.eso-catalog-page .eso-cat,
body.eso-course-page .eso-cp { text-align: left; }

/* Compteur de formations dans les filtres de catégorie. */
.eso-cat__count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px; height: 20px; margin-left: 6px; padding: 0 5px;
	border-radius: 999px; font-size: 11px; font-weight: 700;
	background: var(--eso-l-surface); color: var(--eso-l-muted);
}
.eso-space-tab.is-active .eso-cat__count { background: rgba(255,255,255,.28); color: inherit; }

/* Espace apprenant : le thème peut coller le contenu au bord sur mobile. */
body.eso-space .eso-space-shell { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }

/* Barre de navigation de l'espace : lisible même sans police d'icônes. */
body.eso-space .eso-space-nav__item { text-decoration: none; }
body.eso-space .eso-space-nav__item .eso-ic { flex: 0 0 auto; }

/* ===========================================================================
   16. VALIDATION AVANT PUBLICATION ET TENTATIVES DE QUIZ
   =========================================================================== */
.eso-rv {
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border);
	border-radius: var(--eso-l-radius); padding: 18px 20px; margin: 22px 0;
}
.eso-rv__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.eso-rv__score { font-size: 15px; font-weight: 800; color: var(--eso-l-ink-2); }
.eso-rv__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.eso-rv__item { display: flex; gap: 11px; align-items: flex-start; }
.eso-rv__icon { color: var(--eso-l-muted); flex: 0 0 auto; display: inline-flex; margin-top: 1px; }
.eso-rv__item.is-ok .eso-rv__icon { color: var(--eso-l-brand); }
.eso-rv__item.is-blocking .eso-rv__icon { color: #c0392b; }
.eso-rv__body { display: flex; flex-direction: column; min-width: 0; }
.eso-rv__body strong { font-size: 14.5px; color: var(--eso-l-ink); font-weight: 600; }
.eso-rv__item.is-ok .eso-rv__body strong { color: var(--eso-l-muted); font-weight: 500; }
.eso-rv__body span { font-size: 13px; color: var(--eso-l-muted); line-height: 1.5; margin-top: 2px; }
.eso-rv__item.is-blocking .eso-rv__body strong { color: #c0392b; }

.eso-quiz__notice--wait {
	background: #fff4e0; border-color: #f0c674; color: #6b4e08;
	display: flex; flex-direction: column; gap: 6px;
}
[data-eso-theme="dark"] .eso-quiz__notice--wait { background: #2a2312; border-color: #5a4a20; color: #f0dcae; }
.eso-quiz__notice--wait strong { font-size: 16px; }
.eso-quiz__notice--wait p { margin: 0; font-size: 14.5px; line-height: 1.6; }

/* =============================== v4.4.0 =============================== */
/* Pied de leçon : « Suivant » toujours visible et bien contrasté, même sur un
   petit téléphone (il sortait de l'écran à droite). */
.eso-lf__side, .eso-lf__center { min-width: 0; }
.eso-lf__side--next .eso-btn, .eso-lf__side--next .eso-btn:visited {
  background: #0b4f14 !important; border-color: #0b4f14 !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(11, 79, 20, .28); white-space: nowrap;
}
.eso-lf__side--next .eso-btn:hover { background: #0e7a17 !important; border-color: #0e7a17 !important; }
[data-eso-theme="dark"] .eso-lf__side--next .eso-btn { background: #36c043 !important; border-color: #36c043 !important; color: #05230a !important; box-shadow: none; }
.eso-btn--complete.is-done { background: transparent !important; color: var(--es-brand-ink, #0e7a17) !important; border: 1.5px solid currentColor !important; box-shadow: none !important; }
@media (max-width: 640px) {
  .eso-lf { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding-inline: 10px !important; }
  .eso-lf__side--prev .eso-btn { padding: 12px !important; }
  .eso-lf__center { display: flex; justify-content: center; }
  .eso-lf__center .eso-btn--complete { width: 100%; padding-inline: 12px !important; font-size: 14px !important; justify-content: center; }
  .eso-lf__center .eso-btn--complete span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .eso-lf__side--next .eso-btn { padding: 12px 16px !important; font-size: 15px !important; }
}
.eso-player-flash--welcome { background: linear-gradient(90deg, #e5f4e6, #fff4d6) !important; color: #0b4f14 !important; font-weight: 700; }
[data-eso-theme="dark"] .eso-player-flash--welcome { background: #16301d !important; color: #e8efe9 !important; }

/* Statut d'une formation : En cours / Terminé / À commencer */
.eso-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; line-height: 1.2; margin-bottom: 6px; }
.eso-status svg { width: 14px; height: 14px; }
.eso-status--done { background: #e5f4e6; color: #0b6412; }
.eso-status--progress { background: #fff4d6; color: #8a5a00; }
.eso-status--new { background: #eef3ee; color: #33443a; }
[data-eso-theme="dark"] .eso-status--done { background: #16301d; color: #86e28d; }
[data-eso-theme="dark"] .eso-status--progress { background: #33280c; color: #f6c56b; }
[data-eso-theme="dark"] .eso-status--new { background: #223027; color: #c9d5cc; }
.eso-ccard__foot .eso-status { margin: 0; }
.eso-rcard__body .eso-status { align-self: flex-start; }

/* Minuteur de quiz */
.eso-qtimer { position: sticky; top: 76px; z-index: 6; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px;
  background: var(--es-surface, #fff); border: 1px solid var(--es-border, #d6e0d8); border-radius: 14px; padding: 10px 16px 12px; margin: 0 0 18px;
  box-shadow: 0 8px 22px rgba(15, 26, 19, .10); }
.eso-qtimer__icon { font-size: 18px; }
.eso-qtimer__label { color: var(--es-muted, #56655c); font-weight: 600; font-size: 14px; }
.eso-qtimer__time { font-family: 'Outfit', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 800; color: var(--es-text, #15211a); }
.eso-qtimer__bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--es-surface-2, #eef3ee); overflow: hidden; }
.eso-qtimer__bar i { display: block; height: 100%; width: 100%; background: #1aaf1a; border-radius: 6px; transition: width .25s linear, background-color .3s; }
.eso-qtimer.is-warn .eso-qtimer__bar i { background: #e2a300; }
.eso-qtimer.is-warn .eso-qtimer__time { color: #9a6300; }
.eso-qtimer.is-danger { border-color: #e5484d; }
.eso-qtimer.is-danger .eso-qtimer__bar i { background: #e5484d; }
.eso-qtimer.is-danger .eso-qtimer__time { color: #c62828; animation: eso-qpulse 1s ease-in-out infinite; }
[data-eso-theme="dark"] .eso-qtimer.is-danger .eso-qtimer__time { color: #ff8a80; }
[data-eso-theme="dark"] .eso-qtimer.is-warn .eso-qtimer__time { color: #f6c56b; }
.eso-qtimer__over { font-weight: 700; color: #c62828; margin: -8px 0 16px; }
@keyframes eso-qpulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .eso-qtimer.is-danger .eso-qtimer__time { animation: none; } }
@media (max-width: 640px) { .eso-qtimer { top: 64px; padding: 8px 12px 10px; } .eso-qtimer__time { font-size: 20px; } }

/* Attente de confirmation Mobile Money */
.eso-pay-wait { border: 1px solid #d6e0d8; background: #fff4d6; border-radius: 14px; padding: 16px 18px; margin: 0 0 20px; }
.eso-pay-wait p { margin: 6px 0 0; }

/* v4.4.0 — libellé court sur petit écran, aucun chevauchement */
.eso-lbl-short { display: none; }
.eso-lf__form { min-width: 0; width: 100%; margin: 0; }
@media (max-width: 480px) {
  .eso-lbl-long { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .eso-lbl-short { display: inline; }
  .eso-lf__center .eso-btn--complete { max-width: 100%; }
}

/* v4.4.1 — identité verrouillée */
.eso-profile__identity { display: flex; gap: 14px; align-items: flex-start; background: var(--es-surface-2, #eef3ee); border: 1px solid var(--es-border, #d6e0d8); border-radius: 14px; padding: 14px 16px; }
.eso-profile__lock { font-size: 22px; line-height: 1; }
.eso-profile__idlabel { margin: 0; font-size: 13px; color: var(--es-muted, #56655c); font-weight: 600; }
.eso-profile__idname { margin: 2px 0 6px; font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 800; color: var(--es-text, #15211a); }
.eso-profile__identity .eso-field__hint { margin: 0; }

/* =============================== v4.5.0 — constructeur simplifié =============================== */
.eso-bl-guide { border: 1px solid var(--es-border, #d6e0d8); border-radius: 18px; background: var(--es-surface, #fff); padding: 18px; margin: 18px 0; box-shadow: 0 8px 24px rgba(15, 26, 19, .06); }
.eso-bl-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: s; }
.eso-bl-steps li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--es-muted, #56655c); background: var(--es-surface-2, #eef3ee); border-radius: 12px; padding: 10px; line-height: 1.25; }
.eso-bl-steps li span { flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--es-surface, #fff); border: 2px solid var(--es-border, #d6e0d8); font-weight: 800; color: var(--es-text, #15211a); }
.eso-bl-steps li.is-done { color: var(--es-brand-ink, #0e7a17); background: var(--es-brand-soft, #e5f4e6); }
.eso-bl-steps li.is-done span { background: #1aaf1a; border-color: #1aaf1a; color: #fff; }
@media (max-width: 720px) { .eso-bl-steps { grid-template-columns: 1fr 1fr; } }
.eso-bl-next { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; background: linear-gradient(90deg, #fff4d6, #e5f4e6); border-radius: 14px; padding: 14px 16px; }
[data-eso-theme="dark"] .eso-bl-next { background: linear-gradient(90deg, #33280c, #16301d); }
.eso-bl-next p { margin: 0; flex: 1 1 320px; color: var(--es-text, #15211a); line-height: 1.5; }
.eso-bl-intro { margin-top: -4px; }
.eso-bl-edit { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--es-brand-soft, #e5f4e6); color: var(--es-brand-ink, #0e7a17) !important; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.eso-bl-edit:hover { background: #1aaf1a; color: #fff !important; }
.eso-bl-flash { background: var(--es-brand-soft, #e5f4e6); color: var(--es-brand-ink, #0e7a17); border-radius: 12px; padding: 12px 16px; font-weight: 600; }
.eso-bl-rescue { border: 2px dashed #e2a300; background: #fffaf0; border-radius: 16px; padding: 18px; margin: 22px 0; }
[data-eso-theme="dark"] .eso-bl-rescue { background: #2a2210; }
.eso-bl-rescue h3 { margin: 0 0 6px; font-size: 18px; }
.eso-bl-rescue ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.eso-bl-rescue li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: var(--es-surface, #fff); border: 1px solid var(--es-border, #d6e0d8); border-radius: 12px; padding: 10px 12px; }
.eso-bl-rescue form { margin: 0; }
.eso-bl-announce, .eso-bl-danger { margin: 26px 0; border: 1px solid var(--es-border, #d6e0d8); border-radius: 14px; padding: 12px 16px; background: var(--es-surface, #fff); }
.eso-bl-announce summary, .eso-bl-danger summary { cursor: pointer; font-weight: 700; }
.eso-bl-danger { border-color: #e5484d; }
.eso-bl-danger summary { color: #c62828; }
.eso-bl-danger form { display: grid; gap: 8px; margin-top: 12px; }
.eso-btn--danger { background: #c62828 !important; border-color: #c62828 !important; color: #fff !important; }
.eso-bl-callouts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 10px; }
.eso-bl-callouts span { font-size: 14px; font-weight: 700; color: var(--es-muted, #56655c); }
.eso-bl-callouts button { border: 1px solid var(--es-border, #d6e0d8); background: var(--es-surface, #fff); color: var(--es-text, #15211a); border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 36px; }
.eso-bl-callouts button:hover { border-color: #1aaf1a; background: var(--es-brand-soft, #e5f4e6); }
.eso-bl-add { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-editor-wrap { border-radius: 10px; overflow: hidden; }

/* ===================== v4.6.0 — relecture complète ===================== */
.eso-cp__reviewbar, .eso-readall__flag, .eso-quiz-review-mode__flag { background: #fff4d6; border: 1px solid #e2a300; border-radius: 14px; padding: 12px 16px; margin: 0 0 18px; color: #6b4a00; }
[data-eso-theme="dark"] .eso-cp__reviewbar, [data-eso-theme="dark"] .eso-readall__flag, [data-eso-theme="dark"] .eso-quiz-review-mode__flag { background: #33280c; color: #f6c56b; }
.eso-cp__reviewbar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; }
.eso-cp__reviewbar p { margin: 0; }
.eso-bl-readlink { margin: 10px 0 0; }
.eso-readall__block { border: 1px solid var(--es-border, #d6e0d8); border-radius: 16px; padding: 18px 20px; margin: 0 0 18px; background: var(--es-surface, #fff); }
.eso-readall__topic { font-family: 'Outfit', sans-serif; font-size: 24px; margin: 28px 0 14px; color: var(--es-text, #15211a); }
.eso-readall__block h2, .eso-readall__block h3 { margin: 0 0 12px; font-size: 20px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.eso-readall__type { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--es-brand-soft, #e5f4e6); color: var(--es-brand-ink, #0e7a17); border-radius: 999px; padding: 4px 10px; }
.eso-readall__empty { color: #c62828; font-weight: 700; }
.eso-readall__video { color: var(--es-muted, #56655c); font-size: 14px; }
.eso-quiz-review__answers { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.eso-quiz-review__answers li { background: var(--es-surface-2, #eef3ee); border-radius: 10px; padding: 8px 12px; }
.eso-quiz-review__answers li.is-correct { background: var(--es-brand-soft, #e5f4e6); font-weight: 700; }
@media print { .eso-space-nav, .eso-header, .eso-footer, .eso-bl-readlink, .eso-readall__flag, .eso-bl-edit { display: none !important; } .eso-readall__block { break-inside: avoid; border: 0; padding: 0; } }

/* ==========================================================================
   v4.7.0 — Ventes : réassurance de la fiche, formations recommandées
   ========================================================================== */
.eso-cp__extras { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.eso-cp__extras .eso-btn { width: 100%; justify-content: center; }
.eso-cp__wa { border-color: #25d366; }
.eso-cp__wa .eso-ic { color: #1faa53; }
.eso-cp__trust { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--eso-l-muted); text-align: center; }
.eso-cp__trust strong { color: var(--eso-l-brand-dark); }
.eso-picks { margin: 22px 0 0; }
.eso-picks__title { font-weight: 800; font-size: 17px; color: var(--eso-l-ink); margin: 0 0 12px; }
.eso-picks__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.eso-pick { background: var(--eso-l-surface); border: 1px solid var(--eso-l-border); border-radius: var(--eso-l-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--eso-l-shadow); }
.eso-pick__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.eso-pick__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.eso-pick__name { font-weight: 700; color: var(--eso-l-ink); text-decoration: none; line-height: 1.3; }
.eso-pick__name:hover { color: var(--eso-l-brand-dark); }
.eso-pick__price { margin: 0; font-weight: 800; color: var(--eso-l-brand-dark); }
.eso-pick .eso-btn { margin-top: auto; justify-content: center; }

/* =============================== v4.12.0 =============================== */
/* Quiz verrouillé : carte centrée, heure de réouverture, deux sorties utiles. */
.eso-qlock {
	max-width: 560px; margin: 28px auto; padding: 32px 26px; text-align: center;
	background: var(--eso-l-surface); border: 1px solid var(--eso-l-border);
	border-radius: 20px; box-shadow: var(--eso-l-shadow); color: var(--eso-l-ink);
}
.eso-qlock__icon {
	width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: 32px;
	background: var(--eso-l-brand-soft);
}
.eso-qlock__title { margin: 0 0 10px !important; font-size: 24px; line-height: 1.25; color: var(--eso-l-ink); }
.eso-qlock__text { margin: 0 0 16px !important; font-size: 16px; line-height: 1.6; color: var(--eso-l-ink-2, var(--eso-l-ink)); }
.eso-qlock__when {
	display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; padding: 16px;
	border-radius: 14px; background: var(--eso-l-surface-2, var(--eso-l-bg)); border: 1px dashed var(--eso-l-brand);
}
.eso-qlock__when span { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--eso-l-muted); }
.eso-qlock__when strong { font-size: 19px; color: var(--eso-l-ink); }
.eso-qlock__when em { font-style: normal; font-weight: 700; color: var(--eso-l-brand-dark); font-variant-numeric: tabular-nums; }
[data-eso-theme="dark"] .eso-qlock__when em { color: var(--eso-l-brand); }
.eso-qlock__tip { margin: 0 0 20px !important; font-size: 14.5px; line-height: 1.55; color: var(--eso-l-muted); }
.eso-qlock__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.eso-qlock__actions .eso-btn { min-width: 200px; justify-content: center; text-decoration: none !important; }
@media (max-width: 480px) {
	.eso-qlock { margin: 16px 0; padding: 26px 18px; }
	.eso-qlock__actions .eso-btn { width: 100%; }
}