/* ==========================================================================
   ESCEP-NIGER — Plateforme E-learning
   Même direction artistique « Signal & Poste » que le site principal.

   01. Base & utilitaires       07. Catalogue & filtres
   02. Sous-navigation          08. Fiche cours
   03. Portail : hero           09. Programme (curriculum)
   04. Portail : sections       10. Lecteur de leçon & quiz
   05. Cartes de cours          11. Tableau de bord
   06. Couvertures & anneaux    12. Connexion / inscription
                                13. Responsive & mouvement
   ========================================================================== */

/* 01. Base & utilitaires ----------------------------------------------------- */
.is-elearning { --el-r: 18px; --el-bg: #f4f6fa; }
.el-muted { color: var(--c-muted); font-size: .95rem; }
.el-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; font-size: .92rem; }
.el-link .icon { width: 1em; height: 1em; transition: transform .3s var(--ease); }
.el-link:hover .icon { transform: translateX(3px); }
.el-tag { display: inline-flex; align-items: center; padding: .15em .6em; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--c-primary-50); color: var(--c-primary); line-height: 1.5; }
.el-tag--free { background: color-mix(in srgb, var(--c-accent) 30%, #fff); color: var(--c-dark); }
.el-avatar { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--c-primary), var(--c-dark)); color: #fff; font-weight: 800; font-size: .95rem; line-height: 1; box-shadow: 0 0 0 3px #fff, 0 0 0 4px color-mix(in srgb, var(--c-primary) 30%, transparent); }
.el-avatar--lg { width: 72px; height: 72px; font-size: 1.8rem; }
.el-avatar--xl { width: 84px; height: 84px; font-size: 2.2rem; background: linear-gradient(135deg, var(--c-accent), var(--c-signal)); color: var(--c-dark); box-shadow: 0 0 0 4px var(--c-dark), 0 0 0 6px var(--c-accent); }
.el-bar { display: block; height: 7px; border-radius: 99px; background: var(--c-line-cool); overflow: hidden; }
.el-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-primary), #3fa0ff); transition: width 1s var(--ease); }
.el-flash { display: flex; align-items: flex-start; gap: .7em; padding: 14px 18px; border-radius: 14px; margin: 0 0 24px; font-weight: 600; font-size: .95rem; line-height: 1.45; animation: rise .5s var(--ease) both; }
.el-flash .icon { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; stroke-width: 3; }
.el-flash--ok { background: #e5f6ec; color: #0e5c34; }
.el-flash--ok .icon { background: #18a058; color: #fff; }
.el-flash--error { background: #fdecea; color: #8c1d14; }
.el-flash--error .icon { background: var(--c-signal); color: #fff; }
.el-flash a { color: inherit; text-decoration: underline; }
.el-dots { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.el-dots li { position: relative; padding-left: 1.3em; }
.el-dots li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 25%, transparent); }
.el-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(18px, 2.2vw, 28px); }
.el-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.el-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--el-r); overflow: hidden; background: var(--c-dark); }
.el-video :is(iframe, video, embed, object) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.el-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 02. Sous-navigation -------------------------------------------------------- */
.el-subnav { background: var(--c-dark); color: #fff; position: relative; z-index: 40; }
.el-subnav__inner { display: flex; align-items: center; gap: 12px 28px; min-height: 60px; }
.el-subnav__brand { display: inline-flex; align-items: center; gap: .55em; color: #fff; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.el-subnav__brand:hover { color: var(--c-accent); }
.el-subnav__brand .icon { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--c-accent); color: var(--c-dark); }
.el-subnav__brand b { color: var(--c-accent); font-weight: 800; }
.el-subnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.el-subnav ul::-webkit-scrollbar { display: none; }
.el-subnav li a { position: relative; display: inline-flex; align-items: center; gap: .5em; padding: 19px 14px; color: rgba(255, 255, 255, .72); font-size: .92rem; font-weight: 600; white-space: nowrap; }
.el-subnav li a .icon { width: 17px; height: 17px; opacity: .8; }
.el-subnav li a:hover, .el-subnav li a[aria-current] { color: #fff; }
.el-subnav li a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--c-accent); transform: scaleX(0); transition: transform .4s var(--ease); }
.el-subnav li a[aria-current]::after, .el-subnav li a:hover::after { transform: scaleX(1); }
.el-subnav__account { display: flex; align-items: center; gap: 10px; }
.el-subnav__account .el-avatar { width: 32px; height: 32px; font-size: .85rem; box-shadow: 0 0 0 2px var(--c-accent); }
.el-subnav__name { font-size: .9rem; font-weight: 600; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-subnav__logout { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: rgba(255, 255, 255, .75); transition: background .3s, color .3s; }
.el-subnav__logout:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.el-subnav__logout .icon { width: 18px; height: 18px; }
.el-subnav .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .3); --btn-fill: #fff; --btn-fill-fg: var(--c-dark); }

/* 03. Portail : hero --------------------------------------------------------- */
.el-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(56px, 7vw, 110px) 0 clamp(70px, 8vw, 120px); background: var(--c-paper); }
.el-hero__bg { position: absolute; inset: 0; z-index: -1; background:
	radial-gradient(60% 70% at 85% 30%, color-mix(in srgb, var(--c-primary) 18%, transparent), transparent 70%),
	radial-gradient(40% 50% at 10% 100%, color-mix(in srgb, var(--c-accent) 26%, transparent), transparent 70%),
	radial-gradient(circle at 1px 1px, rgba(10, 31, 68, .1) 1px, transparent 1.4px) 0 0 / 24px 24px; }
