/* ============================================================
   Learn to Earn : pages de l'application (comptes, espace membre)
   S'appuie sur les jetons et composants de landing.css.
   ============================================================ */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Messages ---------- */
.alert { margin-bottom: 18px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; line-height: 1.45; }
.alert--error { background: #fdecec; color: #a12727; }
.alert--success { background: #e6f6ef; color: #146b49; }
.alert--info { background: var(--primary-soft); color: var(--primary-dark); }

/* ---------- Pages de connexion / inscription ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; background: var(--bg-soft); }
.auth__brand { display: none; }
.auth__main { display: flex; flex-direction: column; align-items: center; padding: 20px var(--gutter) 48px; }
.auth__top { width: 100%; max-width: 460px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.auth__back { color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; padding: 12px 4px; }
.auth__back:hover { color: var(--primary); }
.auth__card { width: 100%; max-width: 460px; padding: 30px 22px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow); }
.auth__title { font-size: 28px; }
.auth__lead { margin-top: 10px; }
.auth__lead + .auth__lead { margin-top: 8px; }
.auth__lead strong { color: var(--ink); word-break: break-all; }
.auth__switch { margin-top: 22px; text-align: center; font-size: 15px; }
.auth__switch a { font-weight: 700; }
.auth__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; margin-bottom: 18px; background: var(--primary-soft); color: var(--primary); font-size: 26px; }
.auth .btn--block + .auth__switch, .auth__lead + .btn { margin-top: 24px; }

/* ---------- Formulaires ---------- */
.form { display: grid; gap: 18px; margin-top: 24px; }
.field { display: grid; gap: 7px; }
.field label { color: var(--ink); font-weight: 700; font-size: 15px; }
.field__optional { color: var(--muted); font-weight: 500; }
.field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field__link { font-size: 14px; font-weight: 600; padding: 4px 0; }
.field input[type="text"], .field input[type="email"], .field input[type="password"] {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: var(--radius-sm);
  border: 2px solid var(--line); background: var(--white); color: var(--ink);
  font: 500 16px/1.4 var(--font); /* 16 px : évite le zoom automatique sur iPhone */
  transition: border-color .2s, box-shadow .2s;
}
.field input:hover { border-color: #cfd3e3; }
.field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(106, 79, 214, .15); }
.field input[aria-invalid="true"] { border-color: #d64545; }
.field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(214, 69, 69, .15); }
.field__help { font-size: 13px; color: var(--text); }
.field__error { font-size: 14px; font-weight: 600; color: #b42828; }
.field__password { position: relative; }
.field__password input { padding-right: 96px; }
.field__toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 40px; padding: 8px 12px;
  border: 0; border-radius: 8px; background: transparent; color: var(--primary); font: 700 14px var(--font); cursor: pointer;
}
.field__toggle:hover { background: var(--primary-soft); }
.field--check { grid-template-columns: 24px 1fr; align-items: start; column-gap: 12px; }
.field--check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--primary); cursor: pointer; }
.field--check label { font-weight: 500; font-size: 14px; color: var(--text); line-height: 1.5; cursor: pointer; }
.field--check .field__error { grid-column: 2; }
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }

/* Panneau de marque, à gauche sur ordinateur */
@media (min-width: 1024px) {
  .auth { grid-template-columns: minmax(380px, 5fr) 7fr; }
  .auth__brand {
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: space-between;
    padding: 40px 48px; color: rgba(255, 255, 255, .88); overflow: hidden;
    background: linear-gradient(160deg, #3f2a9c 0%, #5238b8 35%, #6a4fd6 70%, #8f74e6 100%);
  }
  .auth__brand::after { content: ""; position: absolute; width: 520px; height: 520px; right: -220px; bottom: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 163, 61, .5), transparent 65%); }
  .auth__brand > * { position: relative; z-index: 1; }
  .logo--light { color: var(--white); }
  .logo--light .logo__name span { color: #f6d9ab; }
  .auth__pitch h2 { color: var(--white); font-size: 40px; max-width: 420px; }
  .auth__pitch ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; font-size: 17px; font-weight: 600; }
  .auth__pitch li { display: flex; align-items: center; gap: 12px; }
  .auth__pitch .icon { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: rgba(255, 255, 255, .18); color: var(--white); }
  .auth__legal { font-size: 13px; color: rgba(255, 255, 255, .6); }
  .auth__main { justify-content: center; padding: 40px; }
  .auth__top .logo { visibility: hidden; }
  .auth__card { padding: 40px; }
}

/* ---------- Espace membre ---------- */
.espace { background: var(--bg-soft); min-height: 100vh; }
.espace .header__actions form { margin: 0; }
.streak-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: var(--radius-pill); background: #fff3e0; color: #b4651a; font-weight: 800; font-size: 15px; }
.espace__main { padding-block: 28px 64px; }
.welcome { display: grid; gap: 22px; padding: 26px 22px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow); }
.welcome h1 { font-size: clamp(28px, 6vw, 40px); }
.welcome__lead { margin-top: 8px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.kpis li { padding: 14px 12px; border-radius: 16px; background: var(--bg-soft); text-align: center; }
.kpis strong { display: block; font-size: 28px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.kpis span { font-size: 13px; }
.upsell { display: grid; gap: 14px; margin-top: 20px; padding: 24px 22px; border-radius: 24px; color: rgba(255, 255, 255, .9); background: linear-gradient(135deg, #5238b8, #6a4fd6 60%, #8f74e6); }
.upsell h2 { color: var(--white); font-size: 24px; margin-bottom: 6px; }
.upsell--highlight { box-shadow: 0 0 0 4px rgba(232, 163, 61, .6); }
.upsell form { margin: 0; }
.membership { display: grid; gap: 14px; margin-top: 20px; padding: 22px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow); }
.membership h2 { font-size: 20px; margin-bottom: 4px; }
.membership form { margin: 0; }
.checklist { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.checklist li { position: relative; padding: 14px 16px 14px 46px; border-radius: var(--radius-sm); background: var(--white); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); word-break: break-word; }
.checklist li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid var(--muted); }
.checklist li.is-ok::before { border-color: var(--success); background: var(--success); }
.checklist--log li { font-weight: 500; }
.upsell__soon { align-self: center; padding: 10px 16px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .16); font-weight: 700; font-size: 14px; text-align: center; }
.espace__section { margin-top: 36px; }
.espace__section > h2 { font-size: 24px; margin-bottom: 16px; }
.formations { display: grid; gap: 16px; }
.formation-card { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 16px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.formation-card__cover { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius-sm); }
.formation-card h3 { font-size: 19px; margin-top: 2px; }
.formation-card__meta { margin-top: 4px; font-size: 14px; }
.espace__note { margin-top: 18px; font-size: 14px; color: var(--text); text-align: center; }

/* ---------- Formation et lecteur ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 14px; }
.crumbs a { color: var(--primary); font-weight: 600; text-decoration: none; padding: 6px 0; }
.crumbs span[aria-hidden] { color: var(--muted); }
.formation-card { position: relative; }
.formation-card__link { color: inherit; text-decoration: none; }
.formation-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.formation-card:hover { box-shadow: var(--shadow-lg); }
.course-head { display: grid; gap: 20px; padding: 22px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow); }
.course-head__cover { width: 140px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius-card); }
.course-head h1 { font-size: clamp(26px, 5vw, 38px); margin-top: 4px; }
.course-head__meta { margin-top: 6px; font-weight: 600; color: var(--ink); font-size: 15px; }
.course-head__desc { margin-top: 10px; }
.course-head .progress { max-width: 520px; }
.course-head__cta { margin-top: 20px; }
.course-head form { margin: 0; }
.episode-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.episode-row a { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-card); background: var(--white); box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.episode-row a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.episode-row__num { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.episode-row__title { display: block; color: var(--ink); font-weight: 700; line-height: 1.35; }
.episode-row__meta { display: block; font-size: 13px; margin-top: 2px; }
.episode-row__state { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: var(--white); font-size: 16px; }
.episode-row .icon--fill { fill: currentColor; margin-left: 2px; }
.episode-row.is-done .episode-row__state { background: var(--success); }
.episode-row.is-done .episode-row__num { background: #e6f6ef; color: var(--success); }
.episode-row.is-locked .episode-row__state { background: var(--bg-soft); color: var(--muted); }
.episode-row.is-locked .episode-row__title { color: var(--text); }
.tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; }
.tag--free { background: #e6f6ef; color: var(--success); }

.watch { display: grid; gap: 24px; }
.watch__stage { display: flex; justify-content: center; }
.player { position: relative; width: 100%; max-width: 420px; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #0f1733; box-shadow: var(--shadow-lg); user-select: none; -webkit-user-select: none; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__mark { position: absolute; z-index: 2; pointer-events: none; padding: 2px 6px; color: rgba(255, 255, 255, .28); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: top 1s, left 1s; white-space: nowrap; }
.player--locked img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(6px) brightness(.55); transform: scale(1.05); }
.player__lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px; text-align: center; color: rgba(255, 255, 255, .9); }
.player__lock .icon { width: 44px; height: 44px; color: var(--white); }
.player__lock h2 { color: var(--white); font-size: 24px; }
.player__lock form { margin: 8px 0 0; }
.watch__info h1 { font-size: clamp(24px, 5vw, 34px); margin-top: 6px; }
.watch__desc { margin-top: 12px; }
.takeaways { margin-top: 20px; padding: 20px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.takeaways__label { display: inline-block; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.takeaways ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.takeaways li { display: flex; gap: 10px; color: var(--ink); font-weight: 600; line-height: 1.45; }
.takeaways .icon { flex: none; margin-top: 3px; color: var(--success); font-size: 18px; }
.watch__status { margin-top: 16px; min-height: 1.6em; font-weight: 700; color: var(--success); }
.watch__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }

/* Quiz de fin de formation et badges */
.quiz { max-width: 720px; margin-inline: auto; }
.quiz-head { padding: 24px 22px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow); }
.quiz-head h1 { font-size: clamp(24px, 5vw, 34px); margin: 4px 0 10px; }
.quiz form { margin-top: 18px; display: grid; gap: 16px; }
.quiz .alert { margin: 18px 0 0; }
.quiz .alert a { color: inherit; font-weight: 700; }
.quiz-q { min-width: 0; margin: 0; padding: 20px; border: 0; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); scroll-margin-top: calc(var(--header-h) + 16px); }
.quiz-q.is-missing { box-shadow: 0 0 0 2px #d64545; }
.quiz-q legend { float: left; width: 100%; padding: 0; }
.quiz-q__num { display: block; color: var(--primary); font-size: 13px; font-weight: 800; }
.quiz-q__text { display: block; margin-top: 4px; color: var(--ink); font-size: 18px; font-weight: 700; line-height: 1.4; }
.quiz-q .field__error { clear: both; padding-top: 8px; }
.quiz-q__choices { clear: both; display: grid; gap: 10px; padding-top: 14px; }
.quiz-choice { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 12px; min-height: 48px; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; line-height: 1.4; cursor: pointer; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.quiz-choice:hover { border-color: #b6a3f0; }
.quiz-choice input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--primary); }
.quiz-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.quiz-choice:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
.quiz-submit { position: sticky; bottom: 0; display: grid; gap: 6px; padding: 10px 14px 12px; border-radius: var(--radius) var(--radius) 0 0; background: var(--white); box-shadow: 0 -8px 24px rgba(15, 23, 51, .1); }
.quiz-submit__count { text-align: center; color: var(--ink); font-size: 14px; font-weight: 700; }
.quiz-result { display: grid; justify-items: center; gap: 10px; padding: 30px 22px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow); text-align: center; }
.quiz-result h1 { font-size: clamp(26px, 6vw, 38px); }
.quiz-result__score { color: var(--ink); }
.quiz-result .btn { margin-top: 8px; }
.quiz-review { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.quiz-review__item { padding: 18px 20px; border-radius: var(--radius-card); border-left: 4px solid var(--line); background: var(--white); box-shadow: var(--shadow); }
.quiz-review__item.is-right { border-left-color: var(--success); }
.quiz-review__item.is-wrong { border-left-color: #d64545; }
.quiz-review__item .quiz-q__text { font-size: 16px; }
.quiz-review__mine, .quiz-review__good { margin-top: 8px; color: var(--ink); font-weight: 600; }
.quiz-review__mine span, .quiz-review__good span { color: var(--text); font-weight: 500; }
.quiz-review__why { margin-top: 8px; font-size: 15px; }
.badge-medal { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 26px; }
.badge-medal--lg { width: 76px; height: 76px; font-size: 38px; }
.is-passed .badge-medal, .badge-item .badge-medal { background: var(--gradient-card); color: var(--white); }
.quiz-card { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 14px; margin-top: 24px; padding: 20px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.quiz-card h2 { font-size: 20px; }
.quiz-card p { margin-top: 2px; font-size: 15px; }
.quiz-card .btn { grid-column: 1 / -1; justify-content: center; }
.badge-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.badge-item { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius-card); background: var(--white); box-shadow: var(--shadow); }
.badge-item strong { display: block; color: var(--ink); }
.badge-item span:not(.badge-medal) { display: block; font-size: 14px; }
.badge-item .badge-item__date { margin-top: 2px; color: var(--text); font-size: 13px; }

@media (max-width: 479px) {
  .espace .logo__name { display: none; }
  .espace .header__cta { padding-inline: 14px; white-space: nowrap; }
}

@media (min-width: 768px) {
  .course-head { grid-template-columns: 160px 1fr; padding: 28px; }
  .course-head__cover { width: 160px; }
  .watch { grid-template-columns: minmax(0, 420px) 1fr; align-items: start; gap: 40px; }
  .watch__stage { position: sticky; top: calc(var(--header-h) + 20px); }
  .player { max-height: calc(100vh - var(--header-h) - 60px); width: auto; height: calc(100vh - var(--header-h) - 60px); max-width: 100%; }
}

@media (min-width: 768px) {
  .welcome { grid-template-columns: 1fr auto; align-items: center; padding: 32px; }
  .kpis { min-width: 340px; }
  .upsell { grid-template-columns: 1fr auto; align-items: center; padding: 28px 32px; }
  .membership { grid-template-columns: 1fr auto; align-items: center; padding: 24px 32px; }
  .formations { grid-template-columns: 1fr 1fr; }
  .formation-card { grid-template-columns: 120px 1fr; padding: 20px; }
  .quiz-card { grid-template-columns: 52px 1fr auto; padding: 22px 26px; }
  .quiz-card .btn { grid-column: auto; }
  .badge-list { grid-template-columns: 1fr 1fr; }
}

/* Canal Telegram, sur le résultat du quiz */
.telegram-join { display: grid; justify-items: center; gap: 10px; width: 100%; max-width: 480px; margin-top: 12px; padding: 20px; border-radius: 18px; background: var(--primary-soft, #f0ebff); }
.telegram-bonus { display: grid; justify-items: center; }
.telegram-join__check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.telegram-join__check input { width: 20px; height: 20px; accent-color: var(--primary); }
.telegram-join__aide { font-size: 13px; }