.el-hero__bg::after { content: ''; position: absolute; inset: 0; background: var(--grain); opacity: .25; mix-blend-mode: multiply; }
.el-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.el-hero__title { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: .98; letter-spacing: -.03em; margin-bottom: .4em; }
.el-hero__text { font-size: clamp(1.05rem, 1.35vw, 1.22rem); max-width: 54ch; color: var(--c-text); }
.el-search { display: flex; align-items: center; gap: 10px; max-width: 640px; padding: 8px 8px 8px 20px; border-radius: 999px; background: #fff; box-shadow: var(--shadow), 0 0 0 1px rgba(10, 31, 68, .06); transition: box-shadow .3s; }
.el-search:focus-within { box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--c-primary) 35%, transparent); }
.el-search > .icon { width: 22px; height: 22px; color: var(--c-muted); flex: none; }
.el-search input[type="search"] { flex: 1; min-width: 0; border: 0; background: none; padding: 12px 4px; font: inherit; font-size: 1rem; color: var(--c-ink); outline: 0; }
.el-search .btn { flex: none; }
.el-search--light { margin-top: 28px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .96); }
.el-chips { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.el-chips a { display: inline-block; padding: .45em 1em; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-ink) 15%, transparent); background: rgba(255, 255, 255, .6); color: var(--c-ink); font-size: .85rem; font-weight: 600; transition: all .3s var(--ease); }
.el-chips a:hover { background: var(--c-dark); border-color: var(--c-dark); color: #fff; transform: translateY(-2px); }
.el-hero__stats { display: flex; flex-wrap: wrap; gap: 14px 44px; margin: 40px 0 0; padding-top: 28px; border-top: 1px solid rgba(10, 31, 68, .12); }
.el-hero__stats div { display: flex; flex-direction: column-reverse; }
.el-hero__stats dd { margin: 0; font-family: var(--f-heading); font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; line-height: 1; color: var(--c-dark); letter-spacing: -.03em; font-stretch: 85%; }
.el-hero__stats dt { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin-top: 6px; }
.el-hero__visual { position: relative; padding: 0 0 40px 40px; }
.el-hero__photo { margin: 0; aspect-ratio: 4 / 5; max-height: 600px; border-radius: 220px 220px var(--radius-lg) var(--radius-lg); overflow: hidden; background: linear-gradient(160deg, var(--c-primary), var(--c-dark)); box-shadow: var(--shadow-lg); }
.el-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.el-float { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: var(--shadow); color: var(--c-ink); backdrop-filter: blur(10px); animation: floaty 7s ease-in-out infinite; }
.el-float small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-primary); }
.el-float strong { display: block; font-size: .95rem; line-height: 1.25; color: var(--c-ink); }
.el-float span > span, .el-float__body > span { font-size: .8rem; color: var(--c-muted); }
.el-float--course { left: 0; bottom: 70px; max-width: 290px; }
.el-float--course:hover { color: var(--c-ink); transform: translateY(-3px); }
.el-float__cover { flex: none; width: 58px; height: 58px; border-radius: 12px; overflow: hidden; }
.el-float__cover .el-cover__label, .el-float__cover .el-cover__waves { display: none; }
.el-float__cover .el-cover__icon .icon { width: 26px; height: 26px; }
.el-float__cover img { width: 100%; height: 100%; object-fit: cover; }
.el-float__body { display: flex; flex-direction: column; gap: 2px; }
.el-float--quiz { right: -12px; top: 18%; animation-delay: -3s; }
.el-float--quiz small { color: var(--c-muted); letter-spacing: 0; text-transform: none; font-weight: 500; font-size: .8rem; }
.el-float__check { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #18a058; color: #fff; }
.el-float__check .icon { width: 20px; height: 20px; stroke-width: 3; }
.el-hero__postmark { position: absolute; right: 6%; bottom: 0; width: clamp(110px, 12vw, 150px); --pm-fg: var(--c-signal); }
.el-hero__postmark .postmark__center { color: var(--c-signal); }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* 04. Portail : sections ----------------------------------------------------- */
.el-values { background: var(--c-dark); color: #fff; position: relative; }
.el-values__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.el-value { display: flex; gap: 14px; align-items: center; padding: 28px 22px; border-left: 1px solid rgba(255, 255, 255, .1); }
.el-value:first-child { border-left: 0; padding-left: 0; }
.el-value__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .07); color: var(--c-accent); }
.el-value__icon .icon { width: 24px; height: 24px; }
.el-value strong { display: block; font-size: 1rem; color: #fff; }
.el-value span { font-size: .85rem; color: rgba(255, 255, 255, .62); line-height: 1.4; }

.el-domains__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.el-domain { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 22px; border-radius: var(--el-r); background: #fff; border: 1px solid var(--c-line-cool); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.el-domain:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.el-domain__icon { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--c-primary-50); color: var(--c-primary); transition: background .3s, color .3s; }
.el-domain:hover .el-domain__icon { background: var(--c-primary); color: #fff; }
.el-domain__icon .icon { width: 25px; height: 25px; }
.el-domain__name { font-weight: 700; color: var(--c-ink); line-height: 1.25; font-size: 1rem; }
.el-domain__count { grid-column: 2; font-size: .82rem; color: var(--c-muted); }
.el-domain__go { grid-row: 1 / span 2; grid-column: 3; color: var(--c-muted); transition: transform .35s var(--ease), color .3s; }
.el-domain__go .icon { width: 18px; height: 18px; }
.el-domain:hover .el-domain__go { color: var(--c-primary); transform: translateX(4px); }
.el-featured { background: var(--el-bg); }

.el-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: s; position: relative; }
.el-steps__list::before { content: ''; position: absolute; top: 34px; left: 8%; right: 8%; border-top: 2px dashed color-mix(in srgb, var(--c-primary) 30%, transparent); }
.el-step { position: relative; text-align: center; padding: 0 8px; }
.el-step__icon { position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 22px; border-radius: 50%; background: #fff; color: var(--c-primary); box-shadow: var(--shadow), 0 0 0 8px var(--c-white); transition: transform .5s var(--ease), background .3s, color .3s; }
.el-step:hover .el-step__icon { transform: translateY(-4px) rotate(-6deg); background: var(--c-primary); color: #fff; }
.el-step:last-child .el-step__icon { background: var(--c-accent); color: var(--c-dark); }
.el-step__icon .icon { width: 28px; height: 28px; }
.el-step__num { position: absolute; top: -10px; left: calc(50% + 18px); z-index: 1; font-family: var(--f-heading); font-weight: 800; font-size: .78rem; color: #fff; background: var(--c-signal); padding: .2em .55em; border-radius: 99px; }
.el-step h3 { margin-bottom: .35em; }
.el-step p { color: var(--c-muted); font-size: .95rem; margin: 0; }

.el-audience { background: var(--c-paper); }
.el-audience__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.el-aud { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(28px, 3vw, 40px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--c-line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.el-aud:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.el-aud__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--c-primary-50); color: var(--c-primary); margin-bottom: 26px; }
.el-aud__icon .icon { width: 28px; height: 28px; }
.el-aud p { color: var(--c-muted); flex: 1; }
.el-aud--dark { background: var(--c-dark); border-color: var(--c-dark); }
.el-aud--dark h3 { color: #fff; }
.el-aud--dark p { color: rgba(255, 255, 255, .68); }
.el-aud--dark .el-aud__icon { background: rgba(255, 255, 255, .08); color: var(--c-accent); }
.el-aud--dark .link-arrow { color: var(--c-accent); }
.el-aud--accent { background: var(--c-accent); border-color: var(--c-accent); }
.el-aud--accent p { color: color-mix(in srgb, var(--c-dark) 75%, transparent); }
.el-aud--accent .el-aud__icon { background: rgba(10, 31, 68, .1); color: var(--c-dark); }
.el-aud--accent .link-arrow { color: var(--c-dark); }
.el-aud::after { content: ''; position: absolute; right: -50px; bottom: -50px; width: 150px; height: 150px; border-radius: 50%; border: 18px solid currentColor; opacity: .05; }

.el-cert-show__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.el-verify { max-width: 520px; padding: 24px; border-radius: var(--el-r); background: var(--c-paper); border: 1px solid var(--c-line); }
.el-verify label { display: block; font-weight: 700; color: var(--c-ink); margin-bottom: 10px; }
.el-verify__row { display: flex; gap: 8px; }
.el-verify input { flex: 1; min-width: 0; padding: 14px 18px; border-radius: 999px; border: 1.5px solid var(--c-line); background: #fff; font: inherit; letter-spacing: .06em; text-transform: uppercase; }
.el-verify input:focus { outline: 0; border-color: var(--c-primary); }
.el-cert-mock { perspective: 1400px; }
.el-cert-mock__paper { position: relative; aspect-ratio: 297 / 210; padding: 8% 9% 7% 16%; background: var(--c-paper); border-radius: 6px; box-shadow: var(--shadow-lg); transform: rotateY(-10deg) rotateX(5deg) rotate(-2deg); transition: transform .9s var(--ease); display: flex; flex-direction: column; overflow: hidden; }
.el-cert-mock:hover .el-cert-mock__paper { transform: none; }
.el-cert-mock__paper::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 9%; background: linear-gradient(90deg, var(--c-dark) 88%, var(--c-accent) 88%); }
.el-cert-mock__paper::after { content: ''; position: absolute; inset: 4%; left: 12%; border: 1.5px solid var(--c-dark); pointer-events: none; }
.el-cert-mock__paper img { width: 26%; height: auto; }
.el-cert-mock__kicker { margin: auto 0 0; font-size: clamp(.6rem, 1vw, .8rem); letter-spacing: .25em; text-transform: uppercase; font-weight: 700; color: var(--c-primary); }
.el-cert-mock__name { margin: .2em 0; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: clamp(1.4rem, 3vw, 2.4rem); color: var(--c-dark); line-height: 1.1; }
.el-cert-mock__course { margin: 0; font-weight: 700; color: var(--c-ink); font-size: clamp(.8rem, 1.2vw, 1rem); }
.el-cert-mock__foot { margin-top: auto; display: flex; justify-content: space-between; gap: 10px; font-size: clamp(.55rem, .9vw, .72rem); color: var(--c-muted); padding-top: 6%; }
.el-cert-mock__seal { position: absolute; right: 7%; top: 10%; width: 22%; }
.el-cert-mock__seal .postmark__center { color: var(--c-signal); }

.el-trainers { padding-block: 0; }
.el-trainers__inner { position: relative; overflow: hidden; isolation: isolate; padding: clamp(48px, 7vw, 96px); border-radius: var(--radius-lg); background: linear-gradient(130deg, var(--c-dark) 30%, var(--c-dark-2)); color: rgba(255, 255, 255, .75); }
.el-trainers__copy { max-width: 620px; }
.el-trainers .eyebrow { color: var(--c-accent); }
.el-trainers .section-title { color: #fff; }
.el-trainers .check-list li { color: #fff; }
.el-trainers__waves { position: absolute; z-index: -1; right: -60px; bottom: -60px; width: clamp(260px, 36vw, 480px); fill: none; stroke: var(--c-primary); stroke-width: 14; stroke-linecap: round; opacity: .55; }
.el-trainers__waves path:nth-child(2) { stroke: var(--c-accent); }
.el-trainers__waves path:nth-child(3) { stroke: var(--c-signal); }

.el-faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.el-faq__list { display: grid; gap: 12px; }
.el-faq__item { border-radius: var(--el-r); background: #fff; border: 1px solid var(--c-line-cool); transition: box-shadow .3s, border-color .3s; }
.el-faq__item[open] { box-shadow: var(--shadow); border-color: transparent; }
.el-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 24px; cursor: pointer; font-weight: 700; color: var(--c-ink); list-style: none; font-size: 1.04rem; }
.el-faq__item summary::-webkit-details-marker { display: none; }
.el-faq__item summary span { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--c-primary-50); transition: transform .4s var(--ease), background .3s; }
.el-faq__item summary span::before, .el-faq__item summary span::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--c-primary); transition: transform .4s var(--ease); }
.el-faq__item summary span::after { transform: rotate(90deg); }
.el-faq__item[open] summary span { background: var(--c-primary); transform: rotate(180deg); }
.el-faq__item[open] summary span::before, .el-faq__item[open] summary span::after { background: #fff; }
.el-faq__item[open] summary span::after { transform: rotate(0); }
.el-faq__item p { padding: 0 24px 22px; margin: 0; color: var(--c-muted); }
.el-final { margin-top: 0; }

/* 05. Cartes de cours -------------------------------------------------------- */
.el-card { position: relative; display: flex; flex-direction: column; border-radius: var(--el-r); background: #fff; border: 1px solid var(--c-line-cool); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.el-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.el-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-dark); }
.el-card__media > img, .el-card__media > .el-cover { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.el-card:hover .el-card__media > img, .el-card:hover .el-card__media > .el-cover { transform: scale(1.05); }
.el-card__level { position: absolute; left: 14px; top: 14px; padding: .3em .8em; border-radius: 99px; background: rgba(255, 255, 255, .94); color: var(--c-dark); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.el-card__price { position: absolute; right: 14px; top: 14px; padding: .3em .8em; border-radius: 99px; background: var(--c-accent); color: var(--c-dark); font-size: .75rem; font-weight: 800; }
.el-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.el-card__domain { margin: 0 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-primary); }
.el-card__title { font-size: 1.16rem; margin: 0 0 6px; }
.el-card__title a { color: var(--c-ink); }
.el-card:hover .el-card__title a { color: var(--c-primary); }
.el-card__by { margin: 0 0 16px; font-size: .85rem; color: var(--c-muted); }
.el-card__meta { list-style: none; margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid var(--c-line-cool); display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--c-muted); font-weight: 500; }
.el-card__meta li { display: inline-flex; align-items: center; gap: .4em; }
.el-card__meta .icon { width: 15px; height: 15px; color: var(--c-primary); }
.el-card__progress { margin-top: 14px; display: grid; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--c-primary); }

/* 06. Couvertures & anneaux -------------------------------------------------- */
.el-cover { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 100%; overflow: hidden; isolation: isolate;
	background: radial-gradient(90% 90% at 100% 0%, hsl(var(--h) 85% 62% / .9), transparent 60%), linear-gradient(140deg, hsl(var(--h) 70% 38%), hsl(calc(var(--h) + 25) 75% 16%)); color: #fff; }
.el-cover::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .18) 1px, transparent 1.4px) 0 0 / 16px 16px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 65%); mask-image: linear-gradient(200deg, #000, transparent 65%); }
.el-cover__waves { position: absolute; z-index: -1; left: -12%; bottom: -30%; width: 70%; fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 12; stroke-linecap: round; transform: rotate(-90deg); }
.el-cover__icon { display: grid; place-items: center; width: 34%; max-width: 92px; aspect-ratio: 1; border-radius: 28%; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(6px); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .5); }
.el-cover__icon .icon { width: 46%; height: 46%; stroke-width: 1.7; }
.el-cover__label { position: absolute; left: 14px; bottom: 12px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.el-ring { position: relative; display: inline-grid; place-items: center; flex: none; width: 64px; height: 64px; }
.el-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.el-ring circle { fill: none; stroke-width: 5; }
.el-ring__bg { stroke: var(--c-line-cool); }
.el-ring__fg { stroke: var(--c-primary); stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }
.el-ring b { position: relative; font-family: var(--f-heading); font-size: 1rem; font-weight: 800; color: var(--c-ink); line-height: 1; }
.el-ring b small { font-size: .6em; }
.el-ring--sm { width: 40px; height: 40px; }
.el-ring--sm b { font-size: .7rem; }
.el-ring--sm circle { stroke-width: 6; }
.el-ring--lg { width: 96px; height: 96px; }
.el-ring--lg b { font-size: 1.4rem; }

/* 07. Catalogue & filtres ---------------------------------------------------- */
.el-page-head { position: relative; overflow: hidden; padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 5vw, 76px); background: var(--c-dark); color: rgba(255, 255, 255, .72); isolation: isolate; }
.el-page-head::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 90% at 95% 10%, color-mix(in srgb, var(--c-primary) 55%, transparent), transparent 70%), radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .08) 1px, transparent 1.4px) 0 0 / 22px 22px; }
.el-page-head .breadcrumbs, .el-course-hero .breadcrumbs { margin-bottom: 18px; }
.el-page-head .breadcrumbs :is(a, span), .el-course-hero .breadcrumbs :is(a, span) { color: rgba(255, 255, 255, .7); }
.el-page-head .breadcrumbs a:hover, .el-course-hero .breadcrumbs a:hover { color: var(--c-accent); }
.el-page-head__title { color: #fff; margin-bottom: .25em; }
.el-page-head__lead { max-width: 60ch; font-size: 1.08rem; margin: 0; }
.el-catalog { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(24px, 3.5vw, 48px); padding-block: clamp(40px, 5vw, 72px) var(--section); }
.el-filters { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; display: grid; gap: 14px; }
.el-filters__box { border-radius: var(--el-r); background: #fff; border: 1px solid var(--c-line-cool); padding: 6px 8px; }
.el-filters__box summary { display: flex; align-items: center; gap: 10px; padding: 12px 10px; font-weight: 700; color: var(--c-ink); cursor: pointer; list-style: none; font-size: .95rem; }
.el-filters__box summary::-webkit-details-marker { display: none; }
.el-filters__box summary .icon { width: 18px; height: 18px; color: var(--c-primary); }
.el-filters__box ul { list-style: none; margin: 0; padding: 0 0 8px; display: grid; gap: 2px; }
.el-filters__box a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--c-text); font-size: .92rem; font-weight: 500; transition: background .25s, color .25s; }
.el-filters__box a:hover { background: var(--c-primary-50); color: var(--c-primary); }
.el-filters__box a[aria-current], .el-filters__box a.is-active { background: var(--c-primary); color: #fff; font-weight: 700; }
.el-filters__box a small, .el-filters__box a span:last-child { opacity: .7; font-size: .8rem; }
.el-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.el-toolbar p { margin: 0; font-weight: 600; color: var(--c-ink); }
.el-sort { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.el-sort select { padding: 10px 38px 10px 14px; border-radius: 999px; border: 1px solid var(--c-line-cool); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1f44' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; appearance: none; font: inherit; font-size: .9rem; color: var(--c-ink); cursor: pointer; }
.is-elearning .pagination { margin-top: 40px; }

/* 08. Fiche cours ------------------------------------------------------------ */
.el-course-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 5vw, 70px) 0 clamp(56px, 6vw, 90px); background: var(--c-dark); color: rgba(255, 255, 255, .75); }
.el-course-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 80% at 70% 0%, color-mix(in srgb, var(--c-primary) 50%, transparent), transparent 70%), radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 1.4px) 0 0 / 22px 22px; }
.el-course-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; }
.el-course-hero__copy { max-width: 760px; }
.el-course-hero__title { color: #fff; font-size: clamp(2.1rem, 4.2vw, 3.5rem); margin: 16px 0 .3em; }
.el-course-hero__subtitle { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: rgba(255, 255, 255, .8); max-width: 60ch; }
.el-course-hero__meta { list-style: none; margin: 24px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .92rem; font-weight: 600; color: #fff; }
.el-course-hero__meta li { display: inline-flex; align-items: center; gap: .5em; }
.el-course-hero__meta .icon { width: 18px; height: 18px; color: var(--c-accent); }
.el-course-hero__by { display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 600; color: #fff; }
.el-course-hero__by .el-avatar { box-shadow: 0 0 0 2px var(--c-accent); }
.el-course { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; padding-bottom: var(--section); }
.el-course__main { padding-top: 36px; min-width: 0; }
.el-course__aside { margin-top: -260px; position: relative; z-index: 2; }
.el-buy { position: sticky; top: calc(var(--header-h) + 20px); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; }
.el-buy__media { aspect-ratio: 16 / 10; background: var(--c-dark); }
.el-buy__media .el-video { border-radius: 0; height: 100%; aspect-ratio: auto; }
.el-buy__media > img { width: 100%; height: 100%; object-fit: cover; }
.el-buy__body { padding: 26px 28px 28px; display: grid; gap: 14px; }
.el-buy__price { margin: 0; font-family: var(--f-heading); font-size: 2.2rem; font-weight: 800; color: var(--c-dark); letter-spacing: -.03em; line-height: 1; }
.el-buy__progress { display: flex; gap: 14px; align-items: center; }
.el-buy__progress strong { display: block; color: var(--c-ink); }
.el-buy__progress span { font-size: .88rem; color: var(--c-muted); }
.el-buy__list { list-style: none; margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid var(--c-line-cool); display: grid; gap: 10px; font-size: .92rem; }
.el-buy__list li { display: flex; align-items: center; gap: .65em; }
.el-buy__list .icon { width: 18px; height: 18px; color: var(--c-primary); }
.el-buy .share { padding-top: 8px; }
.el-tabs { position: sticky; top: var(--header-h); z-index: 5; display: flex; gap: 6px; margin-bottom: 36px; padding: 6px; border-radius: 999px; background: rgba(244, 246, 250, .92); backdrop-filter: blur(12px); border: 1px solid var(--c-line-cool); width: max-content; max-width: 100%; overflow-x: auto; }
.el-tabs a { padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: .92rem; color: var(--c-text); white-space: nowrap; transition: background .3s, color .3s; }
.el-tabs a:hover { color: var(--c-primary); }
.el-tabs a.is-active { background: var(--c-dark); color: #fff; }
.el-block { margin-bottom: clamp(44px, 5vw, 64px); scroll-margin-top: calc(var(--header-h) + 90px); }
.el-block h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.el-block__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; margin-bottom: 20px; }
.el-block__head h2 { margin: 0; }
.el-block__head p { margin: 0; }
.el-learn { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--c-paper); border: 1px solid var(--c-line); margin-bottom: 40px; }
.el-learn h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.el-learn__list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; gap: 14px 28px; }
.el-learn__list li { font-weight: 500; font-size: .98rem; }
.el-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--c-line-cool); }
.el-two h3 { font-size: 1.15rem; }
.el-trainer { display: flex; gap: 22px; align-items: flex-start; padding: 28px; border-radius: var(--radius-lg); border: 1px solid var(--c-line-cool); background: #fff; }
.el-trainer h3 { margin-bottom: .3em; }
.el-trainer p { margin: 0; color: var(--c-muted); }

/* 09. Programme -------------------------------------------------------------- */
.el-curriculum { display: grid; gap: 12px; }
.el-chapter { border-radius: var(--el-r); border: 1px solid var(--c-line-cool); background: #fff; overflow: hidden; }
.el-chapter summary { display: flex; align-items: center; gap: 14px; padding: 18px 22px; cursor: pointer; list-style: none; background: var(--el-bg); transition: background .3s; }
.el-chapter summary::-webkit-details-marker { display: none; }
.el-chapter summary:hover { background: var(--c-primary-50); }
.el-chapter__title { flex: 1; font-weight: 700; color: var(--c-ink); }
.el-chapter__meta { font-size: .8rem; font-weight: 700; color: var(--c-muted); background: #fff; border-radius: 99px; padding: .2em .7em; }
.el-chapter summary > .icon { width: 18px; height: 18px; transition: transform .35s var(--ease); color: var(--c-muted); }
.el-chapter[open] summary > .icon { transform: rotate(180deg); }
.el-lessons { list-style: none; margin: 0; padding: 6px; }
.el-lesson > :is(a, .el-lesson__locked) { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px; color: var(--c-text); transition: background .25s; }
.el-lesson > a:hover { background: var(--el-bg); color: var(--c-ink); }
.el-lesson__state { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary-50); color: var(--c-primary); }
.el-lesson__state .icon { width: 15px; height: 15px; }
.el-lesson__body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.el-lesson__title { font-weight: 600; font-size: .96rem; }
.el-lesson__meta { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--c-muted); }
.el-lesson.is-done .el-lesson__state { background: #18a058; color: #fff; }
.el-lesson.is-done .el-lesson__state .icon { stroke-width: 3; }
.el-lesson.is-locked .el-lesson__locked { opacity: .55; cursor: not-allowed; }
.el-lesson.is-locked .el-lesson__state { background: var(--c-line-cool); color: var(--c-muted); }
.el-lesson.is-current > a { background: var(--c-dark); color: #fff; }
.el-lesson.is-current .el-lesson__state { background: var(--c-accent); color: var(--c-dark); }
.el-lesson.is-current .el-lesson__meta { color: rgba(255, 255, 255, .65); }
.el-lesson.is-current .el-tag { background: rgba(255, 255, 255, .14); color: #fff; }

/* 10. Lecteur de leçon & quiz ----------------------------------------------- */
.el-focus { background: var(--el-bg); }
.el-player-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px; height: 68px; padding: 0 clamp(12px, 2vw, 24px); background: var(--c-dark); color: #fff; box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .6); }
.admin-bar .el-player-bar { top: 32px; }
.el-player-bar__logo { flex: none; display: block; padding: 6px 10px; border-radius: 10px; background: #fff; }
.el-player-bar__logo img { height: 30px; width: auto; }
.el-player-bar__toggle { flex: none; background: rgba(255, 255, 255, .08); border-color: transparent; color: #fff; }
.el-player-bar__toggle:hover { background: rgba(255, 255, 255, .18); }
.el-player-bar__course { flex: 1; min-width: 0; margin: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-player-bar__course a { color: #fff; }
.el-player-bar__course a:hover { color: var(--c-accent); }
.el-player-bar__progress { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: rgba(255, 255, 255, .7); }
.el-player-bar__progress .el-ring__bg { stroke: rgba(255, 255, 255, .15); }
.el-player-bar__progress .el-ring__fg { stroke: var(--c-accent); }
.el-player-bar__progress .el-ring b { color: #fff; }
.el-player-bar__exit { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .3); --btn-fill: #fff; --btn-fill-fg: var(--c-dark); }
.el-player { display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: calc(100vh - 68px); transition: grid-template-columns .5s var(--ease); }
.el-player.is-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.el-player__side { position: sticky; top: 68px; height: calc(100vh - 68px); overflow-y: auto; background: #fff; border-right: 1px solid var(--c-line-cool); padding: 22px 16px 40px; overscroll-behavior: contain; }
.el-player.is-collapsed .el-player__side { visibility: hidden; padding-inline: 0; }
.el-player__side-head { padding: 0 8px 14px; }
.el-player__side-head .eyebrow { margin-bottom: .3rem; }
.el-player__side-head p { margin: 0; }
.el-curriculum--compact { gap: 8px; }
.el-curriculum--compact .el-chapter { border-radius: 14px; }
.el-curriculum--compact .el-chapter summary { padding: 13px 14px; font-size: .9rem; }
.el-curriculum--compact .el-lessons { padding: 4px; }
.el-curriculum--compact .el-lesson > :is(a, .el-lesson__locked) { padding: 10px; gap: 10px; }
.el-curriculum--compact .el-lesson__title { font-size: .88rem; line-height: 1.35; }
.el-curriculum--compact .el-lesson__state { width: 26px; height: 26px; }
.el-curriculum--compact .el-lesson__body { flex-direction: column; align-items: flex-start; }
.el-player__main { min-width: 0; padding: clamp(28px, 4vw, 56px) clamp(16px, 4vw, 56px) 80px; }
.el-player__inner { max-width: 860px; margin-inline: auto; }
.el-player__chapter { margin: 0 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-primary); }
.el-player__title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: .35em; }
.el-player__meta { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .88rem; color: var(--c-muted); font-weight: 600; }
.el-player__meta li { display: inline-flex; align-items: center; gap: .4em; }
.el-player__meta .icon { width: 16px; height: 16px; color: var(--c-primary); }
.el-player__meta .is-ok { color: #0e7a43; }
.el-player__meta .is-ok .icon { color: #18a058; }
.el-player__content { margin-top: 28px; padding: clamp(24px, 4vw, 48px); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.el-player__content > :last-child { margin-bottom: 0; }
.el-player .el-video { box-shadow: var(--shadow); }
.el-file { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 16px 20px; border-radius: var(--el-r); background: #fff; border: 1.5px dashed color-mix(in srgb, var(--c-primary) 35%, transparent); color: var(--c-ink); transition: border-color .3s, background .3s; }
.el-file:hover { border-color: var(--c-primary); background: var(--c-primary-50); color: var(--c-ink); }
.el-file__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--c-primary); color: #fff; }
.el-file__icon .icon { width: 22px; height: 22px; }
.el-file strong { display: block; }
.el-file small { color: var(--c-muted); }
.el-locked { margin-top: 12px; padding: clamp(36px, 6vw, 72px) 24px; text-align: center; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.el-locked__icon { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--c-dark); color: var(--c-accent); margin-bottom: 18px; box-shadow: 0 0 0 10px var(--c-primary-50); }
.el-locked__icon .icon { width: 32px; height: 32px; }
.el-locked p { color: var(--c-muted); max-width: 46ch; margin-inline: auto; }
.el-locked__cta { display: flex; justify-content: center; margin: 24px 0 14px; }
.el-quiz { margin-top: 32px; padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); border-top: 5px solid var(--c-accent); scroll-margin-top: 90px; }
.el-quiz__head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.el-quiz__head h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: .2em; }
.el-quiz__head p { margin: 0; color: var(--c-muted); }
.el-quiz__icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--c-accent); color: var(--c-dark); }
.el-quiz__icon .icon { width: 26px; height: 26px; }
.el-quiz__form { display: grid; gap: 18px; }
.el-quiz__form > .btn { justify-self: start; }
.el-q { margin: 0; padding: 22px; border: 1px solid var(--c-line-cool); border-radius: var(--el-r); display: grid; gap: 8px; }
.el-q legend { display: flex; gap: 12px; align-items: flex-start; padding: 0; margin-bottom: 10px; font-weight: 700; color: var(--c-ink); font-size: 1.04rem; line-height: 1.4; float: left; width: 100%; }
.el-q legend small { color: var(--c-muted); font-weight: 500; }
.el-q__num { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--c-dark); color: #fff; font-size: .8rem; }
.el-q__opt { clear: both; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--c-line-cool); cursor: pointer; transition: border-color .25s, background .25s, transform .25s var(--ease); }
.el-q__opt:hover { border-color: color-mix(in srgb, var(--c-primary) 45%, transparent); transform: translateX(3px); }
.el-q__opt input { width: 20px; height: 20px; accent-color: var(--c-primary); flex: none; margin: 0; }
.el-q__opt:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-50); }
.el-q__opt:has(input:checked) span { color: var(--c-ink); font-weight: 600; }
.el-score { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: var(--el-r); margin-bottom: 22px; animation: rise .6s var(--ease) both; }
.el-score strong { display: block; font-size: 1.1rem; color: var(--c-ink); }
.el-score span { color: var(--c-text); font-size: .94rem; }
.el-score.is-pass { background: #e5f6ec; }
.el-score.is-pass .el-ring__fg { stroke: #18a058; }
.el-score.is-fail { background: #fdecea; }
.el-score.is-fail .el-ring__fg { stroke: var(--c-signal); }
.el-score .el-ring__bg { stroke: rgba(255, 255, 255, .8); }
.el-player__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--c-line-cool); flex-wrap: wrap; }
.el-player__nav form { margin: 0; }

/* 11. Tableau de bord -------------------------------------------------------- */
.el-dash-head { position: relative; overflow: hidden; isolation: isolate; padding: clamp(36px, 4vw, 60px) 0; background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
.el-dash-head::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 120% at 100% 0%, color-mix(in srgb, var(--c-accent) 30%, transparent), transparent 70%), radial-gradient(circle at 1px 1px, rgba(10, 31, 68, .08) 1px, transparent 1.4px) 0 0 / 22px 22px; }
.el-dash-head__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.el-dash-head__hello { display: flex; align-items: center; gap: 22px; }
.el-dash-head__hello .eyebrow { margin-bottom: .4rem; }
.el-dash-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 0; }
.el-dash-head__role { margin: 6px 0 0; color: var(--c-muted); font-weight: 600; font-size: .92rem; }
.el-kpis { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.el-kpis li { min-width: 120px; padding: 16px 20px; border-radius: var(--el-r); background: #fff; box-shadow: var(--shadow-sm); }
.el-kpis strong { display: block; font-family: var(--f-heading); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--c-dark); letter-spacing: -.03em; }
.el-kpis span { font-size: .78rem; font-weight: 600; color: var(--c-muted); }
.el-kpis li:last-child { background: var(--c-dark); }
.el-kpis li:last-child strong { color: var(--c-accent); }
.el-kpis li:last-child span { color: rgba(255, 255, 255, .7); }
.el-dash { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 3.5vw, 48px); padding-block: clamp(32px, 4vw, 56px) var(--section); }
.el-dash__nav nav { position: sticky; top: calc(var(--header-h) + 20px); padding: 10px; border-radius: var(--el-r); background: #fff; border: 1px solid var(--c-line-cool); }
.el-dash__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.el-dash__nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: var(--c-text); font-weight: 600; font-size: .93rem; transition: background .25s, color .25s; }
.el-dash__nav a .icon { width: 18px; height: 18px; color: var(--c-muted); transition: color .25s; }
.el-dash__nav a:hover { background: var(--el-bg); color: var(--c-ink); }
.el-dash__nav a[aria-current] { background: var(--c-dark); color: #fff; }
.el-dash__nav a[aria-current] .icon { color: var(--c-accent); }
.el-dash__nav-title { margin: 14px 14px 6px; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); }
.el-dash__nav-foot { margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid var(--c-line-cool); }
.el-dash__nav-foot a:hover { color: var(--c-signal); }
.el-dash__main { min-width: 0; display: grid; gap: 32px; align-content: start; }
.el-panel { padding: clamp(22px, 3vw, 36px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--c-line-cool); }
.el-panel > h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: .3em; }
.el-panel--flat { padding: 0; border: 0; background: none; }
.el-panel--flat .el-block__head h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.el-resume { position: relative; overflow: hidden; display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 18px 32px 18px 18px; border-radius: var(--radius-lg); background: var(--c-dark); color: rgba(255, 255, 255, .7); }
.el-resume__media { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; }
.el-resume__media > * { width: 100%; height: 100%; object-fit: cover; }
.el-resume .eyebrow { color: var(--c-accent); margin-bottom: .5rem; }
.el-resume h2 { color: #fff; font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin-bottom: .2em; }
.el-resume .el-muted { color: rgba(255, 255, 255, .65); margin: 0 0 14px; }
.el-resume .el-bar { background: rgba(255, 255, 255, .12); margin-bottom: 18px; max-width: 420px; }
.el-resume .el-bar > span { background: linear-gradient(90deg, var(--c-accent), #ffe27a); }
.el-resume .el-ring__bg { stroke: rgba(255, 255, 255, .12); }
.el-resume .el-ring__fg { stroke: var(--c-accent); }
.el-resume .el-ring b { color: #fff; }
.el-cert-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.el-cert-list li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--el-r); background: var(--c-paper); border: 1px solid var(--c-line); }
.el-cert-list li > div { flex: 1; min-width: 0; }
.el-cert-list strong { display: block; color: var(--c-ink); }
.el-cert-list span { font-size: .85rem; color: var(--c-muted); }
.el-cert-list__seal { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%; border: 2px dashed var(--c-signal); color: var(--c-signal); }
.el-cert-list__seal .icon { width: 24px; height: 24px; }
.el-empty { padding: 48px 24px; }
.el-empty__icon { display: inline-grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: #fff; color: var(--c-primary); margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.el-empty__icon .icon { width: 30px; height: 30px; }
.el-empty p { color: var(--c-muted); max-width: 46ch; margin-inline: auto; }

/* Formulaires communs */
.el-form { display: grid; gap: 16px; margin-top: 22px; }
.el-form label:not(.el-check) { display: grid; gap: 6px; }
.el-form label > span:first-child { font-size: .86rem; font-weight: 700; color: var(--c-ink); }
.el-form label small { font-weight: 500; color: var(--c-muted); }
.el-form :is(input[type="text"], input[type="email"], input[type="password"], select, textarea) { width: 100%; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--c-line-cool); background: #fbfcfe; font: inherit; font-size: .98rem; color: var(--c-ink); transition: border-color .25s, box-shadow .25s, background .25s; }
.el-form :is(input, select, textarea):focus { outline: 0; border-color: var(--c-primary); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 14%, transparent); }
.el-form input:disabled { opacity: .65; }
.el-form > .btn { justify-self: start; }
.el-form > .btn--block { justify-self: stretch; }
.el-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.el-form__between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .9rem; }
.el-check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--c-text); cursor: pointer; }
.el-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--c-primary); flex: none; }
.el-pass { position: relative; display: block; }
.el-pass input { padding-right: 50px !important; }
.el-pass__toggle { position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--c-muted); }
.el-pass__toggle:hover, .el-pass__toggle.is-on { color: var(--c-primary); background: var(--c-primary-50); }
.el-pass__toggle .icon { width: 19px; height: 19px; }

/* 12. Connexion / inscription ----------------------------------------------- */
.el-auth { padding-block: clamp(32px, 5vw, 72px) var(--section); background: var(--el-bg); }
.el-auth__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); }
.el-auth__aside { position: relative; overflow: hidden; isolation: isolate; padding: clamp(32px, 5vw, 64px); background: linear-gradient(150deg, var(--c-dark) 40%, var(--c-dark-2)); color: rgba(255, 255, 255, .75); display: flex; flex-direction: column; }
.el-auth__logo { width: 190px; height: auto; padding: 12px 16px; border-radius: 14px; background: #fff; margin-bottom: auto; }
.el-auth__aside .eyebrow { margin-top: 56px; }
.el-auth__aside h1 { color: #fff; font-size: clamp(2rem, 3.4vw, 3rem); }
.el-auth__aside h1 em { color: var(--c-accent); background: none; }
.check-list--light li { color: #fff; font-weight: 500; }
.el-auth__aside .check-list { margin-bottom: 0; }
.el-auth__waves { position: absolute; z-index: -1; right: -70px; top: -70px; width: 300px; fill: none; stroke: var(--c-primary); stroke-width: 14; stroke-linecap: round; opacity: .6; }
.el-auth__waves path:nth-child(2) { stroke: var(--c-accent); }
.el-auth__waves path:nth-child(3) { stroke: var(--c-signal); }
.el-auth__card { padding: clamp(28px, 5vw, 60px); }
.el-auth__tabs { display: flex; gap: 4px; padding: 5px; margin-bottom: 30px; border-radius: 999px; background: var(--el-bg); overflow-x: auto; scrollbar-width: none; }
.el-auth__tabs a { flex: 1; text-align: center; padding: 11px 16px; border-radius: 999px; font-weight: 700; font-size: .9rem; color: var(--c-text); white-space: nowrap; transition: background .3s, color .3s, box-shadow .3s; }
.el-auth__tabs a:hover { color: var(--c-primary); }
.el-auth__tabs a[aria-selected="true"] { background: #fff; color: var(--c-dark); box-shadow: var(--shadow-sm); }
.el-auth__panel h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: .3em; }
.el-auth__panel[hidden] { display: none; }
.el-auth__panel:not([hidden]) { animation: rise .5s var(--ease) both; }
.el-auth__switch { margin: 22px 0 0; text-align: center; font-size: .92rem; color: var(--c-muted); }
.el-auth__switch a { font-weight: 700; }

/* 13. Responsive & mouvement ------------------------------------------------- */
@media (max-width: 1200px) {
	.el-domains__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.el-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.el-value:nth-child(3) { border-left: 0; padding-left: 0; }
	.el-value:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .1); }
}
@media (max-width: 1024px) {
	.el-hero__grid, .el-cert-show__grid, .el-faq__grid { grid-template-columns: minmax(0, 1fr); }
	.el-hero__visual { max-width: 520px; width: 100%; margin-inline: auto; }
	.el-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
	.el-steps__list::before { display: none; }
	.el-audience__grid { grid-template-columns: minmax(0, 1fr); }
	.el-course-hero__grid, .el-course { grid-template-columns: minmax(0, 1fr); }
	.el-course__aside { margin-top: 0; order: -1; padding-top: 28px; }
	.el-buy { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.el-buy__media { aspect-ratio: auto; min-height: 100%; }
	.el-catalog, .el-dash { grid-template-columns: minmax(0, 1fr); }
	.el-filters { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
	.el-dash__nav nav { position: static; }
	.el-dash__nav ul:first-child { display: flex; overflow-x: auto; scrollbar-width: none; }
	.el-dash__nav a { white-space: nowrap; }
	.el-player { grid-template-columns: minmax(0, 1fr); }
	.el-player__side { position: fixed; z-index: 55; top: 68px; left: 0; bottom: 0; height: auto; width: min(360px, 88vw); box-shadow: var(--shadow-lg); transform: translateX(-102%); transition: transform .5s var(--ease); visibility: visible !important; padding-inline: 16px !important; }
	.el-player.is-open .el-player__side { transform: none; }
	.el-player.is-open::after { content: ''; position: fixed; inset: 68px 0 0; z-index: 54; background: rgba(10, 31, 68, .45); }
	.el-auth__grid { grid-template-columns: minmax(0, 1fr); }
	.el-auth__aside .eyebrow { margin-top: 28px; }
	.el-resume { grid-template-columns: 160px minmax(0, 1fr); }
	.el-resume > .el-ring { display: none; }
}
@media (max-width: 760px) {
	.el-subnav__inner { flex-wrap: wrap; padding-block: 10px 0; gap: 4px 12px; }
	.el-subnav__brand { order: 1; }
	.el-subnav__account { order: 2; margin-left: auto; }
	.el-subnav ul { order: 3; flex-basis: 100%; margin-inline: -14px; }
	.el-subnav li a { padding: 13px 14px; }
	.el-subnav__name { display: none; }
	.el-subnav__inner { flex-wrap: wrap; }
	.el-subnav__account { flex-wrap: nowrap; }
	.el-subnav__account .btn--ghost { display: none; }
	.el-subnav__brand span { font-size: .95rem; }
	.el-auth__aside { padding: 28px 22px 30px; }
	.el-auth__logo, .el-auth__aside .check-list { display: none; }
	.el-auth__aside .eyebrow { margin-top: 0; }
	.el-auth__aside h1 { font-size: 1.75rem; margin: 0; }
	.el-auth__waves { width: 180px; right: -50px; top: -50px; }
	.el-auth__card { padding: 24px 18px 36px; }
	.el-auth__tabs { border-radius: 18px; }
	.el-auth__tabs a { white-space: normal; line-height: 1.2; padding: 10px 8px; font-size: .8rem; border-radius: 14px; display: grid; place-items: center; }
	.el-hero__visual { padding: 0 0 30px 0; }
	.el-float--course { left: -6px; bottom: 40px; max-width: 250px; }
	.el-float--quiz { right: -6px; }
	.el-search { flex-wrap: wrap; border-radius: 22px; padding: 8px; }
	.el-search > .icon { display: none; }
	.el-search input[type="search"] { flex-basis: 100%; padding: 10px 12px; }
	.el-search .btn { width: 100%; }
	.el-values__grid { grid-template-columns: minmax(0, 1fr); }
	.el-value { border-left: 0 !important; padding: 18px 0 !important; border-top: 1px solid rgba(255, 255, 255, .1); }
	.el-value:first-child { border-top: 0; }
	.el-domains__grid { grid-template-columns: minmax(0, 1fr); }
	.el-steps__list { grid-template-columns: minmax(0, 1fr); }
	.el-learn__list, .el-two, .el-form__row, .el-filters { grid-template-columns: minmax(0, 1fr); }
	.el-buy { grid-template-columns: minmax(0, 1fr); }
	.el-buy__media { aspect-ratio: 16 / 10; }
	.el-tabs { top: 0; width: 100%; }
	.el-tabs a { flex: 1; text-align: center; padding: 10px 12px; }
	.el-trainer { flex-direction: column; }
	.el-dash-head__hello { gap: 16px; }
	.el-avatar--xl { width: 64px; height: 64px; font-size: 1.7rem; }
	.el-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
	.el-kpis li { min-width: 0; }
	.el-resume { grid-template-columns: minmax(0, 1fr); padding: 16px; }
	.el-cert-list li { flex-wrap: wrap; }
	.el-cert-list .btn { width: 100%; }
	.el-verify__row { flex-direction: column; }
	.el-player-bar { gap: 10px; height: 60px; }
	.el-player-bar__logo img { height: 24px; }
	.el-player-bar__progress span, .el-player-bar__exit span { display: none; }
	.el-player-bar__exit { padding: .7em; }
	.el-player { min-height: calc(100vh - 60px); }
	.el-player__side { top: 60px; }
	.el-player.is-open::after { inset: 60px 0 0; }
	.el-player__nav { flex-direction: column-reverse; align-items: stretch; }
	.el-player__nav > * { width: 100%; }
	.el-player__nav .btn { width: 100%; }
	.el-player__nav > span:empty { display: none; }
	.el-quiz__form > .btn { justify-self: stretch; }
	.el-auth { padding-top: 0; }
	.el-auth .container { padding-inline: 0; }
	.el-auth__grid { border-radius: 0; }
}
@media (max-width: 782px) { .admin-bar .el-player-bar { top: 46px; } }
@media (prefers-reduced-motion: reduce) {
	.el-float, .el-hero__postmark > svg { animation: none; }
	.el-card, .el-domain, .el-aud, .el-cert-mock__paper { transition: none; }
}
@media print {
	.el-subnav, .el-player-bar, .el-player__side, .el-player__nav, .el-tabs { display: none !important; }
	.el-player { display: block; }
}
.el-q.is-missing { animation: shake .5s; border-color: var(--c-signal); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }